feat: add surcharge message display support (showShortSurchargeMessage)

src/components/common/Surcharge.res

@@ -0,0 +1,71 @@
+open ReactNative
+open Style
+
+@react.component
+let make = (~paymentMethodData: AccountPaymentMethodType.payment_method_type) => {
+  let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
+  let (accountPaymentMethodData, _, _) = React.useContext(AllApiDataContextNew.allApiDataContext)
+  let localeObject = GetLocale.useGetLocalObj()
+
+  let showShortSurchargeMessage = nativeProp.configuration.showShortSurchargeMessage
+  let currency =
+    accountPaymentMethodData->Option.map(data => data.currency)->Option.getOr("")
+  let paymentMethod = paymentMethodData.payment_method_str
+
+  let surchargeMessage = React.useMemo3(() => {
+    // First check payment_method_type level surcharge
+    switch paymentMethodData.surcharge_details {
+    | Some(surchargeDetails) =>
+      SurchargeUtils.getSurchargeMessage(
+        ~surchargeDetails,
+        ~paymentMethod,
+        ~currency,
+        ~showShortSurchargeMessage,
+        ~localeObject,
+      )
+    | None =>
+      // For cards, check card_networks level surcharge (pick the higher of credit/debit)
+      if paymentMethod === "card" {
+        let maxSurcharge =
+          paymentMethodData.card_networks->Array.reduce(None, (acc, network) => {
+            switch (acc, network.surcharge_details) {
+            | (None, Some(sd)) => Some(sd)
+            | (Some(existing), Some(sd)) =>
+              sd.displayTotalSurchargeAmount > existing.displayTotalSurchargeAmount
+                ? Some(sd)
+                : Some(existing)
+            | (existing, None) => existing
+            }
+          })
+        switch maxSurcharge {
+        | Some(surchargeDetails) =>
+          SurchargeUtils.getSurchargeMessage(
+            ~surchargeDetails,
+            ~paymentMethod,
+            ~currency,
+            ~showShortSurchargeMessage,
+            ~localeObject,
+          )
+        | None => None
+        }
+      } else {
+        None
+      }
+    }
+  }, (paymentMethodData, showShortSurchargeMessage, currency))
+
+  switch surchargeMessage {
+  | Some(message) =>
+    <View
+      style={s({
+        flexDirection: #row,
+        alignItems: #"flex-start",
+        marginTop: 8.->dp,
+        paddingHorizontal: 2.->dp,
+      })}>
+      <TextWrapper text="* " textType={ErrorText} />
+      <TextWrapper text=message textType={ModalTextLight} />
+    </View>
+  | None => React.null
+  }
+}

src/components/common/SurchargeUtils.res

@@ -0,0 +1,29 @@
+let getSurchargeMessage = (
+  ~surchargeDetails: AccountPaymentMethodType.surchargeDetails,
+  ~paymentMethod: string,
+  ~currency: string,
+  ~showShortSurchargeMessage: bool,
+  ~localeObject: LocaleDataType.localeStrings,
+) => {
+  let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Float.toString
+
+  if showShortSurchargeMessage {
+    Some(localeObject.shortSurchargeMessage ++ currency ++ " " ++ surchargeValue)
+  } else if paymentMethod === "card" {
+    Some(
+      localeObject.surchargeMsgAmountForCardPart1 ++
+      currency ++
+      " " ++
+      surchargeValue ++
+      localeObject.surchargeMsgAmountForCardPart2,
+    )
+  } else {
+    Some(
+      localeObject.surchargeMsgAmountPart1 ++
+      currency ++
+      " " ++
+      surchargeValue ++
+      localeObject.surchargeMsgAmountPart2,
+    )
+  }
+}

src/components/dynamic/TabElement.res

@@ -83,14 +83,17 @@ let make = (
     isNicknameValid,
   ))
 
