feat: migrate local strings to S3

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@glennsl/rescript-fetch": "^0.2.0",
+    "pako": "^2.1.0",
     "@rescript/core": "^0.7.0",
     "@rescript/react": "^0.12.1",
     "@sentry/react": "^7.119.0",

src/CardTheme.res

@@ -66,44 +66,62 @@ let defaultConfig = {
 type recoilConfig = {
   config: configClass,
   themeObj: themeClass,
-  localeString: LocaleStringTypes.localeStrings,
+  localeString: LocaleStringTypes.localeStringsWebAndroid,
   constantString: LocaleStringTypes.constantStrings,
   showLoader: bool,
 }
 
-let getLocaleObject = async string => {
+let getLocaleObject = async (string, ~logger: HyperLogger.loggerMake) => {
   try {
     let locale = if string == "auto" {
       Window.Navigator.language
+    } else if string == "" {
+      "en"
     } else {
       string
     }
 
-    let promiseLocale = switch locale->LocaleStringHelper.mapLocalStringToTypeLocale {
-    | EN => Js.import(EnglishLocale.localeStrings)
-    | HE => Js.import(HebrewLocale.localeStrings)
-    | FR => Js.import(FrenchLocale.localeStrings)
-    | EN_GB => Js.import(EnglishGBLocale.localeStrings)
-    | AR => Js.import(ArabicLocale.localeStrings)
-    | JA => Js.import(JapaneseLocale.localeStrings)
-    | DE => Js.import(DeutschLocale.localeStrings)
-    | FR_BE => Js.import(FrenchBelgiumLocale.localeStrings)
-    | ES => Js.import(SpanishLocale.localeStrings)
-    | CA => Js.import(CatalanLocale.localeStrings)
-    | ZH => Js.import(ChineseLocale.localeStrings)
-    | PT => Js.import(PortugueseLocale.localeStrings)
-    | IT => Js.import(ItalianLocale.localeStrings)
-    | PL => Js.import(PolishLocale.localeStrings)
-    | NL => Js.import(DutchLocale.localeStrings)
-    | SV => Js.import(SwedishLocale.localeStrings)
-    | RU => Js.import(RussianLocale.localeStrings)
-    | ZH_HANT => Js.import(TraditionalChineseLocale.localeStrings)
+    let baseUrl = switch (
+      GlobalVars.isRunningInLocal,
+      GlobalVars.isProd,
+      GlobalVars.isSandbox,
+      GlobalVars.isInteg,
+    ) {
+    | (true, _, _, _) => ""
+    | (_, true, _, _) => "https://checkout.hyperswitch.io"
+    | (_, _, true, _) => "https://beta.hyperswitch.io"
+    | (_, _, _, true) => "https://dev.hyperswitch.io"
+    | (_, _, _, _) => ""
     }
+    let localeStringEndPoint = `${baseUrl}/assets/v1/locales/${locale}`
 
-    let awaitedLocaleValue = await promiseLocale
-    awaitedLocaleValue
+    let fetchLocale = endpoint => {
+      fetchApi(endpoint, ~method=#GET)
+      ->GZipUtils.extractJson
+      ->Promise.then(data => {
+        Promise.resolve(LocaleStringHelper.getLocaleStringsFromJson(data))
+      })
+    }
+
+    let localeValue =
+      await fetchLocale(localeStringEndPoint)
+      ->Promise.catch(_ => {
+        fetchLocale(`${baseUrl}/assets/v1/locales/en`)
+      })
+      ->Promise.catch(_ => {
+        logger.setLogError(
+          ~value="Failed to fetch locale strings S",
+          ~eventName=S3_API,
+          ~logType=ERROR,
+          ~logCategory=USER_ERROR,
+        )
+        // logger
+        Promise.resolve(LocaleStringHelper.defaultLocale)
+      })
+
+    localeValue
   } catch {
-  | _ => EnglishLocale.localeStrings
+  | _ => LocaleStringHelper.defaultLocale
   }
 }
 
@@ -119,7 +137,7 @@ let getConstantStringsObject = async () => {
 let defaultRecoilConfig: recoilConfig = {
   config: defaultConfig,
   themeObj: defaultConfig.appearance.variables,
-  localeString: EnglishLocale.localeStrings,
+  localeString: LocaleStringHelper.defaultLocale,
   constantString: ConstantStrings.constantStrings,
   showLoader: false,
 }

src/CardUtils.res

@@ -695,10 +695,14 @@ let getCardBrandFromStates = (cardBrand, cardScheme, showFields) => {
   !showFields ? cardScheme : cardBrand
 }
 
-let getCardBrandInvalidError = (~cardNumber, ~localeString: LocaleStringTypes.localeStrings) => {
+let getCardBrandInvalidError = (
+  ~cardNumber,
+  ~localeString: LocaleStringTypes.localeStringsWebAndroid,
+) => {
   switch cardNumber->getCardBrand {
   | "" => localeString.enterValidCardNumberErrorText
-  | cardBrandValue => localeString.cardBrandConfiguredErrorText(cardBrandValue)
+  | cardBrandValue =>
+    LocaleStringHelper.getCardBrandConfiguredErrorText(localeString, cardBrandValue)
   }
 }
 

src/Components/BillingNamePaymentInput.res

@@ -44,15 +44,15 @@ let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequ
       if billingName.value == "" {
         setBillingName(prev => {
           ...prev,
-          errorString: fieldName->localeString.nameEmptyText,
+          errorString: LocaleStringHelper.getNameEmptyText(localeString, fieldName),
         })
       } else {
         switch optionalRequiredFields {
         | Some(requiredFields) =>
           if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, BillingName, billingName) {
             setBillingName(prev => {
               ...prev,
-              errorString: fieldName->localeString.completeNameEmptyText,
+              errorString: LocaleStringHelper.getCompleteNameEmptyText(localeString, fieldName),
             })
           }
         | None => ()

src/Components/FullNamePaymentInput.res

@@ -13,7 +13,7 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
   let validateName = (
     val: string,
     prev: RecoilAtomTypes.field,
-    localeString: LocaleStringTypes.localeStrings,
+    localeString: LocaleStringTypes.localeStringsWebAndroid,
   ) => {
     let isValid = val !== "" && %re("/^\D*$/")->RegExp.test(val)
     let errorString = if val === "" {
@@ -54,7 +54,7 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
       if fullName.value == "" {
         setFullName(prev => {
           ...prev,
-          errorString: fieldName->localeString.nameEmptyText,
+          errorString: LocaleStringHelper.getNameEmptyText(localeString, fieldName),
         })
       } else if !(fullName.isValid->Option.getOr(false)) {
         setFullName(prev => {
@@ -67,7 +67,7 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
           if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, FullName, fullName) {
             setFullName(prev => {
               ...prev,
-              errorString: fieldName->localeString.completeNameEmptyText,
+              errorString: LocaleStringHelper.getCompleteNameEmptyText(localeString, fieldName),
             })
           }
         | None => ()

src/Components/SaveDetailsCheckbox.res

@@ -53,7 +53,7 @@ let make = (~isChecked, ~setIsChecked) => {
   } else if customMessageForCardTerms->String.length > 0 {
     customMessageForCardTerms
   } else {
-    localeString.cardTerms(business.name)
+    LocaleStringHelper.getCardTerms(localeString, business.name)
   }
 
   <div className={`Checkbox ${checkboxState} flex flex-row gap-2 items-center`}>

src/Components/SurchargeUtils.res

@@ -65,9 +65,17 @@ let useMessageGetter = () => {
     let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Float.toString
 
     let localeStrForSurcharge = if paymentMethod === "card" {
-      localeString.surchargeMsgAmountForCard(paymentMethodListValue.currency, surchargeValue)
+      LocaleStringHelper.getSurchangeMsgAmountForCardComponent(
+        localeString,
+        paymentMethodListValue.currency,
+        surchargeValue,
+      )
     } else {
-      localeString.surchargeMsgAmount(paymentMethodListValue.currency, surchargeValue)
+      LocaleStringHelper.getSurchangeMsgAmountComponent(
+        localeString,
+        paymentMethodListValue.currency,
+        surchargeValue,
+      )
     }
 
     Some(localeStrForSurcharge)

src/Components/Terms.res

@@ -6,12 +6,18 @@ let make = (~mode: PaymentModeType.payment) => {
   let cardTermsValue =
     customMessageForCardTerms->String.length > 0
       ? customMessageForCardTerms
-      : localeString.cardTerms(business.name)
+      : LocaleStringHelper.getCardTerms(localeString, business.name)
 
   let terms = switch mode {
-  | ACHBankDebit => (localeString.achBankDebitTerms(business.name), terms.usBankAccount)
-  | SepaBankDebit => (localeString.sepaDebitTerms(business.name), terms.sepaDebit)
-  | BecsBankDebit => (localeString.becsDebitTerms, terms.auBecsDebit)
+  | ACHBankDebit => (
+      LocaleStringHelper.getAchBankDebitTerms(localeString, business.name),
+      terms.usBankAccount,
+    )
+  | SepaBankDebit => (
+      LocaleStringHelper.getSepaDebitTerms(localeString, business.name),
+      terms.sepaDebit,
+    )
+  | BecsBankDebit => (localeString.becsDebitTermsWeb, terms.auBecsDebit)
   | Card => (cardTermsValue, terms.card)
   | _ => ("", Auto)
   }

src/FormViewJourney.res

@@ -107,9 +107,10 @@ let make = (
           | Card => {
               let newPmt = Card(Debit)
               let payoutDynamicFields =
-                getPayoutDynamicFields(enabledPaymentMethodsWithDynamicFields, newPmt)->Option.getOr(
-                  defaultPayoutDynamicFields(~pmt=newPmt),
-                )
+                getPayoutDynamicFields(
+                  enabledPaymentMethodsWithDynamicFields,
+                  newPmt,
+                )->Option.getOr(defaultPayoutDynamicFields(~pmt=newPmt))
               setActivePmt(_ => newPmt)
               payoutDynamicFields.address
               ->Option.map(address => {
@@ -291,8 +292,8 @@ let make = (
           {renderHeader(
             switch pm {
             | Card => localeString.formHeaderEnterCardText
-            | BankTransfer => key->localeString.formHeaderBankText
-            | Wallet => key->localeString.formHeaderWalletText
+            | BankTransfer => LocaleStringHelper.getFormHeaderBankText(localeString, key)
+            | Wallet => LocaleStringHelper.getFormHeaderWalletText(localeString, key)
             },
             true,
           )}
@@ -313,9 +314,10 @@ let make = (
               <img src={"merchantLogo"} alt="" className="h-6 w-auto" />
               <div className="ml-1.5">
                 {React.string(
-                  pmt
-                  ->getPaymentMethodTypeLabel
-                  ->localeString.formHeaderReviewTabLayoutText,
+                  LocaleStringHelper.getFormHeaderReviewTabLayoutText(
+                    localeString,
+                    pmt->getPaymentMethodTypeLabel,
+                  ),
                 )}
               </div>
             </div>
@@ -364,10 +366,10 @@ let make = (
             className="flex flex-row items-center min-w-full my-5 px-2.5 py-1.5 text-xs border border-solid border-blue-200 rounded bg-blue-50">
             <img src={"merchantLogo"} alt="" className="h-3 w-auto mr-1.5" />
             {React.string(
-              pm
-              ->getPaymentMethodLabel
-              ->String.toLowerCase
-              ->localeString.formFundsCreditInfoText,
+              LocaleStringHelper.getFormFundsCreditInfoText(
+                localeString,
+                pm->getPaymentMethodLabel->String.toLowerCase,
+              ),
             )}
           </div>
           <div className="flex my-5 text-lg font-semibold w-full">

src/FormViewTabs.res

@@ -219,8 +219,8 @@ let make = (
           <div className={contentHeaderClasses}>
             {switch activePmt {
             | Card(_) => localeString.formHeaderEnterCardText
-            | BankTransfer(_) => key->localeString.formHeaderBankText
-            | Wallet(_) => key->localeString.formHeaderWalletText
+            | BankTransfer(_) => LocaleStringHelper.getFormHeaderBankText(localeString, key)
+            | Wallet(_) => LocaleStringHelper.getFormHeaderWalletText(localeString, key)
             }->React.string}
           </div>
           {payoutDynamicFields.payoutMethodData->renderPayoutMethodForm->React.array}
@@ -254,9 +254,10 @@ let make = (
               <img src={"merchantLogo"} alt="" className="h-6 w-auto" />
               <div className="ml-1.5">
                 {React.string(
-                  pmt
-                  ->getPaymentMethodTypeLabel
-                  ->localeString.formHeaderReviewTabLayoutText,
+                  LocaleStringHelper.getFormHeaderReviewTabLayoutText(
+                    localeString,
+                    pmt->getPaymentMethodTypeLabel,
+                  ),
                 )}
               </div>
             </div>
@@ -305,10 +306,10 @@ let make = (
             className="flex flex-row items-center min-w-full my-5 px-2.5 py-1.5 text-xs border border-solid border-blue-200 rounded bg-blue-50">
             <img src={"merchantLogo"} alt="" className="h-3 w-auto mr-1.5" />
             {React.string(
-              pm
-              ->getPaymentMethodLabel
-              ->String.toLowerCase
-              ->localeString.formFundsCreditInfoText,
+              LocaleStringHelper.getFormFundsCreditInfoText(
+                localeString,
+                pm->getPaymentMethodLabel->String.toLowerCase,
+              ),
             )}
           </div>
           <div className="flex my-5 text-lg font-semibold w-full">

src/GlobalVars.res

@@ -15,3 +15,4 @@ let targetOrigin: string = "*"
 let isInteg = sdkUrl === "https://dev.hyperswitch.io"
 let isSandbox = sdkUrl === "https://beta.hyperswitch.io" || sdkUrl === "http://localhost:9050"
 let isProd = sdkUrl === "https://checkout.hyperswitch.io"
+let isRunningInLocal = sdkUrl === "http://localhost:9050"

src/LoaderController.res

@@ -128,6 +128,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
         optionsAppearance == CardTheme.defaultAppearance ? config.appearance : optionsAppearance
       let localeString = await CardTheme.getLocaleObject(
         optionsLocaleString == "" ? config.locale : optionsLocaleString,
+        ~logger,
       )
       let constantString = await CardTheme.getConstantStringsObject()
       setConfig(_ => {