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,17 @@ 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,
+    });
+    register("productPage", EXTENSION_NAMES.productPage.variationItemButton, {
+      component: BackInStockButton,
+      condition: (product) => !product.availabilityData?.isInStock,
     });
   }
 }

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/catalog/components/product/variations-default.vue

@@ -16,16 +16,11 @@
         with-properties
         show-placed-price
       >
-        <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, variation, {
-              forceProductAsVariation: true,
-            })
-          "
+        <ExtensionPoint
+          :name="EXTENSION_NAMES.productPage.variationItemButton"
+          category="productPage"
           :product="variation"
-          v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
+          v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.variationItemButton, variation)"
         />
 
         <AddToCartSimple v-else :product="variation">
@@ -56,8 +51,7 @@ import { PropertyType } from "@/core/api/graphql/types";
 import { useBrowserTarget } from "@/core/composables";
 import { getPropertiesGroupedByName } from "@/core/utilities";
 import { PRODUCT_VARIATIONS_LAYOUT_PROPERTY_NAME } 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 type { Product } from "@/core/api/graphql/types";
@@ -81,8 +75,6 @@ const pageNumber = toRef(props, "pageNumber");
 
 const { browserTarget } = useBrowserTarget();
 
-const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
-
 function getProperties(variation: Product) {
   return Object.values(
     getPropertiesGroupedByName(sortBy(variation.properties, ["displayOrder", "name"]) ?? [], PropertyType.Variation),

client-app/shared/catalog/components/product/variations-table.vue

@@ -72,16 +72,11 @@
           </td>
 
           <td class="variations-table__col variations-table__col--quantity">
-            <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, variation, {
-                  forceProductAsVariation: true,
-                })
-              "
+            <ExtensionPoint
+              :name="EXTENSION_NAMES.productPage.variationItemButton"
+              category="productPage"
               :product="variation"
-              v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
+              v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.variationItemButton, variation)"
             />
 
             <AddToCartSimple v-else :product="variation">
@@ -101,8 +96,7 @@ import { useI18n } from "vue-i18n";
 import { PropertyType } from "@/core/api/graphql/types";
 import { MAX_DISPLAY_IN_STOCK_QUANTITY } from "@/core/constants";
 import { getPropertyValue, getPropertiesGroupedByName } from "@/core/utilities";
-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 type { Product } from "@/core/api/graphql/types";
 import type { ISortInfo } from "@/core/types";
@@ -133,8 +127,6 @@ const props = defineProps<IProps>();
 
 const { t } = useI18n();
 
-const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
-
 const variations = computed(() => props.variations);
 const productProperties = computed<IProductProperties[]>(() => {
   const properties: IProductProperties[] = [];

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

@@ -1,3 +1,2 @@
-export * from "./useCustomProductComponents";
 export * from "./useGoogleMaps";
 export * from "./useSlugInfo";

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

@@ -14,6 +14,7 @@ export const EXTENSION_NAMES = merge({}, INITIAL_EXTENSION_NAMES, {
   },
   productPage: {
     sidebarButton: "sidebar-button",
+    variationItemButton: "variation-item-button",
   },
   paymentPage: {
     paymentMethods: "payment-methods",

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

@@ -1 +1 @@
-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);