-  <DynamicFields
-    fields=requiredFields
-    initialValues
-    setFormData
-    setIsFormValid
-    setFormMethods
-    isCardPayment
-    enabledCardSchemes
-    accessible
-  />
+  <>
+    <DynamicFields
+      fields=requiredFields
+      initialValues
+      setFormData
+      setIsFormValid
+      setFormMethods
+      isCardPayment
+      enabledCardSchemes
+      accessible
+    />
+    <Surcharge paymentMethodData />
+  </>
 }

src/contexts/DynamicFieldsContext.res

@@ -72,6 +72,7 @@ let dynamicFieldsContext = React.createContext({
       bank_names: [],
       payment_experience: [],
       required_fields: Dict.make(),
+      surcharge_details: None,
     },
     billingAddress: None,
     shippingAddress: None,
@@ -217,6 +218,7 @@ let make = (~children) => {
       bank_names: [],
       payment_experience: [],
       required_fields: Dict.make(),
+      surcharge_details: None,
     },
     billingAddress: None,
     shippingAddress: None,

src/hooks/S3ApiHook.res

@@ -287,6 +287,11 @@ let getLocaleStrings: Js.Json.t => localeStrings = data => {
         "surchargeMsgAmountForOneClickWallets",
         defaultLocale.surchargeMsgAmountForOneClickWallets,
       ),
+      shortSurchargeMessage: Utils.getString(
+        res,
+        "shortSurchargeMessage",
+        defaultLocale.shortSurchargeMessage,
+      ),
       on: Utils.getString(res, "on", defaultLocale.on),
       \"and": Utils.getString(res, "and", defaultLocale.\"and"),
       nameEmptyText: Utils.getString(res, "nameEmptyText", defaultLocale.nameEmptyText),

src/pages/payment/SavedPaymentMethod.res

@@ -70,6 +70,42 @@ module CVVComponent = {
     </>
   }
 }
+module SavedMethodSurcharge = {
+  @react.component
+  let make = (
+    ~surchargeDetails: AccountPaymentMethodType.surchargeDetails,
+    ~paymentMethod: string,
+  ) => {
+    let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
+    let (accountPaymentMethodData, _, _) = React.useContext(AllApiDataContextNew.allApiDataContext)
+    let localeObject = GetLocale.useGetLocalObj()
+
+    let currency =
+      accountPaymentMethodData->Option.map(data => data.currency)->Option.getOr("")
+
+    switch SurchargeUtils.getSurchargeMessage(
+      ~surchargeDetails,
+      ~paymentMethod,
+      ~currency,
+      ~showShortSurchargeMessage=nativeProp.configuration.showShortSurchargeMessage,
+      ~localeObject,
+    ) {
+    | Some(message) =>
+      <View
+        style={s({
+          flexDirection: #row,
+          alignItems: #"flex-start",
+          paddingHorizontal: 12.->dp,
+          marginTop: 4.->dp,
+        })}>
+        <TextWrapper text="* " textType={ErrorText} />
+        <TextWrapper text=message textType={ModalTextLight} />
+      </View>
+    | None => React.null
+    }
+  }
+}
+
 module PMWithNickNameComponent = {
   @react.component
   let make = (~savedPaymentMethod: CustomerPaymentMethodType.customer_payment_method_type) => {
@@ -217,6 +253,11 @@ module PaymentMethodListView = {
             ->Option.getOr("")}
           />
         : React.null}
+      {switch savedPaymentMethod.surcharge_details {
+      | Some(surchargeDetails) =>
+        <SavedMethodSurcharge surchargeDetails paymentMethod=savedPaymentMethod.payment_method_str />
+      | None => React.null
+      }}
     </CustomPressable>
   }
 }

src/types/AllApiDataTypes/AccountPaymentMethodType.res

@@ -2,9 +2,12 @@ open Utils
 
 type eligible_connectors = array<JSON.t>
 
