Skip to content

Commit 8c35eb4

Browse files
ivan-kalachikovAleksandra-MitrichevagoldenmayaLenajava1muller39
authored
chore(VCST-3470): refactor extension points (#2067)
## Description ## References ### Jira-link: https://virtocommerce.atlassian.net/browse/VCST-3470 ### Artifact URL: https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.36.0-pr-2067-baad-baad6653.zip --------- Co-authored-by: Aleksandra-Mitricheva <[email protected]> Co-authored-by: Maiia Diachkovskaia <[email protected]> Co-authored-by: Elena Mutykova <[email protected]> Co-authored-by: Alexander Kurilin <[email protected]>
1 parent 3577339 commit 8c35eb4

File tree

19 files changed

+226
-410
lines changed

19 files changed

+226
-410
lines changed

‎backend-packages.json‎

Lines changed: 150 additions & 151 deletions
Large diffs are not rendered by default.

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { defineAsyncComponent } from "vue";
22
import { useNavigations } from "@/core/composables";
33
import { useModuleSettings } from "@/core/composables/useModuleSettings";
44
import { useUser } from "@/shared/account/composables";
5-
import { useCustomProductComponents } from "@/shared/common/composables";
6-
import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
5+
import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
6+
import { EXTENSION_NAMES } from "@/shared/common/constants";
77
import { loadModuleLocale } from "../utils";
88
import { MODULE_ID, ENABLED_KEY } from "./constants";
99
import type { MenuType } from "@/core/types";
@@ -17,7 +17,7 @@ const BackInStockButton = defineAsyncComponent(() => import("./components/back-i
1717

1818
const { isEnabled } = useModuleSettings(MODULE_ID);
1919
const { mergeMenuSchema } = useNavigations();
20-
const { registerComponent } = useCustomProductComponents();
20+
const { register } = useExtensionRegistry();
2121

2222
const route: RouteRecordRaw = {
2323
path: "back-in-stock",
@@ -64,16 +64,17 @@ export function init(router: Router, i18n: I18n) {
6464
}
6565
if (isAuthenticated.value && isEnabled(ENABLED_KEY)) {
6666
mergeMenuSchema(menuItems);
67-
registerComponent({
68-
id: CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON,
67+
register("productCard", EXTENSION_NAMES.productCard.cardButton, {
6968
component: BackInStockButton,
70-
shouldRender: (product, options) =>
71-
!product.availabilityData.isInStock && (options?.forceProductAsVariation === true || !product.hasVariations),
69+
condition: (product) => !product.availabilityData?.isInStock && !product.hasVariations,
7270
});
73-
registerComponent({
74-
id: CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON,
71+
register("productPage", EXTENSION_NAMES.productPage.sidebarButton, {
7572
component: BackInStockButton,
76-
shouldRender: (product) => !product.availabilityData.isInStock && !product.hasVariations,
73+
condition: (product) => !product.availabilityData?.isInStock && !product.hasVariations,
74+
});
75+
register("productPage", EXTENSION_NAMES.productPage.variationItemButton, {
76+
component: BackInStockButton,
77+
condition: (product) => !product.availabilityData?.isInStock,
7778
});
7879
}
7980
}

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,11 @@ import { MODULE_ID_PUSH_MESSAGES } from "@/core/constants/modules";
77
import { loadModuleLocale } from "@/modules/utils";
88
import { ROUTES } from "@/router/routes/constants";
99
import { useUser } from "@/shared/account/composables/useUser";
10-
import { useCustomHeaderLinkComponents } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
11-
import { useCustomMobileHeaderComponents } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
12-
import { useCustomMobileMenuLinkComponents } from "@/shared/layout/composables/useCustomMobileMenuLinkComponents";
10+
import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
1311
import { pushMessagesTypePolices } from "./api/graphql/typePolices";
1412
import { PUSH_MESSAGES_MODULE_ENABLED_KEY, PUSH_MESSAGES_MODULE_FCM_ENABLED_KEY } from "./constants";
1513
import type { MenuType } from "@/core/types";
1614
import type { I18n } from "@/i18n";
17-
import type { ElementType } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
18-
import type { ElementType as HeaderElementType } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
1915
import type { DeepPartial } from "utility-types";
2016
import type { Router, RouteRecordRaw } from "vue-router";
2117

@@ -67,17 +63,17 @@ const menuItems: DeepPartial<MenuType> = {
6763
const Notifications = () => import("@/modules/push-messages/pages/notifications.vue");
6864
const PushMessage = () => import("@/modules/push-messages/pages/push-message.vue");
6965

70-
const menuLinkCustomElement: ElementType = {
66+
const menuLinkCustomElement = {
7167
id: "push-messages",
7268
component: defineAsyncComponent(() => import("./components/link-push-messages.vue")),
7369
};
7470

75-
const menuLinkCustomElementMobile: ElementType = {
71+
const menuLinkCustomElementMobile = {
7672
id: "push-messages",
7773
component: defineAsyncComponent(() => import("./components/link-push-messages-mobile.vue")),
7874
};
7975

80-
const headerWidgetCustomElementMobile: HeaderElementType = {
76+
const headerWidgetCustomElementMobile = {
8177
id: "push-messages",
8278
component: defineAsyncComponent(() => import("./components/push-messages-mobile.vue")),
8379
};
@@ -108,9 +104,7 @@ export async function init(router: Router, i18n: I18n) {
108104

109105
if (isModuleEnabled) {
110106
const { mergeMenuSchema } = useNavigations();
111-
const { registerCustomLinkComponent } = useCustomHeaderLinkComponents();
112-
const { registerCustomLinkComponent: registerCustomMobileLinkComponent } = useCustomMobileMenuLinkComponents();
113-
const { registerCustomComponent: registerCustomMobileHeaderComponent } = useCustomMobileHeaderComponents();
107+
const { register } = useExtensionRegistry();
114108
const route: RouteRecordRaw = {
115109
path: "notifications",
116110
name: "Notifications",
@@ -120,9 +114,17 @@ export async function init(router: Router, i18n: I18n) {
120114
cache.policies.addTypePolicies(pushMessagesTypePolices);
121115
mergeMenuSchema(menuItems);
122116
void loadModuleLocale(i18n, "push-messages");
123-
registerCustomLinkComponent(menuLinkCustomElement);
124-
registerCustomMobileLinkComponent(menuLinkCustomElementMobile);
125-
registerCustomMobileHeaderComponent(headerWidgetCustomElementMobile);
117+
118+
register("headerMenu", "push-messages", {
119+
component: menuLinkCustomElement.component,
120+
});
121+
register("mobileMenu", "push-messages", {
122+
component: menuLinkCustomElementMobile.component,
123+
});
124+
register("mobileHeader", "push-messages", {
125+
component: headerWidgetCustomElementMobile.component,
126+
});
127+
126128
router.addRoute("Account", route); // NOTE: This route must be added before any asynchronous calls. Delaying it can cause a 404 error if accessed prematurely.
127129
}
128130

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,12 @@
6464
:single-line="viewMode === 'grid'"
6565
/>
6666

67-
<component
68-
:is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
69-
v-if="
70-
isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
71-
shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, product)
72-
"
67+
<ExtensionPoint
68+
v-if="$canRenderExtensionPoint('productCard', EXTENSION_NAMES.productCard.cardButton, product)"
69+
:name="EXTENSION_NAMES.productCard.cardButton"
70+
category="productCard"
7371
:product="product"
7472
is-text-shown
75-
v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
7673
/>
7774

7875
<VcProductButton
@@ -158,8 +155,7 @@ import {
158155
import { useProductVariations } from "@/shared/catalog/composables/useProductVariations";
159156
import { useProducts } from "@/shared/catalog/composables/useProducts";
160157
import { PRODUCT_VARIATIONS_LAYOUT_PROPERTY_NAME } from "@/shared/catalog/constants/product";
161-
import { useCustomProductComponents } from "@/shared/common/composables/useCustomProductComponents";
162-
import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
158+
import { EXTENSION_NAMES } from "@/shared/common/constants";
163159
import { AddToCompareCatalog } from "@/shared/compare/components";
164160
import { AddToList } from "@/shared/wishlists";
165161
import BadgesWrapper from "./badges-wrapper.vue";
@@ -197,8 +193,6 @@ const productCard = useTemplateRef("productCard");
197193
198194
const { browserTarget: browserTargetFromSetting } = useBrowserTarget();
199195
200-
const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
201-
202196
const { isEnabled } = useModuleSettings(CUSTOMER_REVIEWS_MODULE_ID);
203197
const productReviewsEnabled = isEnabled(CUSTOMER_REVIEWS_ENABLED_KEY);
204198

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,11 @@
8585
</div>
8686

8787
<div class="mt-4 print:hidden">
88-
<component
89-
:is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON)"
90-
v-if="
91-
isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON) &&
92-
shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON, product)
93-
"
88+
<ExtensionPoint
89+
v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.sidebarButton, product)"
90+
:name="EXTENSION_NAMES.productPage.sidebarButton"
91+
category="productPage"
9492
:product="product"
95-
v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON)"
9693
/>
9794

9895
<component v-else :is="product.isConfigurable ? AddToCart : AddToCartSimple" :product="product">
@@ -117,8 +114,7 @@ import { useShortCart } from "@/shared/cart/composables";
117114
import { useConfigurableProduct } from "@/shared/catalog/composables";
118115
import { useProductVariationProperties } from "@/shared/catalog/composables/useProductVariationProperties";
119116
import { PRODUCT_VARIATIONS_LAYOUT_PROPERTY_VALUES } from "@/shared/catalog/constants/product";
120-
import { useCustomProductComponents } from "@/shared/common/composables";
121-
import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
117+
import { EXTENSION_NAMES } from "@/shared/common/constants";
122118
import CountInCart from "./count-in-cart.vue";
123119
import InStock from "./in-stock.vue";
124120
import Price from "./price.vue";
@@ -139,7 +135,6 @@ const variations = toRef(props, "variations");
139135
140136
const { cart } = useShortCart();
141137
const { configuredLineItem, loading: configuredLineItemLoading } = useConfigurableProduct(product.value.id);
142-
const { getComponent, isComponentRegistered, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
143138
const { variationResult } = useProductVariationProperties(computed(() => variations.value ?? []));
144139
145140
const isDigital = computed<boolean>(() => props.product.productType === ProductType.Digital);

‎client-app/shared/catalog/components/product/variations-default.vue‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,11 @@
1616
with-properties
1717
show-placed-price
1818
>
19-
<component
20-
:is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
21-
v-if="
22-
isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
23-
shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, variation, {
24-
forceProductAsVariation: true,
25-
})
26-
"
19+
<ExtensionPoint
20+
:name="EXTENSION_NAMES.productPage.variationItemButton"
21+
category="productPage"
2722
:product="variation"
28-
v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
23+
v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.variationItemButton, variation)"
2924
/>
3025

3126
<AddToCartSimple v-else :product="variation">
@@ -56,8 +51,7 @@ import { PropertyType } from "@/core/api/graphql/types";
5651
import { useBrowserTarget } from "@/core/composables";
5752
import { getPropertiesGroupedByName } from "@/core/utilities";
5853
import { PRODUCT_VARIATIONS_LAYOUT_PROPERTY_NAME } from "@/shared/catalog/constants/product";
59-
import { useCustomProductComponents } from "@/shared/common/composables";
60-
import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
54+
import { EXTENSION_NAMES } from "@/shared/common/constants";
6155
import CountInCart from "../count-in-cart.vue";
6256
import InStock from "../in-stock.vue";
6357
import type { Product } from "@/core/api/graphql/types";
@@ -81,8 +75,6 @@ const pageNumber = toRef(props, "pageNumber");
8175
8276
const { browserTarget } = useBrowserTarget();
8377
84-
const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
85-
8678
function getProperties(variation: Product) {
8779
return Object.values(
8880
getPropertiesGroupedByName(sortBy(variation.properties, ["displayOrder", "name"]) ?? [], PropertyType.Variation),

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,11 @@
7272
</td>
7373

7474
<td class="variations-table__col variations-table__col--quantity">
75-
<component
76-
:is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
77-
v-if="
78-
isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
79-
shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, variation, {
80-
forceProductAsVariation: true,
81-
})
82-
"
75+
<ExtensionPoint
76+
:name="EXTENSION_NAMES.productPage.variationItemButton"
77+
category="productPage"
8378
:product="variation"
84-
v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
79+
v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.variationItemButton, variation)"
8580
/>
8681

8782
<AddToCartSimple v-else :product="variation">
@@ -101,8 +96,7 @@ import { useI18n } from "vue-i18n";
10196
import { PropertyType } from "@/core/api/graphql/types";
10297
import { MAX_DISPLAY_IN_STOCK_QUANTITY } from "@/core/constants";
10398
import { getPropertyValue, getPropertiesGroupedByName } from "@/core/utilities";
104-
import { useCustomProductComponents } from "@/shared/common/composables";
105-
import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
99+
import { EXTENSION_NAMES } from "@/shared/common/constants";
106100
import CountInCart from "../count-in-cart.vue";
107101
import type { Product } from "@/core/api/graphql/types";
108102
import type { ISortInfo } from "@/core/types";
@@ -133,8 +127,6 @@ const props = defineProps<IProps>();
133127
134128
const { t } = useI18n();
135129
136-
const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
137-
138130
const variations = computed(() => props.variations);
139131
const productProperties = computed<IProductProperties[]>(() => {
140132
const properties: IProductProperties[] = [];

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
export * from "./useCustomProductComponents";
21
export * from "./useGoogleMaps";
32
export * from "./useSlugInfo";

‎client-app/shared/common/composables/useCustomProductComponents.ts‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎client-app/shared/common/constants/customProductComponents.ts‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)