print-calculator/frontend/src/app/features/order/order.component.html

<div class="container hero">
  <h1>
    {{ 'TRACKING.TITLE' | translate }}
    <ng-container *ngIf="order()">
      <br/><span class="order-id-title">#{{ getDisplayOrderNumber(order()) }}</span>
    </ng-container>
  </h1>
  <p class="subtitle">{{ 'TRACKING.SUBTITLE' | translate }}</p>
</div>

<div class="container">
  <ng-container *ngIf="order() as o">
    <div class="status-timeline mb-6">
       <div class="timeline-step"
            [class.active]="o.status === 'PENDING_PAYMENT' && o.paymentStatus !== 'REPORTED'"
            [class.completed]="o.paymentStatus === 'REPORTED' || o.status !== 'PENDING_PAYMENT'">
          <div class="circle">1</div>
          <div class="label">{{ 'TRACKING.STEP_PENDING' | translate }}</div>
       </div>
       <div class="timeline-step"
            [class.active]="o.paymentStatus === 'REPORTED' && o.status === 'PENDING_PAYMENT'"
            [class.completed]="o.status === 'PAID' || o.status === 'IN_PRODUCTION' || o.status === 'SHIPPED' || o.status === 'COMPLETED'">
          <div class="circle">2</div>
          <div class="label">{{ 'TRACKING.STEP_REPORTED' | translate }}</div>
       </div>
       <div class="timeline-step"
            [class.active]="o.status === 'PAID' || o.status === 'IN_PRODUCTION'"
            [class.completed]="o.status === 'SHIPPED' || o.status === 'COMPLETED'">
          <div class="circle">3</div>
          <div class="label">{{ 'TRACKING.STEP_PRODUCTION' | translate }}</div>
       </div>
       <div class="timeline-step"
            [class.active]="o.status === 'SHIPPED'"
            [class.completed]="o.status === 'COMPLETED'">
          <div class="circle">4</div>
          <div class="label">{{ 'TRACKING.STEP_SHIPPED' | translate }}</div>
       </div>
    </div>

    <ng-container *ngIf="o.status === 'PENDING_PAYMENT'">
      <app-card class="mb-6 status-reported-card" *ngIf="o.paymentStatus === 'REPORTED'">
          <div class="status-content text-center">
            <h3>{{ 'PAYMENT.STATUS_REPORTED_TITLE' | translate }}</h3>
            <p>{{ 'PAYMENT.STATUS_REPORTED_DESC' | translate }}</p>
          </div>
      </app-card>

      <div class="payment-layout">
        <div class="payment-main">
          <app-card class="mb-6">
            <div class="card-header-simple">
              <h3>{{ 'PAYMENT.METHOD' | translate }}</h3>
            </div>

            <div class="payment-selection">
              <div class="methods-grid">
                <div class="type-option" [class.selected]="selectedPaymentMethod === 'twint'" (click)="selectPayment('twint')">
                  <span class="method-name">{{ 'PAYMENT.METHOD_TWINT' | translate }}</span>
                </div>
                <div class="type-option" [class.selected]="selectedPaymentMethod === 'bill'" (click)="selectPayment('bill')">
                  <span class="method-name">{{ 'PAYMENT.METHOD_BANK' | translate }}</span>
                </div>
              </div>
            </div>

            <div class="payment-details fade-in text-center" *ngIf="selectedPaymentMethod === 'twint'">
              <div class="details-header">
                <h4>{{ 'PAYMENT.TWINT_TITLE' | translate }}</h4>
              </div>
              <div class="qr-placeholder">
                <img *ngIf="twintQrUrl()" class="twint-qr" [src]="getTwintQrUrl()" (error)="onTwintQrError()" alt="TWINT payment QR" />
                <p>{{ 'PAYMENT.TWINT_DESC' | translate }}</p>
                <p class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p>
                <div class="twint-mobile-action twint-button-container">
                  <button style="width: auto; height: 58px;
border-radius: 6px;
display: flex;
justify-content: center;
cursor: pointer;
background-color: transparent;
border: none;
align-items: center;" (click)="openTwintPayment()">
                    <img style="width: auto; height: 58px" alt="Embedded TWINT button" [src]="getTwintButtonImageUrl()"/>
                  </button>
                </div>
                <p class="amount">{{ 'PAYMENT.TOTAL' | translate }}: {{ o.totalChf | currency:'CHF' }}</p>
              </div>
            </div>

            <div class="payment-details fade-in text-center" *ngIf="selectedPaymentMethod === 'bill'">
              <div class="details-header">
                <h4>{{ 'PAYMENT.BANK_TITLE' | translate }}</h4>
              </div>
              <div class="bank-details">
                <p class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p>
                <br>
                <div class="qr-bill-actions">
                  <app-button (click)="downloadQrInvoice()">
                    {{ 'PAYMENT.DOWNLOAD_QR' | translate }}
                  </app-button>
                </div>
              </div>
            </div>

            <div class="actions">
              <app-button variant="outline" (click)="completeOrder()" [disabled]="!selectedPaymentMethod || o.paymentStatus === 'REPORTED'" [fullWidth]="true">
                {{ o.paymentStatus === 'REPORTED' ? ('PAYMENT.IN_VERIFICATION' | translate) : ('PAYMENT.CONFIRM' | translate) }}
              </app-button>
            </div>
          </app-card>
        </div>

        <div class="payment-summary">
          <app-card class="sticky-card">
            <div class="card-header-simple">
              <h3>{{ 'PAYMENT.SUMMARY_TITLE' | translate }}</h3>
              <p class="order-id">#{{ getDisplayOrderNumber(o) }}</p>
            </div>

            <div class="summary-totals">
              <div class="total-row">
                <span>{{ 'PAYMENT.SUBTOTAL' | translate }}</span>
                <span>{{ o.subtotalChf | currency:'CHF' }}</span>
              </div>
              <div class="total-row">
                <span>{{ 'PAYMENT.SHIPPING' | translate }}</span>
                <span>{{ o.shippingCostChf | currency:'CHF' }}</span>
              </div>
              <div class="total-row">
                <span>{{ 'PAYMENT.SETUP_FEE' | translate }}</span>
                <span>{{ o.setupCostChf | currency:'CHF' }}</span>
              </div>
              <div class="grand-total-row">
                <span>{{ 'PAYMENT.TOTAL' | translate }}</span>
                <span>{{ o.totalChf | currency:'CHF' }}</span>
              </div>
            </div>

          </app-card>
        </div>
      </div>
    </ng-container>
  </ng-container>

  <div *ngIf="loading()" class="loading-state">
    <app-card>
      <p>{{ 'PAYMENT.LOADING' | translate }}</p>
    </app-card>
  </div>

  <div *ngIf="error()" class="error-message">
    <app-card>
      <p>{{ error() }}</p>
    </app-card>
  </div>
</div>