@envive-ai/react-hooks 0.1.0

package/src/atoms/chat/performanceMetrics.ts

@@ -0,0 +1,84 @@
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import Logger from 'src/application/logging/logger';
+import { getAtomStore, sessionStorageUtil } from 'src/atoms/atomStore';
+
+export const APP_INITIAL_START_TIME_KEY = 'spiffy-app-initial-start-time';
+export const PAGE_LOAD_OFFSET_TIME_KEY = 'spiffy-page-load-offset-time';
+/**
+ * The different performance metrics that can be logged. All times are relative to the
+ * initial start time of the app and are stored in milliseconds.
+ */
+export enum PerfMetricsEvents {
+  PageLoadOffset = 'page_load_offset_ms',
+  MainBundleLoaded = 'main_bundle_loaded_ms',
+  OrgConfigLoadStarted = 'org_config_load_started_ms',
+  OrgConfigLoadEnded = 'org_config_load_ended_ms',
+  FirstResponseStarted = 'first_response_started_ms',
+  FirstResponseCompleted = 'first_response_completed_ms',
+  FirstSuggestionsStarted = 'first_suggestions_started_ms',
+  FirstSuggestionsCompleted = 'first_suggestions_completed_ms',
+  EmbeddedWidgetRendered = 'embedded_widget_rendered_ms',
+  FloatingButtonRendered = 'floating_button_rendered_ms',
+  TopSuggestionsBarRendered = 'top_suggestions_bar_rendered_ms',
+  BottomSuggestionsBarRendered = 'bottom_suggestions_bar_rendered_ms',
+  SearchPromptRendered = 'search_prompt_rendered_ms',
+}
+
+const internalPerfMetricsAtom = atom<Map<PerfMetricsEvents, number>>(new Map());
+export const appInitialStartTimeMsAtom = atomWithStorage<string | undefined>(
+  APP_INITIAL_START_TIME_KEY,
+  sessionStorage.getItem(APP_INITIAL_START_TIME_KEY) ?? undefined,
+  sessionStorageUtil,
+  {
+    getOnInit: true,
+  },
+);
+
+export const pageLoadOffsetTimeAtom = atomWithStorage<string | undefined>(
+  PAGE_LOAD_OFFSET_TIME_KEY,
+  sessionStorage.getItem(PAGE_LOAD_OFFSET_TIME_KEY) ?? undefined,
+  sessionStorageUtil,
+  {
+    getOnInit: true,
+  },
+);
+
+/**
+ * Resets the performance metrics atom to an empty map. This should be called after the performance
+ * metrics have been reported to amplitude. On SPA, it ensures that we can still capture metrics as
+ * the user navigates around the app (although there is more work to be done to fully enable this).
+ * On non-SPA, it ensures that previously captured metrics are not reported again.
+ */
+export const resetPerformanceMetricsAtom = () => {
+  const atomStore = getAtomStore();
+  atomStore.set(internalPerfMetricsAtom, new Map());
+};
+export const performanceMetricsAtom = atom((get) => get(internalPerfMetricsAtom));
+export const hasReportedPerformanceMetricsAtom = atom<boolean>(false);
+
+/**
+ * Logs a performance metric by capturing the delta between the initial app start time
+ * and the current time. If the metric has already been logged, it will not be logged again.
+ *
+ * @param value The performance metric name to log.
+ */
+export const logPerfMetricAtom = atom(null, (get, set, value: PerfMetricsEvents) => {
+  const initialTimeStorageValue = get(appInitialStartTimeMsAtom);
+  const initialTimeMs = initialTimeStorageValue ? parseInt(initialTimeStorageValue, 10) : undefined;
+
+  if (initialTimeMs == null) {
+    Logger.logWarn(`[spiffy-ai] No initial app start time found. Skipping...`, undefined);
+    return;
+  }
+
+  const currentPerfMetrics = get(internalPerfMetricsAtom);
+  if (currentPerfMetrics.has(value)) {
+    return;
+  }
+
+  const currentTimeMs = Date.now();
+  const deltaMs = currentTimeMs - initialTimeMs;
+  currentPerfMetrics.set(value, deltaMs);
+  set(internalPerfMetricsAtom, currentPerfMetrics);
+});

package/src/atoms/chat/renderedWidgetRefs.ts

