@envive-ai/react-hooks 0.1.2 → 0.1.4

package/src/application/models/validators/validateGraphQLColorsConfig.ts

@@ -1,29 +1,31 @@
-import { ColorMapping, ColorNames } from 'src/application/models/colorsConfig';
-import { isGraphQLColorsConfig } from 'src/application/models/guards/graphQL/isGraphQLColorsConfig';
+import { ColorMapping, ColorNames } from "src/application/models/colorsConfig";
+import { isGraphQLColorsConfig } from "src/application/models/guards/graphQL/isGraphQLColorsConfig";
 
-export const validateGraphQLColorsConfig = (data: unknown): ColorMapping | undefined => {
+export const validateGraphQLColorsConfig = (
+  data: unknown
+): ColorMapping | undefined => {
   if (!isGraphQLColorsConfig(data)) {
     return undefined;
   }
 
   return {
-    [ColorNames.TextPrimary]: data.text_primary,
-    [ColorNames.TextSecondary]: data.text_secondary,
-    [ColorNames.TextAccent]: data.text_accent,
-    [ColorNames.TextLink]: data.text_link,
-    [ColorNames.TextLight]: data.text_light,
-    [ColorNames.BackgroundPrimary]: data.background_primary,
-    [ColorNames.BackgroundSecondary]: data.background_secondary,
-    [ColorNames.BackgroundSecondaryDark]: data.background_secondary_dark,
-    [ColorNames.BackgroundTertiary]: data.background_tertiary,
-    [ColorNames.BackgroundDark]: data.background_dark,
-    [ColorNames.BorderLight]: data.border_light,
-    [ColorNames.BorderMedium]: data.border_medium,
-    [ColorNames.BorderDark]: data.border_dark,
-    [ColorNames.BorderOutline]: data.border_outline,
-    [ColorNames.AccentPrimary]: data.accent_primary,
-    [ColorNames.AccentSecondary]: data.accent_secondary,
-    [ColorNames.BackgroundLight]: data.background_light,
-    [ColorNames.BackgroundSaturated]: data.background_saturated,
+    [ColorNames.TextPrimary]: "#000000",
+    [ColorNames.TextSecondary]: "#666666",
+    [ColorNames.TextAccent]: "#808080",
+    [ColorNames.TextLink]: "#4D4D4D",
+    [ColorNames.TextLight]: "#FFFFFF",
+    [ColorNames.BackgroundPrimary]: "#999999",
+    [ColorNames.BackgroundSecondary]: "#F2F2F2",
+    [ColorNames.BackgroundSecondaryDark]: "#E5E5E5",
+    [ColorNames.BackgroundTertiary]: "#E5E5E5",
+    [ColorNames.BackgroundDark]: "#000000",
+    [ColorNames.BackgroundLight]: "#FFFFFF",
+    [ColorNames.BackgroundSaturated]: "#CCCCCC",
+    [ColorNames.BorderLight]: "#E5E5E5",
+    [ColorNames.BorderMedium]: "#B2B2B2",
+    [ColorNames.BorderDark]: "#4D4D4D",
+    [ColorNames.BorderOutline]: "#4D4D4D",
+    [ColorNames.AccentPrimary]: "#999999",
+    [ColorNames.AccentSecondary]: "#B2B2B2",
   };
 };

package/src/application/service/cdnService.ts

@@ -1,8 +1,10 @@
-import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+import { getAtomStore } from "src/atoms/atomStore";
+import { cdnUrlAtom } from "src/atoms/envive/enviveConfig";
 
 class CdnService {
   static get CDN_URL() {
-    const { cdnUrl } = useEnviveConfig();
+    const atomStore = getAtomStore();
+    const cdnUrl = atomStore.get(cdnUrlAtom);
     return cdnUrl || "https://cdn.spiffy.ai/other";
   }
 

package/src/application/service/index.ts

@@ -2,7 +2,6 @@
 export * from "./cachingService";
 export * from "./cdnService";
 export * from "./domMutationObserver";
-export * from "./environmentService";
 export * from "./featureFlagService";
 export * from "./kustomerIntegrationService";
 export * from "./localStorageService";

package/src/application/service/pageVariantService.ts

@@ -34,7 +34,6 @@ import {
   UrlResolvingPDPConfig,
   UrlResolvingPLPConfig,
 } from "src/atoms/app/variant";
-import { tellExtensionAboutInjectionError } from "src/extension";
 import { chatAtom, lastAssistantMessageAtom } from "src/atoms/chat";
 import { StringUtils } from "../utils/stringUtils";
 
@@ -339,7 +338,7 @@ class PageVariantService {
     const atomStore = getAtomStore();
     const featureFlagService = atomStore.get(featureFlagServiceAtom);
 
-    return featureFlagService.isFeatureGateEnabled(featureGate);
+    return featureFlagService?.isFeatureGateEnabled(featureGate) || false;
   }
 
   static getCategory(extractor: CategoryExtractor): PageVisitCategory | null {
@@ -654,9 +653,10 @@ class PageVariantService {
       undefined,
       orgPageConfig.pageVariants
     );
-    await tellExtensionAboutInjectionError(
-      new Error("No pagevariantConfig matched")
-    );
+    // TODO: remove or enable if we decide to support injection in this repo.
+    // await tellExtensionAboutInjectionError(
+    //   new Error("No pagevariantConfig matched")
+    // );
 
     return undefined;
   };

package/src/application/service/searchService.ts

@@ -11,7 +11,7 @@ import Logger from "src/application/logging/logger";
 import { SessionRestartRequired } from "src/adapters/spiffy/commerce/exceptions/sessionExceptions";
 import { UnsupportedProductException } from "src/adapters/spiffy/commerce/exceptions/unsupportedProductExceptions";
 import { SearchResult, SearchParams } from "../models/api/search";
-import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+import { baseUrlAtom } from "src/atoms/envive/enviveConfig";
 
 const transformProductResponses = (products: SearchResult["products"]) =>
   products.map((data) => ({
@@ -80,13 +80,20 @@ class SearchService {
     if (!SearchService.instance) {
       const atomStore = getAtomStore();
       const apiKey = atomStore.get(apiKeyAtom);
+      if (!apiKey) {
+        throw new Error(
+          "[spiffy-ai] SearchService requires apiKey to be available"
+        );
+      }
       SearchService.instance = new SearchService(apiKey);
     }
     return SearchService.instance;
   };
 
   private constructor(apiKey: string, basePath?: string) {
-    const { baseUrl } = useEnviveConfig();
+    const atomStore = getAtomStore();
+
+    const baseUrl = atomStore.get(baseUrlAtom);
     const path = basePath || baseUrl;
     const config: Configuration = new Configuration({
       accessToken: apiKey,

package/src/application/service/windowChatToggleService.ts

@@ -1,12 +1,13 @@
-import { useSetAtom } from 'jotai';
-import { useEffect, useRef } from 'react';
-import { Message, MessageRole, MessageType } from 'src/application/models';
-import { EnvironmentService } from 'src/application/service/environmentService';
-import { handleReplyAtom } from 'src/atoms/chat';
-import { useChatToggle } from 'src/hooks';
-import { v4 as uuid } from 'uuid';
-import Logger from '../logging/logger';
-import { ChatElementDisplayLocation } from '../models/chatElementDisplayLocation';
+import { useSetAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { Message, MessageRole, MessageType } from "src/application/models";
+import { handleReplyAtom } from "src/atoms/chat";
+import { useChatToggle } from "src/hooks";
+import { v4 as uuid } from "uuid";
+import Logger from "../logging/logger";
+import { ChatElementDisplayLocation } from "../models/chatElementDisplayLocation";
+import { getAtomStore } from "src/atoms/atomStore";
+import { identifyingPrefixAtom } from "src/atoms/envive/enviveConfig";
 
 let hasAttachedEnviveChatToggle = false;
 
@@ -20,13 +21,17 @@ export const WindowChatToggleBinder = () => {
   const closeChatRef = useRef<(triggerId?: string) => void>();
   const toggleChatRef = useRef<(triggerId?: string) => void>();
   const isOpenRef = useRef<boolean>(hook.isOpen);
-  const openChatWithPromptRef = useRef<(prompt: string, triggerId?: string) => void>();
+  const openChatWithPromptRef =
+    useRef<(prompt: string, triggerId?: string) => void>();
 
   // Keep refs up to date with latest hook/state
   useEffect(() => {
-    openChatRef.current = (triggerId?: string) => hook.openChat(triggerLocation, triggerId);
-    closeChatRef.current = (triggerId?: string) => hook.closeChat(triggerLocation, triggerId);
-    toggleChatRef.current = (triggerId?: string) => hook.toggle(triggerLocation, triggerId);
+    openChatRef.current = (triggerId?: string) =>
+      hook.openChat(triggerLocation, triggerId);
+    closeChatRef.current = (triggerId?: string) =>
+      hook.closeChat(triggerLocation, triggerId);
+    toggleChatRef.current = (triggerId?: string) =>
+      hook.toggle(triggerLocation, triggerId);
     isOpenRef.current = hook.isOpen;
     openChatWithPromptRef.current = (prompt: string, triggerId?: string) => {
       const message: Message = {
@@ -46,24 +51,28 @@ export const WindowChatToggleBinder = () => {
   // Attach once; wrapper functions call through to refs
   useEffect(() => {
     if (hasAttachedEnviveChatToggle) return;
-    const identifyingPrefix = EnvironmentService.getIdentifyingPrefix();
+    const atomStore = getAtomStore();
+    const identifyingPrefix = atomStore.get(identifyingPrefixAtom);
     try {
       if (!window[identifyingPrefix]) {
         window[identifyingPrefix] = {} as Window[typeof identifyingPrefix];
       }
-      window[identifyingPrefix].openChat = (triggerId?: string) => openChatRef.current?.(triggerId);
+      window[identifyingPrefix].openChat = (triggerId?: string) =>
+        openChatRef.current?.(triggerId);
       window[identifyingPrefix].closeChat = (triggerId?: string) =>
         closeChatRef.current?.(triggerId);
       window[identifyingPrefix].toggleChat = (triggerId?: string) =>
         toggleChatRef.current?.(triggerId);
       window[identifyingPrefix].getChatIsOpen = () => !!isOpenRef.current;
-      window[identifyingPrefix].openChatWithPrompt = (prompt: string, triggerId?: string) =>
-        openChatWithPromptRef.current?.(prompt, triggerId);
+      window[identifyingPrefix].openChatWithPrompt = (
+        prompt: string,
+        triggerId?: string
+      ) => openChatWithPromptRef.current?.(prompt, triggerId);
 
-      Logger.logDebug('[spiffy-ai] Chat toggle functions attached');
+      Logger.logDebug("[spiffy-ai] Chat toggle functions attached");
       hasAttachedEnviveChatToggle = true;
     } catch (e) {
-      Logger.logError('[spiffy-ai] Failed to attach Chat toggle functions', e);
+      Logger.logError("[spiffy-ai] Failed to attach Chat toggle functions", e);
     }
   }, []);
 

package/src/application/service/windowFrontendConfigService.ts

@@ -1,7 +1,7 @@
 import Logger from "src/application/logging/logger";
-import { EnvironmentService } from "src/application/service/environmentService";
 import { applyOverrides, Override } from "src/application/utils/overrides";
 import { getAtomStore } from "src/atoms/atomStore/atomStore";
+import { identifyingPrefixAtom } from "src/atoms/envive/enviveConfig";
 import {
   colorsConfigAtom,
   frontendConfigAtom,
@@ -16,7 +16,7 @@ import {
 } from "src/contexts/types";
 
 type CustomizableFrontendConfig = {
-  orgUIConfig: OrgUIConfig;
+  orgUIConfig: OrgUIConfig | undefined;
   colorsConfig: ColorMapping;
   mountingConfigs: Record<string, WidgetMountingConfig>;
   widgetConfigs: Record<string, WidgetConfig>;
@@ -40,7 +40,8 @@ class WindowFrontendConfigService {
     this.isInitialized = true;
 
     try {
-      const identifyingPrefix = EnvironmentService.getIdentifyingPrefix();
+      const atomStore = getAtomStore();
+      const identifyingPrefix = atomStore.get(identifyingPrefixAtom);
       if (!window[identifyingPrefix]) {
         window[identifyingPrefix] = {} as Window[typeof identifyingPrefix];
       }
@@ -99,7 +100,9 @@ class WindowFrontendConfigService {
       }
 
       // Update the atoms with the new frontend config(s)
-      atomStore.set(orgUIConfigAtom, currentConfig.orgUIConfig);
+      if (currentConfig.orgUIConfig) {
+        atomStore.set(orgUIConfigAtom, currentConfig.orgUIConfig);
+      }
       atomStore.set(colorsConfigAtom, currentConfig.colorsConfig);
       // Write to the frontendConfigAtom to update the mountingConfigs and widgetConfigs
       // This is the only way to update the mountingConfigs and widgetConfigs

package/src/atoms/app/index.ts

@@ -1,11 +1,15 @@
-import { ContextEnvEnum, ContextSourceEnum } from '@spiffy-ai/commerce-api-client';
-import { atom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
-import { VariantInfo } from 'src/application/models';
-import { UserIdentityService } from 'src/application/service/userIdentityService';
-import { variantInfoAtom } from 'src/atoms/app/variant';
-import { orgIdAtom, orgShortNameAtom, sourceAtom } from 'src/atoms/org/org';
-import { v4 as uuid } from 'uuid';
+import {
+  ContextEnvEnum,
+  ContextSourceEnum,
+} from "@spiffy-ai/commerce-api-client";
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { VariantInfo } from "src/application/models";
+import { UserIdentityService } from "src/application/service/userIdentityService";
+import { variantInfoAtom } from "src/atoms/app/variant";
+import { orgIdAtom, orgShortNameAtom } from "src/atoms/org/org";
+import { v4 as uuid } from "uuid";
+import { contextSourceAtom } from "../envive/enviveConfig";
 
 export interface AppDetails {
   orgId: string;
@@ -17,7 +21,7 @@ export interface AppDetails {
   variantInfo: VariantInfo;
 }
 
-export { variantInfoAtom } from './variant';
+export { variantInfoAtom } from "./variant";
 
 const internalUserIdAtom = atom<string | undefined>(undefined);
 
@@ -33,25 +37,30 @@ export const userIdAtom = atom(
   },
   (_, set, value: string | undefined) => {
     set(internalUserIdAtom, value);
-  },
+  }
 );
 export const appSourceAtom = atom<ContextSourceEnum>(
-  (get): ContextSourceEnum => get(sourceAtom) ?? ContextSourceEnum.App,
+  (get): ContextSourceEnum => get(contextSourceAtom) ?? ContextSourceEnum.App
 );
 export const envAtom = atom<ContextEnvEnum>(ContextEnvEnum.Dev);
-export const chatIdAtom = atomWithStorage<string>('v1-spiffy-chat-session-id', uuid(), undefined, {
-  getOnInit: true,
-});
+export const chatIdAtom = atomWithStorage<string>(
+  "v1-spiffy-chat-session-id",
+  uuid(),
+  undefined,
+  {
+    getOnInit: true,
+  }
+);
 
 export const appDetailsAtom = atom(
   (get): AppDetails => ({
-    orgId: get(orgIdAtom),
+    orgId: get(orgIdAtom) ?? "",
     // TODO: orgShortName should be available when this atom is created
-    orgShortName: get(orgShortNameAtom) ?? 'spiffy-ai',
+    orgShortName: get(orgShortNameAtom) ?? "spiffy-ai",
     chatId: get(chatIdAtom),
     userId: get(userIdAtom),
     source: get(appSourceAtom),
     env: get(envAtom),
     variantInfo: get(variantInfoAtom),
-  }),
+  })
 );

package/src/atoms/app/variant.ts

@@ -174,6 +174,7 @@ export const supportedEventAtom = atom(
 
     // TODO: clean up this logic & the feature gate when we've fully rolled out
     if (
+      featureFlagService &&
       !featureFlagService.isFeatureGateEnabled(
         FeatureGates.IsNonShapewearEnabled
       ) &&

package/src/atoms/chat/messageQueue.ts

@@ -71,7 +71,7 @@ export const createResponsePayload = ({
   const atomStore = getAtomStore();
   const context = atomStore.get(appDetailsAtom);
   const featureFlagService = atomStore.get(featureFlagServiceAtom);
-  const featureFlags = featureFlagService.getFeatureFlags();
+  const featureFlags = featureFlagService?.getFeatureFlags() || {};
   return {
     id: uuid(),
     context,

package/src/atoms/envive/enviveConfig.ts

@@ -0,0 +1,81 @@
+import Logger from "src/application/logging/logger";
+import { atom } from "jotai";
+import { EnviveConfig } from "src/contexts/types";
+import { ContextSourceEnum } from "@spiffy-ai/commerce-api-client";
+import { LocalStorageService } from "src/application/service";
+
+const internalEnviveConfigAtom = atom<EnviveConfig | undefined>(undefined);
+
+export const enviveConfigAtom = atom(
+  (get) => {
+    const config = get(internalEnviveConfigAtom);
+    Logger.logDebug(
+      "enviveConfig.ts: Accessing internalEnviveConfigAtom",
+      config
+    );
+    return config; // Return undefined if not set instead of throwing
+  },
+  (_, set, value: EnviveConfig) => {
+    set(internalEnviveConfigAtom, value);
+  }
+);
+
+export const amplitudeApiKeyAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  return config?.amplitudeApiKey;
+});
+export const dataResidencyAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  return config?.dataResidency;
+});
+export const envAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  return config?.env;
+});
+export const baseUrlAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  return config?.baseUrl || "https://commerce-api.dev.spiffy.ai";
+});
+export const reactAppNameAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  return config?.reactAppName;
+});
+export const cdnUrlAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  return config?.cdnUrl;
+});
+
+export const contextSourceAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+
+  if (window.IS_STORYBOOK) {
+    return ContextSourceEnum.Test;
+  }
+
+  if (config?.contextSource) {
+    return config.contextSource as ContextSourceEnum;
+  }
+
+  const spiffyOnFeatureFlagSet = LocalStorageService.getSpiffyOnFeatureFlag();
+  if (spiffyOnFeatureFlagSet === "true") {
+    return ContextSourceEnum.Playground;
+  }
+
+  return ContextSourceEnum.App;
+});
+
+export const orgLevelApiKeyAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  Logger.logDebug("enviveConfig.ts: Accessing orgLevelApiKey", config);
+  return config?.orgLevelApiKey;
+});
+export const orgShortNameAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  Logger.logDebug("enviveConfig.ts: Accessing orgShortName", config);
+  return config?.orgShortName;
+});
+export const identifyingPrefixAtom = atom((get) => {
+  const config = get(enviveConfigAtom);
+  Logger.logDebug("enviveConfig.ts: Accessing identifyingPrefix", config);
+  return config?.identifyingPrefix || "spiffy";
+});

package/src/atoms/org/graphqlConfig.ts

@@ -1,27 +1,45 @@
-import { atom } from 'jotai';
-import { ColorMapping } from 'src/application/models/colorsConfig';
-import { FrontendConfig } from 'src/application/models/frontendConfig';
-import { getOrgInfo } from 'src/application/models/supportedOrgs';
-import { orgShortNameAtom } from 'src/atoms/org/org';
+import { atom } from "jotai";
+import { ColorMapping } from "src/application/models/colorsConfig";
+import { FrontendConfig } from "src/application/models/frontendConfig";
+import { getOrgInfo } from "src/application/models/supportedOrgs";
+import { orgShortNameAtom } from "src/atoms/org/org";
 
-const internalGraphQLColorsConfigAtom = atom<ColorMapping | undefined>(undefined);
-const internalGraphQLFrontendConfigAtom = atom<FrontendConfig | undefined>(undefined);
+const internalGraphQLColorsConfigAtom = atom<ColorMapping | undefined>(
+  undefined
+);
+const internalGraphQLFrontendConfigAtom = atom<FrontendConfig | undefined>(
+  undefined
+);
 
 export const colorsConfigAtom = atom(
   async (get) => {
     const colors = get(internalGraphQLColorsConfigAtom);
-    const orgInfo = await getOrgInfo(get(orgShortNameAtom));
+    const orgShortName = get(orgShortNameAtom);
+    if (!orgShortName) {
+      return colors;
+    }
+    const orgInfo = await getOrgInfo(orgShortName);
     const orgUIConfigColors = orgInfo.orgColors();
-    return { ...orgUIConfigColors, ...colors };
+
+    // Only merge if orgUIConfigColors is a proper ColorMapping, not an empty object
+    if (
+      colors &&
+      orgUIConfigColors &&
+      Object.keys(orgUIConfigColors).length > 0
+    ) {
+      return { ...orgUIConfigColors, ...colors } as ColorMapping;
+    }
+
+    return colors;
   },
   (_, set, value: ColorMapping | undefined) => {
     set(internalGraphQLColorsConfigAtom, value);
-  },
+  }
 );
 
 export const frontendConfigAtom = atom(
   (get) => get(internalGraphQLFrontendConfigAtom),
   (_, set, value: FrontendConfig | undefined) => {
     set(internalGraphQLFrontendConfigAtom, value);
-  },
+  }
 );

package/src/atoms/org/merchantCss.ts

@@ -3,11 +3,125 @@ import { ColorNames } from "src/contexts/types";
 import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
 import { colorsConfigAtom } 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 merchantThemeCss = colors
     ? `
+${tailwindStyles}
 
 * {
   --spiffy-colors-text-primary: ${colors[ColorNames.TextPrimary]};