From 001aea256115e885fc628f1cf899f15e951df187 Mon Sep 17 00:00:00 2001
From: Vitaliy Koshovyi <vitaliy.koshovyi@bigcommerce.com>
Date: Thu, 1 Dec 2022 17:37:55 +0200
Subject: [PATCH] feat(payment): ADYEN-314 vaulting lib initialization

---
 assets/js/theme/account.js                    |  27 ++++
 .../pages/account/add-payment-method.html     | 135 ++++++++++--------
 2 files changed, 99 insertions(+), 63 deletions(-)

diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
index 608dc7883b..90d62a06b9 100644
--- a/assets/js/theme/account.js
+++ b/assets/js/theme/account.js
@@ -32,6 +32,7 @@ export default class Account extends PageManager {
         const $paymentMethodForm = classifyForm('form[data-payment-method-form]');
         const $reorderForm = classifyForm('[data-account-reorder-form]');
         const $invoiceButton = $('[data-print-invoice]');
+        const $bigCommerce = window.BigCommerce;
 
         compareProducts(this.context);
 
@@ -82,6 +83,32 @@ export default class Account extends PageManager {
             this.initReorderForm($reorderForm);
         }
 
+        if ($bigCommerce && $bigCommerce.accountPayments) {
+            console.log(this.context);
+            window.BigCommerce.accountPayments({
+                widgetStyles: {
+                    base: {
+                        color: '#666666',
+                        cursor: 'pointer',
+                        display: 'block',
+                        fontSize: '1rem',
+                        lineHeight: '1.5',
+                        marginBottom: '0.5rem',
+                    },
+                    error: {
+                        color: 'red',
+                    },
+                    placeholder: {
+                        color: '#d8d8d8',
+                    },
+                    validated: {
+                        color: 'green',
+                    },
+                },
+                countries: this.context.countries,
+            });
+        }
+
         this.bindDeleteAddress();
         this.bindDeletePaymentMethod();
     }
diff --git a/templates/pages/account/add-payment-method.html b/templates/pages/account/add-payment-method.html
index 832c9234ab..1808ff072d 100644
--- a/templates/pages/account/add-payment-method.html
+++ b/templates/pages/account/add-payment-method.html
@@ -36,76 +36,85 @@ <h2 class="page-heading">{{lang 'forms.payment_methods.add.heading'}}</h2>
             {{> components/common/alert/alert-error forms.error}}
         {{/if}}
 
-        <form data-payment-method-form class="form">
-            <input type="hidden" name="email" value="{{customer.email}}">
-            <input type="hidden" name="provider_id" value="{{forms.provider}}">
-            <input type="hidden" name="currency_code" value="{{currency_selector.active_currency_code}}">
+        {{#if should_render_account_payments}}
+            {{{ account_payments }}}
+            <script>
+                window.BigCommerce = window.BigCommerce || {};
+                window.BigCommerce.customerEmail = '{{customer.email}}';
+                window.BigCommerce.providerId = '{{forms.provider}}';
+                window.BigCommerce.currencyCode = '{{currency_selector.active_currency_code}}';
+            </script>
+        {{else}}
+            <form data-payment-method-form class="form">
+                <input type="hidden" name="email" value="{{customer.email}}">
+                <input type="hidden" name="provider_id" value="{{forms.provider}}">
+                <input type="hidden" name="currency_code" value="{{currency_selector.active_currency_code}}">
 
-            <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_method'}}</h3>
-
-            <div class="paymentMethodForm">
-                <p class="paymentMethodForm-subheading">
-                    {{forms.payment_method.provider_name}}
-                    <span class="paymentMethodForm-cards">
-                        {{#each ../theme_settings.supported_card_type_icons}}
-                            <img class="paymentMethodForm-cards-icon" src="{{cdn (concat (concat 'img/payment-methods/' this) '.svg')}}" alt="{{lang (concat 'account.payment_methods.card_types.' this)}}" title="{{lang (concat 'account.payment_methods.card_types.' this)}}">
-                        {{/each}}
-                    </span>
-                </p>
-                <fieldset class="form-fieldset">
-                    <div class="paymentMethodForm-column">
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="credit_card_number" name="credit_card_number" label=(lang 'account.payment_methods.credit_card_number')}}
-                            <svg class="paymentMethodForm-inputs-icon icon">
-                                <use xlink:href="#icon-lock" />
-                            </svg>
-                        </div>
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="expiration" name="expiration" label=(lang 'account.payment_methods.expiration') placeholder="MM/YY"}}
+                <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_method'}}</h3>
+                <div class="paymentMethodForm">
+                    <p class="paymentMethodForm-subheading">
+                        {{forms.payment_method.provider_name}}
+                        <span class="paymentMethodForm-cards">
+                            {{#each ../theme_settings.supported_card_type_icons}}
+                                <img class="paymentMethodForm-cards-icon" src="{{cdn (concat (concat 'img/payment-methods/' this) '.svg')}}" alt="{{lang (concat 'account.payment_methods.card_types.' this)}}" title="{{lang (concat 'account.payment_methods.card_types.' this)}}">
+                            {{/each}}
+                        </span>
+                    </p>
+                    <fieldset class="form-fieldset">
+                        <div class="paymentMethodForm-column">
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="credit_card_number" name="credit_card_number" label=(lang 'account.payment_methods.credit_card_number')}}
+                                <svg class="paymentMethodForm-inputs-icon icon">
+                                    <use xlink:href="#icon-lock" />
+                                </svg>
+                            </div>
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="expiration" name="expiration" label=(lang 'account.payment_methods.expiration') placeholder="MM/YY"}}
+                            </div>
                         </div>
