@envive-ai/react-hooks 0.1.0

package/src/application/service/domMutations/domMutationListenerState.ts

@@ -0,0 +1,52 @@
+import { DomMutationListener } from './domMutationListener';
+import { DomMutationObserverContinuation } from '../../models/domMutationContinuation';
+
+class DomMutationListenerState {
+
+  private readonly listener: DomMutationListener;
+
+  private currentState: DomMutationObserverContinuation;
+
+  private attached: boolean;
+
+  private currentTryCount: number;
+
+  constructor(listener: DomMutationListener) {
+    this.listener = listener;
+    this.currentState = DomMutationObserverContinuation.CONTINUE;
+    this.attached = false;
+    this.currentTryCount = 0;
+  }
+
+  getListener(): DomMutationListener {
+    return this.listener;
+  }
+
+  setCurrentState(state: DomMutationObserverContinuation): void {
+    this.currentState = state;
+  }
+
+  getCurrentState(): DomMutationObserverContinuation {
+    return this.currentState;
+  }
+
+  getIsAttached(): boolean {
+    return this.attached;
+  }
+
+  setIsAttached(attached: boolean): void {
+    this.attached = attached;
+  }
+
+  getCurrentTryCount(): number {
+    return this.currentTryCount;
+  }
+
+  incrementCurrentTryCount(): void {
+    this.currentTryCount++;
+  }
+}
+
+export {
+  DomMutationListenerState
+}

package/src/application/service/domMutations/floatingChat/embeddedChatsPlacementsListener.ts

@@ -0,0 +1,41 @@
+import { DomMutationListener } from '../domMutationListener';
+import { DomMutationObserverContinuation } from '../../../models/domMutationContinuation';
+import Logger from '../../../logging/logger';
+
+class EmbeddedChatsPlacementsListener implements DomMutationListener {
+
+  private readonly findPlacementNodes: () => DomMutationObserverContinuation;
+
+  constructor(
+    findPlacementNodes: () => DomMutationObserverContinuation
+  ) {
+    Logger.logDebug('[spiffy-ai] EmbeddedChatsPlacementsListener created', undefined);
+    this.findPlacementNodes = findPlacementNodes;
+  }
+
+  runOnceImmediately(): boolean {
+    return true;
+  }
+
+  onDomChange(): DomMutationObserverContinuation {
+    // Too verbose - Logger.logDebug('[spiffy-ai] EmbeddedChatsPlacementsListener onDomChange', undefined);
+    const continuation = this.findPlacementNodes();
+    if (continuation === DomMutationObserverContinuation.STOP) {
+      Logger.logDebug('[spiffy-ai] EmbeddedChatsPlacementsListener [STOP requested]', undefined);
+    }
+    return continuation;
+  }
+
+  getName(): string {
+    return 'EmbeddedChatsPlacementsListener';
+  }
+
+  triesMax(): number {
+    return -1;
+  }
+}
+
+
+export {
+  EmbeddedChatsPlacementsListener,
+};

package/src/application/service/domMutations/gladly/gladlyListener.ts

@@ -0,0 +1,61 @@
+import Logger from '../../../logging/logger';
+import { DomMutationObserverContinuation } from '../../../models/domMutationContinuation';
+import { DomMutationListener } from '../domMutationListener';
+
+declare global {
+  interface Window {
+    Gladly: {
+      show: () => void;
+      getUser: () => { identity: string } | undefined;
+      getAvailability: () => string;
+      on: (eventName: string, callback: () => void) => void;
+    };
+  }
+}
+
+class GladlyListener implements DomMutationListener {
+  private readonly onGladlyAvailable: () => void;
+
+  private static readonly GLADLY_RETRIES_MAX = 25;
+
+  private static readonly GLADLY_CONVERSATION_STARTED_EVENT_NAME = 'conversation:started';
+
+  constructor(onGladlyAvailable: () => void) {
+    Logger.logDebug('[spiffy-ai] GladlyListener created', undefined);
+    this.onGladlyAvailable = onGladlyAvailable;
+  }
+
+  runOnceImmediately(): boolean {
+    return false;
+  }
+
+  triesMax(): number {
+    return GladlyListener.GLADLY_RETRIES_MAX;
+  }
+
+  onDomChange(): DomMutationObserverContinuation {
+    if (
+      window.Gladly &&
+      window.Gladly.getUser != null &&
+      window.Gladly.on != null &&
+      window.Gladly.show != null
+    ) {
+      Logger.logDebug(
+        `[spiffy-ai] subscribing to Gladly ${GladlyListener.GLADLY_CONVERSATION_STARTED_EVENT_NAME} event`,
+      );
+      window.Gladly.on(
+        GladlyListener.GLADLY_CONVERSATION_STARTED_EVENT_NAME,
+        this.onGladlyAvailable,
+      );
+      return DomMutationObserverContinuation.STOP;
+    }
+
+    return DomMutationObserverContinuation.CONTINUE;
+  }
+
+  getName(): string {
+    return 'GladlyListener';
+  }
+}
+
+export { GladlyListener };

