@moneylion/react-native-offer-carousel 1.3.0 → 1.4.0

package/src/context/ThemeProvider.tsx

@@ -68,8 +68,10 @@ const defaultFontFamily: FontFamily = {
 interface ThemeContextType {
 	theme: ThemeColors;
 	fontFamily: FontFamily;
+	isDarkTheme: boolean;
 	updateTheme: (newTheme: Partial<ThemeColors>) => void;
 	updateFontFamily: (newFontFamily: Partial<FontFamily>) => void;
+	setIsDarkTheme: (isDark: boolean) => void;
 }
 
 export const ThemeContext = createContext<ThemeContextType | null>(null);
@@ -85,12 +87,14 @@ export const useTheme = () => {
 interface ThemeProviderProps {
 	themeColors?: ThemeColors;
 	fontFamily?: Partial<FontFamily>;
+	isDarkTheme?: boolean;
 	children: ReactNode;
 }
 
 export const ThemeProvider: FC<ThemeProviderProps> = ({
-	themeColors = {} as ThemeColors, // should be safe to assert as ThemePalette since the fallback colors are already handled by the consumers of ThemeProvider
+	themeColors = {} as ThemeColors,
 	fontFamily = {},
+	isDarkTheme = false,
 	children,
 }) => {
 	const [theme, setTheme] = useState<ThemeColors>(themeColors);
@@ -98,6 +102,7 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({
 		...defaultFontFamily,
 		...fontFamily,
 	});
+	const [darkTheme, setDarkTheme] = useState<boolean>(isDarkTheme);
 
 	const updateTheme = (newTheme: Partial<ThemeColors>) => {
 		setTheme((prevTheme) => ({
@@ -113,11 +118,17 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({
 		}));
 	};
 
+	const setIsDarkTheme = (isDark: boolean) => {
+		setDarkTheme(isDark);
+	};
+
 	const contextValue = {
 		theme,
 		fontFamily: fonts,
+		isDarkTheme: darkTheme,
 		updateTheme,
 		updateFontFamily,
+		setIsDarkTheme,
 	};
 
 	return (

package/src/utils/getThemeColors.ts

@@ -0,0 +1,29 @@
+import type { ReshapedThemeColors } from "../capabilities/core/src/system/cnfContext/schemas/Brand";
+import { localCnfContext } from "../config/mocks/cnfContext";
+import type { ThemeColors } from "../context/ThemeProvider";
+
+/** This util checks for missing theme colors from reshapedThemeColors in the API response
+ * and merges them with fallback theme colors.
+ * It returns a ThemeColors object with the appropriate colors based on the isDarkTheme flag.
+ */
+export const getThemeColors = (
+	reshapedThemeColors: ReshapedThemeColors,
+	isDarkTheme: boolean = false
+): ThemeColors => {
+	const defaultThemeColors = localCnfContext.brand.reshapedThemeColors;
+
+	const themeColors = Object.keys(defaultThemeColors).reduce((acc, key) => {
+		const reshapedColor = reshapedThemeColors[key as keyof ReshapedThemeColors];
+		const defaultColor = defaultThemeColors[key as keyof ReshapedThemeColors];
+
+		const themeColor = reshapedColor ?? defaultColor;
+
+		acc[key as keyof ThemeColors] = isDarkTheme
+			? (themeColor.hexDark ?? themeColor.hex)
+			: themeColor.hex;
+
+		return acc;
+	}, {} as ThemeColors);
+
+	return themeColors;
+};