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

…nt types
bigcommerce · Dec 24, 2019 · 27b0c2b · 27b0c2b
1 parent 5f1d5c5
commit 27b0c2b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss b/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss
@@ -19,7 +19,7 @@
 
 .paymentMethodName {
     margin-top: 0;
-    padding: 0 spacing("half");
+    padding: 0;
     text-transform: none;
 }
 
@@ -98,6 +98,8 @@
 }
 
 .paymentMethod-card {
+    justify-content: space-between;
+    flex-flow: row;
     align-items: center;
     background: white;
     padding: spacing("half");
@@ -126,7 +128,10 @@
 }
 
 .paymentMethod-meta {
+    padding-left: spacing("half");
     margin-left: auto;
+    display: flex;
+    flex-wrap: nowrap;
 }
 
 .paymentMethod-default {

diff --git a/templates/components/account/payment-methods-list.html b/templates/components/account/payment-methods-list.html
@@ -2,12 +2,12 @@
     {{> components/common/alert-info (lang 'account.payment_methods.no_methods')}}
 {{/unless}}
 
-<ul class="paymentMethodList">
-    {{#each customer.payment_methods}}
-        {{#if @key '!==' 'selected_payment_method'}}
-            <h4 class="paymentMethodName">
-                {{display_name}}
-            </h4>
+{{#each customer.payment_methods}}
+    {{#if @key '!==' 'selected_payment_method'}}
+        <h4 class="paymentMethodName">
+            {{display_name}}
+        </h4>
+        <ul class="paymentMethodList">
             {{#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}}
@@ -82,6 +82,7 @@ <h5 class="paymentMethod-title">{{lang 'account.payment_methods.new_payment_meth
                     </a>
                 </li>
             {{/if}}
-        {{/if}}
-    {{/each}}
-</ul>
+        </ul>
+    {{/if}}
+{{/each}}
+
diff --git a/templates/pages/account/edit-payment-method.html b/templates/pages/account/edit-payment-method.html
@@ -64,13 +64,12 @@ <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_ad
                 {{/if}}
                 <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>
+                    <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>
         {{/with}}
     </div>
-
 {{/partial}}
 {{> layout/base}}