refactor: rescript v11 changes

package.json

@@ -9,7 +9,7 @@
     "@glennsl/rescript-fetch": "^0.2.0",
     "@kount/kount-web-client-sdk": "^1.1.6",
     "@rescript/core": "^0.7.0",
-    "@rescript/react": "^0.11.0",
+    "@rescript/react": "^0.12.1",
     "@ryyppy/rescript-promise": "^2.1.0",
     "@sentry/react": "^7.64.0",
     "@sentry/webpack-plugin": "^2.7.0",
@@ -78,7 +78,7 @@
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
     "react-scripts": "5.0.1",
-    "rescript": "^10.1.4",
+    "rescript": "^11.0.1",
     "semantic-release": "^19.0.2",
     "tailwindcss": "^3.1.8",
     "terser-webpack-plugin": "^5.3.7",

src/App.res

@@ -13,7 +13,7 @@ let make = () => {
   })
 
   React.useEffect1(() => {
-    setLoggerState(._ => logger)
+    setLoggerState(_ => logger)
     None
   }, [logger])
 
@@ -45,5 +45,5 @@ let make = () => {
     }
   }
 
-  <> {renderFullscreen} </>
+  renderFullscreen
 }

src/CardUtils.res

@@ -67,8 +67,8 @@ type zipProps = (
 @send external blur: Dom.element => unit = "blur"
 
 type options = {timeZone: string}
-type dateTimeFormat = {resolvedOptions: (. unit) => options}
-@val @scope("Intl") external dateTimeFormat: (. unit) => dateTimeFormat = "DateTimeFormat"
+type dateTimeFormat = {resolvedOptions: unit => options}
+@val @scope("Intl") external dateTimeFormat: unit => dateTimeFormat = "DateTimeFormat"
 
 let toInt = val => val->Belt.Int.fromString->Option.getOr(0)
 let toString = val => val->Belt.Int.toString
@@ -400,14 +400,14 @@ let genreateFontsLink = (fonts: array<CardThemeType.fonts>) => {
     fonts
     ->Array.map(item =>
       if item.cssSrc != "" {
-        let link = document["createElement"](. "link")
+        let link = document["createElement"]("link")
         link["href"] = item.cssSrc
         link["rel"] = "stylesheet"
-        document["body"]["appendChild"](. link)
+        document["body"]["appendChild"](link)
       } else if item.family != "" && item.src != "" {
-        let newStyle = document["createElement"](. "style")
-        newStyle["appendChild"](.
-          document["createTextNode"](.
+        let newStyle = document["createElement"]("style")
+        newStyle["appendChild"](
+          document["createTextNode"](
             `\
 @font-face {\
     font-family: "${item.family}";\
@@ -417,7 +417,7 @@ let genreateFontsLink = (fonts: array<CardThemeType.fonts>) => {
 `,
           ),
         )->ignore
-        document["body"]["appendChild"](. newStyle)
+        document["body"]["appendChild"](newStyle)
       }
     )
     ->ignore
@@ -566,7 +566,7 @@ let getAllBanknames = obj => {
   })
 }
 
-let clientTimeZone = dateTimeFormat(.).resolvedOptions(.).timeZone
+let clientTimeZone = dateTimeFormat().resolvedOptions().timeZone
 let clientCountry = Utils.getClientCountry(clientTimeZone)
 
 let postalRegex = (postalCodes: array<PostalCodeType.postalCodes>, ~country=?, ()) => {
@@ -586,7 +586,7 @@ let getCardDetailsFromCardProps = cardProps => {
     _ => (),
     _ => (),
     React.useRef(Nullable.null),
-    <> </>,
+    React.null,
     "",
     _ => (),
     0,

src/Components/FullScreenPortal.res

@@ -6,7 +6,7 @@ external getElementById: string => Dom.element = "getElementById"
 let make = (~children) => {
   let (fullScreenIframeNode, setFullScreenIframeNode) = React.useState(() => Nullable.null)
 
-  React.useEffect(() => {
+  React.useEffectOnEveryRender(() => {
     let handle = (ev: Window.event) => {
       try {
         let json = ev.data->JSON.parseExn

src/Payments/ApplePay.res

@@ -324,16 +324,16 @@ let make = (
       isWallet
     ) {
       setShowApplePay(_ => true)
-      areOneClickWalletsRendered(.prev => {
+      areOneClickWalletsRendered(prev => {
         ...prev,
         isApplePay: true,
       })
-      setIsShowOrPayUsing(._ => true)
+      setIsShowOrPayUsing(_ => true)
     }
     None
   }, (isApplePayReady, isInvokeSDKFlow, paymentExperience, isWallet))
 
-  let submitCallback = React.useCallback((ev: Window.event) => {
+  let submitCallback = (ev: Window.event) => {
     if !isWallet {
       let json = ev.data->JSON.parseExn
       let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
@@ -353,7 +353,7 @@ let make = (
         )
       }
     }
-  })
+  }
   useSubmitPaymentData(submitCallback)
 
   {

src/Payments/BacsBankDebit.res

@@ -70,11 +70,11 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
   }, (empty, complete))
 
   React.useEffect1(() => {
-    setComplete(._ => complete)
+    setComplete(_ => complete)
     None
   }, [complete])
 
-  let submitCallback = React.useCallback((ev: Window.event) => {
+  let submitCallback = (ev: Window.event) => {
     let json = ev.data->JSON.parseExn
     let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper
 
@@ -98,7 +98,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
         postFailedSubmitResponse(~errortype="validation_error", ~message="Please enter all fields")
       }
     }
-  })
+  }
   useSubmitPaymentData(submitCallback)
 
   let changeSortCode = ev => {

src/Payments/GPay.res

@@ -191,10 +191,10 @@ let make = (
   let addGooglePayButton = () => {
     let paymentClient = getGooglePaymentsClient()
 
-    let button = paymentClient.createButton(. buttonStyle)
+    let button = paymentClient.createButton(buttonStyle)
     let gpayWrapper = getElementById(Utils.document, "google-pay-button")
     gpayWrapper.innerHTML = ""
-    gpayWrapper.appendChild(. button)
+    gpayWrapper.appendChild(button)
   }
   React.useEffect5(() => {
     if (
@@ -204,7 +204,7 @@ let make = (
       paymentExperience == PaymentMethodsRecord.RedirectToURL) &&
       isWallet
     ) {
-      setIsShowOrPayUsing(._ => true)
+      setIsShowOrPayUsing(_ => true)
       addGooglePayButton()
     }
     None
@@ -240,14 +240,14 @@ let make = (
     isDelayedSessionToken) && isWallet
 
   React.useEffect1(() => {
-    areOneClickWalletsRendered(.prev => {
+    areOneClickWalletsRendered(prev => {
       ...prev,
       isGooglePay: isRenderGooglePayButton,
     })
     None
   }, [isRenderGooglePayButton])
 
-  let submitCallback = React.useCallback((ev: Window.event) => {
+  let submitCallback = (ev: Window.event) => {
     if !isWallet {
       let json = ev.data->JSON.parseExn
       let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
@@ -270,7 +270,7 @@ let make = (
         )
       }
     }
-  })
+  }
   useSubmitPaymentData(submitCallback)
 
   {

src/Payments/KlarnaSDK.res

@@ -13,10 +13,10 @@ type res = {
   finalize_required: bool,
 }
 type some = {
-  init: (. token) => unit,
-  load: (. loadType, res => unit) => unit,
-  authorize: (. loadType, JSON.t, res => unit) => unit,
-  loadPaymentReview: (. loadType, res => unit) => unit,
+  init: token => unit,
+  load: (loadType, res => unit) => unit,
+  authorize: (loadType, JSON.t, res => unit) => unit,
+  loadPaymentReview: (loadType, res => unit) => unit,
 }
 
 @val external klarnaInit: some = "Klarna.Payments"
@@ -37,7 +37,7 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
     )
   }
 
-  let submitCallback = React.useCallback((ev: Window.event) => {
+  let submitCallback = (ev: Window.event) => {
     let json = ev.data->JSON.parseExn
     let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper
 
@@ -47,7 +47,7 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
         ("param", "paymentloader"->JSON.Encode.string),
         ("iframeId", iframeId->JSON.Encode.string),
       ])
-      klarnaInit.authorize(.
+      klarnaInit.authorize(
         {
           container: None,
           color_text: None,
@@ -63,18 +63,18 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
         },
       )
     }
-  })
+  }
   useSubmitPaymentData(submitCallback)
 
   React.useEffect1(() => {
     if status == "ready" {
       let klarnaWrapper = GooglePayType.getElementById(Utils.document, "klarna-payments")
       klarnaWrapper.innerHTML = ""
-      klarnaInit.init(. {
+      klarnaInit.init({
         client_token: sessionObj.token,
       })
 
-      klarnaInit.load(.
+      klarnaInit.load(
         {
           container: Some("#klarna-payments"),
           color_text: Some("#E51515"),

src/Utilities/ErrorUtils.res

@@ -175,7 +175,12 @@ let unknownKeysWarning = (validKeysArr, dict: Dict.t<JSON.t>, dictType: string,
   })
 }
 
-let unknownPropValueWarning = (inValidValue, validValueArr, dictType) => {
+let unknownPropValueWarning = (
+  inValidValue,
+  validValueArr,
+  dictType,
+  ~logger: OrcaLogger.loggerMake,
+) => {
   let expectedValues =
     validValueArr
     ->Array.map(item => {
@@ -185,13 +190,15 @@ let unknownPropValueWarning = (inValidValue, validValueArr, dictType) => {
   manageErrorWarning(
     UNKNOWN_VALUE,
     ~dynamicStr=`'${inValidValue}' value in ${dictType}, Expected ${expectedValues}`,
+    ~logger,
     (),
   )
 }
-let valueOutRangeWarning = (num: int, dictType, range) => {
+let valueOutRangeWarning = (num: int, dictType, range, ~logger: OrcaLogger.loggerMake) => {
   manageErrorWarning(
     VALUE_OUT_OF_RANGE,
     ~dynamicStr=`${num->Belt.Int.toString} value in ${dictType} Expected value between ${range}`,
+    ~logger: OrcaLogger.loggerMake,
     (),
   )
 }

src/libraries/Recoil.res

@@ -7,33 +7,33 @@ type recoilAtom<'v> = RecoilAtom('v)
 type recoilSelector<'v> = RecoilSelector('v)
 
 @module("./recoil")
-external atom: (. string, 'v) => recoilAtom<'v> = "atom"
+external atom: (string, 'v) => recoilAtom<'v> = "atom"
 
 @module("recoil")
-external useRecoilState: recoilAtom<'valueT> => ('valueT, (. 'valueT => 'valueT) => unit) =
+external useRecoilState: recoilAtom<'valueT> => ('valueT, ('valueT => 'valueT) => unit) =
   "useRecoilState"
 
 @module("recoil")
-external useSetRecoilState: (recoilAtom<'valueT>, . 'valueT => 'valueT) => unit =
+external useSetRecoilState: recoilAtom<'valueT> => ('valueT => 'valueT) => unit =
   "useSetRecoilState"
 
 @module("recoil")
 external useRecoilValueFromAtom: recoilAtom<'valueT> => 'valueT = "useRecoilValue"
 
 let useLoggedRecoilState = (atomName, type_, logger: OrcaLogger.loggerMake) => {
   let (state, setState) = useRecoilState(atomName)
-  let newSetState = (. value) => {
+  let newSetState = value => {
     LoggerUtils.logInputChangeInfo(type_, logger)
-    setState(. value)
+    setState(value)
   }
   (state, newSetState)
 }
 
 let useLoggedSetRecoilState = (atomName, type_, logger: OrcaLogger.loggerMake) => {
   let setState = useSetRecoilState(atomName)
-  let newSetState = (. value) => {
+  let newSetState = value => {
     LoggerUtils.logInputChangeInfo(type_, logger)
-    setState(. value)
+    setState(value)
   }
   newSetState
 }