package/src/application/service/domMutations/spiffy/orgs/common/kustomerVisibilityListener.ts

@@ -0,0 +1,41 @@
+import Logger from 'src/application/logging/logger';
+import { DomMutationObserverContinuation } from 'src/application/models/domMutationContinuation';
+import { DomMutationListener } from 'src/application/service/domMutations/domMutationListener';
+import { KustomerIntegrationService } from 'src/application/service/kustomerIntegrationService';
+
+class KustomerVisibilityListener implements DomMutationListener {
+  kustomerIntegrationService: KustomerIntegrationService;
+
+  constructor() {
+    Logger.logDebug('[spiffy-ai] KustomerVisibilityListener created');
+    this.kustomerIntegrationService = new KustomerIntegrationService();
+  }
+
+  runOnceImmediately(): boolean {
+    return true;
+  }
+
+  triesMax(): number {
+    return -1;
+  }
+
+  disconnect(): void {
+    this.kustomerIntegrationService.disconnect();
+  }
+
+  onDomChange(): DomMutationObserverContinuation {
+    this.kustomerIntegrationService.initOnce();
+
+    if (this.kustomerIntegrationService.updateVisibility()) {
+      return DomMutationObserverContinuation.STOP;
+    }
+
+    return DomMutationObserverContinuation.CONTINUE;
+  }
+
+  getName(): string {
+    return 'KustomerVisibilityListener';
+  }
+}
+
+export { KustomerVisibilityListener };

package/src/application/service/domMutations/spiffy/orgs/common/orgsCommonDataLayerListener.ts

