@shopbite-de/storefront 1.16.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/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/layouts/account.vue

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

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/nuxt.config.ts

@@ -86,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.16.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/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 },
-  );
-});