@envive-ai/react-hooks 0.1.5 → 0.1.7

package/src/atoms/org/orgUIConfig.ts

@@ -1,142 +0,0 @@
-import { atom } from "jotai";
-import { FeatureGates, getOrgInfo } from "src/application/models";
-import { findCustomerServiceImpl } from "src/application/service/customerService";
-import { CustomerServiceIntegrationMode } from "src/application/service/customerService/types";
-import { featureFlagServiceAtom, orgShortNameAtom } from "src/atoms/org/org";
-import { OrgUIConfig } from "src/contexts/types";
-import { getAtomStore } from "src/atoms/atomStore/atomStore";
-import Logger from "src/application/logging/logger";
-
-const getCustomerServiceIntegrationMode = ({
-  integrationMode,
-  isNewFeatureEnabled,
-}: {
-  integrationMode: CustomerServiceIntegrationMode;
-  isNewFeatureEnabled: boolean;
-}): CustomerServiceIntegrationMode => {
-  if (integrationMode !== CustomerServiceIntegrationMode.full) {
-    return integrationMode;
-  }
-  // Only allow CustomerServiceIntegrationMode.full if `isNewFeatureEnabled` is also true
-  return isNewFeatureEnabled
-    ? integrationMode
-    : CustomerServiceIntegrationMode.simple;
-};
-
-const internalOrgUIConfigAtom = atom<OrgUIConfig | undefined>(undefined);
-
-export const orgUIConfigAtom = atom(
-  (get) => {
-    const orgUIConfig = get(internalOrgUIConfigAtom);
-    return orgUIConfig; // Return undefined if not set instead of throwing
-  },
-  (_, set, value: OrgUIConfig) => {
-    set(internalOrgUIConfigAtom, value);
-  }
-);
-
-export const getOrgUIConfig = async (
-  graphqlOrgUIConfig?: Omit<OrgUIConfig, "merchantOverrideCss">,
-  graphqlMerchantOverrideCss?: string
-) => {
-  const atomStore = getAtomStore();
-  const orgShortName = atomStore.get(orgShortNameAtom);
-  if (!orgShortName) {
-    Logger.logWarn("orgShortName is undefined, cannot get org info", undefined);
-    return;
-  }
-
-  const orgInfo = await getOrgInfo(orgShortName);
-
-  const featureFlagService = atomStore.get(featureFlagServiceAtom);
-  if (!featureFlagService) {
-    Logger.logWarn(
-      "featureFlagService is undefined, cannot get feature flags",
-      undefined
-    );
-    return;
-  }
-
-  const isNewFeatureEnabled = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsNewFeatureEnabled
-  );
-  const enableWatermark = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsWatermarkEnabled
-  );
-  const userQueryAwaysEnabled = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsUserQueryAlwaysEnabled
-  );
-  const isGraphQLUIConfigsEnabled = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsGraphQLUIConfigsEnabled
-  );
-  const isGraphQLComponentConfigsEnabled =
-    featureFlagService.isFeatureGateEnabled(
-      FeatureGates.IsGraphQLComponentConfigsEnabled
-    );
-
-  const localOrgUIConfig = orgInfo.orgUIConfig();
-  let orgUIConfig: Partial<OrgUIConfig> = { ...localOrgUIConfig };
-
-  if (isGraphQLUIConfigsEnabled && graphqlMerchantOverrideCss) {
-    orgUIConfig = {
-      ...orgUIConfig,
-      merchantOverrideCss: graphqlMerchantOverrideCss,
-    };
-  }
-
-  if (isGraphQLComponentConfigsEnabled && graphqlOrgUIConfig) {
-    orgUIConfig = {
-      ...orgUIConfig,
-      ...graphqlOrgUIConfig,
-    };
-  }
-
-  Logger.logInfo("[spiffy-ai] Feature gate enableWatermark check", {
-    enableWatermark,
-    floatingChatConfig: orgUIConfig.floatingChatConfig,
-  });
-
-  const updatedOrgUIConfig: OrgUIConfig = {
-    ...orgUIConfig,
-    conversationalSearch: orgUIConfig.conversationalSearch
-      ? {
-          ...orgUIConfig.conversationalSearch,
-          enabled: isNewFeatureEnabled,
-        }
-      : undefined,
-    customerServiceIntegration: {
-      ...orgUIConfig.customerServiceIntegration,
-      integrationMode: getCustomerServiceIntegrationMode({
-        isNewFeatureEnabled,
-        integrationMode:
-          orgUIConfig.customerServiceIntegration?.integrationMode ??
-          CustomerServiceIntegrationMode.none,
-      }),
-    },
-    floatingChatConfig: {
-      ...orgUIConfig.floatingChatConfig,
-      // Only enable the watermark if it is enabled in config and through featureFlag.
-      // This enables a quick "off-switch" in case a merchant tells us to turn it off
-      // quickly. This can be removed once the config is moved to the backend
-      enableWatermark:
-        orgUIConfig.floatingChatConfig?.enableWatermark && enableWatermark,
-      userQueryInputEnabled:
-        orgUIConfig.floatingChatConfig?.userQueryInputEnabled ||
-        userQueryAwaysEnabled,
-    },
-  } as OrgUIConfig;
-
-  atomStore.set(orgUIConfigAtom, updatedOrgUIConfig);
-};
-
-export const orgCustomerServiceConfig = atom(
-  (get) => get(orgUIConfigAtom)?.customerServiceIntegration
-);
-
-export const orgCustomerServiceService = atom((get) => {
-  const config = get(orgCustomerServiceConfig);
-  if (!config?.provider) {
-    return undefined;
-  }
-  return findCustomerServiceImpl(config.provider);
-});

