fix: react hook errors

src/Components/AddressPaymentInput.res

@@ -202,7 +202,7 @@ let make = (~paymentType, ~className="") => {
       }
     }
   }, (line1, line2, country, state, city, postalCode))
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   let hasDefaulltValues =
     line2.value !== "" || city.value !== "" || postalCode.value !== "" || state.value !== ""

src/Components/BillingNamePaymentInput.res

@@ -60,7 +60,7 @@ let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequ
       }
     }
   }, [billingName])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <RenderIf condition={showDetails.name == Auto}>
     <PaymentField

src/Components/BlikCodePaymentInput.res

@@ -52,7 +52,7 @@ let make = () => {
       }
     }
   }, [blikCode])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <RenderIf condition={true}>
     <PaymentField

src/Components/DynamicFields.res

@@ -238,7 +238,7 @@ let make = (
   )
 
   let submitCallback = DynamicFieldsUtils.useSubmitCallback()
-  Utils.submitPaymentData(submitCallback)
+  Utils.useSubmitPaymentData(submitCallback)
 
   let bottomElement = <InfoElement />
 

src/Components/EmailPaymentInput.res

@@ -54,7 +54,7 @@ let make = (~paymentType) => {
       }
     }
   }, [email])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <RenderIf condition={showDetails.email == Auto}>
     <PaymentField

src/Components/FullNamePaymentInput.res

@@ -58,7 +58,7 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
       }
     }
   }, [fullName])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <RenderIf condition={showDetails.name == Auto}>
     <PaymentField

src/Components/SavedMethods.res

@@ -135,7 +135,7 @@ let make = (
       }
     }
   }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete))
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <>
     <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">

src/Components/Surcharge.res

