feat(checkout): INT-1916 Customize barclacard payment method title logos

bigcommerce · Nov 12, 2019 · ebec263 · ebec263
1 parent 9a60ad9
commit ebec263
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/src/app/payment/paymentMethod/PaymentMethodTitle.spec.tsx b/src/app/payment/paymentMethod/PaymentMethodTitle.spec.tsx
@@ -190,6 +190,7 @@ describe('PaymentMethodTitle', () => {
         const methodIds = [
             PaymentMethodId.Amazon,
             PaymentMethodId.ChasePay,
+            PaymentMethodType.Barclaycard,
             PaymentMethodType.GooglePay,
             PaymentMethodType.Masterpass,
         ];
@@ -210,4 +211,26 @@ describe('PaymentMethodTitle', () => {
                 .toEqual(0);
         });
     });
+
+    it('renders a different logo for each methodId for Barclaycard', () => {
+        const imageExtension = '.png';
+        const imageFolder = '/img/payment-providers/';
+        const method = PaymentMethodType.Barclaycard;
+        const id = 'card';
+
+        const component = mount(<PaymentMethodTitleTest
+            { ...defaultProps }
+            method={ {
+                ...defaultProps.method,
+                id,
+                method,
+            } }
+        />);
+
+        const expectedPath = `${config.cdnPath}${imageFolder}${method}_${id.toLowerCase()}${imageExtension}`;
+
+        expect(component.find('[data-test="payment-method-logo"]').prop('src'))
+            .toEqual(expectedPath);
+
+    });
 });
diff --git a/src/app/payment/paymentMethod/PaymentMethodTitle.tsx b/src/app/payment/paymentMethod/PaymentMethodTitle.tsx
@@ -80,6 +80,10 @@ function getPaymentMethodTitle(
                 logoUrl: cdnPath('/img/payment-providers/zip.png'),
                 titleText: language.translate('payment.zip_display_name_text'),
             },
+            [PaymentMethodType.Barclaycard]: {
+                logoUrl: cdnPath(`/img/payment-providers/barclaycard_${method.id.toLowerCase()}.png`),
+                titleText: '',
+            },
         };
 
         // KLUDGE: 'paypal' is actually a credit card method. It is the only

diff --git a/src/app/payment/paymentMethod/PaymentMethodType.ts b/src/app/payment/paymentMethod/PaymentMethodType.ts
@@ -1,4 +1,5 @@
 enum PaymentMethodType {
+    Barclaycard = 'barclaycard',
     Chasepay = 'chasepay',
     CreditCard = 'credit-card',
     GooglePay = 'googlepay',