@@ -0,0 +1,119 @@
+import Logger from 'src/application/logging/logger';
+import { OrgAnalyticsConfig } from 'src/application/models/api/orgAnalyticsConfig';
+import { DataLayerEventsListener } from 'src/application/service/domMutations/dataLayer/dataLayerEventsListener';
+import { ChatElementDisplayLocation } from 'src/application/models/chatElementDisplayLocation';
+import { GoogleAnalyticsEvents } from 'src/application/models/googleAnalyticsEvents';
+import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
+
+/*
+  Event Example:
+  {
+    "event":"add_to_cart",
+    "ecommerce":{
+      "currency":"USD",
+      "value":196,
+      "items":[
+        {
+          "item_name":"OnCore Open-Bust Mid-Thigh Bodysuit",
+          "price":98,
+          "item_brand":"Spanx",
+          "item_variant":"Very Black / Regular / M",
+          "index":0,
+          "item_id":39773564534995,
+          "quantity":2,
+          "item_category":"Shapewear",
+          "item_list_name":"Shapewear",
+          "item_list_id":"",
+          "item_colors":"Very Black",
+          "item_inseam_length":"",
+          "item_size":"M",
+          "item_band_size":"",
+          "item_cup_size":""
+        }
+      ]
+    },
+    "gtm.uniqueEventId":379
+  }
+ */
+class OrgsCommonDataLayerListener {
+  private static dataLayerCache: { [p: string]: DataLayerEventsListener } = {};
+
+  static resetDataLayerCache() {
+    OrgsCommonDataLayerListener.dataLayerCache = {};
+  }
+
+  static getSingletonDataLayerListenerCallbackCombo(
+    orgShortName: string,
+    orgAnalyticsConfig: OrgAnalyticsConfig,
+  ) {
+    // dataLayer event listener and the onMetricsContextInit are tightly coupled to each other. So
+    // repeated calls to this function MUST return the same instance of the listener and the callback
+    // combo. PM 01/27/2024
+
+    if (!orgAnalyticsConfig.googleAnalytics) {
+      Logger.logError(
+        `[spiffy-ai] Google Analytics config is required for dataLayer event listener`,
+        orgAnalyticsConfig,
+      );
+      return undefined;
+    }
+
+    const allCachedDataLayerListeners = Object.keys(
+      OrgsCommonDataLayerListener.dataLayerCache,
+    )?.length;
+    if (allCachedDataLayerListeners > 1) {
+      // This is expected to be always == 1 max. If it is more than 1, then there is a bug in the code.
+      Logger.logError(
+        `[spiffy-ai] dataLayer listeners cache size: ${allCachedDataLayerListeners}`,
+        OrgsCommonDataLayerListener.dataLayerCache,
+      );
+    }
+
+    if (OrgsCommonDataLayerListener.dataLayerCache[orgShortName]) {
+      const dataLayerListener = OrgsCommonDataLayerListener.dataLayerCache[orgShortName];
+      return { dataLayerListener };
+    }
+
+    const callback = (event: object) => {
+      Logger.logDebug(`[spiffy-ai] dataLayer event:`, event);
+      if (
+        // @ts-expect-error: event is not typed
+        event?.event !== GoogleAnalyticsEvents.ADD_TO_CART_v1 &&
+        // @ts-expect-error: event is not typed
+        event?.event !== GoogleAnalyticsEvents.ADD_TO_CART_v2
+      ) {
+        Logger.logDebug(`[spiffy-ai] dataLayer [pass-through] event. event_not_captured=`, event);
+        return;
+      }
+
+      // @ts-expect-error: event is not typed
+      const items = event?.ecommerce?.items || event?.items;
+      const itemIdList = items?.map((item: any) => item?.item_id).filter((id: any) => id);
+      const itemCategoryList = items
+        ?.map((item: any) => item?.item_category)
+        .filter((category: any) => category);
+      const eventProps = {
+        'ecommerce.item_id_list': itemIdList,
+        'ecommerce.item_category_list': itemCategoryList,
+        display_location: ChatElementDisplayLocation.UNSPECIFIED,
+      };
+      AmplitudeAdapter.trackEvent({
+        eventName: SpiffyMetricsEventName.AddToCartClicked,
+        eventProps,
+        alsoSendToGoogleAnalytics: true,
+      });
+    };
+
+    const dataLayerListener = new DataLayerEventsListener(
+      callback,
+      [GoogleAnalyticsEvents.ADD_TO_CART_v1, GoogleAnalyticsEvents.ADD_TO_CART_v2],
+      orgAnalyticsConfig.googleAnalytics,
+    );
+
+    OrgsCommonDataLayerListener.dataLayerCache[orgShortName] = dataLayerListener;
+
+    return { dataLayerListener };
+  }
+}
+
+export { OrgsCommonDataLayerListener };

package/src/application/service/environmentService.ts

@@ -0,0 +1,51 @@
+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/application/service/featureFlagService.ts

