Merge branch 'dev' into feat/custom-cart

client-app/pages/matcher/matcher.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="matcher">
-    <VirtoPages
-      v-if="previewers.virtoPages.isActive"
-      :is-visible="visibleComponent === 'virtoPages'"
-      :path-match="pathMatch || ['/']"
-      @set-state="updateState($event, 'virtoPages')"
-    />
     <SlugContent
       v-if="previewers.slugContent.isActive"
       :is-visible="visibleComponent === 'slugContent'"
@@ -44,13 +38,11 @@ interface IProps {
 defineProps<IProps>();
 
 const DEFAULT_PRIORITIES = {
-  virtoPages: 1,
-  builderIo: 2,
-  slugContent: 3,
-  internal: 4,
+  builderIo: 1,
+  slugContent: 2,
+  internal: 3,
 };
 
-const VirtoPages = defineAsyncComponent(() => import("@/pages/matcher/virto-pages/virto-pages.vue"));
 const BuilderIo = defineAsyncComponent(() => import("@/pages/matcher/builderIo/builder-io.vue"));
 const SlugContent = defineAsyncComponent(() => import("@/pages/matcher/slug-content.vue"));
 const Internal = defineAsyncComponent(() => import("@/pages/matcher/internal.vue"));
@@ -71,23 +63,12 @@ const isBuilderIOEnabled = computed(() => {
   return moduleSettings.value?.settings.find((el) => el.name === "BuilderIO.Enable")?.value as boolean;
 });
 
-const isVirtoPagesEnabled = computed(() => {
-  const pagesSettings = modulesSettings.value?.find((el) => el.moduleId === "VirtoCommerce.Pages")
-  return pagesSettings?.settings.find((el) => el.name === "VirtoPages.Enable")?.value as boolean;
-});
-
 const builderIoApiKey = computed(() => {
   return moduleSettings.value?.settings.find((el) => el.name === "BuilderIO.PublicApiKey")?.value as string;
 });
 
 // The highest priority has the previewer whose 'priority' value is closer to zero
 const previewers = ref<{ [key in string]: PreviewerStateType }>({
-  virtoPages: {
-    id: "virtoPages",
-    priority: PRIORITIES.value.virtoPages,
-    state: "initial",
-    isActive: isVirtoPagesEnabled.value,
-  },
   builderIo: {
     id: "builderIo",
     priority: PRIORITIES.value.builderIo,

client-app/pages/matcher/slug-content.vue

@@ -1,7 +1,8 @@
 <template>
-  <div v-if="isVisible && !loading && (hasContent || objectType)" class="slug-content">
+  <div v-if="isVisible && !loading && (hasContent || objectType || hasPageDocumentContent)" class="slug-content">
     <CategoryComponent v-if="objectType === 'Category'" :category-id="slugInfo?.entityInfo?.objectId" allow-set-meta />
     <Product v-else-if="objectType === 'CatalogProduct'" :product-id="slugInfo?.entityInfo?.objectId" allow-set-meta />
+    <VirtoPage v-else-if="hasPageDocumentContent" :page-document="pageDocumentContent" />
     <StaticPage v-else-if="hasContent" />
   </div>
 </template>
@@ -29,6 +30,7 @@ const props = defineProps<IProps>();
 
 const CategoryComponent = defineAsyncComponent(() => import("@/pages/category.vue"));
 const Product = defineAsyncComponent(() => import("@/pages/product.vue"));
+const VirtoPage = defineAsyncComponent(() => import("@/pages/matcher/virto-pages/virto-pages.vue"));
 const StaticPage = defineAsyncComponent(() => import("@/pages/static-page.vue"));
 
 const { setMatchingRouteName } = useNavigations();
@@ -44,19 +46,32 @@ const seoUrl = computedEager(() => {
   return paths.join("/");
 });
 
-const { loading, slugInfo, objectType, hasContent, pageContent, fetchContent } = useSlugInfo(seoUrl);
+const {
+  loading,
+  slugInfo,
+  objectType,
+  hasContent,
+  hasPageDocumentContent,
+  pageDocumentContent,
+  pageContent,
+  fetchContent,
+  fetchPageDocumentContent,
+} = useSlugInfo(seoUrl);
 
 enum ObjectType {
   CatalogProduct = "CatalogProduct",
   Category = "Category",
   ContentFile = "ContentFile",
+  VirtoPages = "Pages",
 }
 
 watchEffect(() => {
   if (loading.value) {
     emit("setState", "loading");
   } else if ([ObjectType.Category, ObjectType.CatalogProduct].includes(objectType.value as ObjectType)) {
     emit("setState", "ready");
+  } else if (pageDocumentContent.value) {
+    emit("setState", "ready");
   } else if (pageContent.value) {
     emit("setState", "ready");
   } else {
@@ -76,6 +91,9 @@ watch(slugInfo, () => {
     case ObjectType.ContentFile:
       void fetchContent();
       break;
+    case ObjectType.VirtoPages:
+      void fetchPageDocumentContent();
+      break;
     default:
       clearState();
   }

client-app/pages/matcher/virto-pages/virto-pages.vue

@@ -1,68 +1,20 @@
 <template>
   <div>
-    <VPBuilderIO v-if="isBulderIOContent" :content="pageDocumentContent?.content" />
+    <VPBuilderIO v-if="isBulderIOContent" :content="pageDocument?.content" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computedEager } from "@vueuse/core";
-import { computed, watch, watchEffect } from "vue";
-import { useSlugInfo } from "@/shared/common";
+import { computed } from "vue";
 import VPBuilderIO from "@/pages/matcher/virto-pages/vp-builder-io.vue";
-import type { StateType } from "@/pages/matcher/priorityManager";
 
 interface IProps {
-  pathMatch?: string[];
-  isVisible?: boolean;
-  // pageDocument: { id: string; source?: string; permalink?: string; content: string } | null;
-}
-
-interface IEmits {
-  (event: "setState", value: StateType): void;
+  pageDocument: { id: string; source?: string; permalink?: string; content: string } | null;
 }
 
 const props = defineProps<IProps>();
-const emit = defineEmits<IEmits>();
-
-const seoUrl = computedEager(() => {
-  if (!props.pathMatch) {
-    return "/";
-  }
-  // Because URL `/printers/` is an array of paths ["printers", ""], empty paths must be removed.
-  const paths = props.pathMatch.filter(Boolean);
-  return paths.join("/");
-});
-
-const {
-  loading,
-  slugInfo,
-  objectType,
-  hasPageDocumentContent,
-  pageDocumentContent,
-  fetchPageDocumentContent,
-} = useSlugInfo(seoUrl);
 
 const isBulderIOContent = computed(() => {
-  return objectType.value === "Pages"
-    && hasPageDocumentContent.value
-    && pageDocumentContent.value?.source === "builder.io";
+  return props.pageDocument?.source === "builder.io";
 });
-
-watchEffect(() => {
-  if (loading.value) {
-    emit("setState", "loading");
-  } else if (pageDocumentContent.value) {
-    emit("setState", "ready");
-  } else {
-    emit("setState", "empty");
-  }
-});
-
-watch(slugInfo, () => {
-  const type = slugInfo.value?.entityInfo?.objectType;
-  if (type === 'Pages') {
-    void fetchPageDocumentContent();
-  }
-});
-
 </script>

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

@@ -3,12 +3,11 @@ import { useGetPage, useGetPageDocument, useGetSlugInfo } from "@/core/api/graph
 import { globals } from "@/core/globals";
 import type { PageTemplate } from "@/shared/static-content";
 import type { MaybeRefOrGetter } from "vue";
-import { createGlobalState } from "@vueuse/core";
 
 /**
  * @param seoUrl path after domain without slash at the beginning
  **/
-function _useSlugInfo(seoUrl: MaybeRefOrGetter<string>) {
+export function useSlugInfo(seoUrl: MaybeRefOrGetter<string>) {
   const { storeId, userId, cultureName } = globals;
   const variables = computed(() => {
     return {
@@ -114,5 +113,3 @@ function _useSlugInfo(seoUrl: MaybeRefOrGetter<string>) {
     fetchPageDocumentContent: loadPageDocumentContent,
   };
 }
-
-export const useSlugInfo = createGlobalState(_useSlugInfo);

package.json

@@ -6,7 +6,7 @@
     "url": "https://virtocommerce.com"
   },
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "private": true,
   "type": "module",
   "scripts": {