@envive-ai/react-hooks 0.1.2 → 0.1.4

package/src/application/service/environmentService.ts

@@ -1,51 +0,0 @@
-import { ContextSourceEnum } from "@spiffy-ai/commerce-api-client";
-import { LocalStorageService } from "./localStorageService";
-import { useEnviveConfig } from "src/contexts/enviveConfigContext";
-
-class EnvironmentService {
-  static getApiEndpoint() {
-    const { baseUrl } = useEnviveConfig();
-    return baseUrl || "https://commerce-api.dev.spiffy.ai";
-  }
-
-  static getContextSource(): ContextSourceEnum {
-    // detect if we're in a storybook context. this is set up in preview.ts
-    if (window.IS_STORYBOOK) {
-      return ContextSourceEnum.Test;
-    }
-
-    const { contextSource } = useEnviveConfig();
-    if (contextSource) {
-      return contextSource as ContextSourceEnum;
-    }
-
-    const spiffyOnFeatureFlagSet = LocalStorageService.getSpiffyOnFeatureFlag();
-    if (spiffyOnFeatureFlagSet === "true") {
-      return ContextSourceEnum.Playground;
-    }
-
-    return ContextSourceEnum.App;
-  }
-
-  static getIdentifyingPrefix(): string {
-    return "spiffy";
-  }
-
-  static getEnvironment = () => {
-    const { env } = useEnviveConfig();
-
-    if (!env) {
-      return "dev";
-    }
-
-    switch (env.toLowerCase()) {
-      case "production":
-      case "prod":
-        return "prod";
-      default:
-        return "dev";
-    }
-  };
-}
-
-export { EnvironmentService };

package/src/extension.ts

@@ -1,63 +0,0 @@
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-
-import Logger from './application/logging/logger';
-
-export type ExtensionInfo = {
-  isLoading: boolean;
-  isInjected: boolean;
-  error?: string | null;
-};
-
-enum MessageTypes {
-  ExtensionInfoUpdate = 'spiffy-extension-info-update',
-}
-
-export const EXTENSION_ID = 'ohickcjdalobhoohmnpjnmgaalphmdje';
-
-const sendMessageToExtensionHost = (type: MessageTypes, payload: ExtensionInfo) => {
-  if (!window.chrome?.runtime) {
-    return Logger.logDebug(
-      '[spiffy-ai] Extension runtime is not exposed, so not sending message',
-      undefined,
-    );
-  }
-
-  return window.chrome.runtime
-    .sendMessage(EXTENSION_ID, { msg: type, ...payload })
-    .then((_response: any) => {
-      if (window.chrome.runtime.lastError) {
-        Logger.logError(window.chrome.runtime.lastError, undefined);
-      } else {
-        Logger.logDebug('[spiffy-ai] Received response from extension host');
-      }
-    })
-    .catch(() => {
-      Logger.logDebug('[spiffy-ai] Unable to log extension message', type, payload);
-    });
-};
-
-export const tellExtensionInjectionIsLoading = () => {
-  return sendMessageToExtensionHost(MessageTypes.ExtensionInfoUpdate, {
-    isLoading: true,
-    isInjected: false,
-    error: null,
-  });
-};
-
-// This is being used in the dynamic script we build and run in the browser.
-export const tellExtensionAboutInjectionError = (error: Error) => {
-  return sendMessageToExtensionHost(MessageTypes.ExtensionInfoUpdate, {
-    isLoading: false,
-    isInjected: false,
-    error: error.message,
-  });
-};
-
-// This is being used in the dynamic script we build and run in the browser.
-export const tellExtensionAboutSuccessfullInjection = () => {
-  return sendMessageToExtensionHost(MessageTypes.ExtensionInfoUpdate, {
-    isLoading: false,
-    isInjected: true,
-    error: null,
-  });
-};

package/src/initialize.ts

