feat(back-end front-end): uuid truncated for better UX

frontend/src/app/app.routes.ts

@@ -33,6 +33,10 @@ export const routes: Routes = [
         path: 'payment/:orderId',
         loadComponent: () => import('./features/payment/payment.component').then(m => m.PaymentComponent)
       },
+      {
+        path: 'ordine/:orderId',
+        loadComponent: () => import('./features/payment/payment.component').then(m => m.PaymentComponent)
+      },
       {
         path: 'order-confirmed/:orderId',
         loadComponent: () => import('./features/order-confirmed/order-confirmed.component').then(m => m.OrderConfirmedComponent)

frontend/src/app/features/order-confirmed/order-confirmed.component.html

@@ -8,8 +8,8 @@
     <app-card class="status-card">
       <div class="status-badge">{{ 'ORDER_CONFIRMED.STATUS' | translate }}</div>
       <h2>{{ 'ORDER_CONFIRMED.HEADING' | translate }}</h2>
-      <p class="order-ref" *ngIf="orderId">
-        {{ 'ORDER_CONFIRMED.ORDER_REF' | translate }}: <strong>#{{ orderId.substring(0, 8) }}</strong>
+      <p class="order-ref" *ngIf="orderNumber">
+        {{ 'ORDER_CONFIRMED.ORDER_REF' | translate }}: <strong>#{{ orderNumber }}</strong>
       </p>
 
       <div class="message-block">

frontend/src/app/features/order-confirmed/order-confirmed.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+import { QuoteEstimatorService } from '../calculator/services/quote-estimator.service';
 
 @Component({
   selector: 'app-order-confirmed',
@@ -15,14 +16,33 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
 export class OrderConfirmedComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private quoteService = inject(QuoteEstimatorService);
 
   orderId: string | null = null;
+  orderNumber: string | null = null;
 
   ngOnInit(): void {
     this.orderId = this.route.snapshot.paramMap.get('orderId');
+    if (!this.orderId) {
+      return;
+    }
+
+    this.orderNumber = this.extractOrderNumber(this.orderId);
+    this.quoteService.getOrder(this.orderId).subscribe({
+      next: (order) => {
+        this.orderNumber = order?.orderNumber ?? this.orderNumber;
+      },
+      error: () => {
+        // Keep fallback derived from UUID when API is unavailable.
+      }
+    });
   }
 
   goHome(): void {
     this.router.navigate(['/']);
   }
+
+  private extractOrderNumber(orderId: string): string {
+    return orderId.split('-')[0];
+  }
 }

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

@@ -57,7 +57,7 @@
           <div class="bank-details">
             <p><strong>{{ 'PAYMENT.BANK_OWNER' | translate }}:</strong> 3D Fab Switzerland</p>
             <p><strong>{{ 'PAYMENT.BANK_IBAN' | translate }}:</strong> CH98 0000 0000 0000 0000 0</p>
-            <p><strong>{{ 'PAYMENT.BANK_REF' | translate }}:</strong> {{ o.id }}</p>
+            <p><strong>{{ 'PAYMENT.BANK_REF' | translate }}:</strong> {{ getDisplayOrderNumber(o) }}</p>
             <p class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p>
 
             <div class="qr-bill-actions">
@@ -80,7 +80,7 @@
       <app-card class="sticky-card">
         <div class="card-header-simple">
           <h3>{{ 'PAYMENT.SUMMARY_TITLE' | translate }}</h3>
-          <p class="order-id">#{{ o.id.substring(0, 8) }}</p>
+          <p class="order-id">#{{ getDisplayOrderNumber(o) }}</p>
         </div>
 
         <div class="summary-totals">

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

@@ -58,13 +58,16 @@ export class PaymentComponent implements OnInit {
   }
 
   downloadInvoice() {
-    if (!this.orderId) return;
-    this.quoteService.getOrderInvoice(this.orderId).subscribe({
+    const orderId = this.orderId;
+    if (!orderId) return;
+    this.quoteService.getOrderInvoice(orderId).subscribe({
       next: (blob) => {
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
-        a.download = `invoice-${this.orderId}.pdf`;
+        const fallbackOrderNumber = this.extractOrderNumber(orderId);
+        const orderNumber = this.order()?.orderNumber ?? fallbackOrderNumber;
+        a.download = `invoice-${orderNumber}.pdf`;
         a.click();
         window.URL.revokeObjectURL(url);
       },
@@ -119,4 +122,18 @@ export class PaymentComponent implements OnInit {
     }
     this.router.navigate(['/order-confirmed', this.orderId]);
   }
+
+  getDisplayOrderNumber(order: any): string {
+    if (order?.orderNumber) {
+      return order.orderNumber;
+    }
+    if (order?.id) {
+      return this.extractOrderNumber(order.id);
+    }
+    return 'N/A';
+  }
+
+  private extractOrderNumber(orderId: string): string {
+    return orderId.split('-')[0];
+  }
 }