feat(back-end and front-end): calculator improvements

frontend/src/app/features/checkout/checkout.component.html

@@ -323,31 +323,13 @@
             </div>
           </div>
 
-          <div class="summary-totals" *ngIf="quoteSession() as session">
-            <div class="total-row">
-              <span>{{ "CHECKOUT.SUBTOTAL" | translate }}</span>
-              <span>{{ session.itemsTotalChf | currency: "CHF" }}</span>
-            </div>
-            <div class="total-row">
-              <span>{{ "CHECKOUT.SETUP_FEE" | translate }}</span>
-              <span>{{
-                (session.baseSetupCostChf ?? session.session.setupCostChf)
-                  | currency: "CHF"
-              }}</span>
-            </div>
-            <div class="total-row" *ngIf="(session.nozzleChangeCostChf || 0) > 0">
-              <span>Cambio Ugello</span>
-              <span>{{ session.nozzleChangeCostChf | currency: "CHF" }}</span>
-            </div>
-            <div class="total-row">
-              <span>{{ "CHECKOUT.SHIPPING" | translate }}</span>
-              <span>{{ session.shippingCostChf | currency: "CHF" }}</span>
-            </div>
-            <div class="grand-total">
-              <span>{{ "CHECKOUT.TOTAL" | translate }}</span>
-              <span>{{ session.grandTotalChf | currency: "CHF" }}</span>
-            </div>
-          </div>
+          <app-price-breakdown
+            *ngIf="quoteSession() as session"
+            [rows]="checkoutPriceBreakdownRows(session)"
+            [total]="session.grandTotalChf || 0"
+            [currency]="'CHF'"
+            [totalLabelKey]="'CHECKOUT.TOTAL'"
+          ></app-price-breakdown>
         </app-card>
       </div>
     </div>

frontend/src/app/features/checkout/checkout.component.scss

@@ -355,32 +355,6 @@ app-toggle-selector.user-type-selector-compact {
   padding-right: var(--space-3);
 }
 
-.summary-totals {
-  background: var(--color-neutral-100);
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  margin-top: var(--space-6);
-
-  .total-row {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--space-2);
-    font-size: 0.95rem;
-    color: var(--color-text);
-  }
-
-  .grand-total {
-    display: flex;
-    justify-content: space-between;
-    color: var(--color-text);
-    font-weight: 700;
-    font-size: 1.5rem;
-    margin-top: var(--space-4);
-    padding-top: var(--space-4);
-    border-top: 2px solid var(--color-border);
-  }
-}
-
 .actions {
   margin-top: var(--space-8);
 

frontend/src/app/features/checkout/checkout.component.ts

@@ -16,6 +16,10 @@ import {
   AppToggleSelectorComponent,
   ToggleOption,
 } from '../../shared/components/app-toggle-selector/app-toggle-selector.component';
+import {
+  PriceBreakdownComponent,
+  PriceBreakdownRow,
+} from '../../shared/components/price-breakdown/price-breakdown.component';
 import { LanguageService } from '../../core/services/language.service';
 import { StlViewerComponent } from '../../shared/components/stl-viewer/stl-viewer.component';
 import { getColorHex } from '../../core/constants/colors.const';
@@ -31,6 +35,7 @@ import { getColorHex } from '../../core/constants/colors.const';
     AppButtonComponent,
     AppCardComponent,
     AppToggleSelectorComponent,
+    PriceBreakdownComponent,
     StlViewerComponent,
   ],
   templateUrl: './checkout.component.html',
@@ -197,6 +202,28 @@ export class CheckoutComponent implements OnInit {
     return this.quoteSession()?.cadTotalChf ?? 0;
   }
 
+  checkoutPriceBreakdownRows(session: any): PriceBreakdownRow[] {
+    return [
+      {
+        labelKey: 'CHECKOUT.SUBTOTAL',
+        amount: session?.itemsTotalChf ?? 0,
+      },
+      {
+        labelKey: 'CHECKOUT.SETUP_FEE',
+        amount: session?.baseSetupCostChf ?? session?.session?.setupCostChf ?? 0,
+      },
+      {
+        label: 'Cambio Ugello',
+        amount: session?.nozzleChangeCostChf ?? 0,
+        visible: (session?.nozzleChangeCostChf ?? 0) > 0,
+      },
+      {
+        labelKey: 'CHECKOUT.SHIPPING',
+        amount: session?.shippingCostChf ?? 0,
+      },
+    ];
+  }
+
   itemMaterial(item: any): string {
     return String(
       item?.materialCode ?? this.quoteSession()?.session?.materialCode ?? '-',