From dee4452098820f3279ed8490a8b0ab6385038431 Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <1805317@kiit.ac.in> Date: Mon, 11 Mar 2024 21:22:21 +0530 Subject: [PATCH] fix: theme object changes --- src/BrutalTheme.res | 15 ++++++------ src/CardTheme.res | 41 +++++++++++++++++++++++++++++++++ src/CharcoalTheme.res | 15 ++++++------ src/Components/PayNowButton.res | 31 ++++++++----------------- src/DefaultTheme.res | 15 ++++++------ src/LoaderController.res | 21 +---------------- src/MidnightTheme.res | 15 ++++++------ src/NoTheme.res | 10 ++++++-- src/SoftTheme.res | 15 ++++++------ src/Types/CardThemeType.res | 8 +++++++ src/Types/PaymentType.res | 25 -------------------- src/Types/ThemeImporter.res | 1 - src/Utilities/PaymentBody.res | 13 +++++++++++ 13 files changed, 121 insertions(+), 104 deletions(-) diff --git a/src/BrutalTheme.res b/src/BrutalTheme.res index 5ba3b8d0d..723960679 100644 --- 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 index 28c3d6dab..bc0e74bff 100644 --- 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 index 4c4ff7811..d42347b9f 100644 --- 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 index 4acff82bd..9b2dca7fc 100644 --- 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, (), )}> {if showLoader { diff --git a/src/DefaultTheme.res b/src/DefaultTheme.res index 58d5a0bc3..9077766f3 100644 --- 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 index cacac82ed..288e92f7d 100644 --- 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 index 2e5107ede..b46337934 100644 --- 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 index 007c33f2f..9f9df6f50 100644 --- 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 index 4d40423b8..95d4b028d 100644 --- 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 index 97505436f..ccaa1c050 100644 --- 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 index e9b3d81f9..28d5ff445 100644 --- 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 index 26360881a..10572cffd 100644 --- 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 diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res index b7a7b70e0..96232b321 100644 --- a/src/Utilities/PaymentBody.res +++ b/src/Utilities/PaymentBody.res @@ -91,6 +91,19 @@ let mandateBody = paymentType => { ] } +let confirmPayloadForSDKButton = (sdkHandleConfirmPayment: PaymentType.sdkHandleConfirmPayment) => + [ + ("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 achBankDebitBody = ( ~email, ~bank: ACHTypes.data,