@envive-ai/react-hooks 0.3.1 → 0.3.2

package/src/contexts/types.ts

@@ -462,8 +462,7 @@ interface VisitCategoryMap extends BaseCategoryExtractor<CategoryExtractorType.V
 }
 
 // This will return a hard-coded default PageVisitCategory. It is intended to be used by fallback page types
-interface VisitCategoryDefault
-  extends BaseCategoryExtractor<CategoryExtractorType.VisitCategoryDefault> {
+interface VisitCategoryDefault extends BaseCategoryExtractor<CategoryExtractorType.VisitCategoryDefault> {
   value: PageVisitCategory;
 }
 
@@ -549,16 +548,13 @@ interface QueryParamTest extends BasePageVariantTest<PageVariantTestType.QueryPa
   queryParam: string;
 }
 
-interface UserHasInteractedTest
-  extends BasePageVariantTest<PageVariantTestType.UserHasInteracted> {}
+interface UserHasInteractedTest extends BasePageVariantTest<PageVariantTestType.UserHasInteracted> {}
 
-interface UserHasNotInteractedTest
-  extends BasePageVariantTest<PageVariantTestType.UserHasNotInteracted> {}
+interface UserHasNotInteractedTest extends BasePageVariantTest<PageVariantTestType.UserHasNotInteracted> {}
 
 interface IsLoadingTest extends BasePageVariantTest<PageVariantTestType.isLoading> {}
 
-interface IsProductComparison
-  extends BasePageVariantTest<PageVariantTestType.isProductComparison> {}
+interface IsProductComparison extends BasePageVariantTest<PageVariantTestType.isProductComparison> {}
 
 interface PageFallbackTest extends BasePageVariantTest<PageVariantTestType.Fallback> {}
 
@@ -664,6 +660,15 @@ enum WidgetType {
   NoOp = 'NoOp',
 }
 
+export enum WidgetTypeV3 {
+  SuggestionBarV3 = 'SuggestionBarV3',
+  ChatPreviewV3 = 'ChatPreviewV3',
+  SocialProofV3 = 'SocialProofV3',
+  ImagePromptCardV3 = 'ImagePromptCardV3',
+  ImageBannerV3 = 'ImageBannerV3',
+  SingleImagePromptV3 = 'SingleImagePromptV3',
+}
+
 type WidgetConfig =
   | ChatPreviewWidgetConfig
   | SocialProofV2WidgetConfig
