@envive-ai/react-hooks 0.3.2 → 0.3.4

package/src/contexts/widgetConfigContext/__tests__/widgetConfigContext.test.tsx

@@ -0,0 +1,512 @@
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import Logger from 'src/application/logging/logger';
+import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
+import { WidgetConfigProvider, useWidgetConfig } from '../widgetConfigContext';
+import { WidgetConfigV3, WidgetTypeV3 } from '../../typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
+
+// Mock the Logger to avoid console output in tests
+vi.spyOn(Logger, 'logInfo').mockImplementation(() => {});
+vi.spyOn(Logger, 'logWarn').mockImplementation(() => {});
+vi.spyOn(Logger, 'logError').mockImplementation(() => {});
+
+// Mock the useNewOrgConfig hook
+vi.mock('src/hooks/NewOrgConfig', () => ({
+  useNewOrgConfig: vi.fn(),
+}));
+
+// Component that uses the useWidgetConfig hook
+const MockWidgetConfigComponent: React.FC = () => {
+  const { getWidgetConfig, isLoading } = useWidgetConfig();
+  const [widgetConfig, setWidgetConfig] = React.useState<WidgetConfigV3 | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [isLoadingState, setIsLoadingState] = React.useState(false);
+
+  const handleGetConfig = async () => {
+    setIsLoadingState(true);
+    try {
+      const config = await getWidgetConfig({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        widgetConfigId: 'test-config-id',
+      });
+      setWidgetConfig(config);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setWidgetConfig(null);
+    } finally {
+      setIsLoadingState(false);
+    }
+  };
+
+  return (
+    <div data-testid="widget-config-component">
+      <div data-testid="is-loading">{isLoading.toString()}</div>
+      <div data-testid="is-loading-state">{isLoadingState.toString()}</div>
+      <div data-testid="has-widget-config">{widgetConfig ? 'true' : 'false'}</div>
+      <div data-testid="widget-config-id">{widgetConfig?.widgetConfigId || 'not-set'}</div>
+      <div data-testid="widget-config-type">{widgetConfig?.type || 'not-set'}</div>
+      {error && <div data-testid="error-message">{error}</div>}
+      <button
+        data-testid="get-config-btn"
+        type="button"
+        onClick={handleGetConfig}
+      >
+        Get Config
+      </button>
+    </div>
+  );
+};
+
+// Wrapper component for testing
+const TestWrapper: React.FC<{
+  children: React.ReactNode;
+  mockNewOrgConfig?: {
+    frontendConfig?: {
+      widgetConfigs?: Record<string, WidgetConfigV3>;
+    } | null;
+    loading?: boolean;
+  };
+}> = ({ children, mockNewOrgConfig = {} }) => {
+  const mockUseNewOrgConfig = useNewOrgConfig as ReturnType<typeof vi.fn>;
+  mockUseNewOrgConfig.mockReturnValue({
+    frontendConfig: mockNewOrgConfig.frontendConfig ?? null,
+    loading: mockNewOrgConfig.loading ?? false,
+  });
+
+  return <WidgetConfigProvider>{children}</WidgetConfigProvider>;
+};
+
+describe('WidgetConfigProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('useWidgetConfig Hook Integration', () => {
+    it('should provide context through useWidgetConfig hook', async () => {
+      const mockWidgetConfig: WidgetConfigV3 = {
+        widgetConfigId: 'test-config-id',
+        type: WidgetTypeV3.PromptCarouselV3,
+        contentId: 'test-content-id',
+      };
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'test-config-id': mockWidgetConfig,
+              },
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+    });
+
+    it('should throw error when used outside of WidgetConfigProvider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      const TestComponent: React.FC = () => {
+        try {
+          useWidgetConfig();
+          return <div data-testid="no-error">No Error</div>;
+        } catch (error: unknown) {
+          return (
+            <div data-testid="error">
+              {error instanceof Error ? error.message : 'Unknown error'}
+            </div>
+          );
+        }
+      };
+
+      render(<TestComponent />);
+
+      expect(screen.getByTestId('error')).toHaveTextContent(
+        'useWidgetConfig must be used within a WidgetConfigProvider',
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('getWidgetConfig', () => {
+    it('should successfully retrieve widget config when config exists', async () => {
+      const mockWidgetConfig: WidgetConfigV3 = {
+        widgetConfigId: 'test-config-id',
+        type: WidgetTypeV3.PromptCarouselV3,
+        contentId: 'test-content-id',
+        promptButtonType: PromptButtonVariant.LIGHT,
+        boldFirstButton: true,
+      };
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'test-config-id': mockWidgetConfig,
+              },
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('has-widget-config')).toHaveTextContent('true');
+        expect(screen.getByTestId('widget-config-id')).toHaveTextContent('test-config-id');
+        expect(screen.getByTestId('widget-config-type')).toHaveTextContent(
+          WidgetTypeV3.PromptCarouselV3,
+        );
+      });
+
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
+    });
+
+    it('should throw error when frontend config is loading', async () => {
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'test-config-id': {
+                  widgetConfigId: 'test-config-id',
+                  type: WidgetTypeV3.PromptCarouselV3,
+                },
+              },
+            },
+            loading: true,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error-message')).toHaveTextContent('Frontend config is loading');
+      });
+    });
+
+    it('should throw error when widget config is not found', async () => {
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {},
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error-message')).toHaveTextContent(
+          'Widget type: PromptCarouselV3 does not match widget config type: undefined',
+        );
+      });
+    });
+
+    it('should throw error when widget type does not match config type', async () => {
+      // Create a mock config with wrong type for testing error handling
+      const mockWidgetConfig = {
+        widgetConfigId: 'test-config-id',
+        type: WidgetTypeV3.ChatPreviewV3, // Different type - using type assertion for test
+      } as unknown as WidgetConfigV3;
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'test-config-id': mockWidgetConfig,
+              },
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error-message')).toHaveTextContent(
+          'Widget type: PromptCarouselV3 does not match widget config type: ChatPreviewV3',
+        );
+      });
+    });
+
+    it('should throw error when frontendConfig is null', async () => {
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: null,
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error-message')).toHaveTextContent(
+          'Widget type: PromptCarouselV3 does not match widget config type: undefined',
+        );
+      });
+    });
+  });
+
+  describe('isLoading State', () => {
+    it('should be true when frontend config is loading', async () => {
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {},
+            },
+            loading: true,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('true');
+      });
+    });
+
+    it('should be true when widget config is being retrieved', async () => {
+      const mockWidgetConfig: WidgetConfigV3 = {
+        widgetConfigId: 'test-config-id',
+        type: WidgetTypeV3.PromptCarouselV3,
+      };
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'test-config-id': mockWidgetConfig,
+              },
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+
+      // Click button and check loading state
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      // isLoadingState should be true during the async operation
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading-state')).toHaveTextContent('false');
+      });
+    });
+
+    it('should be false when both frontend config and widget config are not loading', async () => {
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {},
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      });
+    });
+  });
+
+  describe('Logger Integration', () => {
+    it('should log info when retrieving widget config', async () => {
+      const logInfoSpy = vi.spyOn(Logger, 'logInfo');
+      const mockWidgetConfig: WidgetConfigV3 = {
+        widgetConfigId: 'test-config-id',
+        type: WidgetTypeV3.PromptCarouselV3,
+      };
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'test-config-id': mockWidgetConfig,
+              },
+            },
+            loading: false,
+          }}
+        >
+          <MockWidgetConfigComponent />
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-config-component')).toBeInTheDocument();
+      });
+
+      const getConfigButton = screen.getByTestId('get-config-btn');
+      await act(async () => {
+        getConfigButton.click();
+      });
+
+      await waitFor(() => {
+        expect(logInfoSpy).toHaveBeenCalledWith('widgetConfigContext | retrieving widget config', {
+          widgetConfigId: 'test-config-id',
+          widgetType: WidgetTypeV3.PromptCarouselV3,
+        });
+        expect(logInfoSpy).toHaveBeenCalledWith(
+          'widgetConfigContext | returning widget config response',
+          mockWidgetConfig,
+        );
+      });
+    });
+  });
+
+  describe('Multiple Widget Config Retrievals', () => {
+    it('should handle multiple sequential widget config retrievals', async () => {
+      const mockWidgetConfig1: WidgetConfigV3 = {
+        widgetConfigId: 'config-1',
+        type: WidgetTypeV3.PromptCarouselV3,
+      };
+      const mockWidgetConfig2: WidgetConfigV3 = {
+        widgetConfigId: 'config-2',
+        type: WidgetTypeV3.PromptCarouselV3,
+      };
+
+      const TestComponent: React.FC = () => {
+        const { getWidgetConfig } = useWidgetConfig();
+        const [config1, setConfig1] = React.useState<WidgetConfigV3 | null>(null);
+        const [config2, setConfig2] = React.useState<WidgetConfigV3 | null>(null);
+
+        const handleGetConfigs = async () => {
+          const c1 = await getWidgetConfig({
+            widgetType: WidgetTypeV3.PromptCarouselV3,
+            widgetConfigId: 'config-1',
+          });
+          setConfig1(c1);
+
+          const c2 = await getWidgetConfig({
+            widgetType: WidgetTypeV3.PromptCarouselV3,
+            widgetConfigId: 'config-2',
+          });
+          setConfig2(c2);
+        };
+
+        return (
+          <div>
+            <div data-testid="config-1-id">{config1?.widgetConfigId || 'not-set'}</div>
+            <div data-testid="config-2-id">{config2?.widgetConfigId || 'not-set'}</div>
+            <button
+              data-testid="get-configs-btn"
+              type="button"
+              onClick={handleGetConfigs}
+            >
+              Get Configs
+            </button>
+          </div>
+        );
+      };
+
+      render(
+        <TestWrapper
+          mockNewOrgConfig={{
+            frontendConfig: {
+              widgetConfigs: {
+                'config-1': mockWidgetConfig1,
+                'config-2': mockWidgetConfig2,
+              },
+            },
+            loading: false,
+          }}
+        >
+          <TestComponent />
+        </TestWrapper>,
+      );
+
+      const getConfigsButton = screen.getByTestId('get-configs-btn');
+      await act(async () => {
+        getConfigsButton.click();
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('config-1-id')).toHaveTextContent('config-1');
+        expect(screen.getByTestId('config-2-id')).toHaveTextContent('config-2');
+      });
+    });
+  });
+});

