@envive-ai/react-hooks 0.1.4 → 0.1.6

package/src/contexts/enviveCssContext.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
-import { useAtomValue } from "jotai";
-import { orgMerchantCssAtom } from "src/atoms/org/merchantCss";
+import { useNewOrgConfig } from "src/hooks";
 
 interface EnviveCssProviderProps {
   children: ReactNode;
@@ -9,11 +8,41 @@ interface EnviveCssProviderProps {
 export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
   children,
 }) => {
-  const enviveCss = useAtomValue(orgMerchantCssAtom);
-
+  const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
+  let merchantThemeCss = `* {}`;
+  if (colorsConfig && !loading) {
+    merchantThemeCss = `
+* {
+  --spiffy-colors-text-primary: ${colorsConfig.textPrimary};
+  --spiffy-colors-text-secondary: ${colorsConfig.textSecondary};
+  --spiffy-colors-text-accent: ${colorsConfig.textAccent};
+  --spiffy-colors-text-link: ${colorsConfig.textLink};
+  --spiffy-colors-text-light: ${colorsConfig.textLight};
+  --spiffy-colors-background-primary: ${colorsConfig.backgroundPrimary};
+  --spiffy-colors-background-secondary: ${colorsConfig.backgroundSecondary};
+  --spiffy-colors-background-secondary-dark: ${colorsConfig.backgroundSecondaryDark};
+  --spiffy-colors-background-tertiary: ${colorsConfig.backgroundTertiary};
+  --spiffy-colors-background-dark: ${colorsConfig.backgroundDark};
+  --spiffy-colors-background-light: ${colorsConfig.backgroundLight};
+  --spiffy-colors-background-saturated: ${colorsConfig.backgroundSaturated};
+  --spiffy-colors-border-light: ${colorsConfig.borderLight};
+  --spiffy-colors-border-medium: ${colorsConfig.borderMedium};
+  --spiffy-colors-border-dark: ${colorsConfig.borderDark};
+  --spiffy-colors-border-outline: ${colorsConfig.borderOutline};
+  --spiffy-colors-accent-primary: ${colorsConfig.accentPrimary};
+  --spiffy-colors-accent-secondary: ${colorsConfig.accentSecondary};
+}`;
+  }
+  console.log(frontendConfig);
   return (
     <>
-      {enviveCss && <style id="merchant-css-styles">{enviveCss}</style>}
+      {frontendConfig ? (
+        <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
+      ) : null}
+      {colorsConfig ? (
+        <style id="merchant-css-colors">{`${merchantThemeCss}`}</style>
+      ) : null}
+
       {children}
     </>
   );

package/src/contexts/featureFlagContext.tsx

@@ -0,0 +1,193 @@
+import React, { createContext, useContext, useCallback, useMemo } from "react";
+import Logger from "src/application/logging/logger";
+import { StatsigFeatureGate } from "@spiffy-ai/commerce-api-client";
+import { FeatureGates } from "src/application/models/featureGates";
+import { useSessionStorage } from "src/contexts/sessionStorageContext";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+
+const FEATURE_FLAGS_STORAGE_KEY = "spiffy-feature-flags";
+
+export interface FeatureFlagContextType {
+  isFeatureGateEnabled: (featureGate: FeatureGates) => boolean;
+  isClientSessionEnabled: () => boolean;
+  getFeatureFlags: () => Record<string, boolean>;
+  persistFeatureGateOverrides: () => void;
+}
+
+const FeatureFlagContext = createContext<FeatureFlagContextType | undefined>(
+  undefined
+);
+
+export const FeatureFlagProvider: React.FC<{
+  featureGates: OrgConfigFeatureGate[];
+  children: React.ReactNode;
+}> = ({ featureGates, children }) => {
+  const { getItem, setItem } = useSessionStorage();
+  const { featureOverrides } = useEnviveConfig();
+
+  const getQueryParamFeatureGateOverrides = useCallback(
+    (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;
+    },
+    []
+  );
+
+  const getWindowFeatureGateOverrides = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const value = featureOverrides?.[String(featureGate)];
+      if (value != null) {
+        return value;
+      }
+
+      return undefined;
+    },
+    [featureOverrides]
+  );
+
+  const getStoredFeatureGateOverrides = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const featureFlags = 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;
+    },
+    []
+  );
+
+  const getFeatureFlagOverride = useCallback(
+    (featureGate: FeatureGates): boolean | undefined => {
+      const queryOverride = getQueryParamFeatureGateOverrides(featureGate);
+      if (queryOverride != null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`
+        );
+        return queryOverride;
+      }
+
+      const windowOverride = getWindowFeatureGateOverrides(featureGate);
+      if (windowOverride != null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`
+        );
+        return windowOverride;
+      }
+
+      const storedOverride = getStoredFeatureGateOverrides(featureGate);
+      if (storedOverride != null) {
+        Logger.logDebug(
+          `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`
+        );
+        return storedOverride;
+      }
+
+      return undefined;
+    },
+    [
+      getQueryParamFeatureGateOverrides,
+      getWindowFeatureGateOverrides,
+      getStoredFeatureGateOverrides,
+    ]
+  );
+
+  const isFeatureGateEnabled = useCallback(
+    (featureGate: FeatureGates): boolean => {
+      const gateValue = featureGates.find((gate) => gate.name === featureGate);
+
+      const featureFlagOverride = 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;
+    },
+    [featureGates, getFeatureFlagOverride]
+  );
+
+  const isClientSessionEnabled = useCallback((): boolean => {
+    const gates: Array<StatsigFeatureGate> | undefined = featureGates;
+    const isEnabled =
+      gates == null ||
+      gates?.filter(
+        (gate) =>
+          gate.name === FeatureGates.IsClientSessionEnabled &&
+          gate.value === true
+      ).length > 0;
+
+    return isEnabled;
+  }, [featureGates]);
+
+  const getFeatureFlags = useCallback((): Record<string, boolean> => {
+    return Object.fromEntries(
+      Object.values(FeatureGates).map((featureGate: FeatureGates) => [
+        featureGate,
+        isFeatureGateEnabled(featureGate),
+      ])
+    );
+  }, [isFeatureGateEnabled]);
+
+  const persistFeatureGateOverrides = useCallback(() => {
+    const featureFlags = Object.values(FeatureGates)
+      .map((featureGate) => [featureGate, getFeatureFlagOverride(featureGate)])
+      .filter(([, val]) => val !== undefined)
+      .reduce((acc, [key, val]) => ({ ...acc, [key as string]: val }), {});
+    setItem(FEATURE_FLAGS_STORAGE_KEY, JSON.stringify(featureFlags));
+  }, [getFeatureFlagOverride, setItem]);
+
+  const value = useMemo(
+    () => ({
+      isFeatureGateEnabled,
+      isClientSessionEnabled,
+      getFeatureFlags,
+      persistFeatureGateOverrides,
+    }),
+    [
+      isFeatureGateEnabled,
+      isClientSessionEnabled,
+      getFeatureFlags,
+      persistFeatureGateOverrides,
+    ]
+  );
+
+  return (
+    <FeatureFlagContext.Provider value={value}>
+      {children}
+    </FeatureFlagContext.Provider>
+  );
+};
+
+export const useFeatureFlag = () => {
+  const context = useContext(FeatureFlagContext);
+  if (context === undefined) {
+    throw new Error("useFeatureFlag must be used within a FeatureFlagProvider");
+  }
+  return context;
+};

