[PM-11730] Remove feature flag: AC-2476-deprecate-stripe-sources-api (#13032)

* Remove FF from trial-billing-step.component

* Remove FF from user-subscription.component

* Remove FF from individual-billing-routing.module

* Remove FF from organization-billing.service

* Remove FF from organization-subscription-cloud.component

* Remove FF from organization-billing-routing.mdoule

* Remove FF from organization-plans.component

* Remove FF from change-plan-dialog.component

* Remove FF

* Remove legacy payment.component

* Rename V2: adjust-payment-dialog.component

* Rename V2: adjust-storage-dialog.component

* Rename V2: payment-label.component

* Rename V2: payment.component

* Rename V2: premium.component

* Patrick's feedback

apps/web/src/app/billing/shared/payment/payment.component.html

@@ -1,96 +1,125 @@
-<div [formGroup]="paymentForm">
-  <div class="tw-mb-4 tw-text-lg" *ngIf="showOptions && showMethods">
-    <bit-radio-group formControlName="method">
-      <bit-radio-button id="method-card" [value]="paymentMethodType.Card">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <div class="tw-mb-4 tw-text-lg">
+    <bit-radio-group formControlName="paymentMethod">
+      <bit-radio-button id="card-payment-method" [value]="PaymentMethodType.Card">
         <bit-label>
           <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>
-          {{ "creditCard" | i18n }}</bit-label
-        >
+          {{ "creditCard" | i18n }}
+        </bit-label>
       </bit-radio-button>
-      <bit-radio-button id="method-bank" [value]="paymentMethodType.BankAccount" *ngIf="!hideBank">
+      <bit-radio-button
+        id="bank-payment-method"
+        [value]="PaymentMethodType.BankAccount"
+        *ngIf="showBankAccount"
+      >
         <bit-label>
           <i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i>
-          {{ "bankAccount" | i18n }}</bit-label
-        >
+          {{ "bankAccount" | i18n }}
+        </bit-label>
       </bit-radio-button>
-      <bit-radio-button id="method-paypal" [value]="paymentMethodType.PayPal" *ngIf="!hidePaypal">
-        <bit-label> <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i> PayPal</bit-label>
+      <bit-radio-button
+        id="paypal-payment-method"
+        [value]="PaymentMethodType.PayPal"
+        *ngIf="showPayPal"
+      >
+        <bit-label>
+          <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i>
+          {{ "payPal" | i18n }}
+        </bit-label>
       </bit-radio-button>
-      <bit-radio-button id="method-credit" [value]="paymentMethodType.Credit" *ngIf="!hideCredit">
+      <bit-radio-button
+        id="credit-payment-method"
+        [value]="PaymentMethodType.Credit"
+        *ngIf="showAccountCredit"
+      >
         <bit-label>
           <i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i>
-          {{ "accountCredit" | i18n }}</bit-label
-        >
+          {{ "accountCredit" | i18n }}
+        </bit-label>
       </bit-radio-button>
     </bit-radio-group>
   </div>
-  <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
-    <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4">
-      <div [ngClass]="trialFlow ? 'tw-col-span-12' : 'tw-col-span-6'">
-        <app-payment-label-v2 for="stripe-card-number-element">{{
-          "number" | i18n
-        }}</app-payment-label-v2>
-        <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
+  <!-- Card -->
+  <ng-container *ngIf="usingCard">
+    <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
+      <div class="tw-col-span-1">
+        <app-payment-label for="stripe-card-number" required>
+          {{ "number" | i18n }}
+        </app-payment-label>
+        <div id="stripe-card-number" class="form-control stripe-form-control"></div>
       </div>
-      <div *ngIf="!trialFlow" class="tw-col-span-8 tw-flex tw-items-end">
+      <div class="tw-col-span-1 tw-flex tw-items-end">
         <img
-          src="../../images/cards.png"
+          src="../../../images/cards.png"
           alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
-          width="323"
-          height="32"
+          class="tw-max-w-full"
         />
       </div>
-      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-6'">
-        <app-payment-label-v2 for="stripe-card-expiry-element">{{
-          "expiration" | i18n
-        }}</app-payment-label-v2>
-        <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
+      <div class="tw-col-span-1">
+        <app-payment-label for="stripe-card-expiry" required>
+          {{ "expiration" | i18n }}
+        </app-payment-label>
+        <div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
       </div>
-      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-6'">
-        <app-payment-label-v2 for="stripe-card-cvc-element">
+      <div class="tw-col-span-1">
+        <app-payment-label for="stripe-card-cvc" required>
           {{ "securityCodeSlashCVV" | i18n }}
           <a
             href="https://www.cvvnumber.com/cvv.html"
-            tabindex="-1"
             target="_blank"
             rel="noreferrer"
+            appA11yTitle="{{ 'learnMore' | i18n }}"
             class="hover:tw-no-underline"
-            appA11yTitle="{{ 'whatIsACvvNumber' | i18n }}"
           >
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
-        </app-payment-label-v2>
-        <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
+        </app-payment-label>
+        <div id="stripe-card-cvc" class="form-control stripe-form-control"></div>
       </div>
     </div>
   </ng-container>
-  <ng-container *ngIf="showMethods && method === paymentMethodType.BankAccount">
+  <!-- Bank Account -->
+  <ng-container *ngIf="showBankAccount && usingBankAccount">
     <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-      {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
+      {{ "verifyBankAccountWithStatementDescriptorWarning" | i18n }}
     </bit-callout>
-    <div class="tw-grid tw-grid-cols-12 tw-gap-4" formGroupName="bank">
-      <bit-form-field class="tw-col-span-6">
+    <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankInformation">
+      <bit-form-field class="tw-col-span-1" disableMargin>
         <bit-label>{{ "routingNumber" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="routing_number" required appInputVerbatim />
-      </bit-form-field>
-      <bit-form-field class="tw-col-span-6">
-        <bit-label>{{ "accountNumber" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="account_number" required appInputVerbatim />
-      </bit-form-field>
-      <bit-form-field class="tw-col-span-6">
-        <bit-label>{{ "accountHolderName" | i18n }}</bit-label>
         <input
           bitInput
+          id="routingNumber"
           type="text"
-          formControlName="account_holder_name"
+          formControlName="routingNumber"
           required
           appInputVerbatim
         />
       </bit-form-field>
-
-      <bit-form-field class="tw-col-span-6">
+      <bit-form-field class="tw-col-span-1" disableMargin>
+        <bit-label>{{ "accountNumber" | i18n }}</bit-label>
+        <input
+          bitInput
+          id="accountNumber"
+          type="text"
+          formControlName="accountNumber"
+          required
+          appInputVerbatim
+        />
+      </bit-form-field>
+      <bit-form-field class="tw-col-span-1" disableMargin>
+        <bit-label>{{ "accountHolderName" | i18n }}</bit-label>
+        <input
+          id="accountHolderName"
+          bitInput
+          type="text"
+          formControlName="accountHolderName"
+          required
+          appInputVerbatim
+        />
+      </bit-form-field>
+      <bit-form-field class="tw-col-span-1" disableMargin>
         <bit-label>{{ "bankAccountType" | i18n }}</bit-label>
-        <bit-select formControlName="account_holder_type" required>
+        <bit-select id="accountHolderType" formControlName="accountHolderType" required>
           <bit-option value="" label="-- {{ 'select' | i18n }} --"></bit-option>
           <bit-option value="company" label="{{ 'bankAccountTypeCompany' | i18n }}"></bit-option>
           <bit-option
@@ -101,15 +130,20 @@
       </bit-form-field>
     </div>
   </ng-container>
-  <ng-container *ngIf="showMethods && method === paymentMethodType.PayPal">
+  <!-- PayPal -->
+  <ng-container *ngIf="showPayPal && usingPayPal">
     <div class="tw-mb-3">
-      <div id="bt-dropin-container" class="tw-mb-1"></div>
+      <div id="braintree-container" class="tw-mb-1 tw-content-center"></div>
       <small class="tw-text-muted">{{ "paypalClickSubmit" | i18n }}</small>
     </div>
   </ng-container>
-  <ng-container *ngIf="showMethods && method === paymentMethodType.Credit">
-    <bit-callout>
+  <!-- Account Credit -->
+  <ng-container *ngIf="showAccountCredit && usingAccountCredit">
+    <app-callout type="info">
       {{ "makeSureEnoughCredit" | i18n }}
-    </bit-callout>
+    </app-callout>
   </ng-container>
-</div>
+  <button *ngIf="!!onSubmit" bitButton bitFormButton buttonType="primary" type="submit">
+    {{ "submit" | i18n }}
+  </button>
+</form>