@envive-ai/react-hooks 0.2.6-alpha-2 → 0.2.6-alpha-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-hooks",
-  "version": "0.2.6-alpha-2",
+  "version": "0.2.6-alpha-3",
   "description": "React hooks for connecting to Envive AI services.",
   "keywords": [
     "react",

package/src/hooks/Search/useSearch.tsx

@@ -1,5 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   SearchResultsHocProps,
   ProductSorting,
@@ -24,18 +24,18 @@ import {
 } from "../../atoms/search";
 import { isFilterOpenAtom } from "../../atoms/globalSearch/globalSearch";
 import { formatFilterDisplayName } from "../../atoms/search/utils";
-import { useAmplitude } from "../../contexts/amplitudeContext/amplitudeContext";
+import { amplitudeTrackEventAtom } from "../../atoms/amplitude/amplitudeTrackEventAtom";
 import { orgShortNameAtom } from "../../atoms/envive/enviveConfig";
-import { useNewOrgConfig } from "../NewOrgConfig";
+import { newOrgConfigAtom } from "../../atoms/org/newOrgConfigAtom";
+import { retrievedProductsAtom } from "../../atoms/search/productRetrievalAPI";
 import { useTrackComponentVisibleEvent } from "../TrackComponentVisibleEvent";
 import { getSearchResultsState } from "../utils";
-import { useRecommendedProducts } from "./useRecommendedProducts";
 import { useSearchInput } from "./useSearchInput";
 
 export const useSearch = (): SearchResultsHocProps => {
   // Atoms
-  const { trackEvent } = useAmplitude();
-  const config = useNewOrgConfig();
+  const trackEvent = useAtomValue(amplitudeTrackEventAtom);
+  const config = useAtomValue(newOrgConfigAtom);
   const orgShortName = useAtomValue(orgShortNameAtom);
   const { data: searchData, loading: isLoadingSearch } =
     useAtomValue(searchAtom);
@@ -49,7 +49,7 @@ export const useSearch = (): SearchResultsHocProps => {
   const [productSorting, setProductSorting] = useAtom(searchProductSortingAtom);
   const clearFilters = useSetAtom(clearSearchFiltersAtom);
   const searchFilters = useAtomValue(searchFiltersAtom);
-  const recommendedProducts = useRecommendedProducts();
+  const recommendedProducts = useAtomValue(retrievedProductsAtom);
 
   // Refs
   const searchResultsRef = useRef<HTMLDivElement>(null);
@@ -164,7 +164,7 @@ export const useSearch = (): SearchResultsHocProps => {
       filter: string;
       dynamicFilterDisplayName: string;
     }) => {
-      trackEvent({
+      trackEvent?.({
         eventName: SpiffyMetricsEventName.SearchFilterClicked,
         eventProps: {
           filterType: "Dynamic",
@@ -202,7 +202,7 @@ export const useSearch = (): SearchResultsHocProps => {
     }) => {
       if (filterId === "sort") {
         const newSort = filterItemId as ProductSorting;
-        trackEvent({
+        trackEvent?.({
           eventName: SpiffyMetricsEventName.SearchSortClicked,
           eventProps: {
             sortType: newSort,
@@ -215,7 +215,7 @@ export const useSearch = (): SearchResultsHocProps => {
         removeFilter(`${filterId}:${filterItemId}`);
         scrollToTop();
       } else {
-        trackEvent({
+        trackEvent?.({
           eventName: SpiffyMetricsEventName.SearchFilterClicked,
           eventProps: {
             filterType: "Static",
@@ -254,7 +254,7 @@ export const useSearch = (): SearchResultsHocProps => {
 
   useEffect(() => {
     if (productList.length > 0) {
-      trackEvent({
+      trackEvent?.({
         eventName: SpiffyMetricsEventName.SearchResultsViewed,
         eventProps: {
           queryText: searchText,

package/src/hooks/Search/useSearchInput.ts

@@ -8,13 +8,14 @@ import {
 } from "@envive-ai/types";
 import { useAmplitudeTracking } from "../AmplitudeOperations";
 import { autocompleteStateAtom } from "src/atoms/globalSearch";
+import { amplitudeTrackEventAtom } from "src/atoms/amplitude/amplitudeTrackEventAtom";
 
 export const useSearchInput = ({
   initialSearchText = "",
   searchOrigin,
   onSearchSubmit,
 }: UseSearchInputProps): UseSearchInputReturn => {
-  const { track } = useAmplitudeTracking();
+  const track = useAtomValue(amplitudeTrackEventAtom);
 
   // State
   const [searchText, setSearchText] = useState(initialSearchText);
@@ -92,8 +93,11 @@ export const useSearchInput = ({
       }
 
       if (newValue.length === 1) {
-        track(SpiffyMetricsEventName.SearchInputStarted, {
-          searchOrigin,
+        track?.({
+          eventName: SpiffyMetricsEventName.SearchInputStarted,
+          eventProps: {
+            searchOrigin,
+          },
         });
       }
       setSearchText(newValue);
@@ -121,9 +125,13 @@ export const useSearchInput = ({
   const handleSubmitSearch = useCallback(() => {
     setIsFocused(false);
     if (searchText.trim() && onSearchSubmit) {
-      track(SpiffyMetricsEventName.SearchQuerySubmitted, {
-        searchOrigin,
-        queryText: searchText.trim(),
+      track?.({
+        eventName: SpiffyMetricsEventName.SearchQuerySubmitted,
+        eventProps: {
+          searchOrigin,
+          queryText: searchText.trim(),
+        },
+        alsoSendToGoogleAnalytics: true,
       });
       onSearchSubmit(searchText.trim());
     }
@@ -136,9 +144,11 @@ export const useSearchInput = ({
       setHasText(suggestion.trim().length > 0);
       setIsFocused(false);
 
-      track(SpiffyMetricsEventName.SearchQuerySubmitted, {
-        searchOrigin,
-        queryText: suggestion.trim(),
+      track?.({
+        eventName: SpiffyMetricsEventName.SearchInputStarted,
+        eventProps: {
+          searchOrigin,
+        },
       });
 
       if (onSearchSubmit) {