@envive-ai/react-hooks 0.1.3 → 0.1.5

package/src/merchants/uniqueVintage/views/useUniqueVintageChatSearch.ts

@@ -1,147 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
-import { SelectorFactory } from 'src/application/utils/nodeSelector';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
-
-import { ElementObserverUtility, useElementObserver, useIsSmallScreen } from 'src/hooks';
-
-export const useUniqueVintageChatSearch = () => {
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const ids = orgUIConfig.conversationalSearch;
-  const isSmallScreen = useIsSmallScreen();
-
-  const entrypointContainer = useElementObserver(SelectorFactory.parse(ids?.entrypointContainer));
-  const productGridContainer = useElementObserver(SelectorFactory.parse(ids?.productGridContainer));
-  const searchContainer = useElementObserver(SelectorFactory.parse(ids?.searchContent)); // // .ss__autocomplete--target
-  const pageContent = useElementObserver(SelectorFactory.parse(ids?.pageContent));
-  const generalSearchBtn = useElementObserver(SelectorFactory.parse(ids?.generalSearchBtn));
-  const navEntryPointContainer = useElementObserver(
-    SelectorFactory.query('.menu-drawer__navigation-container'),
-  );
-
-  /**
-   * TODO: Added this for now to fulfill a Unique Vintage requirement, but it'll be removed when
-   * migrating to the mount point structure.
-   */
-  // UV has two different search fields so we need to check them both.
-  const nativeSearchTextFields = [
-    // Mobile search field
-    useElementObserver(SelectorFactory.query('#Search-In-Modal')),
-    // Desktop search field
-    useElementObserver(SelectorFactory.query('#Search-In-Modal-1')),
-  ];
-  const searchBar = useElementObserver(SelectorFactory.query('.mobile-search'));
-  const desktopSearchInput = useElementObserver(SelectorFactory.query('#Search-In-Modal-1'));
-  const mobileSearchInput = useElementObserver(SelectorFactory.query('#Search-In-Modal'));
-  const mobileEntrypointContainer = useElementObserver(
-    SelectorFactory.query('.mobile-search .ss__autocomplete--target'),
-  );
-
-  if (mobileSearchInput.targetNode) {
-    mobileSearchInput.targetNode.onfocus = () => {
-      AmplitudeAdapter.trackEvent({
-        eventName: SpiffyMetricsEventName.SearchBarClicked,
-        eventProps: {
-          search_bar_id: mobileSearchInput.targetNode?.id,
-        },
-        alsoSendToGoogleAnalytics: true,
-      });
-    };
-  }
-  if (desktopSearchInput.targetNode) {
-    desktopSearchInput.targetNode.onfocus = () => {
-      AmplitudeAdapter.trackEvent({
-        eventName: SpiffyMetricsEventName.SearchBarClicked,
-        eventProps: {
-          search_bar_id: desktopSearchInput.targetNode?.id,
-        },
-        alsoSendToGoogleAnalytics: true,
-      });
-    };
-  }
-
-  const searchContent = useElementObserver(SelectorFactory.id('chat-search-entrypoint-mobile'));
-
-  entrypointContainer.onAdd(() => {
-    entrypointContainer.unblockRendering();
-  });
-  navEntryPointContainer.onAdd((el) => {
-    const div = document.createElement('div');
-    div.id = 'chat-search-nav-entrypoint';
-    div.classList.add(
-      'spiffy-tw-w-full',
-      'spiffy-tw-flex',
-      'spiffy-tw-py-2',
-      'spiffy-tw-items-center',
-      'spiffy-tw-justify-center',
-    );
-    el?.prepend(div);
-    navEntryPointContainer.unblockRendering();
-  });
-
-  searchContent.onAdd(() => {
-    searchContent.unblockRendering();
-  });
-
-  searchContainer.onAdd((el) => {
-    // Create a container for the entry point component and insert it properly into the DOM.
-    const div = document.createElement('div');
-    div.id = 'chat-search-entrypoint';
-    div.classList.add(
-      'spiffy-tw-mt-5',
-      'spiffy-tw-w-full',
-      'spiffy-tw-flex',
-      'spiffy-tw-items-center',
-      'spiffy-tw-justify-center',
-    );
-    el?.prepend(div);
-  });
-
-  mobileEntrypointContainer.onAdd((el) => {
-    // Create a container for the entry point component and insert it properly into the DOM.
-    const div = document.createElement('div');
-    div.id = 'chat-search-entrypoint-mobile';
-    div.classList.add(
-      'spiffy-tw-mt-5',
-      'spiffy-tw-w-full',
-      'spiffy-tw-flex',
-      'spiffy-tw-items-center',
-      'spiffy-tw-justify-center',
-    );
-    el?.prepend(div);
-  });
-
-  pageContent.onAdd((el) => {
-    // Create a container for the product page component and insert it properly into the DOM.
-    const div = document.createElement('div');
-    div.id = 'chat-search-product-page';
-    el?.insertAdjacentElement('afterend', div);
-  });
-
-  const onShowProductGrid = () => {
-    isSmallScreen && searchBar.hide();
-  };
-
-  const getNativeSearchTextFieldValue = (): string => {
-    // Find the first search field that has a value.
-    const nativeSearchTextField: ElementObserverUtility | undefined = nativeSearchTextFields.find(
-      (field) => field.targetNode instanceof HTMLInputElement && field.targetNode.value,
-    );
-    if (nativeSearchTextField && nativeSearchTextField.targetNode instanceof HTMLInputElement) {
-      return nativeSearchTextField.targetNode.value;
-    }
-
-    return '';
-  };
-
-  return {
-    entrypointContainer,
-    productGridContainer,
-    pageContent,
-    generalSearchBtn,
-    searchContent,
-    getNativeSearchTextFieldValue,
-    onShowProductGrid,
-    navEntryPointContainer,
-  };
-};