diff --git a/CHANGELOG.md b/CHANGELOG.md index 40d3de312c..205f94cb14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Draft - Add translation key for "read more" blog post link [#1625](https://github.com/bigcommerce/cornerstone/pull/1625) +- Update My Account Payment Methods template to expose all new savable payment methods [1603](https://github.com/bigcommerce/cornerstone/pull/1603) + ## 4.3.1 (2020-01-17) - Resolve visual regression in error modal icon animation [#1619](https://github.com/bigcommerce/cornerstone/pull/1619) 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..7cb07f92f1 100644 --- a/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss +++ b/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss @@ -2,133 +2,101 @@ // PAYMENT METHODS (CSS) // ============================================================================= -// Payment Methods layout -// ----------------------------------------------------------------------------- -// -// 1. Using display: inline-block; to vertically align blocks. -// Font-size gets redefined under the .paymentMethod -// -// ----------------------------------------------------------------------------- - -.paymentMethodList { - font-size: 0; // 1 - list-style: none; - margin-left: -(spacing("half")); - margin-right: -(spacing("half")); -} - -.paymentMethodName { - margin-top: 0; - padding: 0 spacing("half"); +.paymentMethodsTitle { + padding: 0; text-transform: none; -} - -.paymentMethod { - display: inline-block; - padding: 0 spacing("half"); - vertical-align: top; width: 100%; - - @include breakpoint("small") { - width: grid-calc(6, $total-columns); - } + margin: 0 0 spacing("half"); } -.paymentMethodForm { - @include breakpoint("small") { - max-width: 60%; - - .paymentMethodForm-column { - display: flex; +.paymentMethodsGrid { + margin: -(spacing("half")); + margin-bottom: spacing("single"); + display: flex; + flex-wrap: wrap; - .paymentMethodForm-inputs:first-child { - width: 70%; - } + &-item { + padding: spacing("half");; + width: 100%; - .paymentMethodForm-inputs:last-child { - padding-left: spacing("single"); - width: 30%; - } - } - - .paymentMethodForm-column:first-child .form-field { - margin-bottom: spacing("half"); + @include breakpoint("small") { + width: grid-calc(6, $total-columns); } } } -// Payment Method -// ----------------------------------------------------------------------------- -// -// 1. Redefine the font-size as we're removing white-space on the parent by -// reducing the size to 0. -// 2. Adding a min-height to improve the consistency of the paymentMethod blocks. -// -// ----------------------------------------------------------------------------- +.paymentMethod { + border: container("border"); + background-color: #e5e5e5; + border-radius: remCalc(3px); + height: 100%; + display: flex; + flex-flow: column nowrap; -.panel--paymentMethod { - font-size: fontSize("base"); // 1 - position: relative; + &-row { + padding: 1.5rem; - .panel-body { - border: container("border"); - border-radius: remCalc(3px); - min-height: remCalc(228px); // 2 - padding: 0; - } + &:first-child { + background-color: #ffffff; + } - .form-actions { - font-size: 0; - margin-top: 0; - text-align: left; + &:last-child { + margin-top: auto; + } - // scss-lint:disable NestingDepth - .button { - margin-top: 0; + &:only-child { + height: 100%; } - // scss-lint:enable NestingDepth } -} -.paymentMethod-card, -.paymentMethod-details { - display: flex; - flex-flow: wrap; - margin-bottom: 0; + // fix + .button { + margin-bottom: 0; + } } -.paymentMethod-card { +.methodHeader { + justify-content: space-between; + display: flex; + flex-flow: row; align-items: center; - background: white; - padding: spacing("half"); - @include breakpoint("large") { - padding: spacing("single"); + &-icon { + margin-right: spacing("half"); + width: remCalc(28px); + + @include breakpoint("large") { + width: remCalc(42px); + } } -} -.paymentMethod-icon { - margin-right: spacing("half"); - width: remCalc(28px); + &-title { + font-size: fontSize("smallest"); + font-weight: fontWeight("semibold"); - @include breakpoint("large") { - width: remCalc(42px); + @include breakpoint("large") { + font-size: fontSize("base"); + } } -} -.paymentMethod-brand { - font-size: fontSize("smallest"); - font-weight: fontWeight("semibold"); + &-brand { + font-size: fontSize("smallest"); + font-weight: fontWeight("semibold"); - @include breakpoint("large") { - font-size: fontSize("base"); + @include breakpoint("large") { + font-size: fontSize("base"); + } } -} -.paymentMethod-default { - margin-left: spacing("half"); + &-meta { + padding-left: spacing("half"); + margin-left: auto; + display: flex; + flex-wrap: nowrap; + } - &.icon { + &-default { + margin-left: spacing("half"); fill: color("greys", "dark"); height: remCalc(18px); width: remCalc(18px); @@ -138,139 +106,134 @@ width: remCalc(20px); } } -} -.paymentMethod-expiry { - font-size: fontSize("smaller"); - margin-left: auto; - text-transform: capitalize; + &-expiry { + font-size: fontSize("smaller"); + text-transform: capitalize; + } } -.paymentMethod-details { - padding: spacing("single"); -} +.methodDetails { + margin: 0; + display: flex; -.paymentMethod-label, -.paymentMethod-description { - display: inline-block; - font-size: fontSize("smallest"); - margin-bottom: spacing("half"); -} + &-label { + flex: 1; + font-weight: fontWeight("semibold"); + } -.paymentMethod-label { - flex: remCalc(100px); - font-weight: fontWeight("semibold"); + &-description { + flex: 2; + font-size: fontSize("smallest"); + } } -.paymentMethod-description { - flex: calc(100% - 100px); - padding-left: spacing("half"); +.newPaymentMethod { + text-decoration: none; + display: flex; + align-items: center; + justify-items: center; + flex-direction: column; + min-height: remCalc(186px); + height: 100%; + + &-icon { + font-size: 50px; + line-height: 1; + margin: auto 0 spacing("half"); + } + + &-title { + margin: 0 auto auto; + text-align: center; + } } -.paymentMethod-form { - padding: 0 spacing("single") spacing("half"); +// Payment Method Form - Add +// ----------------------------------------------------------------------------- +.paymentMethodForm { @include breakpoint("small") { - bottom: spacing("half"); - position: absolute; - width: auto; + max-width: 60%; } -} -.panel--newPaymentMethod { - display: block; - text-align: center; - text-decoration: none; + &-column { + @include breakpoint("small") { + display: flex; - &:hover { - // scss-lint:disable NestingDepth - .paymentMethod-title { - color: stencilColor("color-textLink--hover"); + &:first-child .form-field { + margin-bottom: spacing("half"); + } } - // scss-lint:enable NestingDepth } - .panel-body { - background-color: transparent; + &-heading { + color: color("greys", "darker"); + font-family: fontFamily("sans"); + margin-top: spacing("single"); + text-transform: capitalize; } - .paymentMethod-title { - margin-bottom: 0; - text-transform: none; - transition: all 0.15s ease; + &-subheading { + display: flex; + font-weight: fontWeight("semibold"); } -} -.paymentMethod-addNew { - left: 50%; - position: absolute; - top: 50%; - transform: translateX(-50%) translateY(-55%); -} - -.paymentMethod-symbol { - font-size: fontSize("hero"); - line-height: 1; -} + &-cards { + @include breakpoint("small") { + margin-left: auto; + } + } -// Payment Method Form - Add / Edit -// ----------------------------------------------------------------------------- + &-cards-icon { + margin-right: spacing("eighth"); + width: remCalc(34px); + } -.paymentMethodForm-heading { - color: color("greys", "darker"); - font-family: fontFamily("sans"); - margin-top: spacing("single"); - text-transform: capitalize; -} + &-inputs { + position: relative; -.paymentMethodForm-subheading { - display: flex; - font-weight: fontWeight("semibold"); -} + @include breakpoint("small") { + &:last-child { + padding-left: spacing("single"); + width: 30%; + } -.paymentMethodForm-cards { - @include breakpoint("small") { - margin-left: auto; + &:first-child { + width: 70%; + } + } } -} - -.paymentMethodForm-cards-icon { - margin-right: spacing("eighth"); - width: remCalc(34px); -} - -.paymentMethodForm-inputs { - position: relative; -} -.paymentMethodForm-inputs-icon { - position: absolute; - right: remCalc(9px); - top: remCalc(39px); + &-inputs-icon { + position: absolute; + right: remCalc(9px); + top: remCalc(39px); - &.icon { - fill: color("greys", "light"); - height: remCalc(21px); - width: remCalc(21px); + &.icon { + fill: color("greys", "light"); + height: remCalc(21px); + width: remCalc(21px); + } } -} -.paymentMethodForm-details { - margin-bottom: 0; + &-details { + margin-bottom: 0; - @include breakpoint("small") { - display: inline-block; - margin: 0 spacing("double") 0 0; + @include breakpoint("small") { + display: inline-block; + margin: 0 spacing("double") 0 0; + } } -} -.paymentMethodForm-details-term { - font-weight: fontWeight("normal"); - margin-bottom: spacing("half"); -} + &-details-term { + font-weight: fontWeight("normal"); + margin-bottom: spacing("half"); + } -.paymentMethodForm-details-description { - font-size: fontSize("smaller"); - font-weight: fontWeight("semibold"); - letter-spacing: letterSpacing("large"); + &-details-description { + font-size: fontSize("smaller"); + font-weight: fontWeight("semibold"); + letter-spacing: letterSpacing("large"); + } } diff --git a/config.json b/config.json index 02a6b24a0a..57066a15db 100644 --- a/config.json +++ b/config.json @@ -31,9 +31,9 @@ "product_videos", "google_amp", "customized_checkout", - "account_payment_methods", "enhanced_ecommerce", - "csrf_protection" + "csrf_protection", + "account_payment_methods_v2" ] }, "css_compiler": "scss", @@ -322,6 +322,10 @@ "mastercard", "visa" ], + "supported_payment_methods": [ + "card", + "paypal" + ], "lazyload_mode": "lazyload+lqip" }, "read_only_files": [ diff --git a/lang/en.json b/lang/en.json index 0d12556da8..e32ebda027 100755 --- a/lang/en.json +++ b/lang/en.json @@ -379,6 +379,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..6e1f492953 100644 --- a/templates/components/account/payment-methods-list.html +++ b/templates/components/account/payment-methods-list.html @@ -2,55 +2,88 @@ {{> components/common/alert-info (lang 'account.payment_methods.no_methods')}} {{/unless}} - + + {{/if}} + + {{/inArray}} +{{/each}} + diff --git a/templates/pages/account/edit-payment-method.html b/templates/pages/account/edit-payment-method.html index 7b581e735a..bba1d95389 100644 --- a/templates/pages/account/edit-payment-method.html +++ b/templates/pages/account/edit-payment-method.html @@ -7,49 +7,65 @@

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

{{> components/account/navigation account_page='payment_methods'}}
- - {{#if customer.payment_methods.selected_payment_method.forms.error}} - {{> components/common/alert-error customer.payment_methods.selected_payment_method.forms.error}} + {{#if forms.error}} + {{> components/common/alert-error 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.edit_stored_instrument}} + + + + + +

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

+ +
+ {{#if type '===' 'stored_card'}} +
+
{{lang 'account.payment_methods.credit_card_number'}}
+
**** **** **** {{last_4}}
+
+
+
{{lang 'account.payment_methods.expiration'}}
+
{{expiry_month}}/{{expiry_year}}
+
+ {{/if}} + {{#if type '===' 'stored_paypal_account'}} +
+

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

+

+ {{email}} +

+
+ {{/if}} +
+ + + +
-
-

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

+ {{#if type '===' 'stored_card'}} +

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

-
-
- {{#each customer.payment_methods.selected_payment_method.forms.billing_fields}} - {{{dynamicComponent 'components/common/forms'}}} - {{/each}} +
+
+ {{#each forms.billing_fields}} + {{{dynamicComponent 'components/common/forms'}}} + {{/each}} +
+
+ {{/if}} +
+ + {{lang 'common.cancel'}} + {{inject 'required' (lang 'common.required')}} + {{inject 'state_error' (lang 'errors.state_error')}}
-
-
- - {{lang 'common.cancel'}} - {{inject 'required' (lang 'common.required')}} - {{inject 'state_error' (lang 'errors.state_error')}} -
- + + {{/with}}
- {{/partial}} {{> layout/base}}