@envive-ai/react-hooks 0.3.1 → 0.3.3

package/src/contexts/featureFlagContext/featureFlagContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useCallback, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 import Logger from 'src/application/logging/logger';
 import { StatsigFeatureGate } from '@spiffy-ai/commerce-api-client';
 import { FeatureGates } from 'src/application/models/featureGates';

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, ReactNode } from 'react';
+import React, { ReactNode, createContext, useContext, useMemo } from 'react';
 import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
 import { FeatureGates } from 'src/application/models/featureGates';
 import Logger from 'src/application/logging/logger';

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import { Provider } from 'jotai';
-import { useAtomValue } from 'jotai';
-import { GraphQLProvider, useGraphQLClient } from '../graphqlContext';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { Provider, useAtomValue } from 'jotai';
 import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
-import { orgLevelApiKeyAtom, baseUrlAtom } from 'src/atoms/envive/enviveConfig';
+import { baseUrlAtom, orgLevelApiKeyAtom } from 'src/atoms/envive/enviveConfig';
 import Logger from 'src/application/logging/logger';
 import { getMerchantOrgIdQuery } from 'src/application/models/graphql/queries/getMerchantOrgIdQuery';
+import { GraphQLProvider, useGraphQLClient } from '../graphqlContext';
 
 // Mock the Logger to avoid console output in tests
 vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});
