chore(VCST-3470): refactor extension points

client-app/modules/back-in-stock/index.ts

@@ -2,8 +2,8 @@ import { defineAsyncComponent } from "vue";
 import { useNavigations } from "@/core/composables";
 import { useModuleSettings } from "@/core/composables/useModuleSettings";
 import { useUser } from "@/shared/account/composables";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import { loadModuleLocale } from "../utils";
 import { MODULE_ID, ENABLED_KEY } from "./constants";
 import type { MenuType } from "@/core/types";
@@ -17,7 +17,7 @@ const BackInStockButton = defineAsyncComponent(() => import("./components/back-i
 
 const { isEnabled } = useModuleSettings(MODULE_ID);
 const { mergeMenuSchema } = useNavigations();
-const { registerComponent } = useCustomProductComponents();
+const { register } = useExtensionRegistry();
 
 const route: RouteRecordRaw = {
   path: "back-in-stock",
@@ -64,16 +64,13 @@ export function init(router: Router, i18n: I18n) {
   }
   if (isAuthenticated.value && isEnabled(ENABLED_KEY)) {
     mergeMenuSchema(menuItems);
-    registerComponent({
-      id: CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON,
+    register("productCard", EXTENSION_NAMES.productCard.cardButton, {
       component: BackInStockButton,
-      shouldRender: (product, options) =>
-        !product.availabilityData.isInStock && (options?.forceProductAsVariation === true || !product.hasVariations),
+      condition: (product) => !product.availabilityData?.isInStock && !product.hasVariations,
     });
-    registerComponent({
-      id: CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON,
+    register("productPage", EXTENSION_NAMES.productPage.sidebarButton, {
       component: BackInStockButton,
-      shouldRender: (product) => !product.availabilityData.isInStock && !product.hasVariations,
+      condition: (product) => !product.availabilityData?.isInStock && !product.hasVariations,
     });
   }
 }

client-app/modules/push-messages/index.ts

@@ -7,15 +7,11 @@ import { MODULE_ID_PUSH_MESSAGES } from "@/core/constants/modules";
 import { loadModuleLocale } from "@/modules/utils";
 import { ROUTES } from "@/router/routes/constants";
 import { useUser } from "@/shared/account/composables/useUser";
-import { useCustomHeaderLinkComponents } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
-import { useCustomMobileHeaderComponents } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
-import { useCustomMobileMenuLinkComponents } from "@/shared/layout/composables/useCustomMobileMenuLinkComponents";
+import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
 import { pushMessagesTypePolices } from "./api/graphql/typePolices";
 import { PUSH_MESSAGES_MODULE_ENABLED_KEY, PUSH_MESSAGES_MODULE_FCM_ENABLED_KEY } from "./constants";
 import type { MenuType } from "@/core/types";
 import type { I18n } from "@/i18n";
-import type { ElementType } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
-import type { ElementType as HeaderElementType } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
 import type { DeepPartial } from "utility-types";
 import type { Router, RouteRecordRaw } from "vue-router";
 
@@ -67,17 +63,17 @@ const menuItems: DeepPartial<MenuType> = {
 const Notifications = () => import("@/modules/push-messages/pages/notifications.vue");
 const PushMessage = () => import("@/modules/push-messages/pages/push-message.vue");
 
-const menuLinkCustomElement: ElementType = {
+const menuLinkCustomElement = {
   id: "push-messages",
   component: defineAsyncComponent(() => import("./components/link-push-messages.vue")),
 };
 
-const menuLinkCustomElementMobile: ElementType = {
+const menuLinkCustomElementMobile = {
   id: "push-messages",
   component: defineAsyncComponent(() => import("./components/link-push-messages-mobile.vue")),
 };
 
-const headerWidgetCustomElementMobile: HeaderElementType = {
+const headerWidgetCustomElementMobile = {
   id: "push-messages",
   component: defineAsyncComponent(() => import("./components/push-messages-mobile.vue")),
 };
@@ -108,9 +104,7 @@ export async function init(router: Router, i18n: I18n) {
 
   if (isModuleEnabled) {
     const { mergeMenuSchema } = useNavigations();
-    const { registerCustomLinkComponent } = useCustomHeaderLinkComponents();
-    const { registerCustomLinkComponent: registerCustomMobileLinkComponent } = useCustomMobileMenuLinkComponents();
-    const { registerCustomComponent: registerCustomMobileHeaderComponent } = useCustomMobileHeaderComponents();
+    const { register } = useExtensionRegistry();
     const route: RouteRecordRaw = {
       path: "notifications",
       name: "Notifications",
@@ -120,9 +114,17 @@ export async function init(router: Router, i18n: I18n) {
     cache.policies.addTypePolicies(pushMessagesTypePolices);
     mergeMenuSchema(menuItems);
     void loadModuleLocale(i18n, "push-messages");
-    registerCustomLinkComponent(menuLinkCustomElement);
-    registerCustomMobileLinkComponent(menuLinkCustomElementMobile);
-    registerCustomMobileHeaderComponent(headerWidgetCustomElementMobile);
+
+    register("headerMenu", "push-messages", {
+      component: menuLinkCustomElement.component,
+    });
+    register("mobileMenu", "push-messages", {
+      component: menuLinkCustomElementMobile.component,
+    });
+    register("mobileHeader", "push-messages", {
+      component: headerWidgetCustomElementMobile.component,
+    });
+
     router.addRoute("Account", route); // NOTE: This route must be added before any asynchronous calls. Delaying it can cause a 404 error if accessed prematurely.
   }
 

client-app/shared/catalog/components/product-card.vue

@@ -64,15 +64,12 @@
       :single-line="viewMode === 'grid'"
     />
 
-    <component
-      :is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
-      v-if="
-        isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
-        shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, product)
-      "
+    <ExtensionPoint
+      v-if="$canRenderExtensionPoint('productCard', EXTENSION_NAMES.productCard.cardButton, product)"
+      :name="EXTENSION_NAMES.productCard.cardButton"
+      category="productCard"
       :product="product"
       is-text-shown
-      v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
     />
 
     <VcProductButton
@@ -158,8 +155,7 @@ import {
 import { useProductVariations } from "@/shared/catalog/composables/useProductVariations";
 import { useProducts } from "@/shared/catalog/composables/useProducts";
 import { PRODUCT_VARIATIONS_LAYOUT_PROPERTY_NAME } from "@/shared/catalog/constants/product";
-import { useCustomProductComponents } from "@/shared/common/composables/useCustomProductComponents";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import { AddToCompareCatalog } from "@/shared/compare/components";
 import { AddToList } from "@/shared/wishlists";
 import BadgesWrapper from "./badges-wrapper.vue";
@@ -197,8 +193,6 @@ const productCard = useTemplateRef("productCard");
 
 const { browserTarget: browserTargetFromSetting } = useBrowserTarget();
 
-const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
-
 const { isEnabled } = useModuleSettings(CUSTOMER_REVIEWS_MODULE_ID);
 const productReviewsEnabled = isEnabled(CUSTOMER_REVIEWS_ENABLED_KEY);
 

client-app/shared/catalog/components/product-price.vue

@@ -85,14 +85,11 @@
     </div>
 
     <div class="mt-4 print:hidden">
-      <component
-        :is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON)"
-        v-if="
-          isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON) &&
-          shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON, product)
-        "
+      <ExtensionPoint
+        v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.sidebarButton, product)"
+        :name="EXTENSION_NAMES.productPage.sidebarButton"
+        category="productPage"
         :product="product"
-        v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON)"
       />
 
       <component v-else :is="product.isConfigurable ? AddToCart : AddToCartSimple" :product="product">
@@ -117,8 +114,7 @@ import { useShortCart } from "@/shared/cart/composables";
 import { useConfigurableProduct } from "@/shared/catalog/composables";
 import { useProductVariationProperties } from "@/shared/catalog/composables/useProductVariationProperties";
 import { PRODUCT_VARIATIONS_LAYOUT_PROPERTY_VALUES } from "@/shared/catalog/constants/product";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import CountInCart from "./count-in-cart.vue";
 import InStock from "./in-stock.vue";
 import Price from "./price.vue";
@@ -139,7 +135,6 @@ const variations = toRef(props, "variations");
 
 const { cart } = useShortCart();
 const { configuredLineItem, loading: configuredLineItemLoading } = useConfigurableProduct(product.value.id);
-const { getComponent, isComponentRegistered, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
 const { variationResult } = useProductVariationProperties(computed(() => variations.value ?? []));
 
 const isDigital = computed<boolean>(() => props.product.productType === ProductType.Digital);

client-app/shared/common/constants/index.ts

@@ -1 +1,2 @@
 export * from "./customProductComponents";
+export * from "./extensionPointsNames";

client-app/shared/layout/components/header/_internal/bottom-header.vue

@@ -42,7 +42,9 @@
 
       <ul class="-mx-2 flex items-center">
         <li v-for="item in desktopMainMenuItems" :key="item.id">
-          <component :is="(item.id && customLinkComponents[item.id]) || LinkDefault" :item="item" />
+          <ExtensionPoint category="headerMenu" :name="item.id" :item="item">
+            <LinkDefault :item="item" />
+          </ExtensionPoint>
         </li>
       </ul>
     </nav>
@@ -79,7 +81,6 @@ import { useRoute, useRouter } from "vue-router";
 import { useNavigations, useWhiteLabeling } from "@/core/composables";
 import { useUser } from "@/shared/account/composables/useUser";
 import { SearchBar } from "@/shared/layout";
-import { useCustomHeaderLinkComponents } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
 import CatalogMenu from "./catalog-menu.vue";
 import type { StyleValue } from "vue";
 import LinkDefault from "@/shared/layout/components/header/_internal/link-components/link-default.vue";
@@ -94,7 +95,6 @@ const router = useRouter();
 const { organization } = useUser();
 const { logoUrl } = useWhiteLabeling();
 const { catalogMenuItems, desktopMainMenuItems } = useNavigations();
-const { customLinkComponents } = useCustomHeaderLinkComponents();
 
 const bottomHeader = ref<HTMLElement | null>(null);
 const catalogMenuElement = shallowRef<HTMLElement | null>(null);

client-app/shared/layout/components/header/_internal/mobile-header.vue

@@ -53,7 +53,7 @@
               <VcIcon class="fill-primary" name="search" :size="28" />
             </button>
 
-            <component :is="item" v-for="(item, index) in customComponents" :key="index" class="px-1 py-2 xs:px-2" />
+            <ExtensionPointList category="mobileHeader" class="px-1 py-2 xs:px-2" />
 
             <router-link
               :to="{ name: ROUTES.CART.NAME }"
@@ -148,7 +148,6 @@ import { QueryParamName } from "@/core/enums";
 import { ROUTES } from "@/router/routes/constants";
 import { useShortCart } from "@/shared/cart";
 import { useNestedMobileHeader } from "@/shared/layout";
-import { useCustomMobileHeaderComponents } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
 import { useSearchBar } from "@/shared/layout/composables/useSearchBar";
 import { useSearchScore } from "@/shared/layout/composables/useSearchScore";
 import { ShipToSelector } from "@/shared/ship-to-location";
@@ -159,7 +158,6 @@ import BarcodeScanner from "@/shared/layout/components/search-bar/barcode-scanne
 
 const router = useRouter();
 
-const { customComponents } = useCustomMobileHeaderComponents();
 const searchPhrase = ref("");
 const searchPhraseInUrl = useRouteQueryParam<string>(QueryParamName.SearchPhrase);
 const mobileMenuVisible = ref(false);

client-app/shared/layout/components/header/_internal/mobile-menu/menus/default-menu.vue

@@ -1,42 +1,38 @@
 <template>
   <ul class="mt-4 flex grow flex-col gap-y-2">
     <li v-for="item in items" :key="item.title">
-      <template v-if="item.id && customLinkComponents[item.id]">
-        <component
-          :is="item.id && customLinkComponents[item.id]"
-          :item="item"
-          @close="$emit('close')"
-          @select-item="$emit('selectItem', item)"
-        />
-      </template>
-      <MobileMenuLink
-        v-else
-        :link="item"
-        :format-text-function="capitalize"
-        class="py-1 text-lg"
+      <ExtensionPoint
+        category="mobileMenu"
+        :name="item.id"
+        :item="item"
         @close="$emit('close')"
-        @select="$emit('selectItem', item)"
+        @select-item="$emit('selectItem', item)"
       >
-        <template #default="{ formattedText }">
-          {{ formattedText }}
-        </template>
-      </MobileMenuLink>
+        <MobileMenuLink
+          :link="item"
+          :format-text-function="capitalize"
+          class="py-1 text-lg"
+          @close="$emit('close')"
+          @select="$emit('selectItem', item)"
+        >
+          <template #default="{ formattedText }">
+            {{ formattedText }}
+          </template>
+        </MobileMenuLink>
+      </ExtensionPoint>
     </li>
   </ul>
 </template>
 
 <script setup lang="ts">
 import { capitalize } from "lodash";
-import { useCustomMobileMenuLinkComponents } from "@/shared/layout/composables/useCustomMobileMenuLinkComponents";
 import type { ExtendedMenuLinkType } from "@/core/types";
 import MobileMenuLink from "@/shared/layout/components/header/_internal/mobile-menu/mobile-menu-link.vue";
 
 defineEmits<IEmits>();
 
 defineProps<IProps>();
 
-const { customLinkComponents } = useCustomMobileMenuLinkComponents();
-
 interface IProps {
   items: ExtendedMenuLinkType[];
 }

client-app/shared/layout/components/header/_internal/mobile-menu/menus/main-menu.vue

@@ -6,13 +6,17 @@
           {{ menuItem.title }}
         </MobileMenuLink>
       </li>
+
       <li v-for="item in mobileMainMenuItems" :key="item.title">
-        <component
-          :is="(item.id && customLinkComponents[item.id]) || LinkDefault"
+        <ExtensionPoint
+          category="mobileMenu"
+          :name="item.id"
           :item="item"
           @close="$emit('close')"
           @select-item="$emit('selectItem', item)"
-        />
+        >
+          <LinkDefault :item="item" @close="$emit('close')" @select-item="$emit('selectItem', item)" />
+        </ExtensionPoint>
       </li>
     </ul>
 
@@ -24,6 +28,7 @@
             class="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full ring-2 ring-accent-300"
           >
             <VcImage v-if="user.photoUrl" :src="user.photoUrl" :alt="user.contact?.fullName" class="size-12" lazy />
+
             <VcIcon v-else name="user" />
           </div>
 
@@ -112,10 +117,7 @@ import { useI18n } from "vue-i18n";
 import { useCurrency, useNavigations } from "@/core/composables";
 import { ROUTES } from "@/router/routes/constants";
 import { useSignMeOut, useUser } from "@/shared/account";
-import { useCustomMobileMenuLinkComponents } from "@/shared/layout/composables/useCustomMobileMenuLinkComponents";
 import type { ExtendedMenuLinkType } from "@/core/types";
-import LinkCart from "@/shared/layout/components/header/_internal/mobile-menu/link-components/link-cart.vue";
-import LinkCompare from "@/shared/layout/components/header/_internal/mobile-menu/link-components/link-compare.vue";
 import LinkDefault from "@/shared/layout/components/header/_internal/mobile-menu/link-components/link-default.vue";
 import MobileMenuLink from "@/shared/layout/components/header/_internal/mobile-menu/mobile-menu-link.vue";
 
@@ -136,10 +138,6 @@ const { user, operator, isAuthenticated, isCorporateMember } = useUser();
 const { mobileMainMenuItems, mobileCorporateMenuItem, mobileAccountMenuItem } = useNavigations();
 const { t } = useI18n();
 const { supportedCurrencies } = useCurrency();
-const { registerCustomLinkComponent, customLinkComponents } = useCustomMobileMenuLinkComponents();
-
-registerCustomLinkComponent({ id: "cart", component: LinkCart });
-registerCustomLinkComponent({ id: "compare", component: LinkCompare });
 
 const unauthorizedMenuItems: ExtendedMenuLinkType[] = [
   { route: { name: ROUTES.SIGN_IN.NAME }, title: t("shared.layout.header.link_sign_in") },