diff --git a/.changeset/slimy-dots-sparkle.md b/.changeset/slimy-dots-sparkle.md new file mode 100644 index 00000000..534188eb --- /dev/null +++ b/.changeset/slimy-dots-sparkle.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': patch +--- + +Fix inconsistency displaying custom brand logo for the gift card payment diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx index 7996b608..be84135f 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx @@ -1,11 +1,10 @@ import { h } from 'preact'; import PaymentMethodIcon from './PaymentMethodIcon'; - import useCoreContext from '../../../../core/Context/useCoreContext'; import './OrderPaymentMethods.scss'; import useImage from '../../../../core/Context/useImage'; -export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel }) => { +export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }) => { const { i18n } = useCoreContext(); const getImage = useImage(); @@ -19,7 +18,7 @@ export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel }) => { •••• {orderPaymentMethod.lastFour} diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx index a4594c79..23d9ba72 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx @@ -1,10 +1,12 @@ import { h } from 'preact'; import PaymentMethodList from './PaymentMethodList'; -import { render, screen } from '@testing-library/preact'; +import { render, screen, within } from '@testing-library/preact'; import { mock } from 'jest-mock-extended'; import UIElement from '../../../UIElement'; import EventEmitter from '../../../EventEmitter'; import userEvent from '@testing-library/user-event'; +import Giftcard from '../../../Giftcard'; +import { Order, OrderStatus } from '../../../../types'; function createInstantPaymentMethods() { return [ @@ -157,3 +159,54 @@ test('should display instant payment methods', () => { expect(screen.getByTestId('instant-googlepay')).toBeVisible(); expect(screen.getByTestId('instant-applepay')).toBeVisible(); }); + +describe('Gift card', () => { + let giftCardPayment; + + beforeEach(() => { + const props = { + id: '3', + type: 'giftcard', + brand: 'givex', + oneClick: true, + brandsConfiguration: { + givex: { icon: 'https://example.com' } + } + }; + giftCardPayment = new Giftcard(props); + }); + + test('should display the gift card custom icon in the payment method list', async () => { + render( + + ); + const img = await screen.findByRole('img'); + // @ts-ignore img element contains src + expect(img.src).toContain('https://example.com'); + }); + + test('should display the gift card custom icon in the order payment section', async () => { + const order: Order = { orderData: 'dummy', pspReference: 'dummyPsp' }; + const orderStatus: OrderStatus = { + expiresAt: '2023-06-08T13:08:29.00Z', + pspReference: 'dummyPsp', + reference: 'dummyRef', + paymentMethods: [{ lastFour: '0000', type: 'givex', amount: { currency: 'USD', value: 5000 } }], + remainingAmount: { currency: 'USD', value: 20940 } + }; + render( + + ); + const orderHeader = await screen.findByText(/0000/); + const img = await within(orderHeader).findByRole('img'); + // @ts-ignore img element contains src + expect(img.src).toContain('https://example.com'); + }); +}); diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx index e9594908..4405aacf 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx @@ -8,6 +8,7 @@ import { Order, OrderStatus } from '../../../../types'; import OrderPaymentMethods from './OrderPaymentMethods'; import InstantPaymentMethods from './InstantPaymentMethods'; import useCoreContext from '../../../../core/Context/useCoreContext'; +import { useBrandLogoConfiguration } from './useBrandLogoConfiguration'; interface PaymentMethodListProps { paymentMethods: UIElement[]; @@ -66,10 +67,17 @@ class PaymentMethodList extends Component { 'adyen-checkout__payment-methods-list--loading': isLoading }); + const brandLogoConfiguration = useBrandLogoConfiguration(paymentMethods); + return ( {this.props.orderStatus && ( - + )} {!!instantPaymentMethods.length && } diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts b/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts new file mode 100644 index 00000000..0f4b0e38 --- /dev/null +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/useBrandLogoConfiguration.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'preact/hooks'; +import UIElement from '../../../UIElement'; + +type BrandLogoConfiguration = { + [key: string]: string; +}; + +export function useBrandLogoConfiguration(paymentMethods: UIElement[]): BrandLogoConfiguration { + const [brandLogoConfiguration, setBrandLogoConfiguration] = useState({}); + + useEffect(() => { + setBrandLogoConfiguration( + paymentMethods.reduce( + (accumulator, paymentMethod) => ({ + ...accumulator, + ...(paymentMethod.props.brand && paymentMethod.icon && { [paymentMethod.props.brand]: paymentMethod.icon }) + }), + {} + ) + ); + }, [paymentMethods]); + + return brandLogoConfiguration; +} diff --git a/packages/lib/src/types/index.ts b/packages/lib/src/types/index.ts index 426ab779..f9c06e0a 100644 --- a/packages/lib/src/types/index.ts +++ b/packages/lib/src/types/index.ts @@ -246,6 +246,7 @@ export interface Order { export interface OrderStatus { expiresAt: string; paymentMethods: { + amount?: PaymentAmount; lastFour: string; type: string; }[];