From 35360c6e931dfc0ff9b82ca12516b5842b237b7c Mon Sep 17 00:00:00 2001 From: Lee Dunkley Date: Tue, 26 Nov 2019 16:29:46 +1100 Subject: [PATCH] PAYMENTS-4944 update payment methods list to show all stored instrument types --- CHANGELOG.md | 4 + assets/img/payment-methods/paypal.svg | 1 + .../paymentMethods/_paymentMethods.scss | 10 +- config.json | 4 + lang/en.json | 1 + .../account/payment-methods-list.html | 123 +++++++++++------- .../pages/account/edit-payment-method.html | 86 +++++++----- 7 files changed, 146 insertions(+), 83 deletions(-) create mode 100644 assets/img/payment-methods/paypal.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 1df9122afd..2b0d4f6ee8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## Draft + +- Update My Account Payment Methods template to expose all new savable payment methods + ## Draft - Add jquery-migrate to Modal test [#1599](https://github.com/bigcommerce/cornerstone/pull/1599) - Upgrade core-js to version 3 [#1598](https://github.com/bigcommerce/cornerstone/pull/1598) diff --git a/assets/img/payment-methods/paypal.svg b/assets/img/payment-methods/paypal.svg new file mode 100644 index 0000000000..3d5bb6bb4f --- /dev/null +++ b/assets/img/payment-methods/paypal.svg @@ -0,0 +1 @@ + diff --git a/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss b/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss index 47f6a30415..e509fcdca6 100644 --- a/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss +++ b/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss @@ -125,6 +125,10 @@ } } +.paymentMethod-meta { + margin-left: auto; +} + .paymentMethod-default { margin-left: spacing("half"); @@ -142,12 +146,12 @@ .paymentMethod-expiry { font-size: fontSize("smaller"); - margin-left: auto; text-transform: capitalize; } .paymentMethod-details { padding: spacing("single"); + padding-bottom: 0; } .paymentMethod-label, @@ -168,10 +172,10 @@ } .paymentMethod-form { - padding: 0 spacing("single") spacing("half"); + padding: spacing("single"); @include breakpoint("small") { - bottom: spacing("half"); + bottom: 0; position: absolute; width: auto; } diff --git a/config.json b/config.json index 3422301273..3af7d199cc 100644 --- a/config.json +++ b/config.json @@ -322,6 +322,10 @@ "mastercard", "visa" ], + "supported_instrument_types": [ + "card", + "paypal" + ], "lazyload_mode": "lazyload+lqip" }, "read_only_files": [ diff --git a/lang/en.json b/lang/en.json index 550dabca4c..1703159542 100755 --- a/lang/en.json +++ b/lang/en.json @@ -378,6 +378,7 @@ "mastercard": "Mastercard", "visa": "Visa" }, + "paypal": "PayPal", "billing_address_labels": { "address_line_1": "Address Line 1", "address_line_2": "Address Line 2", diff --git a/templates/components/account/payment-methods-list.html b/templates/components/account/payment-methods-list.html index 12cae03c23..5ac465e151 100644 --- a/templates/components/account/payment-methods-list.html +++ b/templates/components/account/payment-methods-list.html @@ -1,56 +1,87 @@ -{{#unless customer.payment_methods}} +{{#unless customer.payment_methods_v2}} {{> components/common/alert-info (lang 'account.payment_methods.no_methods')}} {{/unless}} diff --git a/templates/pages/account/edit-payment-method.html b/templates/pages/account/edit-payment-method.html index 7b581e735a..4e1384b695 100644 --- a/templates/pages/account/edit-payment-method.html +++ b/templates/pages/account/edit-payment-method.html @@ -12,43 +12,61 @@

{{lang 'forms.payment_methods.edit.heading'}}

{{> components/common/alert-error customer.payment_methods.selected_payment_method.forms.error}} {{/if}} -
- - - -

{{lang 'account.payment_methods.payment_method'}}

- -
-
-
{{lang 'account.payment_methods.credit_card_number'}}
-
**** **** **** {{customer.payment_methods.selected_payment_method.last_4}}
-
-
-
{{lang 'account.payment_methods.expiration'}}
-
{{customer.payment_methods.selected_payment_method.expiry_month}}/{{customer.payment_methods.selected_payment_method.expiry_year}}
-
-
- - -
-
+ {{#with customer.payment_methods.selected_payment_method}} + + + + {{!-- TODO: if this is empty/unset the endpoint should validate as if card for backwards compatability --}} + -

{{lang 'account.payment_methods.billing_address'}}

+

{{lang 'account.payment_methods.payment_method'}}

-
-
- {{#each customer.payment_methods.selected_payment_method.forms.billing_fields}} - {{{dynamicComponent 'components/common/forms'}}} - {{/each}} +
+ {{#if type '===' 'card'}} +
+
{{lang 'account.payment_methods.credit_card_number'}}
+
**** **** **** {{last_4}}
+
+
+
{{lang 'account.payment_methods.expiration'}}
+
{{expiry_month}}/{{expiry_year}}
+
+ {{/if}} + {{#if type '===' 'paypal'}} +
+

+ {{lang 'account.payment_methods.paypal'}} {{lang 'common.account'}} +

+

+ {{email}} +

+
+ {{/if}} +
+ + +
-
-
- - {{lang 'common.cancel'}} - {{inject 'required' (lang 'common.required')}} - {{inject 'state_error' (lang 'errors.state_error')}} -
-
+ + {{#if type '===' 'card'}} +

{{lang 'account.payment_methods.billing_address'}}

+ +
+
+ {{#each forms.billing_fields}} + {{{dynamicComponent 'components/common/forms'}}} + {{/each}} +
+
+
+ + {{lang 'common.cancel'}} + {{inject 'required' (lang 'common.required')}} + {{inject 'state_error' (lang 'errors.state_error')}} +
+ {{/if}} + + {{/with}} {{/partial}}