fix(PayNowButton): pay now button styling APIs fixed

juspay · Mar 5, 2024 · f96f5f5 · f96f5f5
1 parent c0a0760
commit f96f5f5
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 63 deletions.
diff --git a/src/BrutalTheme.res b/src/BrutalTheme.res
@@ -38,8 +38,6 @@ let brutal = {
   colorIconCardError: "#ff1a1a",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
-  buttonBackgroundColor: "#f5fb1f",
-  buttonTextColor: "#000000",
 }
 let brutalRules = (theme: CardThemeType.themeClass) =>
   {
@@ -171,3 +169,10 @@ let brutalRules = (theme: CardThemeType.themeClass) =>
 
 let default = brutal
 let defaultRules = brutalRules
+
+let defaultButtonRules = {
+  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  backgroundColor: default.colorPrimary,
+  borderColor: default.borderColor,
+  textColor: default.colorBackgroundText,
+}
diff --git a/src/CardTheme.res b/src/CardTheme.res
@@ -244,13 +244,6 @@ let getVariables = (str, dict, default, logger) => {
         ~logger,
       ),
       spacingGridRow: getWarningString(json, "spacingGridRow", default.spacingGridRow, ~logger),
-      buttonBackgroundColor: getWarningString(
-        json,
-        "buttonBackgroundColor",
-        default.buttonBackgroundColor,
-        ~logger,
-      ),
-      buttonTextColor: getWarningString(json, "buttonTextColor", default.buttonTextColor, ~logger),
     }
   })
   ->Belt.Option.getWithDefault(default)

diff --git a/src/CharcoalTheme.res b/src/CharcoalTheme.res
@@ -38,8 +38,6 @@ let charcoal = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
-  buttonBackgroundColor: "#000000",
-  buttonTextColor: "#ffffff",
 }
 
 let charcoalRules = theme =>
@@ -171,3 +169,10 @@ let charcoalRules = theme =>
 
 let default = charcoal
 let defaultRules = charcoalRules
