diff --git a/packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js b/packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js index 3e8b4fe838..8025804f4a 100644 --- a/packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js +++ b/packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js @@ -1,6 +1,7 @@ import DropinPage from '../../_models/Dropin.page'; import CardComponentPage from '../../_models/CardComponent.page'; import { BCMC_DUAL_BRANDED_VISA, DUAL_BRANDED_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../utils/constants'; +import { Selector } from 'testcafe'; const dropinPage = new DropinPage({ components: { @@ -18,17 +19,17 @@ test('#1 Check Bancontact comp is correctly presented at startup', async t => { // Wait for field to appear in DOM await t.wait(1000); - await t.expect(dropinPage.brandsImages.count).eql(3); + const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands'); + const images = brandsInsidePaymentMethod.find('img'); // Expect 3 card brand logos to be displayed (not concerned about order) + await t.expect(images.count).eql(3); await t - .expect(dropinPage.brandsHolder.exists) + .expect(images.nth(0).withAttribute('alt', 'bcmc').exists) .ok() - .expect(dropinPage.brandsImages.withAttribute('alt', 'bcmc').exists) + .expect(images.nth(1).withAttribute('alt', 'visa').exists) .ok() - .expect(dropinPage.brandsImages.withAttribute('alt', 'visa').exists) - .ok() - .expect(dropinPage.brandsImages.withAttribute('alt', 'maestro').exists) + .expect(images.nth(2).withAttribute('alt', 'maestro').exists) .ok(); // Hidden cvc field diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js index 06e20af3f5..61ee6e180f 100644 --- a/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js +++ b/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js @@ -1,4 +1,3 @@ window.cardConfig = { - brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc'], - showBrandsUnderCardNumber: true + brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc'] }; diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js new file mode 100644 index 0000000000..3b55ecaa85 --- /dev/null +++ b/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js @@ -0,0 +1,4 @@ +window.cardConfig = { + brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc'], + showBrandsUnderCardNumber: false +}; diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js index 66ee6e9aa9..f9d288e3c4 100644 --- a/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js +++ b/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js @@ -8,12 +8,12 @@ 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 `showBrandsUnderCardNumber` is set', async t => { +test('Available brands dont show underneath Card Number field if property `showBrandsUnderCardNumber` is set to false', async t => { const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands'); - await t.expect(brandsInsidePaymentMethod.find('img').count).eql(10); -}).clientScripts('./availableBrands.clientScripts.js'); + await t.expect(brandsInsidePaymentMethod.find('img').count).eql(0); +}).clientScripts('./availableBrands.disabled.clientScripts.js'); -test('Available brands dont show underneath Card Number field by default', async t => { +test('Available brands show underneath Card Number field by default', async t => { const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands'); - await t.expect(brandsInsidePaymentMethod.find('img').count).eql(0); -}); + 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 index 2d856aa79f..03d2c88fcf 100644 --- 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: { - showBrandsUnderCardNumber: true + showBrandsUnderCardNumber: false } } }; diff --git a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.compactView.test.js b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.compactView.test.js index b508510306..f1536ba5c6 100644 --- a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.compactView.test.js +++ b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.compactView.test.js @@ -8,7 +8,6 @@ let dropinPage = null; fixture`Cards - Available Brands (Compact view)` .page(DROPIN_SESSIONS_URL) .requestHooks([mock]) - .clientScripts('availableBrands.clientScripts.js') .beforeEach(() => { dropinPage = new DropinPage({}); }); diff --git a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.defaultView.test.js b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.defaultView.test.js index 9c9c5dda5a..88af5dcee0 100644 --- a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.defaultView.test.js +++ b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.defaultView.test.js @@ -8,6 +8,7 @@ let dropinPage = null; fixture`Cards - Available Brands (Default view)` .page(DROPIN_SESSIONS_URL) .requestHooks([mock]) + .clientScripts('./availableBrands.clientScripts.js') .beforeEach(() => { dropinPage = new DropinPage({}); }); diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx index 222acbb3bd..844e20487d 100644 --- 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 { protected static defaultProps = { onBinLookup: () => {}, - showBrandsUnderCardNumber: false, + showBrandsUnderCardNumber: true, 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 index 3f7e435a2d..2f3ad41ad3 100644 --- a/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx +++ b/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx @@ -53,8 +53,8 @@ describe('CardInput', () => { }); describe('CardInput - Brands beneath Card Number field', () => { - test('should not render brands if property `showBrandsUnderCardNumber` isnt set', () => { - const wrapper = mount(); + test('should not render brands if property `showBrandsUnderCardNumber` is set to false', () => { + const wrapper = mount(); expect(wrapper.find('span.adyen-checkout__card__brands').exists()).toBeFalsy(); }); @@ -68,6 +68,16 @@ describe('CardInput - Brands beneath Card Number field', () => { expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper--disabled')).toHaveLength(0); }); + test('should render brands if property `showBrandsUnderCardNumber` is not set', () => { + const brandsIcons = [ + { name: 'visa', icon: 'visa.png' }, + { name: 'mc', icon: 'mc.png' } + ]; + const wrapper = mount(); + expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper')).toHaveLength(2); + expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper--disabled')).toHaveLength(0); + }); + test('should disable the brands icons that are not detected', () => { const detectedBrand = 'visa'; const brandsIcons = [ @@ -75,7 +85,7 @@ describe('CardInput - Brands beneath Card Number field', () => { { name: 'mc', icon: 'mc.png' }, { name: 'amex', icon: 'amex.png' } ]; - const wrapper = mount(); + const wrapper = mount(); 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/AvailableBrands/AvailableBrands.scss b/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.scss index 92ab04c992..14aec04ce6 100644 --- a/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.scss +++ b/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.scss @@ -5,7 +5,7 @@ flex-basis: auto; flex-shrink: 1; flex-wrap: wrap; - height: 16px; + gap: 4px; margin-top: -8px; margin-bottom: 16px; } @@ -22,7 +22,6 @@ .adyen-checkout__card__brands__brand-wrapper { display: inline-block; height: 16px; - margin-right: 4px; transition: opacity .2s ease-out; width: 24px; position: relative; diff --git a/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx b/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx index 2a524390df..f75baed93f 100644 --- a/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx +++ b/packages/lib/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx @@ -12,7 +12,7 @@ interface PaymentMethodBrandsProps { } const AvailableBrands = ({ brands, activeBrand }: PaymentMethodBrandsProps) => { - if (!brands.length) { + if (!brands?.length) { return null; } diff --git a/packages/lib/src/components/Card/components/CardInput/defaultProps.ts b/packages/lib/src/components/Card/components/CardInput/defaultProps.ts index b5586f427c..eedacaf657 100644 --- a/packages/lib/src/components/Card/components/CardInput/defaultProps.ts +++ b/packages/lib/src/components/Card/components/CardInput/defaultProps.ts @@ -11,6 +11,7 @@ export default { enableStoreDetails: false, hasCVC: true, showBrandIcon: true, + showBrandsUnderCardNumber: true, positionHolderNameOnTop: false, billingAddressRequired: false, billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'], diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx index 145cfea165..6318d964eb 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx @@ -19,8 +19,13 @@ describe('PaymentMethodBrands', () => { expect(wrapper.find(CompactView)).toHaveLength(1); }); - test('should render all brands if compact view is not set', () => { + test('should render compact view if prop is not', () => { const wrapper = mount(); + expect(wrapper.find(CompactView)).toHaveLength(1); + }); + + test('should not render compact view if prop is set to false', () => { + const wrapper = mount(); expect(wrapper.find(PaymentMethodIcon)).toHaveLength(6); }); }); diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx index 11eb8e5deb..6b00d34b21 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx @@ -10,7 +10,7 @@ interface PaymentMethodBrandsProps { isCompactView?: boolean; } -const PaymentMethodBrands = ({ activeBrand, brands, isPaymentMethodSelected, isCompactView = false }: PaymentMethodBrandsProps) => { +const PaymentMethodBrands = ({ activeBrand, brands, isPaymentMethodSelected, isCompactView = true }: PaymentMethodBrandsProps) => { if (isCompactView) { return ; } diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss index d09f1902e9..4eb292fff5 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss @@ -58,6 +58,7 @@ $payment-button-padding: $spacing-xsmall; padding: $spacing-medium - $payment-button-padding; padding-left: $spacing-xxlarge - $payment-button-padding; + padding-right: $spacing-medium; position: relative; transition: background 0.1s ease-out; width: 100%; diff --git a/packages/playground/src/pages/Dropin/session.js b/packages/playground/src/pages/Dropin/session.js index ab4334ad6f..9e506d270c 100644 --- a/packages/playground/src/pages/Dropin/session.js +++ b/packages/playground/src/pages/Dropin/session.js @@ -31,9 +31,6 @@ export async function initSession() { paymentMethodsConfiguration: { paywithgoogle: { buttonType: 'plain' - }, - card: { - showBrandsUnderCardNumber: true } } });