@envive-ai/react-hooks 0.3.0 → 0.3.2

package/src/atoms/app/index.ts

@@ -2,13 +2,11 @@ import { ContextEnvEnum, ContextSourceEnum } from '@spiffy-ai/commerce-api-clien
 import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import { VariantInfo } from 'src/application/models';
-import {
-  UserIdentityContextType,
-  useUserIdentity,
-} from 'src/contexts/userIdentityContext/userIdentityContext';
-import { variantInfoAtom } from 'src/atoms/app/variant';
+import { UserIdentityContextType } from 'src/contexts/userIdentityContext/userIdentityContext';
 import { v4 as uuid } from 'uuid';
-import { contextSourceAtom } from '../envive/enviveConfig';
+import { contextSourceAtom, envAtom, orgShortNameAtom } from '../envive/enviveConfig';
+import { orgIdAtom } from '../org/graphqlConfig';
+import { variantInfoAtom } from './variant';
 
 export interface AppDetails {
   orgId: string;
@@ -49,3 +47,16 @@ export const appSourceAtom = atom<ContextSourceEnum>(
 export const chatIdAtom = atomWithStorage<string>('v1-spiffy-chat-session-id', uuid(), undefined, {
   getOnInit: true,
 });
+
+export const appDetailsAtom = atom(
+  (get): AppDetails => ({
+    orgId: get(orgIdAtom) ?? '',
+    // TODO: orgShortName should be available when this atom is created
+    orgShortName: get(orgShortNameAtom) ?? 'spiffy-ai',
+    chatId: get(chatIdAtom),
+    userId: get(userIdAtom),
+    source: get(appSourceAtom),
+    env: get(envAtom) as ContextEnvEnum,
+    variantInfo: get(variantInfoAtom),
+  }),
+);

package/src/atoms/app/variant.ts

@@ -1,20 +1,23 @@
 import { atomWithStorage } from 'jotai/utils';
 import { atom } from 'jotai';
-import { SupportedEventResponse, PageVisitCategory } from '@spiffy-ai/commerce-api-client';
 import {
-  PageVisitVariantInfo,
+  PageVisitCategory,
+  SupportedEventResponse,
+  UserEvent,
+} from '@spiffy-ai/commerce-api-client';
+import {
   PDPVariantInfo,
   PLPVariantInfo,
+  PageVisitVariantInfo,
   VariantInfo,
   VariantTypeEnum,
 } from 'src/application/models';
 import { sessionStorageUtil } from 'src/atoms/atomStore';
 
-export interface SupportedEvent
-  extends Pick<
-    SupportedEventResponse,
-    'supported' | 'ready' | 'category' | 'collections' | 'top_category'
-  > {
+export interface SupportedEvent extends Pick<
+  SupportedEventResponse,
+  'supported' | 'ready' | 'category' | 'collections' | 'top_category'
+> {
   numberOfReviews: number | undefined;
   merchant_tags?: string[];
 }
@@ -88,12 +91,7 @@ export interface UrlResolverResponse {
   variant_type: string;
   specific_details: UrlResolvingPDPConfig | UrlResolvingPLPConfig | UrlResolvingGenericConfig;
   ready: boolean;
-  user_event?: {
-    event_id?: string;
-    attributes?: PDPAttributes | PLPAttributes;
-    category?: string;
-    created_at?: string;
-  };
+  user_event?: UserEvent;
   page_variant?: BackendPageVariantConfig;
 }
 

package/src/atoms/chat/__tests__/messageQueue.test.spec.ts

@@ -0,0 +1,61 @@
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { createStore } from 'jotai';
+import { UserEvent } from 'src/application/models';
+import {
+  clearUserEventAtom,
+  processUserEventAtom,
+  queueUserEventAtom,
+  userEventQueueAtom,
+  userQueueEventCountAtom,
+} from 'src/atoms/chat/messageQueue';
+
+const userEvent1 = {
+  eventId: '123',
+  category: UserEventCategory.AppLoaded,
+  createdAt: 'now',
+} satisfies UserEvent;
+const userEvent2 = {
+  eventId: '456',
+  category: UserEventCategory.AppLoaded,
+  createdAt: 'now',
+} satisfies UserEvent;
+
+describe('eventQueue', () => {
+  it('should be able to enqueue items and show them in the queue', () => {
+    const store = createStore();
+    store.set(queueUserEventAtom, userEvent1);
+    expect(store.get(userEventQueueAtom)).toEqual([userEvent1]);
+    expect(store.get(userQueueEventCountAtom)).toBe(1);
+  });
+  it('should be able to mark eventQueue items as processed and remove them from the queue', () => {
+    const store = createStore();
+    store.set(queueUserEventAtom, userEvent1);
+    store.set(queueUserEventAtom, userEvent2);
+    expect(store.get(userEventQueueAtom)).toEqual([userEvent1, userEvent2]);
+    expect(store.get(userQueueEventCountAtom)).toBe(2);
+    store.set(processUserEventAtom, ['123']);
+    expect(store.get(userEventQueueAtom)).toEqual([userEvent2]);
+    expect(store.get(userQueueEventCountAtom)).toBe(1);
+  });
+  it('should be able to mark non-existent eventQueue items as procesed without an exception being raised', () => {
+    const store = createStore();
+    store.set(queueUserEventAtom, userEvent1);
+    store.set(queueUserEventAtom, userEvent2);
+    expect(store.get(userEventQueueAtom)).toEqual([userEvent1, userEvent2]);
+    expect(store.get(userQueueEventCountAtom)).toBe(2);
+    store.set(processUserEventAtom, ['foo']);
+    expect(store.get(userEventQueueAtom)).toEqual([userEvent1, userEvent2]);
+    expect(store.get(userQueueEventCountAtom)).toBe(2);
+  });
+  it('should be able to clear all eventQueue items', () => {
+    const store = createStore();
+    expect(store.get(userQueueEventCountAtom)).toBe(0);
+    store.set(queueUserEventAtom, userEvent1);
+    store.set(queueUserEventAtom, userEvent2);
+    expect(store.get(userEventQueueAtom)).toEqual([userEvent1, userEvent2]);
+    expect(store.get(userQueueEventCountAtom)).toBe(2);
+    store.set(clearUserEventAtom);
+    expect(store.get(userEventQueueAtom)).toEqual([]);
+    expect(store.get(userQueueEventCountAtom)).toBe(0);
+  });
+});

package/src/atoms/chat/index.ts

@@ -1,17 +1,17 @@
 import { atom } from 'jotai';
 import {
-  responseStreamingAtom,
-  suggestionsLoadingAtom,
-  messagesAtom,
-  userQueryAtom,
-  replyEventCategoryAtom,
-  userHasRepliedAtom,
   askQuestionBtnClickedAtom,
-  suggestionsAtom,
   chatIsOpenAtom,
   chatOnToggleAtom,
-  userEventsAtom,
+  messagesAtom,
+  replyEventCategoryAtom,
+  responseStreamingAtom,
   suggestionAtom,
+  suggestionsAtom,
+  suggestionsLoadingAtom,
+  userEventsAtom,
+  userHasRepliedAtom,
+  userQueryAtom,
 } from './chatState';
 
 export * from './chatState';

package/src/atoms/chat/messageQueue.ts

@@ -1,10 +1,5 @@
 import { atom } from 'jotai';
-import { v4 as uuid } from 'uuid';
-import { GenerationParams, NextMessageRequest, UserEvent } from 'src/application/models';
-import { getAtomStore } from 'src/atoms/atomStore/atomStore';
-import { userIdAtom, chatIdAtom } from 'src/atoms/app';
-import { orgShortNameAtom, contextSourceAtom, envAtom } from 'src/atoms/envive/enviveConfig';
-import { orgIdAtom, featureFlagServiceAtom } from 'src/atoms/org/graphqlConfig';
+import { UserEvent } from 'src/application/models';
 
 const internalUserEventQueueAtom = atom<UserEvent[]>([]);
 
@@ -43,46 +38,5 @@ export const processUserEventAtom = atom(null, (get, set, eventIds: string[]) =>
   set(internalUserEventQueueAtom, remaining);
 });
 
-export const userQueueEventCountAtom = atom(get => get(userEventQueueAtom).length);
-
-import { ContextSourceEnum, ContextEnvEnum } from '@spiffy-ai/commerce-api-client'; // Import necessary enums
+export const userQueueEventCountAtom = atom(get => get(userEventQueueAtom).length); // Import necessary enums
 // import type { Context } from "@spiffy-ai/commerce-api-client/dist/models/Context"; // Import Context type
-
-export const createResponsePayload = ({
-  userEvents,
-  generationParams,
-}: {
-  userEvents: UserEvent[];
-  generationParams?: GenerationParams;
-}): NextMessageRequest => {
-  const atomStore = getAtomStore();
-  const orgShortName = atomStore.get(orgShortNameAtom);
-  const orgId = atomStore.get(orgIdAtom);
-  const userId = atomStore.get(userIdAtom);
-  const chatId = atomStore.get(chatIdAtom);
-  const source = atomStore.get(contextSourceAtom);
-  const env = atomStore.get(envAtom);
-
-  const featureFlagService = atomStore.get(featureFlagServiceAtom);
-
-  const context = {
-    userId: userId ?? '',
-    org_id: orgId ?? '',
-    org_short_name: orgShortName ?? '',
-    chat_id: chatId ?? '',
-    source: source ?? ContextSourceEnum.App,
-    env: (env as ContextEnvEnum) ?? ContextEnvEnum.Dev,
-  };
-
-  const featureFlags = featureFlagService?.featureFlagService?.getFeatureFlags() || {};
-
-  return {
-    id: uuid(),
-    context,
-    userEvents,
-    featureFlags: Object.fromEntries(
-      Object.entries(featureFlags).filter(([, isEnabled]) => isEnabled),
-    ), // Convert back to Record<string, boolean>
-    generationParams,
-  };
-};

package/src/atoms/chat/replies.ts

@@ -1,15 +1,15 @@
 import { atom } from 'jotai';
 import { Message, MessageType } from 'src/application/models';
 import {
-  userHasRepliedAtom,
   messagesAtom,
-  userQueryAtom,
   replyEventCategoryAtom,
+  userHasRepliedAtom,
+  userQueryAtom,
 } from 'src/atoms/chat';
 import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { queueUserEventAtom } from './messageQueue';
 import { SpiffyMetricsEventName } from 'src/contexts/amplitudeContext/amplitudeContext';
 import { amplitudeTrackEventAtom } from 'src/atoms/amplitude/amplitudeTrackEventAtom';
+import { queueUserEventAtom } from './messageQueue';
 
 type HandleReplyParams = {
   message: Message;

package/src/atoms/org/graphqlConfig.ts

@@ -1,7 +1,6 @@
 import { atom } from 'jotai';
 import { ColorMapping } from 'src/application/models/colorsConfig';
 import { FrontendConfig } from 'src/application/models/frontendConfig';
-import { orgShortNameAtom } from '../envive/enviveConfig';
 import { FeatureFlagContextType } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext'; // Import FeatureFlagContextType from new context
 
 export const internalGraphQLColorsConfigAtom = atom<ColorMapping | undefined>(undefined);

package/src/atoms/org/orgAnalyticsConfig.ts

@@ -1,7 +1,7 @@
 import { atom } from 'jotai';
 import {
-  OrgAnalyticsConfig,
   OrgAnalyticsAmplitudeConfig,
+  OrgAnalyticsConfig,
   OrgAnalyticsCustomerServiceConfig,
   OrgAnalyticsGoogleAnalyticsConfig,
 } from 'src/application/models/api/orgAnalyticsConfig';

package/src/atoms/search/searchAPI.ts

@@ -1,5 +1,5 @@
 import { atom } from 'jotai';
-import { SearchResult, SearchParams } from 'src/application/models/api/search';
+import { SearchParams, SearchResult } from 'src/application/models/api/search';
 import { ProductSorting } from './types';
 import { ProductFilters } from './productFilters';
 import { ProductSorter } from './productSorter';

package/src/atoms/search/searchServiceAdapter.ts

@@ -1,4 +1,4 @@
-import { SearchResult, SearchParams } from 'src/application/models/api/search';
+import { SearchParams, SearchResult } from 'src/application/models/api/search';
 
 // This will be set by the SearchProvider when it initializes
 let searchServiceFunction: ((params: SearchParams) => Promise<SearchResult>) | null = null;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { Provider, useStore } from 'jotai';
-import { AmplitudeProvider, useAmplitude, SpiffyMetricsEventName } from '../amplitudeContext';
 import {
   UserIdentityProvider,
   useUserIdentity,
@@ -11,7 +10,7 @@ import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveCon
 import { FeatureFlagServiceProvider } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { userIdAtom } from 'src/atoms/app';
 import Logger from 'src/application/logging/logger';
-import { createInstance } from '@amplitude/analytics-browser';
+import { AmplitudeProvider, SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
 // Mock the Logger to avoid console output in tests
 // vi.spyOn(Logger, "logInfo").mockImplementation(() => {});
@@ -62,6 +61,7 @@ const MockAmplitudeComponent: React.FC = () => {
       <div data-testid="is-ready">{amplitude.isReady.toString()}</div>
       <button
         data-testid="track-event-button"
+        type="button"
         onClick={() =>
           amplitude.trackEvent({
             eventName: SpiffyMetricsEventName.ChatUserMessageInput,
@@ -373,6 +373,7 @@ describe('AmplitudeProvider with UserIdentityContext', () => {
         return (
           <button
             data-testid="track-multiple"
+            type="button"
             onClick={trackMultiple}
           >
             Track Multiple

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { createInstance } from '@amplitude/analytics-browser';
 import { FeatureGates } from 'src/application/models/featureGates';
@@ -8,12 +8,12 @@ import {
   amplitudeApiKeyAtom,
   contextSourceAtom,
   dataResidencyAtom,
+  envAtom,
   identifyingPrefixAtom,
 } from 'src/atoms/envive/enviveConfig';
 import { LocalStorageKeys, useLocalStorage } from 'src/contexts/localStorageContext';
 import { orgAnalyticsGoogleAnalyticsConfigAtom } from 'src/atoms/org/orgAnalyticsConfig';
 import { userIdAtom } from 'src/atoms/app';
-import { envAtom } from 'src/atoms/envive/enviveConfig';
 import Logger from 'src/application/logging/logger';
 import type {
   BrowserClient,
@@ -162,8 +162,8 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   const amplitudeSessionReplayInit = useCallback((): boolean => {
     const isEnabled = Boolean(
       orgShortName === OrgShortName.UniqueVintage &&
-        featureFlagService?.isClientSessionEnabled() &&
-        featureFlagService?.isFeatureGateEnabled(FeatureGates.IsNewFeatureEnabled),
+      featureFlagService?.isClientSessionEnabled() &&
+      featureFlagService?.isFeatureGateEnabled(FeatureGates.IsNewFeatureEnabled),
     );
     const sampleRate = 1;
 
@@ -358,7 +358,7 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           if (window.dataLayer) {
             (window.dataLayer as any[]).push({
               event: decoratedEventName,
-              eventProps: eventProps,
+              eventProps,
             });
           }
         }

package/src/contexts/cdnContext/cdnContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useCallback, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { cdnUrlAtom } from '../../atoms/envive/enviveConfig';
 

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

@@ -1,10 +1,9 @@
 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 { Provider, useAtomValue } from 'jotai';
 import { enviveConfigAtom } from 'src/atoms/envive/enviveConfig';
 import Logger from 'src/application/logging/logger';
+import { EnviveConfigProvider, useEnviveConfig } from '../enviveConfigContext';
 
 // Mock the Logger to avoid console output in tests
 vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, ReactNode, useEffect } from 'react';
-import { useSetAtom, useAtomValue } from 'jotai';
+import React, { ReactNode, createContext, useEffect } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { enviveConfigAtom } from 'src/atoms/envive/enviveConfig';
 import Logger from 'src/application/logging/logger';
 import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
@@ -82,5 +82,5 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 export const useEnviveConfig = (): EnviveConfig => {
   const config = useAtomValue(enviveConfigAtom);
 
-  return config ? config : {};
+  return config || {};
 };

package/src/contexts/enviveContext/enviveContext.tsx

@@ -0,0 +1,89 @@
+import { ReactNode, createContext } from 'react';
+
+import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
+import { AmplitudeProvider } from '../amplitudeContext';
+import { EnviveConfigProvider } from '../enviveConfigContext';
+import { EnviveCssProvider } from '../enviveCssContext';
+import { FeatureFlagServiceProvider } from '../featureFlagServiceContext';
+import { GraphQLProvider } from '../graphqlContext';
+import { LocalStorageProvider } from '../localStorageContext';
+import { NewOrgConfigProvider } from '../newOrgConfigContext';
+import { UserIdentityProvider } from '../userIdentityContext';
+import { EnviveAgent } from './types';
+import { SearchProvider } from '../searchContext';
+import { SalesAgentProvider } from '../salesAgentContext/salesAgentContext';
+import { SystemSettingsContextProvider } from '../systemSettingsContext';
+
+const EnviveContext = createContext<null>(null);
+
+interface AgentWrapperProps {
+  children: ReactNode;
+  enabledAgents: EnviveAgent[];
+}
+
+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;
+  show?: boolean;
+  publicKey?: string;
+  featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
+}
+
+const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
+  if (!enabledAgents.includes(EnviveAgent.SearchAgent)) {
+    return children;
+  }
+  return <SearchProvider>{children}</SearchProvider>;
+};
+
+const SalesAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
+  if (!enabledAgents.includes(EnviveAgent.SalesAgent)) {
+    return children;
+  }
+  return (
+    <SystemSettingsContextProvider>
+      <SalesAgentProvider>{children}</SalesAgentProvider>
+    </SystemSettingsContextProvider>
+  );
+};
+
+export const EnviveProvider: React.FC<EnviveProviderProps> = ({
+  children,
+  enabledAgents,
+  ...config
+}) => (
+  <EnviveContext.Provider value={null}>
+    <EnviveConfigProvider {...config}>
+      <GraphQLProvider>
+        <NewOrgConfigProvider>
+          <LocalStorageProvider>
+            <FeatureFlagServiceProvider featureGates={[]}>
+              <UserIdentityProvider>
+                <AmplitudeProvider>
+                  <EnviveCssProvider>
+                    <SearchAgentWrapper enabledAgents={enabledAgents}>
+                      <SalesAgentWrapper enabledAgents={enabledAgents}>
+                        {children}
+                      </SalesAgentWrapper>
+                    </SearchAgentWrapper>
+                  </EnviveCssProvider>
+                </AmplitudeProvider>
+              </UserIdentityProvider>
+            </FeatureFlagServiceProvider>
+          </LocalStorageProvider>
+        </NewOrgConfigProvider>
+      </GraphQLProvider>
+    </EnviveConfigProvider>
+  </EnviveContext.Provider>
+);

package/src/contexts/enviveContext/index.ts

@@ -0,0 +1,2 @@
+export * from './enviveContext';
+export * from './types';

package/src/contexts/enviveContext/types.ts

@@ -0,0 +1,4 @@
+export enum EnviveAgent {
+  SalesAgent = 'sales',
+  SearchAgent = 'search',
+}

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';