From a544d3258e619dc26fc787b0190bd7510c668ee9 Mon Sep 17 00:00:00 2001 From: Shiva Nandan Date: Wed, 6 Mar 2024 17:31:58 +0530 Subject: [PATCH] refactor: rescript v11 changes --- package-lock.json | 22 +++---- package.json | 4 +- bsconfig.json => rescript.json | 0 src/App.res | 4 +- src/CardUtils.res | 20 +++--- src/Components/FullScreenPortal.res | 2 +- src/Payments/ApplePay.res | 8 +-- src/Payments/BacsBankDebit.res | 6 +- src/Payments/GPay.res | 12 ++-- src/Payments/KlarnaSDK.res | 18 +++--- src/Utilities/ErrorUtils.res | 11 +++- src/libraries/Recoil.res | 14 ++--- src/orca-loader/Hyper.res | 96 +++++++++++++++-------------- src/orca-loader/HyperLoader.res | 2 +- src/orca-loader/Types.res | 18 +++--- 15 files changed, 123 insertions(+), 114 deletions(-) rename bsconfig.json => rescript.json (100%) diff --git a/package-lock.json b/package-lock.json index ee0f8c844..28158f4d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,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", @@ -44,7 +44,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", @@ -5077,8 +5077,9 @@ } }, "node_modules/@rescript/react": { - "version": "0.11.0", - "license": "MIT", + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/@rescript/react/-/react-0.12.1.tgz", + "integrity": "sha512-ZD7nhDr5FZgLYqRH9s4CNM+LRz/3IMuTb+LH12fd2Akk0xYkYUP+DZveB2VQUC2UohJnTf/c8yPSNsiFihVCCg==", "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" @@ -24866,20 +24867,19 @@ "license": "MIT" }, "node_modules/rescript": { - "version": "10.1.4", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/rescript/-/rescript-11.0.1.tgz", + "integrity": "sha512-7T4PRp/d0+CBNnY6PYKffFqo9tGZlvnZpboF/n+8SKS+JZ6VvXJO7W538VPZXf3EYx1COGAWWvkF9e/HgSAqHg==", "hasInstallScript": true, - "license": "SEE LICENSE IN LICENSE", "bin": { "bsc": "bsc", - "bsrefmt": "bsrefmt", "bstracing": "lib/bstracing", "rescript": "rescript" + }, + "engines": { + "node": ">=10" } }, - "node_modules/rescript-webapi": { - "version": "0.7.0", - "license": "MIT" - }, "node_modules/resolve": { "version": "1.22.8", "dev": true, diff --git a/package.json b/package.json index 99ac3a53d..037ca2dfe 100644 --- a/package.json +++ b/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", diff --git a/bsconfig.json b/rescript.json similarity index 100% rename from bsconfig.json rename to rescript.json diff --git a/src/App.res b/src/App.res index 4dbab81a7..c2c4b7b05 100644 --- a/src/App.res +++ b/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 } diff --git a/src/CardUtils.res b/src/CardUtils.res index 509d307cb..8e4c8467d 100644 --- a/src/CardUtils.res +++ b/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) => { 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) => { `, ), )->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, ~country=?, ()) => { @@ -586,7 +586,7 @@ let getCardDetailsFromCardProps = cardProps => { _ => (), _ => (), React.useRef(Nullable.null), - <> , + React.null, "", _ => (), 0, diff --git a/src/Components/FullScreenPortal.res b/src/Components/FullScreenPortal.res index d9e0c68e0..7f99f2bf0 100644 --- a/src/Components/FullScreenPortal.res +++ b/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 diff --git a/src/Payments/ApplePay.res b/src/Payments/ApplePay.res index 9c74fff54..dc18694f0 100644 --- a/src/Payments/ApplePay.res +++ b/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) { diff --git a/src/Payments/BacsBankDebit.res b/src/Payments/BacsBankDebit.res index 795a88936..7647afc27 100644 --- a/src/Payments/BacsBankDebit.res +++ b/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 => { diff --git a/src/Payments/GPay.res b/src/Payments/GPay.res index 42e8b6cf6..cc64fc7df 100644 --- a/src/Payments/GPay.res +++ b/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) { diff --git a/src/Payments/KlarnaSDK.res b/src/Payments/KlarnaSDK.res index 88f98cfd9..db972057b 100644 --- a/src/Payments/KlarnaSDK.res +++ b/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"), diff --git a/src/Utilities/ErrorUtils.res b/src/Utilities/ErrorUtils.res index ede0b97ff..27e56972f 100644 --- a/src/Utilities/ErrorUtils.res +++ b/src/Utilities/ErrorUtils.res @@ -175,7 +175,12 @@ let unknownKeysWarning = (validKeysArr, dict: Dict.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, (), ) } diff --git a/src/libraries/Recoil.res b/src/libraries/Recoil.res index 486e8e8d1..0c23c1668 100644 --- a/src/libraries/Recoil.res +++ b/src/libraries/Recoil.res @@ -7,14 +7,14 @@ 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") @@ -22,18 +22,18 @@ external useRecoilValueFromAtom: recoilAtom<'valueT> => 'valueT = "useRecoilValu 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 } diff --git a/src/orca-loader/Hyper.res b/src/orca-loader/Hyper.res index d5684a33b..c9756ed76 100644 --- a/src/orca-loader/Hyper.res +++ b/src/orca-loader/Hyper.res @@ -298,9 +298,9 @@ let make = (publishableKey, options: option, analyticsInfo: optionJSON.Decode.bool->Option.getOr(false) && redirect === "always" { Window.replace(returnUrl) } else if !(val->JSON.Decode.bool->Option.getOr(false)) { - resolve(. json) + resolve(json) } else { - resolve(. data) + resolve(data) } | None => () } @@ -357,7 +357,7 @@ let make = (publishableKey, options: option, analyticsInfo: option { logger.setClientSecret(clientSecretId) - resolve(. JSON.Encode.null) + resolve(JSON.Encode.null) }) ->then(_ => { logger.setLogInfo(~value=Window.href, ~eventName=ORCA_ELEMENTS_CALLED, ()) @@ -375,53 +375,55 @@ let make = (publishableKey, options: option, analyticsInfo: option, _options: option) => { - let decodedData = data->Option.flatMap(JSON.Decode.object)->Option.getOr(Dict.make()) - Js.Promise.make((~resolve, ~reject as _) => { - iframeRef.contents - ->Array.map(iframe => { - iframe->Window.iframePostMessage( - [ - ("doSubmit", true->JSON.Encode.bool), - ("clientSecret", clientSecretId->JSON.Encode.string), - ( - "confirmParams", - [("publishableKey", publishableKey->JSON.Encode.string)] - ->Dict.fromArray - ->JSON.Encode.object, - ), - ]->Dict.fromArray, - ) + let confirmCardPaymentFn = ( + clientSecretId: string, + data: option, + _options: option, + ) => { + let decodedData = data->Option.flatMap(JSON.Decode.object)->Option.getOr(Dict.make()) + Js.Promise.make((~resolve, ~reject as _) => { + iframeRef.contents + ->Array.map(iframe => { + iframe->Window.iframePostMessage( + [ + ("doSubmit", true->JSON.Encode.bool), + ("clientSecret", clientSecretId->JSON.Encode.string), + ( + "confirmParams", + [("publishableKey", publishableKey->JSON.Encode.string)] + ->Dict.fromArray + ->JSON.Encode.object, + ), + ]->Dict.fromArray, + ) - let handleMessage = (event: Types.event) => { - let json = event.data->eventToJson - let dict = json->getDictFromJson - switch dict->Dict.get("submitSuccessful") { - | Some(val) => - logApi( - ~type_="method", - ~optLogger=Some(logger), - ~result=val, - ~paymentMethod="confirmCardPayment", - ~eventName=CONFIRM_CARD_PAYMENT, - (), - ) - let url = decodedData->getString("return_url", "/") - if val->JSON.Decode.bool->Option.getOr(false) && url !== "/" { - Window.replace(url) - } else { - resolve(. json) - } - | None => resolve(. json) + let handleMessage = (event: Types.event) => { + let json = event.data->eventToJson + let dict = json->getDictFromJson + switch dict->Dict.get("submitSuccessful") { + | Some(val) => + logApi( + ~type_="method", + ~optLogger=Some(logger), + ~result=val, + ~paymentMethod="confirmCardPayment", + ~eventName=CONFIRM_CARD_PAYMENT, + (), + ) + let url = decodedData->getString("return_url", "/") + if val->JSON.Decode.bool->Option.getOr(false) && url !== "/" { + Window.replace(url) + } else { + resolve(json) } + | None => resolve(json) } - addSmartEventListener("message", handleMessage) - }) - ->ignore + } + addSmartEventListener("message", handleMessage, "") }) - } + ->ignore + }) + } let addAmountToDict = (dict, currency) => { if dict->Dict.get("amount")->Option.isNone { @@ -499,7 +501,7 @@ let make = (publishableKey, options: option, analyticsInfo: option { logger.setClientSecret(clientSecretId) - resolve(. JSON.Encode.null) + resolve(JSON.Encode.null) }) ->then(_ => { logger.setLogInfo(~value=Window.href, ~eventName=PAYMENT_SESSION_INITIATED, ()) diff --git a/src/orca-loader/HyperLoader.res b/src/orca-loader/HyperLoader.res index c64f08a0f..60ed3e0c7 100644 --- a/src/orca-loader/HyperLoader.res +++ b/src/orca-loader/HyperLoader.res @@ -1,5 +1,5 @@ let loadHyper = (str, option) => { - Promise.resolve(Hyper.make(str, option)) + Promise.resolve(Hyper.make(str, option, None)) } let loadStripe = (str, option) => { diff --git a/src/orca-loader/Types.res b/src/orca-loader/Types.res index 729729884..8f90a2469 100644 --- a/src/orca-loader/Types.res +++ b/src/orca-loader/Types.res @@ -57,9 +57,7 @@ type hyperInstance = { confirmOneClickPayment: (JSON.t, bool) => Promise.t, confirmPayment: JSON.t => Promise.t, elements: JSON.t => element, - confirmCardPayment: Js_OO.Callback.arity4< - (This.t, string, option, option) => Promise.t, - >, + confirmCardPayment: (string, option, option) => Promise.t, retrievePaymentIntent: string => Js.Promise.t, widgets: JSON.t => element, paymentRequest: JSON.t => JSON.t, @@ -73,11 +71,13 @@ let oneClickConfirmPaymentFn = (_, _) => { let confirmPaymentFn = (_elements: JSON.t) => { Promise.resolve(Dict.make()->JSON.Encode.object) } -let confirmCardPaymentFn = - @this - (_this: This.t, _clientSecretId: string, _data: option, _options: option) => { - Promise.resolve(Dict.make()->JSON.Encode.object) - } +let confirmCardPaymentFn = ( + _clientSecretId: string, + _data: option, + _options: option, +) => { + Promise.resolve(Dict.make()->JSON.Encode.object) +} let retrievePaymentIntentFn = _paymentIntentId => { Promise.resolve(Dict.make()->JSON.Encode.object) @@ -92,7 +92,7 @@ let getElement = _componentName => { let fetchUpdates = () => { Js.Promise.make((~resolve, ~reject as _) => { - setTimeout(() => resolve(. Dict.make()->JSON.Encode.object), 1000)->ignore + setTimeout(() => resolve(Dict.make()->JSON.Encode.object), 1000)->ignore }) } let defaultPaymentElement = {