@@ -751,31 +756,26 @@ interface BaseChatPreviewConfig {
 
 // Specific chat preview widget configurations
 interface ChatPreviewPostInteractionWidgetConfig
-  extends BaseWidgetConfig<WidgetType.ChatPreviewPostInteraction>,
-    BaseChatPreviewConfig {
+  extends BaseWidgetConfig<WidgetType.ChatPreviewPostInteraction>, BaseChatPreviewConfig {
   chatPreviewVariant: ChatPreviewVariant;
   addSeparators?: boolean;
 }
 
 interface ChatPreviewIsLoadingWidgetConfig
-  extends BaseWidgetConfig<WidgetType.ChatPreviewIsLoading>,
-    BaseChatPreviewConfig {}
+  extends BaseWidgetConfig<WidgetType.ChatPreviewIsLoading>, BaseChatPreviewConfig {}
 
 interface ChatPreviewProductComparisonWidgetConfig
-  extends BaseWidgetConfig<WidgetType.ChatPreviewProductComparison>,
-    BaseChatPreviewConfig {
+  extends BaseWidgetConfig<WidgetType.ChatPreviewProductComparison>, BaseChatPreviewConfig {
   useLargeProductComparison?: boolean;
 }
 
 interface ChatPreviewV2WidgetConfig
-  extends BaseWidgetConfig<WidgetType.ChatPreviewV2>,
-    BaseChatPreviewConfig {
+  extends BaseWidgetConfig<WidgetType.ChatPreviewV2>, BaseChatPreviewConfig {
   animatedTextConfig: ChatPreviewAnimatedTextConfig;
 }
 
 interface SocialProofV2WidgetConfig
-  extends BaseWidgetConfig<WidgetType.SocialProofV2>,
-    BaseChatPreviewConfig {
+  extends BaseWidgetConfig<WidgetType.SocialProofV2>, BaseChatPreviewConfig {
   customerQuery?: string; // Default: 'asked which products are the best'
   imageConfig: SocialProofImageConfig;
 }
@@ -811,8 +811,7 @@ interface SingleImagePromptWidgetConfig extends BaseWidgetConfig<WidgetType.Sing
   userQueryButtonConfig: UserQueryButtonConfig;
 }
 
-interface SearchEntryPointWidgetConfig
-  extends BaseWidgetConfig<WidgetType.SearchZeroStateEntryPoint> {
+interface SearchEntryPointWidgetConfig extends BaseWidgetConfig<WidgetType.SearchZeroStateEntryPoint> {
   searchZeroStateVariant: SearchZeroStateVariant;
   searchInputVariant: SearchInputVariant;
   searchIconVariant?: SearchIconVariant;
@@ -830,8 +829,7 @@ interface SearchEntryPointWidgetConfig
 interface NoOpWidgetConfig extends BaseWidgetConfig<WidgetType.NoOp> {}
 interface SearchOverlayHostWidgetConfig extends BaseWidgetConfig<WidgetType.SearchOverlayHost> {}
 
-interface SearchResultsEntryPointWidgetConfig
-  extends BaseWidgetConfig<WidgetType.SearchResultsEntryPoint> {
+interface SearchResultsEntryPointWidgetConfig extends BaseWidgetConfig<WidgetType.SearchResultsEntryPoint> {
   searchInputVariant: SearchInputVariant;
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   productGridVariant: ProductGridVariant;

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

@@ -1,17 +1,11 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { Provider, useStore } from 'jotai';
-import { useAtomValue } from 'jotai';
-import {
-  UserIdentityProvider,
-  useUserIdentity,
-  UserIdentityContextType,
-} from '../userIdentityContext';
 import { userIdAtom } from 'src/atoms/app';
 import { LocalStorageProvider } from 'src/contexts/localStorageContext';
 import Logger from 'src/application/logging/logger';
 import CommerceApiClient from 'src/application/commerce-api';
-import { v4 as uuid } from 'uuid';
+import { UserIdentityProvider, useUserIdentity } from '../userIdentityContext';
 
 // Mock the Logger to avoid console output in tests
 vi.spyOn(Logger, 'logInfo').mockImplementation(() => {});
@@ -104,6 +98,7 @@ const IdentifyUserComponent: React.FC = () => {
   return (
     <div>
       <button
+        type="button"
         data-testid="identify-button"
         onClick={handleIdentify}
       >

package/src/contexts/userIdentityContext/userIdentityContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import UAParser from 'ua-parser-js';
 import Logger from 'src/application/logging/logger';
 import CommerceApiClient from 'src/application/commerce-api';

package/src/events/index.ts

@@ -29,13 +29,11 @@ export class EventsDispatcher {
    * @param includeDefault - optional parameter to exclude the default event
    *   data
    */
-  static dispatch(eventName: string, detail?: Record<string, any>, includeDefault?: boolean) {
-    if (detail === undefined) {
-      detail = {};
-    }
-    if (includeDefault === undefined) {
-      includeDefault = true;
-    }
+  static dispatch(
+    eventName: string,
+    detail: Record<string, any> = {},
+    includeDefault: boolean = true,
+  ) {
     const eventData = includeDefault ? { ...this.eventData, ...detail } : detail;
     const event = new CustomEvent(eventName, {
       detail: eventData,

package/src/hooks/AmplitudeOperations/useAmplitudeOperations.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import {
   SpiffyMetricsEventName,
   useAmplitude,

package/src/hooks/Debounce/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export function useDebounce<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);

package/src/hooks/ElementObserver/useElementObserver.ts

@@ -151,6 +151,7 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
     if (!renderBlocked) {
       return eoRef.current.render(fn);
     }
+    return undefined;
   };
 
   /**
@@ -211,7 +212,7 @@ export const useElementObserver = (selector: NodeSelector): ElementObserverUtili
    */
   const applyStyle = (styles: React.CSSProperties) => {
     const node = eoRef?.current?.getNode();
-    node && Object.assign(node.style, styles);
+    return node && Object.assign(node.style, styles);
   };
 
   useEffect(() => {

package/src/hooks/GraphQLConfig/useGraphQLConfig.ts

@@ -1,4 +1,6 @@
+import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
+import { orgIdAtom } from 'src/atoms/org/graphqlConfig';
 import { GraphQlConfigValues, useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
 
 export const useColorsAndFrontendConfig = () => {
@@ -32,7 +34,7 @@ export const useColorsAndFrontendConfig = () => {
 
 export const useOrgId = () => {
   const { getOrgId, isReady } = useGraphQLClient();
-  const [orgId, setOrgId] = useState<string | undefined>();
+  const [orgId, setOrgId] = useAtom(orgIdAtom);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -54,7 +56,7 @@ export const useOrgId = () => {
     };
 
     fetchOrgId();
-  }, [getOrgId, isReady]);
+  }, [getOrgId, isReady, setOrgId]);
 
   return { orgId, loading, error };
 };

package/src/hooks/IdentifyUser/useIdentifyUser.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useUserIdentity } from 'src/contexts/userIdentityContext/userIdentityContext';
 
 export const useIdentifyUser = () => {

package/src/hooks/ImageResolver/useImageResolver.ts

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { useAtomValue } from 'jotai';
 import { OrgShortName } from 'src/application/models';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
+
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
 }

package/src/hooks/IsSmallScreen/useIsSmallScreen.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export const useIsSmallScreen = () => {
   const [isSmall, setIsSmall] = useState(false);

package/src/hooks/LocalStorageOperations/useLocalStorageOperations.ts

@@ -1,6 +1,6 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { LocalStorageEventListener } from 'src/application/models/localStorageEventListener';
-import { useLocalStorage, LocalStorageKeys } from 'src/contexts/localStorageContext';
+import { LocalStorageKeys, useLocalStorage } from 'src/contexts/localStorageContext';
 
 // Reactive localStorage value hook
 export const useLocalStorageValue = (key: string) => {
@@ -43,7 +43,15 @@ export const useSpiffyFeatureFlag = () => {
   );
 
   return {
-    value: value === 'true' ? true : value === 'false' ? false : null,
+    value: (() => {
+      if (value === 'true') {
+        return true;
+      }
+      if (value === 'false') {
+        return false;
+      }
+      return null;
+    })(),
     setFlag,
   };
 };
@@ -65,7 +73,15 @@ export const useEnviveFeatureFlag = () => {
   );
 
   return {
-    value: value === 'true' ? true : value === 'false' ? false : null,
+    value: (() => {
+      if (value === 'true') {
+        return true;
+      }
+      if (value === 'false') {
+        return false;
+      }
+      return null;
+    })(),
     setFlag,
   };
 };

package/src/hooks/Search/__tests__/useSearch.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Provider, useAtomValue, useSetAtom } from 'jotai';
-import { useSearch } from '../useSearch';
+import { Provider, useSetAtom } from 'jotai';
 import { AmplitudeProvider } from 'src/contexts/amplitudeContext/amplitudeContext';
 import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
 import { LocalStorageProvider } from 'src/contexts/localStorageContext/localStorageContext';
@@ -12,19 +11,18 @@ import { FeatureFlagServiceProvider } from 'src/contexts/featureFlagServiceConte
 import { NewOrgConfigProvider } from 'src/contexts/newOrgConfigContext/newOrgConfigContext';
 import { SearchProvider } from 'src/contexts/searchContext/searchContext';
 import {
+  createFilterOption,
   searchAtom,
   searchParamsAtom,
-  searchSelectedFiltersAtom,
   searchProductSortingAtom,
-  searchFiltersAtom,
+  searchSelectedFiltersAtom,
 } from 'src/atoms/search';
 import { isFilterOpenAtom } from 'src/atoms/globalSearch/globalSearch';
 import { ProductSorting } from 'src/atoms/search/types';
 import { SearchResult } from 'src/application/models/api/search';
 import { SearchResultsState } from 'src/hooks/utils';
-import { createFilterOption } from 'src/atoms/search';
-import { SearchFilterDatum } from 'src/types/search-filter-types';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { useSearch } from '../useSearch';
 
 // Mock dependencies
 vi.mock('src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent', () => ({
@@ -231,6 +229,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
       />
 
       <button
+        type="button"
         data-testid="submit-search"
         onClick={searchHook.onSubmitSearch}
       >
@@ -238,6 +237,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
       </button>
 
       <button
+        type="button"
         data-testid="toggle-filter"
         onClick={() => searchHook.setIsFilterOpen(!searchHook.isFilterOpen)}
       >
@@ -245,6 +245,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
       </button>
 
       <button
+        type="button"
         data-testid="clear-all-filters"
         onClick={searchHook.onClearAllFilters}
       >
@@ -252,6 +253,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
       </button>
 
       <button
+        type="button"
         data-testid="reset-search"
         onClick={searchHook.resetSearch}
       >
@@ -260,6 +262,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
 
       {searchHook.availableDynamicFilters.length > 0 && (
         <button
+          type="button"
           data-testid="toggle-dynamic-filter"
           onClick={() =>
             searchHook.onToggleDynamicFilter({
@@ -274,6 +277,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
 
       {searchHook.searchFilters.length > 0 && (
         <button
+          type="button"
           data-testid="select-filter-item"
           onClick={() =>
             searchHook.onSelectFilterItem({
@@ -290,6 +294,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect =
 
       {searchHook.selectedFilterOptions.length > 0 && (
         <button
+          type="button"
           data-testid="remove-filter"
           onClick={() => searchHook.onRemoveFilter(searchHook.selectedFilterOptions[0])}
         >
@@ -619,7 +624,7 @@ describe('useSearch', () => {
     it('should show loading state', async () => {
       render(
         <TestWrapper
-          loading={true}
+          loading
           query="test"
         >
           <TestComponent />
@@ -803,8 +808,8 @@ describe('useSearch', () => {
   describe('Allow Redirect Option', () => {
     it('should pass allowRedirect option to performSearch', async () => {
       render(
-        <TestWrapper allowRedirect={true}>
-          <TestComponent allowRedirect={true} />
+        <TestWrapper allowRedirect>
+          <TestComponent allowRedirect />
         </TestWrapper>,
       );
 

package/src/hooks/Search/useRecommendedProducts.ts

@@ -2,13 +2,13 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { useEffect } from 'react';
 import { useFeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import {
-  retrievedProductsAtom,
   performProductRetrievalAtom,
   productRetrievalAtom,
+  retrievedProductsAtom,
 } from 'src/atoms/search/productRetrievalAPI';
-import { useNewOrgConfig } from '../NewOrgConfig';
 import { SearchResponseProductAttributes } from 'src/application/models/api/response';
 import { FeatureGates } from 'src/application/models';
+import { useNewOrgConfig } from '../NewOrgConfig';
 
 /**
  * A hook to get recommended products.

package/src/hooks/Search/useSearchInput.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useMemo } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import Fuse from 'fuse.js';
 

package/src/hooks/SearchOperations/useSearchOperations.ts

@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSearchService } from 'src/contexts/searchContext';
-import { SearchResult, SearchParams } from 'src/application/models/api/search';
+import { SearchParams, SearchResult } from 'src/application/models/api/search';
 
 export const useProductSearch = () => {
   const { searchProducts, isReady } = useSearchService();

package/src/hooks/SessionStorageOperations/useSessionStorageOperations.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSessionStorage } from 'src/contexts/sessionStorageContext';
 
 export const useSessionStorageValue = (key: string) => {

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -39,7 +39,7 @@ export const useTrackComponentVisibleEvent = (
     }
     // Default case for other event types
     return {
-      component: component,
+      component,
       ...eventProps,
     };
   })();
@@ -47,7 +47,7 @@ export const useTrackComponentVisibleEvent = (
   useEffect(() => {
     if (isVisible && !hasTrackedEvent.current) {
       trackEvent({
-        eventName: eventName,
+        eventName,
         eventProps: componentProps,
       });
       hasTrackedEvent.current = true;

package/src/hooks/utils.ts

@@ -80,11 +80,11 @@ const parseTime = (time: string, timeZone: string) => {
     // Adjust hours for AM/PM
     let adjustedHours = 0;
     if (period.toUpperCase() === 'PM' && hours !== '12') {
-      adjustedHours = parseInt(hours) + 12;
+      adjustedHours = parseInt(hours, 10) + 12;
     }
 
     if (period.toUpperCase() === 'AM' && hours !== '12') {
-      adjustedHours = parseInt(hours);
+      adjustedHours = parseInt(hours, 10);
     }
 
     // Create the date string with time zone
@@ -94,6 +94,7 @@ const parseTime = (time: string, timeZone: string) => {
     )}:${minutes}:00`;
     return new Date(`${formattedDate}${timeZone}`);
   }
+  return undefined;
 };
 
 export const isWithinBusinessHours = (startTime: string, endTime: string, timeZone: string) => {