@envive-ai/react-hooks 0.3.32 → 0.3.33

package/src/contexts/enviveContext/enviveContext.tsx

@@ -1,15 +1,14 @@
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
-import { EnviveConfigService, EnviveServiceConfig } from 'src/services/enviveConfigService';
 import { AmplitudeService } from 'src/services/amplitudeService/amplitudeService';
+import { EnviveServiceConfig, IEnviveConfigService } from 'src/services/enviveConfigService';
+import { IHardcopyService } from 'src/services/hardcopyService';
+import { IUserIdentityService } from 'src/services/userIdentityService';
 import Logger from 'src/application/logging/logger';
-import { UserIdentityService } from 'src/services/userIdentityService';
 import { AmplitudeProvider } from '../amplitudeContext';
 import { EnviveConfigProvider } from '../enviveConfigContext';
 import { EnviveCssProvider } from '../enviveCssContext';
 import { FeatureFlagService, FeatureFlagServiceProvider } from '../featureFlagServiceContext';
-import { GraphQLProvider, GraphQlConfigValues } from '../graphqlContext';
 import { LocalStorageProvider } from '../localStorageContext';
 import { NewOrgConfigProvider } from '../newOrgConfigContext';
 import { UserIdentityProvider } from '../userIdentityContext';
@@ -17,8 +16,7 @@ import { EnviveAgent } from './types';
 import { SearchProvider } from '../searchContext';
 import { SalesAgentProvider } from '../salesAgentContext/salesAgentContext';
 import { SystemSettingsContextProvider } from '../systemSettingsContext';
-import { HardcopyProvider, HardcopyResponse } from '../hardcopyContext';
-import { WidgetTypeV3 } from '../typesV3';
+import { HardcopyProvider } from '../hardcopyContext';
 import { WidgetConfigProvider } from '../widgetConfigContext';
 import { PageProvider } from '../pageContext';
 import { WindowChatToggleBinder } from './WindowChatToggleBinder';
@@ -36,35 +34,23 @@ export interface ExtensionStatusCallbacks {
   onInjectionError?: (error: Error) => Promise<unknown> | void;
 }
 
