@envive-ai/react-hooks 0.2.6-alpha.13 → 0.2.7-arthur-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-hooks",
-  "version": "0.2.6-alpha.13",
+  "version": "0.2.7-arthur-1",
   "description": "React hooks for connecting to Envive AI services.",
   "keywords": [
     "react",
@@ -31,7 +31,10 @@
     "build:watch": "tsdown --watch",
     "prepublish": "npm run build",
     "typecheck": "tsc",
-    "prepare-version": "node scripts/prepare-version.js"
+    "prepare-version": "node scripts/prepare-version.js",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest --watch"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.23.7",
@@ -43,16 +46,22 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/ua-parser-js": "^0.7.39",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^27.1.0",
+    "patch-package": "^8.0.1",
     "tsdown": "^0.14.2",
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "vitest": "^4.0.8"
   },
   "peerDependencies": {
-    "framer-motion": ">=12.23.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -250,10 +259,6 @@
       "import": "./dist/hooks/ElementObserver/index.js",
       "require": "./dist/hooks/ElementObserver/index.cjs"
     },
-    "./hooks/FloatingButtonVisibility": {
-      "import": "./dist/hooks/FloatingButtonVisibility/index.js",
-      "require": "./dist/hooks/FloatingButtonVisibility/index.cjs"
-    },
     "./hooks/GrabAndScroll": {
       "import": "./dist/hooks/GrabAndScroll/index.js",
       "require": "./dist/hooks/GrabAndScroll/index.cjs"
@@ -278,10 +283,6 @@
       "import": "./dist/hooks/IsSmallScreen/index.js",
       "require": "./dist/hooks/IsSmallScreen/index.cjs"
     },
-    "./hooks/LastInteraction": {
-      "import": "./dist/hooks/LastInteraction/index.js",
-      "require": "./dist/hooks/LastInteraction/index.cjs"
-    },
     "./hooks/LocalStorageOperations": {
       "import": "./dist/hooks/LocalStorageOperations/index.js",
       "require": "./dist/hooks/LocalStorageOperations/index.cjs"
@@ -430,6 +431,10 @@
         "import": "./dist/events/index.js",
         "require": "./dist/events/index.cjs"
       },
+      "./exceptions": {
+        "import": "./dist/exceptions/index.js",
+        "require": "./dist/exceptions/index.cjs"
+      },
       "./hooks": {
         "import": "./dist/hooks/index.js",
         "require": "./dist/hooks/index.cjs"
@@ -445,4 +450,4 @@
       "./package.json": "./package.json"
     }
   }
-}
+}

package/src/application/commerce-api.ts

