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()"
                  [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
                    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"
                      [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 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()! | translate }}</p>
    </app-card>
  </div>
</div>