+
+let defaultButtonRules = {
+  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  backgroundColor: default.colorPrimary,
+  borderColor: default.colorPrimary,
+  textColor: default.colorBackgroundText,
+}
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
@@ -16,7 +16,7 @@ module Loader = {
 @react.component
 let make = () => {
   open RecoilAtoms
-  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let (isDisabled, setIsDisabled) = React.useState(() => false)
   let (showLoader, setShowLoader) = React.useState(() => false)
   let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
@@ -50,50 +50,27 @@ let make = () => {
     None
   }, [areRequiredFieldsValid])
 
-  <div className="flex flex-col gap-1 h-auto w-full">
+  <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
       disabled=isDisabled
       onClick=handleOnClick
-      className={`w-full flex flex-row justify-center items-center rounded-md`}
+      className={`w-full flex flex-row justify-center items-center`}
       style={ReactDOMStyle.make(
-        ~backgroundColor={
-          sdkHandleConfirmPaymentProps.buttonBackgroundColor->Js.String2.length > 0
-            ? sdkHandleConfirmPaymentProps.buttonBackgroundColor
-            : themeObj.buttonBackgroundColor
-        },
-        ~height={
-          sdkHandleConfirmPaymentProps.buttonHeight->Js.String2.length > 0
-            ? sdkHandleConfirmPaymentProps.buttonHeight
-            : "48px"
-        },
+        ~borderRadius=sdkHandleConfirmPaymentProps.borderRadius,
+        ~backgroundColor=sdkHandleConfirmPaymentProps.backgroundColor,
+        ~height=sdkHandleConfirmPaymentProps.buttonHeight,
         ~cursor={isDisabled ? "not-allowed" : "pointer"},
         ~opacity={isDisabled ? "0.6" : "1"},
-        ~borderWidth=sdkHandleConfirmPaymentProps.buttonWidth,
-        ~borderColor={
-          sdkHandleConfirmPaymentProps.borderColor->Js.String2.length > 0
-            ? sdkHandleConfirmPaymentProps.borderColor
-            : themeObj.colorPrimary
-        },
+        ~width=sdkHandleConfirmPaymentProps.buttonWidth,
+        ~borderColor=sdkHandleConfirmPaymentProps.borderColor,
         (),
       )}>
       <span
         id="button-text"
         style={ReactDOMStyle.make(
-          ~color={
-            sdkHandleConfirmPaymentProps.textColor->Js.String2.length > 0
-              ? sdkHandleConfirmPaymentProps.textColor
-              : themeObj.buttonTextColor
-          },
-          ~fontSize={
-            sdkHandleConfirmPaymentProps.textFontSize->Js.String2.length > 0
-              ? sdkHandleConfirmPaymentProps.textFontSize
-              : themeObj.fontSizeLg
-          },
-          ~fontWeight={
-            sdkHandleConfirmPaymentProps.textFontWeight->Js.String2.length > 0
-              ? sdkHandleConfirmPaymentProps.textFontWeight
-              : themeObj.fontWeightMedium
-          },
+          ~color=sdkHandleConfirmPaymentProps.textColor,
+          ~fontSize=sdkHandleConfirmPaymentProps.textFontSize,
+          ~fontWeight=sdkHandleConfirmPaymentProps.textFontWeight,
           (),
         )}>
         {if showLoader {

diff --git a/src/DefaultTheme.res b/src/DefaultTheme.res
@@ -38,8 +38,6 @@ let default = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
-  buttonBackgroundColor: "#006df9",
-  buttonTextColor: "#ffffff",
 }
 let defaultRules = theme =>
   {
@@ -183,3 +181,10 @@ let defaultRules = theme =>
 
 let default = default
 let defaultRules = defaultRules
+
+let defaultButtonRules = {
+  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  backgroundColor: default.colorPrimary,
+  borderColor: default.colorBackground,
+  textColor: default.colorBackground,
+}
diff --git a/src/LoaderController.res b/src/LoaderController.res
@@ -1,4 +1,6 @@
 open Utils
+external toJson: 'a => Js.Json.t = "%identity"
+
 @react.component
 let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
   open RecoilAtoms
@@ -90,7 +92,11 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
   let setConfigs = (dict, themeValues: ThemeImporter.themeDataModule) => {
     let paymentOptions = dict->getDictFromObj("paymentOptions")
     let optionsDict = dict->getDictFromObj("options")
-    let (default, defaultRules) = (themeValues.default, themeValues.defaultRules)
+    let (default, defaultRules, defaultButtonRules) = (
+      themeValues.default,
+      themeValues.defaultRules,
+      themeValues.defaultButtonRules,
+    )
     let config = CardTheme.itemToObjMapper(paymentOptions, default, defaultRules, logger)
 
     let localeString = Utils.getWarningString(optionsDict, "locale", "", ~logger)
@@ -105,6 +111,20 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
     let appearance =
       optionsAppearance == CardTheme.defaultAppearance ? config.appearance : optionsAppearance
 
+    let sdkHandleConfirmPaymentProps = mergeJsons(
+      defaultButtonRules->toJson,
+      optionsDict
+      ->Js.Dict.get("sdkHandleConfirmPaymentProps")
+      ->Belt.Option.getWithDefault(Js.Json.null),
+    )
+
+    setOptionsPayment(.prev => {
+      ...prev,
+      sdkHandleConfirmPaymentProps: sdkHandleConfirmPaymentProps
+      ->Utils.getDictFromJson
+      ->PaymentType.getSdkHandleConfirmPaymentProps,
+    })
+
     setConfig(._ => {
       config: {
         appearance,
@@ -261,6 +281,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
                   dict->setConfigs({
                     default: DefaultTheme.default,
                     defaultRules: DefaultTheme.defaultRules,
+                    defaultButtonRules: DefaultTheme.defaultButtonRules,
                   })
                 }
               }
@@ -300,6 +321,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
               dict->setConfigs({
                 default: DefaultTheme.default,
                 defaultRules: DefaultTheme.defaultRules,
+                defaultButtonRules: DefaultTheme.defaultButtonRules,
               })
             }
           }
@@ -335,6 +357,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
             dict->setConfigs({
               default: DefaultTheme.default,
               defaultRules: DefaultTheme.defaultRules,
+              defaultButtonRules: DefaultTheme.defaultButtonRules,
             })
           }
         }

diff --git a/src/MidnightTheme.res b/src/MidnightTheme.res
@@ -38,8 +38,6 @@ let midnight = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
-  buttonBackgroundColor: "#85d996",
-  buttonTextColor: "#000000",
 }
 
 let midnightRules = theme =>
