feat(back-end): bill and qr

2026-02-20 14:54:28 +01:00
parent 8e12b3bcdf
commit ccc53b7d4f
24 changed files with 2034 additions and 714 deletions
--- a/frontend/src/app/features/checkout/checkout.component.html
+++ b/frontend/src/app/features/checkout/checkout.component.html
@@ -1,120 +1,122 @@
 <div class="checkout-page">
-  <h2 class="section-title">{{ 'CHECKOUT.TITLE' | translate }}</h2>
+  <div class="container hero">
+    <h1 class="section-title">{{ 'CHECKOUT.TITLE' | translate }}</h1>
+  </div>
  
-  <div class="checkout-layout">
-    
-    <!-- LEFT COLUMN: Form -->
-    <div class="checkout-form-section">
-      <!-- Error Message -->
-      <div *ngIf="error" class="error-message">
-        {{ error }}
-      </div>
+  <div class="container">
+    <div class="checkout-layout">
+      
+      <!-- LEFT COLUMN: Form -->
+      <div class="checkout-form-section">
+        <!-- Error Message -->
+        <div *ngIf="error" class="error-message">
+          {{ error }}
+        </div>

-      <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()" *ngIf="!error">
-        
-        <!-- Contact Info Card -->
-        <div class="form-card">
-          <div class="card-header">
-            <h3>{{ 'CHECKOUT.CONTACT_INFO' | translate }}</h3>
-          </div>
-          <div class="card-content">
+        <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()" *ngIf="!error">
+          
+          <!-- Contact Info Card -->
+          <app-card class="mb-6">
+            <div class="card-header-simple">
+              <h3>{{ 'CHECKOUT.CONTACT_INFO' | translate }}</h3>
+            </div>
            <div class="form-row">
              <app-input formControlName="email" type="email" [label]="'CHECKOUT.EMAIL' | translate" [required]="true" [error]="checkoutForm.get('email')?.hasError('email') ? 'Invalid email' : null"></app-input>
              <app-input formControlName="phone" type="tel" [label]="'CHECKOUT.PHONE' | translate" [required]="true"></app-input>
            </div>
-          </div>
-        </div>
+          </app-card>

-        <!-- Billing Address Card -->
-        <div class="form-card">
-          <div class="card-header">
-            <h3>{{ 'CHECKOUT.BILLING_ADDR' | translate }}</h3>
-          </div>
-          <div class="card-content" formGroupName="billingAddress">
-            <div class="form-row">
-              <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate" [required]="true"></app-input>
-              <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate" [required]="true"></app-input>
+          <!-- Billing Address Card -->
+          <app-card class="mb-6">
+            <div class="card-header-simple">
+              <h3>{{ 'CHECKOUT.BILLING_ADDR' | translate }}</h3>
            </div>
-            
-            <app-input formControlName="addressLine1" [label]="'CHECKOUT.ADDRESS_1' | translate" [required]="true"></app-input>
-            <app-input formControlName="addressLine2" [label]="'CHECKOUT.ADDRESS_2' | translate"></app-input>
-
-            <div class="form-row three-cols">
-              <app-input formControlName="zip" [label]="'CHECKOUT.ZIP' | translate" [required]="true"></app-input>
-              <app-input formControlName="city" [label]="'CHECKOUT.CITY' | translate" class="city-field" [required]="true"></app-input>
-              <app-input formControlName="countryCode" [label]="'CHECKOUT.COUNTRY' | translate" [disabled]="true" [required]="true"></app-input>
-            </div>
-
-            <!-- User Type Selector -->
-            <div class="user-type-selector">
-              <div class="type-option" [class.selected]="!isCompany" (click)="setCustomerType(false)">
-                {{ 'CONTACT.TYPE_PRIVATE' | translate }}
+            <div formGroupName="billingAddress">
+              
+              <!-- Private Person Fields -->
+              <div *ngIf="!isCompany" class="form-row">
+                <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate" [required]="true"></app-input>
+                <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate" [required]="true"></app-input>
              </div>