package/src/contexts/featureFlagServiceContext.tsx

@@ -0,0 +1,87 @@
+import React, { createContext, useContext, useMemo, ReactNode } from "react";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+import { FeatureGates } from "src/application/models/featureGates";
+import Logger from "src/application/logging/logger";
+
+// This is the class that was previously implicitly used or defined elsewhere
+class FeatureFlagService {
+  private featureGates: OrgConfigFeatureGate[];
+
+  constructor(featureGates: OrgConfigFeatureGate[]) {
+    this.featureGates = featureGates;
+  }
+
+  isFeatureGateEnabled = (featureGate: FeatureGates): boolean => {
+    const gateValue = this.featureGates.find(
+      (gate) => gate.name === featureGate
+    );
+
+    // TODO: Add logic for overrides (query params, window, stored) if needed, similar to the old FeatureFlagContext.tsx
+    // For now, direct value from config is used.
+
+    if (gateValue == null || gateValue.value == null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} value is undefined - returning false`
+      );
+      return false;
+    }
+    return gateValue.value;
+  };
+
+  isClientSessionEnabled = (): boolean => {
+    const isEnabled =
+      this.featureGates.filter(
+        (gate) =>
+          gate.name === FeatureGates.IsClientSessionEnabled &&
+          gate.value === true
+      ).length > 0;
+    return isEnabled;
+  };
+
+  getFeatureFlags = (): Record<string, boolean> => {
+    return Object.fromEntries(
+      Object.values(FeatureGates).map((featureGate: FeatureGates) => [
+        featureGate,
+        this.isFeatureGateEnabled(featureGate),
+      ])
+    );
+  };
+}
+
+export interface FeatureFlagContextType {
+  featureFlagService: FeatureFlagService | undefined;
+}
+
+const FeatureFlagServiceContext = createContext<
+  FeatureFlagContextType | undefined
+>(undefined);
+
+interface FeatureFlagServiceProviderProps {
+  featureGates: OrgConfigFeatureGate[];
+  children: ReactNode;
+}
+
+export const FeatureFlagServiceProvider: React.FC<
+  FeatureFlagServiceProviderProps
+> = ({ featureGates, children }) => {
+  const featureFlagService = useMemo(
+    () => new FeatureFlagService(featureGates),
+    [featureGates]
+  );
+
+  return (
+    <FeatureFlagServiceContext.Provider value={{ featureFlagService }}>
+      {children}
+    </FeatureFlagServiceContext.Provider>
+  );
+};
+
+export const useFeatureFlagService = () => {
+  const context = useContext(FeatureFlagServiceContext);
+  if (context === undefined) {
+    throw new Error(
+      "useFeatureFlagService must be used within a FeatureFlagServiceProvider"
+    );
+  }
+  return context;
+};

package/src/contexts/graphqlContext.tsx

@@ -0,0 +1,165 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  ReactNode,
+} from "react";
+import { useAtomValue } from "jotai";
+import { baseUrlAtom, orgLevelApiKeyAtom } from "src/atoms/envive/enviveConfig";
+import { getMerchantOrgIdQuery } from "src/application/models/graphql/queries/getMerchantOrgIdQuery";
+import { validateGraphQLOrgId } from "src/application/models/validators/validateGraphQLOrgId";
+import {
+  getMerchantColorsQuery,
+  GetMerchantColorsQueryData,
+  getMerchantFrontendConfigQuery,
+  GetMerchantFrontendConfigQueryData,
+} from "src/application/models/graphql";
+import { validateGraphQLColorsConfig } from "src/application/models/validators/validateGraphQLColorsConfig";
+import { validateGraphQLFrontendConfig } from "src/application/models/validators/validateGraphQLFrontendConfig";
+import { ColorMapping } from "src/application/models/colorsConfig";
+import { FrontendConfig } from "src/application/models/frontendConfig";
+import Logger from "src/application/logging/logger";
+import { configVersion } from "src/types/config-versions";
+import {
+  CamelCasedPropertiesDeep,
+  transformSnakeToCamel,
+} from "src/application/models";
+
+interface BaseMeConfigQueryResponse {
+  me: {
+    org?: {
+      id: string;
+    };
+    getProductsConfigByVersion?: {
+      frontend?: {
+        values: CamelCasedPropertiesDeep<GetMerchantFrontendConfigQueryData>;
+      };
+      colors?: { values: CamelCasedPropertiesDeep<GetMerchantColorsQueryData> };
+    };
+  };
+}
+export type ColorsConfigResponse = CamelCasedPropertiesDeep<ColorMapping>;
+export type FrontendConfigResponse = CamelCasedPropertiesDeep<FrontendConfig>;
+
+export type GraphQlConfigValues = {
+  colorsConfig?: ColorsConfigResponse;
+  frontendConfig?: CamelCasedPropertiesDeep<FrontendConfig>;
+};
+
+interface GraphQLContextValue {
+  executeQuery: <T>(
+    query: string,
+    variables?: Record<string, unknown>
+  ) => Promise<T>;
+  getOrgId: () => Promise<string | undefined>;
+  getColorsAndFrontendConfig: () => Promise<GraphQlConfigValues>;
+  isReady: boolean;
+}
+
+const GraphQLContext = createContext<GraphQLContextValue | null>(null);
+
+const colorsAndFrontendConfigQuery = () => `
+  query ($version: String = "${configVersion()}") {
+    me {
+      getProductsConfigByVersion(version: $version) {
+        frontend { values }
+        colors { values }
+      }
+    }
+  }
+`;
+
+type GraphQLProviderProps = {
+  children: ReactNode;
+};
+
+export const GraphQLProvider = ({ children }: GraphQLProviderProps) => {
+  const apiKey = useAtomValue(orgLevelApiKeyAtom);
+  const baseUrl = useAtomValue(baseUrlAtom);
+
+  const isReady = Boolean(apiKey && baseUrl);
+
+  const executeQuery = useCallback(
+    async (query: string, variables?: Record<string, unknown>) => {
+      if (!isReady) {
+        throw new Error("GraphQL client not ready - missing apiKey or baseUrl");
+      }
+
+      const response = await fetch(`${baseUrl}/v1/graphql`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${apiKey}`,
+        },
+        body: JSON.stringify({ query, variables }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`GraphQL request failed: ${response.statusText}`);
+      }
+
+      const result = await response.json();
+      if (result.errors) {
+        throw new Error(`GraphQL errors: ${JSON.stringify(result.errors)}`);
+      }
+
+      return result.data;
+    },
+    [apiKey, baseUrl, isReady]
+  );
+
+  const getOrgId = useCallback(async () => {
+    const response = await executeQuery(getMerchantOrgIdQuery);
+    return validateGraphQLOrgId(response.me.org?.id);
+  }, [executeQuery]);
+
+  const getColorsAndFrontendConfig =
+    useCallback(async (): Promise<GraphQlConfigValues> => {
+      try {
+        const query = await colorsAndFrontendConfigQuery();
+        if (!query) {
+          throw new Error("Colors and frontend config query is not defined");
+        }
+        const response = await executeQuery(query);
+        const colorsConfig =
+          response.me.getProductsConfigByVersion?.colors?.values;
+        const frontendConfig =
+          response.me.getProductsConfigByVersion?.frontend?.values;
+        const transformedColorConfig = transformSnakeToCamel(colorsConfig);
+        const transformedFrontendConfig = transformSnakeToCamel(frontendConfig);
+        return {
+          colorsConfig: transformedColorConfig as ColorsConfigResponse,
+          frontendConfig: transformedFrontendConfig as FrontendConfigResponse,
+        };
+      } catch (err) {
+        Logger.logError(
+          "Error fetching graphql colors and frontend config",
+          err
+        );
+        return { colorsConfig: undefined, frontendConfig: undefined };
+      }
+    }, [executeQuery]);
+
+  const value = useMemo(
+    () => ({
+      executeQuery,
+      getOrgId,
+      getColorsAndFrontendConfig,
+      isReady,
+    }),
+    [executeQuery, getOrgId, getColorsAndFrontendConfig, isReady]
+  );
+
+  return (
+    <GraphQLContext.Provider value={value}>{children}</GraphQLContext.Provider>
+  );
+};
+
+export const useGraphQLClient = () => {
+  const context = useContext(GraphQLContext);
+  if (!context) {
+    throw new Error("useGraphQLClient must be used within a GraphQLProvider");
+  }
+  return context;
+};

