jlengrand/adyen-web
1
0
Fork 0
mirror of https://github.com/jlengrand/adyen-web.git synced 2026-03-10 08:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes images not loading from resource provider (#2278)

Browse Source 
* changes all comp to use the same getImage imp

* adds changeset

* fixes failing tests

* remove unused object form getImage
This commit is contained in:
António Ferreira
2023-08-07 12:35:20 +02:00
committed by GitHub
parent aa3f3aa7ae
commit 19d69b0d26
44 changed files with 133 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/purple-bears-attack.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@adyen/adyen-web': patch
---
fix issuer list logos not loading from resources url

3
packages/lib/config/testMocks/resourcesMock.ts
View File

@@ -1,10 +1,9 @@
import { mock } from 'jest-mock-extended';
import { Resources } from '../../src/core/Context/Resources';
import getImage from '../../src/utils/get-image';
function setupResourceMock() {
const resources = mock<Resources>();
resources.getImage.mockImplementation(() => getImage({}));
resources.getImage.mockImplementation(props => props => 'MOCK');
return resources;
}

4
packages/lib/src/components/BacsDD/components/BacsResult.tsx
View File

@@ -7,7 +7,7 @@ import './BacsResult.scss';
import useImage from '../../../core/Context/useImage';
const BacsResult = props => {
const { i18n, loadingContext } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const { url, paymentMethodType } = props;
@@ -15,7 +15,7 @@ const BacsResult = props => {
<Voucher
paymentMethodType={paymentMethodType}
introduction={i18n.get('bacs.result.introduction')}
imageUrl={getImage({ loadingContext })(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
downloadUrl={url}
downloadButtonText={i18n.get('download.pdf')}
/>

2
packages/lib/src/components/BankTransfer/components/BankTransferResult/BankTransferResult.tsx
View File

@@ -13,7 +13,7 @@ export default function BankTransferResult(props) {
<Voucher
paymentMethodType={paymentMethodType}
introduction={i18n.get('bankTransfer.instructions')}
imageUrl={getImage({})(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
amount={totalAmount && i18n.amount(totalAmount.value, totalAmount.currency)}
voucherDetails={[
{ label: i18n.get('bankTransfer.beneficiary'), value: props.beneficiary },

4
packages/lib/src/components/Blik/components/BlikInput.tsx
View File

@@ -19,7 +19,7 @@ interface BlikInputDataState {
}
function BlikInput(props: BlikInputProps) {
const { i18n, loadingContext } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<BlikInputDataState>({
schema: ['blikCode'],
@@ -72,7 +72,7 @@ function BlikInput(props: BlikInputProps) {
{props.showPayButton &&
props.payButton({
status,
icon: getImage({ loadingContext, imageFolder: 'components/' })('lock')
icon: getImage({ imageFolder: 'components/' })('lock')
})}
</div>
);

2
packages/lib/src/components/Boleto/components/BoletoVoucherResult/BoletoVoucherResult.tsx
View File

@@ -19,7 +19,7 @@ const BoletoVoucherResult = props => {
paymentMethodType={'boletobancario'}
barcode={barcodeUrl}
introduction={i18n.get('voucher.introduction')}
imageUrl={getImage({})(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
amount={totalAmount && i18n.amount(totalAmount.value, totalAmount.currency)}
voucherDetails={[{ label: i18n.get('voucher.expirationDate'), value: i18n.date(expiresAt) }] as VoucherDetail[]}
downloadUrl={downloadUrl}

6
packages/lib/src/components/Card/Card.tsx
View File

@@ -165,14 +165,14 @@ export class CardElement extends UIElement<CardElementProps> {
}
get icon() {
return this.props.icon ?? this.resources.getImage({ loadingContext: this.props.loadingContext })(this.brand);
return this.props.icon ?? this.resources.getImage()(this.brand);
}
get brands(): { icon: any; name: string }[] {
const { brands, loadingContext, brandsConfiguration } = this.props;
const { brands, brandsConfiguration } = this.props;
if (brands) {
return brands.map(brand => {
const brandIcon = brandsConfiguration[brand]?.icon ?? this.props.modules.resources.getImage({ loadingContext })(brand);
const brandIcon = brandsConfiguration[brand]?.icon ?? this.props.modules.resources.getImage()(brand);
return { icon: brandIcon, name: brand };
});
}

6
packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx
View File

@@ -1,13 +1,13 @@
import { h } from 'preact';
import { getCardImageUrl, getFullBrandName } from '../utils';
import useCoreContext from '../../../../../core/Context/useCoreContext';
import { BrandIconProps } from './types';
import styles from '../CardInput.module.scss';
import useImage from '../../../../../core/Context/useImage';
export default function BrandIcon({ brand, brandsConfiguration = {} }: BrandIconProps) {
const { loadingContext } = useCoreContext();
const getImage = useImage();
const imageName = brand === 'card' ? 'nocard' : brand;
const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, loadingContext);
const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);
const handleError = e => {
e.target.style.cssText = 'display: none';
};

6
packages/lib/src/components/Card/components/CardInput/components/DualBrandingIcon/DualBrandingIcon.tsx
View File

@@ -1,14 +1,14 @@
import { h } from 'preact';
import styles from '../../CardInput.module.scss';
import useCoreContext from '../../../../../../core/Context/useCoreContext';
import { getCardImageUrl, getFullBrandName } from '../../utils';
import { DualBrandingIconProps } from '../types';
import './DualBrandingIcon.scss';
import useImage from '../../../../../../core/Context/useImage';
const DualBrandingIcon = ({ brand, onClick, dataValue, notSelected, brandsConfiguration = {} }: DualBrandingIconProps) => {
const { loadingContext } = useCoreContext();
const getImage = useImage();
const imageName = brand === 'card' ? 'nocard' : brand;
const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, loadingContext);
const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);
const handleError = e => {
e.target.style.cssText = 'display: none';
};

9
packages/lib/src/components/Card/components/CardInput/utils.ts
View File

@@ -1,4 +1,3 @@
import { getImageUrl } from '../../../../utils/get-image';
import Language from '../../../../language/Language';
import { AddressModeOptions, CardInputProps, LayoutObj } from './types';
import {
@@ -17,15 +16,15 @@ import { PARTIAL_ADDRESS_SCHEMA } from '../../../internal/Address/constants';
import { InstallmentsObj } from './components/Installments/Installments';
import { SFPProps } from '../../../internal/SecuredFields/SFP/types';
import { BRAND_READABLE_NAME_MAP } from '../../../internal/SecuredFields/lib/configuration/constants';
import { UseImageHookType } from '../../../../core/Context/useImage';
export const getCardImageUrl = (brand: string, loadingContext: string): string => {
export const getCardImageUrl = (brand: string, getImage: UseImageHookType): string => {
const imageOptions = {
type: brand === 'card' ? 'nocard' : brand || 'nocard',
extension: 'svg',
loadingContext
extension: 'svg'
};
return getImageUrl(imageOptions)(brand);
return getImage(imageOptions)(brand);
};
/**

2
packages/lib/src/components/Doku/Doku.tsx
View File

@@ -28,7 +28,7 @@ export class DokuElement extends UIElement {
}
get icon() {
return this.resources.getImage({})(this.props.type);
return this.resources.getImage()(this.props.type);
}
render() {

2
packages/lib/src/components/Doku/components/DokuVoucherResult/DokuVoucherResult.tsx
View File

@@ -15,7 +15,7 @@ const DokuVoucherResult = (props: DokuVoucherResultProps) => {
paymentMethodType={paymentMethodType}
reference={reference}
introduction={i18n.get('voucher.introduction.doku')}
imageUrl={getImage({})(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
instructionsUrl={instructionsUrl}
amount={totalAmount && i18n.amount(totalAmount.value, totalAmount.currency)}
voucherDetails={[

6
packages/lib/src/components/Donation/components/DonationComponent.tsx
View File

@@ -12,7 +12,7 @@ import useImage from '../../../core/Context/useImage';
export default function DonationComponent(props: DonationComponentProps) {
const { amounts, onCancel, onDonate, showCancelButton = true, disclaimerMessage } = props;
const { i18n, loadingContext } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const { currency } = amounts;
const [status, setStatus] = useState('ready');
@@ -53,7 +53,7 @@ export default function DonationComponent(props: DonationComponentProps) {
<div className="adyen-checkout__adyen-giving">
<Img
className="adyen-checkout__status__icon adyen-checkout__status__icon--error"
src={getImage({ loadingContext, imageFolder: 'components/' })('error')}
src={getImage({ imageFolder: 'components/' })('error')}
alt={i18n.get('error.message.unknown')}
/>
<div className="adyen-checkout__status__text">{i18n.get('error.message.unknown')}</div>
@@ -66,7 +66,7 @@ export default function DonationComponent(props: DonationComponentProps) {
<div className="adyen-checkout__adyen-giving">
<Img
className="adyen-checkout__status__icon adyen-checkout__status__icon--success"
src={getImage({ loadingContext, imageFolder: 'components/' })('heart')}
src={getImage({ imageFolder: 'components/' })('heart')}
alt={i18n.get('thanksForYourSupport')}
/>

4
packages/lib/src/components/Dragonpay/components/DragonpayInput/DragonpayInput.tsx
View File

@@ -7,9 +7,11 @@ import getIssuerImageUrl from '../../../../utils/get-issuer-image';
import useCoreContext from '../../../../core/Context/useCoreContext';
import { DragonpayInputData, DragonpayInputIssuerItem, DragonpayInputProps } from '../../types';
import { personalDetailsValidationRules } from '../../../internal/PersonalDetails/validate';
import useImage from '../../../../core/Context/useImage';
export default function DragonpayInput(props: DragonpayInputProps) {
const { i18n } = useCoreContext();
const getImage = useImage();
const isIssuerRequired = () => {
const typesRequiringIssuers = ['dragonpay_ebanking', 'dragonpay_otc_banking', 'dragonpay_otc_non_banking'];
return typesRequiringIssuers.indexOf(props.type) > -1;
@@ -26,7 +28,7 @@ export default function DragonpayInput(props: DragonpayInputProps) {
}
});
const getIssuerIcon = getIssuerImageUrl({}, props.type);
const getIssuerIcon = getIssuerImageUrl({}, props.type, getImage);
const items = props.items.map(
(item: DragonpayInputIssuerItem): DragonpayInputIssuerItem => ({
...item,

5
packages/lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.test.tsx
View File

@@ -12,6 +12,9 @@ describe('DragonpayVoucherResult', () => {
test('should render issuer image for dragonpay_otc_non_banking', () => {
const wrapper = shallow(<DragonpayVoucherResult issuer="BPXB" paymentMethodType="dragonpay_otc_non_banking" />);
const voucher = wrapper.find('Voucher');
expect(voucher.props()).toHaveProperty('issuerImageUrl', 'images/logos/dragonpay_otc_non_banking/bpxb.svg');
expect(voucher.props()).toHaveProperty(
'issuerImageUrl',
'https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/dragonpay_otc_non_banking/bpxb.svg'
);
});
});

6
packages/lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.tsx
View File

@@ -4,12 +4,14 @@ import getIssuerImageUrl from '../../../../utils/get-issuer-image';
import useCoreContext from '../../../../core/Context/useCoreContext';
import { DragonpayVoucherResultProps } from '../../types';
import { VoucherDetail } from '../../../internal/Voucher/types';
import useImage from '../../../../core/Context/useImage';
export default function DragonpayVoucherResult(props: DragonpayVoucherResultProps) {
const { reference, totalAmount, surcharge, expiresAt, alternativeReference, instructionsUrl, icon, issuer, paymentMethodType } = props;
const { loadingContext, i18n } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const issuerImageUrl =
paymentMethodType !== 'dragonpay_otc_philippines' ? getIssuerImageUrl({ loadingContext }, paymentMethodType)(issuer.toLowerCase()) : null;
paymentMethodType !== 'dragonpay_otc_philippines' ? getIssuerImageUrl({}, paymentMethodType, getImage)(issuer.toLowerCase()) : null;
return (
<Voucher

2
packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx
View File

@@ -18,7 +18,7 @@ export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLo
<PaymentMethodIcon
altDescription={orderPaymentMethod.name}
type={orderPaymentMethod.type}
src={brandLogoConfiguration[orderPaymentMethod.type] || getImage({})(orderPaymentMethod.type)}
src={brandLogoConfiguration[orderPaymentMethod.type] || getImage()(orderPaymentMethod.type)}
/>
•••• {orderPaymentMethod.lastFour}
</div>

4
packages/lib/src/components/Dropin/components/status/Error.tsx
View File

@@ -6,7 +6,7 @@ import useImage from '../../../../core/Context/useImage';
import { useA11yReporter } from '../../../../core/Errors/useA11yReporter';
const Error = ({ message }) => {
const { loadingContext, i18n } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const status = i18n.get(message || 'error.message.unknown');
useA11yReporter(status);
@@ -15,7 +15,7 @@ const Error = ({ message }) => {
<div className="adyen-checkout__status adyen-checkout__status--error">
<Img
className="adyen-checkout__status__icon"
src={getImage({ loadingContext, extension: 'gif', imageFolder: 'components/' })('error')}
src={getImage({ extension: 'gif', imageFolder: 'components/' })('error')}
alt={i18n.get(message || 'error.message.unknown')}
height="88"
/>

2
packages/lib/src/components/Econtext/Econtext.tsx
View File

@@ -42,7 +42,7 @@ export class EcontextElement extends UIElement<EcontextElementProps> {
}
get icon() {
return this.resources.getImage({ loadingContext: this.props.loadingContext })(this.props.type);
return this.resources.getImage()(this.props.type);
}
render() {

2
packages/lib/src/components/Econtext/components/EcontextVoucherResult/EcontextVoucherResult.tsx
View File

@@ -15,7 +15,7 @@ const EcontextVoucherResult = (props: EcontextVoucherResultProps) => {
paymentMethodType={paymentMethodType}
reference={reference}
introduction={i18n.get('voucher.introduction.econtext')}
imageUrl={getImage({})(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
instructionsUrl={instructionsUrl}
amount={totalAmount && i18n.amount(totalAmount.value, totalAmount.currency)}
voucherDetails={[

6
packages/lib/src/components/Giftcard/Giftcard.tsx
View File

@@ -39,11 +39,7 @@ export class GiftcardElement extends UIElement {
}
get icon() {
return (
this.props.brandsConfiguration[this.props.brand]?.icon ||
this.props.icon ||
this.resources.getImage({ loadingContext: this.props.loadingContext })(this.props.brand)
);
return this.props.brandsConfiguration[this.props.brand]?.icon || this.props.icon || this.resources.getImage()(this.props.brand);
}
get displayName() {

2
packages/lib/src/components/GooglePay/GooglePay.tsx
View File

@@ -114,7 +114,7 @@ class GooglePay extends UIElement<GooglePayProps> {
}
get icon(): string {
return this.props.icon ?? this.resources.getImage({ loadingContext: this.props.loadingContext })('googlepay');
return this.props.icon ?? this.resources.getImage()('googlepay');
}
render() {

2
packages/lib/src/components/Multibanco/components/MultibancoVoucherResult/MultibancoVoucherResult.tsx
View File

@@ -23,7 +23,7 @@ const MultibancoVoucherResult = (props: MultibancoVoucherResultProps) => {
barcode={null}
copyBtn
downloadUrl={downloadUrl}
imageUrl={getImage({})(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
introduction={i18n.get('voucher.introduction')}
paymentMethodType={'multibanco'}
reference={reference}

2
packages/lib/src/components/OnlineBankingCZ/index.ts
View File

@@ -20,7 +20,7 @@ class OnlineBankingCZElement extends IssuerListContainer {
}
get icon(): string {
return this.props.icon ?? this.resources.getImage({ loadingContext: this.props.loadingContext })(ICON);
return this.props.icon ?? this.resources.getImage()(ICON);
}
}

2
packages/lib/src/components/OnlineBankingSK/index.ts
View File

@@ -20,7 +20,7 @@ class OnlineBankingSKElement extends IssuerListContainer {
}
get icon(): string {
return this.props.icon ?? this.resources.getImage({ loadingContext: this.props.loadingContext })(ICON);
return this.props.icon ?? this.resources.getImage()(ICON);
}
}

3
packages/lib/src/components/OnlinebankingPL/OnlineBankingPL.spec.ts
View File

@@ -15,8 +15,9 @@ test('should show regulations and information obligation links', async () => {
i18n.loaded = Promise.resolve();
const srPanel = mock<SRPanel>();
srPanel.props.moveFocus = false;
const resources = global.resources;
const onlineBankingPL = new OnlineBankingPL({ issuers: [{ name: 'Issuer 1', id: '1' }], i18n, modules: { srPanel } });
const onlineBankingPL = new OnlineBankingPL({ issuers: [{ name: 'Issuer 1', id: '1' }], i18n, modules: { srPanel, resources } });
render(onlineBankingPL.render());
const regulationLink = await screen.findByRole('link', { name: 'regulations' });

2
packages/lib/src/components/Oxxo/components/OxxoVoucherResult/OxxoVoucherResult.tsx
View File

@@ -46,7 +46,7 @@ const OxxoVoucherResult = (props: OxxoVoucherResultProps) => {
barcode={barcodeUrl}
copyBtn
downloadUrl={downloadUrl}
imageUrl={getImage({})(paymentMethodType)}
imageUrl={getImage()(paymentMethodType)}
introduction={i18n.get('voucher.introduction')}
paymentMethodType={'oxxo'}
reference={reference}

2
packages/lib/src/components/Redirect/Redirect.tsx
View File

@@ -42,7 +42,7 @@ class RedirectElement extends UIElement {
}
get icon() {
return this.resources.getImage({ loadingContext: this.props.loadingContext })(this.props.type);
return this.resources.getImage()(this.props.type);
}
render() {

2
packages/lib/src/components/SecuredFields/SecuredFields.tsx
View File

@@ -86,7 +86,7 @@ export class SecuredFieldsElement extends UIElement {
}
get icon() {
return this.resources.getImage({ loadingContext: this.props.loadingContext })(this.props.type);
return this.resources.getImage()(this.props.type);
}
get browserInfo() {

2
packages/lib/src/components/UIElement.tsx
View File

@@ -239,7 +239,7 @@ export class UIElement<P extends UIElementProps = any> extends BaseElement<P> im
* Get the element icon URL for the current environment
*/
get icon(): string {
return this.props.icon ?? this.resources.getImage({ loadingContext: this.props.loadingContext })(this.constructor['type']);
return this.props.icon ?? this.resources.getImage()(this.constructor['type']);
}
/**

6
packages/lib/src/components/helpers/IssuerListContainer.tsx
View File

@@ -33,8 +33,10 @@ class IssuerListContainer extends UIElement<IssuerListContainerProps> {
constructor(props: IssuerListContainerProps) {
super(props);
const getImage = props => this.resources.getImage(props);
if (this.props.showImage) {
const getIssuerIcon = getIssuerImageUrl({ loadingContext: this.props.loadingContext }, this.constructor['type']);
const getIssuerIcon = getIssuerImageUrl({ loadingContext: this.props.loadingContext }, this.constructor['type'], getImage);
this.props.issuers = this.props.issuers.map(item => ({
...item,
@@ -112,6 +114,8 @@ class IssuerListContainer extends UIElement<IssuerListContainerProps> {
highlightedIds={this.props.highlightedIssuers}
{...this.props}
{...this.state}
showImage={this.props.showImage}
type={this.constructor['type']}
onChange={this.setState}
onSubmit={this.submit}
payButton={this.payButton}

2
packages/lib/src/components/internal/Await/Await.tsx
View File

@@ -149,7 +149,7 @@ function Await(props: AwaitComponentProps) {
<div className="adyen-checkout__await adyen-checkout__await--result">
<img
className="adyen-checkout__await__icon adyen-checkout__await__icon--result"
src={getImage({ loadingContext, imageFolder: 'components/' })(image)}
src={getImage({ imageFolder: 'components/' })(image)}
alt={i18n.get(message)}
/>
<div className="adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result">{i18n.get(message)}</div>

4
packages/lib/src/components/internal/ClickToPay/components/CtPBrand/CtPBrand.tsx
View File

@@ -14,7 +14,7 @@ const CtPBrand = ({ classNameModifiers = [] }: CtPBrandProps) => {
const getImage = useImage();
const { schemes } = useClickToPayContext();
const ctpImageUrl = getImage({})('ctp');
const ctpImageUrl = getImage()('ctp');
const pipeImageUrl = getImage({ imageFolder: 'components/' })('pipe');
return (
@@ -31,7 +31,7 @@ const CtPBrand = ({ classNameModifiers = [] }: CtPBrandProps) => {
<Img
key={brand}
className={classnames('adyen_checkout-ctp__brand-scheme', `adyen_checkout-ctp__brand-scheme-${brand}`)}
src={getImage({})(brand)}
src={getImage()(brand)}
alt={`Logo of ${SchemeNames[brand]}`}
/>
))}

9
packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.tsx
View File

@@ -39,7 +39,7 @@ function getPayButtonLabel(i18n: Language, amount: PaymentAmount, checkoutCard?:
}
const CtPCards = ({ onDisplayCardComponent }: CtPCardsProps) => {
const { loadingContext, i18n } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const { amount, cards, checkout, isCtpPrimaryPaymentMethod, status, onSubmit, onSetStatus, onError } = useClickToPayContext();
const [checkoutCard, setCheckoutCard] = useState<ShopperCard | undefined>(cards.find(card => !card.isExpired) || cards[0]);
@@ -112,12 +112,7 @@ const CtPCards = ({ onDisplayCardComponent }: CtPCardsProps) => {
label={getPayButtonLabel(i18n, amount, checkoutCard)}
status={status}
variant={isCtpPrimaryPaymentMethod ? 'primary' : 'secondary'}
icon={
cards.length !== 0 &&
getImage({ loadingContext: loadingContext, imageFolder: 'components/' })(
isCtpPrimaryPaymentMethod ? 'lock' : 'lock_black'
)
}
icon={cards.length !== 0 && getImage({ imageFolder: 'components/' })(isCtpPrimaryPaymentMethod ? 'lock' : 'lock_black')}
onClick={doCheckout}
/>
</Fragment>

4
packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx
View File

@@ -24,7 +24,7 @@ type CardsSelectorDataState = {
const schema = ['srcDigitalCardId'];
const CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: CtPCardsListProps) => {
const { i18n, loadingContext } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
const { status } = useClickToPayContext();
const { handleChangeFor, data } = useForm<CardsSelectorDataState>({
@@ -34,7 +34,7 @@ const CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: CtPCa
const items = useMemo(() => {
return cards.map(card => ({
icon: card.artUri || getImage({ loadingContext })(card.scheme),
icon: card.artUri || getImage()(card.scheme),
name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,
secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),
id: card.srcDigitalCardId,

2
packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.tsx
View File

@@ -14,7 +14,7 @@ type CtPSingleCardProps = {
const CtPSingleCard = ({ card, errorMessage }: CtPSingleCardProps) => {
const { i18n } = useCoreContext();
const getImage = useImage();
const cardImage = card.artUri || getImage({})(card.scheme);
const cardImage = card.artUri || getImage()(card.scheme);
return (
<Fragment>

4
packages/lib/src/components/internal/QRLoader/QRLoader.tsx
View File

@@ -152,7 +152,7 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
<div className="adyen-checkout__qr-loader adyen-checkout__qr-loader--result">
<img
className="adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result"
src={getImage({ loadingContext, imageFolder: 'components/' })(image)}
src={getImage({ imageFolder: 'components/' })(image)}
alt={status}
/>
<div className="adyen-checkout__qr-loader__subtitle adyen-checkout__qr-loader__subtitle--result">{status}</div>
@@ -229,7 +229,7 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
copyToClipboard(this.props.qrCodeData);
complete();
}}
icon={getImage({ loadingContext, imageFolder: 'components/' })('copy')}
icon={getImage({ imageFolder: 'components/' })('copy')}
label={i18n.get('button.copy')}
/>
</div>

6
packages/lib/src/components/internal/Voucher/Voucher.tsx
View File

@@ -9,7 +9,7 @@ import { VoucherProps } from './types';
import useImage from '../../../core/Context/useImage';
export default function Voucher({ voucherDetails = [], className = '', ...props }: VoucherProps) {
const { i18n, loadingContext } = useCoreContext();
const { i18n } = useCoreContext();
const getImage = useImage();
return (
@@ -90,7 +90,7 @@ export default function Voucher({ voucherDetails = [], className = '', ...props
copyToClipboard(props.reference);
complete();
}}
icon={getImage({ loadingContext, imageFolder: 'components/' })('copy')}
icon={getImage({ imageFolder: 'components/' })('copy')}
label={i18n.get('button.copy')}
/>
</li>
@@ -102,7 +102,7 @@ export default function Voucher({ voucherDetails = [], className = '', ...props
inline
variant="action"
href={props.downloadUrl}
icon={getImage({ loadingContext, imageFolder: 'components/' })('download')}
icon={getImage({ imageFolder: 'components/' })('download')}
label={props.downloadButtonText || i18n.get('button.download')}
target="_blank"
rel="noopener noreferrer"

44
packages/lib/src/core/Context/Resources.ts
View File

@@ -1,6 +1,19 @@
import getImage, { ImageOptions } from '../../utils/get-image';
import { FALLBACK_CDN_CONTEXT } from '../Environment/Environment';
export interface ImageOptions {
extension?: string;
imageFolder?: string;
resourceContext?: string;
name?: string;
parentFolder?: string;
size?: string;
subFolder?: string;
svgOptions?: string;
type?: string;
}
export type GetImageFnType = (name) => string;
export class Resources {
private readonly resourceContext: string;
@@ -8,7 +21,32 @@ export class Resources {
this.resourceContext = cdnContext;
}
getImage(props: ImageOptions) {
return getImage({ ...props, loadingContext: this.resourceContext });
private returnImage = ({
name,
resourceContext,
imageFolder = '',
parentFolder = '',
extension,
size = '',
subFolder = ''
}: ImageOptions): string => `${resourceContext}images/${imageFolder}${subFolder}${parentFolder}${name}${size}.${extension}`;
private getImageUrl =
({ resourceContext = FALLBACK_CDN_CONTEXT, extension = 'svg', ...options }: ImageOptions): GetImageFnType =>
(name: string): string => {
const imageOptions: ImageOptions = {
extension,
resourceContext,
imageFolder: 'logos/',
parentFolder: '',
name,
...options
};
return this.returnImage(imageOptions);
};
public getImage(props = {} as ImageOptions) {
return this.getImageUrl({ ...props, resourceContext: this.resourceContext });
}
}

7
packages/lib/src/core/Context/useImage.ts
View File

@@ -1,10 +1,11 @@
import useCoreContext from './useCoreContext';
import { useCallback } from 'preact/hooks';
import { ImageOptions } from '../../utils/get-image';
import { GetImageFnType, ImageOptions } from './Resources';
function useImage() {
export type UseImageHookType = (props: ImageOptions) => GetImageFnType;
function useImage(): (props?: ImageOptions) => GetImageFnType {
const { resources } = useCoreContext();
return useCallback((props: ImageOptions) => resources?.getImage(props), []);
return useCallback((props?: ImageOptions) => resources?.getImage(props), []);
}
export default useImage;

4
packages/lib/src/utils/get-image.test.ts
View File

@@ -1,10 +1,12 @@
import { getImageUrl } from './get-image';
import { Resources } from '../core/Context/Resources';
describe('Ideal utils', () => {
describe('getImageUrl', () => {
const issuer = 123;
const loadingContext = 'http://adyen.com/';
const type = 'ideal';
const resources = new Resources(loadingContext);
const getImageUrl = props => resources.getImage(props);
test('Gets a full url with a parentContext', () => {
const options = {

33
packages/lib/src/utils/get-image.ts
View File

@@ -1,33 +0,0 @@
import { FALLBACK_CONTEXT } from '../core/config';
export interface ImageOptions {
extension?: string;
imageFolder?: string;
loadingContext?: string;
name?: string;
parentFolder?: string;
size?: string;
subFolder?: string;
svgOptions?: string;
type?: string;
}
const returnImage = ({ name, loadingContext, imageFolder = '', parentFolder = '', extension, size = '', subFolder = '' }: ImageOptions): string =>
`${loadingContext}images/${imageFolder}${subFolder}${parentFolder}${name}${size}.${extension}`;
export const getImageUrl =
({ loadingContext = FALLBACK_CONTEXT, extension = 'svg', ...options }: ImageOptions): Function =>
(name: string): string => {
const imageOptions: ImageOptions = {
extension,
loadingContext,
imageFolder: 'logos/',
parentFolder: '',
name,
...options
};
return returnImage(imageOptions);
};
export default getImageUrl;

9
packages/lib/src/utils/get-issuer-image.test.ts
View File

@@ -1,4 +1,5 @@
import getIssuerImage from './get-issuer-image';
import { Resources } from '../core/Context/Resources';
describe('Get issuer image', () => {
describe('getIssuerImage', () => {
@@ -7,13 +8,15 @@ describe('Get issuer image', () => {
const loadingContext = 'http://adyen.com/';
const options = { loadingContext };
const getImage = props => new Resources(loadingContext).getImage(props);
test('Prepares options when there is an issuer ID', () => {
expect(getIssuerImage(options, 'ideal')(issuer)).toBe('http://adyen.com/images/logos/ideal/123.svg');
expect(getIssuerImage(options, 'test')(issuer)).toBe('http://adyen.com/images/logos/test/123.svg');
expect(getIssuerImage(options, 'ideal', getImage)(issuer)).toBe('http://adyen.com/images/logos/ideal/123.svg');
expect(getIssuerImage(options, 'test', getImage)(issuer)).toBe('http://adyen.com/images/logos/test/123.svg');
});
test('Prepares options when there is no issuer ID', () => {
expect(getIssuerImage(options, type)('')).toBe(null);
expect(getIssuerImage(options, type, getImage)('')).toBe(null);
});
});
});

7
packages/lib/src/utils/get-issuer-image.ts
View File

@@ -1,7 +1,8 @@
import { getImageUrl, ImageOptions } from './get-image';
import { ImageOptions } from '../core/Context/Resources';
import { UseImageHookType } from '../core/Context/useImage';
const getIssuerImageUrl =
(options: object, type: string) =>
(options: object, type: string, getImage: UseImageHookType) =>
(issuer: string): string => {
if (!issuer) return null;
@@ -11,7 +12,7 @@ const getIssuerImageUrl =
...options
};
return getImageUrl(imageOptions)(issuer);
return getImage(imageOptions)(issuer);
};
export default getIssuerImageUrl;