Skip to content

Commit

Permalink
PAYMENTS-4944 update payment methods list to show all stored instrume…
Browse files Browse the repository at this point in the history
…nt types
  • Loading branch information
leeBigCommerce committed Dec 6, 2019
1 parent 0a4f0b0 commit 35360c6
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 83 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
1 change: 1 addition & 0 deletions assets/img/payment-methods/paypal.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@
}
}

.paymentMethod-meta {
margin-left: auto;
}

.paymentMethod-default {
margin-left: spacing("half");

Expand All @@ -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,
Expand All @@ -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;
}
Expand Down
4 changes: 4 additions & 0 deletions config.json
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,10 @@
"mastercard",
"visa"
],
"supported_instrument_types": [
"card",
"paypal"
],
"lazyload_mode": "lazyload+lqip"
},
"read_only_files": [
Expand Down
1 change: 1 addition & 0 deletions lang/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
123 changes: 77 additions & 46 deletions templates/components/account/payment-methods-list.html
Original file line number Diff line number Diff line change
@@ -1,56 +1,87 @@
{{#unless customer.payment_methods}}
{{#unless customer.payment_methods_v2}}
{{> components/common/alert-info (lang 'account.payment_methods.no_methods')}}
{{/unless}}

<ul class="paymentMethodList">
{{#each customer.payment_methods}}
{{#each customer.payment_methods_v2}}
{{#if @key '!==' 'selected_payment_method'}}
<h4 class="paymentMethodName">{{display_name}}</h4>
{{#each methods}}
<li class="paymentMethod">
<div class="panel panel--paymentMethod">
<div class="panel-body">
<div class="paymentMethod-card">
{{#if brand}}
{{#inArray ../../../../theme_settings.supported_card_type_icons brand}}
<img class="paymentMethod-icon" src="{{cdn (concat (concat 'img/payment-methods/' brand) '.svg')}}" alt="{{lang (concat 'account.payment_methods.card_types.' brand)}}" title="{{lang (concat 'account.payment_methods.card_types.' brand)}}">
{{/inArray}}
<span class="paymentMethod-brand">{{lang (concat 'account.payment_methods.card_types.' brand)}} {{lang 'account.payment_methods.card_ending_in' last_four=last_4}}</span>
{{else}}
<img class="paymentMethod-icon" src="{{cdn 'img/payment-methods/card.svg'}}" alt="{{lang 'account.payment_methods.card_types.credit_card'}}" title="{{lang 'account.payment_methods.card_types.credit_card'}}">
<span class="paymentMethod-brand">{{lang 'account.payment_methods.card_types.credit_card'}} {{lang 'account.payment_methods.card_ending_in' last_four=last_4}}</span>
{{/if}}
<span class="paymentMethod-expiry">{{lang 'account.payment_methods.card_expiry' month=expiry_month year=expiry_year}}</span>
{{#if default_instrument}}
<svg class="paymentMethod-default icon">
<use xlink:href="#icon-star" />
</svg>
{{/if}}
</div>
<dl class="paymentMethod-details">
<dt class="paymentMethod-label">{{lang 'account.payment_methods.billing_address'}}:</dt>
<dd class="paymentMethod-description">{{billing_address.address_line_1}}, {{billing_address.address_line_2}}, {{billing_address.city}}, {{billing_address.state}}, {{billing_address.postal_code}}, {{billing_address.country_name}}</dd>
</dl>
<form class="paymentMethod-form" action="{{delete_url}}" method="post" data-delete-payment-method="{{lang 'forms.payment_methods.confirm_delete'}}">
<div class="form-actions">
<a class="button button--primary button--small" href="{{edit_url}}">{{lang 'common.edit' }}</a>
<button type="submit" class="button button--small">{{lang 'common.delete' }}</button>
<h4 class="paymentMethodName">
{{display_name}}
</h4>
{{#each stored_instruments}}
{{!-- Check that the current instrument type is within our whitelist to stop future ones automagically coming through --}}
{{#inArray ../../../theme_settings.supported_instrument_types ../type}}
<li class="paymentMethod">
<div class="panel panel--paymentMethod">
<div class="panel-body">
<div class="paymentMethod-card">
{{#if ../../type '===' 'card'}}
{{!-- If credit card STARTS --}}
{{#if brand}}
{{#inArray ../../../../../../theme_settings.supported_card_type_icons brand}}
<img class="paymentMethod-icon" src="{{cdn (concat (concat 'img/payment-methods/' brand) '.svg')}}" alt="{{lang (concat 'account.payment_methods.card_types.' brand)}}" title="{{lang (concat 'account.payment_methods.card_types.' brand)}}">
{{/inArray}}
<span class="paymentMethod-brand">{{lang (concat 'account.payment_methods.card_types.' brand)}} {{lang 'account.payment_methods.card_ending_in' last_four=last_4}}</span>
{{else}}
<img class="paymentMethod-icon" src="{{cdn 'img/payment-methods/card.svg'}}" alt="{{lang 'account.payment_methods.card_types.credit_card'}}" title="{{lang 'account.payment_methods.card_types.credit_card'}}">
<span class="paymentMethod-brand">{{lang 'account.payment_methods.card_types.credit_card'}} {{lang 'account.payment_methods.card_ending_in' last_four=last_4}}</span>
{{/if}}
{{!-- If credit card ENDS --}}
{{/if}}
{{#if ../../type '===' 'paypal'}}
{{!-- If paypal STARTS --}}
<img class="paymentMethod-icon" src="{{cdn (concat (concat 'img/payment-methods/' ../../../type) '.svg')}}" alt="{{lang 'account.payment_methods.paypal'}}" title="{{lang 'account.payment_methods.paypal'}}">
<span class="paymentMethod-brand">
{{email}}
</span>
{{!-- If paypal ENDS --}}
{{/if}}
<div class="paymentMethod-meta">
{{#if expiry_year}}
<span class="paymentMethod-expiry">{{lang 'account.payment_methods.card_expiry' month=expiry_month year=expiry_year}}</span>
{{/if}}
{{#if is_default}}
<svg class="paymentMethod-default icon">
<use xlink:href="#icon-star" />
</svg>
{{/if}}
</div>
</div>
{{#if billing_address}}
{{!-- If there is an address STARTS --}}
<dl class="paymentMethod-details">
<dt class="paymentMethod-label">{{lang 'account.payment_methods.billing_address'}}:</dt>
<dd class="paymentMethod-description">{{billing_address.address_line_1}}, {{billing_address.address_line_2}}, {{billing_address.city}}, {{billing_address.state}}, {{billing_address.postal_code}}, {{billing_address.country_name}}</dd>
</dl>
{{!-- If there is an address ENDS --}}
{{/if}}
<form class="paymentMethod-form" action="{{delete_url}}" method="post" data-delete-payment-method="{{lang 'forms.payment_methods.confirm_delete'}}">
<div class="form-actions">
{{#if edit_url}}
<a class="button button--primary button--small" href="{{edit_url}}">{{lang 'common.edit' }}</a>
{{/if}}
{{#if delete_url}}
<button type="submit" class="button button--small">{{lang 'common.delete' }}</button>
{{/if}}
</div>
</form>
</div>
</form>
</div>
</div>
</li>
</div>
</li>
{{/inArray}}
{{/each}}
<li class="paymentMethod">
<a class="panel panel--paymentMethod panel--newPaymentMethod" href="{{add_url}}">
<div class="panel-body">
<span class="paymentMethod-addNew">
<span class="paymentMethod-symbol">&plus;</span>
<h5 class="paymentMethod-title">{{lang 'account.payment_methods.new_payment_method' }}</h5>
</span>
</div>
</a>
</li>
{{#if add_url}}
<li class="paymentMethod">
<a class="panel panel--paymentMethod panel--newPaymentMethod" href="{{add_url}}">
<div class="panel-body">
<span class="paymentMethod-addNew">
<span class="paymentMethod-symbol">&plus;</span>
<h5 class="paymentMethod-title">{{lang 'account.payment_methods.new_payment_method' }}</h5>
</span>
</div>
</a>
</li>
{{/if}}
{{/if}}
{{/each}}
</ul>
86 changes: 52 additions & 34 deletions templates/pages/account/edit-payment-method.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,43 +12,61 @@ <h2 class="page-heading">{{lang 'forms.payment_methods.edit.heading'}}</h2>
{{> components/common/alert-error customer.payment_methods.selected_payment_method.forms.error}}
{{/if}}

<form action="{{customer.payment_methods.selected_payment_method.forms.action}}" data-address-form class="form" method="post">
<input type="hidden" name="bigpay_token" value="{{customer.payment_methods.selected_payment_method.bigpay_token}}">
<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">
<dl class="paymentMethodForm-details">
<dt class="paymentMethodForm-details-term">{{lang 'account.payment_methods.credit_card_number'}}</dt>
<dd class="paymentMethodForm-details-description">**** **** **** {{customer.payment_methods.selected_payment_method.last_4}}</dd>
</dl>
<dl class="paymentMethodForm-details">
<dt class="paymentMethodForm-details-term">{{lang 'account.payment_methods.expiration'}}</dt>
<dd class="paymentMethodForm-details-description">{{customer.payment_methods.selected_payment_method.expiry_month}}/{{customer.payment_methods.selected_payment_method.expiry_year}}</dd>
</dl>
<div class="form-field">
<input type="checkbox" value="default_instrument" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox" {{#if customer.payment_methods.selected_payment_method.default_instrument}}checked{{/if}}>
<label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
</div>
</div>
{{#with customer.payment_methods.selected_payment_method}}
<form action="{{forms.action}}" data-address-form class="form" method="post">
<input type="hidden" name="bigpay_token" value="{{bigpay_token}}">
<input type="hidden" name="currency_code" value="{{currency_selector.active_currency_code}}">
{{!-- TODO: if this is empty/unset the endpoint should validate as if card for backwards compatability --}}
<input type="hidden" name="type" value="{{type}}">

<h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>
<h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_method'}}</h3>

<fieldset class="form-fieldset">
<div class="form-row form-row--half">
{{#each customer.payment_methods.selected_payment_method.forms.billing_fields}}
{{{dynamicComponent 'components/common/forms'}}}
{{/each}}
<div class="paymentMethodForm">
{{#if type '===' 'card'}}
<dl class="paymentMethodForm-details">
<dt class="paymentMethodForm-details-term">{{lang 'account.payment_methods.credit_card_number'}}</dt>
<dd class="paymentMethodForm-details-description">**** **** **** {{last_4}}</dd>
</dl>
<dl class="paymentMethodForm-details">
<dt class="paymentMethodForm-details-term">{{lang 'account.payment_methods.expiration'}}</dt>
<dd class="paymentMethodForm-details-description">{{expiry_month}}/{{expiry_year}}</dd>
</dl>
{{/if}}
{{#if type '===' 'paypal'}}
<div class="form-field">
<h3 class="paymentMethodForm-heading">
{{lang 'account.payment_methods.paypal'}} {{lang 'common.account'}}
</h3>
<p>
{{email}}
</p>
</div>
{{/if}}
<div class="form-field">
<input type="checkbox" value="default_instrument" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox" {{#if default_instrument}}checked{{/if}}>
<label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
</div>
</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')}}
</div>
</form>

{{#if type '===' 'card'}}
<h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>

<fieldset class="form-fieldset">
<div class="form-row form-row--half">
{{#each forms.billing_fields}}
{{{dynamicComponent 'components/common/forms'}}}
{{/each}}
</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')}}
</div>
{{/if}}
</form>
{{/with}}
</div>

{{/partial}}
Expand Down

0 comments on commit 35360c6

Please sign in to comment.