src/app/modules/monetization/revenue/options.component.html

 <div class="m-revenue--options m-border">
-  <div class="m-revenue--options-requirements" *ngIf="account.requirement">
+  <div class="m-revenue--options-requirements" *ngIf="account && account.requirement">
     <h3>Account Requirements</h3>
     <p>
       You are required to complete the following action in order to receive
       payouts:
       <ng-container
-        *ngIf="account.requirement === 'individual.verification.document'"
+        *ngIf="
+          account.requirement.indexOf('individual.verification.document') > -1
+        "
       >
         <b (click)="file.click()">Upload Photo ID</b>
         <br />
@@ -18,7 +20,30 @@
           type="file"
           #file
           name="file"
-          (change)="uploadRequirement(file)"
+          (change)="uploadDocument(file, 'document')"
+          accept="image/*"
+          style="display: none;"
+        />
+      </ng-container>
+      <ng-container
+        *ngIf="
+          account.requirement.indexOf(
+            'individual.verification.additional_document'
+          ) > -1
+        "
+      >
+        <b (click)="file.click()">Upload a document with proof of address</b>
+        <br />
+        <br />
+        <button (click)="file.click()" class="m-btn m-btn--action m-btn--slim">
+          <ng-container *ngIf="!editing">Select & Upload</ng-container>
+          <ng-container *ngIf="editing">Uploading...</ng-container>
+        </button>
+        <input
+          type="file"
+          #file
+          name="file"
+          (change)="uploadDocument(file, 'additional_document')"
           accept="image/*"
           style="display: none;"
         />
@@ -37,6 +62,48 @@
           <ng-container *ngIf="editing">Accepting...</ng-container>
         </button>
       </ng-container>
+      <ng-container
+        *ngIf="account.requirement.indexOf('individual.phone') > -1"
+      >
+        <b>Provide a phone number</b>
+        <br />
+        <m-phone-input #phone></m-phone-input>
+        <br />
+        <button
+          (click)="updateField('phone', phone.value)"
+          class="m-btn m-btn--action m-btn--slim"
+        >
+          <ng-container *ngIf="!editing">Save</ng-container>
+          <ng-container *ngIf="editing">Saving...</ng-container>
+        </button>
+      </ng-container>
+      <ng-container
+        *ngIf="account.requirement.indexOf('external_account') > -1"
+      >
+        <b>Complete the payout method step below</b>
+      </ng-container>
+      <ng-container
+        *ngIf="account.requirement.indexOf('individual.id_number') > -1"
+      >
+        <b
+          >Provide your Personal ID / Social Security Number (SSN) / National
+          Insurance Number</b
+        >
+        <br />
+        <input
+          class="m-input m-revenueOptions__input"
+          #personalId
+          placeholder="Personal Id"
+        />
+        <br />
+        <button
+          (click)="updateField('id_number', personalId.value)"
+          class="m-btn m-btn--action m-btn--slim"
+        >
+          <ng-container *ngIf="!editing">Save</ng-container>
+          <ng-container *ngIf="editing">Saving...</ng-container>
+        </button>
+      </ng-container>
     </p>
   </div>
 
@@ -88,8 +155,8 @@
         *ngIf="!editing; else editingCaption"
         i18n="@@MONETIZATION__REVENUE__OPTIONS__NO_BANK_DETAILS_LABEL"
       >
-        You haven't setup your bank account yet. In order to receive payouts you
-        will need to link your bank account.
+        You haven't setup your bank account yet. In order to receive payments
+        and payouts you will need to link your bank account.
       </p>
       <ng-template #editingCaption>
         <p

src/app/modules/monetization/revenue/options.component.scss

@@ -17,6 +17,12 @@
     }
   }
 
