Add fix to reshow card icon if previously it failed to load (#2955)

* Add fix to reshow card icon if previously it failed to load

* Use useState and avoid setting inline styles

* Added changeset file

.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

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;

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 (
-        <img
-            className="adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon"
-            onError={handleError}
-            alt={getFullBrandName(brand)}
-            src={imageUrl}
-        />
-    );
+    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 <img className={fieldClassnames} onLoad={handleLoad} onError={handleError} alt={getFullBrandName(brand)} src={imageUrl} />;
 }