@envive-ai/react-hooks 0.3.3 → 0.3.5

package/src/application/models/utils/snakeToCamelTransformer.ts

@@ -10,7 +10,7 @@ const PRESERVED_ACRONYMS = ['PLP', 'PDP', 'SVG'];
  * Converts a snake_case string to camelCase
  * Handles specific acronyms like PLP and PDP correctly
  */
-const toCamelCase = (str: string): string => {
+export const toCamelCase = (str: string): string => {
   // Pre-process: convert all words that match the PRESERVED_ACRONYMS regex to uppercase
   let processedStr = str;
   for (const acronym of PRESERVED_ACRONYMS) {

package/src/application/utils/elementObserver.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { MouseEventTypes } from './mouseEventTypes';
 import { MutationHelper } from './mutationHelper';
@@ -166,7 +166,7 @@ export class ElementObserver {
 
   render(fn: () => ReactElement) {
     if (this.node) {
-      return createPortal(fn(), this.node);
+      return createPortal(fn() as ReactNode, this.node);
     }
     return undefined;
   }

package/src/application/utils/widgetTextFromApiWidgetTextResponse.ts

@@ -0,0 +1,30 @@
+import {
+  WidgetString as ApiWidgetString,
+  WidgetTextRequest as ApiWidgetTextRequest,
+  WidgetTextResponse as ApiWidgetTextResponse,
+} from '@spiffy-ai/commerce-api-client';
+
+import {
+  WidgetString as CoreWidgetString,
+  WidgetText as CoreWidgetText,
+} from '../models/api/widgetText';
+
+export const apiWidgetStringToCoreWidgetString = (
+  apiWidgetString: ApiWidgetString,
+): CoreWidgetString => ({
+  id: apiWidgetString.string_id,
+  value: apiWidgetString.text,
+});
+
+export const apiWidgetTextResponseToCoreWidgetText = (
+  apiRequest: ApiWidgetTextRequest,
+  apiWidgetTextResponse: ApiWidgetTextResponse,
+): CoreWidgetText => ({
+  language: apiRequest.language,
+  values: Object.fromEntries(
+    Object.entries(apiWidgetTextResponse.widget_text).map(([key, value]) => [
+      key,
+      value.map(apiWidgetStringToCoreWidgetString),
+    ]),
+  ),
+});

package/src/application/utils/widgetTextRequestToApiRequest.ts

@@ -0,0 +1,45 @@
+import {
+  WidgetTextRequest as ApiWidgetTextRequest,
+  WidgetType,
+} from '@spiffy-ai/commerce-api-client';
+import { WidgetTypeV3 } from 'src/contexts/typesV3';
+import { WidgetTextRequest as CoreWidgetTextRequest } from '../models/api/widgetTextRequest';
+import { coreContextToApiContext } from './coreContextToApiContext';
+
+export const coreWidgetTypeToApiWidgetType = (coreWidgetType: WidgetTypeV3): WidgetType => {
+  switch (coreWidgetType) {
+    case WidgetTypeV3.ChatPreviewV3:
+      return WidgetType.ChatPreviewV3;
+    case WidgetTypeV3.SocialProofV3:
+      return WidgetType.SocialProofV3;
+    case WidgetTypeV3.TypingAnimationV3:
+      return WidgetType.TypingAnimationV3;
+    case WidgetTypeV3.PromptCarouselV3:
+      return WidgetType.PromptCarouselV3;
+    case WidgetTypeV3.TitledPromptCarouselV3:
+      return WidgetType.TitledPromptCarouselV3;
+    case WidgetTypeV3.ImagePromptCardV3:
+      return WidgetType.ImagePromptCardV3;
+    case WidgetTypeV3.ImageBannerV3:
+      return WidgetType.ImageBannerV3;
+    case WidgetTypeV3.SingleImagePromptV3:
+      return WidgetType.SingleImagePromptV3;
+    // TODO: Add support for these widget types
+    // case WidgetTypeV3.ChatPreviewComparisonV3:
+    //   return WidgetType.ChatPreviewComparisonV3;
+    // case WidgetTypeV3.ChatPreviewLoadingV3:
+    //   return WidgetType.ChatPreviewLoadingV3;
+    default:
+      throw new Error(`Unsupported widget type: ${coreWidgetType}`);
+  }
+};
+
+export const coreWidgetTextRequestToApiRequest = (
+  coreWidgetTextRequest: CoreWidgetTextRequest,
+): ApiWidgetTextRequest => ({
+  context: coreContextToApiContext(coreWidgetTextRequest.context),
+  feature_flags: coreWidgetTextRequest.featureFlags,
+  language: coreWidgetTextRequest.language,
+  url: coreWidgetTextRequest.url,
+  widget_type: coreWidgetTypeToApiWidgetType(coreWidgetTextRequest.widgetType),
+});

package/src/atoms/amplitude/amplitudeTrackEventAtom.ts

@@ -1,12 +1,5 @@
 import { atom } from 'jotai';
-import { SpiffyMetricsEventName } from 'src/contexts/amplitudeContext/amplitudeContext';
-
-interface TrackEventParams {
-  eventName: SpiffyMetricsEventName;
-  eventProps?: Record<string, unknown>;
-  eventGroups?: Record<string, unknown>;
-  alsoSendToGoogleAnalytics?: boolean;
-}
+import { TrackEventParams } from 'src/services/amplitudeService/amplitudeService';
 
 // This atom will hold the trackEvent function from the Amplitude context.
 // It needs to be initialized by a React component that has access to the useAmplitude hook.

package/src/atoms/app/index.ts

@@ -4,8 +4,8 @@ import { atomWithStorage } from 'jotai/utils';
 import { VariantInfo } from 'src/application/models';
 import { UserIdentityContextType } from 'src/contexts/userIdentityContext/userIdentityContext';
 import { v4 as uuid } from 'uuid';
-import { contextSourceAtom, envAtom, orgShortNameAtom } from '../envive/enviveConfig';
-import { orgIdAtom } from '../org/graphqlConfig';
+import { contextSourceAtom, envAtom, orgIdAtom, orgShortNameAtom } from '../envive/enviveConfig';
+
 import { variantInfoAtom } from './variant';
 
 export interface AppDetails {
@@ -18,7 +18,13 @@ export interface AppDetails {
   variantInfo: VariantInfo;
 }
 
-export { variantInfoAtom } from './variant';
+export {
+  pageUserEventAtom,
+  pageVariantInfoAtom,
+  variantInfoAtom,
+  hasParsedVariantInfoAtom,
+  supportedEventAtom,
+} from './variant';
 
 const internalUserIdAtom = atom<string | undefined>(undefined);
 

package/src/atoms/app/variant.ts

@@ -1,18 +1,20 @@
 import { atomWithStorage } from 'jotai/utils';
 import { atom } from 'jotai';
 import {
+  UserEvent as ApiUserEvent,
   PageVisitCategory,
   SupportedEventResponse,
-  UserEvent,
 } from '@spiffy-ai/commerce-api-client';
 import {
   PDPVariantInfo,
   PLPVariantInfo,
   PageVisitVariantInfo,
+  UserEvent,
   VariantInfo,
   VariantTypeEnum,
 } from 'src/application/models';
 import { sessionStorageUtil } from 'src/atoms/atomStore';
+import type { PageVariantInfo } from 'src/contexts/pageContext/types';
 
 export interface SupportedEvent extends Pick<
   SupportedEventResponse,
@@ -91,7 +93,7 @@ export interface UrlResolverResponse {
   variant_type: string;
   specific_details: UrlResolvingPDPConfig | UrlResolvingPLPConfig | UrlResolvingGenericConfig;
   ready: boolean;
-  user_event?: UserEvent;
+  user_event?: ApiUserEvent;
   page_variant?: BackendPageVariantConfig;
 }
 
@@ -224,3 +226,7 @@ export const variantInfoAtom = atom(
     }
   },
 );
+
+// Atoms for page context - can be set directly by PageProvider or for storybook/testing
+export const pageUserEventAtom = atom<UserEvent | undefined>(undefined);
+export const pageVariantInfoAtom = atom<PageVariantInfo | undefined>(undefined);

package/src/atoms/chat/chatState.ts

@@ -1,7 +1,13 @@
 import { UserEventCategory } from '@spiffy-ai/commerce-api-client/dist/models/UserEventCategory';
 import { atom } from 'jotai';
 import { SpiffyMetricsEventName } from 'src/contexts/amplitudeContext/amplitudeContext';
-import { FormSubmittedAttributes, Message, Suggestion, UserEvent } from 'src/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FormSubmittedAttributes,
+  Message,
+  Suggestion,
+  UserEvent,
+} from 'src/application/models';
 import { ChatElementDisplayLocation } from 'src/application/models/chatElementDisplayLocation';
 import { SpiffyEventName } from 'src/application/models/events';
 
@@ -15,6 +21,8 @@ export const userEventsAtom = atom<UserEvent[]>([]);
 export const suggestionsAtom = atom<Suggestion[]>([]);
 export const suggestionsLoadingAtom = atom<boolean>(false);
 export const responseStreamingAtom = atom<boolean>(false);
+export const pendingResponseAtom = atom<boolean>(false);
+export const initializedAtom = atom<boolean>(false);
 export const chatIsOpenAtom = atom<boolean>(false);
 export const requestFailureAtom = atom<boolean>(false);
 export const formSubmitAtom = atom<FormSubmittedAttributes>();
@@ -23,7 +31,7 @@ export const chatOnToggleAtom = atom(
   (
     get,
     set,
-    triggerLocation?: ChatElementDisplayLocation,
+    triggerLocation?: ChatElementDisplayLocation | ChatElementDisplayLocationV3,
     track?: (eventName: SpiffyMetricsEventName, eventProps?: Record<string, unknown>) => void,
   ) => {
     const isOpen = get(chatIsOpenAtom);

package/src/atoms/envive/enviveConfig.ts

@@ -42,6 +42,11 @@ export const cdnUrlAtom = atom(get => {
   return config?.cdnUrl;
 });
 
+export const orgIdAtom = atom(get => {
+  const config = get(enviveConfigAtom);
+  return config?.orgId;
+});
+
 export const contextSourceAtom = atom(get => {
   const config = get(enviveConfigAtom);
 
@@ -67,14 +72,3 @@ export const orgShortNameAtom = atom(get => {
   Logger.logDebug('enviveConfig.ts: Accessing orgShortName', config);
   return config?.orgShortName;
 });
-export const identifyingPrefixAtom = atom(get => {
-  const config = get(enviveConfigAtom);
-  Logger.logDebug('enviveConfig.ts: Accessing identifyingPrefix', config);
-  return config?.identifyingPrefix || 'spiffy';
-});
-
-export const publicKeyAtom = atom(get => {
-  const config = get(enviveConfigAtom);
-  Logger.logDebug('enviveConfig.ts: Accessing publicKey', config);
-  return config?.publicKey;
-});

package/src/atoms/org/graphqlConfig.ts

@@ -6,7 +6,6 @@ import { FeatureFlagContextType } from 'src/contexts/featureFlagServiceContext/f
 export const internalGraphQLColorsConfigAtom = atom<ColorMapping | undefined>(undefined);
 const internalGraphQLFrontendConfigAtom = atom<FrontendConfig | undefined>(undefined);
 
-export const orgIdAtom = atom<string | undefined>(undefined); // New atom for orgId
 export const featureFlagServiceAtom = atom<FeatureFlagContextType | undefined>(undefined); // New atom for FeatureFlagService
 
 export const frontendConfigAtom = atom(

package/src/atoms/search/productRetrievalAPI.ts

@@ -58,11 +58,3 @@ export const retrievedProductsAtom = atom(get => {
   const retrievalData = get(productRetrievalAtom).data;
   return retrievalData?.products || [];
 });
-
-export const productRetrievalLoadingAtom = atom(get => {
-  return get(productRetrievalAtom).loading;
-});
-
-export const productRetrievalErrorAtom = atom(get => {
-  return get(productRetrievalAtom).error;
-});

package/src/atoms/search/productRetrievalAdapter.ts

@@ -1,25 +1,21 @@
 import { ProductRetrievalParams, ProductRetrievalResult } from './types';
 
 // This will be set by the ProductRetrievalProvider when it initializes
-let productRetrievalFunction:
-  | ((params: ProductRetrievalParams) => Promise<ProductRetrievalResult>)
-  | null = null;
+const productRetrievalAdapter: {
+  fn: ((params: ProductRetrievalParams) => Promise<ProductRetrievalResult>) | null;
+} = { fn: null };
 
 export const setProductRetrievalFunction = (
   fn: (params: ProductRetrievalParams) => Promise<ProductRetrievalResult>,
 ) => {
-  productRetrievalFunction = fn;
+  productRetrievalAdapter.fn = fn;
 };
 
 export const getProductRetrievalFunction = () => {
-  if (!productRetrievalFunction) {
+  if (!productRetrievalAdapter.fn) {
     throw new Error(
       'Product retrieval function not initialized. Make sure ProductRetrievalProvider is mounted.',
     );
   }
-  return productRetrievalFunction;
-};
-
-export const clearProductRetrievalFunction = () => {
-  productRetrievalFunction = null;
+  return productRetrievalAdapter.fn;
 };

package/src/atoms/widget/chatPreviewLoading.ts

@@ -0,0 +1,36 @@
+import { atom } from 'jotai';
+
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+/**
+ * Data structure for ChatPreviewLoading component props that need to be stored.
+ */
+export type ChatPreviewLoadingData = {
+  titleLabel?: string;
+  textFieldPlaceholder?: string;
+  logoSrc?: string;
+  hideLogo?: boolean;
+  variant?: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideTextField?: boolean;
+};
+
+/**
+ * Atom that stores ChatPreviewLoading data by widgetConfigId.
+ * This allows widgets to access the most recent loading state information
+ * even when the widget is not actively rendering.
+ */
+const internalChatPreviewLoadingDataAtom = atom<Record<string, ChatPreviewLoadingData>>({});
+
+/**
+ * Atom to read ChatPreviewLoading data for a specific widgetConfigId.
+ */
+export const chatPreviewLoadingDataAtom = atom(
+  get => get(internalChatPreviewLoadingDataAtom),
+  (get, set, update: { widgetConfigId: string; data: ChatPreviewLoadingData }) => {
+    const current = get(internalChatPreviewLoadingDataAtom);
+    set(internalChatPreviewLoadingDataAtom, {
+      ...current,
+      [update.widgetConfigId]: update.data,
+    });
+  },
+);

package/src/atoms/widget/index.ts

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