81 lines
4.1 KiB
HTML
81 lines
4.1 KiB
HTML
<div class="ui-g">
|
|
<div class="ui-g-12 ui-lg-10 ui-xl-8">
|
|
<div class="ui-g">
|
|
<div class="ui-g-12 card in-card-pad">
|
|
<h1 class="large-font align-vertical" i18n="@@selBillingAddress" style="margin-bottom:1rem;">Billing Addresses</h1>
|
|
<hr style="width: 100%;margin-bottom:1rem;" />
|
|
|
|
<ng-container *ngIf="user.addresses?.length > 0">
|
|
<ng-container *ngTemplateOutlet="header"></ng-container>
|
|
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
</ng-container>
|
|
<span class="ui-message ui-messages-error" style="width: 100%; font-size: 1em;">{{error}}</span>
|
|
|
|
<hr style="width: 100%;" />
|
|
|
|
<div class="ui-g-12">
|
|
<ng-container *ngTemplateOutlet="btn"></ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #header>
|
|
<div class="ui-g ui-g-nopad" style="justify-content: space-around;">
|
|
<div class="ui-g-4 ui-sm-12 ui-g-nopad row-space"><strong><ng-container i18n="@@address">Select a billing address</ng-container></strong></div>
|
|
<div class="ui-g-2 ui-sm-12 ui-g-nopad row-space"><strong><ng-container i18n="@@name">Name</ng-container></strong></div>
|
|
<div class="ui-g-4 ui-sm-12 ui-g-nopad row-space"><strong><ng-container i18n="@@cityStateZip">City, State, Zip/Postal Code</ng-container></strong></div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #content>
|
|
<div *ngFor="let address of user.addresses; trackBy: trackByAddressId" class="ui-g ui-g-12 card in-card-pad row-space" style="padding-left: 0; justify-content: space-around;">
|
|
<div class="ui-g-4 ui-sm-12 ui-g-nopad">
|
|
<div class="ui-g ui-g-nopad" style="justify-content: flex-end;">
|
|
<div class="ui-g-2"><p-radioButton name="addresses" [value]="address" [(ngModel)]="selectedAddress"></p-radioButton></div>
|
|
<div class="ui-g-10">{{address.line1}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui-g-2 ui-sm-12">{{address.name}}</div>
|
|
<div class="ui-g-4 ui-sm-12 ui-g-nopad">
|
|
<div class="ui-g-6 ui-sm-12">{{address.city}}, {{address.state}} {{address.postalCode}}</div>
|
|
<div class="ui-g-6 ui-sm-12 ui-g-nopad" style="text-align: right;">
|
|
<button pButton type="button" icon="ui-icon-edit" class="inline-space" (click)="edit(address)"></button>
|
|
<ng-container *ngIf="!address.isBilling">
|
|
<button pButton type="button" icon="ui-icon-trash" (click)="del(address)"></button>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #btn>
|
|
<button pButton type="button" i18n-label="@@back" label="Back" class="inline-space" (click)="gotoMySubs()"></button>
|
|
<button type="button" pButton icon="ui-icon-plus" i18n-label="@@addAdr" label="Add Address" (click)="add()"></button>
|
|
<button *ngIf="user.addresses?.length > 1" style="margin-left: 0.5rem;" pButton type="button" [disabled]="!selectedAddress || selectedAddress.isBilling" [label]="SubTexts.labelChngBilAddr" (click)="changeBilAdr(selectedAddress)"></button>
|
|
</ng-template>
|
|
|
|
<p-dialog [(visible)]="displayAddressDialog" [style]="{'width': '600px'}" [contentStyle]="{'overflow':'visible'}" resizable="false" modal="true">
|
|
<p-header>
|
|
<span class="cc-title">
|
|
<ng-container *ngIf="isNewAddress; else editLabel">
|
|
<ng-container i18n="@@addBillingAddress">Add Billing Address</ng-container>
|
|
</ng-container>
|
|
<ng-template #editLabel>
|
|
<ng-container i18n="@@editBillingAddress">Edit Billing Address</ng-container>
|
|
</ng-template>
|
|
</span>
|
|
</p-header>
|
|
<div class="card card-w-title in-card-pad">
|
|
<ng-container *ngIf="displayAddressDialog">
|
|
<billing-address-elt [address]="currentAddress" [isNewAddress]="isNewAddress" (addressEvt)="onStripeAddressChange($event)">
|
|
</billing-address-elt>
|
|
</ng-container>
|
|
</div>
|
|
<span class="ui-message ui-messages-error" style="width: 100%; font-size: 1em;">{{error}}</span>
|
|
<p-footer>
|
|
<button pButton type="button" [label]="SubTexts.labelCancel" style="margin-right: 0.5em;" (click)="closeDialog()"></button>
|
|
<button pButton type="button" [label]="SubTexts.labelSubmit" [disabled]="!canSubmit" (click)="submit()"></button>
|
|
</p-footer>
|
|
</p-dialog> |