fix: mismatch target/recipient origin error

Basis-Theory · Mar 21, 2024 · d670f62 · d670f62
1 parent f8ca7d1
commit d670f62
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 36 deletions.
diff --git a/src/elements/CardExpirationDateElement.tsx b/src/elements/CardExpirationDateElement.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ForwardedRef, RefObject, useRef } from 'react';
+import React, { FC, ForwardedRef, MutableRefObject, useRef } from 'react';
 import type {
   CardExpirationDateElement as ICardExpirationDateElement,
   CreateCardExpirationDateElementOptions,
@@ -30,12 +30,12 @@ interface CardExpirationDateElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: CardExpirationDateValue<'static'> | string;
-  valueRef?: RefObject<ICardExpirationDateElement>;
+  valueRef?: MutableRefObject<ICardExpirationDateElement>;
 }
 
 const CardExpirationDateElementC: FC<
   CardExpirationDateElementProps & {
-    elementRef?: ForwardedRef<ICardExpirationDateElement>;
+    elementRef?: ForwardedRef<ICardExpirationDateElement | null>;
   }
 > = ({
   'aria-label': ariaLabel,
@@ -80,13 +80,10 @@ const CardExpirationDateElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

diff --git a/src/elements/CardNumberElement.tsx b/src/elements/CardNumberElement.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
+import React, { FC, useRef, ForwardedRef, MutableRefObject } from 'react';
 import type {
   CardNumberElement as ICardNumberElement,
   CreateCardNumberElementOptions,
@@ -34,7 +34,7 @@ interface CardNumberElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: string;
-  valueRef?: RefObject<ICardNumberElement>;
+  valueRef?: MutableRefObject<ICardNumberElement | null>;
 }
 
 const CardNumberElementC: FC<
@@ -66,7 +66,9 @@ const CardNumberElementC: FC<
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
     ICardNumberElement,
-    CreateCardNumberElementOptions
+    CreateCardNumberElementOptions & {
+      valueRef?: MutableRefObject<ICardNumberElement | null>;
+    }
   >(
     id,
     'cardNumber',
@@ -88,13 +90,10 @@ const CardNumberElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

diff --git a/src/elements/CardVerificationCodeElement.tsx b/src/elements/CardVerificationCodeElement.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
+import React, { FC, useRef, ForwardedRef, MutableRefObject } from 'react';
 import type {
   CardVerificationCodeElement as ICardVerificationCodeElement,
   CreateCardVerificationCodeElementOptions,
@@ -34,7 +34,7 @@ interface CardVerificationCodeElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: string;
-  valueRef?: RefObject<ICardVerificationCodeElement>;
+  valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
 }
 
 const CardVerificationCodeElementC: FC<
@@ -86,13 +86,10 @@ const CardVerificationCodeElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

diff --git a/src/elements/TextElement.tsx b/src/elements/TextElement.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
+import React, { FC, useRef, ForwardedRef, MutableRefObject } from 'react';
 import type {
   TextElement as ITextElement,
   CreateTextElementOptions,
@@ -29,7 +29,7 @@ interface BaseTextElementProps {
   transform?: RegExp | [RegExp, string?];
   validation?: RegExp;
   value?: string;
-  valueRef?: RefObject<ITextElement>;
+  valueRef?: MutableRefObject<ITextElement | null>;
 }
 
 interface MaskedTextElementProps extends BaseTextElementProps {
@@ -90,13 +90,10 @@ const TextElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

diff --git a/src/elements/useElement.ts b/src/elements/useElement.ts
@@ -1,11 +1,24 @@
-import React, { ForwardedRef, useEffect, useRef, useState } from 'react';
+import React, {
+  ForwardedRef,
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import type {
   BaseElement,
   ElementType,
 } from '@basis-theory/basis-theory-js/types/elements';
 import { BasisTheoryReact } from '../core';
 import { useBasisTheoryValue } from './useBasisTheoryValue';
 
+type ElementWithSetValueRef = BaseElement<any, any> & {
+  setValueRef: (element: BaseElement<any, any>) => void;
+};
+
+const elementHasSetValueRef = (val: unknown): val is ElementWithSetValueRef =>
+  Boolean((val as ElementWithSetValueRef).setValueRef);
+
 const shallowDifference = <
   A extends Record<string, unknown>,
   B extends Record<string, unknown>
@@ -51,7 +64,8 @@ const useElement = <
   wrapperRef: React.RefObject<HTMLDivElement>,
   options: Options,
   btFromProps?: BasisTheoryReact,
-  ref?: ForwardedRef<Element>
+  ref?: ForwardedRef<Element>,
+  targetValueRef?: MutableRefObject<Element | null>
 ): Element | undefined => {
   const bt = useBasisTheoryValue(btFromProps);
   const [lastOptions, setLastOptions] = useState<Options>();
@@ -75,11 +89,18 @@ const useElement = <
         ref.current = newElement;
       }
 
-      newElement.mount(`#${id}`).catch((mountError) => {
-        setLastOptions(() => {
-          throw mountError;
+      (async () => {
+        await newElement.mount(`#${id}`).catch((mountError) => {
+          setLastOptions(() => {
+            throw mountError;
+          });
         });
-      });
+
+        if (elementHasSetValueRef(newElement) && targetValueRef?.current) {
+          newElement.setValueRef(targetValueRef.current);
+        }
+      })();
+
       bt.indexElement(id, newElement);
       setLastOptions(options);
     }