feat: added logo to theme definition

apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,10 +1,13 @@
 import { APP_LANGUAGE_QUERY_KEY } from '@/common/consts/consts';
+import { IThemeContext } from '@/common/providers/ThemeProvider/types';
 import { ITheme } from '@/common/types/settings';
 import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
 import { transformThemeToInlineStyles } from '@/utils/transform-theme-to-inline-styles';
 import { useLayoutEffect, useMemo } from 'react';
 import defaultTheme from '../../../../theme.json';
+import { themeContext } from './theme.context';
 
+const { Provider } = themeContext;
 interface Props {
   children: React.ReactNode | React.ReactNode[];
 }
@@ -27,6 +30,8 @@ export const ThemeProvider = ({ children }: Props) => {
     return uiSchema.uiSchema.theme;
   }, [uiSchema, isLoading, error]);
 
+  const context = useMemo(() => ({ themeDefinition: theme } as IThemeContext), [theme]);
+
   useLayoutEffect(() => {
     if (!theme) return;
 
@@ -35,5 +40,5 @@ export const ThemeProvider = ({ children }: Props) => {
       ?.setAttribute('style', transformThemeToInlineStyles(theme as ITheme));
   }, [theme]);
 
-  return <>{children}</>;
+  return <Provider value={context}>{children}</Provider>;
 };

apps/kyb-app/src/common/providers/ThemeProvider/index.ts

@@ -1 +1,2 @@
 export * from './ThemeProvider';
+export * from './useTheme';

apps/kyb-app/src/common/providers/ThemeProvider/theme.context.ts

@@ -0,0 +1,4 @@
+import { IThemeContext } from '@/common/providers/ThemeProvider/types';
+import { createContext } from 'react';
+
+export const themeContext = createContext({} as IThemeContext);

apps/kyb-app/src/common/providers/ThemeProvider/types.ts

@@ -1,3 +1,5 @@
-import { ISettings } from '@/common/types/settings';
+import { ITheme } from '@/common/types/settings';
 
-export type ThemeContext = ISettings['theme'];
+export interface IThemeContext {
+  themeDefinition: ITheme;
+}

apps/kyb-app/src/common/providers/ThemeProvider/useTheme.ts

@@ -0,0 +1,4 @@
+import { themeContext } from '@/common/providers/ThemeProvider/theme.context';
+import { useContext } from 'react';
+
+export const useTheme = () => useContext(themeContext);

apps/kyb-app/src/common/types/settings.ts

@@ -1,4 +1,5 @@
 export interface ITheme {
+  logo?: string;
   pallete: Record<string, { color: string; foreground: string }>;
   elements: Record<string, string | Record<string, string>>;
 }

apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { StepperProgress } from '@/common/components/atoms/StepperProgress';
 import { ProgressBar } from '@/common/components/molecules/ProgressBar';
+import { useTheme } from '@/common/providers/ThemeProvider';
 import { AppShell } from '@/components/layouts/AppShell';
 import { PoweredByLogo } from '@/components/molecules/PoweredByLogo';
 import { DynamicUI, State } from '@/components/organisms/DynamicUI';
@@ -85,6 +86,7 @@ export const CollectionFlow = withSessionProtected(() => {
   const { data: context } = useFlowContextQuery();
   const { customer } = useCustomer();
   const { t } = useTranslation();
+  const { themeDefinition } = useTheme();
 
   const elements = schema?.uiSchema?.elements;
   const definition = schema?.definition.definition;
@@ -180,7 +182,7 @@ export const CollectionFlow = withSessionProtected(() => {
                                   {customer?.logoImageUri && (
                                     <AppShell.Logo
                                       // @ts-ignore
-                                      logoSrc={customer?.logoImageUri}
+                                      logoSrc={themeDefinition.logo || customer?.logoImageUri}
                                       // @ts-ignore
                                       appName={customer?.displayName}
                                       onLoad={() => setLogoLoaded(true)}