@envive-ai/react-hooks 0.2.10 → 0.2.11

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

@@ -1,13 +1,13 @@
-import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import { Provider } from "jotai";
-import { useAtomValue } from "jotai";
-import { EnviveConfigProvider, useEnviveConfig } from "../enviveConfigContext";
-import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Provider } from 'jotai';
+import { useAtomValue } from 'jotai';
+import { EnviveConfigProvider, useEnviveConfig } from '../enviveConfigContext';
+import { enviveConfigAtom } from 'src/atoms/envive/enviveConfig';
+import Logger from 'src/application/logging/logger';
 
 // Mock the Logger to avoid console output in tests
-vi.spyOn(Logger, "logDebug").mockImplementation(() => {});
+vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});
 
 // Mock component that uses the useEnviveConfig hook
 const MockComponent: React.FC = () => {
@@ -15,18 +15,18 @@ const MockComponent: React.FC = () => {
 
   return (
     <div data-testid="mock-component">
-      <div data-testid="amplitude-api-key">{config?.amplitudeApiKey || "not-set"}</div>
-      <div data-testid="base-url">{config?.baseUrl || "not-set"}</div>
-      <div data-testid="org-short-name">{config?.orgShortName || "not-set"}</div>
-      <div data-testid="identifying-prefix">{config?.identifyingPrefix || "not-set"}</div>
-      <div data-testid="env">{config?.env || "not-set"}</div>
-      <div data-testid="cdn-url">{config?.cdnUrl || "not-set"}</div>
-      <div data-testid="data-residency">{config?.dataResidency || "not-set"}</div>
-      <div data-testid="react-app-name">{config?.reactAppName || "not-set"}</div>
-      <div data-testid="context-source">{config?.contextSource || "not-set"}</div>
-      <div data-testid="org-level-api-key">{config?.orgLevelApiKey || "not-set"}</div>
-      <div data-testid="public-key">{config?.publicKey || "not-set"}</div>
-      <div data-testid="show">{config?.show?.toString() || "not-set"}</div>
+      <div data-testid="amplitude-api-key">{config?.amplitudeApiKey || 'not-set'}</div>
+      <div data-testid="base-url">{config?.baseUrl || 'not-set'}</div>
+      <div data-testid="org-short-name">{config?.orgShortName || 'not-set'}</div>
+      <div data-testid="identifying-prefix">{config?.identifyingPrefix || 'not-set'}</div>
+      <div data-testid="env">{config?.env || 'not-set'}</div>
+      <div data-testid="cdn-url">{config?.cdnUrl || 'not-set'}</div>
+      <div data-testid="data-residency">{config?.dataResidency || 'not-set'}</div>
+      <div data-testid="react-app-name">{config?.reactAppName || 'not-set'}</div>
+      <div data-testid="context-source">{config?.contextSource || 'not-set'}</div>
+      <div data-testid="org-level-api-key">{config?.orgLevelApiKey || 'not-set'}</div>
+      <div data-testid="public-key">{config?.publicKey || 'not-set'}</div>
+      <div data-testid="show">{config?.show?.toString() || 'not-set'}</div>
     </div>
   );
 };
@@ -37,35 +37,31 @@ const AtomReaderComponent: React.FC = () => {
 
   return (
     <div data-testid="atom-reader">
-      <div data-testid="atom-amplitude-api-key">
-        {config?.amplitudeApiKey || "not-set"}
-      </div>
-      <div data-testid="atom-identifying-prefix">
-        {config?.identifyingPrefix || "not-set"}
-      </div>
+      <div data-testid="atom-amplitude-api-key">{config?.amplitudeApiKey || 'not-set'}</div>
+      <div data-testid="atom-identifying-prefix">{config?.identifyingPrefix || 'not-set'}</div>
     </div>
   );
 };
 
-describe("EnviveConfigProvider", () => {
+describe('EnviveConfigProvider', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  describe("Provider Integration with Jotai Store", () => {
-    it("should set the enviveConfigAtom when provider is mounted", async () => {
+  describe('Provider Integration with Jotai Store', () => {
+    it('should set the enviveConfigAtom when provider is mounted', async () => {
       const testConfig = {
-        amplitudeApiKey: "test-amplitude-key",
-        baseUrl: "https://test-api.example.com",
-        orgShortName: "test-org",
-        identifyingPrefix: "test-prefix",
-        env: "test",
-        cdnUrl: "https://test-cdn.example.com",
-        dataResidency: "us",
-        reactAppName: "test-app",
-        contextSource: "test-source",
-        orgLevelApiKey: "test-org-key",
-        publicKey: "test-public-key",
+        amplitudeApiKey: 'test-amplitude-key',
+        baseUrl: 'https://test-api.example.com',
+        orgShortName: 'test-org',
+        identifyingPrefix: 'test-prefix',
+        env: 'test',
+        cdnUrl: 'https://test-cdn.example.com',
+        dataResidency: 'us',
+        reactAppName: 'test-app',
+        contextSource: 'test-source',
+        orgLevelApiKey: 'test-org-key',
+        publicKey: 'test-public-key',
         show: true,
       };
 
@@ -87,25 +83,25 @@ describe("EnviveConfigProvider", () => {
           >
             <AtomReaderComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       // Wait for the atom to be set (useEffect runs after render)
       await waitFor(() => {
-        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
-          testConfig.amplitudeApiKey
+        expect(screen.getByTestId('atom-amplitude-api-key')).toHaveTextContent(
+          testConfig.amplitudeApiKey,
         );
       });
 
-      expect(screen.getByTestId("atom-identifying-prefix")).toHaveTextContent(
-        testConfig.identifyingPrefix
+      expect(screen.getByTestId('atom-identifying-prefix')).toHaveTextContent(
+        testConfig.identifyingPrefix,
       );
     });
 
-    it("should update the atom when provider props change", async () => {
+    it('should update the atom when provider props change', async () => {
       const initialConfig = {
-        amplitudeApiKey: "initial-key",
-        identifyingPrefix: "initial-prefix",
+        amplitudeApiKey: 'initial-key',
+        identifyingPrefix: 'initial-prefix',
       };
 
       const { rerender } = render(
@@ -116,18 +112,18 @@ describe("EnviveConfigProvider", () => {
           >
             <AtomReaderComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
-          initialConfig.amplitudeApiKey
+        expect(screen.getByTestId('atom-amplitude-api-key')).toHaveTextContent(
+          initialConfig.amplitudeApiKey,
         );
       });
 
       const updatedConfig = {
-        amplitudeApiKey: "updated-key",
-        identifyingPrefix: "updated-prefix",
+        amplitudeApiKey: 'updated-key',
+        identifyingPrefix: 'updated-prefix',
       };
 
       rerender(
@@ -138,35 +134,35 @@ describe("EnviveConfigProvider", () => {
           >
             <AtomReaderComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
-          updatedConfig.amplitudeApiKey
+        expect(screen.getByTestId('atom-amplitude-api-key')).toHaveTextContent(
+          updatedConfig.amplitudeApiKey,
         );
       });
 
-      expect(screen.getByTestId("atom-identifying-prefix")).toHaveTextContent(
-        updatedConfig.identifyingPrefix
+      expect(screen.getByTestId('atom-identifying-prefix')).toHaveTextContent(
+        updatedConfig.identifyingPrefix,
       );
     });
   });
 
-  describe("useEnviveConfig Hook Integration", () => {
-    it("should allow components to access config via useEnviveConfig hook", async () => {
+  describe('useEnviveConfig Hook Integration', () => {
+    it('should allow components to access config via useEnviveConfig hook', async () => {
       const testConfig = {
-        amplitudeApiKey: "hook-test-key",
-        baseUrl: "https://hook-test-api.example.com",
-        orgShortName: "hook-test-org",
-        identifyingPrefix: "hook-prefix",
-        env: "production",
-        cdnUrl: "https://hook-test-cdn.example.com",
-        dataResidency: "eu",
-        reactAppName: "hook-test-app",
-        contextSource: "hook-source",
-        orgLevelApiKey: "hook-org-key",
-        publicKey: "hook-public-key",
+        amplitudeApiKey: 'hook-test-key',
+        baseUrl: 'https://hook-test-api.example.com',
+        orgShortName: 'hook-test-org',
+        identifyingPrefix: 'hook-prefix',
+        env: 'production',
+        cdnUrl: 'https://hook-test-cdn.example.com',
+        dataResidency: 'eu',
+        reactAppName: 'hook-test-app',
+        contextSource: 'hook-source',
+        orgLevelApiKey: 'hook-org-key',
+        publicKey: 'hook-public-key',
         show: false,
       };
 
@@ -188,60 +184,40 @@ describe("EnviveConfigProvider", () => {
           >
             <MockComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       // Wait for the config to be available
       await waitFor(() => {
-        expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent(
-          testConfig.amplitudeApiKey
+        expect(screen.getByTestId('amplitude-api-key')).toHaveTextContent(
+          testConfig.amplitudeApiKey,
         );
       });
 
       // Verify all config values are accessible via the hook
-      expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent(
-        testConfig.amplitudeApiKey
-      );
-      expect(screen.getByTestId("base-url")).toHaveTextContent(
-        testConfig.baseUrl
-      );
-      expect(screen.getByTestId("org-short-name")).toHaveTextContent(
-        testConfig.orgShortName
-      );
-      expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
-        testConfig.identifyingPrefix
-      );
-      expect(screen.getByTestId("env")).toHaveTextContent(testConfig.env);
-      expect(screen.getByTestId("cdn-url")).toHaveTextContent(
-        testConfig.cdnUrl
-      );
-      expect(screen.getByTestId("data-residency")).toHaveTextContent(
-        testConfig.dataResidency
-      );
-      expect(screen.getByTestId("react-app-name")).toHaveTextContent(
-        testConfig.reactAppName
-      );
-      expect(screen.getByTestId("context-source")).toHaveTextContent(
-        testConfig.contextSource
-      );
-      expect(screen.getByTestId("org-level-api-key")).toHaveTextContent(
-        testConfig.orgLevelApiKey
-      );
-      expect(screen.getByTestId("public-key")).toHaveTextContent(
-        testConfig.publicKey
-      );
-      expect(screen.getByTestId("show")).toHaveTextContent(
-        testConfig.show.toString()
+      expect(screen.getByTestId('amplitude-api-key')).toHaveTextContent(testConfig.amplitudeApiKey);
+      expect(screen.getByTestId('base-url')).toHaveTextContent(testConfig.baseUrl);
+      expect(screen.getByTestId('org-short-name')).toHaveTextContent(testConfig.orgShortName);
+      expect(screen.getByTestId('identifying-prefix')).toHaveTextContent(
+        testConfig.identifyingPrefix,
       );
+      expect(screen.getByTestId('env')).toHaveTextContent(testConfig.env);
+      expect(screen.getByTestId('cdn-url')).toHaveTextContent(testConfig.cdnUrl);
+      expect(screen.getByTestId('data-residency')).toHaveTextContent(testConfig.dataResidency);
+      expect(screen.getByTestId('react-app-name')).toHaveTextContent(testConfig.reactAppName);
+      expect(screen.getByTestId('context-source')).toHaveTextContent(testConfig.contextSource);
+      expect(screen.getByTestId('org-level-api-key')).toHaveTextContent(testConfig.orgLevelApiKey);
+      expect(screen.getByTestId('public-key')).toHaveTextContent(testConfig.publicKey);
+      expect(screen.getByTestId('show')).toHaveTextContent(testConfig.show.toString());
     });
 
-    it("should return empty object when config is not set", () => {
+    it('should return empty object when config is not set', () => {
       // Component that uses the hook without provider
       const UnwrappedComponent: React.FC = () => {
         const config = useEnviveConfig();
         return (
           <div data-testid="unwrapped">
-            {config && Object.keys(config).length === 0 ? "empty" : "not-empty"}
+            {config && Object.keys(config).length === 0 ? 'empty' : 'not-empty'}
           </div>
         );
       };
@@ -249,16 +225,16 @@ describe("EnviveConfigProvider", () => {
       render(
         <Provider>
           <UnwrappedComponent />
-        </Provider>
+        </Provider>,
       );
 
       // The hook should return an empty object when config is not set
-      expect(screen.getByTestId("unwrapped")).toHaveTextContent("empty");
+      expect(screen.getByTestId('unwrapped')).toHaveTextContent('empty');
     });
 
-    it("should handle optional props correctly", async () => {
+    it('should handle optional props correctly', async () => {
       const minimalConfig = {
-        identifyingPrefix: "minimal-prefix",
+        identifyingPrefix: 'minimal-prefix',
       };
 
       render(
@@ -266,22 +242,22 @@ describe("EnviveConfigProvider", () => {
           <EnviveConfigProvider identifyingPrefix={minimalConfig.identifyingPrefix}>
             <MockComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
-          minimalConfig.identifyingPrefix
+        expect(screen.getByTestId('identifying-prefix')).toHaveTextContent(
+          minimalConfig.identifyingPrefix,
         );
       });
 
       // Optional props should show "not-set" when not provided
-      expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent("not-set");
-      expect(screen.getByTestId("base-url")).toHaveTextContent("not-set");
-      expect(screen.getByTestId("org-short-name")).toHaveTextContent("not-set");
+      expect(screen.getByTestId('amplitude-api-key')).toHaveTextContent('not-set');
+      expect(screen.getByTestId('base-url')).toHaveTextContent('not-set');
+      expect(screen.getByTestId('org-short-name')).toHaveTextContent('not-set');
     });
 
-    it("should handle featureOverrides and featureGates", async () => {
+    it('should handle featureOverrides and featureGates', async () => {
       const featureOverrides = {
         feature1: true,
         feature2: false,
@@ -289,7 +265,7 @@ describe("EnviveConfigProvider", () => {
 
       const featureGates = [
         {
-          featureName: "testFeature",
+          featureName: 'testFeature',
           enabled: true,
         },
       ] as any[];
@@ -301,9 +277,7 @@ describe("EnviveConfigProvider", () => {
             <div data-testid="feature-overrides">
               {JSON.stringify(config?.featureOverrides || {})}
             </div>
-            <div data-testid="feature-gates">
-              {JSON.stringify(config?.featureGates || [])}
-            </div>
+            <div data-testid="feature-gates">{JSON.stringify(config?.featureGates || [])}</div>
           </div>
         );
       };
@@ -317,26 +291,24 @@ describe("EnviveConfigProvider", () => {
           >
             <FeatureConfigComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("feature-overrides")).toHaveTextContent(
-          JSON.stringify(featureOverrides)
+        expect(screen.getByTestId('feature-overrides')).toHaveTextContent(
+          JSON.stringify(featureOverrides),
         );
       });
 
-      expect(screen.getByTestId("feature-gates")).toHaveTextContent(
-        JSON.stringify(featureGates)
-      );
+      expect(screen.getByTestId('feature-gates')).toHaveTextContent(JSON.stringify(featureGates));
     });
   });
 
-  describe("Provider Context Integration", () => {
-    it("should provide config through React Context", async () => {
+  describe('Provider Context Integration', () => {
+    it('should provide config through React Context', async () => {
       const testConfig = {
-        identifyingPrefix: "context-prefix",
-        orgShortName: "context-org",
+        identifyingPrefix: 'context-prefix',
+        orgShortName: 'context-org',
       };
 
       render(
@@ -347,41 +319,42 @@ describe("EnviveConfigProvider", () => {
           >
             <MockComponent />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
-          testConfig.identifyingPrefix
+        expect(screen.getByTestId('identifying-prefix')).toHaveTextContent(
+          testConfig.identifyingPrefix,
         );
       });
 
-      expect(screen.getByTestId("org-short-name")).toHaveTextContent(
-        testConfig.orgShortName
-      );
+      expect(screen.getByTestId('org-short-name')).toHaveTextContent(testConfig.orgShortName);
     });
 
-    it("should not render children when config is falsy", () => {
+    it('should not render children when config is falsy', () => {
       const TestChild: React.FC = () => <div data-testid="child">Child</div>;
 
       // This shouldn't happen in practice, but testing the conditional render
       const { container } = render(
         <Provider>
-          <EnviveConfigProvider identifyingPrefix="" show={false}>
+          <EnviveConfigProvider
+            identifyingPrefix=""
+            show={false}
+          >
             <TestChild />
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       // Children should still render even if some props are falsy
       // The condition `config ? children : null` checks if config object exists, not individual props
-      expect(screen.getByTestId("child")).toBeInTheDocument();
+      expect(screen.getByTestId('child')).toBeInTheDocument();
     });
   });
 
-  describe("Logger Integration", () => {
-    it("should log debug message when setting config", async () => {
-      const logSpy = vi.spyOn(Logger, "logDebug");
+  describe('Logger Integration', () => {
+    it('should log debug message when setting config', async () => {
+      const logSpy = vi.spyOn(Logger, 'logDebug');
 
       render(
         <Provider>
@@ -391,16 +364,16 @@ describe("EnviveConfigProvider", () => {
           >
             <div>Test</div>
           </EnviveConfigProvider>
-        </Provider>
+        </Provider>,
       );
 
       await waitFor(() => {
         expect(logSpy).toHaveBeenCalledWith(
-          "EnviveConfigProvider: Setting EnviveConfig",
+          'EnviveConfigProvider: Setting EnviveConfig',
           expect.objectContaining({
-            identifyingPrefix: "test",
-            amplitudeApiKey: "test-key",
-          })
+            identifyingPrefix: 'test',
+            amplitudeApiKey: 'test-key',
+          }),
         );
       });
 
@@ -408,4 +381,3 @@ describe("EnviveConfigProvider", () => {
     });
   });
 });
-

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, useContext, ReactNode, useEffect } from "react";
-import { useSetAtom, useAtomValue } from "jotai";
-import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
-import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
-import { EnviveConfig } from "../types";
+import React, { createContext, useContext, ReactNode, useEffect } from 'react';
+import { useSetAtom, useAtomValue } from 'jotai';
+import { enviveConfigAtom } from 'src/atoms/envive/enviveConfig';
+import Logger from 'src/application/logging/logger';
+import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
+import { EnviveConfig } from '../types';
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
@@ -69,7 +69,7 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 
   useEffect(() => {
     setEnviveConfig(config);
-    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", config);
+    Logger.logDebug('EnviveConfigProvider: Setting EnviveConfig', config);
   }, [setEnviveConfig, config]);
 
   return (

package/src/contexts/enviveConfigContext/index.ts

@@ -1 +1 @@
-export * from "./enviveConfigContext";
+export * from './enviveConfigContext';

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -1,13 +1,11 @@
-import React, { ReactNode } from "react";
-import { useNewOrgConfig } from "src/hooks/NewOrgConfig";
+import React, { ReactNode } from 'react';
+import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
 
 interface EnviveCssProviderProps {
   children: ReactNode;
 }
 
-export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
-  children,
-}) => {
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }) => {
   const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
   let merchantThemeCss = `* {}`;
   if (colorsConfig && !loading) {
@@ -39,9 +37,7 @@ export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
       {frontendConfig ? (
         <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
       ) : null}
-      {colorsConfig ? (
-        <style id="merchant-css-colors">{`${merchantThemeCss}`}</style>
-      ) : null}
+      {colorsConfig ? <style id="merchant-css-colors">{`${merchantThemeCss}`}</style> : null}
 
       {children}
     </>

package/src/contexts/enviveCssContext/index.ts

@@ -1 +1 @@
-export * from "./enviveCssContext";
+export * from './enviveCssContext';