diff --git a/.changeset/strong-boxes-suffer.md b/.changeset/strong-boxes-suffer.md new file mode 100644 index 000000000..8e91bdff2 --- /dev/null +++ b/.changeset/strong-boxes-suffer.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': patch +--- + +Add fix to reshow card icon if previously it had failed to load diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.scss b/packages/lib/src/components/Card/components/CardInput/CardInput.scss index 83704c194..0608b2cbf 100644 --- a/packages/lib/src/components/Card/components/CardInput/CardInput.scss +++ b/packages/lib/src/components/Card/components/CardInput/CardInput.scss @@ -120,6 +120,10 @@ display: none; } +.adyen-checkout__field--cardNumber .adyen-checkout-card-input__icon--hidden { + display: none; +} + .adyen-checkout__field--securityCode.adyen-checkout__field--error .adyen-checkout__card__cvc__hint, .adyen-checkout__field--securityCode.adyen-checkout__field--valid .adyen-checkout__card__cvc__hint { opacity: 0; diff --git a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx index 602d4844a..19b63bd39 100644 --- a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx +++ b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx @@ -2,21 +2,29 @@ import { h } from 'preact'; import { getCardImageUrl, getFullBrandName } from '../utils'; import { BrandIconProps } from './types'; import useImage from '../../../../../core/Context/useImage'; +import { useState } from 'preact/hooks'; +import classNames from 'classnames'; export default function BrandIcon({ brand, brandsConfiguration = {} }: BrandIconProps) { const getImage = useImage(); const imageName = brand === 'card' ? 'nocard' : brand; const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage); - const handleError = e => { - e.target.style.cssText = 'display: none'; + + const [hasLoaded, setHasLoaded] = useState(false); + + const handleError = () => { + setHasLoaded(false); }; - return ( - {getFullBrandName(brand)} - ); + const handleLoad = () => { + setHasLoaded(true); + }; + + const fieldClassnames = classNames({ + 'adyen-checkout-card-input__icon': true, + 'adyen-checkout__card__cardNumber__brandIcon': true, + 'adyen-checkout-card-input__icon--hidden': !hasLoaded + }); + + return {getFullBrandName(brand)}; }