package/src/contexts/widgetConfigContext/index.ts

@@ -0,0 +1 @@
+export * from './widgetConfigContext';

package/src/contexts/widgetConfigContext/widgetConfigContext.tsx

@@ -0,0 +1,84 @@
+import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+import Logger from 'src/application/logging/logger';
+import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
+import { WidgetConfigV3, WidgetTypeV3 } from '../typesV3';
+
+interface WidgetConfigRequest {
+  widgetType: WidgetTypeV3;
+  widgetConfigId: string;
+}
+
+interface WidgetConfigContextType {
+  getWidgetConfig: (request: WidgetConfigRequest) => Promise<WidgetConfigV3>;
+  isLoading: boolean;
+}
+
+const WidgetConfigContext = createContext<WidgetConfigContextType | undefined>(undefined);
+
+export const WidgetConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const { frontendConfig, loading: isFrontendConfigLoading } = useNewOrgConfig();
+  const [isLoadingWidgetConfig, setIsLoadingWidgetConfig] = useState(false);
+
+  const getWidgetConfig = useCallback(
+    async (request: WidgetConfigRequest): Promise<WidgetConfigV3> => {
+      setIsLoadingWidgetConfig(true);
+      Logger.logInfo('widgetConfigContext | retrieving widget config', {
+        widgetConfigId: request.widgetConfigId,
+        widgetType: request.widgetType,
+      });
+      if (isFrontendConfigLoading) {
+        setIsLoadingWidgetConfig(false);
+        throw new Error('Frontend config is loading');
+      }
+
+      const { widgetConfigId, widgetType } = request;
+      const response = frontendConfig?.widgetConfigs?.[widgetConfigId];
+      Logger.logInfo('widgetConfigContext | returning widget config response', response);
+
+      if (
+        [
+          WidgetTypeV3.SocialProofV3,
+          WidgetTypeV3.ChatPreviewV3,
+          WidgetTypeV3.ChatPreviewComparisonV3,
+          WidgetTypeV3.ChatPreviewLoadingV3,
+        ].includes(widgetType)
+      ) {
+        if (response?.type !== WidgetTypeV3.SocialProofV3) {
+          setIsLoadingWidgetConfig(false);
+          throw new Error(
+            `Widget type: ${widgetType} does not match widget config type: ${response?.type}`,
+          );
+        }
+      } else if (response?.type !== widgetType) {
+        setIsLoadingWidgetConfig(false);
+        throw new Error(
+          `Widget type: ${widgetType} does not match widget config type: ${response?.type}`,
+        );
+      }
+
+      if (!response) {
+        setIsLoadingWidgetConfig(false);
+        throw new Error(
+          `No widget config response found for widget type: ${request.widgetType} and widget config id: ${request.widgetConfigId}`,
+        );
+      }
+      setIsLoadingWidgetConfig(false);
+      return response;
+    },
+    [frontendConfig, isFrontendConfigLoading],
+  );
+
+  const isLoading = isFrontendConfigLoading || isLoadingWidgetConfig;
+
+  const value = useMemo(() => ({ getWidgetConfig, isLoading }), [getWidgetConfig, isLoading]);
+
+  return <WidgetConfigContext.Provider value={value}>{children}</WidgetConfigContext.Provider>;
+};
+
+export const useWidgetConfig = () => {
+  const context = useContext(WidgetConfigContext);
+  if (!context) {
+    throw new Error('useWidgetConfig must be used within a WidgetConfigProvider');
+  }
+  return context;
+};