@@ -19,12 +19,15 @@ let make = (
 
   let paymentMethodTypes = paymentMethodType->getPaymentMethodTypes
 
+  let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(~list)
+  let getSurchargeUtilsMessage = SurchargeUtils.useMessageGetter()
+
   let getSurchargeMessage = () => {
     if isForWallets {
-      SurchargeUtils.getOneClickWalletsMessage(~list)
+      getOneClickWalletsMessage()
     } else {
       switch paymentMethodTypes.surcharge_details {
-      | Some(surchargeDetails) => SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list)
+      | Some(surchargeDetails) => getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list)
       | None =>
         if paymentMethod === "card" {
           let creditPaymentMethodTypes = getPaymentMethodTypes("credit")
@@ -44,13 +47,21 @@ let make = (
             let debitCardSurcharge = debitSurchargeDetails.displayTotalSurchargeAmount
 
             if creditCardSurcharge >= debitCardSurcharge {
-              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={creditSurchargeDetails}, ~list)
+              getSurchargeUtilsMessage(
+                ~paymentMethod,
+                ~surchargeDetails={creditSurchargeDetails},
+                ~list,
+              )
             } else {
-              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={debitSurchargeDetails}, ~list)
+              getSurchargeUtilsMessage(
+                ~paymentMethod,
+                ~surchargeDetails={debitSurchargeDetails},
+                ~list,
+              )
             }
           | (None, Some(surchargeDetails))
           | (Some(surchargeDetails), None) =>
-            SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list)
+            getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list)
           | (None, None) => None
           }
         } else {

src/Components/SurchargeUtils.res

@@ -13,101 +13,107 @@ type walletSurchargeDetails = {
   surchargeDetails: PaymentMethodsRecord.surchargeDetails,
 }
 
-let getSurchargeDetailsForOneClickWallets = (~list) => {
+let useSurchargeDetailsForOneClickWallets = (~list) => {
   let areOneClickWalletsRendered = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.areOneClickWalletsRendered,
   )
 
-  oneClickWallets->Js.Array2.reduce((acc, wallet) => {
-    let isWalletBtnRendered = switch wallet.paymentMethodType {
-    | "apple_pay" => areOneClickWalletsRendered.isApplePay
-    | "paypal" => areOneClickWalletsRendered.isPaypal
-    | "google_pay" => areOneClickWalletsRendered.isGooglePay
-    | _ => false
-    }
-    if isWalletBtnRendered {
-      let paymentMethodType =
-        PaymentMethodsRecord.getPaymentMethodTypeFromList(
-          ~list,
-          ~paymentMethod="wallet",
-          ~paymentMethodType=wallet.paymentMethodType,
-        )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
-      switch paymentMethodType.surcharge_details {
-      | Some(surchargDetails) =>
-        acc->Js.Array2.concat([
-          {
-            name: wallet.displayName,
-            surchargeDetails: surchargDetails,
-          },
-        ])
-      | None => acc
+  React.useMemo2(() => {
+    oneClickWallets->Js.Array2.reduce((acc, wallet) => {
+      let isWalletBtnRendered = switch wallet.paymentMethodType {
+      | "apple_pay" => areOneClickWalletsRendered.isApplePay
+      | "paypal" => areOneClickWalletsRendered.isPaypal
+      | "google_pay" => areOneClickWalletsRendered.isGooglePay
+      | _ => false
       }
-    } else {
-      acc
-    }
-  }, [])
+      if isWalletBtnRendered {
+        let paymentMethodType =
+          PaymentMethodsRecord.getPaymentMethodTypeFromList(
+            ~list,
+            ~paymentMethod="wallet",
+            ~paymentMethodType=wallet.paymentMethodType,
+          )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
+        switch paymentMethodType.surcharge_details {
+        | Some(surchargDetails) =>
+          acc->Js.Array2.concat([
+            {
+              name: wallet.displayName,
+              surchargeDetails: surchargDetails,
+            },
+          ])
+        | None => acc
+        }
+      } else {
+        acc
+      }
+    }, [])
+  }, (areOneClickWalletsRendered, list))
 }
 
-let getMessage = (
-  ~surchargeDetails: PaymentMethodsRecord.surchargeDetails,
-  ~paymentMethod,
-  ~list: PaymentMethodsRecord.list,
-) => {
+let useMessageGetter = () => {
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString
 
-  let getLocaleStrForSurcharge = (cardLocale, altPaymentLocale) => {
-    paymentMethod === "card"
-      ? cardLocale(list.currency, surchargeValue)
-      : altPaymentLocale(list.currency, surchargeValue)
+  let getMessage = (
+    ~surchargeDetails: PaymentMethodsRecord.surchargeDetails,
+    ~paymentMethod,
+    ~list: PaymentMethodsRecord.list,
+  ) => {
+    let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString
+
+    let localeStrForSurcharge = if paymentMethod === "card" {
+      localeString.surchargeMsgAmountForCard(list.currency, surchargeValue)
+    } else {
+      localeString.surchargeMsgAmount(list.currency, surchargeValue)
+    }
+
+    Some(localeStrForSurcharge)
   }
 
-  Some(
-    getLocaleStrForSurcharge(
-      localeString.surchargeMsgAmountForCard,
-      localeString.surchargeMsgAmount,
-    ),
-  )
+  getMessage
 }
 
-let getOneClickWalletsMessage = (~list) => {
+let useOneClickWalletsMessageGetter = (~list) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
 
-  let oneClickWalletsArr = getSurchargeDetailsForOneClickWallets(~list)
+  let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~list)
 
-  if oneClickWalletsArr->Js.Array2.length !== 0 {
-    let msg = oneClickWalletsArr->Js.Array2.reducei((acc, wallet, index) => {
-      let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString
-      let myMsg =
-        <>
-          <strong> {React.string(`${list.currency} ${amount}`)} </strong>
-          {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)}
-        </>
-      let msgToConcat = if index === 0 {
-        myMsg
-      } else if index === oneClickWalletsArr->Belt.Array.length - 1 {
+  let getOneClickWalletsMessage = () => {
+    if oneClickWalletsArr->Js.Array2.length !== 0 {
+      let msg = oneClickWalletsArr->Js.Array2.reducei((acc, wallet, index) => {
+        let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString
+        let myMsg =
+          <>
+            <strong> {React.string(`${list.currency} ${amount}`)} </strong>
+            {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)}
+          </>
+        let msgToConcat = if index === 0 {
+          myMsg
+        } else if index === oneClickWalletsArr->Belt.Array.length - 1 {
+          <>
+            {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)}
+            {myMsg}
+          </>
+        } else {
+          <>
+            {React.string(`,${Utils.nbsp}`)}
+            {myMsg}
+          </>
+        }
         <>
-          {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)}
-          {myMsg}
+          {acc}
+          {msgToConcat}
         </>
-      } else {
+      }, React.null)
+      let finalElement =
         <>
-          {React.string(`,${Utils.nbsp}`)}
-          {myMsg}
+          {React.string(`${localeString.surchargeMsgAmountForOneClickWallets}:${Utils.nbsp}`)}
+          {msg}
         </>
-      }
-      <>
-        {acc}
-        {msgToConcat}
-      </>
-    }, React.null)
-    let finalElement =
-      <>
-        {React.string(`${localeString.surchargeMsgAmountForOneClickWallets}:${Utils.nbsp}`)}
-        {msg}
-      </>
-    Some(finalElement)
-  } else {
-    None
+      Some(finalElement)
+    } else {
+      None
+    }
   }
+
+  getOneClickWalletsMessage
 }

