verify bank account

src/app/organizations/settings/organization-billing.component.html

@@ -131,9 +131,28 @@
         <ng-container *ngIf="paymentSource">
             <app-callout type="warning" title="{{'verifyBankAccount' | i18n}}" *ngIf="paymentSource.type === paymentMethodType.BankAccount && paymentSource.needsVerification">
                 <p>{{'verifyBankAccountDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}</p>
-                <button type="button" class="btn btn-outline-secondary" (click)="verifyBank()">
-                    {{'verifyBankAccount' | i18n}}
-                </button>
+                <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="fa fa-spinner fa-spin"></i>
+                        <span>{{'verifyBankAccount' | i18n}}</span>
+                    </button>
+                </form>
             </app-callout>
             <p>
                 <i class="fa fa-fw" [ngClass]="{'fa-credit-card': paymentSource.type === paymentMethodType.Card,

src/app/organizations/settings/organization-billing.component.ts

@@ -10,6 +10,7 @@ import {
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
+import { VerifyBankRequest } from 'jslib/models/request/verifyBankRequest';
 
 import { BillingChargeResponse } from 'jslib/models/response/billingResponse';
 import { OrganizationBillingResponse } from 'jslib/models/response/organizationBillingResponse';
@@ -39,10 +40,13 @@ export class OrganizationBillingComponent implements OnInit {
     billing: OrganizationBillingResponse;
     paymentMethodType = PaymentMethodType;
     selfHosted = false;
+    verifyAmount1: number;
+    verifyAmount2: number;
 
     cancelPromise: Promise<any>;
     reinstatePromise: Promise<any>;
     licensePromise: Promise<any>;
+    verifyBankPromise: Promise<any>;
 
     constructor(private tokenService: TokenService, private apiService: ApiService,
         private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
@@ -141,6 +145,23 @@ export class OrganizationBillingComponent implements OnInit {
         this.showUpdateLicense = true;
     }
 
+    async verifyBank() {
+        if (this.loading) {
+            return;
+        }
+
+        try {
+            const request = new VerifyBankRequest();
+            request.amount1 = this.verifyAmount1;
+            request.amount2 = this.verifyAmount2;
+            this.verifyBankPromise = this.apiService.postOrganizationVerifyBank(this.organizationId, request);
+            await this.verifyBankPromise;
+            this.analytics.eventTrack.next({ action: 'Verified Bank Account' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('verifiedBankAccount'));
+            this.load();
+        } catch { }
+    }
+
     closeUpdateLicense(load: boolean) {
         this.showUpdateLicense = false;
         if (load) {

src/locales/en/messages.json

@@ -2198,9 +2198,22 @@
   "verifyBankAccountFailureWarning": {
     "message": "Failure to verify the bank account will result in a missed payment and your subscription being disabled."
   },
+  "verifiedBankAccount": {
+    "message": "Bank account has been verified."
+  },
   "bankAccount": {
     "message": "Bank Account"
   },
+  "amountX": {
+    "message": "Amount $COUNT$",
+    "description": "Used in bank account verification of micro-deposits. Amount, as in a currency amount. Ex. Amount 1 is $2.00, Amount 2 is $1.50",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "1"
+      }
+    }
+  },
   "routingNumber": {
     "message": "Routing Number",
     "description": "Bank account routing number"