@envive-ai/react-hooks 0.1.3 → 0.1.5

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/hooks/useHorizontalScrollAnimation.ts

@@ -1,115 +0,0 @@
-import { useEffect, RefObject, useRef } from 'react';
-import { useReducedMotionWithOverride } from 'src/hooks/useReducedMotionWithOverride';
-
-// IMPORTANT: All refs passed to this hook must be mutable (not Readonly)
-interface UseHorizontalScrollAnimationOptions {
-  scrollContainerRef: RefObject<HTMLDivElement>;
-  animationSpeed?: 'standard' | 'slow' | 'none';
-}
-
-// When using this hook, ensure that scrouuContainerRef is not undefined. It is allowed to
-// prevent issued elsewhere in the codebase, but it should be dealt with whenever you use this hook.
-export function useHorizontalScrollAnimation({
-  scrollContainerRef,
-  animationSpeed = 'standard',
-}: UseHorizontalScrollAnimationOptions): void {
-  const reducedMotion = useReducedMotionWithOverride();
-  const resumeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const scrollAnimationRef = useRef<number | null>(null);
-
-  const pauseOnHover = true; // This is unlikely to need to be configurable but I'm throwing it up here just in case.
-
-  // Animation constants: time-based
-  let PIXELS_PER_SECOND = 40;
-  switch (animationSpeed) {
-    case 'standard':
-      PIXELS_PER_SECOND = 40;
-      break;
-    case 'slow':
-      PIXELS_PER_SECOND = 25;
-      break;
-    case 'none':
-      PIXELS_PER_SECOND = 0;
-      break;
-    default:
-      PIXELS_PER_SECOND = 40;
-  }
-  const RESUME_DELAY_MS = 2000;
-  const isAnimated = animationSpeed !== 'none';
-
-  useEffect(() => {
-    if (!isAnimated || reducedMotion || !scrollContainerRef) return;
-
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    if (container.scrollWidth <= container.clientWidth) return;
-
-    let isPaused = false;
-    let lastTimestamp: number | null = null;
-    let accumulatedScroll = 0; // Accumulate fractional pixels
-
-    const step = (timestamp: number) => {
-      if (lastTimestamp === null) lastTimestamp = timestamp;
-      if (!isPaused) {
-        const delta = timestamp - lastTimestamp;
-        lastTimestamp = timestamp;
-
-        // Accumulate the scroll amount (including fractional pixels)
-        accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
-
-        // Only apply whole pixel movements
-        const pixelsToScroll = Math.floor(accumulatedScroll);
-        if (pixelsToScroll > 0) {
-          container.scrollLeft += pixelsToScroll;
-          accumulatedScroll -= pixelsToScroll; // Keep the fractional remainder
-
-          if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
-            container.scrollLeft = 0; // Reset scroll to create a looping effect
-            accumulatedScroll = 0; // Reset accumulated scroll when looping
-          }
-        }
-      }
-      scrollAnimationRef.current = requestAnimationFrame(step);
-    };
-
-    // Start animation
-    scrollAnimationRef.current = requestAnimationFrame(step);
-
-    // Pause/resume logic
-    const pauseAnimation = () => {
-      isPaused = true;
-      if (resumeTimeoutRef.current) {
-        clearTimeout(resumeTimeoutRef.current);
-        resumeTimeoutRef.current = null;
-      }
-    };
-    const scheduleResumeAnimation = () => {
-      resumeTimeoutRef.current = setTimeout(() => {
-        isPaused = false;
-        lastTimestamp = null; // Reset timestamp so delta is correct after pause
-      }, RESUME_DELAY_MS);
-    };
-
-    if (pauseOnHover) {
-      container.addEventListener('mouseenter', pauseAnimation);
-      container.addEventListener('mouseleave', scheduleResumeAnimation);
-      container.addEventListener('touchstart', pauseAnimation);
-      container.addEventListener('touchend', scheduleResumeAnimation);
-    }
-
-    return () => {
-      if (scrollAnimationRef.current) {
-        cancelAnimationFrame(scrollAnimationRef.current);
-      }
-      if (pauseOnHover) {
-        container.removeEventListener('mouseenter', pauseAnimation);
-        container.removeEventListener('mouseleave', scheduleResumeAnimation);
-        container.removeEventListener('touchstart', pauseAnimation);
-        container.removeEventListener('touchend', scheduleResumeAnimation);
-      }
-      if (resumeTimeoutRef.current) {
-        clearTimeout(resumeTimeoutRef.current);
-      }
-    };
-  }, [isAnimated, reducedMotion, PIXELS_PER_SECOND, pauseOnHover, scrollContainerRef]);
-}

package/src/hooks/useReducedMotionWithOverride.ts

@@ -1,15 +0,0 @@
-import { useReducedMotionConfig } from 'framer-motion';
-import { useMemo } from 'react';
-
-export const useReducedMotionWithOverride = () => {
-  const reducedMotionConfig = useReducedMotionConfig();
-  const reducedMotion = useMemo(() => {
-    if (window?._spiffy?.reducedMotionOverride) {
-      return window?._spiffy?.reducedMotionOverride;
-    }
-
-    return reducedMotionConfig;
-  }, [reducedMotionConfig]);
-
-  return reducedMotion;
-};

