PAYMENTS-4944 update payment methods list to show all stored instrume…

…nt types
bigcommerce · Nov 27, 2019 · a141a20 · a141a20
1 parent 0a4f0b0
commit a141a20
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 47 deletions.
diff --git 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
diff --git 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,7 +146,6 @@
 
 .paymentMethod-expiry {
     font-size: fontSize("smaller");
-    margin-left: auto;
     text-transform: capitalize;
 }
 

diff --git 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
@@ -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
@@ -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 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>