src/PaymentElement.res

@@ -228,7 +228,7 @@ let make = (
       )
     }
   }, [selectedOption])
-  Utils.submitPaymentData(submitCallback)
+  Utils.useSubmitPaymentData(submitCallback)
   React.useEffect4(() => {
     setSelectedOption(.prev =>
       selectedOption !== ""

src/Payments/ACHBankDebit.res

@@ -87,7 +87,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
       }
     }
   }, (email, modalData, fullName))
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <div
     className="flex flex-col animate-slowShow"

src/Payments/ACHBankTransfer.res

@@ -41,7 +41,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
       }
     }
   }, [email])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <div
     className="flex flex-col animate-slowShow"

src/Payments/ApplePay.res

@@ -356,7 +356,7 @@ let make = (
       }
     }
   })
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   {
     isWallet

src/Payments/BacsBankDebit.res

@@ -99,7 +99,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
       }
     }
   })
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   let changeSortCode = ev => {
     let val = ReactEvent.Form.target(ev)["value"]

src/Payments/BacsBankTransfer.res

@@ -51,7 +51,7 @@ let default = (props: props) => {
       }
     }
   }, [email, fullName])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <div
     className="flex flex-col animate-slowShow"

src/Payments/BecsBankDebit.res

@@ -81,7 +81,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
       }
     }
   }, (email, fullName, modalData))
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <div
     className="flex flex-col animate-slowShow"

src/Payments/Boleto.res

@@ -76,7 +76,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
       }
     }
   }, [socialSecurityNumber])
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   let changeSocialSecurityNumber = ev => {
     let val = ReactEvent.Form.target(ev)["value"]

src/Payments/CardPayment.res

@@ -186,7 +186,7 @@ let make = (
     isCustomerAcceptanceRequired,
     nickname,
   ))
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   let paymentMethod = isBancontact ? "bank_redirect" : "card"
   let paymentMethodType = isBancontact ? "bancontact_card" : "debit"

src/Payments/GPay.res

@@ -271,7 +271,7 @@ let make = (
       }
     }
   })
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   {
     isWallet

src/Payments/KlarnaPayment.res

@@ -58,7 +58,7 @@ let make = (~paymentType, ~countryProps, ~list: PaymentMethodsRecord.list) => {
       }
     }
   }, (email, fullName, country))
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   <div
     className="flex flex-col animate-slowShow"

src/Payments/KlarnaSDK.res

@@ -64,7 +64,7 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
       )
     }
   })
-  submitPaymentData(submitCallback)
+  useSubmitPaymentData(submitCallback)
 
   React.useEffect1(() => {
     if status == "ready" {