feat: add support for validateOnChange (#136)

Basis-Theory · Feb 3, 2023 · c02e1f8 · c02e1f8
1 parent 47acc39
commit c02e1f8
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@basis-theory/basis-theory-js": "^1.63.0"
+    "@basis-theory/basis-theory-js": "^1.65.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",

diff --git a/src/elements/CardElement.tsx b/src/elements/CardElement.tsx
@@ -23,6 +23,7 @@ interface CardElementProps {
   onBlur?: ElementEventListener<CardElementEvents, 'blur'>;
   onReady?: ElementEventListener<CardElementEvents, 'ready'>;
   onKeyDown?: ElementEventListener<CardElementEvents, 'keydown'>;
+  validateOnChange?: boolean;
 }
 
 const CardElementC: FC<
@@ -40,13 +41,15 @@ const CardElementC: FC<
   onBlur,
   onKeyDown,
   elementRef,
+  validateOnChange,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<ICardElement, CreateCardElementOptions>(
     id,
     'card',
     wrapperRef,
     {
+      validateOnChange,
       style,
       disabled,
       autoComplete,

diff --git a/src/elements/CardExpirationDateElement.tsx b/src/elements/CardExpirationDateElement.tsx
@@ -25,6 +25,7 @@ interface CardExpirationDateElementProps {
   onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
   onReady?: ElementEventListener<CardExpirationDateElementEvents, 'ready'>;
   onKeyDown?: ElementEventListener<CardExpirationDateElementEvents, 'keydown'>;
+  validateOnChange?: boolean;
 }
 
 const CardExpirationDateElementC: FC<
@@ -46,6 +47,7 @@ const CardExpirationDateElementC: FC<
   onBlur,
   onKeyDown,
   elementRef,
+  validateOnChange,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
@@ -63,6 +65,7 @@ const CardExpirationDateElementC: FC<
       'aria-label': ariaLabel,
       placeholder,
       value,
+      validateOnChange,
     },
     bt,
     elementRef

diff --git a/src/elements/CardNumberElement.tsx b/src/elements/CardNumberElement.tsx
@@ -26,6 +26,7 @@ interface CardNumberElementProps {
   onBlur?: ElementEventListener<CardNumberElementEvents, 'blur'>;
   onReady?: ElementEventListener<CardNumberElementEvents, 'ready'>;
   onKeyDown?: ElementEventListener<CardNumberElementEvents, 'keydown'>;
+  validateOnChange?: boolean;
 }
 
 const CardNumberElementC: FC<
@@ -46,6 +47,7 @@ const CardNumberElementC: FC<
   onBlur,
   onKeyDown,
   elementRef,
+  validateOnChange,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
@@ -64,6 +66,7 @@ const CardNumberElementC: FC<
       placeholder,
       iconPosition,
       value,
+      validateOnChange,
     },
     bt,
     elementRef

diff --git a/src/elements/CardVerificationCodeElement.tsx b/src/elements/CardVerificationCodeElement.tsx
@@ -29,6 +29,7 @@ interface CardVerificationCodeElementProps {
     CardVerificationCodeElementEvents,
     'keydown'
   >;
+  validateOnChange?: boolean;
 }
 
 const CardVerificationCodeElementC: FC<
@@ -51,6 +52,7 @@ const CardVerificationCodeElementC: FC<
   onBlur,
   onKeyDown,
   elementRef,
+  validateOnChange,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
@@ -69,6 +71,7 @@ const CardVerificationCodeElementC: FC<
       placeholder,
       cardBrand,
       value,
+      validateOnChange,
     },
     bt,
     elementRef

