@envive-ai/react-hooks 0.1.4 → 0.1.5

package/src/atoms/org/org.ts

@@ -4,7 +4,6 @@ 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 { FeatureFlagService } from "src/application/service/featureFlagService";
 import { UserIdentityService } from "src/application/service/userIdentityService";
@@ -12,7 +11,7 @@ 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 { GraphQLConfigService } from "src/application/service/graphqlConfigService";
 import {
   orgLevelApiKeyAtom,
   orgShortNameAtom as enviveOrgShortNameAtom,
@@ -146,45 +145,6 @@ export const resetStoredOrgConfigAtom = () => {
   atomStore.set(storedOrgConfigAtom, {});
 };
 
-// eslint-disable-next-line
-const getGraphQLConfig = async (atomStore: AtomStore) => {
-  try {
-    Logger.logDebug("getGraphQLConfig: Starting GraphQL client fetch");
-    const { colorsConfig, frontendConfig } =
-      (await GraphQLClient.getColorsAndFrontendConfig()) ?? {};
-
-    Logger.logDebug("getGraphQLConfig: GraphQL fetch completed", {
-      hasColorsConfig: !!colorsConfig,
-      hasFrontendConfig: !!frontendConfig,
-      frontendConfigKeys: frontendConfig ? Object.keys(frontendConfig) : [],
-    });
-
-    const rawFrontendConfig = atomStore.get(frontendConfigAtom);
-
-    atomStore.set(colorsConfigAtom, colorsConfig);
-
-    atomStore.set(frontendConfigAtom, {
-      ...rawFrontendConfig,
-      pageVariants: frontendConfig?.pageVariants,
-      mountingConfigs: frontendConfig?.mountingConfigs,
-      widgetConfigs: frontendConfig?.widgetConfigs,
-    });
-
-    Logger.logDebug("getGraphQLConfig: Starting UI config fetch");
-    await getOrgUIConfig(
-      frontendConfig?.uiConfigs,
-      frontendConfig?.merchantOverrideCss
-    );
-    Logger.logDebug("getGraphQLConfig: UI config fetch completed");
-  } catch (error) {
-    Logger.logError(
-      "getGraphQLConfig: Error during GraphQL config fetch",
-      error
-    );
-    throw error; // Re-throw to be caught by the caller
-  }
-};
-
 /**
  * This function is used to return an orgConfig corresponding to a given API key
  *
@@ -256,7 +216,7 @@ export const getAsyncOrgConfig = async (
 
   try {
     Logger.logDebug("getAsyncOrgConfig: Starting GraphQL config fetch");
-    await getGraphQLConfig(atomStore);
+    await GraphQLConfigService.fetchAndSetGraphQLConfig(atomStore);
     Logger.logDebug(
       "getAsyncOrgConfig: GraphQL config fetch completed successfully"
     );

package/src/atoms/search/searchAPI.ts

@@ -1,10 +1,10 @@
-import { atom } from 'jotai';
-import { SearchResult, SearchParams } from 'src/application/models/api/search';
-import SearchService from 'src/application/service/searchService';
-import { ProductSorting } from './types';
-import { ProductFilters } from './productFilters';
-import { ProductSorter } from './productSorter';
-import { orgUIConfigAtom } from '../org';
+import { atom } from "jotai";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+import SearchService from "src/application/service/searchService";
+import { ProductSorting } from "./types";
+import { ProductFilters } from "./productFilters";
+import { ProductSorter } from "./productSorter";
+import { orgUIConfigAtom } from "../org";
 
 export type SelectedFilterOption = {
   id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
@@ -27,13 +27,15 @@ export const searchAtom = atom<SearchState>({
   lastQuery: null,
 });
 
-export const searchProductSortingAtom = atom<ProductSorting>(ProductSorting.FEATURED);
+export const searchProductSortingAtom = atom<ProductSorting>(
+  ProductSorting.FEATURED
+);
 export const searchSelectedFiltersAtom = atom<SelectedFilterOption[]>([]);
 
 export const createFilterOption = (
   filterId: string,
   filterItemId: string,
-  displayName: string,
+  displayName: string
 ): SelectedFilterOption => ({
   id: `${filterId}:${filterItemId}`,
   displayName,
@@ -53,7 +55,7 @@ export const searchParamsAtom = atom(
   (get) => get(internalSearchParamsAtom),
   (_, set, value: { id: string | null; query: string | null }) => {
     set(internalSearchParamsAtom, value);
-  },
+  }
 );
 export const internalSearchSystemStateAtom = atom<boolean>(false);
 
@@ -65,9 +67,9 @@ export const searchSystemAtom = atom(
     }
     const stateChangeHandler = () => {
       const params = new URLSearchParams(window.location.search);
-      if (params.get('es') === 'true') {
-        const id = params.get('esi');
-        const query = params.get('esq');
+      if (params.get("es") === "true") {
+        const id = params.get("esi");
+        const query = params.get("esq");
         set(searchParamsAtom, { id, query });
       } else {
         set(searchParamsAtom, { id: null, query: null });
@@ -75,14 +77,14 @@ export const searchSystemAtom = atom(
     };
     if (value) {
       set(internalSearchSystemStateAtom, true);
-      window.addEventListener('popstate', stateChangeHandler);
+      window.addEventListener("popstate", stateChangeHandler);
       // Also trigger the hash change handler to set the initial state
       stateChangeHandler();
     } else {
       set(internalSearchSystemStateAtom, false);
-      window.removeEventListener('popstate', stateChangeHandler);
+      window.removeEventListener("popstate", stateChangeHandler);
     }
-  },
+  }
 );
 
 export const filteredSearchProductsAtom = atom((get) => {
@@ -91,13 +93,13 @@ export const filteredSearchProductsAtom = atom((get) => {
   const selectedFilters = get(searchSelectedFiltersAtom);
   const orgConfig = get(orgUIConfigAtom);
 
-  if (!searchData?.products) return [];
+  if (!searchData?.products || !orgConfig?.searchConfig) return [];
 
   const filteredProducts = ProductFilters.filterProducts(
     searchData.products,
     orgConfig.searchConfig.searchFilterConfig,
     selectedFilters,
-    orgConfig.searchConfig.additiveDynamicFilters,
+    orgConfig.searchConfig.additiveDynamicFilters
   );
 
   return ProductSorter.sort(filteredProducts, sorting);
@@ -108,29 +110,35 @@ export const searchFiltersAtom = atom((get) => {
   const selectedFilters = get(searchSelectedFiltersAtom);
   const orgConfig = get(orgUIConfigAtom);
 
-  if (!searchData?.products) return [];
+  if (!searchData?.products || !orgConfig?.searchConfig) return [];
 
   return ProductFilters.getFiltersForProducts(
     searchData.products,
     orgConfig.searchConfig.searchFilterConfig,
-    selectedFilters,
+    selectedFilters
   );
 });
 
-export const addSearchFilterAtom = atom(null, (get, set, filter: SelectedFilterOption) => {
-  const current = get(searchSelectedFiltersAtom);
-  if (!current.some((f) => f.id === filter.id)) {
-    set(searchSelectedFiltersAtom, [...current, filter]);
+export const addSearchFilterAtom = atom(
+  null,
+  (get, set, filter: SelectedFilterOption) => {
+    const current = get(searchSelectedFiltersAtom);
+    if (!current.some((f) => f.id === filter.id)) {
+      set(searchSelectedFiltersAtom, [...current, filter]);
+    }
   }
-});
+);
 
-export const removeSearchFilterAtom = atom(null, (get, set, filterId: string) => {
-  const current = get(searchSelectedFiltersAtom);
-  set(
-    searchSelectedFiltersAtom,
-    current.filter((f) => f.id !== filterId),
-  );
-});
+export const removeSearchFilterAtom = atom(
+  null,
+  (get, set, filterId: string) => {
+    const current = get(searchSelectedFiltersAtom);
+    set(
+      searchSelectedFiltersAtom,
+      current.filter((f) => f.id !== filterId)
+    );
+  }
+);
 
 export const clearSearchFiltersAtom = atom(null, (_, set) => {
   set(searchSelectedFiltersAtom, []);
@@ -141,28 +149,29 @@ export const performSearchAtom = atom(
   async (get, set, params: SearchParams, allowRedirect = false) => {
     const currentState = get(searchAtom);
     const orgUIConfig = get(orgUIConfigAtom);
-    const redirectSearchResultsUrl = orgUIConfig.searchConfig?.redirectSearchResultsUrl;
+    const redirectSearchResultsUrl =
+      orgUIConfig?.searchConfig?.redirectSearchResultsUrl;
 
     if (allowRedirect && redirectSearchResultsUrl) {
       const redirectUrl = new URL(redirectSearchResultsUrl);
-      redirectUrl.searchParams.set('es', 'true');
-      redirectUrl.searchParams.set('esq', params.query);
+      redirectUrl.searchParams.set("es", "true");
+      redirectUrl.searchParams.set("esq", params.query);
       window.location.href = redirectUrl.toString();
     } else {
       // Update URL and manually trigger state change (since pushState doesn't trigger popstate)
       const url = new URL(window.location.href);
-      url.searchParams.set('es', 'true');
-      url.searchParams.set('esq', params.query);
-      window.history.pushState({}, '', url);
+      url.searchParams.set("es", "true");
+      url.searchParams.set("esq", params.query);
+      window.history.pushState({}, "", url);
 
       // Manually trigger page variant re-evaluation by dispatching a popstate event
       // This ensures the page variant system detects the URL change and mounts search results
-      window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+      window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     }
 
     // Manually trigger page variant re-evaluation by dispatching a popstate event
     // This ensures the page variant system detects the URL change and mounts search results
-    window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     if (currentState.loading) {
       return; // Prevent concurrent searches
     }
@@ -182,7 +191,8 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     } catch (error: unknown) {
-      const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
       set(searchAtom, {
         data: null,
         loading: false,
@@ -190,5 +200,5 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     }
-  },
+  }
 );

package/src/hooks/index.ts

@@ -7,17 +7,15 @@ export * from "./useElementObserver";
 export * from "./useFileUpload";
 export * from "./useGrabAndScroll";
 export * from "./useHideElements";
-export * from "./useHorizontalScrollAnimation";
 export * from "./useImageResolver";
 export * from "./useIntersection";
 export * from "./useIsSmallScreen";
 export * from "./useMessageFilter";
 export * from "./useMessageScrollObserver";
-export * from "./useReducedMotionWithOverride";
 export * from "./useSearch";
 export * from "./useSnapCalculator";
-export * from "./useSnapControl";
 export * from "./useSystemSettingsContext";
 export * from "./useTrackComponentVisibleEvent";
 export * from "./useUpdateAnalyticsProps";
+export * from "./useNewOrgConfig";
 export * from "./utils";

package/src/hooks/useDynamicVariants.ts

@@ -1,16 +1,22 @@
-import Logger from 'src/application/logging/logger';
-import { useEffect, useRef, useCallback, useState } from 'react';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { variantInfoAtom } from 'src/atoms/app';
-import { PageVariantService } from 'src/application/service/pageVariantService';
-import { orgPageConfigAtom } from 'src/atoms/org/orgPageConfig';
-import { hasParsedVariantInfoAtom, supportedEventAtom } from 'src/atoms/app/variant';
-import { SpiffyMetricsEventName, AmplitudeAdapter } from 'src/adapters/amplitude';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
-import { createAppLoadedEvent, createVisitUserEvent } from 'src/hooks/utils';
-import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
-import { UserEvent } from 'src/application/models';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import Logger from "src/application/logging/logger";
+import { useEffect, useRef, useCallback, useState } from "react";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { variantInfoAtom } from "src/atoms/app";
+import { PageVariantService } from "src/application/service/pageVariantService";
+import { orgPageConfigAtom } from "src/atoms/org/orgPageConfig";
+import {
+  hasParsedVariantInfoAtom,
+  supportedEventAtom,
+} from "src/atoms/app/variant";
+import {
+  SpiffyMetricsEventName,
+  AmplitudeAdapter,
+} from "src/adapters/amplitude";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
+import { createAppLoadedEvent, createVisitUserEvent } from "src/hooks/utils";
+import { queueUserEventAtom } from "src/atoms/chat/messageQueue";
+import { UserEvent } from "src/application/models";
+import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
 
 // consider putting this in the org config
 const DEBOUNCE_DELAY_MS = 300;
@@ -26,7 +32,10 @@ const debounce = (func: () => void, delay: number): (() => void) => {
   };
 };
 
-const isUserEventEqual = (event1: UserEvent | null, event2: UserEvent | null) => {
+const isUserEventEqual = (
+  event1: UserEvent | null,
+  event2: UserEvent | null
+) => {
   if (!event1 || !event2) {
     return false;
   }
@@ -48,8 +57,8 @@ const isUserEventEqual = (event1: UserEvent | null, event2: UserEvent | null) =>
   if (
     event1.category === UserEventCategory.PlpVisit &&
     event2.category === UserEventCategory.PlpVisit &&
-    'id' in event1.attributes.attributes &&
-    'id' in event2.attributes.attributes
+    "id" in event1.attributes.attributes &&
+    "id" in event2.attributes.attributes
   ) {
     return event1.attributes.attributes.id === event2.attributes.attributes.id;
   }
@@ -68,14 +77,17 @@ export const useDynamicVariants = () => {
   const setVariantInfo = useSetAtom(variantInfoAtom);
   const setSupportedEvent = useSetAtom(supportedEventAtom);
   const queueUserEvent = useSetAtom(queueUserEventAtom);
-  const [mostRecentUserEvent, setMostRecentUserEvent] = useState<UserEvent | null>(null);
+  const [mostRecentUserEvent, setMostRecentUserEvent] =
+    useState<UserEvent | null>(null);
 
   const orgPageConfig = useAtomValue(orgPageConfigAtom);
   const debouncedFunc = useRef<(() => void) | null>(null);
   // we need to fetch org info before we can get the variant info. this prevents the rest of the application
   // logic from running before that happens. More specifically, we want to have all org and variant states
   // settled before mounting the ChatContextProvider which will start the session.
-  const [hasParsedVariantInfo, setHasParsedVariantInfo] = useAtom(hasParsedVariantInfoAtom);
+  const [hasParsedVariantInfo, setHasParsedVariantInfo] = useAtom(
+    hasParsedVariantInfoAtom
+  );
   const animationFrameRef = useRef<number | null>(null);
   const isBeforeUnload = useRef(false);
 
@@ -98,16 +110,17 @@ export const useDynamicVariants = () => {
 
     if (!orgPageConfig) {
       Logger.logWarn(
-        '[spiffy-ai] orgPageConfig not found. skipping page change handling',
-        undefined,
+        "[spiffy-ai] orgPageConfig not found. skipping page change handling",
+        undefined
       );
       return;
     }
 
-    const parsedVariantInfo = await PageVariantService.getVariantInfoWithPageConfig(orgPageConfig);
+    const parsedVariantInfo =
+      await PageVariantService.getVariantInfoWithPageConfig(orgPageConfig);
 
     if (parsedVariantInfo) {
-      Logger.logDebug('[spiffy-ai] variantInfo changed', parsedVariantInfo);
+      Logger.logDebug("[spiffy-ai] variantInfo changed", parsedVariantInfo);
       const [newVariantInfo, pageVariantConfig] = parsedVariantInfo;
 
       setVariantInfo(newVariantInfo);
@@ -120,8 +133,10 @@ export const useDynamicVariants = () => {
         queueUserEvent(visitEvent);
       }
 
-      const supportedEvent = await PageVariantService.checkSupportedEvent(pageVariantConfig);
-      console.log('useDynamicVariants - supportedEvent', supportedEvent);
+      const supportedEvent = await PageVariantService.checkSupportedEvent(
+        pageVariantConfig
+      );
+      console.log("useDynamicVariants - supportedEvent", supportedEvent);
       setSupportedEvent(supportedEvent);
       AmplitudeAdapter.trackEvent({
         eventName: SpiffyMetricsEventName.SupportedEvent,
@@ -164,14 +179,14 @@ export const useDynamicVariants = () => {
       isBeforeUnload.current = true;
     };
 
-    window.addEventListener('click', handleLocationChange);
-    window.addEventListener('popstate', handleLocationChange);
-    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener("click", handleLocationChange);
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("beforeunload", handleBeforeUnload);
 
     return () => {
-      window.removeEventListener('click', handleLocationChange);
-      window.removeEventListener('popstate', handleLocationChange);
-      window.removeEventListener('beforeunload', handleBeforeUnload);
+      window.removeEventListener("click", handleLocationChange);
+      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
       // TODO: this is causing the supportedEvent to be undefined for Magento customers
       // Why is unclear however...
       // setSupportedEvent(undefined);
@@ -191,10 +206,11 @@ export const useDynamicVariants = () => {
 
   useEffect(() => {
     let windowInterval: number | null = null;
-    const { merchantVariantSettings } = orgUIConfig;
+    const merchantVariantSettings = orgUIConfig?.merchantVariantSettings;
 
     if (merchantVariantSettings?.dynamicVariants?.enabled) {
-      const refreshInterval = merchantVariantSettings?.dynamicVariants?.refreshInterval;
+      const refreshInterval =
+        merchantVariantSettings?.dynamicVariants?.refreshInterval;
       windowInterval = window.setInterval(() => {
         handleLocationChange();
       }, refreshInterval);

package/src/hooks/useFileUpload.ts

@@ -13,7 +13,7 @@ export const useFileUpload = () => {
   const [error, setError] = useState("");
 
   const isValidFile = (file?: File) => {
-    const maxSize = customerServiceImpl.maxfileUploadSize;
+    const maxSize = customerServiceImpl?.maxfileUploadSize;
     if (maxSize && (file?.size || 0) > maxSize) {
       const strFileSize = `${(maxSize / 1000000).toFixed(1)}MB`;
       setError(`Exceeded file size of ${strFileSize}`);

package/src/hooks/useHideElements.ts

@@ -1,18 +1,19 @@
-import Logger from 'src/application/logging/logger';
-import { SelectorFactory } from 'src/application/utils/nodeSelector';
-import { useEffect, useRef, useState } from 'react';
-import { useAtomValue } from 'jotai';
-import { SpiffyEventName } from 'src/application/models/events';
-import { ElementObserver } from 'src/application/utils/elementObserver';
-import { DOMObserver } from 'src/application/utils/domObserver';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
+import Logger from "src/application/logging/logger";
+import { SelectorFactory } from "src/application/utils/nodeSelector";
+import { useEffect, useRef, useState } from "react";
+import { useAtomValue } from "jotai";
+import { SpiffyEventName } from "src/application/models/events";
+import { ElementObserver } from "src/application/utils/elementObserver";
+import { DOMObserver } from "src/application/utils/domObserver";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
 
 /**
  * This hook hides/shows elements that could overlap with the chat when the chat is opened/closed.
  */
 export const useHideElements = () => {
   const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const [hasRegisteredEventListeners, setHasRegisteredEventListeners] = useState(false);
+  const [hasRegisteredEventListeners, setHasRegisteredEventListeners] =
+    useState(false);
   const elementObservers = useRef<ElementObserver[]>([]);
 
   const hideElements = (elements: ElementObserver[]) => {
@@ -29,8 +30,10 @@ export const useHideElements = () => {
 
   useEffect(() => {
     elementObservers.current = [];
-    orgUIConfig.hiddenElementSelectors?.forEach((selector) => {
-      elementObservers.current.push(DOMObserver.add(SelectorFactory.query(selector)));
+    orgUIConfig?.hiddenElementSelectors?.forEach((selector) => {
+      elementObservers.current.push(
+        DOMObserver.add(SelectorFactory.query(selector))
+      );
     });
     // since we're not using useElementObserver, we need to manually start the observer
     elementObservers.current.forEach((element) => {
@@ -44,22 +47,22 @@ export const useHideElements = () => {
       });
       elementObservers.current = [];
     };
-  }, [orgUIConfig.hiddenElementSelectors]);
+  }, [orgUIConfig?.hiddenElementSelectors]);
 
   useEffect(() => {
     if (elementObservers.current.length > 0 && !hasRegisteredEventListeners) {
       Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetOpen} event for ${elementObservers.current.length} elements`,
+        `Registering ${SpiffyEventName.WidgetOpen} event for ${elementObservers.current.length} elements`
       );
       window.addEventListener(SpiffyEventName.WidgetOpen, () =>
-        hideElements(elementObservers.current),
+        hideElements(elementObservers.current)
       );
 
       Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetClose} event for ${elementObservers.current.length} elements`,
+        `Registering ${SpiffyEventName.WidgetClose} event for ${elementObservers.current.length} elements`
       );
       window.addEventListener(SpiffyEventName.WidgetClose, () =>
-        showElements(elementObservers.current),
+        showElements(elementObservers.current)
       );
 
       setHasRegisteredEventListeners(true);
@@ -68,11 +71,11 @@ export const useHideElements = () => {
     return () => {
       if (elementObservers.current.length > 0 && hasRegisteredEventListeners) {
         window.removeEventListener(SpiffyEventName.WidgetOpen, () =>
-          hideElements(elementObservers.current),
+          hideElements(elementObservers.current)
         );
 
         window.removeEventListener(SpiffyEventName.WidgetClose, () =>
-          showElements(elementObservers.current),
+          showElements(elementObservers.current)
         );
 
         setHasRegisteredEventListeners(false);

package/src/hooks/useImageResolver.ts

@@ -1,6 +1,6 @@
-import { useAtomValue } from 'jotai';
-import { OrgShortName } from 'src/application/models';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
+import { useAtomValue } from "jotai";
+import { OrgShortName } from "src/application/models";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
 
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
@@ -12,8 +12,14 @@ class MerchantImageResolver {
   private static loadMapping() {
     if (this.imageResolverMap.size === 0) {
       this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
-      this.imageResolverMap.set(OrgShortName.SpanxStaging, new ShopifyImageResolver());
-      this.imageResolverMap.set(OrgShortName.UniqueVintage, new ShopifyImageResolver());
+      this.imageResolverMap.set(
+        OrgShortName.SpanxStaging,
+        new ShopifyImageResolver()
+      );
+      this.imageResolverMap.set(
+        OrgShortName.UniqueVintage,
+        new ShopifyImageResolver()
+      );
     }
     return this.imageResolverMap;
   }
@@ -31,15 +37,17 @@ class ShopifyImageResolver extends ImageResolver {
     if (urlHasPrefix) {
       return url.replace(pattern, newSizePrefix);
     }
-    return url.replace('.jpg', newSizePrefix);
+    return url.replace(".jpg", newSizePrefix);
   }
 }
 
 export const useImageResolver = () => {
   const orgUIConfig = useAtomValue(orgUIConfigAtom);
   const resolve = (image?: string, size?: number) => {
-    if (image && size) {
-      const newImagePath = MerchantImageResolver.get(orgUIConfig.shortName)?.resolve(image, size);
+    if (image && size && orgUIConfig?.shortName) {
+      const newImagePath = MerchantImageResolver.get(
+        orgUIConfig.shortName
+      )?.resolve(image, size);
       return newImagePath || image;
     }
     return image;

package/src/hooks/useNewOrgConfig.ts

@@ -0,0 +1,80 @@
+import { GraphQLClient } from "src/adapters/spiffy/commerce/graphql";
+import Logger from "src/application/logging/logger";
+import { AtomStore, getAtomStore } from "../atoms/atomStore";
+import { ColorMapping } from "src/contexts";
+
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import { orgShortNameAtom } from "../atoms/org/org";
+import {
+  BasicOrgInfoType,
+  getOrgInfo,
+} from "src/application/models/supportedOrgs";
+import { FrontendConfig } from "src/application/models";
+
+type newConfigResponse = {
+  colorsConfig: ColorMapping | undefined;
+  frontendConfig: FrontendConfig | undefined;
+};
+
+async function fetchGraphQLConfig(
+  atomStore: AtomStore
+): Promise<newConfigResponse> {
+  try {
+    Logger.logDebug("GraphQLConfigService: Starting GraphQL client fetch");
+
+    const { colorsConfig, frontendConfig } =
+      (await GraphQLClient.getColorsAndFrontendConfig()) ?? {};
+
+    Logger.logDebug("GraphQL config fetch completed", {
+      hasColorsConfig: !!colorsConfig,
+      hasFrontendConfig: !!frontendConfig,
+      frontendConfigKeys: frontendConfig ? Object.keys(frontendConfig) : [],
+    });
+
+    return {
+      colorsConfig,
+      frontendConfig,
+    };
+  } catch (error) {
+    Logger.logError(
+      "GraphQLConfigService: Error during GraphQL config fetch",
+      error
+    );
+    throw error; // Re-throw to be caught by the caller
+  }
+}
+
+export const useNewOrgConfig = () => {
+  const [oldConfig, setOldConfig] = useState<BasicOrgInfoType | undefined>();
+
+  const [newConfig, setNewConfig] = useState<newConfigResponse | undefined>();
+
+  const [combinedConfig, setCombinedConfig] = useState<
+    newConfigResponse & BasicOrgInfoType
+  >();
+  const orgShortName = useAtomValue(orgShortNameAtom);
+
+  useEffect(() => {
+    if (orgShortName) {
+      getOrgInfo(orgShortName).then((oldConfigData) => {
+        setOldConfig(oldConfigData);
+      });
+      fetchGraphQLConfig(getAtomStore()).then((newConfigData) => {
+        setNewConfig(newConfigData);
+      });
+    }
+  }, [orgShortName]);
+
+  useEffect(() => {
+    if (oldConfig && newConfig) {
+      setCombinedConfig;
+    }
+  }, [oldConfig, newConfig]);
+
+  if (!orgShortName || !combinedConfig) {
+    return null;
+  }
+
+  return combinedConfig;
+};