refactor: country props drilling removal

src/Components/AccordionContainer.res

@@ -2,7 +2,7 @@ open RecoilAtoms
 module Loader = {
   @react.component
   let make = (~cardShimmerCount) => {
-    let list = Recoil.useRecoilValueFromAtom(RecoilAtoms.list)
+    let list = Recoil.useRecoilValueFromAtom(list)
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
     let layoutClass = CardUtils.getLayoutClass(layout)
@@ -61,7 +61,7 @@ module Loader = {
 @react.component
 let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
-  let list = Recoil.useRecoilValueFromAtom(RecoilAtoms.list)
+  let list = Recoil.useRecoilValueFromAtom(list)
   let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (showMore, setShowMore) = React.useState(_ => false)

src/Components/Block.res

@@ -1,10 +1,5 @@
 @react.component
-let make = (
-  ~topElement: option<React.element>=?,
-  ~bottomElement: option<React.element>=?,
-  ~padding="p-5",
-  ~className="",
-) => {
+let make = (~topElement=?, ~bottomElement=?, ~padding="p-5", ~className="") => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let topBlock = switch topElement {
   | Some(ele) => ele

src/Payment.res

@@ -12,10 +12,10 @@ let setUserError = message => {
 let make = (~paymentMode, ~integrateError, ~logger) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let keys = Recoil.useRecoilValueFromAtom(keys)
-  let cardScheme = Recoil.useRecoilValueFromAtom(RecoilAtoms.cardBrand)
-  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
+  let cardScheme = Recoil.useRecoilValueFromAtom(cardBrand)
+  let showFields = Recoil.useRecoilValueFromAtom(showCardFieldsAtom)
   let selectedOption = Recoil.useRecoilValueFromAtom(selectedOptionAtom)
-  let paymentToken = Recoil.useRecoilValueFromAtom(RecoilAtoms.paymentTokenAtom)
+  let paymentToken = Recoil.useRecoilValueFromAtom(paymentTokenAtom)
   let (token, _) = paymentToken
 
   let {iframeId} = keys
@@ -56,12 +56,6 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     cardBrand->getCardType
   }, [cardBrand])
 
-  let clientTimeZone = dateTimeFormat().resolvedOptions().timeZone
-  let clientCountry = Utils.getClientCountry(clientTimeZone)
-
-  let countryNames = Utils.getCountryNames(Country.country)
-  let countryProps = (clientCountry.countryName, countryNames)
-
   let (postalCodes, setPostalCodes) = React.useState(_ => [PostalCodeType.defaultPostalCode])
 
   React.useEffect(() => {
@@ -343,16 +337,12 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   }, (cardNumber, cvcNumber, cardExpiry, isCVCValid, isExpiryValid, isCardValid))
 
   React.useEffect(() => {
-    setCardError(_ =>
-      isCardValid->Option.getOr(true) ? "" : localeString.inValidCardErrorText
-    )
+    setCardError(_ => isCardValid->Option.getOr(true) ? "" : localeString.inValidCardErrorText)
     None
   }, [isCardValid])
 
   React.useEffect(() => {
-    setCvcError(_ =>
-      isCVCValid->Option.getOr(true) ? "" : localeString.inCompleteCVCErrorText
-    )
+    setCvcError(_ => isCVCValid->Option.getOr(true) ? "" : localeString.inCompleteCVCErrorText)
     None
   }, [isCVCValid])
 
@@ -427,15 +417,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     <ErrorOccured />
   } else {
     <RenderPaymentMethods
-      paymentType
-      cardProps
-      expiryProps
-      cvcProps
-      zipProps
-      handleElementFocus
-      blurState
-      countryProps
-      isFocus
+      paymentType cardProps expiryProps cvcProps zipProps handleElementFocus blurState isFocus
     />
   }
 }

src/PaymentElement.res

@@ -8,13 +8,7 @@ let cardsToRender = (width: int) => {
   noOfCards
 }
 @react.component
-let make = (
-  ~cardProps,
-  ~expiryProps,
-  ~cvcProps,
-  ~countryProps,
-  ~paymentType: CardThemeType.mode,
-) => {
+let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mode) => {
   let sessionsObj = Recoil.useRecoilValueFromAtom(sessions)
   let {
     showCardFormByDefault,
@@ -307,12 +301,12 @@ let make = (
               </React.Suspense>
             | None =>
               <React.Suspense fallback={loader()}>
-                <KlarnaPaymentLazy paymentType countryProps list />
+                <KlarnaPaymentLazy paymentType list />
               </React.Suspense>
             }
           | _ =>
             <React.Suspense fallback={loader()}>
-              <KlarnaPaymentLazy paymentType countryProps list />
+              <KlarnaPaymentLazy paymentType list />
             </React.Suspense>
           }}
         </SessionPaymentWrapper>
@@ -322,7 +316,7 @@ let make = (
         </React.Suspense>
       | SepaTransfer =>
         <React.Suspense fallback={loader()}>
-          <SepaBankTransferLazy paymentType list countryProps />
+          <SepaBankTransferLazy paymentType list />
         </React.Suspense>
       | BacsTransfer =>
         <React.Suspense fallback={loader()}>

src/PaymentElementRenderer.res

@@ -5,7 +5,6 @@ let make = (
   ~cardProps: CardUtils.cardProps,
   ~expiryProps: CardUtils.expiryProps,
   ~cvcProps: CardUtils.cvcProps,
-  ~countryProps: (string, array<string>),
 ) => {
   let _cardsToRender = width => {
     (width - 40) / 110
@@ -18,7 +17,7 @@ let make = (
     <RenderIf condition=showLoader>
       <PaymentElementShimmer />
     </RenderIf>
-  | _ => <PaymentElement cardProps expiryProps cvcProps countryProps paymentType />
+  | _ => <PaymentElement cardProps expiryProps cvcProps paymentType />
   }
 }
 

src/PaymentElementRenderer.resi

@@ -4,5 +4,4 @@ let default: (
   ~cardProps: CardUtils.cardProps,
   ~expiryProps: CardUtils.expiryProps,
   ~cvcProps: CardUtils.cvcProps,
-  ~countryProps: (string, array<string>),
 ) => React.element

src/PaymentElementRendererLazy.res

@@ -5,7 +5,6 @@ type props = {
   cardProps: CardUtils.cardProps,
   expiryProps: CardUtils.expiryProps,
   cvcProps: CardUtils.cvcProps,
-  countryProps: (string, array<string>),
 }
 
 let make: props => React.element = reactLazy(() => import_("./PaymentElementRenderer.bs.js"))

src/PaymentOptions.res

@@ -2,7 +2,7 @@ open RecoilAtoms
 module TabLoader = {
   @react.component
   let make = (~cardShimmerCount) => {
-    let list = Recoil.useRecoilValueFromAtom(RecoilAtoms.list)
+    let list = Recoil.useRecoilValueFromAtom(list)
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     open PaymentType
     open PaymentElementShimmer

src/Payments/KlarnaPayment.res

@@ -1,7 +1,7 @@
 open PaymentType
 open RecoilAtoms
 @react.component
-let make = (~paymentType, ~countryProps, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType, ~list: PaymentMethodsRecord.list) => {
   let (loggerState, _setLoggerState) = Recoil.useRecoilState(loggerAtom)
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
@@ -15,7 +15,7 @@ let make = (~paymentType, ~countryProps, ~list: PaymentMethodsRecord.list) => {
   let (fullName, _) = Recoil.useLoggedRecoilState(userFullName, "fullName", loggerState)
   let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState)
 
-  let (_clientCountry, countryNames) = countryProps
+  let countryNames = Utils.getCountryNames(Country.country)
 
   let (country, setCountry) = Recoil.useRecoilState(userCountry)
   let setCountry = val => {

src/Payments/KlarnaPaymentLazy.res

@@ -3,7 +3,6 @@ open LazyUtils
 type props = {
   paymentType: CardThemeType.mode,
   list: PaymentMethodsRecord.list,
-  countryProps: (string, array<string>),
 }
 
 let make: props => React.element = reactLazy(() => import_("./KlarnaPayment.bs.js"))

src/Payments/PayPal.res

@@ -16,7 +16,7 @@ let make = (~list: PaymentMethodsRecord.list) => {
   let (paypalClicked, setPaypalClicked) = React.useState(_ => false)
   let {publishableKey, sdkHandleOneClickConfirmPayment} = Recoil.useRecoilValueFromAtom(keys)
   let options = Recoil.useRecoilValueFromAtom(optionAtom)
-  let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
+  let areOneClickWalletsRendered = Recoil.useSetRecoilState(areOneClickWalletsRendered)
   let (_, _, labelType) = options.wallets.style.type_
   let _label = switch labelType {
   | Paypal(val) => val->PaypalSDKTypes.getLabel

src/Payments/PaymentMethodsWrapper.res

@@ -40,8 +40,8 @@ let make = (
   let cleanPhoneNumber = str => str->String.replaceRegExp(%re("/\s/g"), "")
 
   let (requiredFieldsBody, setRequiredFieldsBody) = React.useState(_ => Dict.make())
-  let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsValid)
-  let areRequiredFieldsEmpty = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsEmpty)
+  let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
+  let areRequiredFieldsEmpty = Recoil.useRecoilValueFromAtom(areRequiredFieldsEmpty)
 
   let complete = areRequiredFieldsValid
 

src/Payments/SepaBankTransfer.res

@@ -2,11 +2,7 @@ open RecoilAtoms
 open Utils
 
 @react.component
-let make = (
-  ~paymentType: CardThemeType.mode,
-  ~list: PaymentMethodsRecord.list,
-  ~countryProps: (string, array<string>),
-) => {
+let make = (~paymentType, ~list) => {
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -19,7 +15,7 @@ let make = (
     ~billingDetails=fields.billingDetails,
     ~logger=loggerState,
   )
-  let (_clientCountry, countryNames) = countryProps
+  let countryNames = Utils.getCountryNames(Country.country)
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
   let clientCountryCode =
     Country.country

src/Payments/SepaBankTransfer.resi

@@ -1,6 +1,2 @@
 @react.component
-let default: (
-  ~paymentType: CardThemeType.mode,
-  ~list: PaymentMethodsRecord.list,
-  ~countryProps: (string, array<string>),
-) => React.element
+let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element

src/Payments/SepaBankTransferLazy.res

@@ -3,7 +3,6 @@ open LazyUtils
 type props = {
   paymentType: CardThemeType.mode,
   list: PaymentMethodsRecord.list,
-  countryProps: (string, array<string>),
 }
 
 let make: props => React.element = reactLazy(() => import_("./SepaBankTransfer.bs.js"))

src/RenderPaymentMethods.res

@@ -8,7 +8,6 @@ let make = (
   ~zipProps,
   ~handleElementFocus,
   ~blurState,
-  ~countryProps,
   ~isFocus,
 ) => {
   let {showLoader} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -85,7 +84,7 @@ let make = (
             fallback={<RenderIf condition={showLoader}>
               <PaymentElementShimmer />
             </RenderIf>}>
-            <PaymentElementRendererLazy paymentType cardProps expiryProps cvcProps countryProps />
+            <PaymentElementRendererLazy paymentType cardProps expiryProps cvcProps />
           </React.Suspense>
         | CardNumberElement =>
           <InputField