@@ -25,6 +24,7 @@ const MockGraphQLComponent: React.FC = () => {
       <div data-testid="is-ready">{client.isReady.toString()}</div>
       <button
         data-testid="execute-query-btn"
+        type="button"
         onClick={async () => {
           try {
             const result = await client.executeQuery('query { test }');
@@ -38,6 +38,7 @@ const MockGraphQLComponent: React.FC = () => {
       </button>
       <button
         data-testid="get-org-id-btn"
+        type="button"
         onClick={async () => {
           try {
             const orgId = await client.getOrgId();
@@ -51,6 +52,7 @@ const MockGraphQLComponent: React.FC = () => {
       </button>
       <button
         data-testid="get-config-btn"
+        type="button"
         onClick={async () => {
           try {
             const config = await client.getColorsAndFrontendConfig();

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -1,16 +1,12 @@
-import React, { createContext, useContext, useCallback, useMemo, ReactNode } from 'react';
+import React, { ReactNode, createContext, useCallback, useContext, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { baseUrlAtom, orgLevelApiKeyAtom } from 'src/atoms/envive/enviveConfig';
 import { getMerchantOrgIdQuery } from 'src/application/models/graphql/queries/getMerchantOrgIdQuery';
 import { validateGraphQLOrgId } from 'src/application/models/validators/validateGraphQLOrgId';
 import {
-  getMerchantColorsQuery,
   GetMerchantColorsQueryData,
-  getMerchantFrontendConfigQuery,
   GetMerchantFrontendConfigQueryData,
 } from 'src/application/models/graphql';
-import { validateGraphQLColorsConfig } from 'src/application/models/validators/validateGraphQLColorsConfig';
-import { validateGraphQLFrontendConfig } from 'src/application/models/validators/validateGraphQLFrontendConfig';
 import { ColorMapping } from 'src/application/models/colorsConfig';
 import { FrontendConfig } from 'src/application/models/frontendConfig';
 import Logger from 'src/application/logging/logger';

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -0,0 +1,70 @@
+import { UserEvent } from '@spiffy-ai/commerce-api-client';
+import { ReactNode, createContext, useCallback, useContext, useMemo } from 'react';
+import Logger from 'src/application/logging/logger';
+import { WidgetTypeV3 } from '../types';
+
+interface HardcopyRequest {
+  widgetType: WidgetTypeV3;
+  userEvent: UserEvent;
+}
+
+export type HardcopyResponse = {
+  language: string;
+  values: Record<string, string | string[]>;
+};
+
+interface HardcopyContextType {
+  getHardcopy: (HardcopyRequest: HardcopyRequest) => Promise<HardcopyResponse>;
+}
+
+// These are just sample responses for the sake of testing.
+// As we start to build the actual widgets we should determine what the actual
+// values and their names should be.
+const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> = {
+  [WidgetTypeV3.SuggestionBarV3]: {
+    language: 'en',
+    values: {
+      suggestionBarButtons: ['Button 1', 'Button 2', 'Button 3'],
+    },
+  },
+  [WidgetTypeV3.ChatPreviewV3]: {
+    language: 'en',
+    values: {
+      chatPreviewTitle: 'Chat Preview Title',
+      typewriterTextPrefix: 'Want to know',
+      typewriterTexts: ['more about this product?', 'what others are saying?', 'how to use it?'],
+      suggestionButtons: ['Button 1', 'Button 2', 'Button 3'],
+      footerText: 'Ask me anything...',
+
+      chatPreviewDescription: 'Chat Preview Description',
+    },
+  },
+};
+
+const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);
+
+export const HardcopyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const languages = useMemo(() => navigator.languages, []);
+
+  const getHardcopy = useCallback(async (request: HardcopyRequest): Promise<HardcopyResponse> => {
+    Logger.logInfo('hardcopyContext | retrieving hardcopy', languages);
+    const response = MOCK_HARDCOPY_RESPONSE[request.widgetType];
+    Logger.logInfo('hardcopyContext | returning hardcopy response', response);
+    if (!response) {
+      throw new Error(`No hardcopy response found for widget type: ${request.widgetType}`);
+    }
+    return response;
+  }, []);
+
+  const value = useMemo(() => ({ getHardcopy }), [getHardcopy]);
+
+  return <HardcopyContext.Provider value={value}>{children}</HardcopyContext.Provider>;
+};
+
+export const useHardcopy = () => {
+  const context = useContext(HardcopyContext);
+  if (!context) {
+    throw new Error('useHardcopy must be used within a HardcopyProvider');
+  }
+  return context;
+};

package/src/contexts/hardcopyContext/index.ts

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

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import { LocalStorageProvider, useLocalStorage, LocalStorageKeys } from '../localStorageContext';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import Logger from 'src/application/logging/logger';
 import { LocalStorageEventListener } from 'src/application/models/localStorageEventListener';
+import { LocalStorageKeys, LocalStorageProvider, useLocalStorage } from '../localStorageContext';
 
 // Mock the Logger to avoid console output in tests
 vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});
@@ -56,6 +56,7 @@ const MockLocalStorageComponent: React.FC = () => {
       <div data-testid="event-received">{eventReceived.toString()}</div>
       <button
         data-testid="set-item-btn"
+        type="button"
         onClick={() => {
           setItem('test-key', 'test-value');
           setTestValue(getItem('test-key'));
@@ -65,6 +66,7 @@ const MockLocalStorageComponent: React.FC = () => {
       </button>
       <button
         data-testid="set-spiffy-on-true-btn"
+        type="button"
         onClick={() => {
           setSpiffyOnFeatureFlag(true);
           setSpiffyOnValue(getSpiffyOnFeatureFlag());
@@ -74,6 +76,7 @@ const MockLocalStorageComponent: React.FC = () => {
       </button>
       <button
         data-testid="set-spiffy-on-false-btn"
+        type="button"
         onClick={() => {
           setSpiffyOnFeatureFlag(false);
           setSpiffyOnValue(getSpiffyOnFeatureFlag());
@@ -83,6 +86,7 @@ const MockLocalStorageComponent: React.FC = () => {
       </button>
       <button
         data-testid="trigger-event-btn"
+        type="button"
         onClick={() => {
           setItem('test-listener-key', 'event-value');
         }}
@@ -479,7 +483,9 @@ describe('LocalStorageProvider', () => {
       });
 
       // Wait a bit to ensure listener is attached
-      await new Promise(resolve => setTimeout(resolve, 50));
+      await new Promise(resolve => {
+        setTimeout(resolve, 50);
+      });
 
       await act(async () => {
         screen.getByTestId('trigger-event-btn').click();

package/src/contexts/localStorageContext/localStorageContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
 import Logger from 'src/application/logging/logger';
 import { LocalStorageEventListener } from 'src/application/models/localStorageEventListener';
 

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Provider } from 'jotai';
-import { useAtomValue } from 'jotai';
-import { NewOrgConfigProvider, useNewOrgConfigContext } from '../newOrgConfigContext';
+import { Provider, useAtomValue } from 'jotai';
 import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
 import { GraphQLProvider } from 'src/contexts/graphqlContext/graphqlContext';
 import { LocalStorageProvider } from 'src/contexts/localStorageContext/localStorageContext';
 import { newOrgConfigAtom } from 'src/atoms/org/newOrgConfigAtom';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
 import { useColorsAndFrontendConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
+import { NewOrgConfigProvider, useNewOrgConfigContext } from '../newOrgConfigContext';
 
 // Mock the useColorsAndFrontendConfig hook
 vi.mock('src/hooks/GraphQLConfig/useGraphQLConfig', () => ({

package/src/contexts/newOrgConfigContext/newOrgConfigContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import React, { ReactNode, createContext, useContext, useMemo } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useColorsAndFrontendConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';