+export interface EnviveServices {
+  enviveConfigService: IEnviveConfigService;
+  amplitudeService: AmplitudeService;
+  userIdentityService: IUserIdentityService;
+  hardcopyService: IHardcopyService;
+  extensionService?: ExtensionStatusCallbacks;
+}
+
 interface EnviveProviderProps extends AgentWrapperProps {
-  amplitudeApiKey?: string;
-  dataResidency?: string;
-  env?: string;
-  baseUrl?: string;
-  reactAppName?: string;
-  cdnUrl?: string;
-  contextSource?: string;
-  orgLevelApiKey?: string;
-  orgShortName?: string;
   identifyingPrefix: string;
-  featureOverrides?: Record<string, boolean>;
-  variantUrlOverride?: string;
-  variantInfoOverride?: any;
+  services: EnviveServices;
   show?: boolean;
   enviveOn?: boolean;
-  publicKey?: string;
-  featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
-  featureFlagService?: FeatureFlagService;
-  enviveConfigService?: EnviveConfigService;
-  amplitudeService?: AmplitudeService;
-  mockV3ConfigToDeprecatedConfig?: boolean;
-  requestV3Config?: boolean;
-  userIdentityService?: UserIdentityService;
+  cdnUrl?: string;
+  reactAppName?: string;
   previewMode?: boolean;
-  overrideConfig?: GraphQlConfigValues;
   mockSalesAgentData?: any;
-  hardcopyOverride?: Partial<Record<WidgetTypeV3, HardcopyResponse>>;
-  extensionService?: ExtensionStatusCallbacks;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -105,27 +91,23 @@ const SalesAgentWrapper: React.FC<SalesAgentWrapperProps> = ({
 export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   children,
   previewMode = false,
-  overrideConfig,
   enabledAgents,
-  enviveConfigService: inputEnviveConfigService,
-  featureFlagService: inputFeatureFlagService,
-  amplitudeService: inputAmplitudeService,
-  userIdentityService: inputUserIdentityService,
-  mockV3ConfigToDeprecatedConfig = false,
-  requestV3Config = false,
+  services,
   mockSalesAgentData,
-  hardcopyOverride,
-  extensionService,
-  ...config
+  show,
+  enviveOn,
+  cdnUrl,
+  reactAppName,
+  identifyingPrefix,
 }) => {
-  const [userId, setUserId] = useState<string>('');
+  const { extensionService } = services;
+  const [enviveServiceConfig, setEnviveServiceConfig] = useState<EnviveServiceConfig | null>(null);
   const didReportSuccessRef = useRef(false);
 
   const invokeExtensionCallback = useCallback((callback?: () => Promise<unknown> | void) => {
     if (!callback) {
       return;
     }
-
     Promise.resolve(callback()).catch(error => {
       logger.logDebug('Extension status callback failed', error);
     });
@@ -136,7 +118,6 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
       if (!extensionService?.onInjectionError) {
         return;
       }
-
       Promise.resolve(extensionService.onInjectionError(error)).catch(callbackError => {
         logger.logDebug('Extension error callback failed', callbackError);
       });
@@ -144,44 +125,13 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
     [extensionService],
   );
 
-  const userIdService = useMemo(
-    () =>
-      inputUserIdentityService ??
-      new UserIdentityService({ apiKey: config?.amplitudeApiKey || '' }),
-    [config?.amplitudeApiKey, inputUserIdentityService],
-  );
-
-  useEffect(() => {
-    const fetchUserId = async () => {
-      const id = await userIdService.getUserIdOrDefault();
-      setUserId(id);
-    };
-
-    fetchUserId();
-  }, [config.amplitudeApiKey, inputUserIdentityService, userIdService]);
-
-  const namespace = 'spiffy-react-components'; // TODO: Should this be different from the current namespace?
-  const source = 'app'; // TODO: Make this dependent upon the "spiffy_on" query param
-  const [enviveServiceConfig, setEnviveServiceConfig] = useState<EnviveServiceConfig | null>(null);
-
   useEffect(() => {
     invokeExtensionCallback(extensionService?.onInjectionLoading);
 
-    // Really not happy with this approach, but I'm seeing 429 errors in the tests
-    // because of the rate limiting on the API.
-    const enviveConfigService =
-      inputEnviveConfigService ??
-      new EnviveConfigService({
-        baseUrl: config?.baseUrl || '',
-        apiKey: config?.orgLevelApiKey || '',
-        userId,
-        namespace: namespace || '',
-        source: source || '',
-      });
     const fetchEnviveConfig = async () => {
       try {
-        const newConfig = await enviveConfigService.getEnviveConfig();
-        setEnviveServiceConfig(newConfig);
+        const config = await services.enviveConfigService.getEnviveConfig();
+        setEnviveServiceConfig(config);
       } catch (error) {
         const resolvedError =
           error instanceof Error ? error : new Error('Failed to load envive config');
@@ -192,11 +142,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
 
     fetchEnviveConfig();
   }, [
-    config,
-    userId,
-    namespace,
-    source,
-    inputEnviveConfigService,
+    services.enviveConfigService,
     extensionService,
     invokeExtensionCallback,
     invokeExtensionErrorCallback,
@@ -206,71 +152,63 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
     if (!enviveServiceConfig || didReportSuccessRef.current) {
       return;
     }
-
     didReportSuccessRef.current = true;
     invokeExtensionCallback(extensionService?.onInjectionSuccess);
   }, [enviveServiceConfig, extensionService, invokeExtensionCallback]);
 
-  const enviveConfig = useMemo(
-    () => ({
-      ...config,
-      featureGates: enviveServiceConfig?.gates || [],
-      orgShortName: enviveServiceConfig?.org?.org?.short_name || '',
-      orgId: enviveServiceConfig?.org?.org?.id || '',
-    }),
-    [config, enviveServiceConfig],
-  );
-  logger.logDebug('enviveContext: enviveServiceConfig', enviveServiceConfig, config);
-  logger.logDebug('enviveContext: enviveConfig', enviveConfig);
-
   const featureFlagService = useMemo(
-    () => inputFeatureFlagService ?? new FeatureFlagService(enviveConfig.featureGates),
-    [enviveConfig.featureGates, inputFeatureFlagService],
+    () => new FeatureFlagService(enviveServiceConfig?.gates ?? []),
+    [enviveServiceConfig?.gates],
   );
 
-  if (enviveServiceConfig === null || enviveConfig === null) {
+  if (enviveServiceConfig === null) {
     return null;
   }
 
   return (
-    <EnviveConfigProvider {...enviveConfig}>
-      <GraphQLProvider
-        mockV3ConfigToDeprecatedConfig={mockV3ConfigToDeprecatedConfig}
-        requestV3Config={requestV3Config}
-      >
-        <NewOrgConfigProvider overrideConfig={overrideConfig}>
-          <LocalStorageProvider>
-            <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
-              <UserIdentityProvider userIdService={userIdService}>
-                <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
-                  <PageProvider
-                    previewMode={previewMode}
-                    onUrlResolverNotReady={extensionService?.onInjectionError}
-                  >
-                    <WidgetConfigProvider>
-                      <HardcopyProvider hardcopyOverride={hardcopyOverride}>
-                        <EnviveCssProvider>
-                          <SearchAgentWrapper enabledAgents={enabledAgents}>
-                            <WindowChatToggleBinder />
-                            <SalesAgentWrapper
-                              enabledAgents={enabledAgents}
-                              showDebugBar={config.enviveOn || false}
-                              previewMode={previewMode}
-                              mockSalesAgentData={mockSalesAgentData}
-                            >
-                              {children}
-                            </SalesAgentWrapper>
-                          </SearchAgentWrapper>
-                        </EnviveCssProvider>
-                      </HardcopyProvider>
-                    </WidgetConfigProvider>
-                  </PageProvider>
-                </AmplitudeProvider>
-              </UserIdentityProvider>
-            </FeatureFlagServiceProvider>
-          </LocalStorageProvider>
-        </NewOrgConfigProvider>
-      </GraphQLProvider>
+    <EnviveConfigProvider
+      identifyingPrefix={identifyingPrefix}
+      baseUrl={services.enviveConfigService.baseUrl}
+      orgLevelApiKey={services.enviveConfigService.apiKey}
+      orgShortName={enviveServiceConfig.org.org.short_name}
+      orgId={enviveServiceConfig.org.org.id}
+      show={show}
+      enviveOn={enviveOn}
+      cdnUrl={cdnUrl}
+      reactAppName={reactAppName}
+    >
+      <NewOrgConfigProvider config={enviveServiceConfig.orgConfig ?? {}}>
+        <LocalStorageProvider>
+          <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
+            <UserIdentityProvider userIdService={services.userIdentityService}>
+              <AmplitudeProvider externalAmplitudeService={services.amplitudeService}>
+                <PageProvider
+                  previewMode={previewMode}
+                  onUrlResolverNotReady={extensionService?.onInjectionError}
+                >
+                  <WidgetConfigProvider>
+                    <HardcopyProvider hardcopyService={services.hardcopyService}>
+                      <EnviveCssProvider>
+                        <SearchAgentWrapper enabledAgents={enabledAgents}>
+                          <WindowChatToggleBinder />
+                          <SalesAgentWrapper
+                            enabledAgents={enabledAgents}
+                            showDebugBar={enviveOn || false}
+                            previewMode={previewMode}
+                            mockSalesAgentData={mockSalesAgentData}
+                          >
+                            {children}
+                          </SalesAgentWrapper>
+                        </SearchAgentWrapper>
+                      </EnviveCssProvider>
+                    </HardcopyProvider>
+                  </WidgetConfigProvider>
+                </PageProvider>
+              </AmplitudeProvider>
+            </UserIdentityProvider>
+          </FeatureFlagServiceProvider>
+        </LocalStorageProvider>
+      </NewOrgConfigProvider>
     </EnviveConfigProvider>
   );
 };

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -93,23 +93,38 @@ export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }
   --${FontSizeCSSVar.L1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.l1};
   --${FontSizeCSSVar.L2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.l2};
 
-  --${FontWeightCSSVar.RG}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.rg};
-  --${FontWeightCSSVar.MD}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.md};
-  --${FontWeightCSSVar.SB}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.sb};
-
-  --${LetterSpacingCSSVar.Tight0}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.['0']};
-  --${LetterSpacingCSSVar.Wide1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.['wide-1']};
-
-  --${LineHeightCSSVar.LineHeight124}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[124]};
-  --${LineHeightCSSVar.LineHeight120}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[120]};
-  --${LineHeightCSSVar.LineHeight118}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[118]};
-  --${LineHeightCSSVar.LineHeight116}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[116]};
-  --${LineHeightCSSVar.LineHeight114}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[114]};
-  --${LineHeightCSSVar.LineHeight148}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[148]};
-  --${LineHeightCSSVar.LineHeight140}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[140]};
-  --${LineHeightCSSVar.LineHeight128}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[128]};
-  --${LineHeightCSSVar.LineHeight130}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[130]};
-  --${LineHeightCSSVar.LineHeight133}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[133]};
+  --${FontWeightCSSVar.Title}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.title};
+  --${FontWeightCSSVar.Header}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.header};
+  --${FontWeightCSSVar.BodyEmphasis}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.bodyEmphasis};
+  --${FontWeightCSSVar.BodyStandard}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.bodyStandard};
+
+  --${LetterSpacingCSSVar.T1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.t1};
+  --${LetterSpacingCSSVar.T2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.t2};
+  --${LetterSpacingCSSVar.T3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.t3};
+  --${LetterSpacingCSSVar.H1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.h1};
+  --${LetterSpacingCSSVar.H2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.h2};
+  --${LetterSpacingCSSVar.H3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.h3};
+  --${LetterSpacingCSSVar.B1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.b1};
+  --${LetterSpacingCSSVar.B2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.b2};
+  --${LetterSpacingCSSVar.B3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.b3};
+  --${LetterSpacingCSSVar.B4}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.b4};
+  --${LetterSpacingCSSVar.B5}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.b5};
+  --${LetterSpacingCSSVar.L1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.l1};
+  --${LetterSpacingCSSVar.L2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.l2};
+
+  --${LineHeightCSSVar.T1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.t1};
+  --${LineHeightCSSVar.T2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.t2};
+  --${LineHeightCSSVar.T3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.t3};
+  --${LineHeightCSSVar.H1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.h1};
+  --${LineHeightCSSVar.H2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.h2};
+  --${LineHeightCSSVar.H3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.h3};
+  --${LineHeightCSSVar.B1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.b1};
+  --${LineHeightCSSVar.B2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.b2};
+  --${LineHeightCSSVar.B3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.b3};
+  --${LineHeightCSSVar.B4}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.b4};
+  --${LineHeightCSSVar.B5}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.b5};
+  --${LineHeightCSSVar.L1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.l1};
+  --${LineHeightCSSVar.L2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.l2};
 
   --${ThemeCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.theme};
 

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

