fix: theme object changes

juspay · Mar 11, 2024 · dee4452 · dee4452
1 parent 22c0cc4
commit dee4452
Show file tree

Hide file tree

Showing 13 changed files with 121 additions and 104 deletions.
diff --git a/src/BrutalTheme.res b/src/BrutalTheme.res
@@ -38,6 +38,14 @@ let brutal = {
   colorIconCardError: "#ff1a1a",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#f5fb1f",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#566186",
+  buttonTextColor: "#000000",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 let brutalRules = (theme: CardThemeType.themeClass) =>
   {
@@ -169,10 +177,3 @@ let brutalRules = (theme: CardThemeType.themeClass) =>
 
 let default = brutal
 let defaultRules = brutalRules
-
-let defaultButtonRules = {
-  ...PaymentType.defaultSdkHandleConfirmPayment,
-  backgroundColor: default.colorPrimary,
-  borderColor: default.borderColor,
-  textColor: default.colorBackgroundText,
-}
diff --git a/src/CardTheme.res b/src/CardTheme.res
@@ -128,6 +128,14 @@ let getVariables = (str, dict, default, logger) => {
       "spacingGridColumn",
       "spacingGridRow",
       "spacingAccordionItem",
+      "buttonBackgroundColor",
+      "buttonHeight",
+      "buttonWidth",
+      "buttonBorderRadius",
+      "buttonBorderColor",
+      "buttonTextColor",
+      "buttonTextFontSize",
+      "buttonTextFontWeight",
     ]
     unknownKeysWarning(validKeys, json, "appearance.variables", ~logger)
     {
@@ -244,6 +252,39 @@ let getVariables = (str, dict, default, logger) => {
         ~logger,
       ),
       spacingGridRow: getWarningString(json, "spacingGridRow", default.spacingGridRow, ~logger),
+      buttonBackgroundColor: getWarningString(
+        json,
+        "buttonBackgroundColor",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonHeight: getWarningString(json, "buttonHeight", default.spacingGridRow, ~logger),
+      buttonWidth: getWarningString(json, "buttonWidth", default.spacingGridRow, ~logger),
+      buttonBorderRadius: getWarningString(
+        json,
+        "buttonBorderRadius",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonBorderColor: getWarningString(
+        json,
+        "buttonBorderColor",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonTextColor: getWarningString(json, "buttonTextColor", default.spacingGridRow, ~logger),
+      buttonTextFontSize: getWarningString(
+        json,
+        "buttonTextFontSize",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonTextFontWeight: getWarningString(
+        json,
+        "buttonTextFontWeight",
+        default.spacingGridRow,
+        ~logger,
+      ),
     }
   })
   ->Belt.Option.getWithDefault(default)

diff --git a/src/CharcoalTheme.res b/src/CharcoalTheme.res
@@ -38,6 +38,14 @@ let charcoal = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#000000",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#000000",
+  buttonTextColor: "#ffffff",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 
 let charcoalRules = theme =>
@@ -169,10 +177,3 @@ let charcoalRules = theme =>
 
 let default = charcoal
 let defaultRules = charcoalRules
-
-let defaultButtonRules = {
-  ...PaymentType.defaultSdkHandleConfirmPayment,
-  backgroundColor: default.colorPrimary,
-  borderColor: default.colorPrimary,
-  textColor: default.colorBackgroundText,
-}
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
@@ -21,7 +21,7 @@ let make = (
   ~selectedOption: PaymentModeType.payment,
 ) => {
   open RecoilAtoms
-  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let (isDisabled, setIsDisabled) = React.useState(() => false)
   let (showLoader, setShowLoader) = React.useState(() => false)
   let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
@@ -42,18 +42,7 @@ let make = (
       ? sdkHandleConfirmPayment.buttonText
       : localeString.payNowButton
 
-  let confirmPayload =
-    [
-      ("redirect", "always"->JSON.Encode.string),
-      (
-        "confirmParams",
-        [("return_url", sdkHandleConfirmPayment.confirmParams.return_url->JSON.Encode.string)]
-        ->Dict.fromArray
-        ->JSON.Encode.object,
-      ),
-    ]
-    ->Dict.fromArray
-    ->JSON.Encode.object
+  let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
 
   let handleOnClick = _ => {
     setIsDisabled(_ => true)
@@ -75,21 +64,21 @@ let make = (
       onClick=handleOnClick
       className={`w-full flex flex-row justify-center items-center`}
       style={ReactDOMStyle.make(
-        ~borderRadius=sdkHandleConfirmPayment.borderRadius,
-        ~backgroundColor=sdkHandleConfirmPayment.backgroundColor,
-        ~height=sdkHandleConfirmPayment.buttonHeight,
+        ~borderRadius=themeObj.buttonBorderRadius,
+        ~backgroundColor=themeObj.buttonBackgroundColor,
+        ~height=themeObj.buttonHeight,
         ~cursor={isDisabled ? "not-allowed" : "pointer"},
         ~opacity={isDisabled ? "0.6" : "1"},
-        ~width=sdkHandleConfirmPayment.buttonWidth,
-        ~borderColor=sdkHandleConfirmPayment.borderColor,
+        ~width=themeObj.buttonWidth,
+        ~borderColor=themeObj.buttonBorderColor,
         (),
       )}>
       <span
         id="button-text"
         style={ReactDOMStyle.make(
-          ~color=sdkHandleConfirmPayment.textColor,
-          ~fontSize=sdkHandleConfirmPayment.textFontSize,
-          ~fontWeight=sdkHandleConfirmPayment.textFontWeight,
+          ~color=themeObj.buttonTextColor,
+          ~fontSize=themeObj.buttonTextFontSize,
+          ~fontWeight=themeObj.buttonTextFontWeight,
           (),
         )}>
         {if showLoader {

diff --git a/src/DefaultTheme.res b/src/DefaultTheme.res
@@ -38,6 +38,14 @@ let default = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#006df9",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#ffffff",
+  buttonTextColor: "#ffffff",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 let defaultRules = theme =>
   {
@@ -181,10 +189,3 @@ let defaultRules = theme =>
 
 let default = default
 let defaultRules = defaultRules
-
-let defaultButtonRules = {
-  ...PaymentType.defaultSdkHandleConfirmPayment,
-  backgroundColor: default.colorPrimary,
-  borderColor: default.colorBackground,
-  textColor: default.colorBackground,
-}
diff --git a/src/LoaderController.res b/src/LoaderController.res
@@ -92,11 +92,7 @@ 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, defaultButtonRules) = (
-      themeValues.default,
-      themeValues.defaultRules,
-      themeValues.defaultButtonRules,
-    )
+    let (default, defaultRules) = (themeValues.default, themeValues.defaultRules)
     let config = CardTheme.itemToObjMapper(paymentOptions, default, defaultRules, logger)
 
     let localeString = Utils.getWarningString(optionsDict, "locale", "", ~logger)
@@ -111,18 +107,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
     let appearance =
       optionsAppearance == CardTheme.defaultAppearance ? config.appearance : optionsAppearance
 
-    let sdkHandleConfirmPayment = mergeJsons(
-      defaultButtonRules->toJson,
-      optionsDict->Dict.get("sdkHandleConfirmPayment")->Option.getOr(JSON.Encode.null),
-    )
-
-    setOptionsPayment(.prev => {
-      ...prev,
-      sdkHandleConfirmPayment: sdkHandleConfirmPayment
-      ->Utils.getDictFromJson
-      ->PaymentType.getSdkHandleConfirmPaymentProps,
-    })
-
     setConfig(._ => {
       config: {
         appearance,
@@ -279,7 +263,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
                   dict->setConfigs({
                     default: DefaultTheme.default,
                     defaultRules: DefaultTheme.defaultRules,
-                    defaultButtonRules: DefaultTheme.defaultButtonRules,
                   })
                 }
               }
@@ -318,7 +301,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
               dict->setConfigs({
                 default: DefaultTheme.default,
                 defaultRules: DefaultTheme.defaultRules,
-                defaultButtonRules: DefaultTheme.defaultButtonRules,
               })
             }
           }
@@ -354,7 +336,6 @@ 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,6 +38,14 @@ let midnight = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#85d996",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#85d996",
+  buttonTextColor: "#000000",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 
 let midnightRules = theme =>
@@ -190,10 +198,3 @@ let midnightRules = theme =>
 
 let default = midnight
 let defaultRules = midnightRules
-
-let defaultButtonRules = {
-  ...PaymentType.defaultSdkHandleConfirmPayment,
-  backgroundColor: default.colorPrimary,
-  borderColor: default.colorPrimary,
-  textColor: default.colorPrimaryText,
-}
diff --git a/src/NoTheme.res b/src/NoTheme.res
@@ -39,11 +39,17 @@ let nakedValues = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "",
+  buttonTextColor: "",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 
 let nakedValuesRules = _ => Js.Dict.empty()->Js.Json.object_
 
 let default = nakedValues
 let defaultRules = nakedValuesRules
-
-let defaultButtonRules = PaymentType.defaultSdkHandleConfirmPayment
diff --git a/src/SoftTheme.res b/src/SoftTheme.res
@@ -39,6 +39,14 @@ let soft = {
   colorIconCardError: "#fe87a1",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#3c3d3e",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#7d8fff",
+  buttonTextColor: "#7d8fff",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 
 let softRules = theme =>
@@ -176,10 +184,3 @@ let softRules = theme =>
 
 let default = soft
 let defaultRules = softRules
-
-let defaultButtonRules = {
-  ...PaymentType.defaultSdkHandleConfirmPayment,
-  backgroundColor: default.colorBackground,
-  borderColor: default.colorPrimary,
-  textColor: default.colorPrimary,
-}
diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res
@@ -51,6 +51,14 @@ type themeClass = {
   colorIconCardError: string,
   spacingGridColumn: string,
   spacingGridRow: string,
+  buttonBackgroundColor: string,
+  buttonHeight: string,
+  buttonWidth: string,
+  buttonBorderRadius: string,
+  buttonBorderColor: string,
+  buttonTextColor: string,
+  buttonTextFontSize: string,
+  buttonTextFontWeight: string,
 }
 type appearance = {
   theme: theme,

diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
@@ -133,14 +133,6 @@ type billingAddress = {
 type sdkHandleConfirmPayment = {
   handleConfirm: bool,
   buttonText: string,
-  backgroundColor: string,
-  buttonHeight: string,
-  buttonWidth: string,
-  borderRadius: string,
-  borderColor: string,
-  textColor: string,
-  textFontSize: string,
-  textFontWeight: string,
   confirmParams: ConfirmType.confirmParams,
 }
 
@@ -264,14 +256,6 @@ let defaultBillingAddress = {
 let defaultSdkHandleConfirmPayment = {
   handleConfirm: false,
   buttonText: "Pay Now",
-  backgroundColor: "",
-  buttonHeight: "48px",
-  buttonWidth: "thin",
-  borderRadius: "6px",
-  borderColor: "",
-  textColor: "",
-  textFontSize: "16px",
-  textFontWeight: "500",
   confirmParams: ConfirmType.defaultConfirm,
 }
 
@@ -901,14 +885,6 @@ let getConfirmParams = dict => {
 let getSdkHandleConfirmPaymentProps = dict => {
   handleConfirm: dict->getBool("handleConfirm", false),
   buttonText: dict->getString("buttonText", "Pay Now"),
-  backgroundColor: dict->getString("backgroundColor", ""),
-  buttonHeight: dict->getString("buttonHeight", ""),
-  buttonWidth: dict->getString("buttonWidth", "thin"),
-  borderRadius: dict->getString("borderRadius", ""),
-  borderColor: dict->getString("borderColor", ""),
-  textColor: dict->getString("textColor", ""),
-  textFontSize: dict->getString("textFontSize", ""),
-  textFontWeight: dict->getString("textFontWeight", ""),
   confirmParams: dict->getDictfromDict("confirmParams")->getConfirmParams,
 }
 
@@ -953,7 +929,6 @@ let itemToObjMapper = (dict, logger) => {
     payButtonStyle: getStyle(dict, "payButtonStyle", logger),
     showCardFormByDefault: getBool(dict, "showCardFormByDefault", true),
     billingAddress: getBillingAddress(dict, "billingAddress", logger),
-    // sdkHandleConfirmPayment: getBool(dict, "sdkHandleConfirmPayment", false),
     sdkHandleConfirmPayment: dict
     ->getDictfromDict("sdkHandleConfirmPayment")
     ->getSdkHandleConfirmPaymentProps,

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