@@ -0,0 +1,130 @@
+import Logger from 'src/application/logging/logger';
+import { StatsigFeatureGate } from '@spiffy-ai/commerce-api-client';
+import { FeatureGates } from 'src/application/models/featureGates';
+import { SessionStorageService } from 'src/application/service/sessionStorageService';
+import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
+
+const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
+
+class FeatureFlagService {
+  constructor(private readonly featureGates: OrgConfigFeatureGate[]) {}
+
+  private getQueryParamFeatureGateOverrides = (featureGate: FeatureGates): boolean | undefined => {
+    const urlObj = new URL(window.location.href);
+    const params = new URLSearchParams(urlObj.search);
+    const paramsObj = Object.fromEntries(params.entries());
+    const value = paramsObj[featureGate];
+
+    if (value != null) {
+      return value === 'true';
+    }
+
+    return undefined;
+  };
+
+  private getWindowFeatureGateOverrides = (featureGate: FeatureGates): boolean | undefined => {
+    const value = window._spiffy?.featureOverrides?.[String(featureGate)];
+    if (value != null) {
+      return value;
+    }
+
+    return undefined;
+  };
+
+  private getStoredFeatureGateOverrides = (featureGate: FeatureGates): boolean | undefined => {
+    const featureFlags = SessionStorageService.getItem(FEATURE_FLAGS_STORAGE_KEY);
+
+    if (featureFlags) {
+      try {
+        const featureFlagsObj = JSON.parse(featureFlags);
+        return featureFlagsObj[featureGate];
+      } catch (err) {
+        Logger.logError(
+          '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
+          err,
+        );
+      }
+    }
+
+    return undefined;
+  };
+
+  public persistFeatureGateOverrides() {
+    const featureFlags = Object.values(FeatureGates)
+      .map((featureGate) => ({
+        [featureGate]: this.getFeatureFlagOverride(featureGate),
+      }))
+      .filter((_, val) => val !== undefined)
+      .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+    SessionStorageService.setItem(FEATURE_FLAGS_STORAGE_KEY, JSON.stringify(featureFlags));
+  }
+
+  private getFeatureFlagOverride(featureGate: FeatureGates): boolean | undefined {
+    const queryOverride = this.getQueryParamFeatureGateOverrides(featureGate);
+    if (queryOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
+      );
+      return queryOverride;
+    }
+
+    const windowOverride = this.getWindowFeatureGateOverrides(featureGate);
+    if (windowOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
+      );
+      return windowOverride;
+    }
+
+    const storedOverride = this.getStoredFeatureGateOverrides(featureGate);
+    if (storedOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
+      );
+      return storedOverride;
+    }
+
+    return undefined;
+  }
+
+  public isFeatureGateEnabled(featureGate: FeatureGates): boolean {
+    const gateValue = this.featureGates.find((gate) => gate.name === featureGate);
+
+    const featureFlagOverride = this.getFeatureFlagOverride(featureGate);
+    if (featureFlagOverride !== undefined) {
+      return featureFlagOverride;
+    }
+
+    if (gateValue == null || gateValue.value == null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`,
+      );
+
+      return false;
+    }
+
+    return gateValue.value;
+  }
+
+  public isClientSessionEnabled(): boolean {
+    const gates: Array<StatsigFeatureGate> | undefined = this.featureGates;
+    const isEnabled =
+      gates == null ||
+      gates?.filter(
+        (gate) => gate.name === FeatureGates.IsClientSessionEnabled && gate.value === true,
+      ).length > 0;
+
+    return isEnabled;
+  }
+
+  public getFeatureFlags(): Record<string, boolean> {
+    return Object.fromEntries(
+      Object.values(FeatureGates).map((featureGate: FeatureGates) => [
+        featureGate,
+        this.isFeatureGateEnabled(featureGate),
+      ]),
+    );
+  }
+}
+
+export { FeatureFlagService };

package/src/application/service/kustomerIntegrationService.ts

@@ -0,0 +1,111 @@
+import { LocalStorageService } from './localStorageService';
+import Logger from '../logging/logger';
+
+interface KustomerState {
+  wasWidgetOpen: boolean;
+}
+
+class KustomerIntegrationService {
+  static KUSTOMER_LOCAL_STORAGE_KEY = 'kustomerState';
+
+  static KUSTOMER_IFRAME_ID = 'kustomer-ui-sdk-iframe';
+
+  initialized: boolean;
+
+  constructor() {
+    Logger.logDebug('[spiffy-ai] KustomerIntegrationService created', undefined);
+    this.initialized = false;
+  }
+
+  initOnce(): void {
+    if (this.initialized) {
+      return;
+    }
+    const This = this;
+    LocalStorageService.attachListener({
+      storageKey: KustomerIntegrationService.KUSTOMER_LOCAL_STORAGE_KEY,
+      listener: (event) => This.onCustomerStateChange(event),
+    });
+    this.initialized = true;
+  }
+
+  disconnect(): void {
+    Logger.logDebug('[spiffy-ai] Disconnecting KustomerIntegrationService');
+    const This = this;
+    LocalStorageService.detachListener({
+      storageKey: KustomerIntegrationService.KUSTOMER_LOCAL_STORAGE_KEY,
+      listener: (event) => This.onCustomerStateChange(event),
+    });
+    const elementRef = this.findKustomerButton();
+    if (elementRef == null) {
+      Logger.logDebug('[spiffy-ai] Kustomer iFrame element not found');
+      return;
+    }
+    elementRef.style.visibility = 'visible';
+  }
+
+  /**
+   * Updates the visibility of the Kustomer chat icon.
+   */
+  updateVisibility(): boolean {
+    const elementRef = this.findKustomerButton();
+    if (elementRef == null) {
+      Logger.logDebug('[spiffy-ai] Kustomer iFrame element not found');
+      return false;
+    }
+
+    let kustomerStateStorageItem = LocalStorageService.getItem(
+      KustomerIntegrationService.KUSTOMER_LOCAL_STORAGE_KEY,
+    );
+    if (kustomerStateStorageItem == null) {
+      Logger.logDebug('[spiffy-ai] Kustomer state not found in local storage (defaulting)');
+      kustomerStateStorageItem = JSON.stringify({ wasWidgetOpen: false });
+    }
+
+    const kustomerState: KustomerState = JSON.parse(kustomerStateStorageItem);
+    const visibility = kustomerState.wasWidgetOpen ? 'visible' : 'hidden';
+    elementRef.style.visibility = visibility;
+    Logger.logDebug(
+      `[spiffy-ai] Kustomer widget was ${kustomerState.wasWidgetOpen ? 'open' : 'closed'}, setting visibility to ${visibility}`,
+    );
+    return true;
+  }
+
+  /**
+   * Queries the document body for the Kustomer SDK iframe. This function is to be run in a
+   * MutationObserver.
+   * @returns the iframe element if it exists, else undefine.
+   */
+  findKustomerButton(): HTMLIFrameElement | undefined {
+    Logger.logDebug('[spiffy-ai] Finding Kustomer button');
+    const parentDocument = window.document;
+    const kustomerElement =
+      parentDocument.getElementById(KustomerIntegrationService.KUSTOMER_IFRAME_ID) ?? undefined;
+
+    if (kustomerElement != null && kustomerElement instanceof HTMLIFrameElement) {
+      return kustomerElement;
+    }
+
+    Logger.logDebug('[spiffy-ai] Kustomer iFrame element not found');
+    return undefined;
+  }
+
+  /**
+   * Updates the Kustomer chat icon visibility when the kustomerState localStorage item changes.
+   * @param event The event that triggered the event listener.
+   */
+  onCustomerStateChange(event: StorageEvent): void {
+    if (
+      event.key === KustomerIntegrationService.KUSTOMER_LOCAL_STORAGE_KEY &&
+      event.newValue != null
+    ) {
+      Logger.logDebug(
+        `[spiffy-ai] Storage change key=${event.key}, updating widget visibility`,
+        event.newValue,
+      );
+      this.updateVisibility();
+    }
+  }
+}
+
+export { KustomerIntegrationService };

package/src/application/service/localStorageService.ts

@@ -0,0 +1,77 @@
+import Logger from '../logging/logger';
+
+export enum LocalStorageKeys {
+  ChatId = 'v1-spiffy-chat-session-id',
+  SpiffyOnOverride = 'spiffy_on',
+  EnviveOnOverride = 'envive_on',
+}
+
+class LocalStorageService {
+  static setItem(key: string, value: string): void {
+    localStorage.setItem(key, value);
+    window.dispatchEvent(
+      new StorageEvent('storage', {
+        key,
+        newValue: value,
+      }),
+    );
+  }
+
+  static getItem(key: string): string | null {
+    return localStorage.getItem(key);
+  }
+
+  static setSpiffyOnFeatureFlag(value: boolean | null): void {
+    if (value === true) {
+      localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, 'true');
+    } else if (value === false) {
+      localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, 'false');
+    }
+  }
+
+  // TODO: LocalStorage service is not the proper use case for this method
+  // Should be moved to a more appropriate service or utility class (FeatureFlagService for ex)
+  // which may use LocalStorageService (or something else) under the hood
+  static getSpiffyOnFeatureFlag(): string | null {
+    return localStorage.getItem(LocalStorageKeys.SpiffyOnOverride);
+  }
+
+  static getLocalStorage() {
+    const ls = window?.localStorage;
+    if (!ls) {
+      Logger.logError('localStorage is not available', undefined);
+    }
+    return ls;
+  }
+
+  private static listenersCache: Record<string, (event: StorageEvent) => void> = {};
+  private static listenerForKey(
+    listener: LocalStorageEventListener,
+  ): (event: StorageEvent) => void {
+    if (!this.listenersCache[listener.storageKey]) {
+      this.listenersCache[listener.storageKey] = (event: StorageEvent) => {
+        if (event.key !== listener.storageKey) {
+          return;
+        }
+        Logger.logDebug(`[spiffy-ai] Storage event key=${event.key}, value=`, event.newValue);
+        listener.listener(event);
+      };
+    }
+
+    return this.listenersCache[listener.storageKey];
+  }
+
+  /**
+   * Attach a listener to the window's storage event. Safe to call multiple times.
+   * @param listener
+   */
+  static attachListener(listener: LocalStorageEventListener): void {
+    window.addEventListener('storage', this.listenerForKey(listener));
+  }
+
+  static detachListener(listener: LocalStorageEventListener): void {
+    window.removeEventListener('storage', this.listenerForKey(listener));
+  }
+}
+
+export { LocalStorageService };