+  .m-revenueOptions__input {
+    margin: 16px 0;
+    width: 300px;
+    border-radius: 36px;
+  }
+
   .m-revenue--options-payout-method-bank {
     p {
       font-family: 'Roboto', Helvetica, sans-serif;

src/app/modules/monetization/revenue/options.component.ts

@@ -100,11 +100,25 @@ export class RevenueOptionsComponent {
     this.detectChanges();
   }
 
-  async uploadRequirement(fileInput: HTMLInputElement) {
+  async uploadDocument(fileInput: HTMLInputElement, documentType: string) {
     const file = fileInput ? fileInput.files[0] : null;
     this.editing = true;
     this.detectChanges();
-    await this.upload.post('api/v2/payments/stripe/connect/photoid', [file]);
+    await this.upload.post(
+      'api/v2/payments/stripe/connect/document/' + documentType,
+      [file]
+    );
+    this.editing = false;
+    this.account = null;
+    this.getSettings();
+  }
+
+  async updateField(fieldName: string, value: string) {
+    this.editing = true;
+    this.detectChanges();
+    let body = {};
+    body[fieldName] = value;
+    await this.client.post('api/v2/payments/stripe/connect/update', body);
     this.editing = false;
     this.account = null;
     this.getSettings();

src/app/modules/wallet/usd/onboarding/onboarding.component.html

@@ -108,7 +108,7 @@
       />
     </div>
 
-    <div class="mdl-cell mdl-cell--6-col" *ngIf="isCountry(['CA', 'HK', 'SG'])">
+    <div class="mdl-cell mdl-cell--6-col" *ngIf="isCountry(['HK', 'SG'])">
       <label>
         <ng-container i18n="@@MONETIZATION__ONBOARDING__PERSONAL_ID_LABEL"
           >Personal ID</ng-container
@@ -198,10 +198,7 @@
       />
     </div>
 
-    <div
-      class="mdl-cell mdl-cell--6-col"
-      *ngIf="!isCountry(['HK', 'IE', 'JP'])"
-    >
+    <div class="mdl-cell mdl-cell--6-col" *ngIf="!isCountry(['HK', 'JP'])">
       <label i18n="@@MONETIZATION__ONBOARDING__ZIP_CODE_LABEL"
         >Zip (Postal) Code</label
       >
@@ -214,15 +211,9 @@
       />
     </div>
 
-    <div class="mdl-cell mdl-cell--6-col" *ngIf="isCountry(['JP'])">
+    <div class="mdl-cell mdl-cell--6-col">
       <label i18n="@@MONETIZATION__ONBOARDING__PHONE_LABEL">Phone Number</label>
-      <input
-        formControlName="phoneNumber"
-        type="tel"
-        placeholder="eg. 123-456789"
-        i18n-placeholder="@@MONETIZATION__ONBOARDING__PHONE_PLACEHOLDER"
-        class="m-input"
-      />
+      <m-phone-input formControlName="phoneNumber"></m-phone-input>
     </div>
   </div>
 

src/app/modules/wallet/usd/onboarding/onboarding.component.scss

@@ -38,13 +38,19 @@
     margin-right: 4px;
   }
 
-  input[type='text'] {
+  input[type='text'],
+  input[type='tel'] {
     padding: 12px;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 6px;
-    width: 100%;
+    &input[type='text'] {
+      width: 100%;
+    }
+  }
+  .m-phone-input--selected-flag {
+    height: 100%;
   }
 }
 .m-merchant-legal {

src/app/modules/wallet/usd/onboarding/onboarding.component.ts

@@ -58,8 +58,8 @@ export class WalletUSDOnboardingComponent implements OnInit {
       street: ['', optionalFor(['JP'])],
       city: ['', optionalFor(['JP', 'SG'])],
       state: ['', requiredFor(['AU', 'CA', 'IE', 'US'])],
-      postCode: ['', optionalFor(['HK', 'IE', 'JP'])],
-      phoneNumber: ['', requiredFor(['JP'])],
+      postCode: ['', optionalFor(['HK', 'JP'])],
+      phoneNumber: ['', Validators.required],
       stripeAgree: ['', Validators.required],
     });