refactor(payment): INT-2614 renaming values for iban/accountnumber

bigcommerce · Jun 11, 2020 · c186b0e · c186b0e
1 parent 36db992
commit c186b0e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/src/app/payment/storedInstrument/AccountInstrumentSelect.spec.tsx b/src/app/payment/storedInstrument/AccountInstrumentSelect.spec.tsx
@@ -244,7 +244,7 @@ describe('AccountInstrumentSelect', () => {
         expect(submit).toHaveBeenCalledWith({ instrumentId: '' }, expect.anything());
     });
 
-    it('shows list of instruments when clicked and is a bank instrument', () => {
+    it('shows list of instruments when clicked and is an account instrument', () => {
         defaultProps.instruments = getInstruments().filter(isBankAccountInstrument);
         const component = mount(
             <LocaleContext.Provider value={ localeContext }>
@@ -273,10 +273,10 @@ describe('AccountInstrumentSelect', () => {
             .toEqual(true);
 
         expect(component.find('[data-test="instrument-select-option"]').at(0).text())
-            .toContain('Iban ending in: ABCIssuer: DEF');
+            .toContain('Account number ending in: ABCIssuer: DEF');
     });
 
-    it('notifies parent when instrument is selected and is a bank instrument', () => {
+    it('notifies parent when instrument is selected and is an account instrument', () => {
         defaultProps.instruments = getInstruments().filter(isBankAccountInstrument);
         const component = mount(
             <LocaleContext.Provider value={ localeContext }>

diff --git a/src/app/payment/storedInstrument/AccountInstrumentSelect.tsx b/src/app/payment/storedInstrument/AccountInstrumentSelect.tsx
@@ -250,7 +250,7 @@ const BankInstrumentMenuItem: FunctionComponent<AccountInstrumentMenuItemProps>
       onClick,
 }) => {
     const issuerName = `Issuer: ${instrument.issuer}`;
-    const maskIban = `Iban ending in: ${instrument.iban}`;
+    const accountNumber = `Account number ending in: ${instrument.accountNumber}`;
 
     return (
         <button
@@ -265,7 +265,7 @@ const BankInstrumentMenuItem: FunctionComponent<AccountInstrumentMenuItemProps>
                     // abstract these icons in a similar way we did for credit cards.
                 }
                 <div className="instrumentSelect-card">
-                    { maskIban }
+                    { accountNumber }
                 </div>
                 <div className="instrumentSelect-issuer">
                     { issuerName }

diff --git a/src/app/payment/storedInstrument/ManageAccountInstrumentsTable.tsx b/src/app/payment/storedInstrument/ManageAccountInstrumentsTable.tsx
@@ -72,9 +72,16 @@ const ManageInstrumentsRow: FunctionComponent<ManageInstrumentsRowProps> = ({
                     size={ IconSize.Medium }
                 /> }
 
-                <span className="instrumentModal-instrumentAccountExternalId">
+                { !instrument.accountNumber ?
+                  <span className="instrumentModal-instrumentAccountExternalId">
                     { instrument.externalId }
-                </span>
+                  </span> :
+                  <span className="instrumentModal-instrumentAccountNumber">
+                    <TranslatedString id="payment.instrument_manage_table_header_ending_in_text" />
+                    <span>
+                      { instrument.accountNumber }
+                    </span>
+                  </span> }
             </td>
             <td>
                 <button

diff --git a/src/app/payment/storedInstrument/instruments.mock.ts b/src/app/payment/storedInstrument/instruments.mock.ts
@@ -49,7 +49,7 @@ export function getInstruments(): PaymentInstrument[] {
         {
             bigpayToken: '12341234',
             provider: 'adyen',
-            iban: 'ABC',
+            accountNumber: 'ABC',
             issuer: 'DEF',
             externalId: 'test@external-id-3.com',
             trustedShippingAddress: false,
@@ -60,7 +60,7 @@ export function getInstruments(): PaymentInstrument[] {
         {
             bigpayToken: '45454545',
             provider: 'adyen',
-            iban: 'GHI',
+            accountNumber: 'GHI',
             issuer: 'JKL',
             externalId: 'test@external-id-4.com',
             trustedShippingAddress: false,

diff --git a/src/scss/components/checkout/instrumentModal/_instrumentModal.scss b/src/scss/components/checkout/instrumentModal/_instrumentModal.scss
@@ -11,6 +11,7 @@
 }
 
 .instrumentModal-instrumentAccountExternalId,
+.instrumentModal-instrumentAccountNumber,
 .instrumentModal-instrumentCardType {
     margin-left: spacing("half");
 }