package/src/contexts/index.ts

@@ -1,6 +1,16 @@
+export * from "./amplitudeContext";
+export * from "./cdnContext";
 export * from "./chatContext";
-export * from "./systemSettingsContext";
 export * from "./enviveConfigContext";
-export * from "./types";
-export * from "./orgConfigContext";
 export * from "./enviveCssContext";
+// export * from "./featureFlagContext"; // Deprecated in favor of featureFlagServiceContext
+export * from "./graphqlContext";
+export * from "./localStorageContext";
+export * from "./searchContext";
+export * from "./sessionStorageContext";
+export * from "./shopifyUrlContext";
+export * from "./systemSettingsContext";
+export * from "./types";
+export * from "./userIdentityContext";
+export * from "./newOrgConfigContext";
+export * from "./featureFlagServiceContext";

package/src/contexts/localStorageContext.tsx

@@ -0,0 +1,159 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
+import Logger from "../application/logging/logger";
+import { LocalStorageEventListener } from "../application/models/localStorageEventListener";
+
+export enum LocalStorageKeys {
+  ChatId = "v1-spiffy-chat-session-id",
+  SpiffyOnOverride = "spiffy_on",
+  EnviveOnOverride = "envive_on",
+}
+
+interface LocalStorageContextType {
+  setItem: (key: string, value: string) => void;
+  getItem: (key: string) => string | null;
+  setSpiffyOnFeatureFlag: (value: boolean | null) => void;
+  getSpiffyOnFeatureFlag: () => string | null;
+  attachListener: (listener: LocalStorageEventListener) => void;
+  detachListener: (listener: LocalStorageEventListener) => void;
+  isAvailable: boolean;
+}
+
+const LocalStorageContext = createContext<LocalStorageContextType | null>(null);
+
+export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const isAvailable = useMemo(() => {
+    try {
+      return typeof window !== "undefined" && !!window.localStorage;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isAvailable) {
+      Logger.logError("localStorage is not available", undefined);
+    }
+  }, [isAvailable]);
+
+  const setItem = useCallback(
+    (key: string, value: string) => {
+      if (!isAvailable) return;
+      localStorage.setItem(key, value);
+      window.dispatchEvent(
+        new StorageEvent("storage", { key, newValue: value })
+      );
+    },
+    [isAvailable]
+  );
+
+  const getItem = useCallback(
+    (key: string) => {
+      if (!isAvailable) return null;
+      return localStorage.getItem(key);
+    },
+    [isAvailable]
+  );
+
+  const setSpiffyOnFeatureFlag = useCallback(
+    (value: boolean | null): void => {
+      if (!isAvailable) return;
+      if (value === true) {
+        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, "true");
+      } else if (value === false) {
+        localStorage.setItem(LocalStorageKeys.SpiffyOnOverride, "false");
+      }
+    },
+    [isAvailable]
+  );
+
+  const getSpiffyOnFeatureFlag = useCallback((): string | null => {
+    if (!isAvailable) return null;
+    return localStorage.getItem(LocalStorageKeys.SpiffyOnOverride);
+  }, [isAvailable]);
+
+  const listenersCache = useMemo(
+    () => new Map<string, (event: StorageEvent) => void>(),
+    []
+  );
+
+  const listenerForKey = useCallback(
+    (listener: LocalStorageEventListener): ((event: StorageEvent) => void) => {
+      if (!listenersCache.has(listener.storageKey)) {
+        const handler = (event: StorageEvent) => {
+          if (event.key !== listener.storageKey) {
+            return;
+          }
+          Logger.logDebug(
+            `[spiffy-ai] Storage event key=${event.key}, value=`,
+            event.newValue
+          );
+          listener.listener(event);
+        };
+        listenersCache.set(listener.storageKey, handler);
+      }
+      return listenersCache.get(listener.storageKey)!;
+    },
+    [listenersCache]
+  );
+
+  const attachListener = useCallback(
+    (listener: LocalStorageEventListener): void => {
+      if (!isAvailable) return;
+      window.addEventListener("storage", listenerForKey(listener));
+    },
+    [isAvailable, listenerForKey]
+  );
+
+  const detachListener = useCallback(
+    (listener: LocalStorageEventListener): void => {
+      if (!isAvailable) return;
+      window.removeEventListener("storage", listenerForKey(listener));
+    },
+    [isAvailable, listenerForKey]
+  );
+
+  const value = useMemo(
+    () => ({
+      setItem,
+      getItem,
+      setSpiffyOnFeatureFlag,
+      getSpiffyOnFeatureFlag,
+      attachListener,
+      detachListener,
+      isAvailable,
+    }),
+    [
+      setItem,
+      getItem,
+      setSpiffyOnFeatureFlag,
+      getSpiffyOnFeatureFlag,
+      attachListener,
+      detachListener,
+      isAvailable,
+    ]
+  );
+
+  return (
+    <LocalStorageContext.Provider value={value}>
+      {children}
+    </LocalStorageContext.Provider>
+  );
+};
+
+export const useLocalStorage = () => {
+  const context = useContext(LocalStorageContext);
+  if (!context) {
+    throw new Error(
+      "useLocalStorage must be used within a LocalStorageProvider"
+    );
+  }
+  return context;
+};