Card brands - Updating property name (#1534)

Adyen · Mar 14, 2022 · 692da95 · 692da95
1 parent d4d479c
commit 692da95
Show file tree

Hide file tree

Showing 14 changed files with 20 additions and 20 deletions.
diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js
@@ -1,4 +1,4 @@
 window.cardConfig = {
     brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc'],
-    showBrandsInCard: true
+    showBrandsUnderCardNumber: true
 };
diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js
@@ -8,7 +8,7 @@ fixture`Cards - Available brands on Card Component`.page(CARDS_URL).beforeEach(a
     cardComponent = new CardComponent('.card-field');
 });
 
-test('Available brands show underneath Card Number field if property `showBrandsInCard` is set', async t => {
+test('Available brands show underneath Card Number field if property `showBrandsUnderCardNumber` is set', async t => {
     const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
     await t.expect(brandsInsidePaymentMethod.find('img').count).eql(10);
 }).clientScripts('./availableBrands.clientScripts.js');

diff --git a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.clientScripts.js b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.clientScripts.js
@@ -1,7 +1,7 @@
 window.mainConfiguration = {
     paymentMethodsConfiguration: {
         card: {
-            showBrandsInCard: true
+            showBrandsUnderCardNumber: true
         }
     }
 };
diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx
@@ -15,7 +15,7 @@ export class CardElement extends UIElement<CardElementProps> {
 
     protected static defaultProps = {
         onBinLookup: () => {},
-        showBrandsInCard: false,
+        showBrandsUnderCardNumber: false,
         SRConfig: {}
     };
 

diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx
@@ -53,17 +53,17 @@ describe('CardInput', () => {
 });
 
 describe('CardInput - Brands beneath Card Number field', () => {
-    test('should not render brands if property `showBrandsInCard` isnt set', () => {
+    test('should not render brands if property `showBrandsUnderCardNumber` isnt set', () => {
         const wrapper = mount(<CardInput i18n={i18n} />);
         expect(wrapper.find('span.adyen-checkout__card__brands').exists()).toBeFalsy();
     });
 
-    test('should render brands if property `showBrandsInCard` is set', () => {
+    test('should render brands if property `showBrandsUnderCardNumber` is set', () => {
         const brandsIcons = [
             { name: 'visa', icon: 'visa.png' },
             { name: 'mc', icon: 'mc.png' }
         ];
-        const wrapper = mount(<CardInput i18n={i18n} showBrandsInCard brandsIcons={brandsIcons} />);
+        const wrapper = mount(<CardInput i18n={i18n} showBrandsUnderCardNumber brandsIcons={brandsIcons} />);
         expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper')).toHaveLength(2);
         expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper--disabled')).toHaveLength(0);
     });
@@ -75,7 +75,7 @@ describe('CardInput - Brands beneath Card Number field', () => {
             { name: 'mc', icon: 'mc.png' },
             { name: 'amex', icon: 'amex.png' }
         ];
-        const wrapper = mount(<CardInput i18n={i18n} brand={detectedBrand} showBrandsInCard brandsIcons={brandsIcons} />);
+        const wrapper = mount(<CardInput i18n={i18n} brand={detectedBrand} showBrandsUnderCardNumber brandsIcons={brandsIcons} />);
         const brands = wrapper.find('.adyen-checkout__card__brands__brand-wrapper');
 
         expect(brands.at(0).is('.adyen-checkout__card__brands__brand-wrapper--disabled')).toBeFalsy();

diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
@@ -28,7 +28,7 @@ export default function CardFields({
     expiryDatePolicy,
     onFocusField,
     showBrandIcon,
-    showBrandsInCard,
+    showBrandsUnderCardNumber,
     valid
 }: CardFieldsProps) {
     const { i18n } = useCoreContext();
@@ -50,7 +50,7 @@ export default function CardFields({
                 dualBrandingSelected={dualBrandingSelected}
             />
 
-            {showBrandsInCard && <AvailableBrands activeBrand={brand} brands={brandsIcons} />}
+            {showBrandsUnderCardNumber && <AvailableBrands activeBrand={brand} brands={brandsIcons} />}
 
             <div
                 className={classNames('adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper', {

diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx
@@ -65,7 +65,7 @@ export const CardFieldsWrapper = ({
     positionHolderNameOnTop,
     // For CardFields > CardNumber
     showBrandIcon,
-    showBrandsInCard
+    showBrandsUnderCardNumber
 }) => {
     const { i18n } = useCoreContext();
 
@@ -97,7 +97,7 @@ export const CardFieldsWrapper = ({
 
             <CardFields
                 showBrandIcon={showBrandIcon}
-                showBrandsInCard={showBrandsInCard}
+                showBrandsUnderCardNumber={showBrandsUnderCardNumber}
                 brand={sfpState.brand}
                 brandsIcons={brandsIcons}
                 brandsConfiguration={brandsConfiguration}

diff --git a/packages/lib/src/components/Card/components/CardInput/components/types.ts b/packages/lib/src/components/Card/components/CardInput/components/types.ts
@@ -22,7 +22,7 @@ export interface CardFieldsProps {
     expiryDatePolicy?: DatePolicyType;
     onFocusField?: any;
     showBrandIcon?: boolean;
-    showBrandsInCard: boolean;
+    showBrandsUnderCardNumber: boolean;
     valid?: any;
 }
 

diff --git a/packages/lib/src/components/Card/components/CardInput/types.ts b/packages/lib/src/components/Card/components/CardInput/types.ts
@@ -96,7 +96,7 @@ export interface CardInputProps {
     placeholders?: Placeholders;
     positionHolderNameOnTop?: boolean;
     setComponentRef?: (ref) => void;
-    showBrandsInCard: boolean;
+    showBrandsUnderCardNumber: boolean;
     showBrandIcon?: boolean;
     showInstallmentAmounts?: boolean;
     showPayButton?: boolean;

diff --git a/packages/lib/src/components/Card/components/CardInput/utils.ts b/packages/lib/src/components/Card/components/CardInput/utils.ts
@@ -153,7 +153,7 @@ export const extractPropsForCardFields = (props: CardInputProps) => {
         positionHolderNameOnTop: props.positionHolderNameOnTop,
         // Extract props for CardFields > CardNumber
         showBrandIcon: props.showBrandIcon,
-        showBrandsInCard: props.showBrandsInCard,
+        showBrandsUnderCardNumber: props.showBrandsUnderCardNumber,
         // Extract props for StoredCardFields
         lastFour: props.lastFour,
         expiryMonth: props.expiryMonth,

diff --git a/packages/lib/src/components/Card/types.ts b/packages/lib/src/components/Card/types.ts
@@ -34,10 +34,10 @@ export interface CardElementProps extends UIElementProps {
     brands?: string[];
 
     /**
-     * Show/hide available card brands beneath the Card number field
+     * Show/hide available card brands under the Card number field
      * @defaultValue `false`
      */
-    showBrandsInCard?: boolean;
+    showBrandsUnderCardNumber?: boolean;
 
     /**
      * Show/hide the brand logo when the card brand has been recognized

diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
@@ -165,7 +165,7 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
                             activeBrand={activeBrand}
                             brands={paymentMethod.brands}
                             isPaymentMethodSelected={isSelected}
-                            isCompactView={paymentMethod.props.showBrandsInCard}
+                            isCompactView={paymentMethod.props.showBrandsUnderCardNumber}
                         />
                     )}
                 </div>

diff --git a/packages/playground/src/pages/Cards/Cards.js b/packages/playground/src/pages/Cards/Cards.js
@@ -55,7 +55,7 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse =
                         plans: ['regular', 'revolving']
                     }
                 },
-                showBrandsInCard: true,
+                showBrandsUnderCardNumber: true,
                 showInstallmentAmounts: true,
                 onError: obj => {
                     console.log('### Cards::onError:: obj=', obj);

diff --git a/packages/playground/src/pages/Dropin/session.js b/packages/playground/src/pages/Dropin/session.js
@@ -33,7 +33,7 @@ export async function initSession() {
                 buttonType: 'plain'
             },
             card: {
-                showBrandsInCard: true
+                showBrandsUnderCardNumber: true
             }
         }
     });
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ export async function initSession() { @@
                     buttonType: 'plain'
                 },
                 card: {
-                    showBrandsInCard: true
+                    showBrandsUnderCardNumber: true
                 }
             }
         });
@@ Expand Down @@