feat: added netecetera customisation props

src/components/modules/Netcetera3dsModule.res

@@ -1,7 +1,7 @@
 open ExternalThreeDsTypes
 
 type module_ = {
-  initialiseNetceteraSDK: (string, string, statusType => unit) => unit,
+  initialiseNetceteraSDK: (string, string, string, statusType => unit) => unit,
   generateAReqParams: (string, string, (statusType, aReqParams) => unit) => unit,
   recieveChallengeParamsFromRN: (
     string,
@@ -35,5 +35,5 @@ let (
     mod.generateChallenge,
     mod.isAvailable,
   )
-| None => ((_, _, _) => (), (_, _, _) => (), (_, _, _, _, _, _) => (), _ => (), false)
+| None => ((_, _, _, _) => (), (_, _, _) => (), (_, _, _, _, _, _) => (), _ => (), false)
 }

src/hooks/NetceteraThreeDsHooks.res

@@ -3,14 +3,19 @@ open ThreeDsUtils
 open SdkStatusMessages
 let isInitialisedPromiseRef = ref(None)
 
-let initialisedNetceteraOnce = (~netceteraSDKApiKey, ~sdkEnvironment) => {
+let initialisedNetceteraOnce = (
+  ~netceteraSDKApiKey,
+  ~sdkEnvironment,
+  ~challengeCustomisationProps,
+) => {
   switch isInitialisedPromiseRef.contents {
   | Some(promiseVal) => promiseVal
   | None => {
       let promiseVal = Promise.make((resolve, _reject) => {
         Netcetera3dsModule.initialiseNetceteraSDK(
           netceteraSDKApiKey,
           sdkEnvironment->sdkEnvironmentToStrMapper,
+          challengeCustomisationProps,
           status => resolve(status),
         )
       })
@@ -22,9 +27,15 @@ let initialisedNetceteraOnce = (~netceteraSDKApiKey, ~sdkEnvironment) => {
 }
 
 let useInitNetcetera = () => {
+  let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
+  let challengeCustomisationProps =
+    nativeProp.configuration.netceteraChallengeUICustomization
+    ->Utils.getJsonObjectFromRecord
+    ->JSON.stringify
+
   let logger = LoggerHook.useLoggerHook()
   (~netceteraSDKApiKey, ~sdkEnvironment: GlobalVars.envType) => {
-    initialisedNetceteraOnce(~netceteraSDKApiKey, ~sdkEnvironment)
+    initialisedNetceteraOnce(~netceteraSDKApiKey, ~sdkEnvironment, ~challengeCustomisationProps)
     ->Promise.then(promiseVal => {
       logger(
         ~logType=INFO,
@@ -49,6 +60,12 @@ let useExternalThreeDs = () => {
   let apiLogWrapper = LoggerHook.useApiLogWrapper()
   let (_, setLoading) = React.useContext(LoadingContext.loadingContext)
 
+  let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
+  let challengeCustomisationProps =
+    nativeProp.configuration.netceteraChallengeUICustomization
+    ->Utils.getJsonObjectFromRecord
+    ->JSON.stringify
+
   (
     ~baseUrl,
     ~netceteraSDKApiKey,
@@ -401,7 +418,7 @@ let useExternalThreeDs = () => {
     }
 
     let startNetcetera3DSFlow = () => {
-      initialisedNetceteraOnce(~netceteraSDKApiKey, ~sdkEnvironment)
+      initialisedNetceteraOnce(~netceteraSDKApiKey, ~sdkEnvironment, ~challengeCustomisationProps)
       ->Promise.then(statusInfo => {
         logger(
           ~logType=INFO,

src/types/NetceteraCustomisationType.res

@@ -0,0 +1,157 @@
+open Utils
+
+type labelCustomization = {
+  textFontName?: string,
+  textColor?: string,
+  textFontSize?: float,
+  headingTextFontName?: string,
+  headingTextColor?: string,
+  headingTextFontSize?: float,
+}
+
+type textBoxCustomization = {
+  textFontName?: string,
+  textColor?: string,
+  textFontSize?: float,
+  borderWidth?: float,
+  borderColor?: string,
+  cornerRadius?: float,
+}
+
+type toolbarCustomization = {
+  textFontName?: string,
+  textColor?: string,
+  textFontSize?: string,
+  backgroundColor?: string,
+  headerText?: string,
+  buttonText?: string,
+}
+
+type buttonCustomization = {
+  buttonType: string,
+  backgroundColor?: string,
+  cornerRadius?: float,
+  textFontName?: string,
+  textFontSize?: string,
+  textColor?: string,
+}
+
+type viewCustomization = {
+  challengeViewBackgroundColor?: string,
+  progressViewBackgroundColor?: string,
+}
+
+type netceteraChallengeUICustomization = {
+  labelCustomization?: labelCustomization,
+  textBoxCustomization?: textBoxCustomization,
+  toolbarCustomization?: toolbarCustomization,
+  buttonCustomization?: array<buttonCustomization>,
+  viewCustomization?: viewCustomization,
+}
+
+type netceteraChallengeUICustomizationType = {
+  locale: string,
+  lightMode?: option<netceteraChallengeUICustomization>,
+  darkMode?: option<netceteraChallengeUICustomization>,
+}
+
+let fun = netceteraChallengeUICustomization => {
+  switch netceteraChallengeUICustomization {
+  | Some(uiObj) =>
+    let labelObj = getObj(uiObj, "labelCustomization", Dict.make())
+    let labelCustomization = if labelObj != Dict.make() {
+      Some({
+        headingTextFontSize: ?getOptionFloat(labelObj, "headingTextFontSize"),
+        textFontSize: ?getOptionFloat(labelObj, "textFontSize"),
+        textFontName: ?getOptionString(labelObj, "textFontName"),
+        headingTextFontName: ?getOptionString(labelObj, "headingTextFontName"),
+        headingTextColor: ?getOptionString(labelObj, "headingTextColor"),
+        textColor: ?getOptionString(labelObj, "textColor"),
+      })
+    } else {
+      None
+    }
+
+    let textBoxObj = getObj(uiObj, "textBoxCustomization", Dict.make())
+    let textBoxCustomization = if textBoxObj != Dict.make() {
+      Some({
+        borderColor: ?getOptionString(textBoxObj, "borderColor"),
+        borderWidth: ?getOptionFloat(textBoxObj, "borderWidth"),
+        cornerRadius: ?getOptionFloat(textBoxObj, "cornerRadius"),
+        textFontName: ?getOptionString(textBoxObj, "textFontName"),
+        textColor: ?getOptionString(textBoxObj, "textColor"),
+        textFontSize: ?getOptionFloat(textBoxObj, "textFontSize"),
+      })
+    } else {
+      None
+    }
+
+    let toolbarObj = getObj(uiObj, "toolbarCustomization", Dict.make())
+    let toolbarCustomization = if toolbarObj != Dict.make() {
+      Some({
+        backgroundColor: ?getOptionString(toolbarObj, "backgroundColor"),
+        textColor: ?getOptionString(toolbarObj, "textColor"),
+        buttonText: ?getOptionString(toolbarObj, "buttonText"),
+        headerText: ?getOptionString(toolbarObj, "headerText"),
+        textFontName: ?getOptionString(toolbarObj, "textFontName"),
+        textFontSize: ?getOptionString(toolbarObj, "textFontSize"),
+      })
+    } else {
+      None
+    }
+
+    let buttonCustomization = getArrayFromDict(uiObj, "buttonCustomization", [])
+    let buttonCustomizationArray = buttonCustomization->Array.map(obj => {
+      let objDict = getDictFromJson(obj)
+      {
+        buttonType: getOptionString(objDict, "buttonType")->Option.getOr("SUBMIT"),
+        backgroundColor: ?getOptionString(objDict, "backgroundColor"),
+        cornerRadius: ?getOptionFloat(objDict, "cornerRadius"),
+        textFontName: ?getOptionString(objDict, "textFontName"),
+        textFontSize: ?getOptionString(objDict, "textFontSize"),
+        textColor: ?getOptionString(objDict, "textColor"),
+      }
+    })
+
+    let viewObj = getObj(uiObj, "viewCustomization", Dict.make())
+    let viewCustomization = if viewObj != Dict.make() {
+      Some({
+        challengeViewBackgroundColor: ?getOptionString(viewObj, "challengeViewBackgroundColor"),
+        progressViewBackgroundColor: ?getOptionString(viewObj, "progressViewBackgroundColor"),
+      })
+    } else {
+      None
+    }
+
+    let finalResult = {
+      ?labelCustomization,
+      ?textBoxCustomization,
+      ?toolbarCustomization,
+      buttonCustomization: buttonCustomizationArray,
+      ?viewCustomization,
+    }
+
+    Some(finalResult)
+  | None => None
+  }
+}
+
+let getChallengeCustomisationRecord = (netceteraChallengeUICustomizationDict, locale) => {
+  let locale = locale->Option.getOr("en")
+  let lightModeDict =
+    netceteraChallengeUICustomizationDict
+    ->Option.getOr(Dict.make())
+    ->Dict.get("lightModeCustomization")
+    ->Option.flatMap(JSON.Decode.object)
+
+  let darkModeDict =
+    netceteraChallengeUICustomizationDict
+    ->Option.getOr(Dict.make())
+    ->Dict.get("darkModeCustomization")
+    ->Option.flatMap(JSON.Decode.object)
+
+  let lightX = fun(lightModeDict)
+  let darkX = fun(darkModeDict)
+
+  {locale, lightMode: lightX, darkMode: darkX}
+}

src/types/SdkTypes.res

@@ -1,4 +1,5 @@
 open Utils
+open NetceteraCustomisationType
 
 type localeTypes =
   | En
@@ -250,6 +251,9 @@ type configurationType = {
   netceteraSDKApiKey: option<string>,
   displayDefaultSavedPaymentIcon: bool,
   enablePartialLoading: bool,
+  netceteraChallengeUICustomization: option<
+    NetceteraCustomisationType.netceteraChallengeUICustomizationType,
+  >,
 }
 
 type sdkState =
@@ -787,6 +791,10 @@ let getAppearanceObj = (
 let parseConfigurationDict = (configObj, from) => {
   let shippingDetailsDict =
     configObj->Dict.get("shippingDetails")->Option.flatMap(JSON.Decode.object)
+
+  let netceteraChallengeUICustomizationDict =
+    configObj->Dict.get("netceteraChallengeUICustomization")->Option.flatMap(JSON.Decode.object)
+
   let billingDetailsDict = getObj(configObj, "defaultBillingDetails", Dict.make())
 
   let _customerDict = configObj->Dict.get("customer")->Option.flatMap(JSON.Decode.object)
@@ -797,6 +805,7 @@ let parseConfigurationDict = (configObj, from) => {
     ->String.split(" ")
 
   let appearanceDict = configObj->Dict.get("appearance")->Option.flatMap(JSON.Decode.object)
+  let locale = getOptionString(appearanceDict->Option.getOr(Dict.make()), "locale")
   let appearance = {
     from == "rn" || from == "flutter" || WebKit.platform === #web
       ? switch appearanceDict {
@@ -857,6 +866,9 @@ let parseConfigurationDict = (configObj, from) => {
     savedPaymentScreenHeaderText: getOptionString(configObj, "savedPaymentSheetHeaderLabel"),
     displayDefaultSavedPaymentIcon: getBool(configObj, "displayDefaultSavedPaymentIcon", true),
     enablePartialLoading: getBool(configObj, "enablePartialLoading", false),
+    netceteraChallengeUICustomization: Some(
+      getChallengeCustomisationRecord(netceteraChallengeUICustomizationDict, locale),
+    ),
     // customer: switch customerDict {
     // | Some(obj) =>
     //   Some({