package/src/hooks/AppDetails/useAppDetails.ts

@@ -6,9 +6,9 @@ import {
   contextSourceAtom,
   envAtom as enviveEnvAtom,
   orgShortNameAtom as enviveOrgShortNameAtom,
+  orgIdAtom,
 } from 'src/atoms/envive/enviveConfig';
 import { chatIdAtom, userIdAtom } from 'src/atoms/app/index';
-import { useOrgId } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
 
 export interface AppDetails {
   orgId: string;
@@ -21,7 +21,7 @@ export interface AppDetails {
 }
 
 export const useAppDetails = (): AppDetails => {
-  const { orgId: fetchedOrgId } = useOrgId(); // Get orgId from useOrgId hook
+  const fetchedOrgId = useAtomValue(orgIdAtom);
   const orgId = fetchedOrgId ?? ''; // Provide a default empty string if undefined
 
   const orgShortName = useAtomValue(enviveOrgShortNameAtom) ?? 'spiffy-ai';

package/src/hooks/GraphQLConfig/useGraphQLConfig.ts

@@ -1,6 +1,4 @@
-import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
-import { orgIdAtom } from 'src/atoms/org/graphqlConfig';
 import { GraphQlConfigValues, useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
 
 export const useColorsAndFrontendConfig = () => {
@@ -32,31 +30,34 @@ export const useColorsAndFrontendConfig = () => {
   return { data, loading, error, refetch: fetchConfig };
 };
 
-export const useOrgId = () => {
-  const { getOrgId, isReady } = useGraphQLClient();
-  const [orgId, setOrgId] = useAtom(orgIdAtom);
+export const useUIConfig = () => {
+  const { getConfig, isReady } = useGraphQLClient();
+  const [data, setData] = useState<GraphQlConfigValues>({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  useEffect(() => {
+  const fetchConfig = useCallback(async () => {
     if (!isReady) return;
+    if (loading) return;
+    if (Object.keys(data).length > 0) return;
 
-    const fetchOrgId = async () => {
-      setLoading(true);
-      setError(null);
+    setLoading(true);
+    setError(null);
 
-      try {
-        const id = await getOrgId();
-        setOrgId(id);
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown error'));
-      } finally {
-        setLoading(false);
-      }
-    };
+    try {
+      const result = await getConfig();
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Unknown error'));
+    } finally {
+      setLoading(false);
+    }
+  }, [data, getConfig, isReady, loading]);
 
-    fetchOrgId();
-  }, [getOrgId, isReady, setOrgId]);
+  console.log('====== useUIConfig hook ======', isReady, loading, data, error);
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
 
-  return { orgId, loading, error };
+  return { data, loading, error, refetch: fetchConfig };
 };