@@ -544,6 +544,8 @@ class CommerceApiClient {
         return V1OrgConfigGetSourceEnum.App;
       case ContextSourceEnum.Test:
         return V1OrgConfigGetSourceEnum.Test;
+      case ContextSourceEnum.Eval:
+        return V1OrgConfigGetSourceEnum.Test;
       default: {
         // This ensures that if new values are added to ContextSourceEnum, we catch it
         const exhaustiveCheck: never = source;

package/src/application/models/graphql/index.ts

@@ -1,2 +1,3 @@
 export * from './queries/getMerchantFrontendConfigQuery';
 export * from './queries/getMerchantColorsQuery';
+export * from './queries/getMerchantOrgIdQuery';

package/src/application/utils/__tests__/divideArrays.test.ts

@@ -1,14 +1,13 @@
-// import { expect } from 'vitest';
-// import { divideArray } from '../divideArray';
+import { divideArray } from '../divideArray';
 
-// describe('divideArray', () => {
-//   it('should divide an array into 3 rows', () => {
-//     const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-//     const rows = divideArray(array, 3);
-//     expect(rows).toEqual([
-//       [1, 4, 7, 10],
-//       [2, 5, 8],
-//       [3, 6, 9],
-//     ]);
-//   });
-// });
+describe('divideArray', () => {
+  it('should divide an array into 3 rows', () => {
+    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const rows = divideArray(array, 3);
+    expect(rows).toEqual([
+      [1, 4, 7, 10],
+      [2, 5, 8],
+      [3, 6, 9],
+    ]);
+  });
+});

package/src/atoms/app/index.ts

@@ -32,8 +32,7 @@ export const userIdAtom = atom(
       return maybeUserId;
     }
 
-    const { getUserIdOrDefault } = useUserIdentity();
-    return getUserIdOrDefault();
+    throw new Error('userIdAtom is not set. Ensure that all use of userIdAtom is under UserIdentityProvider');
   },
   (_, set, value: string | undefined) => {
     set(internalUserIdAtom, value);

package/src/atoms/search/productRetrievalAPI.ts

@@ -0,0 +1,70 @@
+
+import { atom } from "jotai";
+import { getProductRetrievalFunction } from "./productRetrievalAdapter";
+import { ProductRetrievalParams, ProductRetrievalResult } from "./types";
+
+interface ProductRetrievalState {
+  data: ProductRetrievalResult | null;
+  loading: boolean;
+  error: string | null;
+  lastProductIds: string[] | null;
+}
+
+export const productRetrievalAtom = atom<ProductRetrievalState>({
+  data: null,
+  loading: false,
+  error: null,
+  lastProductIds: null,
+});
+
+export const performProductRetrievalAtom = atom(
+  null,
+  async (get, set, params: ProductRetrievalParams) => {
+    const currentState = get(productRetrievalAtom);
+
+    if (currentState.loading) {
+      return; // Prevent concurrent retrievals
+    }
+
+    set(productRetrievalAtom, {
+      data: null,
+      loading: true,
+      error: null,
+      lastProductIds: params.productIds,
+    });
+
+    try {
+      const retrieveProducts = getProductRetrievalFunction();
+      const result = await retrieveProducts(params);
+      set(productRetrievalAtom, {
+        data: result,
+        loading: false,
+        error: null,
+        lastProductIds: params.productIds,
+      });
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
+      set(productRetrievalAtom, {
+        data: null,
+        loading: false,
+        error: errorMessage,
+        lastProductIds: params.productIds,
+      });
+    }
+  }
+);
+
+// Get just the products array (already normalized by service)
+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

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

package/src/atoms/search/types.ts

@@ -1,3 +1,5 @@
+import { SearchResponseProductAttributes } from "src/application/models/api/response";
+
 export enum ProductSorting {
   FEATURED = 'featured',
   PRICE_ASC = 'price_asc',
@@ -53,3 +55,14 @@ export enum ChatSearchSortOverrides {
   MOBILE_FILTER_MODAL_OPTION_DESCRIPTION = 'spiffy-chat-search-filter-modal-option-desc',
   MOBILE_FILTER_MODAL_APPLY_BUTTON = 'spiffy-chat-search-filter-modal-apply-button',
 }
+
+// Custom product retrieval result interface
+export interface ProductRetrievalResult {
+  products: SearchResponseProductAttributes['attributes'][];
+  totalProductCount: number;
+}
+
+// Product retrieval parameters interface
+export interface ProductRetrievalParams {
+  productIds: string[];
+}

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

@@ -0,0 +1,411 @@
+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 { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
+
+// Mock the Logger to avoid console output in tests
+vi.spyOn(Logger, "logDebug").mockImplementation(() => {});
+
+// Mock component that uses the useEnviveConfig hook
+const MockComponent: React.FC = () => {
+  const config = useEnviveConfig();
+
+  return (
+    <div data-testid="mock-component">
+      <div data-testid="amplitude-api-key">{config?.amplitudeApiKey || "not-set"}</div>
+      <div data-testid="base-url">{config?.baseUrl || "not-set"}</div>
+      <div data-testid="org-short-name">{config?.orgShortName || "not-set"}</div>
+      <div data-testid="identifying-prefix">{config?.identifyingPrefix || "not-set"}</div>
+      <div data-testid="env">{config?.env || "not-set"}</div>
+      <div data-testid="cdn-url">{config?.cdnUrl || "not-set"}</div>
+      <div data-testid="data-residency">{config?.dataResidency || "not-set"}</div>
+      <div data-testid="react-app-name">{config?.reactAppName || "not-set"}</div>
+      <div data-testid="context-source">{config?.contextSource || "not-set"}</div>
+      <div data-testid="org-level-api-key">{config?.orgLevelApiKey || "not-set"}</div>
+      <div data-testid="public-key">{config?.publicKey || "not-set"}</div>
+      <div data-testid="show">{config?.show?.toString() || "not-set"}</div>
+    </div>
+  );
+};
+
+// Component that directly reads from the atom to verify it's set
+const AtomReaderComponent: React.FC = () => {
+  const config = useAtomValue(enviveConfigAtom);
+
+  return (
+    <div data-testid="atom-reader">
+      <div data-testid="atom-amplitude-api-key">
+        {config?.amplitudeApiKey || "not-set"}
+      </div>
+      <div data-testid="atom-identifying-prefix">
+        {config?.identifyingPrefix || "not-set"}
+      </div>
+    </div>
+  );
+};
+
+describe("EnviveConfigProvider", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Provider Integration with Jotai Store", () => {
+    it("should set the enviveConfigAtom when provider is mounted", async () => {
+      const testConfig = {
+        amplitudeApiKey: "test-amplitude-key",
+        baseUrl: "https://test-api.example.com",
+        orgShortName: "test-org",
+        identifyingPrefix: "test-prefix",
+        env: "test",
+        cdnUrl: "https://test-cdn.example.com",
+        dataResidency: "us",
+        reactAppName: "test-app",
+        contextSource: "test-source",
+        orgLevelApiKey: "test-org-key",
+        publicKey: "test-public-key",
+        show: true,
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={testConfig.amplitudeApiKey}
+            baseUrl={testConfig.baseUrl}
+            orgShortName={testConfig.orgShortName}
+            identifyingPrefix={testConfig.identifyingPrefix}
+            env={testConfig.env}
+            cdnUrl={testConfig.cdnUrl}
+            dataResidency={testConfig.dataResidency}
+            reactAppName={testConfig.reactAppName}
+            contextSource={testConfig.contextSource}
+            orgLevelApiKey={testConfig.orgLevelApiKey}
+            publicKey={testConfig.publicKey}
+            show={testConfig.show}
+          >
+            <AtomReaderComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      // Wait for the atom to be set (useEffect runs after render)
+      await waitFor(() => {
+        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
+          testConfig.amplitudeApiKey
+        );
+      });
+
+      expect(screen.getByTestId("atom-identifying-prefix")).toHaveTextContent(
+        testConfig.identifyingPrefix
+      );
+    });
+
+    it("should update the atom when provider props change", async () => {
+      const initialConfig = {
+        amplitudeApiKey: "initial-key",
+        identifyingPrefix: "initial-prefix",
+      };
+
+      const { rerender } = render(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={initialConfig.amplitudeApiKey}
+            identifyingPrefix={initialConfig.identifyingPrefix}
+          >
+            <AtomReaderComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
+          initialConfig.amplitudeApiKey
+        );
+      });
+
+      const updatedConfig = {
+        amplitudeApiKey: "updated-key",
+        identifyingPrefix: "updated-prefix",
+      };
+
+      rerender(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={updatedConfig.amplitudeApiKey}
+            identifyingPrefix={updatedConfig.identifyingPrefix}
+          >
+            <AtomReaderComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
+          updatedConfig.amplitudeApiKey
+        );
+      });
+
+      expect(screen.getByTestId("atom-identifying-prefix")).toHaveTextContent(
+        updatedConfig.identifyingPrefix
+      );
+    });
+  });
+
+  describe("useEnviveConfig Hook Integration", () => {
+    it("should allow components to access config via useEnviveConfig hook", async () => {
+      const testConfig = {
+        amplitudeApiKey: "hook-test-key",
+        baseUrl: "https://hook-test-api.example.com",
+        orgShortName: "hook-test-org",
+        identifyingPrefix: "hook-prefix",
+        env: "production",
+        cdnUrl: "https://hook-test-cdn.example.com",
+        dataResidency: "eu",
+        reactAppName: "hook-test-app",
+        contextSource: "hook-source",
+        orgLevelApiKey: "hook-org-key",
+        publicKey: "hook-public-key",
+        show: false,
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={testConfig.amplitudeApiKey}
+            baseUrl={testConfig.baseUrl}
+            orgShortName={testConfig.orgShortName}
+            identifyingPrefix={testConfig.identifyingPrefix}
+            env={testConfig.env}
+            cdnUrl={testConfig.cdnUrl}
+            dataResidency={testConfig.dataResidency}
+            reactAppName={testConfig.reactAppName}
+            contextSource={testConfig.contextSource}
+            orgLevelApiKey={testConfig.orgLevelApiKey}
+            publicKey={testConfig.publicKey}
+            show={testConfig.show}
+          >
+            <MockComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      // Wait for the config to be available
+      await waitFor(() => {
+        expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent(
+          testConfig.amplitudeApiKey
+        );
+      });
+
+      // Verify all config values are accessible via the hook
+      expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent(
+        testConfig.amplitudeApiKey
+      );
+      expect(screen.getByTestId("base-url")).toHaveTextContent(
+        testConfig.baseUrl
+      );
+      expect(screen.getByTestId("org-short-name")).toHaveTextContent(
+        testConfig.orgShortName
+      );
+      expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
+        testConfig.identifyingPrefix
+      );
+      expect(screen.getByTestId("env")).toHaveTextContent(testConfig.env);
+      expect(screen.getByTestId("cdn-url")).toHaveTextContent(
+        testConfig.cdnUrl
+      );
+      expect(screen.getByTestId("data-residency")).toHaveTextContent(
+        testConfig.dataResidency
+      );
+      expect(screen.getByTestId("react-app-name")).toHaveTextContent(
+        testConfig.reactAppName
+      );
+      expect(screen.getByTestId("context-source")).toHaveTextContent(
+        testConfig.contextSource
+      );
+      expect(screen.getByTestId("org-level-api-key")).toHaveTextContent(
+        testConfig.orgLevelApiKey
+      );
+      expect(screen.getByTestId("public-key")).toHaveTextContent(
+        testConfig.publicKey
+      );
+      expect(screen.getByTestId("show")).toHaveTextContent(
+        testConfig.show.toString()
+      );
+    });
+
+    it("should return empty object when config is not set", () => {
+      // Component that uses the hook without provider
+      const UnwrappedComponent: React.FC = () => {
+        const config = useEnviveConfig();
+        return (
+          <div data-testid="unwrapped">
+            {config && Object.keys(config).length === 0 ? "empty" : "not-empty"}
+          </div>
+        );
+      };
+
+      render(
+        <Provider>
+          <UnwrappedComponent />
+        </Provider>
+      );
+
+      // The hook should return an empty object when config is not set
+      expect(screen.getByTestId("unwrapped")).toHaveTextContent("empty");
+    });
+
+    it("should handle optional props correctly", async () => {
+      const minimalConfig = {
+        identifyingPrefix: "minimal-prefix",
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider identifyingPrefix={minimalConfig.identifyingPrefix}>
+            <MockComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
+          minimalConfig.identifyingPrefix
+        );
+      });
+
+      // Optional props should show "not-set" when not provided
+      expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent("not-set");
+      expect(screen.getByTestId("base-url")).toHaveTextContent("not-set");
+      expect(screen.getByTestId("org-short-name")).toHaveTextContent("not-set");
+    });
+
+    it("should handle featureOverrides and featureGates", async () => {
+      const featureOverrides = {
+        feature1: true,
+        feature2: false,
+      };
+
+      const featureGates = [
+        {
+          featureName: "testFeature",
+          enabled: true,
+        },
+      ] as any[];
+
+      const FeatureConfigComponent: React.FC = () => {
+        const config = useEnviveConfig();
+        return (
+          <div data-testid="feature-config">
+            <div data-testid="feature-overrides">
+              {JSON.stringify(config?.featureOverrides || {})}
+            </div>
+            <div data-testid="feature-gates">
+              {JSON.stringify(config?.featureGates || [])}
+            </div>
+          </div>
+        );
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            identifyingPrefix="test"
+            featureOverrides={featureOverrides}
+            featureGates={featureGates}
+          >
+            <FeatureConfigComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("feature-overrides")).toHaveTextContent(
+          JSON.stringify(featureOverrides)
+        );
+      });
+
+      expect(screen.getByTestId("feature-gates")).toHaveTextContent(
+        JSON.stringify(featureGates)
+      );
+    });
+  });
+
+  describe("Provider Context Integration", () => {
+    it("should provide config through React Context", async () => {
+      const testConfig = {
+        identifyingPrefix: "context-prefix",
+        orgShortName: "context-org",
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            identifyingPrefix={testConfig.identifyingPrefix}
+            orgShortName={testConfig.orgShortName}
+          >
+            <MockComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
+          testConfig.identifyingPrefix
+        );
+      });
+
+      expect(screen.getByTestId("org-short-name")).toHaveTextContent(
+        testConfig.orgShortName
+      );
+    });
+
+    it("should not render children when config is falsy", () => {
+      const TestChild: React.FC = () => <div data-testid="child">Child</div>;
+
+      // This shouldn't happen in practice, but testing the conditional render
+      const { container } = render(
+        <Provider>
+          <EnviveConfigProvider identifyingPrefix="" show={false}>
+            <TestChild />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      // Children should still render even if some props are falsy
+      // The condition `config ? children : null` checks if config object exists, not individual props
+      expect(screen.getByTestId("child")).toBeInTheDocument();
+    });
+  });
+
+  describe("Logger Integration", () => {
+    it("should log debug message when setting config", async () => {
+      const logSpy = vi.spyOn(Logger, "logDebug");
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            identifyingPrefix="test"
+            amplitudeApiKey="test-key"
+          >
+            <div>Test</div>
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(logSpy).toHaveBeenCalledWith(
+          "EnviveConfigProvider: Setting EnviveConfig",
+          expect.objectContaining({
+            identifyingPrefix: "test",
+            amplitudeApiKey: "test-key",
+          })
+        );
+      });
+
+      logSpy.mockRestore();
+    });
+  });
+});
+