From 5ed19535cdc3b07a8ac89b003e4e6c11a7b7fc42 Mon Sep 17 00:00:00 2001
From: Andrew Orlov <andrew.orlov@outlook.com>
Date: Wed, 20 Nov 2024 09:23:34 +0200
Subject: [PATCH 1/4] fix: make catalog slug seo friendly

---
 client-app/pages/matcher/slug-content.vue | 22 +++++++++++++++++++---
 client-app/router/routes/main.ts          |  2 --
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/client-app/pages/matcher/slug-content.vue b/client-app/pages/matcher/slug-content.vue
index fe382b885c..a2f91a3036 100644
--- a/client-app/pages/matcher/slug-content.vue
+++ b/client-app/pages/matcher/slug-content.vue
@@ -1,7 +1,19 @@
 <template>
   <div v-if="isVisible && !loading && (hasContent || objectType)" 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 />
+    <CatalogComponent v-if="objectType === ObjectType.Catalog" />
+
+    <CategoryComponent
+      v-else-if="objectType === ObjectType.Category"
+      :category-id="slugInfo?.entityInfo?.objectId"
+      allow-set-meta
+    />
+
+    <Product
+      v-else-if="objectType === ObjectType.CatalogProduct"
+      :product-id="slugInfo?.entityInfo?.objectId"
+      allow-set-meta
+    />
+
     <StaticPage v-else-if="hasContent" />
   </div>
 </template>
@@ -27,6 +39,7 @@ const emit = defineEmits<IEmits>();
 
 const props = defineProps<IProps>();
 
+const CatalogComponent = defineAsyncComponent(() => import("@/pages/catalog.vue"));
 const CategoryComponent = defineAsyncComponent(() => import("@/pages/category.vue"));
 const Product = defineAsyncComponent(() => import("@/pages/product.vue"));
 const StaticPage = defineAsyncComponent(() => import("@/pages/static-page.vue"));
