@envive-ai/react-hooks 0.1.5 → 0.1.7

package/src/atoms/search/searchAPI.ts

@@ -1,10 +1,10 @@
 import { atom } from "jotai";
 import { SearchResult, SearchParams } from "src/application/models/api/search";
-import SearchService from "src/application/service/searchService";
 import { ProductSorting } from "./types";
 import { ProductFilters } from "./productFilters";
 import { ProductSorter } from "./productSorter";
-import { orgUIConfigAtom } from "../org";
+import { newOrgConfigAtom } from "../org";
+import { getSearchServiceFunction } from "./searchServiceAdapter";
 
 export type SelectedFilterOption = {
   id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
@@ -91,15 +91,19 @@ export const filteredSearchProductsAtom = atom((get) => {
   const searchData = get(searchAtom).data;
   const sorting = get(searchProductSortingAtom);
   const selectedFilters = get(searchSelectedFiltersAtom);
-  const orgConfig = get(orgUIConfigAtom);
+  const newOrgConfig = get(newOrgConfigAtom);
 
-  if (!searchData?.products || !orgConfig?.searchConfig) return [];
+  if (
+    !searchData?.products ||
+    !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+  )
+    return [];
 
   const filteredProducts = ProductFilters.filterProducts(
     searchData.products,
-    orgConfig.searchConfig.searchFilterConfig,
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.searchFilterConfig,
     selectedFilters,
-    orgConfig.searchConfig.additiveDynamicFilters
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.additiveDynamicFilters
   );
 
   return ProductSorter.sort(filteredProducts, sorting);
@@ -108,13 +112,17 @@ export const filteredSearchProductsAtom = atom((get) => {
 export const searchFiltersAtom = atom((get) => {
   const searchData = get(searchAtom).data;
   const selectedFilters = get(searchSelectedFiltersAtom);
-  const orgConfig = get(orgUIConfigAtom);
+  const newOrgConfig = get(newOrgConfigAtom);
 
-  if (!searchData?.products || !orgConfig?.searchConfig) return [];
+  if (
+    !searchData?.products ||
+    !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+  )
+    return [];
 
   return ProductFilters.getFiltersForProducts(
     searchData.products,
-    orgConfig.searchConfig.searchFilterConfig,
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.searchFilterConfig,
     selectedFilters
   );
 });
@@ -148,9 +156,10 @@ export const performSearchAtom = atom(
   null,
   async (get, set, params: SearchParams, allowRedirect = false) => {
     const currentState = get(searchAtom);
-    const orgUIConfig = get(orgUIConfigAtom);
+    const newOrgConfig = get(newOrgConfigAtom);
     const redirectSearchResultsUrl =
-      orgUIConfig?.searchConfig?.redirectSearchResultsUrl;
+      newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+        ?.redirectSearchResultsUrl;
 
     if (allowRedirect && redirectSearchResultsUrl) {
       const redirectUrl = new URL(redirectSearchResultsUrl);
@@ -183,7 +192,8 @@ export const performSearchAtom = atom(
       lastQuery: params.query,
     });
     try {
-      const result = await SearchService.searchProducts(params);
+      const searchServiceFunction = getSearchServiceFunction();
+      const result = await searchServiceFunction(params);
       set(searchAtom, {
         data: result,
         loading: false,

package/src/atoms/search/searchServiceAdapter.ts

@@ -0,0 +1,25 @@
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+
+// This will be set by the SearchProvider when it initializes
+let searchServiceFunction:
+  | ((params: SearchParams) => Promise<SearchResult>)
+  | null = null;
+
+export const setSearchServiceFunction = (
+  fn: (params: SearchParams) => Promise<SearchResult>
+) => {
+  searchServiceFunction = fn;
+};
+
+export const getSearchServiceFunction = () => {
+  if (!searchServiceFunction) {
+    throw new Error(
+      "Search service function not initialized. Make sure SearchProvider is mounted."
+    );
+  }
+  return searchServiceFunction;
+};
+
+export const clearSearchServiceFunction = () => {
+  searchServiceFunction = null;
+};

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -0,0 +1,465 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
+import { useAtomValue } from "jotai";
+import { createInstance } from "@amplitude/analytics-browser";
+import { FeatureGates } from "src/application/models/featureGates";
+import { OrgShortName } from "src/application/models";
+import { EventsDispatcher, SpiffyEvent } from "src/events";
+import {
+  amplitudeApiKeyAtom,
+  contextSourceAtom,
+  dataResidencyAtom,
+  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,
+  EnrichmentPlugin,
+  Event,
+  ServerZoneType,
+} from "@amplitude/analytics-types";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
+
+export enum SpiffyMetricsEventName {
+  BundleLoaded = "Bundle Loaded",
+  ChatLiveAgentBtnClick = "Chat Live Agent Btn Click",
+  ChatFloatingButtonVisible = "Chat Floating Button Visible",
+  ChatComponentVisible = "Chat Component Visible",
+  ChatComponentExpanded = "Chat Component Expanded",
+  ChatComponentCollapsed = "Chat Component Collapsed",
+  ChatUserMessageInput = "Chat User Message Input",
+  ChatSuggestionClicked = "Chat Suggestion Clicked",
+  ChatAssistantResponse = "Chat Assistant Response",
+  ProductCardClicked = "Product Card Clicked",
+  ProductReviewCardClicked = "Product Review Card Clicked",
+  AddToCartClicked = "Add to Cart Clicked",
+  PromptCardClicked = "Prompt Card Clicked",
+  SupportedEvent = "Supported Event",
+  SearchBackToResponseClicked = "Search Back to Response Clicked",
+  PerformanceMetrics = "Performance Metrics",
+  SearchBarClicked = "Search Bar Clicked",
+  OrderLookupStarted = "Order Lookup Started",
+  OrderLookupFormSubmitted = "Order Lookup Form Submitted",
+  SearchComponentVisible = "Search Component Visible",
+  SearchZeroStateSuggestionClicked = "Search Zero State Suggestion Clicked", // This is the scrolling list of suggestion buttons in global search
+  SearchInputStarted = "Search Input Started",
+  SearchQuerySubmitted = "Search Query Submitted",
+  // SearchAutocompleteViewed = 'Search Autocomplete Viewed', // TODO: add this when autocomplete is added
+  // SearchAutocompleteClicked = 'Search Autocomplete Clicked', // TODO: add this when autocomplete is added
+  SearchResultsViewed = "Search Results Viewed",
+  SearchTimeToFirstClick = "Search Time to First Click",
+  SearchZeroResultsRate = "Search Zero Results Rate",
+  SearchFilterClicked = "Search Filter Clicked",
+  SearchSortClicked = "Search Sort Clicked",
+}
+
+interface TrackEventParams {
+  eventName: SpiffyMetricsEventName;
+  eventProps?: Record<string, unknown>;
+  eventGroups?: Record<string, unknown>;
+  alsoSendToGoogleAnalytics?: boolean;
+}
+
+interface AmplitudeContextType {
+  trackEvent: (params: TrackEventParams) => Promise<void>;
+  isReady: boolean;
+  setSupplementalDefaultProps: (props: Record<string, unknown>) => void;
+}
+
+const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
+
+export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const userId = useAtomValue(userIdAtom);
+  const amplitudeApiKey = useAtomValue(amplitudeApiKeyAtom);
+  const dataResidency = useAtomValue(dataResidencyAtom);
+  const orgGaConfig = useAtomValue(orgAnalyticsGoogleAnalyticsConfigAtom);
+  const env = useAtomValue(envAtom);
+  const contextSource = useAtomValue(contextSourceAtom);
+  const identifyingPrefix = useAtomValue(identifyingPrefixAtom);
+  const { getItem } = useLocalStorage();
+  const {
+    publicKey,
+    featureOverrides,
+    variantUrlOverride,
+    variantInfoOverride,
+    show,
+    orgShortName,
+    featureGates,
+  } = useEnviveConfig();
+
+  const useFeatureFlagService = () => {
+    const isFeatureGateEnabled = useCallback(
+      (gate: string) => {
+        const override = featureOverrides?.[gate];
+        if (override !== undefined) {
+          return override;
+        }
+        return (
+          featureGates?.some((fg) => fg.name === gate && fg.value) || false
+        );
+      },
+      [featureOverrides, featureGates]
+    );
+
+    const isClientSessionEnabled = useCallback(() => {
+      // Assuming this is a feature gate, or needs to be explicitly passed
+      return isFeatureGateEnabled(FeatureGates.IsClientSessionEnabled);
+    }, [isFeatureGateEnabled]);
+
+    const getFeatureFlags = useCallback(() => {
+      const flags: Record<string, boolean> = {};
+      if (featureOverrides) {
+        Object.entries(featureOverrides).forEach(([key, value]) => {
+          flags[key] = value;
+        });
+      }
+      if (featureGates) {
+        featureGates.forEach((fg) => {
+          if (fg.name) {
+            flags[fg.name] = Boolean(fg.value);
+          }
+        });
+      }
+      return flags;
+    }, [featureOverrides, featureGates]);
+
+    return {
+      isFeatureGateEnabled,
+      isClientSessionEnabled,
+      getFeatureFlags,
+    };
+  };
+
+  const featureFlagService = useFeatureFlagService();
+
+  const [amplitudeClient, setAmplitudeClient] = React.useState<
+    BrowserClient | undefined
+  >(undefined);
+  const [internalEventTrackingEnrichment, setInternalEventTrackingEnrichment] =
+    React.useState<EnrichmentPlugin | undefined>(undefined);
+  const [supplementalDefaultProps, setSupplementalDefaultProps] =
+    React.useState<Record<string, unknown>>({});
+
+  const isReady = Boolean(userId && featureFlagService && amplitudeApiKey);
+
+  const getDefaultTrackingProps = useCallback((): Record<string, unknown> => {
+    const gatesProps = featureGates
+      ? featureGates.reduce<Record<string, boolean>>((acc, curr) => {
+          if (curr.name && curr.value != null) {
+            return { ...acc, [`feature_gate.${curr.name}`]: curr.value };
+          }
+          return acc;
+        }, {})
+      : {};
+    const experimentProps = {}; // No direct equivalent for experiments in EnviveConfig yet
+
+    const orgLevelAmplitudeTrackingProps = {
+      ...gatesProps,
+      ...experimentProps,
+    };
+
+    return {
+      ...orgLevelAmplitudeTrackingProps,
+      ...supplementalDefaultProps,
+      // TODO: org_id is not directly available in EnviveConfig. Need to find a new source or derive it.
+      // org_id: orgConfig?.org?.org?.id,
+      app_id: "commerce-chat-react-component",
+      chat_id: getItem(LocalStorageKeys.ChatId),
+      env: env || "unknown",
+      app_source: contextSource,
+      "org.short_name": orgShortName,
+      "user.id": userId,
+      "cdp.user_id": null,
+      "cdp.provider": null,
+      "event.source": "web-browser",
+      "event.type": "user-activity",
+      "event.id": null,
+      "event.channel": "web",
+      "event.timestamp": null,
+    };
+  }, [
+    featureGates,
+    supplementalDefaultProps,
+    env,
+    contextSource,
+    orgShortName,
+    userId,
+  ]);
+
+  const eventPropsToPrefixedEventProps = useCallback(
+    (
+      eventName: SpiffyMetricsEventName,
+      eventProps: Record<string, unknown>
+    ): Record<string, unknown> => {
+      const prefix = eventName.toLowerCase().replace(/\s+/g, "_");
+      return Object.entries(eventProps).reduce((acc, [key, value]) => {
+        acc[`${prefix}.${key}`] = value;
+        return acc;
+      }, {} as Record<string, unknown>);
+    },
+    []
+  );
+
+  const amplitudeSessionReplayInit = useCallback((): boolean => {
+    const isEnabled = Boolean(
+      orgShortName === OrgShortName.UniqueVintage &&
+        featureFlagService?.isClientSessionEnabled() &&
+        featureFlagService?.isFeatureGateEnabled(
+          FeatureGates.IsNewFeatureEnabled
+        )
+    );
+    const sampleRate = 1;
+
+    try {
+      Logger.logDebug(
+        `[spiffy-ai] amplitude session-replay initializing isEnabled=${isEnabled} sampleRate=${sampleRate}`
+      );
+
+      if (!isEnabled) {
+        return isEnabled;
+      }
+
+      // amplitudeInstance.add(sessionReplayPlugin({ sampleRate }));
+
+      return isEnabled;
+    } catch (e) {
+      Logger.logError(
+        "[spiffy-ai] Error initializing amplitude session-replay",
+        e
+      );
+      return false;
+    }
+  }, [orgShortName, featureFlagService]);
+
+  const getEventTrackingEnrichment = useCallback((): EnrichmentPlugin => {
+    if (internalEventTrackingEnrichment !== undefined) {
+      return internalEventTrackingEnrichment;
+    }
+
+    const enrichment: EnrichmentPlugin = {
+      name: "page-view-tracking-enrichment",
+      type: "enrichment",
+      setup: async () => undefined,
+      execute: async (event: Event): Promise<Event> => {
+        let enrichedEvent: Event;
+
+        const eventsToEnrich = [
+          "[Amplitude] Page Viewed",
+          `[Spiffy] ${SpiffyMetricsEventName.BundleLoaded}`,
+        ];
+
+        if (eventsToEnrich.includes(event.event_type)) {
+          const globalProperties: Record<string, string> = {};
+
+          if (publicKey) {
+            globalProperties["globalProperties.publicKey"] = publicKey;
+          }
+          if (featureOverrides) {
+            Object.entries(featureOverrides).forEach(([key, value]) => {
+              globalProperties[`globalProperties.featureOverrides.${key}`] =
+                String(value);
+            });
+          }
+          if (variantUrlOverride) {
+            globalProperties["globalProperties.variantUrlOverride"] =
+              variantUrlOverride;
+          }
+          if (variantInfoOverride) {
+            globalProperties["globalProperties.variantInfoOverride"] =
+              JSON.stringify(variantInfoOverride);
+          }
+          if (show != null) {
+            globalProperties["globalProperties.show"] = String(show);
+          }
+
+          const enabledFeatures = featureFlagService!.getFeatureFlags();
+          const enabledFeaturesProperties = Object.entries(
+            enabledFeatures
+          ).reduce<Record<string, string>>(
+            (acc, [key, value]) => ({
+              ...acc,
+              [`enabledFeatures.${key}`]: `${value}`,
+            }),
+            {}
+          );
+
+          const timingProperties = {
+            "timing.enriched_at_ms": window.performance?.now(),
+          };
+
+          enrichedEvent = {
+            ...event,
+            event_properties: {
+              ...event.event_properties,
+              ...getDefaultTrackingProps(),
+              ...globalProperties,
+              ...enabledFeaturesProperties,
+              ...timingProperties,
+            },
+          };
+        } else {
+          enrichedEvent = event;
+        }
+
+        EventsDispatcher.dispatch(SpiffyEvent.AMPLITUDE_EVENT, enrichedEvent);
+
+        return enrichedEvent;
+      },
+    };
+    setInternalEventTrackingEnrichment(enrichment);
+    return enrichment;
+  }, [
+    internalEventTrackingEnrichment,
+    getDefaultTrackingProps,
+    featureFlagService,
+    publicKey,
+    featureOverrides,
+    variantUrlOverride,
+    variantInfoOverride,
+    show,
+  ]);
+
+  useEffect(() => {
+    if (isReady && !amplitudeClient) {
+      const currentAmplitudeInstance: BrowserClient = createInstance();
+      const isSessionsEnabled = amplitudeSessionReplayInit();
+      currentAmplitudeInstance.add(getEventTrackingEnrichment());
+      currentAmplitudeInstance.init(amplitudeApiKey!, userId!, {
+        serverZone: dataResidency as ServerZoneType,
+        trackingOptions: {
+          ipAddress: true,
+        },
+        autocapture: {
+          attribution: true,
+          pageViews: {
+            trackHistoryChanges: "pathOnly",
+          },
+          sessions: isSessionsEnabled,
+          formInteractions: false,
+          fileDownloads: false,
+        },
+      });
+      setAmplitudeClient(currentAmplitudeInstance);
+    }
+  }, [
+    isReady,
+    amplitudeClient,
+    amplitudeApiKey,
+    userId,
+    dataResidency,
+    amplitudeSessionReplayInit,
+    getEventTrackingEnrichment,
+  ]);
+
+  const trackEvent = useCallback(
+    async ({
+      eventName,
+      eventProps,
+      eventGroups,
+      alsoSendToGoogleAnalytics = false,
+    }: TrackEventParams): Promise<void> => {
+      try {
+        const decoratedEventName = `[Spiffy] ${eventName}`;
+
+        if (!amplitudeClient) {
+          Logger.logWarn("amplitude client undefined", undefined, {
+            event_name: decoratedEventName,
+          });
+          return;
+        }
+
+        const eventData = JSON.stringify({
+          eventName,
+          eventProps,
+          created_at: new Date().toISOString(),
+        });
+        const encoder = new TextEncoder();
+        const data = encoder.encode(eventData);
+        const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        const currentInsertId = hashArray
+          .map((b) => b.toString(16).padStart(2, "0"))
+          .join("");
+
+        Logger.logDebug(`amplitude tracking ${decoratedEventName}`, null, {
+          event_name: decoratedEventName,
+          props: eventProps,
+        });
+
+        amplitudeClient.track(
+          decoratedEventName,
+          {
+            ...getDefaultTrackingProps(),
+            ...eventProps,
+            ...(eventProps
+              ? eventPropsToPrefixedEventProps(eventName, eventProps)
+              : {}),
+          },
+          {
+            ...eventGroups,
+            insert_id: currentInsertId,
+          }
+        );
+
+        if (alsoSendToGoogleAnalytics && orgGaConfig) {
+          Logger.logDebug("[spiffy-ai] GA tracking", decoratedEventName);
+          if (window.dataLayer) {
+            (window.dataLayer as any[]).push({
+              event: decoratedEventName,
+              eventProps: eventProps,
+            });
+          }
+        }
+      } catch (err) {
+        Logger.logError("[spiffy-ai] Error tracking event", err, {
+          eventName,
+          eventProps,
+        });
+      }
+    },
+    [
+      amplitudeClient,
+      getDefaultTrackingProps,
+      eventPropsToPrefixedEventProps,
+      orgGaConfig,
+    ]
+  );
+
+  const value = useMemo(
+    () => ({
+      trackEvent,
+      isReady,
+      setSupplementalDefaultProps: (props: Record<string, unknown>) =>
+        setSupplementalDefaultProps(props),
+    }),
+    [trackEvent, isReady, setSupplementalDefaultProps]
+  );
+
+  return (
+    <AmplitudeContext.Provider value={value}>
+      {children}
+    </AmplitudeContext.Provider>
+  );
+};
+
+export const useAmplitude = () => {
+  const context = useContext(AmplitudeContext);
+  if (!context) {
+    throw new Error("useAmplitude must be used within AmplitudeProvider");
+  }
+  return context;
+};

package/src/contexts/amplitudeContext/index.ts

@@ -0,0 +1 @@
+export * from "./amplitudeContext";

package/src/contexts/cdnContext/cdnContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useCallback, useMemo } from "react";
+import { useAtomValue } from "jotai";
+import { cdnUrlAtom } from "../../atoms/envive/enviveConfig";
+
+interface CdnContextType {
+  cdnUrl: string;
+  getCdnBasePath: () => string;
+  getAssetURL: (assetName: string, orgShortName: string) => string;
+}
+
+const CdnContext = createContext<CdnContextType | null>(null);
+
+export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const cdnUrlAtomValue = useAtomValue(cdnUrlAtom);
+  const cdnUrl = cdnUrlAtomValue || "https://cdn.spiffy.ai/other";
+
+  const getCdnBasePath = useCallback(() => {
+    return cdnUrl;
+  }, [cdnUrl]);
+
+  const getAssetURL = useCallback(
+    (assetName: string, orgShortName: string) => {
+      return `${getCdnBasePath()}/assets/${orgShortName}/${assetName}`;
+    },
+    [getCdnBasePath]
+  );
+
+  const value = useMemo(
+    () => ({
+      cdnUrl,
+      getCdnBasePath,
+      getAssetURL,
+    }),
+    [cdnUrl, getCdnBasePath, getAssetURL]
+  );
+
+  return <CdnContext.Provider value={value}>{children}</CdnContext.Provider>;
+};
+
+export const useCdn = () => {
+  const context = useContext(CdnContext);
+  if (!context) {
+    throw new Error("useCdn must be used within a CdnProvider");
+  }
+  return context;
+};

package/src/contexts/cdnContext/index.ts

@@ -0,0 +1 @@
+export * from "./cdnContext";