fix: request white labeling when module is off (revert #1881) (#1931)

revert PR #1881

This reverts commit 41fbef4.

## Description

## References
### Jira-link:
https://virtocommerce.atlassian.net/browse/VCST-3935
### Artifact URL:

https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.31.0-pr-1931-21fa-21fab439.zip

Author: ivan-kalachikov

client-app/app-runner.ts

@@ -5,7 +5,6 @@ import { apolloClient, getStore } from "@/core/api/graphql";
 import { useCurrency, useThemeContext, useNavigations, useWhiteLabeling } from "@/core/composables";
 import { useHotjar } from "@/core/composables/useHotjar";
 import { useLanguages } from "@/core/composables/useLanguages";
-import { useModuleSettings } from "@/core/composables/useModuleSettings";
 import { FALLBACK_LOCALE, IS_DEVELOPMENT } from "@/core/constants";
 import { setGlobals } from "@/core/globals";
 import {
@@ -81,13 +80,7 @@ export default async () => {
   const { currentCurrency } = useCurrency();
   const { init: initializeHotjar } = useHotjar();
   const { fetchCatalogMenu } = useNavigations();
-  const {
-    MODULE_KEYS: WHITE_LABELING_MODULE_KEYS,
-    themePresetName,
-    fetchWhiteLabelingSettings,
-    applyWhiteLabelingSettings,
-    fetchAndApplyFooterLinks,
-  } = useWhiteLabeling();
+  const { themePresetName, fetchWhiteLabelingSettings } = useWhiteLabeling();
 
   const fallback = {
     locale: FALLBACK_LOCALE,
@@ -101,7 +94,7 @@ export default async () => {
     IS_DEVELOPMENT ? extractHostname(import.meta.env.APP_BACKEND_URL as string) : window.location.hostname,
   ) as Promise<StoreResponseType>;
 
-  const [store] = await Promise.all([storePromise, fetchUser(), fallback.setMessage(), fetchWhiteLabelingSettings()]);
+  const [store] = await Promise.all([storePromise, fetchUser(), fallback.setMessage()]);
 
   if (!store) {
     alert("Related store not found. Please contact your site administrator.");
@@ -146,13 +139,7 @@ export default async () => {
    * Other settings
    */
 
-  const { isEnabled } = useModuleSettings(WHITE_LABELING_MODULE_KEYS.ID);
-
-  if (isEnabled(WHITE_LABELING_MODULE_KEYS.ENABLE_STATE)) {
-    void fetchAndApplyFooterLinks(currentLanguage.value.cultureName);
-    applyWhiteLabelingSettings();
-  }
-
+  await fetchWhiteLabelingSettings();
   addPresetToThemeContext(themePresetName.value ?? themeContext.value.defaultPresetName);
 
   if (isAuthenticated.value || themeContext.value.storeSettings.anonymousUsersAllowed) {

client-app/core/api/graphql/whiteLabeling/queries/index.ts

@@ -1,27 +1,9 @@
 import { gql } from "graphql-tag";
+import { globals } from "@/core/globals";
 import { graphqlClient } from "../../client";
 import type { Query, QueryWhiteLabelingSettingsArgs } from "@/core/api/graphql/types";
 import type { DocumentNode } from "graphql";
 
-function getQueryDocument(): DocumentNode {
-  return gql`
-    query WhiteLabelingSettings($domain: String) {
-      whiteLabelingSettings(domain: $domain) {
-        logoUrl
-        secondaryLogoUrl
-        themePresetName
-        isOrganizationLogoUploaded
-        favicons {
-          rel
-          type
-          sizes
-          href
-        }
-      }
-    }
-  `;
-}
-
 const FOOTER_LINKS_DEPTH = 1;
 
 function getFooterLinksTreeString(level: number): string {
@@ -37,27 +19,25 @@ function getFooterLinksTreeString(level: number): string {
     : "";
 }
 
-export async function getGetWhiteLabelingSettings(domain: string) {
-  const { data } = await graphqlClient.query<
-    Required<Pick<Query, "whiteLabelingSettings">>,
-    QueryWhiteLabelingSettingsArgs
-  >({
-    query: getQueryDocument(),
-    variables: {
-      domain,
-    },
-  });
-
-  return data.whiteLabelingSettings;
-}
-
-function getFooterLinksDocument(maxLevelFooterLinks: number): DocumentNode {
+function getQueryDocument(maxLevelFooterLinks: number): DocumentNode {
   return gql`
-    query WhiteLabelingSettings($domain: String, $cultureName: String) {
+    query WhiteLabelingSettings($storeId: String, $userId: String, $cultureName: String, $organizationId: String) {
       whiteLabelingSettings(
-        domain: $domain,
+        storeId: $storeId
+        userId: $userId
         cultureName: $cultureName
+        organizationId: $organizationId
       ) {
+        logoUrl
+        secondaryLogoUrl
+        themePresetName
+        isOrganizationLogoUploaded
+        favicons {
+          rel
+          type
+          sizes
+          href
+        }
         footerLinks {
           title
           url
@@ -69,14 +49,18 @@ function getFooterLinksDocument(maxLevelFooterLinks: number): DocumentNode {
   `;
 }
 
-export async function getFooterLinks(domain: string, cultureName: string) {
+export async function getGetWhiteLabelingSettings() {
+  const { storeId, userId, organizationId, cultureName } = globals;
+
   const { data } = await graphqlClient.query<
     Required<Pick<Query, "whiteLabelingSettings">>,
     QueryWhiteLabelingSettingsArgs
   >({
-    query: getFooterLinksDocument(FOOTER_LINKS_DEPTH),
+    query: getQueryDocument(FOOTER_LINKS_DEPTH),
     variables: {
-      domain,
+      storeId,
+      userId,
+      organizationId,
       cultureName,
     },
   });

client-app/core/composables/useWhiteLabeling.ts

@@ -1,94 +1,50 @@
 import { createGlobalState, useEventBus } from "@vueuse/core";
-import { computed, ref, shallowRef } from "vue";
-import settingsData from "@/config/settings_data.json";
-import { getGetWhiteLabelingSettings, getFooterLinks } from "@/core/api/graphql/whiteLabeling/queries";
-import { IS_DEVELOPMENT } from "@/core/constants";
+import { computed, shallowRef } from "vue";
+import { getGetWhiteLabelingSettings } from "@/core/api/graphql/whiteLabeling/queries";
 import { WHITE_LABELING_FETCHED_SETTINGS_EVENT } from "@/core/constants/modules-events";
-import { Logger, convertToExtendedMenuLink, extractHostname } from "@/core/utilities";
-import type { WhiteLabelingSettingsType, MenuLinkType } from "@/core/api/graphql/types";
+import { Logger, convertToExtendedMenuLink } from "@/core/utilities";
+import { useThemeContext } from "./useThemeContext";
+import type { WhiteLabelingSettingsType } from "@/core/api/graphql/types";
 
 const whiteLabelingSettings = shallowRef<WhiteLabelingSettingsType>();
-const fetchedSettings = shallowRef<WhiteLabelingSettingsType>();
-const footerLinks = ref<MenuLinkType[]>();
+const { modulesSettings, themeContext } = useThemeContext();
 
 const MODULE_KEYS = {
   ID: "VirtoCommerce.WhiteLabeling",
   ENABLE_STATE: "WhiteLabeling.WhiteLabelingEnabled",
 };
 
-const { emit } = useEventBus(WHITE_LABELING_FETCHED_SETTINGS_EVENT);
+const moduleSettings = computed(() => modulesSettings.value?.find((module) => module.moduleId === MODULE_KEYS.ID));
+const moduleEnabled = computed(
+  () => moduleSettings.value?.settings?.find((item) => item.name === MODULE_KEYS.ENABLE_STATE)?.value,
+);
 
-const currentDomain = IS_DEVELOPMENT
-  ? extractHostname(import.meta.env.APP_BACKEND_URL as string)
-  : window.location.hostname;
+const { emit } = useEventBus(WHITE_LABELING_FETCHED_SETTINGS_EVENT);
 
-/**
- * Independent composable.
- * Does not rely on global context.
- */
 function _useWhiteLabeling() {
-  /**
-   * Applies previously fetched white labeling settings.
-   *
-   * @remarks
-   * - Use only after {@link fetchWhiteLabelingSettings}.
-   */
   async function fetchWhiteLabelingSettings(): Promise<void> {
-    try {
-      fetchedSettings.value = await getGetWhiteLabelingSettings(currentDomain);
-    } catch (e) {
-      Logger.error(`${_useWhiteLabeling.name}.${fetchWhiteLabelingSettings.name}`, e);
-      throw e;
-    }
-  }
-
-  /**
-   * Fetches and stores white labeling settings.
-   *
-   * @remarks
-   * - Not for standalone use; must be followed by {@link applyWhiteLabelingSettings}.
-   * - Purpose: load settings in parallel during app initialization.
-   */
-  function applyWhiteLabelingSettings() {
-    if (fetchedSettings.value) {
-      whiteLabelingSettings.value = fetchedSettings.value;
-      fetchedSettings.value = undefined;
-
-      emit(whiteLabelingSettings.value);
-    }
-  }
-
-  /**
-   * Fetches and applies footer links.
-   *
-   * @param cultureName - Locale in 4-character format (e.g., "en-US").
-   *
-   * @remarks
-   * - Asynchronous method.
-   * - Locale-dependent.
-   */
-  async function fetchAndApplyFooterLinks(cultureName: string) {
-    try {
-      footerLinks.value = (await getFooterLinks(currentDomain, cultureName))?.footerLinks;
-    } catch (e) {
-      Logger.error(`${_useWhiteLabeling.name}.${fetchAndApplyFooterLinks.name}`, e);
-      throw e;
+    if (moduleEnabled.value) {
+      try {
+        whiteLabelingSettings.value = await getGetWhiteLabelingSettings();
+        emit(whiteLabelingSettings.value);
+      } catch (e) {
+        Logger.error(`${_useWhiteLabeling.name}.${fetchWhiteLabelingSettings.name}`, e);
+        throw e;
+      }
     }
   }
 
   return {
-    MODULE_KEYS,
-    fetchWhiteLabelingSettings,
-    applyWhiteLabelingSettings,
-    fetchAndApplyFooterLinks,
-
-    logoUrl: computed(() => whiteLabelingSettings.value?.logoUrl ?? settingsData.settings.logo_image),
+    logoUrl: computed(() => whiteLabelingSettings.value?.logoUrl ?? themeContext.value?.settings?.logo_image),
     secondaryLogoUrl: computed(
-      () => whiteLabelingSettings.value?.secondaryLogoUrl ?? settingsData.settings.logo_inverted_image,
+      () => whiteLabelingSettings.value?.secondaryLogoUrl ?? themeContext.value?.settings?.logo_inverted_image,
+    ),
+    footerLinks: computed(() =>
+      whiteLabelingSettings.value?.footerLinks?.map((item) => convertToExtendedMenuLink(item)),
     ),
-    footerLinks: computed(() => footerLinks.value?.map((item) => convertToExtendedMenuLink(item))),
     favIcons: computed(() => whiteLabelingSettings.value?.favicons),
     themePresetName: computed(() => whiteLabelingSettings.value?.themePresetName),
+    fetchWhiteLabelingSettings,
     whiteLabelingLogoUrl: computed(() => whiteLabelingSettings.value?.logoUrl),
     isOrganizationLogoUploaded: computed(() => whiteLabelingSettings.value?.isOrganizationLogoUploaded),
   };

client-app/pages/company/info.vue

@@ -365,8 +365,7 @@ const {
   options: fileOptions,
   hasFailedFiles,
 } = useFiles(DEFAULT_COMPANY_FILES_SCOPE);
-const { whiteLabelingLogoUrl, fetchWhiteLabelingSettings, isOrganizationLogoUploaded, applyWhiteLabelingSettings } =
-  useWhiteLabeling();
+const { whiteLabelingLogoUrl, fetchWhiteLabelingSettings, isOrganizationLogoUploaded } = useWhiteLabeling();
 const newLogoUrl = ref(isOrganizationLogoUploaded.value ? whiteLabelingLogoUrl.value : "");
 
 usePageHead({
@@ -543,7 +542,6 @@ void fetchAddresses();
 async function saveOrganizationLogo(): Promise<void> {
   await updateLogo(organizationId.value, newLogoUrl.value);
   await fetchWhiteLabelingSettings();
-  applyWhiteLabelingSettings();
 
   notifications.success({
     text: t("common.messages.logo_changed"),
@@ -582,7 +580,6 @@ async function onRemoveFiles() {
   void removeFiles(files.value);
   await updateLogo(organizationId.value, "");
   await fetchWhiteLabelingSettings();
-  applyWhiteLabelingSettings();
 
   notifications.warning({
     text: t("common.messages.logo_deleted"),

client-app/shared/broadcast/utils/events.ts

@@ -1,14 +1,26 @@
-export const dataChangedEvent = "data_changed";
-export const pageReloadEvent = "page_reload";
-export const userReloadEvent = "user_reload";
-export const userBeforeUnauthorizeEvent = "user_before_unauthorize";
-export const userLockedEvent = "user_locked";
-export const cartReloadEvent = "cart_reload";
-export const unauthorizedErrorEvent = "unauthorized_error";
-export const unhandledErrorEvent = "unhandled_error";
-export const openReturnUrl = "open_return_url";
-export const forbiddenEvent = "forbidden";
-// eslint-disable-next-line sonarjs/no-hardcoded-passwords
-export const passwordExpiredEvent = "password_expired";
-export const reloadAndOpenMainPage = "reload_and_open_main_page";
-export const graphqlErrorEvent = "graphql_error";
+/**
+ * Designed to sync the value type between `emit()` and `on()`.
+ *
+ * Example:
+ *  const testEvent = "test_event" as InjectionEvent<boolean>;
+ *
+ *  broadcast.on(testEvent, (data) => {
+ *    // The parameter `data` is of boolean type.
+ *  });
+ *
+ *  broadcast.emit(testEvent, 123); // Error
+ */
+
+export const dataChangedEvent = "data_changed" as string;
+export const pageReloadEvent = "page_reload" as string;
+export const userReloadEvent = "user_reload" as string;
+export const userBeforeUnauthorizeEvent = "user_before_unauthorize" as string;
+export const userLockedEvent = "user_locked" as string;
+export const cartReloadEvent = "cart_reload" as string;
+export const unauthorizedErrorEvent = "unauthorized_error" as string;
+export const unhandledErrorEvent = "unhandled_error" as string;
+export const openReturnUrl = "open_return_url" as string;
+export const forbiddenEvent = "forbidden" as string;
+export const passwordExpiredEvent = "password_expired" as string;
+export const reloadAndOpenMainPage = "reload_and_open_main_page" as string;
+export const graphqlErrorEvent = "graphql_error" as string;