@shopbite-de/storefront 1.15.0 → 1.16.1

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(grep:*)"
+    ]
+  }
+}

package/app/app.vue

@@ -1,37 +1,6 @@
 <script setup lang="ts">
-import type { Schemas } from "#shopware";
 import type { Toast } from "#ui/composables/useToast";
 
-// Composables
-const toast = useToast();
-const appConfig = useAppConfig();
-const { apiClient } = useShopwareContext();
-const { refresh: refreshToppings } = useShopBiteConfig();
-const { refreshCart } = useCart();
-const { getWishlistProducts } = useWishlist();
-
-const {
-  getNextOpeningTime,
-  isStoreOpen,
-  refresh: refreshBusinessHours,
-} = useBusinessHours();
-const { isClosedHoliday, refresh: refreshHolidays } = useHolidays();
-
-await Promise.all([refreshBusinessHours(), refreshHolidays()]);
-
-const sessionContextData = ref<Schemas["SalesChannelContext"]>();
-
-const contextResponse = await apiClient
-  .invoke("readContext get /context")
-  .catch((error) => {
-    console.error("Error fetching session context data:", error);
-    return { data: undefined };
-  });
-
-sessionContextData.value = contextResponse.data;
-useSessionContext(sessionContextData.value);
-
-// Toast configuration
 const TOAST_CONFIG = {
   open: {
     id: "currently-open",
@@ -59,6 +28,41 @@ const TOAST_CONFIG = {
   } as Partial<Toast>,
 } as const;
 
+const { apiClient } = useShopwareContext();
+const appConfig = useAppConfig();
+const router = useRouter();
+const toast = useToast();
+
+const { data: sessionContextData } = await useAsyncData(
+  "sessionContext",
+  async () => {
+    try {
+      const { data } = await apiClient.invoke("readContext get /context");
+      return data;
+    } catch (error) {
+      console.error("Failed to load session context", error);
+      return null;
+    }
+  },
+  {
+    default: () => null,
+  },
+);
+
+if (sessionContextData.value) {
+  usePrice({
+    currencyCode: sessionContextData.value.currency?.isoCode || "",
+  });
+  useSessionContext(sessionContextData.value);
+}
+
+const {
+  getNextOpeningTime,
+  isStoreOpen,
+  refresh: refreshBusinessHours,
+} = useBusinessHours();
+const { isClosedHoliday, refresh: refreshHolidays } = useHolidays();
+
 function displayStoreStatus() {
   const isOpen = isStoreOpen(undefined, isClosedHoliday);
 
@@ -75,10 +79,25 @@ function displayStoreStatus() {
   }
 }
 
-// Lifecycle
+const { refreshCart } = useCart();
+const { getWishlistProducts } = useWishlist();
+
+if (import.meta.client) {
+  // getting the wishlist products should not block SSR
+  if (!(router.currentRoute.value.name as string).includes("wishlist")) {
+    getWishlistProducts(); // initial page loading
+  }
+}
+
+const { refresh: refreshToppings } = useShopBiteConfig();
+
 onMounted(async () => {
-  await refreshToppings();
-  await Promise.all([refreshCart(), getWishlistProducts()]);
+  await Promise.all([
+    refreshHolidays(),
+    refreshBusinessHours(),
+    refreshToppings(),
+  ]);
+  refreshCart();
   displayStoreStatus();
 });
 

package/app/components/AddToWishlist.vue

@@ -8,17 +8,14 @@ const props = defineProps<{
 const { addToWishlist, isInWishlist, removeFromWishlist } = useProductWishlist(
   props.product.id,
 );
-const { getWishlistProducts } = useWishlist();
 const { trackAddToWishlist } = useTrackEvent();
 
 const toggleWishlistProduct = async () => {
   try {
     if (isInWishlist.value) {
       await removeFromWishlist();
-      await getWishlistProducts();
     } else {
       await addToWishlist();
-      await getWishlistProducts();
       trackAddToWishlist(props.product);
     }
   } catch (error) {

package/app/components/Category/Listing.vue

@@ -118,7 +118,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
     <UPage>
       <template #left>
         <UPageAside>
-          <NavigationDesktopLeft2 />
+          <NavigationDesktopLeft />
         </UPageAside>
       </template>
 
@@ -212,7 +212,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
       <template #right>
         <UPageAside>
           <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
-            <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Filter</h2>
+            <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
             <div
               v-for="filter in propertyFilters"
               :key="filter.id"

package/app/components/Navigation/{DesktopLeft2.vue → DesktopLeft.vue}

@@ -3,7 +3,7 @@ import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 import { useNavigation } from "~/composables/useNavigation";
 
-const { mainNavigation } = useNavigation(false);
+const { menuCardNavigation } = useNavigation(true);
 
 const mapCategoryToNavItem = (
   category: Schemas["Category"],
@@ -21,13 +21,13 @@ const mapCategoryToNavItem = (
 };
 
 const navItems = computed<NavigationMenuItem[]>(() => {
-  return (mainNavigation.value ?? []).map(mapCategoryToNavItem);
+  return (menuCardNavigation.value ?? []).map(mapCategoryToNavItem);
 });
 </script>
 
 <template>
   <div>
-    <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Speisekarte</h2>
+    <h2 class="text-3xl md:text-4xl mb-3 pb-2">Speisekarte</h2>
     <UNavigationMenu
       variant="link"
       orientation="vertical"

package/app/components/Navigation/MobileTop.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useNavigation } from "~/composables/useNavigation";
+
+const { menuCardMenu } = useNavigation(true);
+</script>
+
+<template>
+  <UNavigationMenu
+    class="lg:hidden"
+    orientation="horizontal"
+    :items="menuCardMenu"
+    :ui="{
+      list: 'overflow-x-auto',
+      item: 'flex-shrink-0',
+    }"
+  >
+    <template #list-leading>
+      <UIcon name="i-lucide-chevron-left" class="size-8" />
+    </template>
+    <template #list-trailing>
+      <UIcon name="i-lucide-chevron-right" class="size-8" />
+    </template>
+  </UNavigationMenu>
+</template>

package/app/components/User/LoginForm.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import * as z from "zod";
-import { useWishlist, useUser } from "@shopware/composables";
 import { ApiClientError } from "@shopware/api-client";
 import type { FormSubmitEvent } from "@nuxt/ui";
 
 const { isLoggedIn, login, user } = useUser();
-const { mergeWishlistProducts } = useWishlist();
 const toast = useToast();
 
 const props = withDefaults(
@@ -64,10 +62,9 @@ async function onSubmit(payload: FormSubmitEvent<Schema>) {
     toast.add({
       title:
         "Hallo " + user.value?.firstName + " " + user.value?.lastName + "!",
-      description: "Erfolreich angemeldet.",
+      description: "Erfolgreich angemeldet.",
       color: "success",
     });
-    mergeWishlistProducts();
     emit("login-success", payload.data.email);
   } catch (error) {
     console.error("Login failed:", error);

package/app/composables/useNavigation.ts

@@ -4,6 +4,10 @@ import type { Schemas } from "#shopware";
 
 export function useNavigation(withChildren: boolean | undefined) {
   const { apiClient } = useShopwareContext();
+  const config = useRuntimeConfig();
+  const menuCategoryId = computed(
+    () => config.public.shopBite.menuCategoryId ?? "main-navigation",
+  );
 
   const criteria = encodeForQuery({
     includes: {
@@ -77,10 +81,36 @@ export function useNavigation(withChildren: boolean | undefined) {
     return footerNavigation.value?.map(mapCategoryToMenuItem);
   });
 
+  const { data: menuCardNavigation } = useAsyncData(
+    "menu-category",
+    async () => {
+      const response = await apiClient.invoke(
+        "readNavigationGet get /navigation/{activeId}/{rootId}",
+        {
+          query: { _criteria: criteria },
+          pathParams: {
+            activeId: "main-navigation",
+            rootId: menuCategoryId.value,
+          },
+        },
+      );
+
+      return response.data;
+    },
+  );
+
+  const menuCardMenu = computed<NavigationMenuItem[]>(() => {
+    if (!menuCardNavigation.value) return [];
+
+    return menuCardNavigation.value?.map(mapCategoryToMenuItem);
+  });
+
   return {
     mainNavigation,
     mainMenu,
     footerNavigation,
     footerMenu,
+    menuCardNavigation,
+    menuCardMenu,
   };
 }

package/app/composables/useNavigationSearch.ts

@@ -0,0 +1,68 @@
+import { useSessionContext, useShopwareContext } from "#imports";
+import type { Schemas } from "#shopware";
+import { encodeForQuery } from "@shopware/api-client/helpers";
+
+export type UseNavigationSearchReturn = {
+  /**
+   * Get {@link SeoUrl} entity for given path
+   * @example resolvePath("/my-category/my-product") or resolvePath("/") for home page
+   */
+  resolvePath(path: string): Promise<Schemas["SeoUrl"] | null>;
+};
+
+/**
+ * Composable to get search for SeoUrl entity for given path.
+ * @public
+ * @category Navigation & Routing
+ */
+export function useNavigationSearch(): UseNavigationSearchReturn {
+  const { apiClient } = useShopwareContext();
+  const { sessionContext } = useSessionContext();
+
+  async function resolvePath(path: string): Promise<Schemas["SeoUrl"] | null> {
+    if (path === "/") {
+      // please ignore optional chaining for salesChannel object as it's always present (type definition issue)
+      const categoryId =
+        sessionContext.value?.salesChannel?.navigationCategoryId;
+
+      return {
+        routeName: "frontend.navigation.page",
+        foreignKey: categoryId,
+      } as Schemas["SeoUrl"];
+    }
+
+    const isTechnicalUrl =
+      path.startsWith("/navigation/") ||
+      path.startsWith("/detail/") ||
+      path.startsWith("/landingPage/");
+
+    // remove leading slash in case of seo url or remove trailing slash in case of technical url
+    const normalizedPath = isTechnicalUrl
+      ? path.endsWith("/")
+        ? path.slice(0, -1)
+        : path
+      : path.substring(1);
+
+    const criteria = encodeForQuery({
+      filter: [
+        {
+          type: "equals",
+          field: isTechnicalUrl ? "pathInfo" : "seoPathInfo",
+          value: normalizedPath,
+        },
+      ],
+    });
+
+    const seoResult = await apiClient.invoke("readSeoUrlGet get /seo-url", {
+      query: {
+        _criteria: criteria,
+      },
+    });
+
+    return seoResult.data.elements?.[0] ?? null;
+  }
+
+  return {
+    resolvePath,
+  };
+}

package/app/layouts/account.vue

@@ -68,7 +68,6 @@ const items = ref<NavigationMenuItem[][]>([
         />
       </template>
       <slot />
-      <BottomNavi />
     </UPage>
   </UContainer>
 </template>

package/app/layouts/{listing2.vue → listing.vue}

@@ -3,7 +3,7 @@
 <template>
   <UPage>
     <div class="sticky top-16 left-0 z-20 w-full backdrop-blur-md rounded-md">
-      <NavigationMobileTop2 :should-skip-first-level="true" />
+      <NavigationMobileTop />
     </div>
     <slot />
   </UPage>

package/app/pages/anmelden.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
+import { useWishlist } from "@shopware/composables";
+
 const { isLoggedIn } = useUser();
+const { mergeWishlistProducts } = useWishlist();
 
-onMounted(() => {
-  if (isLoggedIn.value) {
-    navigateTo("/konto");
+onBeforeMount(async () => {
+  if (import.meta.client && isLoggedIn.value) {
+    navigateTo({ path: "/konto" });
   }
 });
 
 watch(isLoggedIn, (newValue) => {
   if (newValue) {
-    navigateTo("/konto");
+    navigateTo({ path: "/konto" });
   }
 });
 
 function handleLoginSuccess() {
+  mergeWishlistProducts();
   navigateTo("/");
 }
 </script>

package/app/pages/speisekarte/[...all].vue

@@ -2,8 +2,9 @@
 import type { Schemas } from "#shopware";
 
 definePageMeta({
-  layout: "listing2",
+  layout: "listing",
 });
+
 const { clearBreadcrumbs } = useBreadcrumbs();
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();

package/nuxt.config.ts

@@ -55,6 +55,7 @@ export default defineNuxtConfig({
     geoapifyApiKey: "",
     public: {
       shopBite: {
+        menuCategoryId: "",
         feature: {
           multiChannel: "",
           secureKey: "",
@@ -85,6 +86,7 @@ export default defineNuxtConfig({
     endpoint: "",
     accessToken: "",
     devStorefrontUrl: "",
+    useUserContextInSSR: true,
   },
 
   modules: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [

package/test/nuxt/LoginForm.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
 import LoginForm from "@/components/User/LoginForm.vue";
-import { useUser } from "@shopware/composables";
 import { ApiClientError } from "@shopware/api-client";
 
 vi.mock("@shopware/api-client", () => ({
@@ -16,9 +16,7 @@ vi.mock("@shopware/api-client", () => ({
 
 vi.mock("@shopware/composables", () => ({
   useUser: vi.fn(),
-  useWishlist: vi.fn(() => ({
-    mergeWishlistProducts: vi.fn(),
-  })),
+  useWishlist: vi.fn(),
 }));
 
 const mockToastAdd = vi.fn();
@@ -28,19 +26,30 @@ mockNuxtImport("useToast", () => {
   });
 });
 
-describe("LoginForm", () => {
-  let loginMock: any;
-  let userMock: any;
+const loginMock = vi.fn();
+const userMock = ref({ firstName: "John", lastName: "Doe" });
+const isLoggedInMock = ref(false);
 
+mockNuxtImport("useUser", () => {
+  return () => ({
+    isLoggedIn: isLoggedInMock,
+    login: loginMock,
+    user: userMock,
+  });
+});
+
+mockNuxtImport("useWishlist", () => {
+  return () => ({
+    mergeWishlistProducts: vi.fn(),
+  });
+});
+
+describe("LoginForm", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    loginMock = vi.fn();
-    userMock = { value: { firstName: "John", lastName: "Doe" } };
-    (useUser as any).mockReturnValue({
-      isLoggedIn: { value: false },
-      login: loginMock,
-      user: userMock,
-    });
+    loginMock.mockReset();
+    isLoggedInMock.value = false;
+    userMock.value = { firstName: "John", lastName: "Doe" };
   });
 
   it("should show success toast on successful login", async () => {
@@ -63,6 +72,7 @@ describe("LoginForm", () => {
     expect(mockToastAdd).toHaveBeenCalledWith(
       expect.objectContaining({
         title: "Hallo John Doe!",
+        description: "Erfolgreich angemeldet.",
         color: "success",
       }),
     );

package/app/components/Navigation/MobileTop2.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
-import type { NavigationMenuItem } from "@nuxt/ui";
-import type { Schemas } from "#shopware";
-
-type Category = Schemas["Category"];
-
-const props = withDefaults(
-  defineProps<{
-    shouldSkipFirstLevel?: boolean;
-  }>(),
-  {
-    shouldSkipFirstLevel: false,
-  },
-);
-
-const { mainNavigation } = useNavigation(true);
-
-const navItems = computed<NavigationMenuItem[]>(() => {
-  const elements = mainNavigation.value ?? [];
-
-  const mapCategoryRecursively = (category: Category): NavigationMenuItem => {
-    const hasChildren = (category.children?.length ?? 0) > 0;
-
-    return {
-      label: category.translated?.name ?? "",
-      to: hasChildren ? undefined : category.seoUrl,
-      children: hasChildren
-        ? category.children!.map(mapCategoryRecursively)
-        : undefined,
-    };
-  };
-
-  if (props.shouldSkipFirstLevel) {
-    return elements
-      .flatMap((item: Category) => item.children ?? [])
-      .map(mapCategoryRecursively);
-  }
-
-  return elements.map(mapCategoryRecursively);
-});
-</script>
-
-<template>
-  <UNavigationMenu
-    class="lg:hidden"
-    orientation="horizontal"
-    :items="navItems"
-    :ui="{
-      list: 'overflow-x-auto',
-      item: 'flex-shrink-0',
-    }"
-  >
-    <template #list-leading>
-      <UIcon name="i-lucide-chevron-left" class="size-8" />
-    </template>
-    <template #list-trailing>
-      <UIcon name="i-lucide-chevron-right" class="size-8" />
-    </template>
-  </UNavigationMenu>
-</template>

package/app/middleware/trailing-slash.global.ts

@@ -1,19 +0,0 @@
-import { defineNuxtRouteMiddleware, navigateTo } from "#app";
-
-export default defineNuxtRouteMiddleware((to) => {
-  // Only handle category pages
-  if (!to.path.startsWith("/c/")) return;
-
-  // Skip if it already has a trailing slash or it's just "/c/"
-  if (to.path.endsWith("/") || to.path === "/c/") return;
-
-  // Preserve query and hash while adding the trailing slash
-  return navigateTo(
-    {
-      path: `${to.path}/`,
-      query: to.query,
-      hash: to.hash,
-    },
-    { redirectCode: 301 },
-  );
-});