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

<div class="container ui-page-hero ui-page-hero--spacious">
  <h1 class="ui-page-title">
    {{ "TRACKING.TITLE" | translate }}
    <ng-container *ngIf="order()">
      <br /><span class="order-id-title"
        >#{{ getDisplayOrderNumber(order()) }}</span
      >
    </ng-container>
  </h1>
  <p class="ui-page-subtitle 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 ui-two-column-layout">
        <div class="payment-main">
          <app-card class="mb-6">
            <div class="ui-card-header">
              <h3 class="ui-card-title">{{ "PAYMENT.METHOD" | translate }}</h3>
            </div>

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

            <div
              class="payment-details ui-soft-panel 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()"
                  [attr.alt]="'PAYMENT.TWINT_QR_ALT' | translate"
                />
                <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 type="button" class="twint-launch-button" (click)="openTwintPayment()">
                    <img
                      class="twint-launch-button__image"
                      [attr.alt]="'PAYMENT.TWINT_BUTTON_ALT' | translate"
                      [src]="getTwintButtonImageUrl()"
                    />
                  </button>
                </div>
                <p class="amount">
                  {{ "PAYMENT.TOTAL" | translate }}:
                  {{ o.totalChf | currency: "CHF" }}
                </p>
              </div>
            </div>

            <div
              class="payment-details ui-soft-panel 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="ui-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="ui-card-header">
              <h3 class="ui-card-title">{{ "PAYMENT.SUMMARY_TITLE" | translate }}</h3>
              <p class="ui-card-subtitle order-id">
                #{{ getDisplayOrderNumber(o) }}
              </p>
            </div>

            <app-price-breakdown
              [rows]="orderPriceBreakdownRows(o)"
              [total]="o.totalChf || 0"
              [currency]="'CHF'"
              [totalLabelKey]="'PAYMENT.TOTAL'"
            ></app-price-breakdown>
          </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()! | translate }}</p>
    </app-card>
  </div>
</div>