@envive-ai/react-hooks 0.1.3 → 0.1.5

package/src/atoms/org/merchantCss.ts

@@ -1,13 +1,130 @@
 import { atom } from "jotai";
 import { ColorNames } from "src/contexts/types";
 import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
-import { colorsConfigAtom } from "src/atoms/org/graphqlConfig";
+import {
+  colorsConfigAtom,
+  internalGraphQLColorsConfigAtom,
+} from "src/atoms/org/graphqlConfig";
+
+const tailwindStyles = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  /* Provides a utility class to disable scroll bars */
+  /* Chrome, Safari and Opera */
+  .spiffy-tw-no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .spiffy-tw-no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .spiffy-tw-typography-ul,
+  .spiffy-tw-typography-ol {
+    list-style: inherit;
+    margin: 0;
+    padding-left: 24px;
+    line-height: 4px;
+  }
+}
+
+/* 
+ * TODO: this needs to be re-scoped to target the application root instead
+ * of the individual components.
+ */
+#spiffy-ai-container,
+#spiffy-ai-chat-preview,
+#spiffy-ai-chat-preview-contents,
+#spiffy-ai-floating-button {
+  font-family: 'Inter Variable', sans-serif;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: Poppins, sans-serif;
+  }
+}
+
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2)
+    format('woff2-variations');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* inter-latin-wght-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-italic.woff2)
+    format('woff2-variations');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* poppins-latin-400-normal */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2)
+      format('woff2'),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff)
+      format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}
+
+/* poppins-latin-500-normal */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-500-normal.woff2)
+      format('woff2'),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-500-normal.woff)
+      format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}
+
+/* poppins-latin-600-normal */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-600-normal.woff2)
+      format('woff2'),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-600-normal.woff)
+      format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}`;
 
 export const orgMerchantCssAtom = atom(async (get) => {
   const orgUIConfig = get(orgUIConfigAtom);
-  const colors = await get(colorsConfigAtom);
+  const colors = await get(internalGraphQLColorsConfigAtom);
   const merchantThemeCss = colors
     ? `
