chore: wip customization of partner-themes

lifinance · Jun 21, 2024 · bcb7f1d · bcb7f1d
1 parent 20746f1
commit bcb7f1d
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 49 deletions.
diff --git a/src/components/BackgroundGradient/BackgroundGradient.style.tsx b/src/components/BackgroundGradient/BackgroundGradient.style.tsx
@@ -1,6 +1,7 @@
 'use client';
 import type { Breakpoint, Theme } from '@mui/material/styles';
 import { alpha, darken, styled } from '@mui/material/styles';
+import Image from 'next/image';
 
 export interface BackgroundGradientContainerProps {
   backgroundImageUrl?: URL;
@@ -28,6 +29,7 @@ export const BackgroundGradientContainer = styled('div', {
         ? background
         : (theme as Theme).palette.surface1.main,
     left: 0,
+    ...(backgroundImageUrl && { backgroundSize: 'cover' }),
     bottom: 0,
     right: 0,
     top: 0,
@@ -43,6 +45,21 @@ export const BackgroundGradientContainer = styled('div', {
   };
 });
 
+export const BackgroundFooterImage = styled(Image)(({ theme }) => ({
+  position: 'absolute',
+  width: 200,
+  height: 'auto',
+  bottom: 0,
+  left: 0,
+  cursor: 'pointer',
+  margin: theme.spacing(4),
+  [theme.breakpoints.up('sm' as Breakpoint)]: {
+    margin: theme.spacing(10),
+    width: 400,
+    height: 'auto',
+  },
+}));
+
 const BackgroundGradient = styled('span')(() => ({
   content: '" "',
   position: 'absolute',

diff --git a/src/components/BackgroundGradient/BackgroundGradient.tsx b/src/components/BackgroundGradient/BackgroundGradient.tsx
@@ -3,6 +3,7 @@ import { type CSSObject } from '@mui/material';
 import { usePathname } from 'next/navigation';
 import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
 import {
+  BackgroundFooterImage,
   BackgroundGradientBottomLeft,
   BackgroundGradientBottomRight,
   BackgroundGradientContainer,
@@ -17,14 +18,25 @@ interface BackgroundGradientProps {
 
 export const BackgroundGradient = ({ styles }: BackgroundGradientProps) => {
   const pathname = usePathname();
-  const { activeUid, backgroundColor, imgUrl } = usePartnerTheme();
+  const { activeUid, backgroundColor, imgUrl, footerImageUrl } =
+    usePartnerTheme();
 
+  console.log('imgUrl', imgUrl);
+  console.log('footerImageUrl', footerImageUrl);
   return !pathname?.includes('memecoins') ? (
     <BackgroundGradientContainer
       sx={styles}
       backgroundImageUrl={imgUrl}
       backgroundColor={backgroundColor}
     >
+      {activeUid && footerImageUrl !== undefined && (
+        <BackgroundFooterImage
+          alt="footer-image"
+          src={footerImageUrl.href}
+          width={300}
+          height={200}
+        />
+      )}
       {!activeUid && (
         <>
           <BackgroundGradientBottomLeft />

diff --git a/src/hooks/usePartnerTheme.ts b/src/hooks/usePartnerTheme.ts
@@ -55,11 +55,39 @@ export const usePartnerTheme = () => {
     url.origin,
   ]);
 
+  const footerImageUrl = useMemo(() => {
+    if (
+      partnerThemeUid &&
+      partnerThemes?.length > 0 &&
+      isSuccess &&
+      (partnerThemes[0].attributes.FooterImageLight.data?.attributes.url ||
+        partnerThemes[0].attributes.FooterImageDark.data?.attributes.url)
+    ) {
+      return theme.palette.mode === 'light'
+        ? new URL(
+            partnerThemes[0].attributes.FooterImageLight.data?.attributes.url,
+            url.origin,
+          )
+        : new URL(
+            partnerThemes[0].attributes.FooterImageDark.data?.attributes.url,
+            url.origin,
+          );
+    } else {
+      return undefined;
+    }
+  }, [
+    isSuccess,
+    partnerThemeUid,
+    partnerThemes,
+    theme.palette.mode,
+    url.origin,
+  ]);
+
   const backgroundColor = useMemo(() => {
     if (partnerThemeUid && partnerThemes?.length > 0 && isSuccess) {
       return theme.palette.mode === 'light'
-        ? partnerThemes[0].attributes.LightBackgroundColor
-        : partnerThemes[0].attributes.DarkBackgroundColor;
+        ? partnerThemes[0].attributes.BackgroundColorLight
+        : partnerThemes[0].attributes.BackgroundColorDark;
     } else {
       return undefined;
     }
@@ -85,12 +113,26 @@ export const usePartnerTheme = () => {
   const currentWidgetTheme = useMemo(() => {
     if (availableWidgetTheme === 'system') {
       return theme.palette.mode === 'light'
-        ? partnerThemes[0].attributes.lightConfig
-        : partnerThemes[0].attributes.darkConfig;
+        ? partnerThemes[0].attributes.lightConfig?.widgetTheme
+        : partnerThemes[0].attributes.darkConfig?.widgetTheme;
+    } else if (availableWidgetTheme === 'dark') {
+      return partnerThemes[0].attributes.darkConfig?.widgetTheme;
+    } else if (availableWidgetTheme === 'light') {
+      return partnerThemes[0].attributes.lightConfig?.widgetTheme;
+    } else {
+      return undefined;
+    }
+  }, [availableWidgetTheme, partnerThemes, theme.palette.mode]);
+
+  const currentCustomizedTheme = useMemo(() => {
+    if (availableWidgetTheme === 'system') {
+      return theme.palette.mode === 'light'
+        ? partnerThemes[0].attributes.lightConfig?.customization
+        : partnerThemes[0].attributes.darkConfig?.customization;
     } else if (availableWidgetTheme === 'dark') {
-      return partnerThemes[0].attributes.darkConfig;
+      return partnerThemes[0].attributes.darkConfig?.customization;
     } else if (availableWidgetTheme === 'light') {
-      return partnerThemes[0].attributes.lightConfig;
+      return partnerThemes[0].attributes.lightConfig?.customization;
     } else {
       return undefined;
     }
@@ -101,6 +143,9 @@ export const usePartnerTheme = () => {
       isHomepage && partnerThemes?.length > 0 ? partnerThemes[0] : undefined,
     backgroundColor:
       isHomepage && backgroundColor ? backgroundColor : undefined,
+    currentCustomizedTheme:
+      isHomepage && currentCustomizedTheme ? currentCustomizedTheme : undefined,
+    footerImageUrl: isHomepage && footerImageUrl ? footerImageUrl : undefined,
     availableWidgetTheme:
       isHomepage && availableWidgetTheme ? availableWidgetTheme : undefined,
     currentWidgetTheme:

diff --git a/src/hooks/useStrapi.ts b/src/hooks/useStrapi.ts
@@ -167,6 +167,8 @@ export const useStrapi = <T>({
   if (contentType === STRAPI_PARTNER_THEMES) {
     apiUrl.searchParams.set('populate[BackgroundImageLight]', '*');
     apiUrl.searchParams.set('populate[BackgroundImageDark]', '*');
+    apiUrl.searchParams.set('populate[FooterImageLight]', '*');
+    apiUrl.searchParams.set('populate[FooterImageDark]', '*');
 
     // filter partner-themes by "uid"
     if (filterUid) {

diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
@@ -2,7 +2,6 @@
 import { useSettingsStore } from '@/stores/settings';
 import type { ThemeModesSupported } from '@/types/settings';
 import { CssBaseline, useMediaQuery } from '@mui/material';
-import type { SimplePaletteColorOptions } from '@mui/material/styles';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import type { PropsWithChildren } from 'react';
@@ -33,7 +32,7 @@ export const ThemeProvider: React.FC<
     themeProp,
   );
   const isDarkMode = useDetectDarkModePreference();
-  const { activeUid, currentWidgetTheme } = usePartnerTheme();
+  const { activeUid, currentCustomizedTheme } = usePartnerTheme();
   useEffect(() => {
     // Check if the theme prop is not provided (null or undefined)
     if (theme === undefined) {
@@ -60,66 +59,50 @@ export const ThemeProvider: React.FC<
 
   const activeTheme = useMemo(() => {
     let currentTheme = theme === 'dark' ? darkTheme : lightTheme;
-    if (activeUid && currentWidgetTheme) {
-      console.log(currentWidgetTheme);
+    if (activeUid && currentCustomizedTheme) {
       // Merge partner theme attributes into the base theme
       const mergedTheme = deepmerge(currentTheme, {
         palette: {
           primary: {
-            main: currentWidgetTheme.palette?.primary
-              ? (
-                  currentWidgetTheme.palette
-                    ?.primary as SimplePaletteColorOptions
-                ).main
+            main: currentCustomizedTheme.palette?.primary
+              ? currentCustomizedTheme.palette.primary
               : currentTheme.palette.primary.main,
           },
           secondary: {
-            main: currentWidgetTheme.palette?.secondary
-              ? (
-                  currentWidgetTheme.palette
-                    ?.secondary as SimplePaletteColorOptions
-                ).main
+            main: currentCustomizedTheme.palette?.secondary
+              ? currentCustomizedTheme.palette.secondary
               : currentTheme.palette.secondary.main,
           },
-          surface1: {
-            main:
-              currentWidgetTheme.palette?.background?.default ||
-              currentTheme.palette.secondary.main,
-          },
           accent1: {
-            main: currentWidgetTheme.palette?.primary
-              ? (
-                  currentWidgetTheme.palette
-                    ?.primary as SimplePaletteColorOptions
-                ).main
+            main: currentCustomizedTheme.palette?.accent1
+              ? currentCustomizedTheme.palette.accent1
               : currentTheme.palette.surface1.main,
           },
           accent1Alt: {
-            main: currentWidgetTheme.palette?.primary
-              ? (
-                  currentWidgetTheme.palette
-                    ?.primary as SimplePaletteColorOptions
-                ).main
+            main: currentCustomizedTheme.palette?.accent1Alt
+              ? currentCustomizedTheme.palette.accent1Alt
               : currentTheme.palette.surface1.main,
           },
           accent2: {
-            main: currentWidgetTheme.palette?.secondary
-              ? (
-                  currentWidgetTheme.palette
-                    ?.secondary as SimplePaletteColorOptions
-                ).main
+            main: currentCustomizedTheme.palette?.accent2
+              ? currentCustomizedTheme.palette.accent2
+              : currentTheme.palette.surface1.main,
+          },
+          surface1: {
+            main: currentCustomizedTheme.palette?.surface1
+              ? currentCustomizedTheme.palette.surface1
               : currentTheme.palette.surface1.main,
           },
         },
-        typography: currentWidgetTheme.typography
-          ? currentWidgetTheme.typography
-          : currentTheme.typography,
+        // typography: currentCustomizedTheme.typography
+        //   ? currentCustomizedTheme.typography
+        //   : currentTheme.typography,
       });
       return mergedTheme;
     } else {
       return currentTheme;
     }
-  }, [activeUid, currentWidgetTheme, theme]);
+  }, [activeUid, currentCustomizedTheme, theme]);
 
   // Render children only when the theme is determined
   return (

diff --git a/src/types/strapi.ts b/src/types/strapi.ts
@@ -1,4 +1,5 @@
 import type { WidgetTheme } from '@lifi/widget';
+import type { PaletteOptions } from '@mui/material';
 import type { RootNode } from 'node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer';
 
 /* Strapi */
@@ -194,19 +195,32 @@ export interface PartnerThemesData {
   attributes: PartnerThemesAttributes;
 }
 
+interface Customization {
+  palette: PaletteOptions;
+  logoName?: string;
+  footerBannerUrl?: string;
+}
+
+interface PartnerTheme {
+  widgetTheme: WidgetTheme;
+  customization: Customization;
+}
+
 export interface PartnerThemesAttributes {
   PartnerName: string;
-  lightConfig?: WidgetTheme;
-  darkConfig?: WidgetTheme;
+  lightConfig?: PartnerTheme;
+  darkConfig?: PartnerTheme;
   createdAt: string;
   updatedAt: string;
   publishedAt?: string;
   darkModeEnabled: boolean;
   uid: string;
   BackgroundImageLight: StrapiImageData;
   BackgroundImageDark: StrapiImageData;
-  LightBackgroundColor?: string;
-  DarkBackgroundColor?: string;
+  FooterImageLight: StrapiImageData;
+  FooterImageDark: StrapiImageData;
+  BackgroundColorLight?: string;
+  BackgroundColorDark?: string;
 }
 
 /* Blog */