package/src/hooks/useSnapControl.ts

@@ -1,155 +0,0 @@
-import {
-  MotionValue,
-  transform,
-  useAnimate,
-  useMotionValue,
-  useTransform,
-  ValueAnimationTransition,
-} from 'framer-motion';
-import { useMemo, useState } from 'react';
-import { Unit, useSnapCalculator } from './useSnapCalculator';
-
-type SnapControl = {
-  animationKey?: MotionValue;
-  animation: ValueAnimationTransition;
-  height: number;
-  unit: Unit;
-  snaps: number[];
-  initSnap: number;
-  threshold?: number;
-  overlayOpacity: number;
-  onSnapComplete: (currentSnap: number, nextSnap: number, collapsed: boolean) => void;
-};
-
-const MIDDLE_SNAP_OFFSET = 5;
-const SNAP_DISTANCE_OFFSET = 50;
-
-export const useSnapControl = ({
-  animationKey,
-  animation,
-  height,
-  unit,
-  snaps,
-  initSnap,
-  onSnapComplete,
-  overlayOpacity,
-}: SnapControl) => {
-  const [scope, animate] = useAnimate();
-  const animatedY = animationKey || useMotionValue(-1);
-
-  const { swipeviewHeightPx, snapsToPixels, viewportHeightPx, getPixelToSnap, getSnapToPixel } =
-    useSnapCalculator(snaps, height, unit);
-
-  const contentHeight = useTransform(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
-
-  const snapOverlayReference = useMemo(
-    () => [
-      getSnapToPixel(snaps[0]),
-      getSnapToPixel(snaps[1]) - MIDDLE_SNAP_OFFSET,
-      getSnapToPixel(snaps[2]),
-    ],
-    [],
-  );
-
-  const displayOverlay = useTransform(() =>
-    animatedY.get() === -1
-      ? 'none'
-      : transform(animatedY.get(), snapOverlayReference, ['none', 'none', 'block']),
-  );
-
-  const opacityOverlay = useTransform(() =>
-    animatedY.get() === -1
-      ? 0
-      : transform(animatedY.get(), snapOverlayReference, [0, 0, overlayOpacity]),
-  );
-
-  const initSnapInPixels = snapsToPixels?.[initSnap];
-  const getInitSnap = () => snaps?.[initSnap];
-  const [currentSnap, setCurrentSnap] = useState<number>(getInitSnap());
-  const between = (x: number, min: number, max: number) => x >= min && x <= max;
-
-  const defineNextSnapByPosition = () => {
-    const scopeEl = scope.current;
-    const currentSnapRef = Math.abs(
-      viewportHeightPx - (swipeviewHeightPx - getSnapToPixel(currentSnap)),
-    );
-
-    const realGestureY =
-      scopeEl.getBoundingClientRect().y +
-      scopeEl.getBoundingClientRect().height -
-      (window.innerHeight - document.documentElement.clientHeight);
-
-    const isGoingUp = realGestureY < currentSnapRef;
-
-    const snapsToPixelsClone = Array.from(snapsToPixels);
-    isGoingUp
-      ? snapsToPixelsClone.sort((a, b) => b - a) /* desc*/
-      : snapsToPixelsClone.sort((a, b) => a - b); /* asc */
-
-    if (realGestureY != currentSnapRef) {
-      const snapReference = snapsToPixelsClone.find((snap) => {
-        const current = Math.abs(viewportHeightPx - (swipeviewHeightPx - snap));
-        return isGoingUp ? current < realGestureY : current > realGestureY;
-      });
-
-      if (snapReference === undefined) {
-        return snapsToPixelsClone.slice(-1)[0];
-      }
-
-      const prevSnapIndex = snapsToPixelsClone.indexOf(snapReference ?? -1);
-      const prevSnap = snapsToPixelsClone[prevSnapIndex - 1];
-      const prevSnapPx = Math.abs(viewportHeightPx - (swipeviewHeightPx - prevSnap));
-      const adjacentSnap = between(
-        realGestureY,
-        prevSnapPx - SNAP_DISTANCE_OFFSET,
-        prevSnapPx + SNAP_DISTANCE_OFFSET,
-      );
-
-      return adjacentSnap ? prevSnap : snapReference;
-    }
-
-    return getSnapToPixel(currentSnap);
-  };
-
-  const jumpTo = (snapPx: number) => {
-    const collapsed = snapPx === swipeviewHeightPx;
-    const nextSnap = getPixelToSnap(snapPx);
-    animate(
-      scope.current,
-      { y: snapPx },
-      {
-        ...animation,
-        onComplete: () => {
-          onSnapComplete(currentSnap, nextSnap, collapsed);
-          setCurrentSnap(nextSnap);
-        },
-      },
-    );
-
-    return {
-      nextSnap,
-      collapsed,
-    };
-  };
-
-  const resetControls = () => {
-    setCurrentSnap(getInitSnap());
-    return 0;
-  };
-
-  return {
-    scope,
-    animatedY,
-    animate,
-    swipeviewHeightPx,
-    initSnapInPixels,
-    contentHeight,
-    currentSnap,
-    displayOverlay,
-    opacityOverlay,
-    getSnapToPixel,
-    jumpTo,
-    defineNextSnapByPosition,
-    resetControls,
-  };
-};

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