@@ -1,163 +0,0 @@
-import Logger from "src/application/logging/logger";
-// this import brings in amplitude and a bunch of other large libraries
-import { EnvironmentService } from "src/application/service/environmentService";
-import {
-  LocalStorageKeys,
-  LocalStorageService,
-} from "src/application/service/localStorageService";
-import { UserIdentityService } from "src/application/service/userIdentityService";
-import { initWindowFrontendConfigOverridesApplyFunction } from "src/application/service/windowFrontendConfigService";
-import {
-  initAmplitude,
-  initDataLayerWrapper,
-} from "src/application/utils/analyticsUtils";
-import { getAtomStore } from "src/atoms/atomStore/atomStore";
-import {
-  apiKeyAtom,
-  featureFlagServiceAtom,
-  getAsyncOrgConfig,
-} from "src/atoms/org/org";
-import { EnabledFeatures } from "src/enabled-features";
-import {
-  EXTENSION_ID,
-  tellExtensionAboutInjectionError,
-  tellExtensionInjectionIsLoading,
-} from "src/extension";
-
-const handleSpiffyOn = () => {
-  const spiffyOn = new URLSearchParams(window.location.search).get(
-    LocalStorageKeys.SpiffyOnOverride
-  );
-  const enviveOn = new URLSearchParams(window.location.search).get(
-    LocalStorageKeys.EnviveOnOverride
-  );
-
-  const isOn = spiffyOn === "true" || enviveOn === "true";
-  if (spiffyOn == null && enviveOn == null) {
-    return;
-  }
-
-  if (isOn === true) {
-    LocalStorageService.setSpiffyOnFeatureFlag(true);
-    return;
-  }
-
-  LocalStorageService.setSpiffyOnFeatureFlag(false);
-  // Do nothing for missing or other values
-};
-
-const getEntryPoint = (): string => {
-  // If `spiffy_main_file` query param is set - use an alternate file for injection
-  const queryParamName = `${EnvironmentService.getIdentifyingPrefix()}_main_file`;
-  const overrideParam = new URLSearchParams(window.location.search).get(
-    queryParamName
-  );
-  if (overrideParam) {
-    return overrideParam;
-  }
-  // #if (VITE_IS_LOCAL_ENV=="true")
-  return "/src/main.tsx";
-  // #else
-  return new URL("./main.js", import.meta.url).toString();
-  // #endif
-};
-
-const loadAndInit = async () => {
-  // #if (VITE_SPLIT_BUILD=="true")
-  const script = document.createElement("script");
-  script.innerHTML = `
-  import('${getEntryPoint()}').then(async ({ initApp, tellExtensionAboutInjectionError }) => {
-    try {
-      if (document.readyState === 'loading') {
-        console.log('[spiffy-ai] document.body is not defined, waiting for DOMContentLoaded');
-        document.addEventListener('DOMContentLoaded', initApp);
-      } else {
-        await initApp();
-      }
-    } catch (e) {
-      await tellExtensionAboutInjectionError(e);
-    }
-  }).catch(async (e) => {
-    if (window.chrome && window.chrome.runtime) {
-      await window.chrome.runtime.sendMessage(
-        '${EXTENSION_ID}',
-        { msg: "spiffy-extension-info-update", error: e.message, isLoading: false, isInjected: false },
-      );  
-    }
-  })`;
-  script.type = "module";
-  script.id = "spiffy-injection-script";
-  document.head.appendChild(script);
-  // #else
-  const { initApp } = await import("./main");
-  await initApp();
-  // #endif
-};
-
-/**
- * Checks if Spiffy is enabled for the current merchant and initializes the main bundle.
- * If Spiffy is disabled, it initializes analytics only.
- *
- * @param apiKeyOverride - Optional API key to use instead of the key configured for the
- * merchant. This should only be used for local development to toggle between different
- * merchants.
- *
- * @returns True if Spiffy is enabled, false otherwise.
- */
-export const init = async (apiKeyOverride?: string) => {
-  if (window[EnvironmentService.getIdentifyingPrefix()]?.isInitialized) {
-    Logger.logDebug(`[spiffy-ai] Spiffy is already initialized`);
-    return true;
-  }
-
-  try {
-    await tellExtensionInjectionIsLoading();
-
-    handleSpiffyOn();
-    const atomStore = getAtomStore();
-    const apiKey = apiKeyOverride ?? atomStore.get(apiKeyAtom);
-    const orgConfig = await getAsyncOrgConfig(apiKey);
-
-    if (!orgConfig.org) {
-      throw new Error("orgConfig is required but is undefined");
-    }
-
-    if (!window._spiffy) {
-      window._spiffy = {};
-    }
-
-    const featureFlagService = atomStore.get(featureFlagServiceAtom);
-
-    const enabledFeatures = await EnabledFeatures.get(
-      orgConfig,
-      featureFlagService
-    );
-
-    // Force initialization of the AmplitudeAdapter now,
-    // so that we automatically immediately send a Page Viewed event,
-    // regardless of whether Spiffy is enabled or not.
-    initAmplitude();
-    initDataLayerWrapper();
-    // Attach a function so callers can explicitly apply overrides to FrontendConfig
-    initWindowFrontendConfigOverridesApplyFunction();
-    await UserIdentityService.identifyUser();
-
-    if (enabledFeatures.envive) {
-      // #if (VITE_IS_CODE_SPLIT_BUILD=="true")
-      const { initApp } = await import("./main");
-      await initApp();
-      // #else
-      await loadAndInit();
-      // #endif
-      return true;
-    }
-
-    await tellExtensionAboutInjectionError({
-      message: "Spiffy is disabled",
-    } as Error);
-    return false;
-  } catch (error: any) {
-    await tellExtensionAboutInjectionError(error);
-    throw error;
-  }
-};

