@envive-ai/react-hooks 0.2.6-alpha-arthur-2 → 0.2.6-alpha.11

package/src/atoms/search/searchAPI.ts

@@ -1,10 +1,10 @@
-import { atom } from 'jotai';
-import { ProductSorting } from '@envive-ai/types';
-import { ProductFilters } from './productFilters';
-import { ProductSorter } from './productSorter';
-import { newOrgConfigAtom } from '../org';
-import { getSearchServiceFunction } from './searchServiceAdapter';
-import { SearchParams, SearchResult } from '@envive-ai/types';
+import { atom } from "jotai";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+import { ProductSorting } from "./types";
+import { ProductFilters } from "./productFilters";
+import { ProductSorter } from "./productSorter";
+import { newOrgConfigAtom } from "../org";
+import { getSearchServiceFunction } from "./searchServiceAdapter";
 
 export type SelectedFilterOption = {
   id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
@@ -27,13 +27,15 @@ export const searchAtom = atom<SearchState>({
   lastQuery: null,
 });
 
-export const searchProductSortingAtom = atom<ProductSorting>(ProductSorting.FEATURED);
+export const searchProductSortingAtom = atom<ProductSorting>(
+  ProductSorting.FEATURED
+);
 export const searchSelectedFiltersAtom = atom<SelectedFilterOption[]>([]);
 
 export const createFilterOption = (
   filterId: string,
   filterItemId: string,
-  displayName: string,
+  displayName: string
 ): SelectedFilterOption => ({
   id: `${filterId}:${filterItemId}`,
   displayName,
@@ -53,7 +55,7 @@ export const searchParamsAtom = atom(
   (get) => get(internalSearchParamsAtom),
   (_, set, value: { id: string | null; query: string | null }) => {
     set(internalSearchParamsAtom, value);
-  },
+  }
 );
 export const internalSearchSystemStateAtom = atom<boolean>(false);
 
@@ -65,9 +67,9 @@ export const searchSystemAtom = atom(
     }
     const stateChangeHandler = () => {
       const params = new URLSearchParams(window.location.search);
-      if (params.get('es') === 'true') {
-        const id = params.get('esi');
-        const query = params.get('esq');
+      if (params.get("es") === "true") {
+        const id = params.get("esi");
+        const query = params.get("esq");
         set(searchParamsAtom, { id, query });
       } else {
         set(searchParamsAtom, { id: null, query: null });
@@ -75,14 +77,14 @@ export const searchSystemAtom = atom(
     };
     if (value) {
       set(internalSearchSystemStateAtom, true);
-      window.addEventListener('popstate', stateChangeHandler);
+      window.addEventListener("popstate", stateChangeHandler);
       // Also trigger the hash change handler to set the initial state
       stateChangeHandler();
     } else {
       set(internalSearchSystemStateAtom, false);
-      window.removeEventListener('popstate', stateChangeHandler);
+      window.removeEventListener("popstate", stateChangeHandler);
     }
-  },
+  }
 );
 
 export const filteredSearchProductsAtom = atom((get) => {
@@ -91,13 +93,17 @@ export const filteredSearchProductsAtom = atom((get) => {
   const selectedFilters = get(searchSelectedFiltersAtom);
   const newOrgConfig = get(newOrgConfigAtom);
 
-  if (!searchData?.products || !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig) return [];
+  if (
+    !searchData?.products ||
+    !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+  )
+    return [];
 
   const filteredProducts = ProductFilters.filterProducts(
     searchData.products,
     newOrgConfig.frontendConfig.uiConfigs.searchConfig.searchFilterConfig,
     selectedFilters,
-    newOrgConfig.frontendConfig.uiConfigs.searchConfig.additiveDynamicFilters,
+    newOrgConfig.frontendConfig.uiConfigs.searchConfig.additiveDynamicFilters
   );
 
   return ProductSorter.sort(filteredProducts, sorting);
@@ -108,29 +114,39 @@ export const searchFiltersAtom = atom((get) => {
   const selectedFilters = get(searchSelectedFiltersAtom);
   const newOrgConfig = get(newOrgConfigAtom);
 
-  if (!searchData?.products || !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig) return [];
+  if (
+    !searchData?.products ||
+    !newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+  )
+    return [];
 
   return ProductFilters.getFiltersForProducts(
     searchData.products,
     newOrgConfig.frontendConfig.uiConfigs.searchConfig.searchFilterConfig,
-    selectedFilters,
+    selectedFilters
   );
 });
 
-export const addSearchFilterAtom = atom(null, (get, set, filter: SelectedFilterOption) => {
-  const current = get(searchSelectedFiltersAtom);
-  if (!current.some((f) => f.id === filter.id)) {
-    set(searchSelectedFiltersAtom, [...current, filter]);
+export const addSearchFilterAtom = atom(
+  null,
+  (get, set, filter: SelectedFilterOption) => {
+    const current = get(searchSelectedFiltersAtom);
+    if (!current.some((f) => f.id === filter.id)) {
+      set(searchSelectedFiltersAtom, [...current, filter]);
+    }
   }
-});
+);
 
-export const removeSearchFilterAtom = atom(null, (get, set, filterId: string) => {
-  const current = get(searchSelectedFiltersAtom);
-  set(
-    searchSelectedFiltersAtom,
-    current.filter((f) => f.id !== filterId),
-  );
-});
+export const removeSearchFilterAtom = atom(
+  null,
+  (get, set, filterId: string) => {
+    const current = get(searchSelectedFiltersAtom);
+    set(
+      searchSelectedFiltersAtom,
+      current.filter((f) => f.id !== filterId)
+    );
+  }
+);
 
 export const clearSearchFiltersAtom = atom(null, (_, set) => {
   set(searchSelectedFiltersAtom, []);
@@ -142,28 +158,29 @@ export const performSearchAtom = atom(
     const currentState = get(searchAtom);
     const newOrgConfig = get(newOrgConfigAtom);
     const redirectSearchResultsUrl =
-      newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig?.redirectSearchResultsUrl;
+      newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+        ?.redirectSearchResultsUrl;
 
     if (allowRedirect && redirectSearchResultsUrl) {
       const redirectUrl = new URL(redirectSearchResultsUrl);
-      redirectUrl.searchParams.set('es', 'true');
-      redirectUrl.searchParams.set('esq', params.query);
+      redirectUrl.searchParams.set("es", "true");
+      redirectUrl.searchParams.set("esq", params.query);
       window.location.href = redirectUrl.toString();
     } else {
       // Update URL and manually trigger state change (since pushState doesn't trigger popstate)
       const url = new URL(window.location.href);
-      url.searchParams.set('es', 'true');
-      url.searchParams.set('esq', params.query);
-      window.history.pushState({}, '', url);
+      url.searchParams.set("es", "true");
+      url.searchParams.set("esq", params.query);
+      window.history.pushState({}, "", url);
 
       // Manually trigger page variant re-evaluation by dispatching a popstate event
       // This ensures the page variant system detects the URL change and mounts search results
-      window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+      window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     }
 
     // Manually trigger page variant re-evaluation by dispatching a popstate event
     // This ensures the page variant system detects the URL change and mounts search results
-    window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     if (currentState.loading) {
       return; // Prevent concurrent searches
     }
@@ -184,7 +201,8 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     } catch (error: unknown) {
-      const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
       set(searchAtom, {
         data: null,
         loading: false,
@@ -192,5 +210,5 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     }
-  },
+  }
 );

package/src/atoms/search/searchServiceAdapter.ts

@@ -1,4 +1,4 @@
-import { SearchResult, SearchParams } from "@envive-ai/types";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
 
 // This will be set by the SearchProvider when it initializes
 let searchServiceFunction:

package/src/atoms/search/types.ts

@@ -0,0 +1,55 @@
+export enum ProductSorting {
+  FEATURED = 'featured',
+  PRICE_ASC = 'price_asc',
+  PRICE_DESC = 'price_desc',
+}
+
+export const ProductSortingNames = {
+  [ProductSorting.FEATURED]: 'Featured',
+  [ProductSorting.PRICE_ASC]: 'Price Low to High',
+  [ProductSorting.PRICE_DESC]: 'Price High to Low',
+};
+
+export type ChatSearchStateType = 'entrypoint' | 'initializing-search' | 'product-page';
+
+export type ChatSearchFilter = {
+  filterId: string;
+  displayName: string;
+  items: ChatSearchFilterItem[];
+};
+
+export type ChatSearchFilterItem = {
+  filterItemId: string;
+  displayName: string;
+  productCount: number;
+  isSelected: boolean;
+};
+
+export interface ChatSearchSortProps {
+  options: ProductSorting[];
+}
+
+export interface ChatSearchSortModalProps extends ChatSearchSortProps {
+  open: boolean;
+  handlePopupState: (state: boolean) => void;
+}
+
+export interface SortOption {
+  value: ProductSorting;
+  isSelected: boolean;
+  onSelect: (option: ProductSorting) => void;
+}
+
+export enum ChatSearchSortOverrides {
+  DESKTOP_FILTER_CONTAINER = 'spiffy-chat-search-filter-container',
+  DESKTOP_FILTER_SELECT_COMPONENT = 'spiffy-chat-search-filter-select-component',
+  DESKTOP_FILTER_SELECT_ICON = 'spiffy-chat-search-filter-select-icon',
+  MOBILE_FILTER_BUTTON = 'spiffy-chat-search-filter-button',
+  MOBILE_FILTER_MODAL_CONTAINER = 'spiffy-chat-search-filter-modal-container',
+  MOBILE_FILTER_MODAL_HEADER = 'spiffy-chat-search-filter-modal-header',
+  MOBILE_FILTER_MODAL_SELECTION = 'spiffy-chat-search-filter-modal-selection',
+  MOBILE_FILTER_MODAL_OPTION = 'spiffy-chat-search-filter-modal-option',
+  MOBILE_FILTER_MODAL_OPTION_PILL = 'spiffy-chat-search-filter-modal-option-pill',
+  MOBILE_FILTER_MODAL_OPTION_DESCRIPTION = 'spiffy-chat-search-filter-modal-option-desc',
+  MOBILE_FILTER_MODAL_APPLY_BUTTON = 'spiffy-chat-search-filter-modal-apply-button',
+}

package/src/config/divIds.ts

@@ -0,0 +1,27 @@
+// TODO turn this into an enum
+export const SPIFFY_ROOT_ID = 'spiffy-ai-root';
+export const CONTAINER_ID = 'spiffy-ai-container';
+
+export const FLOATING_BUTTON_ID = 'spiffy-ai-floating-button';
+export const CHAT_PREVIEW_CONTAINER_ID = 'spiffy-ai-chat-preview';
+export const GLOBAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-global-search-entrypoint';
+export const SEARCH_RESULTS_ENTRYPOINT_ID = 'spiffy-ai-search-results-entrypoint';
+export const SEARCH_RESULTS_NO_OP_ID = 'spiffy-ai-search-results-no-op-entrypoint';
+export const SEARCH_OVERLAY_ENTRYPOINT_ID = 'spiffy-ai-search-overlay-entrypoint';
+export const SEARCH_OVERLAY_PORTAL_ID = 'spiffy-ai-search-overlay-portal'; // The inner div the overlay portal will render into
+export const HOMEPAGE_DESKTOP_GLOBAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-global-search-entrypoint-desktop-homepage';
+export const HOMEPAGE_TABLET_GLOBAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-global-search-entrypoint-tablet-homepage';
+export const HOMEPAGE_MOBILE_GLOBAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-global-search-entrypoint-mobile-homepage';
+export const MOBILE_GLOBAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-global-search-entrypoint-mobile';
+export const MOBILE_ICON_ONLY_GLOBAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-global-search-entrypoint-mobile-icon-only';
+export const TABLET_GLOBAL_SEARCH_ENTYPOINT_ID = 'spiffy-ai-global-search-entrypoint-tablet';
+export const BOTTOM_REVIEWS_BAR_ID = 'spiffy-bottom-reviews-bar-id';
+export const TOP_SUGGESTION_BAR_PDP_ID = 'spiffy-top-suggestion-bar-id';
+
+export const TOP_PLP_IMAGE_BANNER_ID = 'spiffy-top-plp-image-banner-id';
+export const BOTTOM_PLP_IMAGE_BANNER_ID = 'spiffy-bottom-plp-image-banner-id';
+export const PROMPT_CARD_ID = 'spiffy-ai-prompt-card';
+
+export const CONVERSATIONAL_SEARCH_ENTRYPOINT_ID = 'spiffy-ai-conversational-search-entrypoint';
+export const CONVERSATIONAL_SEARCH_INPUT_ID = 'spiffy-ai-conversational-search-input';
+export const CONVERSATIONAL_SEARCH_MODAL_ID = 'spiffy-ai-conversational-search-modal';

package/src/config/socialProofClasses.ts

@@ -0,0 +1,17 @@
+export const SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_CLASS =
+  "spiffy-social-proof-suggestion-button";
+export const SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_TEXT_CLASS =
+  "spiffy-social-proof-suggestion-button-text";
+export const SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_CONTAINER_CLASS =
+  "spiffy-social-proof-suggestion-button-container";
+export const SPIFFY_SOCIAL_PROOF_CUSTOMER_COUNT_CLASS =
+  "spiffy-social-proof-customer-count";
+export const SPIFFY_SOCIAL_PROOF_CONTENT_CONTAINER_CLASS =
+  "spiffy-social-proof-content-container";
+export const SPIFFY_SOCIAL_PROOF_CONTENT_BUTTON_CLASS =
+  "spiffy-social-proof-content-button";
+export const SPIFFY_SOCIAL_PROOF_CONTENT_IMAGE_CLASS =
+  "spiffy-social-proof-content-image";
+export const SPIFFY_SOCIAL_PROOF_SUGGESTION_FOOTER_TITLE_CLASS =
+  "spiffy-social-proof-suggestion-footer-title";
+export const SPIFFY_SOCIAL_PROOF_HEADER = "spiffy-social-proof-header";

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -7,22 +7,19 @@ import React, {
 } from "react";
 import { useAtomValue } from "jotai";
 import { createInstance } from "@amplitude/analytics-browser";
-import {
-  FeatureGates,
-  OrgShortName,
-  LocalStorageKeys,
-  SpiffyEvent,
-  AmplitudeContextType,
-  SpiffyMetricsEventName,
-  TrackEventParams,
-} from "@envive-ai/types";
+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 { useLocalStorage } from "src/contexts/localStorageContext";
+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";
@@ -34,18 +31,59 @@ import type {
   ServerZoneType,
 } from "@amplitude/analytics-types";
 import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigContext";
-import { useFeatureFlagService } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
-import { EventsDispatcher } from "src/events";
+import {
+  useFeatureFlagService,
+} from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
+import { useUserIdentity } from "src/contexts/userIdentityContext/userIdentityContext";
+
+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",
+}
 
-const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
+interface TrackEventParams {
+  eventName: SpiffyMetricsEventName;
+  eventProps?: Record<string, unknown>;
+  eventGroups?: Record<string, unknown>;
+  alsoSendToGoogleAnalytics?: boolean;
+}
 
-if (typeof window !== 'undefined') {
-  Logger.logInfo('AmplitudeContext: window is defined');
-  (window as any).AmplitudeReact = React;
-} else {
-  Logger.logInfo('AmplitudeContext: window is not defined');
+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,
 }) => {
@@ -315,7 +353,7 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
         });
         const encoder = new TextEncoder();
         const data = encoder.encode(eventData);
-        // calculate a hash of the event properties to use as the insert_id so that duplicate events
+         // calculate a hash of the event properties to use as the insert_id so that duplicate events
         // are automatically dropped by Amplitude
         const hashBuffer = await crypto.subtle.digest("SHA-256", data);
         const hashArray = Array.from(new Uint8Array(hashBuffer));

package/src/contexts/cdnContext/cdnContext.tsx

@@ -1,7 +1,12 @@
 import React, { createContext, useContext, useCallback, useMemo } from "react";
 import { useAtomValue } from "jotai";
 import { cdnUrlAtom } from "../../atoms/envive/enviveConfig";
-import { CdnContextType } from "@envive-ai/types";
+
+interface CdnContextType {
+  cdnUrl: string;
+  getCdnBasePath: () => string;
+  getAssetURL: (assetName: string, orgShortName: string) => string;
+}
 
 const CdnContext = createContext<CdnContextType | null>(null);