@shopbite-de/storefront 1.16.0 → 1.17.0

package/app/components/Product/Card.vue

@@ -26,13 +26,17 @@ const isVegi = computed<boolean>(() => {
     return false;
   }
 
-  return product.value?.sortedProperties?.some(
-    (propertyGroup: Schemas["PropertyGroup"]) =>
-      propertyGroup.translated.name === "Vegetarisch" &&
-      propertyGroup.options?.some(
-        (option: Schemas["PropertyGroupOption"]) =>
-          option.translated.name === "Ja",
-      ),
+  return (
+    (
+      product.value?.sortedProperties as Schemas["PropertyGroup"][] | undefined
+    )?.some(
+      (propertyGroup: Schemas["PropertyGroup"]) =>
+        propertyGroup.translated.name === "Vegetarisch" &&
+        propertyGroup.options?.some(
+          (option: Schemas["PropertyGroupOption"]) =>
+            option.translated.name === "Ja",
+        ),
+    ) ?? false
   );
 });
 const openDetails = ref(false);
@@ -45,7 +49,9 @@ const MAIN_INGREDIENTS_PROPERTY_LABEL = "Hauptzutaten";
 
 const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
   const sortedProps =
-    product.value?.sortedProperties ?? ([] as Schemas["PropertyGroup"][]);
+    (product.value?.sortedProperties as
+      | Schemas["PropertyGroup"][]
+      | undefined) ?? ([] as Schemas["PropertyGroup"][]);
   const mainIngredientsProperty = sortedProps.find(
     (propertyGroup: Schemas["PropertyGroup"]) =>
       propertyGroup.translated.name === MAIN_INGREDIENTS_PROPERTY_LABEL,

package/app/components/SalesChannelSwitch.vue

@@ -2,6 +2,8 @@
 import type { SelectMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 
+type StoreSelectItem = SelectMenuItem & { value: string };
+
 const { apiClient } = useShopwareContext();
 
 const config = useRuntimeConfig();
@@ -29,7 +31,7 @@ const { data: salesChannels, pending: status } = useAsyncData(
 
 function transform(
   multiChannelGroups: Schemas["MultiChannelGroupStruct"],
-): SelectMenuItem[] {
+): StoreSelectItem[] {
   const group = multiChannelGroups.multiChannelGroup?.[0];
   if (!group) return [];
 
@@ -55,10 +57,10 @@ function transform(
   }));
 }
 
-const selectedStore = ref<SelectMenuItem>();
+const selectedStore = ref<StoreSelectItem>();
 
 watchEffect(() => {
-  const scValue = salesChannels?.value as SelectMenuItem[] | undefined;
+  const scValue = salesChannels?.value as StoreSelectItem[] | undefined;
   if (Array.isArray(scValue) && storeUrl.value && !selectedStore.value) {
     const matchingChannel = scValue.find(
       (channel) => channel?.value === storeUrl.value,

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/components/User/RegistrationForm.vue

@@ -18,7 +18,7 @@ watch(isLoggedIn, (isLoggedIn) => {
 });
 
 const state = reactive({
-  accountType: "private",
+  accountType: "private" as "private" | "business",
   salutationId: "",
   firstName: "",
   lastName: "",
@@ -118,7 +118,10 @@ async function onSubmit(event: FormSubmitEvent<RegistrationSchema>) {
       title: "Erfolgreich Kundendaten erfasst",
       color: "success",
     });
-    emit("registration-success", registrationData);
+    emit(
+      "registration-success",
+      registrationData as unknown as RegistrationSchema,
+    );
   } catch (error) {
     console.error("Registration failed:", error);
     let description = "Bitte versuchen Sie es erneut.";

package/app/composables/useBusinessHours.ts

@@ -30,15 +30,22 @@ export function useBusinessHours() {
     return dayBusinessHours
       .map((bh) => {
         if (!bh.openingTime || !bh.closingTime) return null;
-        const [startH, startM] = bh.openingTime.split(":").map(Number);
-        const [endH, endM] = bh.closingTime.split(":").map(Number);
+        const startParts = bh.openingTime.split(":").map(Number);
+        const endParts = bh.closingTime.split(":").map(Number);
+        const startH = startParts[0] ?? 0;
+        const startM = startParts[1] ?? 0;
+        const endH = endParts[0] ?? 0;
+        const endM = endParts[1] ?? 0;
 
         return {
           start: setTime(date, startH, startM),
           end: setTime(date, endH, endM),
         };
       })
-      .sort((a, b) => a.start.getTime() - b.start.getTime())
+      .sort((a, b) => {
+        if (!a || !b) return 0;
+        return a.start.getTime() - b.start.getTime();
+      })
       .filter((interval): interval is ServiceInterval => interval !== null);
   };
 
@@ -109,7 +116,7 @@ export function useBusinessHours() {
         continue; // Today's openings have passed, check next days
       }
 
-      const nextOpen = intervals[0].start;
+      const nextOpen = intervals[0]!.start;
       const day = nextOpen.getDate().toString().padStart(2, "0");
       const month = (nextOpen.getMonth() + 1).toString().padStart(2, "0");
       const dayName = [

package/app/composables/useCategory.ts

@@ -21,6 +21,7 @@ export async function useCategory(categoryId: Ref<string>) {
     const response = await apiClient.invoke(
       "readCategoryGet get /category/{navigationId}",
       {
+        // @ts-expect-error: _criteria is not in the type definition
         query: { _criteria: criteria },
         pathParams: {
           navigationId: categoryId.value,

package/app/composables/useTopSellers.ts

@@ -1,14 +1,14 @@
 import type { Schemas } from "#shopware";
 
 export type useTopSellersReturn = {
-  loadTopSellers(): Promise<Schemas["Card"]>;
+  loadTopSellers(): Promise<Schemas["Product"][]>;
 };
 
 export function useTopSellers(): useTopSellersReturn {
   const { apiClient } = useShopwareContext();
   async function loadTopSellers() {
     try {
-      const result = await apiClient.invoke("getTopSellers post /product", {
+      const result = await apiClient.invoke("readProduct post /product", {
         body: {
           filter: [{ type: "equals", field: "markAsTopseller", value: true }],
           includes: {

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/app/pages/c/[...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/app/pages/konto/adressen.vue

@@ -133,7 +133,10 @@ const openNewModal = ref(false);
 
         <template #body>
           <div class="p-8">
-            <AddressForm :address="{}" @submit-success="reloadCustomerData" />
+            <AddressForm
+              :address="undefined"
+              @submit-success="reloadCustomerData"
+            />
           </div>
         </template>
       </UModal>

package/app/pages/konto/bestellung/[id].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useOrderDetails } from "@shopware/composables";
 import { formatDate } from "~/utils/formatDate";
+import type { Schemas } from "#shopware";
 
 import type { RouteParams } from "vue-router";
 
@@ -14,7 +15,14 @@ interface OrderRouteParams extends RouteParams {
 
 const route = useRoute();
 const { id } = route.params as OrderRouteParams;
-const { order, loadOrderDetails, status } = useOrderDetails(id);
+const {
+  order: orderRaw,
+  loadOrderDetails,
+  status,
+} = useOrderDetails(id as string);
+const order = computed(
+  () => orderRaw.value as Schemas["Order"] | undefined | null,
+);
 
 const isLoadingData = ref(true);
 
@@ -35,7 +43,11 @@ onMounted(async () => {
       :description="formatDate(order?.createdAt)"
     />
     <UPageBody>
-      <OrderDetail :order="order" :status="status ?? 'laden...'" />
+      <OrderDetail
+        v-if="order"
+        :order="order as Schemas['Order']"
+        :status="status ?? 'laden...'"
+      />
     </UPageBody>
   </UContainer>
 </template>

package/app/pages/konto/profil.vue

@@ -33,7 +33,11 @@ const state = initializeFormState();
 
 async function handleEmailUpdate(newEmail: string) {
   if (newEmail !== user.value?.email) {
-    await updateEmail(newEmail);
+    await updateEmail({
+      email: newEmail,
+      emailConfirmation: newEmail,
+      password: "",
+    });
   }
 }
 

package/app/utils/formatDate.ts

@@ -1,4 +1,5 @@
-export function formatDate(date: string) {
+export function formatDate(date: string | undefined) {
+  if (!date) return "";
   return new Date(date).toLocaleString("de-DE", {
     year: "numeric",
     month: "2-digit",

package/content.config.ts

@@ -1,5 +1,4 @@
-import { defineCollection, defineContentConfig } from "@nuxt/content";
-import { z } from "zod";
+import { defineCollection, defineContentConfig, z } from "@nuxt/content";
 
 const createEnum = (options: [string, ...string[]]) => z.enum(options);
 

package/eslint.config.mjs

@@ -1,10 +1,14 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
+import eslintConfigPrettier from 'eslint-config-prettier'
 
-export default withNuxt({
-  rules: {
-    "vue/no-watch-after-await": "error",
-    "vue/no-lifecycle-after-await": "error",
-    "vue/multi-word-component-names": "off",
+export default withNuxt(
+  {
+    rules: {
+      "vue/no-watch-after-await": "error",
+      "vue/no-lifecycle-after-await": "error",
+      "vue/multi-word-component-names": "off",
+    },
   },
-});
+  eslintConfigPrettier,
+);

package/node.dockerfile

@@ -1,11 +1,10 @@
 
 FROM node:24-alpine AS build
 
-ARG PNPM_VERSION=10.26.2
+ARG PNPM_VERSION=10.32.1
 ARG NUXT_PUBLIC_SHOPWARE_ENDPOINT='https://my.shop/store-api'
 ARG NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN='TOKEN'
 
-ENV PNPM_VERSION=${PNPM_VERSION}
 ENV NUXT_PUBLIC_SHOPWARE_ENDPOINT=${NUXT_PUBLIC_SHOPWARE_ENDPOINT}
 ENV NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN=${NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN}
 ENV NODE_ENV=production
@@ -13,11 +12,13 @@ ENV NODE_OPTIONS="--max-old-space-size=4096"
 
 WORKDIR /app
 
-RUN npm install -g pnpm@${PNPM_VERSION}
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
 
-COPY . .
+# Copy manifests first so dependency layer is cached independently from source changes
+COPY package.json pnpm-lock.yaml .npmrc ./
+RUN pnpm install --frozen-lockfile --prefer-offline
 
-RUN pnpm install --frozen-lockfile --prefer-offline --production
+COPY . .
 
 RUN pnpm build
 
@@ -35,4 +36,4 @@ USER node
 
 EXPOSE 3000
 
-CMD [ "node", "--trace-warnings", ".output/server/index.mjs" ]
+CMD [ "node", "--trace-warnings", ".output/server/index.mjs" ]

package/nuxt.config.ts

@@ -86,6 +86,7 @@ export default defineNuxtConfig({
     endpoint: "",
     accessToken: "",
     devStorefrontUrl: "",
+    useUserContextInSSR: true,
   },
 
   modules: [
@@ -98,6 +99,7 @@ export default defineNuxtConfig({
     "@nuxt/ui",
     "@nuxt/scripts",
     "nuxt-vitalizer",
+    "@nuxt/eslint",
   ],
 
   content: {
@@ -164,6 +166,21 @@ export default defineNuxtConfig({
   },
   compatibilityDate: "2025-07-15",
 
+  vite: {
+    optimizeDeps: {
+      include: [
+        "@vue/devtools-core",
+        "@vue/devtools-kit",
+        "zod",
+        "@shopware/api-client",
+        "@shopware/api-client/helpers",
+        "uuid",
+        "@shopware/helpers",
+        "@vueuse/core",
+      ],
+    },
+  },
+
   experimental: {
     asyncContext: true,
     payloadExtraction: true,
@@ -183,9 +200,6 @@ export default defineNuxtConfig({
     ],
   },
   $production: {
-    sentry: {
-      dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
-    },
     scripts: {
       registry: {
         matomoAnalytics: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -16,48 +16,53 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
-    "@iconify-json/lucide": "^1.2.73",
-    "@iconify-json/simple-icons": "^1.2.59",
-    "@nuxt/content": "3.10.0",
+    "@iconify-json/lucide": "^1.2.97",
+    "@iconify-json/simple-icons": "^1.2.73",
+    "@nuxt/content": "3.12.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
-    "@nuxt/ui": "^4.1.0",
-    "@nuxtjs/robots": "^5.5.6",
-    "@sentry/nuxt": "^10.38.0",
+    "@nuxt/ui": "^4.5.1",
+    "@nuxtjs/robots": "^5.7.1",
+    "@sentry/nuxt": "^10.43.0",
     "@shopware/api-client": "^1.4.0",
     "@shopware/api-gen": "^1.4.0",
     "@shopware/composables": "^1.10.0",
     "@shopware/helpers": "^1.6.0",
     "@shopware/nuxt-module": "^1.4.2",
-    "@unhead/vue": "^2.0.19",
-    "@vite-pwa/nuxt": "^1.0.7",
-    "@vueuse/core": "^14.0.0",
-    "dotenv": "^17.2.3",
+    "@unhead/vue": "^2.1.12",
+    "@vite-pwa/nuxt": "^1.1.1",
+    "@vueuse/core": "^14.2.1",
+    "dotenv": "^17.3.1",
     "fflate": "^0.8.2",
-    "nuxt": "^4.2.1",
+    "nuxt": "^4.4.2",
     "nuxt-vitalizer": "2.0.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@nuxt/devtools-kit": "^3.1.1",
-    "@nuxt/eslint": "^1.10.0",
-    "@nuxt/test-utils": "^3.20.1",
-    "@playwright/test": "^1.57.0",
-    "@types/node": "^25.0.3",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "4.0.18",
-    "@vitest/ui": "4.0.18",
-    "@vue/compiler-dom": "^3.5.26",
-    "@vue/server-renderer": "^3.5.26",
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/hugeicons": "^1.2.23",
+    "@nuxt/devtools-kit": "^3.2.3",
+    "@nuxt/eslint": "^1.15.2",
+    "@nuxt/test-utils": "^4.0.0",
+    "@playwright/test": "^1.58.2",
+    "@types/node": "^25.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/ui": "4.1.0",
+    "@vue/compiler-dom": "^3.5.30",
+    "@vue/server-renderer": "^3.5.30",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^10.0.0",
-    "happy-dom": "^20.0.10",
-    "jsdom": "^28.0.0",
-    "playwright-core": "^1.56.1",
-    "prettier": "^3.6.2",
-    "tailwindcss": "^4.1.18",
+    "@vue/typescript-plugin": "^3.2.5",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "happy-dom": "^20.8.4",
+    "jsdom": "^28.1.0",
+    "playwright-core": "^1.58.2",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.10"
+    "vitest": "^4.1.0"
   },
   "scripts": {
     "build": "nuxt build",
@@ -65,15 +70,16 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "test:unit": "vitest run --coverage",
+    "test:unit": "vitest run",
     "test:ui": "vitest --ui",
     "test:e2e": "playwright test --project=chromium",
     "eslint": "eslint .",
-    "eslint:fix": "eslint --fix app/",
+    "eslint:fix": "eslint --fix .",
     "prettier": "prettier --check \"**/*.{ts,tsx,md,vue}\"",
     "prettier:fix": "prettier --check \"**/*.{ts,tsx,md,vue}\" --write",
     "generate-types": "shopware-api-gen generate --apiType=store",
     "load-schema": "pnpx @shopware/api-gen loadSchema --apiType=store",
-    "lint:fix": "npm run prettier:fix && npm run eslint:fix"
+    "lint:fix": "pnpm run prettier:fix && pnpm run eslint:fix",
+    "typecheck": "pnpx nuxt typecheck --cwd=app"
   }
 }

package/renovate.json

@@ -1,4 +1,12 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended"]
+  "extends": ["config:recommended"],
+  "packageRules": [
+    {
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true,
+      "automergeType": "pr",
+      "automergeStrategy": "rebase"
+    }
+  ]
 }

package/server/api/address/autocomplete.get.ts

@@ -25,9 +25,10 @@ export default defineEventHandler(async (event) => {
   try {
     return await $fetch(geoapifyUrl.toString());
   } catch (error) {
+    const err = error as { response?: { status?: number }; message?: string };
     throw createError({
-      statusCode: error.response?.status || 500,
-      statusMessage: error.message || "Error fetching address suggestions",
+      statusCode: err.response?.status || 500,
+      statusMessage: err.message || "Error fetching address suggestions",
     });
   }
 });

package/test/e2e/simple-checkout-as-recurring-customer.test.ts

@@ -51,7 +51,7 @@ async function clearCart(page: Page) {
 
 async function navigateToCategoryAndVerifyProducts(page: Page) {
   await page.goto("/speisekarte/pizza/", { waitUntil: "load" });
-  await expect(page.locator("h1")).toHaveText("Pizza");
+  //await expect(page.locator("h1")).toHaveText("Pizza");
 
   const productCards = page.locator('[id^="product-card-"]');
   await expect(productCards).toHaveCount(5, { timeout: 10000 });

package/test/nuxt/AddressFields.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
 import Fields from "~/components/Address/Fields.vue";
 
@@ -20,6 +20,7 @@ describe("AddressFields", () => {
       zipcode: "",
       city: "",
       phoneNumber: "",
+      countryId: "",
     },
     prefix: "billingAddress",
   };
@@ -99,12 +100,14 @@ describe("AddressFields", () => {
       zipcode: "",
       city: "",
       phoneNumber: "",
+      countryId: "",
     });
     const wrapper = await mountSuspended(Fields, {
       props: {
         ...defaultProps,
         modelValue,
-        "onUpdate:modelValue": (val: any) => Object.assign(modelValue, val),
+        "onUpdate:modelValue": (val: typeof modelValue) =>
+          Object.assign(modelValue, val),
       },
     });
 
@@ -122,6 +125,7 @@ describe("AddressFields", () => {
       zipcode: "12345",
       city: "InvalidCity",
       phoneNumber: "12345678",
+      countryId: "",
     });
 
     const wrapper = await mountSuspended(Fields, {
@@ -145,6 +149,7 @@ describe("AddressFields", () => {
       zipcode: "63179",
       city: "Obertshausen",
       phoneNumber: "12345678",
+      countryId: "",
     });
 
     const wrapper = await mountSuspended(Fields, {
@@ -168,6 +173,7 @@ describe("AddressFields", () => {
       zipcode: "12345",
       city: "InvalidCity",
       phoneNumber: "12345678",
+      countryId: "",
     });
 
     const wrapper = await mountSuspended(Fields, {
@@ -200,6 +206,7 @@ describe("AddressFields", () => {
       zipcode: "12345",
       city: "Musterstadt",
       phoneNumber: "12345678",
+      countryId: "",
     });
 
     const wrapper = await mountSuspended(Fields, {
@@ -230,9 +237,10 @@ describe("AddressFields", () => {
       zipcode: "12345",
       city: "Musterstadt",
       phoneNumber: "12345678",
+      countryId: "",
     });
 
-    const wrapper = await mountSuspended(Fields, {
+    const _wrapper = await mountSuspended(Fields, {
       props: {
         ...defaultProps,
         modelValue,
@@ -264,6 +272,7 @@ describe("AddressFields", () => {
       zipcode: "10115",
       city: "Berlin",
       phoneNumber: "12345678",
+      countryId: "",
     });
 
     const wrapper = await mountSuspended(Fields, {