From 66bbd409c854a157be30b4846d1f17203213be6c Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Thu, 14 Nov 2024 12:27:55 +0100
Subject: [PATCH] Use useState and avoid setting inline styles

---
 .../Card/components/CardInput/CardInput.scss  |  4 +++
 .../CardInput/components/BrandIcon.tsx        | 28 ++++++++++---------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.scss b/packages/lib/src/components/Card/components/CardInput/CardInput.scss
index 83704c1944..0608b2cbfa 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 6bea01763e..19b63bd394 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx
@@ -2,27 +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);
     };
 
-    const handleLoad = e => {
-        e.target.style.cssText = 'display: block';
+    const handleLoad = () => {
+        setHasLoaded(true);
     };
 
-    return (
-        <img
-            className="adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon"
-            onLoad={handleLoad}
-            onError={handleError}
-            alt={getFullBrandName(brand)}
-            src={imageUrl}
-        />
-    );
+    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} />;
 }