-                    </div>
-                    <div class="paymentMethodForm-column">
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="name_on_card" name="name_on_card" label=(lang 'account.payment_methods.name_on_card')}}
+                        <div class="paymentMethodForm-column">
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="name_on_card" name="name_on_card" label=(lang 'account.payment_methods.name_on_card')}}
+                            </div>
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="cvv" name="cvv" label=(lang 'account.payment_methods.cvv')}}
+                                <svg class="paymentMethodForm-inputs-icon icon">
+                                    <use xlink:href="#icon-lock" />
+                                </svg>
+                            </div>
                         </div>
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="cvv" name="cvv" label=(lang 'account.payment_methods.cvv')}}
-                            <svg class="paymentMethodForm-inputs-icon icon">
-                                <use xlink:href="#icon-lock" />
-                            </svg>
+                        <div class="form-field">
+                            <input type="checkbox" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox">
+                            <label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
                         </div>
-                    </div>
-                    <div class="form-field">
-                        <input type="checkbox" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox">
-                        <label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
-                    </div>
-                </fieldset>
-            </div>
+                    </fieldset>
+                </div>
 
-            <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>
+                <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>
 
-            <fieldset class="form-fieldset">
-                <div class="form-row form-row--half">
-                    {{> components/common/forms/text private_id="FirstName" required=true id="first_name" name="first_name" label=(lang 'forms.payment_methods.first_name')}}
-                    {{> components/common/forms/text private_id="LastName" required=true id="last_name" name="last_name" label=(lang 'forms.payment_methods.last_name')}}
-                    {{> components/common/forms/text private_id="CompanyName" required=false id="company" name="company" label=(lang 'forms.payment_methods.company')}}
-                    {{> components/common/forms/text private_id="Phone" required=false id="phone" name="phone" label=(lang 'forms.payment_methods.phone')}}
-                    {{> components/common/forms/text private_id="AddressLine1" required=true id="address1" name="address1" label=(lang 'forms.payment_methods.address1')}}
-                    {{> components/common/forms/text private_id="AddressLine2" required=false id="address2" name="address2" label=(lang 'forms.payment_methods.address2')}}
-                    {{> components/common/forms/text private_id="City" required=true id="city" name="city" label=(lang 'forms.payment_methods.city')}}
-                    {{> components/common/forms/select private_id="Country" required=true id="country" name="country" label=(lang 'forms.payment_methods.country') chooseprefix=(lang 'forms.payment_methods.choose_country') options=countries}}
-                    {{> components/common/forms/text private_id="State" required=true id="state" name="state" label=(lang 'forms.payment_methods.state')}}
-                    {{> components/common/forms/text private_id="Zip" required=true id="postal_code" name="postal_code" label=(lang 'forms.payment_methods.postal_code')}}
+                <fieldset class="form-fieldset">
+                    <div class="form-row form-row--half">
+                        {{> components/common/forms/text private_id="FirstName" required=true id="first_name" name="first_name" label=(lang 'forms.payment_methods.first_name')}}
+                        {{> components/common/forms/text private_id="LastName" required=true id="last_name" name="last_name" label=(lang 'forms.payment_methods.last_name')}}
+                        {{> components/common/forms/text private_id="CompanyName" required=false id="company" name="company" label=(lang 'forms.payment_methods.company')}}
+                        {{> components/common/forms/text private_id="Phone" required=false id="phone" name="phone" label=(lang 'forms.payment_methods.phone')}}
+                        {{> components/common/forms/text private_id="AddressLine1" required=true id="address1" name="address1" label=(lang 'forms.payment_methods.address1')}}
+                        {{> components/common/forms/text private_id="AddressLine2" required=false id="address2" name="address2" label=(lang 'forms.payment_methods.address2')}}
+                        {{> components/common/forms/text private_id="City" required=true id="city" name="city" label=(lang 'forms.payment_methods.city')}}
+                        {{> components/common/forms/select private_id="Country" required=true id="country" name="country" label=(lang 'forms.payment_methods.country') chooseprefix=(lang 'forms.payment_methods.choose_country') options=countries}}
+                        {{> components/common/forms/text private_id="State" required=true id="state" name="state" label=(lang 'forms.payment_methods.state')}}
+                        {{> components/common/forms/text private_id="Zip" required=true id="postal_code" name="postal_code" label=(lang 'forms.payment_methods.postal_code')}}
+                    </div>
+                </fieldset>
+                <div class="form-actions">
+                    <input type="submit" class="button button--primary" value="{{lang 'forms.payment_methods.submit_value'}}">
+                    <a href="{{urls.account.payment_methods.all}}" class="button">{{lang 'common.cancel'}}</a>
+                    {{inject 'required' (lang 'common.required')}}
+                    {{inject 'state_error' (lang 'errors.state_error')}}
+                    {{inject 'generic_error' (lang 'common.generic_error')}}
                 </div>
-            </fieldset>
-            <div class="form-actions">
-                <input type="submit" class="button button--primary" value="{{lang 'forms.payment_methods.submit_value'}}">
-                <a href="{{urls.account.payment_methods.all}}" class="button">{{lang 'common.cancel'}}</a>
-                {{inject 'required' (lang 'common.required')}}
-                {{inject 'state_error' (lang 'errors.state_error')}}
-                {{inject 'generic_error' (lang 'common.generic_error')}}
-            </div>
-        </form>
+            </form>
+        {{/if}}
     </div>
 
 {{/partial}}