From 099645afeece3de14c5f1f5194f5b428a9a2b175 Mon Sep 17 00:00:00 2001
From: "serhii.tkachenko" <serhii.tkachenko@bigcommerce.com>
Date: Fri, 26 May 2023 07:58:04 +0300
Subject: [PATCH] feat(payment): PAYPAL-2495 added ACH payment method section
 to My Account -> Payment Methods page

---
 CHANGELOG.md                                          |  1 +
 assets/img/payment-methods/ach.svg                    |  4 ++++
 lang/en.json                                          |  2 ++
 .../components/account/payment-methods-list.html      | 11 +++++++----
 4 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 assets/img/payment-methods/ach.svg

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb4e913513..6b60f9656b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Added ACH payment method section to My Account -> Payment Methods page [#2362](https://github.com/bigcommerce/cornerstone/pull/2362)
 
 ## 6.11.0 (05-24-2023)
 - Reverted fix for sold-out badge appearance [#2354](https://github.com/bigcommerce/cornerstone/pull/2354)
diff --git a/assets/img/payment-methods/ach.svg b/assets/img/payment-methods/ach.svg
new file mode 100644
index 0000000000..608f9ba134
--- /dev/null
+++ b/assets/img/payment-methods/ach.svg
@@ -0,0 +1,4 @@
+<svg width="88" height="56" viewBox="0 0 88 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.80004 0.208008H81.2C84.734 0.208008 87.71 3.27467 87.71 6.91634V49.083C87.71 52.7247 84.734 55.7913 81.2 55.7913H6.80004C3.26604 55.7913 0.290039 52.7247 0.290039 49.083V6.91634C0.290039 3.27467 3.26604 0.208008 6.80004 0.208008Z" fill="#1524D9"/>
+    <path d="M35.0723 34.7082L33.9563 32.0249H28.9343L28.0043 34.7082H24.6562L30.2363 21.0999H33.3983L38.6063 34.7082H35.0723ZM31.5383 24.9332L29.8643 29.5332H33.2123L31.5383 24.9332ZM48.4643 34.5165C47.5343 34.8999 46.6043 35.0915 45.4883 35.0915C44.5583 35.0915 43.6283 34.8999 42.6983 34.5165C41.0243 33.9415 39.7223 32.5999 38.9783 30.8749C38.2343 28.9582 38.2343 27.0415 38.9783 25.1249C39.3503 24.3582 39.9083 23.5915 40.4663 22.8249C41.2103 22.2499 41.9543 21.6749 42.6983 21.4832C44.5583 20.7165 46.4183 20.7165 48.2783 21.4832C49.0223 21.8665 49.9523 22.2499 50.5103 23.0165L48.2783 25.3165C47.9063 24.9332 47.5343 24.5499 47.1623 24.3582C46.6043 24.1665 46.2323 23.9749 45.6743 23.9749C45.1163 23.9749 44.5583 23.9749 44.1863 24.3582C43.8143 24.5499 43.2563 24.9332 43.0703 25.3165C42.6983 25.6999 42.5123 26.0832 42.3263 26.6582C42.1403 27.2332 41.9543 27.8082 42.1403 28.3832C42.1403 28.9582 42.1403 29.5332 42.3263 30.1082C42.5123 30.6832 42.6983 31.0665 43.0703 31.4499C43.4423 31.8332 43.8143 32.0249 44.1863 32.2165C44.7443 32.4082 45.1163 32.5999 45.6743 32.5999C46.2323 32.5999 46.7903 32.4082 47.3483 32.2165C47.7203 32.0249 48.2783 31.6415 48.4643 31.2582L50.6963 33.3665C50.1383 33.5582 49.3943 34.1332 48.4643 34.5165ZM60.3683 34.7082V29.1499H55.1603V34.7082H51.9983V21.0999H55.1603V26.2749H60.3683V21.0999H63.5303V34.5165L60.3683 34.7082Z" fill="white"/>
+</svg>
diff --git a/lang/en.json b/lang/en.json
index 2f06a8d140..131da67f0b 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -388,6 +388,7 @@
         "payment_methods": {
             "heading": "Payment Methods",
             "payment_method": "Payment method",
+            "bank_account": "Bank account",
             "billing_address": "Billing address",
             "card_ending_in": "ending in {last_four}",
             "card_expiry": "{month}/{year}",
@@ -409,6 +410,7 @@
                 "unionpay": "Union Pay",
                 "visa": "Visa"
             },
+            "ach": "ACH",
             "paypal": "PayPal",
             "billing_address_labels": {
               "address_line_1": "Address Line 1",
diff --git a/templates/components/account/payment-methods-list.html b/templates/components/account/payment-methods-list.html
index 966ff808d8..c3504880c6 100644
--- a/templates/components/account/payment-methods-list.html
+++ b/templates/components/account/payment-methods-list.html
@@ -33,10 +33,13 @@ <h4 class="paymentMethodsTitle">
 
                                 {{#if type '===' 'stored_bank_account'}}
                                     {{!-- If bank_account STARTS --}}
-                                    <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 ../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}}
+                                        <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}}