diff --git a/test/elements/CardElement.test.tsx b/test/elements/CardElement.test.tsx
@@ -23,6 +23,7 @@ describe('CardElement', () => {
   let disabled: boolean;
   let autoComplete: 'on' | 'off';
   let value: CardElementValue<'static'>;
+  let validateOnChange: boolean;
   let onReady: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
@@ -54,6 +55,7 @@ describe('CardElement', () => {
         numeric: true,
       }),
     };
+    validateOnChange = chance.bool();
     onReady = jest.fn();
     onChange = jest.fn();
     onFocus = jest.fn();
@@ -80,6 +82,7 @@ describe('CardElement', () => {
         onReady={onReady}
         ref={ref}
         style={style}
+        validateOnChange={validateOnChange}
         value={value}
       />
     );
@@ -94,6 +97,7 @@ describe('CardElement', () => {
         disabled,
         autoComplete,
         value,
+        validateOnChange,
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null

diff --git a/test/elements/CardExpirationDateElement.test.tsx b/test/elements/CardExpirationDateElement.test.tsx
@@ -25,6 +25,7 @@ describe('CardExpirationDateElement', () => {
   let ariaLabel: string;
   let placeholder: string;
   let value: CardExpirationDateValue<'static'>;
+  let validateOnChange: boolean;
   let onReady: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
@@ -51,6 +52,7 @@ describe('CardExpirationDateElement', () => {
       }),
       year: new Date().getFullYear() + 1,
     };
+    validateOnChange = chance.bool();
     onReady = jest.fn();
     onChange = jest.fn();
     onFocus = jest.fn();
@@ -79,6 +81,7 @@ describe('CardExpirationDateElement', () => {
         placeholder={placeholder}
         ref={ref}
         style={style}
+        validateOnChange={validateOnChange}
         value={value}
       />
     );
@@ -95,6 +98,7 @@ describe('CardExpirationDateElement', () => {
         autoComplete,
         'aria-label': ariaLabel,
         placeholder,
+        validateOnChange,
         value,
       },
       undefined,

diff --git a/test/elements/CardNumberElement.test.tsx b/test/elements/CardNumberElement.test.tsx
@@ -26,6 +26,7 @@ describe('CardNumberElement', () => {
   let placeholder: string;
   let iconPosition: CreateCardNumberElementOptions['iconPosition'];
   let value: string;
+  let validateOnChange: boolean;
   let onReady: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
@@ -47,7 +48,7 @@ describe('CardNumberElement', () => {
     placeholder = chance.string();
     iconPosition = chance.pickone(['left', 'right', 'none', undefined]);
     value = chance.cc({ type: 'mc' });
-
+    validateOnChange = chance.bool();
     onReady = jest.fn();
     onChange = jest.fn();
     onFocus = jest.fn();
@@ -77,6 +78,7 @@ describe('CardNumberElement', () => {
         placeholder={placeholder}
         ref={ref}
         style={style}
+        validateOnChange={validateOnChange}
         value={value}
       />
     );
@@ -95,6 +97,7 @@ describe('CardNumberElement', () => {
         placeholder,
         iconPosition,
         value,
+        validateOnChange,
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null

diff --git a/test/elements/CardVerificationCodeElement.test.tsx b/test/elements/CardVerificationCodeElement.test.tsx
@@ -27,6 +27,7 @@ describe('CardVerificationCodeElement', () => {
   let placeholder: string;
   let cardBrand: Brand | string;
   let value: string;
+  let validateOnChange: boolean;
   let onReady: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
@@ -47,7 +48,7 @@ describe('CardVerificationCodeElement', () => {
     ariaLabel = chance.string();
     placeholder = chance.string();
     value = chance.string();
-
+    validateOnChange = chance.bool();
     cardBrand = chance.pickone<Brand>([...CARD_BRANDS]);
     onReady = jest.fn();
     onChange = jest.fn();
@@ -78,6 +79,7 @@ describe('CardVerificationCodeElement', () => {
         placeholder={placeholder}
         ref={ref}
         style={style}
+        validateOnChange={validateOnChange}
         value={value}
       />
     );
@@ -96,6 +98,7 @@ describe('CardVerificationCodeElement', () => {
         placeholder,
         cardBrand,
         value,
+        validateOnChange,
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null

diff --git a/yarn.lock b/yarn.lock
@@ -1465,10 +1465,10 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@basis-theory/basis-theory-js@^1.63.0":
-  version "1.63.0"
-  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-1.63.0.tgz#b2873c48e49e28a13494ec40a5e3a84aa088e079"
-  integrity sha512-Bpmj3NQ2pThHo3g5JxNmKei/MmQc2XzLU7fSZQsEDMAo5rQozNMMA2Q21hYCmZCl7BXwN1YvW+nWcjAd+vjDAQ==
+"@basis-theory/basis-theory-js@^1.65.1":
+  version "1.65.1"
+  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-1.65.1.tgz#686cb4e8822281c186cb7ed210c64c6595371a30"
+  integrity sha512-K5F0s5JhGgXZTHjl9U5+Q+nY9EHwYHh3VVeI1kSuTHoCahsdvh7CEXraww53I34wXRo5kKOP3dsq2eZeKZp+CA==
   dependencies:
     axios "^0.21.2"
     camelcase-keys "^6.2.2"