Fixing linting errors

Adyen · Aug 22, 2024 · ff34bb6 · ff34bb6
1 parent 193a049
commit ff34bb6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/packages/lib/storybook/stories/CustomCardContainer.tsx b/packages/lib/storybook/stories/CustomCardContainer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 
 import { setUpUtils, createPayButton } from './cards/customCardHelpers/customCard.utils';
 
@@ -21,7 +21,7 @@ export const CustomCardContainer = ({ element, context }) => {
                 ref={container}
                 id="component-root"
                 className="component-wrapper secured-fields"
-                // @ts-ignore
+                // @ts-ignore just hiding for better UX experience
                 style={'display:none;'}
             >
                 <span className="pm-image">
@@ -36,26 +36,26 @@ export const CustomCardContainer = ({ element, context }) => {
                     <img className="pm-image-dual-1" width="40" alt="" />
                     <img className="pm-image-dual-2" width="40" alt="" />
                 </span>
-                <label className="pm-form-label">
+                <div className="pm-form-label">
                     <span className="pm-form-label__text">Card number:</span>
                     <span className="pm-input-field" data-cse="encryptedCardNumber" data-uid="adyen-checkout-encryptedCardNumber-1"></span>
                     <span className="pm-form-label__error-text">Please enter a valid credit card number</span>
-                </label>
-                <label className="pm-form-label pm-form-label--exp-month">
+                </div>
+                <div className="pm-form-label pm-form-label--exp-month">
                     <span className="pm-form-label__text">Expiry month:</span>
                     <span className="pm-input-field" data-cse="encryptedExpiryMonth" data-uid="adyen-checkout-encryptedExpiryMonth-2"></span>
                     <span className="pm-form-label__error-text">Date error text</span>
-                </label>
-                <label className="pm-form-label pm-form-label--exp-year">
+                </div>
+                <div className="pm-form-label pm-form-label--exp-year">
                     <span className="pm-form-label__text">Expiry year:</span>
                     <span className="pm-input-field" data-cse="encryptedExpiryYear" data-uid="adyen-checkout-encryptedExpiryYear-3"></span>
                     <span className="pm-form-label__error-text">Date error text</span>
-                </label>
-                <label className="pm-form-label pm-form-label--cvc">
+                </div>
+                <div className="pm-form-label pm-form-label--cvc">
                     <span className="pm-form-label__text">CVV/CVC:</span>
                     <span className="pm-input-field" data-cse="encryptedSecurityCode"></span>
                     <span className="pm-form-label__error-text">CVC Error text</span>
-                </label>
+                </div>
             </div>
             <div className="card-input__spinner__holder">
                 <div className="card-input__spinner card-input__spinner--active">

diff --git a/packages/lib/storybook/stories/cards/customCardHelpers/customCard.config.js b/packages/lib/storybook/stories/cards/customCardHelpers/customCard.config.js
@@ -194,7 +194,7 @@ export function onBrand(pCallbackObj) {
 }
 
 function dualBrandListener(e) {
-    customCard.dualBrandingChangeHandler(e);
+    window.customCard.dualBrandingChangeHandler(e);
 }
 
 function resetDualBranding(rootNode) {
@@ -257,6 +257,7 @@ export function onBinLookup(pCallbackObj) {
     resetDualBranding(pCallbackObj.rootNode);
 }
 
+// ts-ignore keep component param to demo the function signature
 export function onChange(state, component) {
     /**
      * If we're in a dual branding scenario & the number field becomes valid or is valid and become invalid