@envive-ai/react-hooks 0.1.5 → 0.1.6

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

package/src/hooks/useHideElements.ts

@@ -1,85 +0,0 @@
-import Logger from "src/application/logging/logger";
-import { SelectorFactory } from "src/application/utils/nodeSelector";
-import { useEffect, useRef, useState } from "react";
-import { useAtomValue } from "jotai";
-import { SpiffyEventName } from "src/application/models/events";
-import { ElementObserver } from "src/application/utils/elementObserver";
-import { DOMObserver } from "src/application/utils/domObserver";
-import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
-
-/**
- * This hook hides/shows elements that could overlap with the chat when the chat is opened/closed.
- */
-export const useHideElements = () => {
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const [hasRegisteredEventListeners, setHasRegisteredEventListeners] =
-    useState(false);
-  const elementObservers = useRef<ElementObserver[]>([]);
-
-  const hideElements = (elements: ElementObserver[]) => {
-    elements.forEach((element) => {
-      element.hide();
-    });
-  };
-
-  const showElements = (elements: ElementObserver[]) => {
-    elements.forEach((element) => {
-      element.show();
-    });
-  };
-
-  useEffect(() => {
-    elementObservers.current = [];
-    orgUIConfig?.hiddenElementSelectors?.forEach((selector) => {
-      elementObservers.current.push(
-        DOMObserver.add(SelectorFactory.query(selector))
-      );
-    });
-    // since we're not using useElementObserver, we need to manually start the observer
-    elementObservers.current.forEach((element) => {
-      element.init();
-    });
-    DOMObserver.observe();
-
-    return () => {
-      elementObservers.current.forEach((element) => {
-        element.destroy();
-      });
-      elementObservers.current = [];
-    };
-  }, [orgUIConfig?.hiddenElementSelectors]);
-
-  useEffect(() => {
-    if (elementObservers.current.length > 0 && !hasRegisteredEventListeners) {
-      Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetOpen} event for ${elementObservers.current.length} elements`
-      );
-      window.addEventListener(SpiffyEventName.WidgetOpen, () =>
-        hideElements(elementObservers.current)
-      );
-
-      Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetClose} event for ${elementObservers.current.length} elements`
-      );
-      window.addEventListener(SpiffyEventName.WidgetClose, () =>
-        showElements(elementObservers.current)
-      );
-
-      setHasRegisteredEventListeners(true);
-    }
-
-    return () => {
-      if (elementObservers.current.length > 0 && hasRegisteredEventListeners) {
-        window.removeEventListener(SpiffyEventName.WidgetOpen, () =>
-          hideElements(elementObservers.current)
-        );
-
-        window.removeEventListener(SpiffyEventName.WidgetClose, () =>
-          showElements(elementObservers.current)
-        );
-
-        setHasRegisteredEventListeners(false);
-      }
-    };
-  }, [hasRegisteredEventListeners]);
-};

package/src/interceptors/useFormEscalation.ts

@@ -1,57 +0,0 @@
-import { FormType, ResponseCategory } from "@spiffy-ai/commerce-api-client";
-import { useAtomValue, useSetAtom } from "jotai";
-import { Response } from "src/application/models";
-import { handleFormSubmittedAtom } from "src/atoms/chat";
-import { apiKeyAtom } from "src/atoms/org/org";
-import { orgCustomerServiceService } from "src/atoms/org/orgUIConfig";
-import { MessageInterceptor } from "./types";
-import { baseUrlAtom } from "src/atoms/envive/enviveConfig";
-
-export const useFormEscalation = (): MessageInterceptor => {
-  const handleFormSubmitted = useSetAtom(handleFormSubmittedAtom);
-  const customerServiceIntegration = useAtomValue(orgCustomerServiceService);
-  const apiKey = useAtomValue(apiKeyAtom);
-  const apiEndpoint = useAtomValue(baseUrlAtom);
-
-  const blockExecution = () => true;
-
-  const execute = async (response: Response) => {
-    if (
-      response.category === ResponseCategory.Form &&
-      response.attributes.formCategory?.formType === FormType.Escalation
-    ) {
-      if (!customerServiceIntegration) {
-        // Handle case where customer service integration is not available
-        handleFormSubmitted({
-          formResponseId: response.id,
-          formType: FormType.Escalation,
-          filledSchema: {
-            is_in_business_hours: false,
-            is_integration_enabled: false,
-          },
-        });
-        return;
-      }
-
-      const isEnabled = customerServiceIntegration.isEnabled();
-      const isBusinessHours = await customerServiceIntegration.isBusinessHours(
-        apiKey,
-        apiEndpoint
-      );
-
-      handleFormSubmitted({
-        formResponseId: response.id,
-        formType: FormType.Escalation,
-        filledSchema: {
-          is_in_business_hours: isBusinessHours,
-          is_integration_enabled: isEnabled,
-        },
-      });
-    }
-  };
-
-  return {
-    execute,
-    blockExecution,
-  };
-};