feat(payment): ADYEN-729 extended renderAccountPayments initilization…

… interface, added styles
fusionary · Mar 13, 2023 · 3cce43a · 3cce43a
1 parent a9f1b33
commit 3cce43a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extended BigCommerce.accountPayments app initialization interface [#2317](https://github.com/bigcommerce/cornerstone/pull/2317)
 - Gift certificate CSS properties are applied to page after previewing Gift certificate on storefront [#2330](https://github.com/bigcommerce/cornerstone/pull/2330)
 - Translation Gap: Submit Return Request button [#2331](https://github.com/bigcommerce/cornerstone/pull/2331)
+- Extended initialization interface of the storefront-account-payments lib, added theme styles [#2335][https://github.com/bigcommerce/cornerstone/pull/2335]
 
 ## 6.8.0 (01-26-2023)
 - Add remote_api_scripts into cart/preview template to let GA3 snippet to fire the Product Added event, when clicking Add to cart button on Product detail page and rendering the response in popup. [#2281](https://github.com/bigcommerce/cornerstone/pull/2281)

diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
@@ -83,7 +83,7 @@ export default class Account extends PageManager {
             this.initReorderForm($reorderForm);
         }
 
-        if ($bigCommerce && $bigCommerce.accountPayments) {
+        if ($bigCommerce && $bigCommerce.renderAccountPayments) {
             const {
                 countries,
                 paymentsUrl,
@@ -96,29 +96,70 @@ export default class Account extends PageManager {
                 currencyCode,
                 paymentMethodsUrl,
                 paymentProviderInitializationData,
+                themeSettings,
             } = this.context;
 
-            window.BigCommerce.accountPayments({
-                widgetStyles: {
-                    base: {
-                        color: '#666666',
-                        cursor: 'pointer',
-                        display: 'block',
-                        fontSize: '1rem',
-                        lineHeight: '1.5',
-                        marginBottom: '0.5rem',
+            $bigCommerce.renderAccountPayments({
+                styles: {
+                    inputBase: {
+                        color: themeSettings['input-font-color'],
+                        borderColor: themeSettings['input-border-color'],
                     },
-                    error: {
-                        color: 'red',
+                    inputValidationError: {
+                        color: themeSettings['color-error'],
+                        borderColor: themeSettings['color-error'],
                     },
-                    placeholder: {
-                        color: '#d8d8d8',
+                    inputValidationSuccess: {
+                        color: themeSettings['color-success'],
+                        borderColor: themeSettings['color-success'],
                     },
-                    validated: {
-                        color: 'green',
+                    submitButton: {
+                        color: themeSettings['button--primary-color'],
+                        backgroundColor: themeSettings['button--primary-backgroundColor'],
+                        borderColor: themeSettings['button--primary-backgroundColor'],
+                        '&:hover': {
+                            color: themeSettings['button--primary-colorHover'],
+                            backgroundColor: themeSettings['button--primary-backgroundColorHover'],
+                            borderColor: themeSettings['button--primary-backgroundColorHover'],
+                        },
+                        '&:active': {
+                            color: themeSettings['button--primary-colorActive'],
+                            backgroundColor: themeSettings['button--primary-backgroundColorActive'],
+                            borderColor: themeSettings['button--primary-backgroundColorActive'],
+                        },
+                        '&[disabled]': {
+                            backgroundColor: themeSettings['button--disabled-backgroundColor'],
+                            borderColor: themeSettings['button--disabled-borderColor'],
+                            color: themeSettings['button--disabled-color'],
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    cancelButton: {
+                        color: themeSettings['button--default-color'],
+                        backgroundColor: 'transparent',
+                        borderColor: themeSettings['button--default-borderColor'],
+                        '&:hover': {
+                            color: themeSettings['button--default-colorHover'],
+                            backgroundColor: 'transparent',
+                            borderColor: themeSettings['button--default-borderColorHover'],
+                        },
+                        '&:active': {
+                            color: themeSettings['button--default-colorActive'],
+                            backgroundColor: 'transparent',
+                            borderColor: themeSettings['button--default-borderColorActive'],
+                        },
+                    },
+                    label: {
+                        color: themeSettings['form-label-font-color'],
+                    },
+                    validationError: {
+                        color: themeSettings['color-error'],
+                    },
+                    heading: {
+                        color: themeSettings['color-textHeading'],
                     },
                 },
-                initializeData: {
+                storeContextData: {
                     countries,
                     paymentsUrl,
                     storeHash,

diff --git a/templates/pages/account/add-payment-method.html b/templates/pages/account/add-payment-method.html
@@ -27,7 +27,8 @@
     {{inject 'providerId' forms.provider}}
     {{inject 'currencyCode' currency_selector.active_currency_code}}
     {{inject 'paymentProviderInitializationData' initialization_data}}
-    {{{inject 'storeLocale' settings.request.locale }}}
+    {{inject 'storeLocale' settings.request.locale }}
+    {{inject 'themeSettings' theme_settings}}
 
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}