-              <div class="type-option" [class.selected]="isCompany" (click)="setCustomerType(true)">
-                {{ 'CONTACT.TYPE_COMPANY' | translate }}
+
+              <!-- Company Fields -->
+              <div *ngIf="isCompany" class="company-fields mb-4">
+                <app-input formControlName="companyName" [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_COMPANY' | translate"></app-input>
+                <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_REF_PERSON' | translate"></app-input>
+              </div>
+
+              <!-- User Type Selector -->
+              <div class="user-type-selector">
+                <div class="type-option" [class.selected]="!isCompany" (click)="setCustomerType(false)">
+                  {{ 'CONTACT.TYPE_PRIVATE' | translate }}
+                </div>
+                <div class="type-option" [class.selected]="isCompany" (click)="setCustomerType(true)">
+                  {{ 'CONTACT.TYPE_COMPANY' | translate }}
+                </div>
+              </div>
+              
+              <app-input formControlName="addressLine1" [label]="'CHECKOUT.ADDRESS_1' | translate" [required]="true"></app-input>
+              <app-input formControlName="addressLine2" [label]="'CHECKOUT.ADDRESS_2' | translate"></app-input>
+
+              <div class="form-row three-cols">
+                <app-input formControlName="zip" [label]="'CHECKOUT.ZIP' | translate" [required]="true"></app-input>
+                <app-input formControlName="city" [label]="'CHECKOUT.CITY' | translate" class="city-field" [required]="true"></app-input>
+                <app-input formControlName="countryCode" [label]="'CHECKOUT.COUNTRY' | translate" [disabled]="true" [required]="true"></app-input>
              </div>
            </div>
+          </app-card>

-            <!-- Company Fields (Indented with left border) -->
-            <div *ngIf="isCompany" class="company-fields">
-              <app-input formControlName="companyName" [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_COMPANY' | translate"></app-input>
-              <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_REF_PERSON' | translate"></app-input>
-            </div>
+          <!-- Shipping Option -->
+          <div class="shipping-option">
+            <label class="checkbox-container">
+              <input type="checkbox" formControlName="shippingSameAsBilling">
+              <span class="checkmark"></span>
+              {{ 'CHECKOUT.SHIPPING_SAME' | translate }}
+            </label>
          </div>
-        </div>

-        <!-- Shipping Option -->
-        <div class="shipping-option">
-          <label class="checkbox-container">
-            <input type="checkbox" formControlName="shippingSameAsBilling">
-            <span class="checkmark"></span>
-            {{ 'CHECKOUT.SHIPPING_SAME' | translate }}
-          </label>
-        </div>
+          <!-- Shipping Address Card (Conditional) -->
+          <app-card *ngIf="!checkoutForm.get('shippingSameAsBilling')?.value" class="mb-6">
+             <div class="card-header-simple">
+              <h3>{{ 'CHECKOUT.SHIPPING_ADDR' | translate }}</h3>
+            </div>
+            <div formGroupName="shippingAddress">
+               <div class="form-row">
+                <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate"></app-input>
+                <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate"></app-input>
+              </div>
+              
+              <div *ngIf="isCompany" class="company-fields">
+                <app-input formControlName="companyName" [label]="('CHECKOUT.COMPANY_NAME' | translate) + ' (Optional)'"></app-input>
+                <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' (Optional)'"></app-input>
+              </div>

-        <!-- Shipping Address Card (Conditional) -->
-        <div class="form-card" *ngIf="!checkoutForm.get('shippingSameAsBilling')?.value">
-           <div class="card-header">
-            <h3>{{ 'CHECKOUT.SHIPPING_ADDR' | translate }}</h3>
+              <app-input formControlName="addressLine1" [label]="'CHECKOUT.ADDRESS_1' | translate"></app-input>
+              
+              <div class="form-row three-cols">
+                <app-input formControlName="zip" [label]="'CHECKOUT.ZIP' | translate"></app-input>
+                <app-input formControlName="city" [label]="'CHECKOUT.CITY' | translate" class="city-field"></app-input>
+                <app-input formControlName="countryCode" [label]="'CHECKOUT.COUNTRY' | translate" [disabled]="true"></app-input>
+              </div>
+            </div>
+          </app-card>
+
+          <div class="actions">
+            <app-button type="submit" [disabled]="checkoutForm.invalid || isSubmitting()" [fullWidth]="true">
+              {{ (isSubmitting() ? 'CHECKOUT.PROCESSING' : 'CHECKOUT.PLACE_ORDER') | translate }}
+            </app-button>
          </div>
-          <div class="card-content" formGroupName="shippingAddress">
-             <div class="form-row">
-              <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate"></app-input>
-              <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate"></app-input>
-            </div>
-            
-            <div *ngIf="isCompany" class="company-fields">
-              <app-input formControlName="companyName" [label]="('CHECKOUT.COMPANY_NAME' | translate) + ' (Optional)'"></app-input>
-              <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' (Optional)'"></app-input>
-            </div>

-            <app-input formControlName="addressLine1" [label]="'CHECKOUT.ADDRESS_1' | translate"></app-input>
-            
-            <div class="form-row three-cols">
-              <app-input formControlName="zip" [label]="'CHECKOUT.ZIP' | translate"></app-input>
-              <app-input formControlName="city" [label]="'CHECKOUT.CITY' | translate" class="city-field"></app-input>
-              <app-input formControlName="countryCode" [label]="'CHECKOUT.COUNTRY' | translate" [disabled]="true"></app-input>
-            </div>
+        </form>
+      </div>
+
+      <!-- RIGHT COLUMN: Order Summary -->
+      <div class="checkout-summary-section">
+        <app-card class="sticky-card">
+          <div class="card-header-simple">
+            <h3>{{ 'CHECKOUT.SUMMARY_TITLE' | translate }}</h3>
          </div>
-        </div>
-
-        <div class="actions">
-          <app-button type="submit" [disabled]="checkoutForm.invalid || isSubmitting()" [fullWidth]="true">
-            {{ isSubmitting() ? ('CHECKOUT.PROCESSING' | translate) : ('CHECKOUT.PLACE_ORDER' | translate) }}
-          </app-button>
-        </div>
-
-      </form>
-    </div>
-
-    <!-- RIGHT COLUMN: Order Summary -->
-    <div class="checkout-summary-section">
-      <div class="form-card sticky-card">
-        <div class="card-header">
-          <h3>{{ 'CHECKOUT.SUMMARY_TITLE' | translate }}</h3>
-        </div>
-        
-        <div class="card-content">
+          
          <div class="summary-items" *ngIf="quoteSession() as session">
             <div class="summary-item" *ngFor="let item of session.items">
               <div class="item-details">
@@ -142,15 +144,18 @@
              <span>{{ 'CHECKOUT.SETUP_FEE' | translate }}</span>
              <span>{{ session.session.setupCostChf | currency:'CHF' }}</span>
            </div>
-            <div class="divider"></div>
-            <div class="total-row grand-total">
+            <div class="total-row">
+              <span>{{ 'CHECKOUT.SHIPPING' | translate }}</span>
+              <span>{{ 9.00 | currency:'CHF' }}</span>
+            </div>
+            <div class="grand-total">
              <span>{{ 'CHECKOUT.TOTAL' | translate }}</span>
-              <span>{{ session.grandTotalChf | currency:'CHF' }}</span>
+              <span>{{ (session.grandTotalChf + 9.00) | currency:'CHF' }}</span>
            </div>
          </div>
-        </div>
+        </app-card>
      </div>
-    </div>

+    </div>
  </div>
 </div>