@envive-ai/react-hooks 0.3.15-beta.1 → 0.3.15

package/src/application/commerce-api.ts

@@ -7,6 +7,7 @@ import {
   DefaultApi,
   FormType,
   InferenceApi,
+  ProductsApi,
   ReportSessionRequest,
   ResponseCategory,
   ResponseError,
@@ -16,6 +17,7 @@ import {
   V1OrgConfigGetSourceEnum,
 } from '@spiffy-ai/commerce-api-client';
 import type { Context } from '@spiffy-ai/commerce-api-client/dist/models/Context';
+import type { ProductRetrievalResult } from 'src/atoms/search/types';
 import Logger from 'src/application/logging/logger';
 import {
   Message,
@@ -57,6 +59,7 @@ import { SessionRestartRequired } from 'src/types/exceptions/sessionExceptions';
 import { UnsupportedProductException } from 'src/types/exceptions/unsupportedProductExceptions';
 import { WidgetText } from './models/api/widgetText';
 import { WidgetTextRequest } from './models/api/widgetTextRequest';
+import { productRetrievalResponseToProductRetrievalResult } from './utils/productRetrievalResponseToProductRetrievalResult';
 import { apiWidgetTextResponseToCoreWidgetText } from './utils/widgetTextFromApiWidgetTextResponse';
 import { coreWidgetTextRequestToApiRequest } from './utils/widgetTextRequestToApiRequest';
 
@@ -104,6 +107,8 @@ class CommerceApiClient {
 
   private readonly inferenceApi: InferenceApi;
 
+  private readonly productsApi: ProductsApi;
+
   private static instance: CommerceApiClient | undefined;
 
   private suggestionsAbortController = new AbortController();
@@ -135,6 +140,7 @@ class CommerceApiClient {
     this.defaultApi = new DefaultApi(config);
     this.inferenceApi = new InferenceApi(config);
     this.customerServiceApi = new CustomerServiceApi(config);
+    this.productsApi = new ProductsApi(config);
   }
 
   static resolveUrl = async (url: string) => {
@@ -437,6 +443,51 @@ class CommerceApiClient {
     return apiWidgetTextResponseToCoreWidgetText(apiRequest, response);
   };
 
+  /**
+   * Retrieves product details for the given product IDs via POST /v1/products/retrieve.
+   * Builds context from the current atom store (org, user, chat, etc.) and returns
+   * products in the shape expected by ProductRetrievalResult (camelCase attributes).
+   *
+   * @param productIds - List of product IDs to retrieve
+   * @returns ProductRetrievalResult with products and totalProductCount
+   */
+  static retrieveProducts = async (productIds: string[]): Promise<ProductRetrievalResult> => {
+    if (productIds.length === 0) {
+      return { products: [], totalProductCount: 0 };
+    }
+
+    try {
+      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 context: Context = {
+        user_id: userId ?? '',
+        org_id: orgId ?? '',
+        org_short_name: orgShortName ?? '',
+        chat_id: chatId ?? '',
+        source: source ?? ContextSourceEnum.App,
+        env: (env as ContextEnvEnum) ?? ContextEnvEnum.Dev,
+      };
+
+      const response = await CommerceApiClient.getInstance().productsApi.v1ProductsRetrievePost({
+        ProductRetrievalRequest: {
+          context,
+          product_ids: productIds,
+        },
+      });
+
+      return productRetrievalResponseToProductRetrievalResult(response);
+    } catch (err) {
+      await throwSessionRestartRequiredIf('Failed to retrieve products', err);
+      return { products: [], totalProductCount: 0 };
+    }
+  };
+
   /**
    *
    * @param payload

package/src/application/utils/productRetrievalResponseToProductRetrievalResult.ts

@@ -0,0 +1,21 @@
+import type { ProductRetrievalResponse } from '@spiffy-ai/commerce-api-client';
+import { transformSnakeToCamel } from 'src/application/models/utils/snakeToCamelTransformer';
+import type { SearchResponseProductAttributes } from 'src/application/models/api/response';
+import type { ProductRetrievalResult } from 'src/atoms/search/types';
+
+/**
+ * Maps the API response from /v1/products/retrieve to the core ProductRetrievalResult.
+ * Converts product attributes from snake_case to camelCase to match SearchResponseProductAttributes.
+ */
+export function productRetrievalResponseToProductRetrievalResult(
+  apiResponse: ProductRetrievalResponse,
+): ProductRetrievalResult {
+  const products = (apiResponse.products ?? []).map(product =>
+    transformSnakeToCamel(product),
+  ) as SearchResponseProductAttributes['attributes'][];
+
+  return {
+    products,
+    totalProductCount: products.length,
+  };
+}

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -48,7 +48,7 @@ export interface SalesAgentChatAPI {
   onFormResponseSubmitted: (form: FormSubmittedAttributes) => void;
 }
 
-export const useSalesAgentChatAPI = () => {
+export const useSalesAgentChatAPI = (widget?: WidgetInteractionComponent) => {
   // TODO: Each of these functions will trigger both the necessary amplitude events and initiate the
   // necessary actions to trigger the backend API
   const context = useAtomValue(analyticsContextAtom);
@@ -58,6 +58,7 @@ export const useSalesAgentChatAPI = () => {
   const setFormSubmit = useSetAtom(formSubmitAtom);
   const { trackEvent } = useAmplitude();
   const { trackWidgetInteraction } = useWidgetInteraction();
+  const contextWidget = widget || WidgetInteractionComponent.FLOATING_CHAT;
 
   const logPageVisit = useCallback(
     ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => {
@@ -113,7 +114,7 @@ export const useSalesAgentChatAPI = () => {
       trackWidgetInteraction({
         eventName: EnviveMetricsEventName.WidgetInteraction,
         trigger: {
-          widget: WidgetInteractionComponent.FLOATING_CHAT,
+          widget: contextWidget,
           widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
           widget_interaction_data: {
             suggestion_clicked: {
@@ -182,7 +183,7 @@ export const useSalesAgentChatAPI = () => {
       trackWidgetInteraction({
         eventName: EnviveMetricsEventName.WidgetInteraction,
         trigger: {
-          widget: WidgetInteractionComponent.FLOATING_CHAT,
+          widget: contextWidget,
           widget_interaction: WidgetInteractionType.MESSAGE_SUBMITTED,
           widget_interaction_data: {
             message_submitted: {

package/src/contexts/salesAgentContext/salesAgentContext.tsx

@@ -1,9 +1,9 @@
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { ReactNode, createContext, useCallback, useEffect, useMemo, useRef } from 'react';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import Logger from 'src/application/logging/logger';
-import { Message, MessageRole, MessageType } from 'src/application/models/message';
 import { NextMessageRequest, Suggestion, UserEvent } from 'src/application/models';
+import { Message, MessageRole, MessageType } from 'src/application/models/message';
 import {
   initializedAtom,
   messagesAtom,
@@ -16,12 +16,13 @@ import {
   userEventQueueAtom,
   userQueueEventCountAtom,
 } from 'src/atoms/chat/messageQueue';
-import { useSystemSettingsContext } from 'src/hooks/SystemSettingsContext';
+import { useSystemSettingsContext } from '../../hooks/SystemSettingsContext';
+import { WidgetInteractionComponent } from '../../hooks/WidgetInteraction/types';
+import { SalesAgentChatAPI, useSalesAgentChatAPI } from './chatAPI';
 import {
   buildFormSubmittedDisplayContent,
   createFormSubmittedUserMessage,
 } from './formSubmittedUtils';
-import { SalesAgentChatAPI, useSalesAgentChatAPI } from './chatAPI';
 import { useSalesAgentService } from './salesAgentService';
 
 export interface SalesAgent extends SalesAgentChatAPI {
@@ -203,7 +204,7 @@ export const SalesAgentProvider: React.FC<SalesAgentProviderProps> = ({
   return <SalesAgentContext.Provider value={undefined}>{children}</SalesAgentContext.Provider>;
 };
 
-export const useSalesAgent = (): SalesAgent => {
+export const useSalesAgent = (contextWidget?: WidgetInteractionComponent): SalesAgent => {
   const messages = useAtomValue(messagesAtom);
   const suggestions = useAtomValue(suggestionsAtom);
   const pendingMessages = useAtomValue(userEventQueueAtom);
@@ -216,7 +217,7 @@ export const useSalesAgent = (): SalesAgent => {
     onSuggestionClicked,
     onTypedMessageSubmitted,
     onFormResponseSubmitted,
-  } = useSalesAgentChatAPI();
+  } = useSalesAgentChatAPI(contextWidget);
 
   const salesAgent: SalesAgent = useMemo(() => {
     return {

package/src/hooks/ProductImageUrl/index.ts

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

package/src/hooks/ProductImageUrl/useProductImageUrl.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import CommerceApiClient from 'src/application/commerce-api';
+
+/**
+ * Fetches the product image URL for the given product ID via CommerceApiClient.retrieveProducts.
+ * Returns undefined while loading, on error, or when productId is not provided.
+ */
+export const useProductImageUrl = (productId: string | undefined): string | undefined => {
+  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!productId) {
+      setImageUrl(undefined);
+      return undefined;
+    }
+    let cancelled = false;
+    CommerceApiClient.retrieveProducts([productId]).then(
+      result => {
+        if (!cancelled && result.products?.length > 0) {
+          setImageUrl(result.products[0].imageUrl);
+        } else if (!cancelled) {
+          setImageUrl(undefined);
+        }
+      },
+      () => {
+        if (!cancelled) setImageUrl(undefined);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [productId]);
+
+  return imageUrl;
+};

package/src/hooks/WidgetInteraction/types.ts

@@ -36,6 +36,7 @@ export enum WidgetInteractionComponent {
   EMBEDDED_WIDGET = 'embedded_widget',
   SUGGESTION_BAR = 'suggestion_bar',
   FLOATING_BUTTON = 'floating_button',
+  FULL_PAGE_SALES_AGENT = 'full_page_sales_agent',
   SOCIAL_PROOF = 'social_proof',
   CHAT_PREVIEW = 'chat_preview',
   FLOATING_CHAT = 'floating_chat',