120 lines
4.3 KiB
HTML
120 lines
4.3 KiB
HTML
<div class="container hero">
|
|
<h1>{{ 'PAYMENT.TITLE' | translate }}</h1>
|
|
<p class="subtitle">{{ 'CHECKOUT.SUBTITLE' | translate }}</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="payment-layout" *ngIf="order() as o">
|
|
<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" *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">
|
|
<app-button (click)="openTwintPayment()" [fullWidth]="true">
|
|
{{ 'PAYMENT.TWINT_OPEN' | translate }}
|
|
</app-button>
|
|
</div>
|
|
<p class="amount">{{ 'PAYMENT.TOTAL' | translate }}: {{ o.totalChf | currency:'CHF' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-details fade-in" *ngIf="selectedPaymentMethod === 'bill'">
|
|
<div class="details-header">
|
|
<h4>{{ 'PAYMENT.BANK_TITLE' | translate }}</h4>
|
|
</div>
|
|
<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 class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p>
|
|
|
|
<div class="qr-bill-actions">
|
|
<app-button variant="outline" (click)="downloadInvoice()">
|
|
{{ 'PAYMENT.DOWNLOAD_QR' | translate }}
|
|
</app-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<app-button (click)="completeOrder()" [disabled]="!selectedPaymentMethod" [fullWidth]="true">
|
|
{{ '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">#{{ o.id.substring(0, 8) }}</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>
|
|
|
|
<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>
|