@@ -0,0 +1,28 @@
+import { atom } from 'jotai';
+import { getAtomStore } from 'src/atoms/atomStore';
+
+const internalWidgetArrayAtom = atom<HTMLElement[]>([])
+
+export const widgetArrayAtom = atom((get) =>
+  get(internalWidgetArrayAtom))
+
+/**
+ * This function call is used to create a list of the Spiffy widgets
+ * that are rendering on the page.
+ * 
+ * It is used by the FloatingButton widget to slide out of view when it
+ * overlaps with another Spiffy widget.
+ * 
+ * The spiffy widgets should be added to the this array for the floating button
+ * to know about them.
+ * 
+ * Today the "SuggestionBar" widget is not added, but the other widgets are.
+ * 
+ */
+export const addWidget = (ref: HTMLElement, idx?: number) => {
+  const atomStore = getAtomStore()
+  const val = atomStore.get(internalWidgetArrayAtom)
+  const insertIdx = idx ?? val.length
+  val[insertIdx] = ref
+  atomStore.set(internalWidgetArrayAtom, val)
+}

package/src/atoms/chat/replies.ts

@@ -0,0 +1,51 @@
+import { atom } from 'jotai';
+import { Message, MessageType } from 'src/application/models';
+import {
+  userHasRepliedAtom,
+  messagesAtom,
+  userQueryAtom,
+  replyEventCategoryAtom,
+} from 'src/atoms/chat';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
+import { queueUserEventAtom } from './messageQueue';
+
+type HandleReplyParams = {
+  message: Message;
+  userTyped: boolean;
+};
+
+export const handleReplyAtom = atom(null, (get, set, { message, userTyped }: HandleReplyParams) => {
+  if (message.type !== MessageType.QueryTyped) {
+    return;
+  }
+
+  const queryTyped = message.metadata.content;
+
+  set(replyEventCategoryAtom, UserEventCategory.QueryTyped);
+  set(userQueryAtom, queryTyped);
+  set(messagesAtom, [...get(messagesAtom), [message]]);
+  set(userHasRepliedAtom, true);
+  set(queueUserEventAtom, {
+    eventId: message.id,
+    createdAt: message.createdAt,
+    category: UserEventCategory.QueryTyped,
+    attributes: {
+      query: queryTyped,
+    },
+  });
+  AmplitudeAdapter.trackEvent({
+    eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+    eventProps: {
+      message_id: message.id,
+      message_role: message.role,
+      message_type: message.type,
+      message_metadata: {
+        content: AmplitudeAdapter.amplitudeSafeString(message?.metadata?.content),
+        created_at: message.createdAt,
+        user_typed: userTyped,
+      },
+    },
+    alsoSendToGoogleAnalytics: true,
+  });
+});

package/src/atoms/chat/suggestions.ts

@@ -0,0 +1,36 @@
+import { atom } from 'jotai';
+import { Message, MessageRole, MessageType, Suggestion } from 'src/application/models';
+import {
+  messagesAtom,
+  replyEventCategoryAtom,
+  suggestionAtom,
+  userHasRepliedAtom,
+} from 'src/atoms/chat';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { queueUserEventAtom } from './messageQueue';
+
+export const handleSuggestionAtom = atom(null, (get, set, suggestion: Suggestion) => {
+  const newMessage: Message = {
+    id: suggestion.id,
+    role: MessageRole.User,
+    type: MessageType.SuggestionClicked,
+    createdAt: new Date().toISOString(),
+    metadata: {
+      suggestionId: suggestion.id,
+      suggestionContent: suggestion.content,
+    },
+  };
+
+  set(replyEventCategoryAtom, UserEventCategory.SuggestionClicked);
+  set(suggestionAtom, suggestion);
+  set(messagesAtom, [...get(messagesAtom), [newMessage]]);
+  set(userHasRepliedAtom, true);
+  set(queueUserEventAtom, {
+    eventId: suggestion.id,
+    category: UserEventCategory.SuggestionClicked,
+    createdAt: newMessage.createdAt,
+    attributes: {
+      suggestionId: suggestion.id,
+    },
+  });
+});

package/src/atoms/globalSearch.ts

@@ -0,0 +1,12 @@
+import { atom } from 'jotai';
+
+export const autocompleteStateAtom = atom<{ results: string[]; isLoading: boolean }>({
+  results: [],
+  isLoading: false,
+});
+
+export const isFilterOpenAtom = atom(false);
+
+export const isGlobalSearchOpenAtom = atom(false);
+
+export const isSearchResultsOpenAtom = atom(false);

package/src/atoms/index.ts