@@ -36,34 +36,6 @@ const MockGraphQLComponent: React.FC = () => {
       >
         Execute Query
       </button>
-      <button
-        data-testid="get-org-id-btn"
-        type="button"
-        onClick={async () => {
-          try {
-            const orgId = await client.getOrgId();
-            (window as any).lastOrgId = orgId;
-          } catch (error) {
-            (window as any).lastOrgIdError = error;
-          }
-        }}
-      >
-        Get Org ID
-      </button>
-      <button
-        data-testid="get-config-btn"
-        type="button"
-        onClick={async () => {
-          try {
-            const config = await client.getColorsAndFrontendConfig();
-            (window as any).lastConfig = config;
-          } catch (error) {
-            (window as any).lastConfigError = error;
-          }
-        }}
-      >
-        Get Config
-      </button>
     </div>
   );
 };
@@ -104,13 +76,8 @@ describe('GraphQLProvider', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     (global.fetch as any).mockClear();
-    // Clear any stored results
     delete (window as any).lastQueryResult;
     delete (window as any).lastQueryError;
-    delete (window as any).lastOrgId;
-    delete (window as any).lastOrgIdError;
-    delete (window as any).lastConfig;
-    delete (window as any).lastConfigError;
   });
 
   describe('Provider Integration with Jotai Store', () => {
@@ -403,7 +370,7 @@ describe('GraphQLProvider', () => {
     });
   });
 
-  describe('getOrgId', () => {
+  describe.skip('getOrgId', () => {
     it('should fetch and return org ID successfully', async () => {
       const mockOrgId = 'org-123';
       const mockResponse = {
@@ -528,7 +495,7 @@ describe('GraphQLProvider', () => {
     });
   });
 
-  describe('getColorsAndFrontendConfig', () => {
+  describe.skip('getColorsAndFrontendConfig', () => {
     it('should fetch and return colors and frontend config successfully', async () => {
       const mockColorsConfig = {
         accent_primary: '#FF0000',
@@ -694,7 +661,7 @@ describe('GraphQLProvider', () => {
 
         React.useEffect(() => {
           if (client.isReady) {
-            client.getColorsAndFrontendConfig().then(setConfig);
+            (client as any).getColorsAndFrontendConfig().then(setConfig);
           }
         }, [client]);