@@ -47,6 +60,7 @@ const seoUrl = computedEager(() => {
 const { loading, slugInfo, objectType, hasContent, pageContent, fetchContent } = useSlugInfo(seoUrl);
 
 enum ObjectType {
+  Catalog = "Catalog",
   CatalogProduct = "CatalogProduct",
   Category = "Category",
   ContentFile = "ContentFile",
@@ -55,7 +69,9 @@ enum ObjectType {
 watchEffect(() => {
   if (loading.value) {
     emit("setState", "loading");
-  } else if ([ObjectType.Category, ObjectType.CatalogProduct].includes(objectType.value as ObjectType)) {
+  } else if (
+    [ObjectType.Catalog, ObjectType.Category, ObjectType.CatalogProduct].includes(objectType.value as ObjectType)
+  ) {
     emit("setState", "ready");
   } else if (pageContent.value) {
     emit("setState", "ready");
diff --git a/client-app/router/routes/main.ts b/client-app/router/routes/main.ts
index 3c5d1fe0d3..2a23de046a 100644
--- a/client-app/router/routes/main.ts
+++ b/client-app/router/routes/main.ts
@@ -21,7 +21,6 @@ const BulkOrder = () => import("@/pages/bulk-order.vue");
 const CompareProducts = () => import("@/pages/compare-products.vue");
 const Cart = () => import("@/pages/cart.vue");
 const Search = () => import("@/pages/search.vue");
-const Catalog = () => import("@/pages/catalog.vue");
 const Category = () => import("@/pages/category.vue");
 const Product = () => import("@/pages/product.vue");
 const Branch = () => import("@/pages/branch.vue");
@@ -68,7 +67,6 @@ export const mainRoutes: RouteRecordRaw[] = [
   { path: "/cart", name: "Cart", component: Cart },
   { path: "/successful-registration", name: "Welcome", component: Welcome, meta: { public: true } },
   ...checkoutRoutes,
-  { path: "/catalog", name: "Catalog", component: Catalog, props: true },
   { path: "/category/:categoryId", name: "Category", component: Category, props: true },
   { path: "/product/:productId", name: "Product", component: Product, props: true },
 

From 59be156eedb35181404a20521d1122af21b8ccfd Mon Sep 17 00:00:00 2001
From: Andrew Orlov <andrew.orlov@outlook.com>
Date: Wed, 20 Nov 2024 09:32:07 +0200
Subject: [PATCH 2/4] fix: restore header, fix breadcrumbs

---
 client-app/pages/matcher/builderIo/customComponents.ts | 1 -
 client-app/router/routes/main.ts                       | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client-app/pages/matcher/builderIo/customComponents.ts b/client-app/pages/matcher/builderIo/customComponents.ts
index 0366064b8f..45cb35b72a 100644
--- a/client-app/pages/matcher/builderIo/customComponents.ts
+++ b/client-app/pages/matcher/builderIo/customComponents.ts
@@ -348,7 +348,6 @@ export const builderIOComponents: Array<BuilderIOComponentType> = [
       {
         name: "breadcrumbs",
         type: "list",
-        defaultValue: [{ title: "Catalog", seoPath: "/catalog" }],
         subFields: [
           {
             name: "title",
diff --git a/client-app/router/routes/main.ts b/client-app/router/routes/main.ts
index 2a23de046a..3c5d1fe0d3 100644
--- a/client-app/router/routes/main.ts
+++ b/client-app/router/routes/main.ts
@@ -21,6 +21,7 @@ const BulkOrder = () => import("@/pages/bulk-order.vue");
 const CompareProducts = () => import("@/pages/compare-products.vue");
 const Cart = () => import("@/pages/cart.vue");
 const Search = () => import("@/pages/search.vue");
+const Catalog = () => import("@/pages/catalog.vue");
 const Category = () => import("@/pages/category.vue");
 const Product = () => import("@/pages/product.vue");
 const Branch = () => import("@/pages/branch.vue");
@@ -67,6 +68,7 @@ export const mainRoutes: RouteRecordRaw[] = [
   { path: "/cart", name: "Cart", component: Cart },
   { path: "/successful-registration", name: "Welcome", component: Welcome, meta: { public: true } },
   ...checkoutRoutes,
+  { path: "/catalog", name: "Catalog", component: Catalog, props: true },
   { path: "/category/:categoryId", name: "Category", component: Category, props: true },
   { path: "/product/:productId", name: "Product", component: Product, props: true },
 

From dbf0ab81a7fc26ce9556d6538fb7104898cab0f0 Mon Sep 17 00:00:00 2001
From: Andrew Orlov <andrew.orlov@outlook.com>
Date: Wed, 20 Nov 2024 17:08:13 +0200
Subject: [PATCH 3/4] fix: catalog seo ui issues

---
 client-app/config/menu.json                   |  2 +-
 client-app/core/composables/useNavigations.ts |  2 +-
 client-app/router/index.ts                    |  2 +-
 .../header/_internal/bottom-header.vue        | 20 +++++++++----------
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/client-app/config/menu.json b/client-app/config/menu.json
index 820b568571..ff8d06a868 100644
--- a/client-app/config/menu.json
+++ b/client-app/config/menu.json
@@ -154,7 +154,7 @@
         {
           "id": "catalog",
           "route": {
-            "name": "Catalog"
+            "name": ""
           },
           "title": "shared.layout.header.menu.catalog",
           "icon": "cube",
diff --git a/client-app/core/composables/useNavigations.ts b/client-app/core/composables/useNavigations.ts
index 57f2299470..e4bc2ea496 100644
--- a/client-app/core/composables/useNavigations.ts
+++ b/client-app/core/composables/useNavigations.ts
@@ -81,7 +81,7 @@ const mobilePreSelectedMenuItem = computed<ExtendedMenuLinkType | undefined>(()
 
   let preSelectedLink: ExtendedMenuLinkType | undefined;
 
-  if (["Catalog", "Category", "Product"].some((item) => matchedRouteNames.includes(item))) {
+  if (["Category", "Product"].some((item) => matchedRouteNames.includes(item))) {
     preSelectedLink = mobileCatalogMenuItem.value;
   } else if (matchedRouteNames.includes("Account") && !matchedRouteNames.includes("Dashboard")) {
     preSelectedLink = mobileAccountMenuItem.value;
diff --git a/client-app/router/index.ts b/client-app/router/index.ts
index cb18a0a881..9b96da0b93 100644
--- a/client-app/router/index.ts
+++ b/client-app/router/index.ts
@@ -55,7 +55,7 @@ export function createRouter(options: { base: string }) {
         "ConfirmInvitation",
       ).includes(to.name!)
     ) {
-      return next(getReturnUrlValue() || { name: "Catalog" });
+      return next(getReturnUrlValue() || { name: "Home" });
     }
 
     return next();
diff --git a/client-app/shared/layout/components/header/_internal/bottom-header.vue b/client-app/shared/layout/components/header/_internal/bottom-header.vue
index 9c8bbf8c36..d7625db34f 100644
--- a/client-app/shared/layout/components/header/_internal/bottom-header.vue
+++ b/client-app/shared/layout/components/header/_internal/bottom-header.vue
@@ -17,19 +17,19 @@
       </template>
 
       <!-- Catalog button -->
-      <a
+      <VcButton
         ref="showCatalogMenuButton"
-        :href="catalogLink"
-        type="button"
-        class="flex select-none items-center rounded border-2 border-primary px-[0.8rem] py-[0.55rem] text-sm text-[--header-bottom-link-color] hover:text-[--header-bottom-link-hover-color]"
+        :append-icon="catalogMenuItems?.length ? catalogButtonIcon : undefined"
+        variant="outline"
+        class="border-primary px-[0.8rem] py-[0.55rem] text-sm"
         @click="toggleCatalogDropdown"
       >
-        <span class="font-bold uppercase tracking-wide">
+        <span
+          class="font-bold uppercase tracking-wide text-[--header-bottom-link-color] hover:text-[--header-bottom-link-hover-color]"
+        >
           {{ $t("shared.layout.header.bottom_header.catalog_menu_button") }}
         </span>
-
-        <VcIcon v-if="catalogMenuItems.length" :name="catalogButtonIcon" size="xs" class="ml-3 fill-primary" />
-      </a>
+      </VcButton>
 
       <SearchBar />
 
@@ -63,7 +63,6 @@
 <script setup lang="ts">
 import { onClickOutside, syncRefs, useElementBounding, useScrollLock } from "@vueuse/core";
 import { computed, ref, shallowRef } from "vue";
-import { useRouter } from "vue-router";
 import { useNavigations, useWhiteLabeling } from "@/core/composables";
 import { useUser } from "@/shared/account/composables/useUser";
 import { SearchBar } from "@/shared/layout";
@@ -72,7 +71,7 @@ import CatalogMenu from "./catalog-menu.vue";
 import type { StyleValue } from "vue";
 import LinkDefault from "@/shared/layout/components/header/_internal/link-components/link-default.vue";
 
-const router = useRouter();
+//const router = useRouter();
 const { organization } = useUser();
 const { logoUrl } = useWhiteLabeling();
 const { catalogMenuItems, desktopMainMenuItems } = useNavigations();
@@ -85,7 +84,6 @@ const catalogMenuVisible = ref(false);
 
 const { bottom } = useElementBounding(bottomHeader);
 
-const catalogLink = router.resolve({ name: "Catalog" }).fullPath;
 const catalogButtonIcon = computed<string>(() => (catalogMenuVisible.value ? "chevron-up" : "chevron-down"));
 const catalogMenuStyle = computed<StyleValue | undefined>(() =>
   bottom.value ? { maxHeight: `calc(100vh - ${bottom.value}px)` } : undefined,

From 733d393c601b39e5f9bf070f5824f8f4de8bc979 Mon Sep 17 00:00:00 2001
From: Andrew Orlov <andrew.orlov@outlook.com>
Date: Wed, 27 Nov 2024 08:37:15 +0200
Subject: [PATCH 4/4] fix: ui issues

---
 client-app/config/menu.json                                    | 3 ---
 .../header/_internal/mobile-menu/mobile-menu-link.vue          | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/client-app/config/menu.json b/client-app/config/menu.json
index ff8d06a868..2da6e869e4 100644
--- a/client-app/config/menu.json
+++ b/client-app/config/menu.json
@@ -153,9 +153,6 @@
       "main": [
         {
           "id": "catalog",
-          "route": {
-            "name": ""
-          },
           "title": "shared.layout.header.menu.catalog",
           "icon": "cube",
           "isCatalogItem": true
diff --git a/client-app/shared/layout/components/header/_internal/mobile-menu/mobile-menu-link.vue b/client-app/shared/layout/components/header/_internal/mobile-menu/mobile-menu-link.vue
index 386be62a69..b8251ecd98 100644
--- a/client-app/shared/layout/components/header/_internal/mobile-menu/mobile-menu-link.vue
+++ b/client-app/shared/layout/components/header/_internal/mobile-menu/mobile-menu-link.vue
@@ -61,7 +61,7 @@ const props = withDefaults(defineProps<IProps>(), {
 });
 
 const isParent = computed<boolean>(() => !!props.link.children?.length);
-const isLink = computed<boolean>(() => !!props.link.route);
+const isLink = computed<boolean>(() => !!props.link.route || !!props.link.isCatalogItem);
 
 function click(navigate: () => Promise<void | NavigationFailure>) {
   if (isParent.value) {