refactor: move constantStrings to outer object in recoilConfig

juspay · Jul 31, 2024 · 57a0dde · 57a0dde
1 parent fc0c6e0
commit 57a0dde
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 67 deletions.
diff --git a/src/CardTheme.res b/src/CardTheme.res
@@ -66,7 +66,7 @@ type recoilConfig = {
   config: configClass,
   themeObj: themeClass,
   localeString: LocaleStringTypes.localeStrings,
-  strings: LocaleStringTypes.strings,
+  constantString: LocaleStringTypes.constantStrings,
   showLoader: bool,
 }
 
@@ -105,36 +105,20 @@ let getLocaleObject = async string => {
   }
 }
 
-let getStringObject = async string => {
+let getConstantStringsObject = async () => {
   try {
-    let locales = await string->getLocaleObject
     let promiseConstantStrings = Js.import(ConstantStrings.constantStrings)
-    let stringsConfig: LocaleStringTypes.strings = {
-      locale: locales,
-      constant: await promiseConstantStrings,
-    }
-    stringsConfig
+    await promiseConstantStrings
   } catch {
-  | _ => {
-      let stringsConfig: LocaleStringTypes.strings = {
-        locale: EnglishLocale.localeStrings,
-        constant: ConstantStrings.constantStrings,
-      }
-      stringsConfig
-    }
+  | _ => ConstantStrings.constantStrings
   }
 }
 
-let defaultStringsConfig: LocaleStringTypes.strings = {
-  locale: EnglishLocale.localeStrings,
-  constant: ConstantStrings.constantStrings,
-}
-
 let defaultRecoilConfig: recoilConfig = {
   config: defaultConfig,
   themeObj: defaultConfig.appearance.variables,
   localeString: EnglishLocale.localeStrings,
-  strings: defaultStringsConfig,
+  constantString: ConstantStrings.constantStrings,
   showLoader: false,
 }
 

diff --git a/src/CollectWidget.res b/src/CollectWidget.res
@@ -11,8 +11,7 @@ let make = (
   ~handleSubmit,
   ~formLayout,
 ) => {
-  let {strings} = Recoil.useRecoilValueFromAtom(configAtom)
-  let {locale} = strings
+  let {constantString, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   // Component states
   let (selectedPaymentMethod, setSelectedPaymentMethod) = React.useState(_ =>
     defaultSelectedPaymentMethod
@@ -194,38 +193,38 @@ let make = (
 
   let renderContentHeader = () =>
     switch (savedPMD, selectedPaymentMethodType) {
-    | (Some(_), _) => React.string(locale.formHeaderReviewText)
+    | (Some(_), _) => React.string(localeString.formHeaderReviewText)
     | (None, Some(pmt)) =>
       switch pmt {
-      | Card(_) => React.string(locale.formHeaderEnterCardText)
+      | Card(_) => React.string(localeString.formHeaderEnterCardText)
       | BankTransfer(bankTransferType) =>
-        React.string(bankTransferType->String.make->locale.formHeaderBankText)
+        React.string(bankTransferType->String.make->localeString.formHeaderBankText)
       | Wallet(walletTransferType) =>
-        React.string(walletTransferType->String.make->locale.formHeaderWalletText)
+        React.string(walletTransferType->String.make->localeString.formHeaderWalletText)
       }
     | (None, None) =>
       switch selectedPaymentMethod {
-      | Some(Card) => React.string(locale.formHeaderEnterCardText)
-      | Some(BankTransfer) => React.string(locale.formHeaderSelectBankText)
-      | Some(Wallet) => React.string(locale.formHeaderSelectWalletText)
-      | None => React.string(locale.formHeaderSelectAccountText)
+      | Some(Card) => React.string(localeString.formHeaderEnterCardText)
+      | Some(BankTransfer) => React.string(localeString.formHeaderSelectBankText)
+      | Some(Wallet) => React.string(localeString.formHeaderSelectWalletText)
+      | None => React.string(localeString.formHeaderSelectAccountText)
       }
     }
 
   let renderContentSubHeader = () =>
     switch savedPMD {
     | Some(pmd) =>
       switch pmd {
-      | (Card, _, _) => React.string(locale.formSubheaderCardText)
+      | (Card, _, _) => React.string(localeString.formSubheaderCardText)
       | (pm, pmt, _) =>
         let pmtLabelString =
           pmt->getPaymentMethodTypeLabel ++ " " ++ pm->getPaymentMethodLabel->String.toLowerCase
-        React.string(pmtLabelString->locale.formSubheaderAccountText)
+        React.string(pmtLabelString->localeString.formSubheaderAccountText)
       }
     | None =>
       switch selectedPaymentMethod {
       | Some(_) => React.null
-      | None => React.string(locale.formFundsInfoText)
+      | None => React.string(localeString.formFundsInfoText)
       }
     }
 
@@ -251,7 +250,7 @@ let make = (
               {React.string(
                 paymentMethodType
                 ->getPaymentMethodTypeLabel
-                ->locale.formHeaderReviewTabLayoutText,
+                ->localeString.formHeaderReviewTabLayoutText,
               )}
             </div>
           </div>
@@ -263,7 +262,7 @@ let make = (
 
           {
             renderInfoTemplate(
-              field->getPaymentMethodDataFieldLabel(locale),
+              field->getPaymentMethodDataFieldLabel(localeString),
               value,
               i->Int.toString,
             )
@@ -278,7 +277,7 @@ let make = (
           paymentMethod
           ->getPaymentMethodLabel
           ->String.toLowerCase
-          ->locale.formFundsCreditInfoText,
+          ->localeString.formFundsCreditInfoText,
         )}
       </div>
       <div className="flex my-5 text-lg font-semibold w-full">
@@ -287,7 +286,7 @@ let make = (
           disabled={submitted}
           className="w-full px-2.5 py-1.5 rounded border border-solid"
           style={color: primaryTheme, borderColor: primaryTheme}>
-          {React.string(locale.formEditText)}
+          {React.string(localeString.formEditText)}
         </button>
         <button
           onClick={_ => {
@@ -297,7 +296,7 @@ let make = (
           disabled={submitted}
           className="w-full px-2.5 py-1.5 text-white rounded ml-2.5"
           style={backgroundColor: primaryTheme}>
-          {React.string(submitted ? locale.formSubmittingText : locale.formSubmitText)}
+          {React.string(submitted ? localeString.formSubmittingText : localeString.formSubmitText)}
         </button>
       </div>
     </div>
@@ -334,7 +333,10 @@ let make = (
       ->Js.Re.source
     let value = field->getPaymentMethodDataValue
     let (errorString, errorStringClasses) = switch isValid {
-    | Some(false) => (field->getPaymentMethodDataErrorString(value, locale), "text-xs text-red-950")
+    | Some(false) => (
+        field->getPaymentMethodDataErrorString(value, localeString),
+        "text-xs text-red-950",
+      )
     | _ => ("", "")
     }
     <InputField
@@ -347,8 +349,8 @@ let make = (
       isValid={None}
       errorString
       errorStringClasses
-      fieldName={field->getPaymentMethodDataFieldLabel(locale)}
-      placeholder={field->getPaymentMethodDataFieldPlaceholder(strings)}
+      fieldName={field->getPaymentMethodDataFieldLabel(localeString)}
+      placeholder={field->getPaymentMethodDataFieldPlaceholder(localeString, constantString)}
       maxLength={field->getPaymentMethodDataFieldMaxLength}
       value
       onChange={event => field->validateAndSetPaymentMethodDataValue(event)}
@@ -405,7 +407,7 @@ let make = (
         className="min-w-full mt-10 text-lg font-semibold px-2.5 py-1.5 text-white rounded"
         style={backgroundColor: primaryTheme}
         onClick={handleSave}>
-        {React.string(locale.formSaveText)}
+        {React.string(localeString.formSaveText)}
       </button>
     </div>
   }

diff --git a/src/LoaderController.res b/src/LoaderController.res
@@ -117,9 +117,10 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
       )
       let appearance =
         optionsAppearance == CardTheme.defaultAppearance ? config.appearance : optionsAppearance
-      let strings = await CardTheme.getStringObject(
+      let localeString = await CardTheme.getLocaleObject(
         optionsLocaleString == "" ? config.locale : optionsLocaleString,
       )
+      let constantString = await CardTheme.getConstantStringsObject()
       setConfig(_ => {
         config: {
           appearance,
@@ -130,8 +131,8 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
           loader: config.loader,
         },
         themeObj: appearance.variables,
-        localeString: strings.locale,
-        strings,
+        localeString,
+        constantString,
         showLoader: config.loader == Auto || config.loader == Always,
       })
     } catch {

diff --git a/src/LocaleStrings/LocaleStringTypes.res b/src/LocaleStrings/LocaleStringTypes.res
@@ -150,8 +150,3 @@ type constantStrings = {
   formFieldPixIdPlaceholder: string,
   formFieldBankAccountNumberPlaceholder: string,
 }
-
-type strings = {
-  locale: localeStrings,
-  constant: constantStrings,
-}
diff --git a/src/PaymentMethodCollectElement.res b/src/PaymentMethodCollectElement.res
@@ -4,7 +4,7 @@ open RecoilAtoms
 
 @react.component
 let make = (~integrateError, ~logger) => {
-  let {strings: {locale}} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let keys = Recoil.useRecoilValueFromAtom(keys)
   let options = Recoil.useRecoilValueFromAtom(paymentMethodCollectOptionAtom)
@@ -111,7 +111,7 @@ let make = (~integrateError, ~logger) => {
               let updatedStatusInfo = {
                 payoutId: res.payoutId,
                 status: res.status,
-                message: res.status->getPayoutStatusMessage(locale),
+                message: res.status->getPayoutStatusMessage(localeString),
                 code: res.errorCode,
                 errorMessage: res.errorMessage,
                 reason: None,
@@ -122,7 +122,7 @@ let make = (~integrateError, ~logger) => {
               let updatedStatusInfo = {
                 payoutId: options.payoutId,
                 status: Failed,
-                message: locale.payoutStatusFailedMessage,
+                message: localeString.payoutStatusFailedMessage,
                 code: Some(err.code),
                 errorMessage: Some(err.message),
                 reason: err.reason,
@@ -133,7 +133,7 @@ let make = (~integrateError, ~logger) => {
               let updatedStatusInfo = {
                 payoutId: options.payoutId,
                 status: Failed,
-                message: locale.payoutStatusFailedMessage,
+                message: localeString.payoutStatusFailedMessage,
                 code: None,
                 errorMessage: None,
                 reason: None,
@@ -148,7 +148,7 @@ let make = (~integrateError, ~logger) => {
           let updatedStatusInfo = {
             payoutId: options.payoutId,
             status: Failed,
-            message: locale.payoutStatusFailedMessage,
+            message: localeString.payoutStatusFailedMessage,
             code: None,
             errorMessage: None,
             reason: None,
@@ -209,26 +209,26 @@ let make = (~integrateError, ~logger) => {
   let renderPayoutStatus = () => {
     let status = statusInfo.status
     let imageSource = getPayoutImageSource(status)
-    let readableStatus = status->getPayoutReadableStatus(locale)
+    let readableStatus = status->getPayoutReadableStatus(localeString)
     let statusInfoFields: array<statusInfoField> = [
-      {key: locale.infoCardRefId, value: options.payoutId},
+      {key: localeString.infoCardRefId, value: options.payoutId},
     ]
 
     statusInfo.code
     ->Option.flatMap(code => {
-      statusInfoFields->Array.push({key: locale.infoCardErrCode, value: code})
+      statusInfoFields->Array.push({key: localeString.infoCardErrCode, value: code})
       None
     })
     ->ignore
     statusInfo.errorMessage
     ->Option.flatMap(errorMessage => {
-      statusInfoFields->Array.push({key: locale.infoCardErrMsg, value: errorMessage})
+      statusInfoFields->Array.push({key: localeString.infoCardErrMsg, value: errorMessage})
       None
     })
     ->ignore
     statusInfo.reason
     ->Option.flatMap(reason => {
-      statusInfoFields->Array.push({key: locale.infoCardErrReason, value: reason})
+      statusInfoFields->Array.push({key: localeString.infoCardErrReason, value: reason})
       None
     })
     ->ignore
@@ -278,7 +278,7 @@ let make = (~integrateError, ~logger) => {
       </div>
       {switch secondsUntilRedirect {
       | Some(seconds) =>
-        <div className="mt-10"> {React.string(seconds->locale.linkRedirectionText)} </div>
+        <div className="mt-10"> {React.string(seconds->localeString.linkRedirectionText)} </div>
       | None => React.null
       }}
     </div>
@@ -320,19 +320,19 @@ let make = (~integrateError, ~logger) => {
                   </div>
                   <div className="lg:mx-5">
                     <div className="self-center text-xl font-semibold">
-                      {React.string(merchantName->locale.payoutFromText)}
+                      {React.string(merchantName->localeString.payoutFromText)}
                     </div>
                     <div className="flex flex-row lg:mt-1">
                       <div className="font-semibold text-xs">
-                        {React.string(locale.infoCardRefId)}
+                        {React.string(localeString.infoCardRefId)}
                       </div>
                       <div className="ml-1 text-xs"> {React.string(options.payoutId)} </div>
                     </div>
                   </div>
                   <div
                     className="mt-4 px-4 py-1.5 bg-gray-200 text-[13px] rounded-full w-max text-black
                     lg:w-full lg:rounded-none lg:rounded-b-lg">
-                    {React.string(options.sessionExpiry->locale.linkExpiryInfo)}
+                    {React.string(options.sessionExpiry->localeString.linkExpiryInfo)}
                   </div>
                 </div>
               </div>

diff --git a/src/Utilities/PaymentMethodCollectUtils.res b/src/Utilities/PaymentMethodCollectUtils.res
@@ -203,9 +203,9 @@ let getPaymentMethodDataFieldLabel = (
 
 let getPaymentMethodDataFieldPlaceholder = (
   key: paymentMethodDataField,
-  stringsConfig: LocaleStringTypes.strings,
+  locale: LocaleStringTypes.localeStrings,
+  constant: LocaleStringTypes.constantStrings,
 ): string => {
-  let {locale, constant} = stringsConfig
   switch key {
   | CardNumber => constant.formFieldCardNumberPlaceholder
   | CardExpDate => locale.expiryPlaceholder