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

@@ -1,8 +1,24 @@
 <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>
 
+@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">
@@ -32,9 +48,6 @@
     
       <!-- 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">
@@ -48,6 +61,7 @@
           <app-quote-result 
             [result]="result()!" 
             (consult)="onConsult()"
+            (proceed)="onProceed()"
             (itemChange)="uploadForm.updateItemQuantityByName($event.fileName, $event.quantity)"
           ></app-quote-result>
         } @else {
@@ -62,3 +76,4 @@
         }
       </div>
     </div>
+}