+${tailwindStyles}
 
 * {
   --spiffy-colors-text-primary: ${colors[ColorNames.TextPrimary]};

package/src/atoms/org/org.ts

@@ -1,25 +1,27 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import Logger from "src/application/logging/logger";
 import { ContextSourceEnum } from "@spiffy-ai/commerce-api-client";
 import { atom } from "jotai";
 import { atomWithStorage, createJSONStorage } from "jotai/utils";
 import CommerceApiClient from "src/adapters/spiffy/commerce/api";
-import { GraphQLClient } from "src/adapters/spiffy/commerce/graphql";
 import { OrgConfig } from "src/application/models/api/orgConfigResults";
-import { EnvironmentService } from "src/application/service/environmentService";
 import { FeatureFlagService } from "src/application/service/featureFlagService";
 import { UserIdentityService } from "src/application/service/userIdentityService";
 import { AtomStore, getAtomStore } from "src/atoms/atomStore/atomStore";
 import { PerfMetricsEvents, logPerfMetricAtom } from "src/atoms/chat";
 import { orgAnalyticsConfigAtom } from "src/atoms/org/orgAnalyticsConfig";
 import { colorsConfigAtom, frontendConfigAtom } from "./graphqlConfig";
-import { getOrgUIConfig } from "./orgUIConfig";
-import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+import { GraphQLConfigService } from "src/application/service/graphqlConfigService";
+import {
+  orgLevelApiKeyAtom,
+  orgShortNameAtom as enviveOrgShortNameAtom,
+  contextSourceAtom,
+  baseUrlAtom,
+} from "src/atoms/envive/enviveConfig";
 
 const internalApiKeyAtom = atom<string | undefined>(undefined);
 const internalEndpointURLAtom = atom<string | undefined>(undefined);
-const internalSourceAtom = atom<ContextSourceEnum>(
-  EnvironmentService.getContextSource()
-);
+const internalSourceAtom = atom<ContextSourceEnum | undefined>(undefined);
 
 export const getApiKeyEnvVar = (shortName: string): string =>
   `VITE_${shortName.replace(/-/g, "_").toUpperCase()}_API_KEY`;
@@ -32,7 +34,8 @@ export const apiKeyAtom = atom(
       return apiKey;
     }
 
-    const { orgLevelApiKey, orgShortName } = useEnviveConfig();
+    const orgLevelApiKey = get(orgLevelApiKeyAtom);
+    const orgShortName = get(enviveOrgShortNameAtom);
 
     if (orgLevelApiKey) {
       return orgLevelApiKey;
@@ -45,8 +48,14 @@ export const apiKeyAtom = atom(
       return window._spiffy.publicKey;
     }
 
+    // During initial render, orgShortName might not be set yet
+    // Return undefined instead of throwing to allow for lazy initialization
     if (!orgShortName) {
-      throw new Error("[spiffy-ai] orgShortName is required but is not set");
+      Logger.logWarn(
+        "[spiffy-ai] orgShortName not yet available, returning undefined for apiKey",
+        undefined
+      );
+      return undefined;
     }
 
     // The merchant probably forgot to set the apiKey
@@ -56,18 +65,6 @@ export const apiKeyAtom = atom(
     set(internalApiKeyAtom, newVal);
   }
 );
-export const endpointURLAtom = atom(
-  (get) => get(internalEndpointURLAtom) ?? EnvironmentService.getApiEndpoint(),
-  (_, set, newVal: string | undefined) => {
-    set(internalEndpointURLAtom, newVal);
-  }
-);
-export const sourceAtom = atom(
-  (get) => get(internalSourceAtom),
-  (_, set, newVal: ContextSourceEnum) => {
-    set(internalSourceAtom, newVal);
-  }
-);
 
 const orgConfigStorageUtil = createJSONStorage<
   Record<string, OrgConfig> | undefined
@@ -100,7 +97,7 @@ export const featureFlagServiceAtom = atom(
       return new FeatureFlagService(orgConfig.gates);
     }
 
-    throw new Error("FeatureFlagService is referenced before it is set");
+    return undefined; // Return undefined instead of throwing
   },
   (_, set, value: FeatureFlagService) => {
     set(internalFeatureFlagServiceAtom, value);
@@ -109,11 +106,7 @@ export const featureFlagServiceAtom = atom(
 export const orgConfigAtom = atom(
   (get) => {
     const orgConfig = get(internalOrgConfigAtom);
-    if (orgConfig) {
-      return orgConfig;
-    }
-
-    throw new Error("OrgConfig is referenced before it is set");
+    return orgConfig; // Return undefined if not set instead of throwing
   },
   (_, set, value: OrgConfig) => {
     set(internalOrgConfigAtom, value);
@@ -122,11 +115,7 @@ export const orgConfigAtom = atom(
 export const orgShortNameAtom = atom(
   (get) => {
     const orgShortName = get(internalOrgShortNameAtom);
-    if (orgShortName) {
-      return orgShortName;
-    }
-
-    throw new Error("Org short name is referenced before it is set");
+    return orgShortName; // Return undefined if not set instead of throwing
   },
   (_, set, value: string) => {
     set(internalOrgShortNameAtom, value);
@@ -135,11 +124,7 @@ export const orgShortNameAtom = atom(
 export const orgDomainAtom = atom(
   (get) => {
     const orgDomain = get(internalOrgDomainAtom);
-    if (orgDomain) {
-      return orgDomain;
-    }
-
-    throw new Error("Org domain is referenced before it is set");
+    return orgDomain; // Return undefined if not set instead of throwing
   },
   (_, set, value: string) => {
     set(internalOrgDomainAtom, value);
@@ -148,11 +133,7 @@ export const orgDomainAtom = atom(
 export const orgIdAtom = atom(
   (get) => {
     const orgId = get(internalOrgIdAtom);
-    if (orgId) {
-      return orgId;
-    }
-
-    throw new Error("Org id is referenced before it is set");
+    return orgId; // Return undefined if not set instead of throwing
   },
   (_, set, value: string) => {
     set(internalOrgIdAtom, value);
@@ -164,28 +145,6 @@ export const resetStoredOrgConfigAtom = () => {
   atomStore.set(storedOrgConfigAtom, {});
 };
 
-// eslint-disable-next-line
-const getGraphQLConfig = async (atomStore: AtomStore) => {
-  const { colorsConfig, frontendConfig } =
-    (await GraphQLClient.getColorsAndFrontendConfig()) ?? {};
-
-  const rawFrontendConfig = atomStore.get(frontendConfigAtom);
-
-  atomStore.set(colorsConfigAtom, colorsConfig);
-
-  atomStore.set(frontendConfigAtom, {
-    ...rawFrontendConfig,
-    pageVariants: frontendConfig?.pageVariants,
-    mountingConfigs: frontendConfig?.mountingConfigs,
-    widgetConfigs: frontendConfig?.widgetConfigs,
-  });
-
-  await getOrgUIConfig(
-    frontendConfig?.uiConfigs,
-    frontendConfig?.merchantOverrideCss
-  );
-};
-
 /**
  * This function is used to return an orgConfig corresponding to a given API key
  *
@@ -198,9 +157,16 @@ export const getAsyncOrgConfig = async (
 ): Promise<OrgConfig> => {
   const atomStore = getAtomStore();
   const apiKey = apiKeyOverride ?? atomStore.get(apiKeyAtom);
+
+  // If apiKey is still undefined, we need to wait or throw an error
+  if (!apiKey) {
+    throw new Error(
+      "[spiffy-ai] API key is required but not available. Ensure EnviveConfigProvider is properly set up with orgLevelApiKey or orgShortName."
+    );
+  }
+
   atomStore.set(apiKeyAtom, apiKey);
-  atomStore.set(endpointURLAtom, EnvironmentService.getApiEndpoint());
-  atomStore.set(sourceAtom, EnvironmentService.getContextSource());
+
   atomStore.set(logPerfMetricAtom, PerfMetricsEvents.OrgConfigLoadStarted);
   const maybeOrgConfigByApiKey = atomStore.get(storedOrgConfigAtom);
   let maybeOrgConfig = maybeOrgConfigByApiKey?.[apiKey];
@@ -214,7 +180,7 @@ export const getAsyncOrgConfig = async (
   }
 
   const latestConfig = maybeOrgConfig.configs?.find(
-    (config) => config.isLatest
+    (config: any) => config.isLatest
   );
 
   if (!latestConfig) {
@@ -248,7 +214,38 @@ export const getAsyncOrgConfig = async (
     new FeatureFlagService(orgConfig.gates)
   );
 
-  await getGraphQLConfig(atomStore);
-
-  return orgConfig;
+  try {
+    Logger.logDebug("getAsyncOrgConfig: Starting GraphQL config fetch");
+    await GraphQLConfigService.fetchAndSetGraphQLConfig(atomStore);
+    Logger.logDebug(
+      "getAsyncOrgConfig: GraphQL config fetch completed successfully"
+    );
+
+    // Get the GraphQL config data that was just fetched and stored in atoms
+    // Note: colorsConfigAtom is async, so we need to await it
+    const colorsConfig = await atomStore.get(colorsConfigAtom);
+    const frontendConfig = atomStore.get(frontendConfigAtom);
+
+    // Merge the GraphQL config data into the orgConfig
+    const enhancedOrgConfig = {
+      ...orgConfig,
+      colorsConfig,
+      frontendConfig,
+    };
+
+    Logger.logDebug("getAsyncOrgConfig: Enhanced orgConfig with GraphQL data", {
+      hasColorsConfig: !!colorsConfig,
+      hasFrontendConfig: !!frontendConfig,
+      frontendConfigKeys: frontendConfig ? Object.keys(frontendConfig) : [],
+    });
+
+    return enhancedOrgConfig;
+  } catch (graphqlError) {
+    Logger.logError(
+      "getAsyncOrgConfig: GraphQL config fetch failed",
+      graphqlError
+    );
+    // Don't throw here - the main org config is still valid even if GraphQL config fails
+    return orgConfig;
+  }
 };

package/src/atoms/org/orgPageConfig.ts

@@ -1,14 +1,17 @@
-import { atom } from 'jotai';
-import { getOrgInfo } from 'src/application/models';
-import { frontendConfigAtom } from 'src/atoms/org/graphqlConfig';
-import { orgConfigAtom } from 'src/atoms/org/org';
-import { PageVariantConfig } from 'src/contexts/types';
+import { atom } from "jotai";
+import { getOrgInfo } from "src/application/models";
+import { frontendConfigAtom } from "src/atoms/org/graphqlConfig";
+import { orgConfigAtom } from "src/atoms/org/org";
+import { PageVariantConfig } from "src/contexts/types";
 
 const internalInjectedPageVariantsAtom = atom<PageVariantConfig[]>([]);
 
 export const orgPageConfigAtom = atom(
   async (get) => {
     const orgConfig = get(orgConfigAtom);
+    if (!orgConfig) {
+      throw new Error("orgConfig is not available");
+    }
     const orgInfo = await getOrgInfo(orgConfig.org.org.shortName);
     const frontendConfig = get(frontendConfigAtom);
     const injectedPageVariants = get(internalInjectedPageVariantsAtom);
@@ -34,5 +37,5 @@ export const orgPageConfigAtom = atom(
   },
   (_, set, pageVariants: PageVariantConfig[]) => {
     set(internalInjectedPageVariantsAtom, pageVariants);
-  },
+  }
 );

package/src/atoms/org/orgUIConfig.ts

@@ -28,11 +28,7 @@ const internalOrgUIConfigAtom = atom<OrgUIConfig | undefined>(undefined);
 export const orgUIConfigAtom = atom(
   (get) => {
     const orgUIConfig = get(internalOrgUIConfigAtom);
-    if (orgUIConfig) {
-      return orgUIConfig;
-    }
-
-    throw new Error("OrgUIConfig is referenced before it is set");
+    return orgUIConfig; // Return undefined if not set instead of throwing
   },
   (_, set, value: OrgUIConfig) => {
     set(internalOrgUIConfigAtom, value);
@@ -45,9 +41,22 @@ export const getOrgUIConfig = async (
 ) => {
   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 localOrgUIConfig = orgInfo.orgUIConfig() ?? {};
+
   const featureFlagService = atomStore.get(featureFlagServiceAtom);
+  if (!featureFlagService) {
+    Logger.logWarn(
+      "featureFlagService is undefined, cannot get feature flags",
+      undefined
+    );
+    return;
+  }
+
   const isNewFeatureEnabled = featureFlagService.isFeatureGateEnabled(
     FeatureGates.IsNewFeatureEnabled
   );
@@ -65,6 +74,7 @@ export const getOrgUIConfig = async (
       FeatureGates.IsGraphQLComponentConfigsEnabled
     );
 
+  const localOrgUIConfig = orgInfo.orgUIConfig();
   let orgUIConfig: Partial<OrgUIConfig> = { ...localOrgUIConfig };
 
   if (isGraphQLUIConfigsEnabled && graphqlMerchantOverrideCss) {
@@ -120,10 +130,13 @@ export const getOrgUIConfig = async (
 };
 
 export const orgCustomerServiceConfig = atom(
-  (get) => get(orgUIConfigAtom).customerServiceIntegration
+  (get) => get(orgUIConfigAtom)?.customerServiceIntegration
 );
 
 export const orgCustomerServiceService = atom((get) => {
-  const { provider } = get(orgCustomerServiceConfig);
-  return findCustomerServiceImpl(provider);
+  const config = get(orgCustomerServiceConfig);
+  if (!config?.provider) {
+    return undefined;
+  }
+  return findCustomerServiceImpl(config.provider);
 });