@@ -0,0 +1,5 @@
+export * from "./atomStore";
+export * from "./app";
+export * from "./chat";
+export * from "./org";
+export * from "./search";

package/src/atoms/org/customerService.ts

@@ -0,0 +1,13 @@
+import {
+  AttachmentRequest,
+  CustServiceConversationMessages,
+} from "@spiffy-ai/commerce-api-client";
+import { atom } from "jotai";
+import { ChatState } from "src/types/custservice-types";
+
+export const isBusinessHoursAtom = atom<boolean>(true);
+export const isCustomerServiceOpenAtom = atom<boolean>(false);
+export const customerServiceResponseAtom =
+  atom<CustServiceConversationMessages>();
+export const customerServiceChatStateAtom = atom<ChatState>();
+export const customerServiceAttachment = atom<AttachmentRequest | undefined>();

package/src/atoms/org/graphqlConfig.ts

@@ -0,0 +1,27 @@
+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);
+
+export const colorsConfigAtom = atom(
+  async (get) => {
+    const colors = get(internalGraphQLColorsConfigAtom);
+    const orgInfo = await getOrgInfo(get(orgShortNameAtom));
+    const orgUIConfigColors = orgInfo.orgColors();
+    return { ...orgUIConfigColors, ...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/index.ts

@@ -0,0 +1,7 @@
+export * from './customerService';
+export * from './graphqlConfig';
+export * from './merchantCss';
+export * from './org';
+export * from './orgAnalyticsConfig';
+export * from './orgPageConfig';
+export * from './orgUIConfig';

package/src/atoms/org/merchantCss.ts

@@ -0,0 +1,44 @@
+import { atom } from "jotai";
+import { ColorNames } from "src/contexts/types";
+import { orgUIConfigAtom } from "src/atoms/org/orgUIConfig";
+import { colorsConfigAtom } from "src/atoms/org/graphqlConfig";
+
+export const orgMerchantCssAtom = atom(async (get) => {
+  const orgUIConfig = get(orgUIConfigAtom);
+  const colors = await get(colorsConfigAtom);
+  const merchantThemeCss = colors
+    ? `
+
+* {
+  --spiffy-colors-text-primary: ${colors[ColorNames.TextPrimary]};
+  --spiffy-colors-text-secondary: ${colors[ColorNames.TextSecondary]};
+  --spiffy-colors-text-accent: ${colors[ColorNames.TextAccent]};
+  --spiffy-colors-text-link: ${colors[ColorNames.TextLink]};
+  --spiffy-colors-text-light: ${colors[ColorNames.TextLight]};
+  --spiffy-colors-background-primary: ${colors[ColorNames.BackgroundPrimary]};
+  --spiffy-colors-background-secondary: ${
+    colors[ColorNames.BackgroundSecondary]
+  };
+  --spiffy-colors-background-secondary-dark: ${
+    colors[ColorNames.BackgroundSecondaryDark]
+  };
+  --spiffy-colors-background-tertiary: ${colors[ColorNames.BackgroundTertiary]};
+  --spiffy-colors-background-dark: ${colors[ColorNames.BackgroundDark]};
+  --spiffy-colors-background-light: ${colors[ColorNames.BackgroundLight]};
+  --spiffy-colors-background-saturated: ${
+    colors[ColorNames.BackgroundSaturated]
+  };
+  --spiffy-colors-border-light: ${colors[ColorNames.BorderLight]};
+  --spiffy-colors-border-medium: ${colors[ColorNames.BorderMedium]};
+  --spiffy-colors-border-dark: ${colors[ColorNames.BorderDark]};
+  --spiffy-colors-border-outline: ${colors[ColorNames.BorderOutline]};
+  --spiffy-colors-accent-primary: ${colors[ColorNames.AccentPrimary]};
+  --spiffy-colors-accent-secondary: ${colors[ColorNames.AccentSecondary]};
+}`
+    : `
+* {}`;
+
+  const merchantOverrideCss = orgUIConfig?.merchantOverrideCss;
+
+  return `${merchantThemeCss} ${merchantOverrideCss}`;
+});

package/src/atoms/org/org.ts

@@ -0,0 +1,256 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+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 { FeatureGates } from "src/application/models/featureGates";
+import { UserIdentityService } from "src/application/service/userIdentityService";
+import { AtomStore, getAtomStore } from "src/atoms/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 Logger from "src/application/logging/logger";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+
+const internalApiKeyAtom = atom<string | undefined>(undefined);
+const internalEndpointURLAtom = atom<string | undefined>(undefined);
+const internalSourceAtom = atom<ContextSourceEnum>(
+  EnvironmentService.getContextSource()
+);
+
+export const getApiKeyEnvVar = (shortName: string): string =>
+  `VITE_${shortName.replace(/-/g, "_").toUpperCase()}_API_KEY`;
+
+export const apiKeyAtom = atom(
+  (get) => {
+    const apiKey = get(internalApiKeyAtom);
+
+    if (apiKey) {
+      return apiKey;
+    }
+
+    const { orgLevelApiKey, orgShortName } = useEnviveConfig();
+
+    if (orgLevelApiKey) {
+      return orgLevelApiKey;
+    }
+
+    if (
+      window._spiffy?.publicKey &&
+      typeof window._spiffy.publicKey === "string"
+    ) {
+      return window._spiffy.publicKey;
+    }
+
+    if (!orgShortName) {
+      throw new Error("[spiffy-ai] orgShortName is required but is not set");
+    }
+
+    // The merchant probably forgot to set the apiKey
+    throw new Error(`[spiffy-ai]: apiKey is missing`);
+  },
+  (_, set, newVal: string | undefined) => {
+    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
+>(() => sessionStorage);
+export const storedOrgConfigAtom = atomWithStorage(
+  "spiffy-org-config",
+  undefined,
+  orgConfigStorageUtil,
+  {
+    getOnInit: true,
+  }
+);
+
+const internalFeatureFlagServiceAtom = atom<FeatureFlagService | undefined>(
+  undefined
+);
+const internalOrgConfigAtom = atom<OrgConfig | undefined>(undefined);
+const internalOrgDomainAtom = atom<string | undefined>(undefined);
+const internalOrgIdAtom = atom<string | undefined>(undefined);
+const internalOrgShortNameAtom = atom<string | undefined>(undefined);
+export const featureFlagServiceAtom = atom(
+  (get) => {
+    const featureFlagService = get(internalFeatureFlagServiceAtom);
+    if (featureFlagService) {
+      return featureFlagService;
+    }
+
+    const orgConfig = get(internalOrgConfigAtom);
+    if (orgConfig) {
+      return new FeatureFlagService(orgConfig.gates);
+    }
+
+    throw new Error("FeatureFlagService is referenced before it is set");
+  },
+  (_, set, value: FeatureFlagService) => {
+    set(internalFeatureFlagServiceAtom, value);
+  }
+);
+export const orgConfigAtom = atom(
+  (get) => {
+    const orgConfig = get(internalOrgConfigAtom);
+    if (orgConfig) {
+      return orgConfig;
+    }
+
+    throw new Error("OrgConfig is referenced before it is set");
+  },
+  (_, set, value: OrgConfig) => {
+    set(internalOrgConfigAtom, value);
+  }
+);
+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");
+  },
+  (_, set, value: string) => {
+    set(internalOrgShortNameAtom, value);
+  }
+);
+export const orgDomainAtom = atom(
+  (get) => {
+    const orgDomain = get(internalOrgDomainAtom);
+    if (orgDomain) {
+      return orgDomain;
+    }
+
+    throw new Error("Org domain is referenced before it is set");
+  },
+  (_, set, value: string) => {
+    set(internalOrgDomainAtom, value);
+  }
+);
+export const orgIdAtom = atom(
+  (get) => {
+    const orgId = get(internalOrgIdAtom);
+    if (orgId) {
+      return orgId;
+    }
+
+    throw new Error("Org id is referenced before it is set");
+  },
+  (_, set, value: string) => {
+    set(internalOrgIdAtom, value);
+  }
+);
+
+export const resetStoredOrgConfigAtom = () => {
+  const atomStore = getAtomStore();
+  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
+ *
+ * @param apiKeyOverride an optional new api key to override the current key stored in apiKeyAtom
+ *
+ * @returns The OrgAnalyticsConfig object or throws an error if the config was not successfully retrieved
+ */
+export const getAsyncOrgConfig = async (
+  apiKeyOverride?: string
+): Promise<OrgConfig> => {
+  const atomStore = getAtomStore();
+  const apiKey = apiKeyOverride ?? atomStore.get(apiKeyAtom);
+  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];
+  if (!maybeOrgConfig) {
+    const userId = UserIdentityService.getUserIdOrDefault();
+    maybeOrgConfig = await CommerceApiClient.getOrgConfig(userId);
+  }
+
+  if (!maybeOrgConfig) {
+    throw new Error("[spiffy-ai] Org config is not defined but is required");
+  }
+
+  const latestConfig = maybeOrgConfig.configs?.find(
+    (config) => config.isLatest
+  );
+
+  if (!latestConfig) {
+    throw new Error("[spiffy-ai] no latest org config is found");
+  }
+
+  const orgConfig: OrgConfig = {
+    ...maybeOrgConfig,
+    configs: [{ ...latestConfig }],
+  };
+
+  // TODO this should never be undefined, update the SDK to enforce this
+  if (!orgConfig.org) {
+    throw new Error("[spiffy-ai] orgConfig.org is not defined but is required");
+  }
+
+  atomStore.set(logPerfMetricAtom, PerfMetricsEvents.OrgConfigLoadEnded);
+  atomStore.set(orgShortNameAtom, orgConfig.org.org.shortName);
+  atomStore.set(orgDomainAtom, orgConfig.org.org.domain);
+  atomStore.set(orgIdAtom, orgConfig.org.org.id);
+  atomStore.set(storedOrgConfigAtom, {
+    ...maybeOrgConfigByApiKey,
+    [apiKey]: orgConfig,
+  });
+  atomStore.set(orgConfigAtom, orgConfig);
+  atomStore.set(orgAnalyticsConfigAtom, {
+    ...latestConfig.config,
+  });
+  atomStore.set(
+    featureFlagServiceAtom,
+    new FeatureFlagService(orgConfig.gates)
+  );
+
+  await getGraphQLConfig(atomStore);
+
+  return orgConfig;
+};

package/src/atoms/org/orgAnalyticsConfig.ts

@@ -0,0 +1,28 @@
+import { atom } from 'jotai';
+import {
+  OrgAnalyticsConfig,
+  OrgAnalyticsAmplitudeConfig,
+  OrgAnalyticsCustomerServiceConfig,
+  OrgAnalyticsGoogleAnalyticsConfig,
+} from 'src/application/models/api/orgAnalyticsConfig';
+
+const internalOrgAnalyticsConfigAtom = atom<OrgAnalyticsConfig | undefined>(undefined);
+
+export const orgAnalyticsConfigAtom = atom(
+  (get) => get(internalOrgAnalyticsConfigAtom),
+  (_, set, value: OrgAnalyticsConfig) => {
+    set(internalOrgAnalyticsConfigAtom, value);
+  },
+);
+
+export const orgAnalyticsAmplitudeConfigAtom = atom<OrgAnalyticsAmplitudeConfig | undefined>(
+  (get) => get(orgAnalyticsConfigAtom)?.amplitude,
+);
+
+export const orgAnalyticsCustomerServiceConfigAtom = atom<
+  OrgAnalyticsCustomerServiceConfig | undefined
+>((get) => get(orgAnalyticsConfigAtom)?.customerService);
+
+export const orgAnalyticsGoogleAnalyticsConfigAtom = atom<
+  OrgAnalyticsGoogleAnalyticsConfig | undefined
+>((get) => get(orgAnalyticsConfigAtom)?.googleAnalytics);

package/src/atoms/org/orgPageConfig.ts

@@ -0,0 +1,38 @@
+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);
+    const orgInfo = await getOrgInfo(orgConfig.org.org.shortName);
+    const frontendConfig = get(frontendConfigAtom);
+    const injectedPageVariants = get(internalInjectedPageVariantsAtom);
+    const localOrgPageConfig = orgInfo.orgPageConfig();
+    const OverridenOrgPageConfig = { ...localOrgPageConfig };
+
+    if (frontendConfig?.mountingConfigs) {
+      OverridenOrgPageConfig.mountingConfigs = frontendConfig.mountingConfigs;
+    }
+
+    if (frontendConfig?.widgetConfigs) {
+      OverridenOrgPageConfig.widgetConfigs = frontendConfig.widgetConfigs;
+    }
+    if (frontendConfig?.pageVariants) {
+      OverridenOrgPageConfig.pageVariants = frontendConfig.pageVariants;
+    }
+
+    if (injectedPageVariants.length > 0) {
+      OverridenOrgPageConfig.pageVariants = [...injectedPageVariants];
+    }
+
+    return OverridenOrgPageConfig;
+  },
+  (_, set, pageVariants: PageVariantConfig[]) => {
+    set(internalInjectedPageVariantsAtom, pageVariants);
+  },
+);