+type surchargeDetails = {displayTotalSurchargeAmount: float}
+
 type card_networks = {
   card_network: string,
   eligible_connectors: eligible_connectors,
+  surcharge_details: option<surchargeDetails>,
 }
 
 type bank_names = {
@@ -27,6 +30,7 @@ type payment_method_type = {
   bank_names: array<bank_names>,
   payment_experience: array<payment_experience>,
   required_fields: Dict.t<JSON.t>,
+  surcharge_details: option<surchargeDetails>,
 }
 
 type payment_methods = array<payment_method_type>
@@ -61,6 +65,16 @@ let defaultAccountPaymentMethods = {
   show_surcharge_breakup_screen: false,
 }
 
+let parseSurchargeDetails = (dict: Js.Dict.t<JSON.t>) => {
+  dict
+  ->Dict.get("surcharge_details")
+  ->Option.flatMap(JSON.Decode.object)
+  ->Option.flatMap(sd => {
+    let amount = sd->getOptionFloat("display_total_surcharge_amount")->Option.getOr(0.0)
+    amount !== 0.0 ? Some({displayTotalSurchargeAmount: amount}) : None
+  })
+}
+
 let parseCardNetworks = (dict: Js.Dict.t<JSON.t>) => {
   dict
   ->getArray("card_networks")
@@ -69,6 +83,7 @@ let parseCardNetworks = (dict: Js.Dict.t<JSON.t>) => {
     {
       card_network: itemDict->getString("card_network", ""),
       eligible_connectors: itemDict->getArray("eligible_connectors"),
+      surcharge_details: parseSurchargeDetails(itemDict),
     }
   })
 }
@@ -116,6 +131,7 @@ let parsePaymentMethodType = (
     bank_names: parseBankNames(paymentMethodTypeDict),
     payment_experience: parsePaymentExperience(paymentMethodTypeDict),
     required_fields: paymentMethodTypeDict->getObj("required_fields", Dict.make()),
+    surcharge_details: parseSurchargeDetails(paymentMethodTypeDict),
   }
 }
 
@@ -138,6 +154,11 @@ let mergePaymentMethods = (existing: payment_method_type, new: payment_method_ty
     bank_names: existing.bank_names->Array.concat(new.bank_names),
     payment_experience: existing.payment_experience->Array.concat(new.payment_experience),
     required_fields: existing.required_fields->Dict.assign(new.required_fields),
+    surcharge_details: switch (existing.surcharge_details, new.surcharge_details) {
+    | (Some(_), _) => existing.surcharge_details
+    | (None, Some(_)) => new.surcharge_details
+    | (None, None) => None
+    },
   }
 }
 

src/types/AllApiDataTypes/CustomerPaymentMethodType.res

@@ -34,7 +34,7 @@ type customer_payment_method_type = {
   metadata: option<string>,
   created: string,
   bank: option<string>,
-  surcharge_details: option<string>,
+  surcharge_details: option<AccountPaymentMethodType.surchargeDetails>,
   requires_cvv: bool,
   last_used_at: string,
   default_payment_method_set: bool,
@@ -120,7 +120,7 @@ let processCustomerPaymentMethods = (jsonArray: array<JSON.t>) => {
       metadata: customerPaymentMethodDict->getOptionString("metadata"),
       created: getString(customerPaymentMethodDict, "created", ""),
       bank: customerPaymentMethodDict->getOptionString("bank"),
-      surcharge_details: customerPaymentMethodDict->getOptionString("surcharge_details"),
+      surcharge_details: AccountPaymentMethodType.parseSurchargeDetails(customerPaymentMethodDict),
       requires_cvv: customerPaymentMethodDict->getBool("requires_cvv", false),
       last_used_at: getString(customerPaymentMethodDict, "last_used_at", ""),
       default_payment_method_set: customerPaymentMethodDict->getBool(

src/types/SdkTypes.res

@@ -234,6 +234,7 @@ type configurationType = {
   enablePartialLoading: bool,
   displayMergedSavedMethods: bool,
   disableBranding: bool,
+  showShortSurchargeMessage: bool,
 }
 
 type sdkState =
@@ -836,6 +837,7 @@ let parseConfigurationDict = (configObj, from) => {
     },
     displayMergedSavedMethods: getBool(configObj, "displayMergedSavedMethods", false),
     disableBranding: getBool(configObj, "disableBranding", false),
+    showShortSurchargeMessage: getBool(configObj, "showShortSurchargeMessage", false),
   }
   configuration
 }