feat(web): new step for user details

frontend/src/app/features/calculator/calculator-page.component.html

@@ -1,64 +1,79 @@
 <div class="container hero">
   <h1>{{ 'CALC.TITLE' | translate }}</h1>
   <p class="subtitle">{{ 'CALC.SUBTITLE' | translate }}</p>
+
+  @if (orderSuccess()) {
+    <app-alert type="success">{{ 'USER_DETAILS.ORDER_SUCCESS' | translate }}</app-alert>
+  }
+  @if (error()) {
+    <app-alert type="error">{{ 'CALC.ERROR_GENERIC' | translate }}</app-alert>
+  }
 </div>
 
-<div class="container content-grid">
-  <!-- Left Column: Input -->
-  <div class="col-input">
-    <app-card>
-      <div class="mode-selector">
-        <div class="mode-option"
-             [class.active]="mode() === 'easy'"
-             (click)="mode.set('easy')">
-          {{ 'CALC.MODE_EASY' | translate }}
-        </div>
-        <div class="mode-option"
-             [class.active]="mode() === 'advanced'"
-             (click)="mode.set('advanced')">
-          {{ 'CALC.MODE_ADVANCED' | translate }}
-        </div>
-      </div>
-
-      <app-upload-form
-        #uploadForm
-        [mode]="mode()"
-        [loading]="loading()"
-        [uploadProgress]="uploadProgress()"
-        (submitRequest)="onCalculate($event)"
-      ></app-upload-form>
-    </app-card>
-  </div>
-
-  <!-- Right Column: Result or Info -->
-  <div class="col-result" #resultCol>
-    @if (error()) {
-      <app-alert type="error">Si è verificato un errore durante il calcolo del preventivo.</app-alert>
-    }
-
-    @if (loading()) {
-        <app-card class="loading-state">
-            <div class="loader-content">
-                <div class="spinner"></div>
-                <h3 class="loading-title">Analisi in corso...</h3>
-                <p class="loading-text">Stiamo analizzando la geometria e calcolando il percorso utensile.</p>
+@if (step() === 'details' && result()) {
+    <div class="container">
+        <app-user-details
+            [quote]="result()!"
+            (submitOrder)="onSubmitOrder($event)"
+            (cancel)="onCancelDetails()">
+        </app-user-details>
+    </div>
+} @else {
+    <div class="container content-grid">
+      <!-- Left Column: Input -->
+      <div class="col-input">
+        <app-card>
+          <div class="mode-selector">
+            <div class="mode-option"
+                 [class.active]="mode() === 'easy'"
+                 (click)="mode.set('easy')">
+              {{ 'CALC.MODE_EASY' | translate }}
             </div>
+            <div class="mode-option"
+                 [class.active]="mode() === 'advanced'"
+                 (click)="mode.set('advanced')">
+              {{ 'CALC.MODE_ADVANCED' | translate }}
+            </div>
+          </div>
+    
+          <app-upload-form
+            #uploadForm
+            [mode]="mode()"
+            [loading]="loading()"
+            [uploadProgress]="uploadProgress()"
+            (submitRequest)="onCalculate($event)"
+          ></app-upload-form>
         </app-card>
-    } @else if (result()) {
-      <app-quote-result 
-        [result]="result()!" 
-        (consult)="onConsult()"
-        (itemChange)="uploadForm.updateItemQuantityByName($event.fileName, $event.quantity)"
-      ></app-quote-result>
-    } @else {
-      <app-card>
-        <h3>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
-        <ul class="benefits">
-           <li>{{ 'CALC.BENEFITS_1' | translate }}</li>
-           <li>{{ 'CALC.BENEFITS_2' | translate }}</li>
-           <li>{{ 'CALC.BENEFITS_3' | translate }}</li>
-        </ul>
-      </app-card>
-    }
-  </div>
-</div>
+      </div>
+    
+      <!-- Right Column: Result or Info -->
+      <div class="col-result" #resultCol>
+    
+        @if (loading()) {
+            <app-card class="loading-state">
+                <div class="loader-content">
+                    <div class="spinner"></div>
+                    <h3 class="loading-title">Analisi in corso...</h3>
+                    <p class="loading-text">Stiamo analizzando la geometria e calcolando il percorso utensile.</p>
+                </div>
+            </app-card>
+        } @else if (result()) {
+          <app-quote-result 
+            [result]="result()!" 
+            (consult)="onConsult()"
+            (proceed)="onProceed()"
+            (itemChange)="uploadForm.updateItemQuantityByName($event.fileName, $event.quantity)"
+          ></app-quote-result>
+        } @else {
+          <app-card>
+            <h3>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
+            <ul class="benefits">
+               <li>{{ 'CALC.BENEFITS_1' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_2' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_3' | translate }}</li>
+            </ul>
+          </app-card>
+        }
+      </div>
+    </div>
+}