browser/apps/web/src/app/organizations/billing/organization-payment-method.component.html

<div class="page-header d-flex">
  <h1>
    {{ "paymentMethod" | i18n }}
  </h1>
  <button
    (click)="load()"
    class="btn btn-sm btn-outline-primary ml-auto"
    *ngIf="firstLoaded"
    [disabled]="loading"
  >
    <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
    {{ "refresh" | i18n }}
  </button>
</div>
<ng-container *ngIf="!firstLoaded && loading">
  <i
    class="bwi bwi-spinner bwi-spin text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container *ngIf="billing">
  <h2>{{ (isCreditBalance ? "accountCredit" : "accountBalance") | i18n }}</h2>
  <p class="text-lg">
    <strong>{{ creditOrBalance | currency: "$" }}</strong>
  </p>
  <p>{{ "creditAppliedDesc" | i18n }}</p>
  <button
    type="button"
    class="btn btn-outline-secondary"
    (click)="addCredit()"
    *ngIf="!showAddCredit"
  >
    {{ "addCredit" | i18n }}
  </button>
  <app-add-credit
    [organizationId]="organizationId"
    (onAdded)="closeAddCredit(true)"
    (onCanceled)="closeAddCredit(false)"
    *ngIf="showAddCredit"
  >
  </app-add-credit>

  <h2 class="spaced-header">{{ "paymentMethod" | i18n }}</h2>
  <p *ngIf="!paymentSource">{{ "noPaymentMethod" | i18n }}</p>
  <ng-container *ngIf="paymentSource">
    <app-callout
      type="warning"
      title="{{ 'verifyBankAccount' | i18n }}"
      *ngIf="
        paymentSource.type === paymentMethodType.BankAccount && paymentSource.needsVerification
      "
    >
      <p>{{ "verifyBankAccountDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}</p>
      <form
        #verifyForm
        class="form-inline"
        (ngSubmit)="verifyBank()"
        [appApiAction]="verifyBankPromise"
        ngNativeValidate
      >
        <label class="sr-only" for="verifyAmount1">{{ "amount" | i18n: "1" }}</label>
        <div class="input-group mr-2">
          <div class="input-group-prepend">
            <div class="input-group-text">$0.</div>
          </div>
          <input
            type="number"
            class="form-control"
            id="verifyAmount1"
            placeholder="xx"
            name="Amount1"
            [(ngModel)]="verifyAmount1"
            min="1"
            max="99"
            step="1"
            required
          />
        </div>
        <label class="sr-only" for="verifyAmount2">{{ "amount" | i18n: "2" }}</label>
        <div class="input-group mr-2">
          <div class="input-group-prepend">
            <div class="input-group-text">$0.</div>
          </div>
          <input
            type="number"
            class="form-control"
            id="verifyAmount2"
            placeholder="xx"
            name="Amount2"
            [(ngModel)]="verifyAmount2"
            min="1"
            max="99"
            step="1"
            required
          />
        </div>
        <button
          type="submit"
          class="btn btn-outline-primary btn-submit"
          [disabled]="verifyForm.loading"
        >
          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
          <span>{{ "verifyBankAccount" | i18n }}</span>
        </button>
      </form>
    </app-callout>
    <p>
      <i
        class="bwi bwi-fw"
        [ngClass]="{
          'bwi-credit-card': paymentSource.type === paymentMethodType.Card,
          'bwi-bank': paymentSource.type === paymentMethodType.BankAccount,
          'bwi-money': paymentSource.type === paymentMethodType.Check,
          'bwi-paypal text-primary': paymentSource.type === paymentMethodType.PayPal,
          'bwi-apple text-muted': paymentSource.type === paymentMethodType.AppleInApp,
          'bwi-google text-muted': paymentSource.type === paymentMethodType.GoogleInApp
        }"
      ></i>
      <span *ngIf="paymentSourceInApp">{{ "inAppPurchase" | i18n }}</span>
      {{ paymentSource.description }}
    </p>
  </ng-container>
  <button
    type="button"
    class="btn btn-outline-secondary"
    (click)="changePayment()"
    *ngIf="!showAdjustPayment"
  >
    {{ (paymentSource ? "changePaymentMethod" : "addPaymentMethod") | i18n }}
  </button>
  <app-adjust-payment
    [currentType]="paymentSource != null ? paymentSource.type : null"
    [organizationId]="organizationId"
    (onAdjusted)="closePayment(true)"
    (onCanceled)="closePayment(false)"
    *ngIf="showAdjustPayment"
  >
  </app-adjust-payment>

  <h2 class="spaced-header">{{ "taxInformation" | i18n }}</h2>
  <p>{{ "taxInformationDesc" | i18n }}</p>
  <div *ngIf="!org || loading">
    <i
      class="bwi bwi-spinner bwi-spin text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="sr-only">{{ "loading" | i18n }}</span>
  </div>
  <form
    *ngIf="org && !loading"
    #formTax
    (ngSubmit)="submitTaxInfo()"
    [appApiAction]="taxFormPromise"
    ngNativeValidate
  >
    <app-tax-info></app-tax-info>
    <button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
      <span>{{ "save" | i18n }}</span>
    </button>
  </form>
</ng-container>