chore: refactor theme (#912)

juspay · Jul 3, 2024 · f757d00 · f757d00
1 parent 8ca1fe4
commit f757d00
Show file tree

Hide file tree

Showing 71 changed files with 142 additions and 152 deletions.
diff --git a/src/components/Button.res b/src/components/Button.res
@@ -48,7 +48,7 @@ let useGetBgColor = (
   ~isPhoneDropdown=false,
   (),
 ) => {
-  let config = React.useContext(ConfigContext.configContext)
+  let config = React.useContext(ThemeProvider.themeContext)
   let buttonConfig = config.globalUIConfig.button.backgroundColor
   switch buttonType {
   | Primary =>
@@ -193,7 +193,7 @@ let useGetTextColor = (
   ~isPhoneDropdown=false,
   (),
 ) => {
-  let config = React.useContext(ConfigContext.configContext)
+  let config = React.useContext(ThemeProvider.themeContext)
   let textConfig = config.globalUIConfig.button.textColor
   switch buttonType {
   | Primary =>

diff --git a/src/components/ButtonGroupIp.res b/src/components/ButtonGroupIp.res
@@ -8,7 +8,7 @@ let make = (
   ~isSeparate=false,
   ~buttonSize=?,
 ) => {
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let onChange = str => input.onChange(str->Identity.stringToFormReactEvent)
   let buttonState = {isDisabled ? Button.Disabled : Button.Normal}
 

diff --git a/src/components/Calendar.res b/src/components/Calendar.res
@@ -50,7 +50,7 @@ module TableRow = {
     ~allowedDateRange: option<dateObj>=?,
   ) => {
     open LogicUtils
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     let customTimezoneToISOString = TimeZoneHook.useCustomTimeZoneToIsoString()
     let highlight = cellHighlighter
 

diff --git a/src/components/CustomCharts/FunnelChart.res b/src/components/CustomCharts/FunnelChart.res
@@ -8,7 +8,7 @@ let make = (
   ~moduleName,
   ~description,
 ) => {
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let isMobileView = MatchMedia.useMobileChecker()
   let (size, widthClass, flexDirectionClass) = React.useMemo1(() => {
     isMobileView ? (0.16, "w-full", "flex-col") : (size, "w-1/2", "flex-row")

diff --git a/src/components/CustomCharts/HighchartBarChart.res b/src/components/CustomCharts/HighchartBarChart.res
@@ -13,7 +13,7 @@ module HighBarChart1D = {
     ~isHrizonatalBar: bool=true,
     ~selectedMetrics: LineChartUtils.metricsConfig,
   ) => {
-    let (theme, _setTheme) = React.useContext(ThemeProvider.themeContext)
+    let {theme} = React.useContext(ThemeProvider.themeContext)
     let gridLineColor = switch theme {
     | Light => "#2e2f39"
     | Dark => "#e6e6e6"

diff --git a/src/components/CustomCharts/HighchartHorizontalBarChart.res b/src/components/CustomCharts/HighchartHorizontalBarChart.res
@@ -64,7 +64,7 @@ let make = (
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
 ) => {
-  let (theme, _setTheme) = React.useContext(ThemeProvider.themeContext)
+  let {theme} = React.useContext(ThemeProvider.themeContext)
 
   let barChartData = React.useMemo3(() => {
     LineChartUtils.chartDataMaker(

diff --git a/src/components/CustomCharts/HighchartPieChart.res b/src/components/CustomCharts/HighchartPieChart.res
@@ -31,7 +31,7 @@ let make = (
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
 ) => {
-  let (theme, _setTheme) = React.useContext(ThemeProvider.themeContext)
+  let {theme} = React.useContext(ThemeProvider.themeContext)
   let pieSeriesData = React.useMemo3(() => {
     LineChartUtils.chartDataMaker(
       ~filterNull=true,

diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -60,7 +60,7 @@ module LineChart1D = {
     ~comparitionWidget=false,
     ~selectedTab: option<array<string>>=?,
   ) => {
-    let (theme, _setTheme) = React.useContext(ThemeProvider.themeContext)
+    let {theme} = React.useContext(ThemeProvider.themeContext)
     let (_, setLegendState) = React.useState(_ => [])
     let isMobileView = MatchMedia.useMobileChecker()
     let (hideLegend, setHideLegend) = React.useState(_ => isMobileView)

diff --git a/src/components/DynamicFilter.res b/src/components/DynamicFilter.res
@@ -165,7 +165,7 @@ let make = (
   ~refreshFilters=true,
 ) => {
   open LogicUtils
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let localFilters = initialFilters->Array.filter(item => item.localFilter->Option.isSome)
   let remoteOptions = options->Array.filter(item => item.localFilter->Option.isNone)
   let defaultFilters = ""->JSON.Encode.string

diff --git a/src/components/FilterSelectBox.res b/src/components/FilterSelectBox.res
@@ -62,7 +62,7 @@ module ListItem = {
     ~textEllipsisForDropDownOptions=false,
     ~textColorClass="",
   ) => {
-    let {globalUIConfig: {font}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font}} = React.useContext(ThemeProvider.themeContext)
     let labelText = switch labelValue->String.length {
     | 0 => text
     | _ => labelValue
@@ -461,7 +461,7 @@ module BaseSelect = {
     ~preservedAppliedOptions=[],
   ) => {
     let customSearchStyle = "bg-white p-2 border-b-2"
-    let {globalUIConfig: {font}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font}} = React.useContext(ThemeProvider.themeContext)
     let (searchString, setSearchString) = React.useState(() => "")
     let maxHeight = if maxHeight->String.includes("72") {
       "md:max-h-66.5"

diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
@@ -18,7 +18,7 @@ let make = (
   ~isHomePage=false,
 ) => {
   open Identity
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let (updateKey, setUpdateKey) = React.useState(_ => false)
 
   let sortedData = React.useMemo1(() => {

diff --git a/src/components/HeadlessUISelectBox.res b/src/components/HeadlessUISelectBox.res
@@ -25,7 +25,7 @@ let make = (
   ~textClass="text-sm",
   ~closeListOnClick=false,
 ) => {
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let dropdownPositionClass = switch dropdownPosition {
   | Left => "right-0"
   | _ => "left-0"

diff --git a/src/components/MakeRuleFieldComponent.res b/src/components/MakeRuleFieldComponent.res
@@ -42,7 +42,7 @@ module CompressedView = {
   @react.component
   let make = (~id, ~isFirst) => {
     open LogicUtils
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     let conditionInput = ReactFinalForm.useField(id).input
 
     let displayForValue = value =>

diff --git a/src/components/NewCalendarTimeInput.res b/src/components/NewCalendarTimeInput.res
@@ -89,7 +89,7 @@ let make = (
   ~startTimeStr,
   ~endTimeStr,
 ) => {
-  let {globalUIConfig: {border: {borderColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {border: {borderColor}}} = React.useContext(ThemeProvider.themeContext)
   let todayDateTime = DayJs.getDayJs()
   let time = todayDateTime.format("hh:mm:ss a")
 

diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
@@ -62,7 +62,7 @@ module ListItem = {
     ~textEllipsisForDropDownOptions=false,
     ~textColorClass="",
   ) => {
-    let {globalUIConfig: {font}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font}} = React.useContext(ThemeProvider.themeContext)
     let labelText = switch labelValue->String.length {
     | 0 => text
     | _ => labelValue
@@ -461,7 +461,7 @@ module BaseSelect = {
     ~wrapBasis="",
     ~preservedAppliedOptions=[],
   ) => {
-    let {globalUIConfig: {font}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font}} = React.useContext(ThemeProvider.themeContext)
     let (searchString, setSearchString) = React.useState(() => "")
     let maxHeight = if maxHeight->String.includes("72") {
       "md:max-h-66.5"

diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
@@ -231,7 +231,7 @@ module LabelCell = {
     ~fontStyle="font-ibm-plex",
     ~showIcon=true,
   ) => {
-    let {globalUIConfig: {backgroundColor}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {backgroundColor}} = React.useContext(ThemeProvider.themeContext)
     let isMobileView = MatchMedia.useMobileChecker()
     let bgOpacity = isMobileView ? "bg-opacity-12 dark:!bg-opacity-12" : ""
     let borderColor = switch labelColor {
@@ -429,7 +429,7 @@ module MoneyCell = {
 module LinkCell = {
   @react.component
   let make = (~data, ~trimLength=?) => {
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     let (showCopy, setShowCopy) = React.useState(() => false)
     let isMobileView = MatchMedia.useMobileChecker()
 
@@ -579,7 +579,7 @@ module EllipsisText = {
 module TrimmedText = {
   @react.component
   let make = (~text, ~width, ~highlightText="", ~hideShowMore=false) => {
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     let (show, setshow) = React.useState(_ => true)
     let breakWords = hideShowMore ? "" : "whitespace-nowrap text-ellipsis overflow-x-hidden"
     if text->String.length > 40 {

diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
@@ -39,7 +39,7 @@ let make = (
   ~removeValidationCheck=false,
 ) => {
   let {globalUIConfig: {shadow: {shadowColor}, border: {borderColor}}} = React.useContext(
-    ConfigContext.configContext,
+    ThemeProvider.themeContext,
   )
   let showPopUp = PopUpState.useShowPopUp()
   let isInValid = try {

diff --git a/src/components/priority-logics/AddPLGateway.res b/src/components/priority-logics/AddPLGateway.res
@@ -3,7 +3,7 @@ type gateway = AdvancedRoutingTypes.volumeSplitConnectorSelectionData
 module GatewayView = {
   @react.component
   let make = (~gateways: array<gateway>) => {
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     <div className="flex flex-wrap gap-4 items-center">
       {gateways
       ->Array.mapWithIndex((ruleGateway, index) => {

diff --git a/src/context/ConfigContext.res b/src/context/ConfigContext.res
diff --git a/src/context/ThemeProvider.res b/src/context/ThemeProvider.res
@@ -2,18 +2,43 @@ type theme = Light | Dark
 
 let defaultSetter = (_: theme) => ()
 
-let themeContext = React.createContext((Light, defaultSetter))
-
 type themeType = LightTheme
 
 type x = {theme: string}
 
+type customStyle = {
+  primaryColor: string,
+  primaryHover: string,
+  sidebar: string,
+}
+
+type customUIConfig = {
+  globalUIConfig: UIConfig.t,
+  theme: theme,
+  themeSetter: theme => unit,
+  configCustomDomainTheme: JSON.t => unit,
+}
+
+let defaultGlobalConfig: customStyle = {
+  primaryColor: "#006DF9",
+  primaryHover: "#005ED6",
+  sidebar: "#242F48",
+}
+
+let themeContext = {
+  globalUIConfig: UIConfig.defaultUIConfig,
+  theme: Light,
+  themeSetter: defaultSetter,
+  configCustomDomainTheme: (_: JSON.t) => (),
+}
+
+let themeContext = React.createContext(themeContext)
+
 module Parent = {
   let make = React.Context.provider(themeContext)
 }
-
 let useTheme = () => {
-  let (theme, _) = React.useContext(themeContext)
+  let {theme} = React.useContext(themeContext)
   theme
 }
 
@@ -50,9 +75,25 @@ let make = (~children) => {
   | Dark => "dark"
   | Light => ""
   }
+  let configCustomDomainTheme = React.useCallback0((uiConfg: JSON.t) => {
+    open LogicUtils
+    let dict = uiConfg->getDictFromJsonObject->getDictfromDict("theme")
+    let {primaryColor, primaryHover, sidebar} = defaultGlobalConfig
+    let value: HyperSwitchConfigTypes.customStyle = {
+      primaryColor: dict->getString("primary_color", primaryColor),
+      primaryHover: dict->getString("primary_hover_color", primaryHover),
+      sidebar: dict->getString("sidebar_color", sidebar),
+    }
+    Window.appendStyle(value)
+  })
 
   let value = React.useMemo2(() => {
-    (theme, setTheme)
+    {
+      globalUIConfig: UIConfig.defaultUIConfig,
+      theme,
+      themeSetter: setTheme,
+      configCustomDomainTheme,
+    }
   }, (theme, setTheme))
 
   React.useEffect1(() => {

diff --git a/src/entryPoints/AuthModule/AuthModuleHooks.res b/src/entryPoints/AuthModule/AuthModuleHooks.res
@@ -133,7 +133,7 @@ let useAuthMethods = (): authMethodProps => {
 let useNote = (authType, setAuthType, ()) => {
   open UIUtils
   open CommonAuthTypes
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let authId = HyperSwitchEntryUtils.getSessionData(~key="auth_id", ())
 
   let {isMagicLinkEnabled, isPasswordEnabled} = useAuthMethods()

diff --git a/src/entryPoints/AuthModule/Common/CommonAuth.res b/src/entryPoints/AuthModule/Common/CommonAuth.res
@@ -39,7 +39,7 @@ module Header = {
   @react.component
   let make = (~authType, ~setAuthType, ~email) => {
     open CommonAuthTypes
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     let {isSignUpAllowed} = AuthModuleHooks.useAuthMethods()
     let form = ReactFinalForm.useForm()
     let {email: isMagicLinkEnabled} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom

diff --git a/src/entryPoints/AuthModule/Common/CommonAuthForm.res b/src/entryPoints/AuthModule/Common/CommonAuthForm.res
@@ -4,7 +4,7 @@ module EmailPasswordForm = {
   @react.component
   let make = (~setAuthType) => {
     open CommonInputFields
-    let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+    let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
     let {email} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
 
     <div className="flex flex-col gap-3">

diff --git a/src/entryPoints/AuthModule/Common/CommonAuthHooks.res b/src/entryPoints/AuthModule/Common/CommonAuthHooks.res
@@ -1,7 +1,7 @@
 let useNote = (authType, setAuthType, isMagicLinkEnabled) => {
   open UIUtils
   open CommonAuthTypes
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let authId = HyperSwitchEntryUtils.getSessionData(~key="auth_id", ())
   let getFooterLinkComponent = (~btnText, ~authType, ~path) => {
     <div

diff --git a/src/entryPoints/AuthModule/Common/ResendBtn.res b/src/entryPoints/AuthModule/Common/ResendBtn.res
@@ -1,6 +1,6 @@
 @react.component
 let make = (~callBackFun) => {
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ConfigContext.configContext)
+  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let (seconds, setSeconds) = React.useState(_ => 30)
 
   let isDisabled = seconds > 0

diff --git a/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res b/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res
@@ -18,6 +18,8 @@ let make = (~setAuthStatus, ~authType, ~setAuthType) => {
   let (email, setEmail) = React.useState(_ => "")
   let featureFlagValues = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
   let authId = HyperSwitchEntryUtils.getSessionData(~key="auth_id", ())
+  let domain = HyperSwitchEntryUtils.getSessionData(~key="domain", ())
+
   let {
     isMagicLinkEnabled,
     isSignUpAllowed,
@@ -38,14 +40,14 @@ let make = (~setAuthStatus, ~authType, ~setAuthType) => {
     | _ => "Register failed, Try again"
     }
   }
-
+  Js.log2(domain, "domain")
   let getUserWithEmail = async body => {
     try {
       let url = getURL(
         ~entityName=USERS,
         ~userType=#CONNECT_ACCOUNT,
         ~methodType=Post,
-        ~queryParamerters=Some(`auth_id=${authId}`),
+        ~queryParamerters=Some(`auth_id=${authId}&domain=${domain}`),
         (),
       )
       let res = await updateDetails(url, body, Post, ())

diff --git a/src/entryPoints/EntryPointUtils.res b/src/entryPoints/EntryPointUtils.res
@@ -18,9 +18,7 @@ module ContextWrapper = {
                     <TokenContextProvider>
                       <UserTimeZoneProvider>
                         <SidebarProvider>
-                          <ModalContainer>
-                            <ConfigContext> children </ConfigContext>
-                          </ModalContainer>
+                          <ModalContainer> children </ModalContainer>
                         </SidebarProvider>
                       </UserTimeZoneProvider>
                     </TokenContextProvider>