@@ -192,3 +190,10 @@ let midnightRules = theme =>
 
 let default = midnight
 let defaultRules = midnightRules
+
+let defaultButtonRules = {
+  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  backgroundColor: default.colorPrimary,
+  borderColor: default.colorPrimary,
+  textColor: default.colorPrimaryText,
+}
diff --git a/src/NoTheme.res b/src/NoTheme.res
@@ -39,11 +39,11 @@ let nakedValues = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
-  buttonBackgroundColor: "",
-  buttonTextColor: "",
 }
 
 let nakedValuesRules = _ => Js.Dict.empty()->Js.Json.object_
 
 let default = nakedValues
 let defaultRules = nakedValuesRules
+
+let defaultButtonRules = PaymentType.defaultValueSdkHandleConfirmPaymentProps
diff --git a/src/SoftTheme.res b/src/SoftTheme.res
@@ -39,8 +39,6 @@ let soft = {
   colorIconCardError: "#fe87a1",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
-  buttonBackgroundColor: "transparent",
-  buttonTextColor: "#7d8fff",
 }
 
 let softRules = theme =>
@@ -178,3 +176,10 @@ let softRules = theme =>
 
 let default = soft
 let defaultRules = softRules
+
+let defaultButtonRules = {
+  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  backgroundColor: default.colorBackground,
+  borderColor: default.colorPrimary,
+  textColor: default.colorPrimary,
+}
diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res
@@ -51,8 +51,6 @@ type themeClass = {
   colorIconCardError: string,
   spacingGridColumn: string,
   spacingGridRow: string,
-  buttonBackgroundColor: string,
-  buttonTextColor: string,
 }
 type appearance = {
   theme: theme,

diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
@@ -132,7 +132,7 @@ type billingAddress = {
 
 type sdkHandleConfirmPaymentProps = {
   buttonText: string,
-  buttonBackgroundColor: string,
+  backgroundColor: string,
   buttonHeight: string,
   buttonWidth: string,
   borderRadius: string,
@@ -263,14 +263,14 @@ let defaultBillingAddress = {
 
 let defaultValueSdkHandleConfirmPaymentProps = {
   buttonText: "Pay Now",
-  buttonBackgroundColor: "",
-  buttonHeight: "",
+  backgroundColor: "",
+  buttonHeight: "48px",
   buttonWidth: "thin",
-  borderRadius: "",
+  borderRadius: "6px",
   borderColor: "",
   textColor: "",
-  textFontSize: "",
-  textFontWeight: "",
+  textFontSize: "16px",
+  textFontWeight: "500",
   confirmParams: ConfirmType.defaultConfirm,
 }
 
@@ -900,7 +900,7 @@ let getConfirmParams = dict => {
 
 let getSdkHandleConfirmPaymentProps = dict => {
   buttonText: dict->getString("buttonText", "Pay Now"),
-  buttonBackgroundColor: dict->getString("buttonBackgroundColor", ""),
+  backgroundColor: dict->getString("backgroundColor", ""),
   buttonHeight: dict->getString("buttonHeight", ""),
   buttonWidth: dict->getString("buttonWidth", "thin"),
   borderRadius: dict->getString("borderRadius", ""),

diff --git a/src/Types/ThemeImporter.res b/src/Types/ThemeImporter.res
@@ -1,6 +1,7 @@
 type themeDataModule = {
   default: CardThemeType.themeClass,
   defaultRules: CardThemeType.themeClass => Js.Json.t,
+  defaultButtonRules: PaymentType.sdkHandleConfirmPaymentProps,
 }
 open Promise