cornerstone/templates/components/account/payment-methods-list.html at c6a5df835962fefa9a6fc2a59cc7e66edcf0c07c · bigcommerce/cornerstone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
{{#unless customer.payment_methods}}
    {{> components/common/alert/alert-info (lang 'account.payment_methods.no_methods')}}
{{/unless}}

{{#each customer.payment_methods}}
    {{!-- Check that the current instrument type is within our whitelist to stop future ones automagically coming through --}}
    {{#inArray ../theme_settings.supported_payment_methods type}}
        <h4 class="paymentMethodsTitle">
            {{display_name}}
        </h4>
        {{#if description}}
            <p>{{description}}</p>
        {{/if}}
        <div class="paymentMethodsGrid">
            {{#each stored_instruments}}
                <div class="paymentMethodsGrid-item">
                    <div class="paymentMethod">
                        <div class="paymentMethod-row">
                            <div class="methodHeader">
                                {{#if type '===' 'stored_card'}}
                                    {{!-- If credit card STARTS --}}
                                    {{#if brand}}
                                        {{#inArray ../../theme_settings.supported_card_type_icons brand }}
                                            <img class="methodHeader-icon" src="{{cdn (multiConcat '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="methodHeader-brand">{{lang (concat 'account.payment_methods.card_types.' brand)}} {{lang 'account.payment_methods.card_ending_in' last_four=last_4}}</span>
                                    {{else}}
                                        <img class="methodHeader-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="methodHeader-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 '===' 'stored_bank_account'}}
                                    {{!-- If bank_account STARTS --}}
                                    {{#if ../methodId '===' 'ach'}}
                                        <img class="methodHeader-icon" src="{{cdn 'img/payment-methods/ach.svg'}}" alt="{{lang 'account.payment_methods.ach'}}" title="{{lang 'account.payment_methods.ach'}}">
                                        <span class="methodHeader-brand">{{lang 'account.payment_methods.bank_account'}} {{lang 'account.payment_methods.card_ending_in' last_four=masked_account_number}}</span>
                                    {{else if ../methodId '===' 'ecp'}}
                                        <img class="methodHeader-icon" src="{{cdn 'img/payment-methods/ach.svg'}}" alt="{{lang 'account.payment_methods.ach'}}" title="{{lang 'account.payment_methods.ach'}}">
                                        <span class="methodHeader-brand">{{lang 'account.payment_methods.bank_account'}} {{lang 'account.payment_methods.card_ending_in' last_four=masked_account_number}}</span>
                                    {{else if ../methodId '===' 'sepa_direct_debit'}}
                                        <img class="methodHeader-icon" src="{{cdn 'img/payment-methods/sepa.svg'}}" alt="{{lang 'account.payment_methods.sepa_direct_debit'}}" title="{{lang 'account.payment_methods.sepa_direct_debit'}}">
                                        <span class="methodHeader-brand">{{lang 'account.payment_methods.bank_account'}} {{masked_account_number}}</span>
                                    {{else}}
                                        <img class="methodHeader-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="methodHeader-brand">{{lang 'account.payment_methods.payment_method'}}</span>
                                    {{/if}}
                                    {{!-- If bank_account ENDS --}}
                                {{/if}}

                                {{#if type '===' 'stored_paypal_account'}}
                                    {{!-- If paypal STARTS --}}
                                    <img class="methodHeader-icon" src="{{cdn 'img/payment-methods/paypal.svg'}}" alt="{{lang 'account.payment_methods.paypal'}}" title="{{lang 'account.payment_methods.paypal'}}">
                                    <span class="methodHeader-brand">
                                        {{email}}
                                    </span>
                                    {{!-- If paypal ENDS --}}
                                {{/if}}
                                <div class="methodHeader-meta">
                                    {{#if expiry_year}}
                                        <span class="methodHeader-expiry">{{lang 'account.payment_methods.card_expiry' month=expiry_month year=expiry_year}}</span>
                                    {{/if}}
                                    {{#if is_default}}
                                        <svg class="methodHeader-default">
                                            <use href="#icon-star" />
                                        </svg>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                        {{#if billing_address}}
                            <div class="paymentMethod-row">
                                {{!-- If there is an address STARTS --}}
                                <p class="methodDetails">
                                    <span class="methodDetails-label">{{lang 'account.payment_methods.billing_address'}}:</span>
                                    <span class="methodDetails-description">
                                        <span>{{billing_address.address1}}, </span>
                                        {{#if billing_address.address2}}
                                            <span>{{billing_address.address2}}, </span>
                                        {{/if}}
                                        <span>{{billing_address.city}}, {{billing_address.state}} {{billing_address.zip}} {{billing_address.country}}</span>
                                    </span>
                                </p>
                                {{!-- If there is an address ENDS --}}

                            </div>
                        {{/if}}
                        <div class="paymentMethod-row">
                            <form action="{{delete_url}}" method="post" data-delete-payment-method="{{lang 'forms.payment_methods.confirm_delete'}}">
                                {{#if edit_url}}
                                    <a class="button button--primary button--small methodActions-button" href="{{edit_url}}">{{lang 'common.edit' }}</a>
                                {{/if}}
                                {{#if delete_url}}
                                    <button type="submit" class="button button--small methodActions-button">{{lang 'common.delete' }}</button>
                                {{/if}}
                            </form>
                        </div>
                    </div>
                </div>
            {{/each}}
            {{#if add_url}}
                <div class="paymentMethodsGrid-item">
                    <div class="paymentMethod">
                        <div class="paymentMethod-row">
                            <a class="newPaymentMethod" href="{{add_url}}">
                                <div class="newPaymentMethod-icon">&plus;</div>
                                <h5 class="newPaymentMethod-title">{{lang 'account.payment_methods.new_payment_method' }}</h5>
                            </a>
                        </div>
                    </div>
                </div>
            {{/if}}
        </div>
    {{/inArray}}
{{/each}}