refactor: change payment token type from tuple to object

src/Components/SavedCardItem.res

@@ -80,7 +80,13 @@ let make = (
         boxShadow: "none",
         opacity: {isCardExpired ? "0.7" : "1"},
       }
-      onClick={_ => setPaymentToken(_ => (paymentItem.paymentToken, paymentItem.customerId))}>
+      onClick={_ => {
+        open RecoilAtomTypes
+        setPaymentToken(_ => {
+          paymentToken: paymentItem.paymentToken,
+          customerId: paymentItem.customerId,
+        })
+      }}>
       <div className="w-full">
         <div>
           <div className="flex flex-row justify-between items-center">

src/Components/SavedMethods.res

@@ -1,6 +1,6 @@
 @react.component
 let make = (
-  ~paymentToken,
+  ~paymentToken: RecoilAtomTypes.paymentToken,
   ~setPaymentToken,
   ~savedMethods: array<PaymentType.customerMethods>,
   ~loadSavedCards: PaymentType.savedCardsLoadState,
@@ -24,10 +24,11 @@ let make = (
   let isGuestCustomer = useIsGuestCustomer()
 
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
-  let (token, _) = paymentToken
   let savedCardlength = savedMethods->Array.length
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
+  let {paymentToken: paymentTokenVal, customerId} = paymentToken
+
   let getWalletBrandIcon = (obj: PaymentType.customerMethods) => {
     switch obj.paymentMethodType {
     | Some("apple_pay") => <Icon size=brandIconSize name="apple_pay_saved" />
@@ -57,7 +58,7 @@ let make = (
           ""->CardThemeType.getPaymentMode,
         )
       }
-      let isActive = token == obj.paymentToken
+      let isActive = paymentTokenVal == obj.paymentToken
       <SavedCardItem
         key={i->Belt.Int.toString}
         setPaymentToken
@@ -76,15 +77,14 @@ let make = (
 
   let (isCVCValid, _, cvcNumber, _, _, _, _, _, _, setCvcError) = cvcProps
   let complete = switch isCVCValid {
-  | Some(val) => token !== "" && val
+  | Some(val) => paymentTokenVal !== "" && val
   | _ => false
   }
   let empty = cvcNumber == ""
-  let (token, customerId) = paymentToken
   let customerMethod =
     savedMethods
     ->Array.filter(savedMethod => {
-      savedMethod.paymentToken === token
+      savedMethod.paymentToken === paymentTokenVal
     })
     ->Array.get(0)
     ->Option.getOr(PaymentType.defaultCustomerMethods)
@@ -108,7 +108,7 @@ let make = (
     let savedPaymentMethodBody = switch customerMethod.paymentMethod {
     | "card" =>
       PaymentBody.savedCardBody(
-        ~paymentToken=token,
+        ~paymentToken=paymentTokenVal,
         ~customerId,
         ~cvcNumber,
         ~requiresCvv=customerMethod.requiresCvv,
@@ -121,7 +121,7 @@ let make = (
         | Some(paymentMethodType) => paymentMethodType->JSON.Encode.string
         }
         PaymentBody.savedPaymentMethodBody(
-          ~paymentToken=token,
+          ~paymentToken=paymentTokenVal,
           ~customerId,
           ~paymentMethod=customerMethod.paymentMethod,
           ~paymentMethodType,

src/Payment.res

@@ -16,7 +16,6 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let showFields = Recoil.useRecoilValueFromAtom(showCardFieldsAtom)
   let selectedOption = Recoil.useRecoilValueFromAtom(selectedOptionAtom)
   let paymentToken = Recoil.useRecoilValueFromAtom(paymentTokenAtom)
-  let (token, _) = paymentToken
 
   let {iframeId} = keys
 
@@ -214,7 +213,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     setCardError(_ => "")
     setExpiryError(_ => "")
     None
-  }, (token, showFields))
+  }, (paymentToken.paymentToken, showFields))
 
   let submitValue = (_ev, confirmParam) => {
     let validFormat = switch paymentMode->getPaymentMode {

src/PaymentElement.res

@@ -93,7 +93,11 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     }
 
     switch tokenObj {
-    | Some(obj) => setPaymentToken(_ => (obj.paymentToken, obj.customerId))
+    | Some(obj) =>
+      setPaymentToken(_ => {
+        paymentToken: obj.paymentToken,
+        customerId: obj.customerId,
+      })
     | None => ()
     }
     None

src/Types/RecoilAtomTypes.res

@@ -4,3 +4,10 @@ type field = {
   errorString: string,
   countryCode?: string,
 }
+
+type load = Loading | Loaded(JSON.t) | LoadError
+
+type paymentToken = {
+  paymentToken: string,
+  customerId: string,
+}

src/Utilities/RecoilAtoms.res

@@ -1,4 +1,4 @@
-type load = Loading | Loaded(JSON.t) | LoadError
+open RecoilAtomTypes
 
 let keys = Recoil.atom("keys", CommonHooks.defaultkeys)
 let configAtom = Recoil.atom("defaultRecoilConfig", CardTheme.defaultRecoilConfig)
@@ -12,14 +12,18 @@ let sessionId = Recoil.atom("sessionId", "")
 let isConfirmBlocked = Recoil.atom("isConfirmBlocked", false)
 let switchToCustomPod = Recoil.atom("switchToCustomPod", false)
 let selectedOptionAtom = Recoil.atom("selectedOption", "")
-let paymentTokenAtom = Recoil.atom("paymentToken", ("", ""))
+let paymentTokenAtom = Recoil.atom(
+  "paymentToken",
+  {
+    paymentToken: "",
+    customerId: "",
+  },
+)
 let showCardFieldsAtom = Recoil.atom("showCardFields", false)
 let phoneJson = Recoil.atom("phoneJson", Loading)
 let cardBrand = Recoil.atom("cardBrand", "")
 let payNowButtonDisable = Recoil.atom("payNowButtonDisable", true)
 
-open RecoilAtomTypes
-
 let defaultFieldValues = {
   value: "",
   isValid: None,