package/src/main.tsx

@@ -1,108 +0,0 @@
-import ReactDOM from "react-dom/client";
-import Logger from "./application/logging/logger";
-import { EventsDispatcher, SpiffyEvent } from "./events";
-import { PerfMetricsEvents, logPerfMetricAtom } from "./atoms/chat";
-import { getAtomStore } from "./atoms/atomStore/atomStore";
-import { getAsyncOrgConfig } from "./atoms/org";
-import {
-  getOrgInfo as getOrgInfoFromSupportedOrgs,
-  VariantInfo,
-} from "./application/models";
-import { EnvironmentService } from "./application/service/environmentService";
-import { OrgInfo } from "./types";
-import { prepareMerchantPage } from "./application/utils/merchantUtils";
-import { CONTAINER_ID } from "./config/divIds";
-import { hasParsedVariantInfoAtom } from "./atoms/app/variant";
-import { EnviveConfigProvider } from "./contexts/enviveConfigContext";
-import React from "react";
-
-declare global {
-  interface Window {
-    dataLayer: any;
-    gtag: (...args: any[]) => void;
-  }
-}
-
-const createReactRoot = () => {
-  const containerRoot = document.createElement("div");
-  containerRoot.id = CONTAINER_ID;
-  containerRoot.style.display = "none";
-  document.body.appendChild(containerRoot);
-  const reactContainerRoot = ReactDOM.createRoot(containerRoot);
-  return reactContainerRoot;
-};
-
-const getOrgInfo = async (): Promise<OrgInfo> => {
-  const orgConfig = await getAsyncOrgConfig();
-
-  if (!orgConfig.org) {
-    throw new Error("orgConfig.org is required but is undefined");
-  }
-
-  const orgShortName = orgConfig.org.org.shortName;
-
-  if (!orgShortName) {
-    throw new Error("orgShortName is required but is undefined");
-  }
-
-  const orgInfo = await getOrgInfoFromSupportedOrgs(orgShortName);
-
-  if (!orgInfo) {
-    throw new Error(
-      `no matching OrgInfo found for orgShortName=${orgShortName}`
-    );
-  }
-
-  return {
-    name: orgInfo.name,
-    domain: orgInfo.domain,
-    defaultProductId: orgInfo.defaultProductId,
-    alwaysEnabledMerchants: orgInfo.alwaysEnabledMerchants,
-    orgPageConfig: orgInfo.orgPageConfig,
-  };
-};
-
-const RootApp: React.FC = () => {
-  const atomStore = getAtomStore();
-  atomStore.set(logPerfMetricAtom, PerfMetricsEvents.MainBundleLoaded);
-  EventsDispatcher.dispatch(SpiffyEvent.APP_INITIALIZED);
-  EventsDispatcher.dispatch(SpiffyEvent.CALL_MERCHANT_APP);
-  prepareMerchantPage();
-  getAsyncOrgConfig();
-
-  const existing = window[EnvironmentService.getIdentifyingPrefix()] || {};
-  window[EnvironmentService.getIdentifyingPrefix()] = {
-    ...existing,
-    getOrgInfo,
-    isInitialized: true,
-    refresh: async () => {
-      Logger.logDebug("[spiffy-ai] window._spiffy.refresh called");
-    },
-    setVariantInfoOverride: (variantInfo: VariantInfo) => {
-      window._spiffy.variantInfoOverride = variantInfo;
-      // Reset the variant info to force a re-parse
-      atomStore.set(hasParsedVariantInfoAtom, false);
-    },
-  };
-
-  return null; // This component primarily sets up global state and side effects
-};
-
-export const initApp = async () => {
-  const reactContainerRoot = createReactRoot();
-  reactContainerRoot.render(
-    <EnviveConfigProvider
-      amplitudeApiKey={process.env.VITE_AMPLITUDE_API_KEY || ""}
-      dataResidency={process.env.VITE_DATA_RESIDENCY || ""}
-      env={process.env.VITE_ENV || ""}
-      baseUrl={process.env.VITE_BASE_URL || ""}
-      reactAppName={process.env.VITE_REACT_APP_NAME || ""}
-      cdnUrl={process.env.VITE_SPIFFY_CDN_URL || ""}
-      contextSource={process.env.VITE_CONTEXT_SOURCE || ""}
-      orgLevelApiKey={process.env.VITE_SPIFFY_ORG_LEVEL_API_KEY || ""}
-      orgShortName={process.env.VITE_ORG_SHORT_NAME || ""}
-    >
-      <RootApp />
-    </EnviveConfigProvider>
-  );
-};

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,
-  };
-};