Rename to ThemeProvider

apps/myaccount/src/app.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2019-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -21,6 +21,7 @@ import { Mode } from "@mui/system/cssVars/useCurrentColorScheme";
 import { CommonHelpers, isPortalAccessGranted } from "@wso2is/core/helpers";
 import { RouteInterface, StorageIdentityAppsSettingsInterface, emptyIdentityAppsSettings } from "@wso2is/core/models";
 import { LocalStorageUtils } from "@wso2is/core/utils";
+import { ThemeProviderContext } from "@wso2is/features/common.branding.v1/contexts/theme-provider-context";
 import { I18n } from "@wso2is/i18n";
 import {
     ChunkErrorModal,
@@ -39,7 +40,6 @@ import { Redirect, Route, RouteProps, Router, Switch } from "react-router-dom";
 import { PreLoader, ProtectedRoute } from "./components";
 import { getBaseRoutes } from "./configs";
 import { AppConstants } from "./constants";
-import { BrandingPreferenceContext } from "./contexts";
 import { history } from "./helpers";
 import {
     ConfigReducerStateInterface,
@@ -66,16 +66,16 @@ export const App = (): ReactElement => {
     const eventPublisher: EventPublisher = EventPublisher.getInstance();
 
     const { signOut, trySignInSilently } = useAuthContext();
-    const { brandingPreference } = useContext(BrandingPreferenceContext);
+    const { themePreference } = useContext(ThemeProviderContext);
 
     const { setMode } = useColorScheme();
 
     useEffect(() => {
-        const mode: Mode = brandingPreference?.preference?.theme?.activeTheme.toLowerCase() as Mode
+        const mode: Mode = themePreference?.preference?.theme?.activeTheme.toLowerCase() as Mode
             ?? "light" as Mode;
 
         setMode(mode);
-    }, [ brandingPreference ]);
+    }, [ themePreference ]);
 
     /**
      * Set the deployment configs in redux state.

apps/myaccount/src/components/footer/footer.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2019-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -18,6 +18,7 @@
 
 import { TestableComponentInterface } from "@wso2is/core/models";
 import { CookieStorageUtils } from "@wso2is/core/utils";
+import { useThemeProvider } from "@wso2is/features/common.branding.v1/hooks/use-theme-provider";
 import { I18n, LanguageChangeException, SupportedLanguagesMeta } from "@wso2is/i18n";
 import {
     FooterLinkInterface,
@@ -29,7 +30,6 @@ import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { AppConstants } from "../../constants";
-import { useBrandingPreference } from "../../hooks";
 import { ConfigReducerStateInterface } from "../../models";
 import { AppState } from "../../store";
 
@@ -59,7 +59,7 @@ export const Footer: FunctionComponent<FooterProps> = (props: FooterProps): Reac
 
     const { t } = useTranslation();
 
-    const { organizationDetails } = useBrandingPreference();
+    const { organizationDetails } = useThemeProvider();
 
     const supportedI18nLanguages: SupportedLanguagesMeta = useSelector(
         (state: AppState) => state.global.supportedI18nLanguages);

apps/myaccount/src/components/overview/widgets/profile-widget.tsx

@@ -17,6 +17,7 @@
  */
 
 import { TestableComponentInterface } from "@wso2is/core/models";
+import { useThemeProvider } from "@wso2is/features/common.branding.v1/hooks/use-theme-provider";
 import isEmpty from "lodash-es/isEmpty";
 import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,7 +26,6 @@ import { Progress } from "semantic-ui-react";
 import { getWidgetIcons } from "../../../configs";
 import { AppConstants, CommonConstants, UIConstants } from "../../../constants";
 import { history } from "../../../helpers";
-import { useBrandingPreference } from "../../../hooks";
 import { ConfigReducerStateInterface, ProfileCompletion, ProfileCompletionStatus } from "../../../models";
 import { AppState } from "../../../store";
 import { CommonUtils } from "../../../utils";
@@ -57,7 +57,7 @@ export const ProfileWidget: FunctionComponent<ProfileWidgetPropsInterface> = (
 
 
     const { t } = useTranslation();
-    const { organizationDetails } = useBrandingPreference();
+    const { organizationDetails } = useThemeProvider();
 
     const config: ConfigReducerStateInterface = useSelector((state: AppState) => state.config);
 

apps/myaccount/src/components/shared/header.tsx

@@ -44,6 +44,7 @@ import {
     CookieStorageUtils,
     StringUtils
 } from "@wso2is/core/utils";
+import { useThemeProvider } from "@wso2is/features/common.branding.v1/hooks/use-theme-provider";
 import { I18n, LanguageChangeException, LocaleMeta, SupportedLanguagesMeta } from "@wso2is/i18n";
 import isEmpty from "lodash-es/isEmpty";
 import moment from "moment";
@@ -62,7 +63,6 @@ import { Gravatar } from "./gravatar";
 import { AppConstants } from "../../constants";
 import { commonConfig } from "../../extensions";
 import { history, resolveUserstore } from "../../helpers";
-import { useBrandingPreference } from "../../hooks/use-branding-preference";
 import { AuthStateInterface, ConfigReducerStateInterface } from "../../models";
 import { AppState } from "../../store";
 import {
@@ -134,7 +134,7 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
     const productName: string = useSelector((state: AppState) => state?.config?.ui?.productName);
     const { mode } = useColorScheme();
 
-    const { theme } = useBrandingPreference();
+    const { theme } = useThemeProvider();
 
     useEffect(() => {
         const localeCookie: string = CookieStorageUtils.getItem("ui_lang");

apps/myaccount/src/hooks/index.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -16,5 +16,4 @@
  * under the License.
  */
 
-export * from "./use-branding-preference";
 export * from "./use-request";

features/admin.branding.v1/components/branding-core.tsx

@@ -43,6 +43,7 @@ import { AppState } from "../../admin.core.v1/store";
 import { ExtendedFeatureConfigInterface } from "../../admin.extensions.v1/configs/models";
 import { useGetCurrentOrganizationType } from "../../admin.organizations.v1/hooks/use-get-organization-type";
 import { OrganizationResponseInterface } from "../../admin.organizations.v1/models/organizations";
+import useGetBrandingPreferenceResolve from "../../common.branding.v1/api/use-get-branding-preference-resolve";
 import {
     BrandingPreferenceAPIResponseInterface,
     BrandingPreferenceInterface,
@@ -52,7 +53,6 @@ import {
 } from "../../common.branding.v1/models";
 import { deleteBrandingPreference, updateBrandingPreference } from "../api";
 import deleteAllCustomTextPreferences from "../api/delete-all-custom-text-preference";
-import useGetBrandingPreferenceResolve from "../../common.branding.v1/api/use-get-branding-preference-resolve";
 import useGetCustomTextPreferenceResolve from "../api/use-get-custom-text-preference-resolve";
 import { BrandingPreferenceTabs, DesignFormValuesInterface } from "../components";
 import { BrandingPreferencesConstants } from "../constants";

features/admin.branding.v1/components/branding-preference-tabs.tsx

@@ -47,8 +47,8 @@ import {
 import { BrandingPreferencePreview } from "./preview";
 import ScreenDropdown from "./screen-dropdown";
 import { StickyTabPaneActionPanel } from "./sticky-tab-pane-action-panel";
-import { commonConfig } from "../../admin.extensions.v1/configs";
 import { AppState } from "../../admin.core.v1/store";
+import { commonConfig } from "../../admin.extensions.v1/configs";
 import {
     BrandingPreferenceInterface,
     BrandingPreferenceThemeInterface,

features/admin.branding.v1/components/design/design-form.tsx

@@ -49,9 +49,9 @@ import { IllustrationsPreview } from "./illustrations-preview";
 import * as LayoutDesignExtensions from "./layout-design-extensions";
 import { LayoutSwatchAdapter } from "./layout-swatch";
 import { ThemeSwatchAdapter, ThemeSwatchUIConfigsInterface } from "./theme-swatch";
-import { commonConfig } from "../../../admin.extensions.v1/configs";
 import { AppConstants } from "../../../admin.core.v1/constants";
 import { AppState } from "../../../admin.core.v1/store";
+import { commonConfig } from "../../../admin.extensions.v1/configs";
 import {
     BrandingPreferenceInterface,
     BrandingPreferenceLayoutInterface,

features/admin.branding.v1/components/preview/branding-preference-preview.tsx

@@ -42,13 +42,13 @@ import { Placeholder } from "semantic-ui-react";
 import { EmailTemplateScreenSkeleton } from "./email-template-screen-skeleton";
 import { LoginScreenSkeleton } from "./login-screen-skeleton";
 import { MyAccountScreenSkeleton } from "./my-account-screen-skeleton";
+import { AppState } from "../../../admin.core.v1/store";
 import { commonConfig } from "../../../admin.extensions.v1/configs";
 import { BrandingPreferenceInterface, PreviewScreenType } from "../../../common.branding.v1/models";
 import { ReactComponent as CustomLayoutSuccessImg } from
     "../../../themes/wso2is/assets/images/branding/custom-layout-success.svg";
 import { ReactComponent as CustomLayoutWarningImg } from
     "../../../themes/wso2is/assets/images/branding/custom-layout-warning.svg";
-import { AppState } from "../../../admin.core.v1/store";
 import { useLayout, useLayoutStyle } from "../../api";
 import { usePreviewContent, usePreviewStyle } from "../../api/preview-skeletons";
 import { BrandingPreferenceMeta, LAYOUT_DATA, PredefinedLayouts } from "../../meta";

features/admin.branding.v1/components/preview/product-footer.tsx

@@ -25,11 +25,11 @@ import React, {
 } from "react";
 import { useSelector } from "react-redux";
 import { AppState } from "../../../admin.core.v1/store";
+import { BrandingPreferenceInterface } from "../../../common.branding.v1/models";
 import { BrandingPreferencesConstants } from "../../constants";
 import { CustomTextPreferenceConstants } from "../../constants/custom-text-preference-constants";
 import useBrandingPreference from "../../hooks/use-branding-preference";
 import { BrandingPreferenceMeta } from "../../meta";
-import { BrandingPreferenceInterface } from "../../../common.branding.v1/models";
 
 /**
  * Proptypes for the product footer component of login screen skeleton.

features/admin.branding.v1/meta/themes/light-theme.ts

@@ -17,8 +17,8 @@
  */
 
 import { rgbToHex } from "@wso2is/react-components";
-import { BrandingPreferencesConstants } from "../../constants";
 import { ThemeConfigInterface } from "../../../common.branding.v1/models";
+import { BrandingPreferencesConstants } from "../../constants";
 
 export const LIGHT_THEME: ThemeConfigInterface ={
     buttons: {

features/admin.email-management.v1/components/email-template-preview.tsx

@@ -29,9 +29,9 @@ import React, {
 import { useSelector } from "react-redux";
 import { BrandingPreferencesConstants } from "../../admin.branding.v1/constants";
 import useBrandingPreference from "../../admin.branding.v1/hooks/use-branding-preference";
-import { BrandingPreferenceThemeInterface } from "../../admin.branding.v1/models";
 import { BrandingPreferenceUtils } from "../../admin.branding.v1/utils";
 import { AppState } from "../../admin.core.v1";
+import { BrandingPreferenceThemeInterface } from "../../common.branding.v1/models";
 import { EmailTemplate } from "../models";
 import { EmailCustomizationUtils } from "../utils";
 

features/common.branding.v1/branding/theme.ts

@@ -18,14 +18,14 @@
 // eslint-disable-next-line no-restricted-imports
 import { Theme } from "@oxygen-ui/react";
 import { extendTheme } from "@oxygen-ui/react/theme";
-import { BrandingPreferenceContextProps } from "../contexts/branding-preference-context";
+import { ThemeProviderContextProps } from "../contexts/theme-provider-context";
 import { ThemeConfigInterface } from "../models/branding-preferences";
 
-export const generateTheme: (branding: BrandingPreferenceContextProps) => Theme = (
-    branding: BrandingPreferenceContextProps
+export const generateTheme: (branding: ThemeProviderContextProps) => Theme = (
+    branding: ThemeProviderContextProps
 ) => {
-    const mode: string = branding?.brandingPreference?.preference?.theme?.activeTheme.toLowerCase() ?? "light";
-    const brandingTheme: ThemeConfigInterface = branding?.brandingPreference?.preference?.theme[mode.toUpperCase()];
+    const mode: string = branding?.themePreference?.preference?.theme?.activeTheme.toLowerCase() ?? "light";
+    const brandingTheme: ThemeConfigInterface = branding?.themePreference?.preference?.theme[mode.toUpperCase()];
 
     return extendTheme({
         colorSchemes: {

features/common.branding.v1/contexts/branding-preference-context.tsx → features/common.branding.v1/contexts/theme-provider-context.tsx

@@ -20,22 +20,22 @@ import { Context, createContext } from "react";
 import { BrandingPreferenceAPIResponseInterface } from "../models/branding-preferences";
 
 /**
- * Props interface for BrandingPreferenceContext.
+ * Props interface for ThemeProviderContext.
  */
-export type BrandingPreferenceContextProps = {
-    /**
-     * The branding preferences to be stored in the context.
-     */
-    brandingPreference: BrandingPreferenceAPIResponseInterface;
+export type ThemeProviderContextProps = {
+  /**
+   * The theme preferences to be stored in the context.
+   */
+  themePreference: BrandingPreferenceAPIResponseInterface;
 };
 
 /**
- * Context object for managing branding preferences.
- */
-export const BrandingPreferenceContext: Context<BrandingPreferenceContextProps> =
-  createContext<BrandingPreferenceContextProps>(undefined);
+* Context object for managing theme preferences.
+*/
+export const ThemeProviderContext: Context<ThemeProviderContextProps> =
+createContext<ThemeProviderContextProps>(undefined);
 
 /**
- * Display name for the BrandingPreferenceContext.
- */
-BrandingPreferenceContext.displayName = "BrandingPreferenceContext";
+* Display name for the ThemeProviderContext.
+*/
+ThemeProviderContext.displayName = "ThemeProviderContext";

features/common.branding.v1/hooks/use-branding-preference.ts → features/common.branding.v1/hooks/use-theme-provider.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -17,20 +17,19 @@
  */
 
 import { useContext } from "react";
-// import { BrandingPreferenceContext, BrandingPreferenceContextProps } from "../contexts";
-import { BrandingPreferenceContext, BrandingPreferenceContextProps } from "../contexts/branding-preference-context";
+import { ThemeProviderContext, ThemeProviderContextProps } from "../contexts/theme-provider-context";
 import { BrandingPreferenceAPIResponseInterface, BrandingPreferenceOrganizationDetailsInterface } from "../models";
 
 /**
- * Interface for the return type of the useBrandingPreference hook.
+ * Interface for the return type of the useThemeProvider hook.
  */
-export type UseBrandingPreferenceInterface = {
+export type UseThemeProviderInterface = {
     /**
      * Organization's basic details.
      */
     organizationDetails: BrandingPreferenceOrganizationDetailsInterface;
     /**
-     * The current theme object from the branding preference.
+     * The current theme object from the theme provider.
      */
     theme: any;
     /**
@@ -40,15 +39,15 @@ export type UseBrandingPreferenceInterface = {
 };
 
 /**
- * Hook that provides access to the branding preference context.
- * @returns An object containing the current branding preference theme and raw API response.
+ * Hook that provides access to the theme provider context.
+ * @returns An object containing the current theme from the theme provider and raw API response.
  */
-export const useBrandingPreference = (): UseBrandingPreferenceInterface => {
-    const { brandingPreference }: BrandingPreferenceContextProps = useContext(BrandingPreferenceContext);
+export const useThemeProvider = (): UseThemeProviderInterface => {
+    const { themePreference }: ThemeProviderContextProps = useContext(ThemeProviderContext);
 
     return {
-        organizationDetails: brandingPreference?.preference?.organizationDetails,
-        raw: brandingPreference,
-        theme: brandingPreference?.preference?.theme[brandingPreference?.preference?.theme?.activeTheme]
+        organizationDetails: themePreference?.preference?.organizationDetails,
+        raw: themePreference,
+        theme: themePreference?.preference?.theme[themePreference?.preference?.theme?.activeTheme]
     };
 };

features/common.branding.v1/meta/index.ts

@@ -16,4 +16,4 @@
  * under the License.
  */
 
-export * from "./branding-preference-meta";
+export * from "./theme-provider-meta";

features/common.branding.v1/meta/branding-preference-meta.ts → features/common.branding.v1/meta/theme-provider-meta.ts

@@ -20,9 +20,9 @@ import isEmpty from "lodash-es/isEmpty";
 import { BrandingPreferenceThemeInterface } from "../models/branding-preferences";
 
 /**
- * Class for the Branding Preference Metadata.
+ * Class for the Theme Preference Metadata.
  */
-export class BrandingPreferenceMeta {
+export class ThemePreferenceMeta {
     /* eslint-disable max-len */
     /**
      * Get the theme skeleton.