package/src/contexts/enviveCssContext.tsx

@@ -1,20 +0,0 @@
-import React, { ReactNode } from "react";
-import { useAtomValue } from "jotai";
-import { orgMerchantCssAtom } from "src/atoms/org/merchantCss";
-
-interface EnviveCssProviderProps {
-  children: ReactNode;
-}
-
-export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
-  children,
-}) => {
-  const enviveCss = useAtomValue(orgMerchantCssAtom);
-
-  return (
-    <>
-      {enviveCss && <style id="merchant-css-styles">{enviveCss}</style>}
-      {children}
-    </>
-  );
-};

package/src/contexts/index.ts

@@ -1,6 +0,0 @@
-export * from "./chatContext";
-export * from "./systemSettingsContext";
-export * from "./enviveConfigContext";
-export * from "./types";
-export * from "./orgConfigContext";
-export * from "./enviveCssContext";

package/src/contexts/orgConfigContext.tsx

@@ -1,106 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  ReactNode,
-  useState,
-  useEffect,
-} from "react";
-import { useAtomValue } from "jotai";
-import { OrgConfig as OrgConfigType } from "src/application/models/api/orgConfigResults";
-import { getAsyncOrgConfig } from "src/atoms/org/org";
-import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
-
-interface OrgConfigContextType {
-  orgConfig: OrgConfigType | undefined;
-  loading: boolean;
-  error: Error | undefined;
-}
-
-const OrgConfigContext = createContext<OrgConfigContextType | undefined>(
-  undefined
-);
-
-interface OrgConfigProviderProps {
-  children: ReactNode;
-}
-
-export const OrgConfigProvider: React.FC<OrgConfigProviderProps> = ({
-  children,
-}) => {
-  const [orgConfig, setOrgConfig] = useState<OrgConfigType | undefined>(
-    undefined
-  );
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<Error | undefined>(undefined);
-
-  // Watch for EnviveConfig to be available
-  const enviveConfig = useAtomValue(enviveConfigAtom);
-
-  useEffect(() => {
-    const fetchOrgConfig = async () => {
-      try {
-        setLoading(true);
-        setError(undefined); // Clear any previous errors
-
-        // Check if we have the required dependencies from EnviveConfig
-        if (!enviveConfig) {
-          Logger.logDebug(
-            "OrgConfigProvider: Waiting for EnviveConfig to be available"
-          );
-          return; // Don't fetch yet, wait for EnviveConfig
-        }
-
-        // Check if we have either orgLevelApiKey or orgShortName
-        const hasApiKey = enviveConfig.orgLevelApiKey;
-        const hasOrgShortName = enviveConfig.orgShortName;
-
-        if (!hasApiKey && !hasOrgShortName) {
-          Logger.logWarn(
-            "OrgConfigProvider: Neither orgLevelApiKey nor orgShortName available in EnviveConfig",
-            enviveConfig
-          );
-          setError(
-            new Error(
-              "OrgConfigProvider requires either orgLevelApiKey or orgShortName to be provided in EnviveConfigProvider"
-            )
-          );
-          return;
-        }
-
-        Logger.logDebug(
-          "OrgConfigProvider: EnviveConfig available, fetching OrgConfig",
-          {
-            hasApiKey: !!hasApiKey,
-            hasOrgShortName: !!hasOrgShortName,
-          }
-        );
-
-        const fetchedConfig = await getAsyncOrgConfig();
-        setOrgConfig(fetchedConfig);
-        Logger.logDebug("OrgConfigProvider: Successfully fetched OrgConfig");
-      } catch (err) {
-        Logger.logError("OrgConfigProvider: Failed to fetch OrgConfig", err);
-        setError(err as Error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchOrgConfig();
-  }, [enviveConfig]); // Re-run when enviveConfig changes
-
-  return (
-    <OrgConfigContext.Provider value={{ orgConfig, loading, error }}>
-      {children}
-    </OrgConfigContext.Provider>
-  );
-};
-
-export const useOrgConfig = () => {
-  const context = useContext(OrgConfigContext);
-  if (context === undefined) {
-    throw new Error("useOrgConfig must be used within an OrgConfigProvider");
-  }
-  return context;
-};

package/src/enabled-features.ts

@@ -1,83 +0,0 @@
-import Logger from 'src/application/logging/logger';
-import { LocalStorageService } from 'src/application/service/localStorageService';
-import { getOrgInfo } from 'src/application/models';
-import { OrgConfig } from 'src/application/models/api/orgConfigResults';
-import { FeatureFlagService } from 'src/application/service/featureFlagService';
-
-
-type EnabledFeaturesValues = {
-  envive: boolean;
-  salesAgent: boolean;
-};
-class EnabledFeatures {
-  private static values: EnabledFeaturesValues | undefined = undefined;
-
-  static async get(
-    orgConfig: OrgConfig,
-    featureFlagService: FeatureFlagService,
-  ): Promise<EnabledFeaturesValues> {
-    if (this.values !== undefined) {
-      return this.values;
-    }
-
-    const isSpiffyEnabled = async (orgConfig: OrgConfig, featureFlagService: FeatureFlagService): Promise<boolean> => {
-      // "spiffy_on" is the highest precedence override and typically used for development/testing
-      // skip all other checks if it is "true"
-      if (LocalStorageService.getSpiffyOnFeatureFlag() === 'true') {
-        Logger.logDebug(`[spiffy-ai] spiffy enabled by "spiffy_on" override`);
-        return true;
-      }
-
-      if (LocalStorageService.getSpiffyOnFeatureFlag() === 'false') {
-        Logger.logDebug(`[spiffy-ai] envive disabled by "envive_on" override`);
-        return false;
-      }
-    
-      if (window._spiffy?.show != null && !window._spiffy.show) {
-        Logger.logDebug(`[spiffy-ai] spiffy disabled by window._spiffy.show`);
-        return false;
-      }
-    
-      if (!featureFlagService.isClientSessionEnabled()) {
-        Logger.logDebug(`[spiffy-ai] spiffy disabled by feature flag`);
-        return false;
-      }
-    
-      // this is for when visibility is controlled by the merchant
-      if (window._spiffy?.show != null && window._spiffy.show) {
-        Logger.logDebug(`[spiffy-ai] spiffy enabled by window._spiffy.show`);
-        return true;
-      }
-    
-      // otherwise, spiffy controls the visibility of the experience through a feature flag
-      const orgInfo = await getOrgInfo(orgConfig.org.org.shortName);
-      if (orgInfo.alwaysEnabledMerchants) {
-        Logger.logDebug(`[spiffy-ai] spiffy enabled by org config and feature flag`);
-        return true;
-      }
-    
-      if (featureFlagService.isClientSessionEnabled()) {
-        Logger.logDebug(`[spiffy-ai] spiffy is enabled by feature flag`);
-        return true;
-      }
-    
-      Logger.logDebug(`[spiffy-ai] spiffy is disabled because not all checks have passed`);
-      return false;
-    };
-  
-    const isSalesAgentEnabled = isSpiffyEnabled;
-
-    this.values = {
-      envive: await isSpiffyEnabled(orgConfig, featureFlagService),
-      salesAgent: await isSalesAgentEnabled(orgConfig, featureFlagService),
-    };
-
-    return this.values;
-  }
-
-  static reset() {
-    this.values = undefined;
-  }
-}
-
-export { EnabledFeatures };

package/src/hooks/index.ts

@@ -1,21 +0,0 @@
-export * from "./useBlockBackButton";
-export * from "./useChatToggle";
-export * from "./useCustomerSupportHandoff";
-export * from "./useDebounce";
-export * from "./useDynamicVariants";
-export * from "./useElementObserver";
-export * from "./useFileUpload";
-export * from "./useGrabAndScroll";
-export * from "./useHideElements";
-export * from "./useImageResolver";
-export * from "./useIntersection";
-export * from "./useIsSmallScreen";
-export * from "./useMessageFilter";
-export * from "./useMessageScrollObserver";
-export * from "./useSearch";
-export * from "./useSnapCalculator";
-export * from "./useSystemSettingsContext";
-export * from "./useTrackComponentVisibleEvent";
-export * from "./useUpdateAnalyticsProps";
-export * from "./useNewOrgConfig";
-export * from "./utils";

package/src/hooks/useDynamicVariants.ts

@@ -1,226 +0,0 @@
-import Logger from "src/application/logging/logger";
-import { useEffect, useRef, useCallback, useState } from "react";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { variantInfoAtom } from "src/atoms/app";
-import { PageVariantService } from "src/application/service/pageVariantService";
-import { orgPageConfigAtom } from "src/atoms/org/orgPageConfig";
-import {
-  hasParsedVariantInfoAtom,
-  supportedEventAtom,
-} from "src/atoms/app/variant";
-import {
-  SpiffyMetricsEventName,
-  AmplitudeAdapter,
-} from "src/adapters/amplitude";
-import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
-import { createAppLoadedEvent, createVisitUserEvent } from "src/hooks/utils";
-import { queueUserEventAtom } from "src/atoms/chat/messageQueue";
-import { UserEvent } from "src/application/models";
-import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
-
-// consider putting this in the org config
-const DEBOUNCE_DELAY_MS = 300;
-
-// a debounced function that sets the location href to prevent rapidly changing urls from
-// causing the variant info to be changed too early
-const debounce = (func: () => void, delay: number): (() => void) => {
-  let timeoutId: NodeJS.Timeout;
-
-  return () => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func(), delay);
-  };
-};
-
-const isUserEventEqual = (
-  event1: UserEvent | null,
-  event2: UserEvent | null
-) => {
-  if (!event1 || !event2) {
-    return false;
-  }
-  if (event1.category !== event2.category) {
-    return false;
-  }
-  if (
-    event1.category === UserEventCategory.Search &&
-    event2.category === UserEventCategory.Search
-  ) {
-    return event1.attributes.searchTerm === event2.attributes.searchTerm;
-  }
-  if (
-    event1.category === UserEventCategory.PdpVisit &&
-    event2.category === UserEventCategory.PdpVisit
-  ) {
-    return event1.attributes.productId === event2.attributes.productId;
-  }
-  if (
-    event1.category === UserEventCategory.PlpVisit &&
-    event2.category === UserEventCategory.PlpVisit &&
-    "id" in event1.attributes.attributes &&
-    "id" in event2.attributes.attributes
-  ) {
-    return event1.attributes.attributes.id === event2.attributes.attributes.id;
-  }
-  if (
-    event1.category === UserEventCategory.PageVisit &&
-    event2.category === UserEventCategory.PageVisit
-  ) {
-    return event1.attributes.url === event2.attributes.url;
-  }
-  return false;
-};
-
-export const useDynamicVariants = () => {
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const locationHrefRef = useRef<string>(window.location.href);
-  const setVariantInfo = useSetAtom(variantInfoAtom);
-  const setSupportedEvent = useSetAtom(supportedEventAtom);
-  const queueUserEvent = useSetAtom(queueUserEventAtom);
-  const [mostRecentUserEvent, setMostRecentUserEvent] =
-    useState<UserEvent | null>(null);
-
-  const orgPageConfig = useAtomValue(orgPageConfigAtom);
-  const debouncedFunc = useRef<(() => void) | null>(null);
-  // we need to fetch org info before we can get the variant info. this prevents the rest of the application
-  // logic from running before that happens. More specifically, we want to have all org and variant states
-  // settled before mounting the ChatContextProvider which will start the session.
-  const [hasParsedVariantInfo, setHasParsedVariantInfo] = useAtom(
-    hasParsedVariantInfoAtom
-  );
-  const animationFrameRef = useRef<number | null>(null);
-  const isBeforeUnload = useRef(false);
-
-  const handleLocationChange = () => {
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-
-    animationFrameRef.current = requestAnimationFrame(() => {
-      if (locationHrefRef.current !== window.location.href) {
-        debouncedFunc.current?.();
-      }
-    });
-  };
-
-  const handlePageChange = useCallback(async () => {
-    if (isBeforeUnload.current) {
-      return;
-    }
-
-    if (!orgPageConfig) {
-      Logger.logWarn(
-        "[spiffy-ai] orgPageConfig not found. skipping page change handling",
-        undefined
-      );
-      return;
-    }
-
-    const parsedVariantInfo =
-      await PageVariantService.getVariantInfoWithPageConfig(orgPageConfig);
-
-    if (parsedVariantInfo) {
-      Logger.logDebug("[spiffy-ai] variantInfo changed", parsedVariantInfo);
-      const [newVariantInfo, pageVariantConfig] = parsedVariantInfo;
-
-      setVariantInfo(newVariantInfo);
-      setHasParsedVariantInfo(true);
-
-      const visitEvent = createVisitUserEvent({ variantInfo: newVariantInfo });
-      if (visitEvent && !isUserEventEqual(mostRecentUserEvent, visitEvent)) {
-        setMostRecentUserEvent(visitEvent);
-        queueUserEvent(createAppLoadedEvent());
-        queueUserEvent(visitEvent);
-      }
-
-      const supportedEvent = await PageVariantService.checkSupportedEvent(
-        pageVariantConfig
-      );
-      console.log("useDynamicVariants - supportedEvent", supportedEvent);
-      setSupportedEvent(supportedEvent);
-      AmplitudeAdapter.trackEvent({
-        eventName: SpiffyMetricsEventName.SupportedEvent,
-        eventProps: {
-          ...supportedEvent,
-        },
-      });
-    } else {
-      setHasParsedVariantInfo(false);
-    }
-  }, [
-    orgPageConfig,
-    setVariantInfo,
-    setHasParsedVariantInfo,
-    setSupportedEvent,
-    queueUserEvent,
-    mostRecentUserEvent,
-    setMostRecentUserEvent,
-  ]);
-
-  useEffect(() => {
-    debouncedFunc.current = debounce(() => {
-      locationHrefRef.current = window.location.href;
-      handlePageChange();
-    }, DEBOUNCE_DELAY_MS);
-
-    return () => {
-      debouncedFunc.current = null;
-    };
-  }, [handlePageChange]);
-
-  useEffect(() => {
-    // when navigation happens, the url is updated before the page is unloaded & reloaded
-    // this causes the variant info to be changed first and triggering the hook that fetches
-    // next responses. On non-SPA's, this handler prevents variant info from being updated
-    // and lets the usual initialization sequence update it instead. On SPA's, this is not called
-    // and handleLocationChange is called instead
-    const handleBeforeUnload = () => {
-      setSupportedEvent(undefined);
-      isBeforeUnload.current = true;
-    };
-
-    window.addEventListener("click", handleLocationChange);
-    window.addEventListener("popstate", handleLocationChange);
-    window.addEventListener("beforeunload", handleBeforeUnload);
-
-    return () => {
-      window.removeEventListener("click", handleLocationChange);
-      window.removeEventListener("popstate", handleLocationChange);
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      // TODO: this is causing the supportedEvent to be undefined for Magento customers
-      // Why is unclear however...
-      // setSupportedEvent(undefined);
-
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [handlePageChange, setSupportedEvent]);
-
-  useEffect(() => {
-    // handle the initial page load and when the variant info is overridden
-    if (!hasParsedVariantInfo) {
-      handlePageChange();
-    }
-  }, [hasParsedVariantInfo, handlePageChange]);
-
-  useEffect(() => {
-    let windowInterval: number | null = null;
-    const merchantVariantSettings = orgUIConfig?.merchantVariantSettings;
-
-    if (merchantVariantSettings?.dynamicVariants?.enabled) {
-      const refreshInterval =
-        merchantVariantSettings?.dynamicVariants?.refreshInterval;
-      windowInterval = window.setInterval(() => {
-        handleLocationChange();
-      }, refreshInterval);
-    }
-
-    return () => {
-      if (windowInterval) {
-        window.clearInterval(windowInterval);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};

package/src/hooks/useFileUpload.ts

@@ -1,63 +0,0 @@
-import { AttachmentRequest } from "@spiffy-ai/commerce-api-client";
-import { useAtom, useAtomValue } from "jotai";
-import { useRef, useState } from "react";
-import {
-  orgCustomerServiceService,
-  customerServiceAttachment,
-} from "src/atoms/org";
-
-export const useFileUpload = () => {
-  const fileInputRef = useRef(null);
-  const [attachment, setAttachment] = useAtom(customerServiceAttachment);
-  const customerServiceImpl = useAtomValue(orgCustomerServiceService);
-  const [error, setError] = useState("");
-
-  const isValidFile = (file?: File) => {
-    const maxSize = customerServiceImpl?.maxfileUploadSize;
-    if (maxSize && (file?.size || 0) > maxSize) {
-      const strFileSize = `${(maxSize / 1000000).toFixed(1)}MB`;
-      setError(`Exceeded file size of ${strFileSize}`);
-      return false;
-    }
-    return true;
-  };
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event?.target?.files?.[0];
-
-    if (file && isValidFile(file)) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onloadend = () => {
-        const base64 = reader?.result as string;
-        setAttachment({
-          base64_content: base64,
-          content_type: file.type,
-          file_name: file.name,
-        });
-      };
-    }
-  };
-
-  const prepareAttachment = (): AttachmentRequest | undefined => {
-    if (attachment) {
-      return {
-        ...attachment,
-        base64_content: attachment?.base64_content.split(",")[1],
-      } as AttachmentRequest;
-    }
-  };
-
-  const handleFileRemove = () => {
-    setAttachment(undefined);
-  };
-
-  return {
-    error,
-    fileInputRef,
-    attachment,
-    handleFileSelect,
-    handleFileRemove,
-    prepareAttachment,
-  };
-};