@shopbite-de/storefront 1.17.4 → 1.18.1

package/.github/workflows/build.yaml

@@ -63,9 +63,9 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5
         with:
-          version: 10.32.1
+          version: 10.33.0
 
       - name: Install Node.js
         uses: actions/setup-node@v6

package/.github/workflows/ci.yaml

@@ -23,9 +23,9 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
         with:
-          version: 10.32.1
+          version: 10.33.0
 
       - uses: actions/setup-node@v6
         with:
@@ -67,9 +67,9 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
         with:
-          version: 10.32.1
+          version: 10.33.0
 
       - uses: actions/setup-node@v6
         with:
@@ -100,9 +100,9 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
         with:
-          version: 10.32.1
+          version: 10.33.0
 
       - uses: actions/setup-node@v6
         with:
@@ -130,9 +130,9 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
         with:
-          version: 10.32.1
+          version: 10.33.0
 
       - uses: actions/setup-node@v6
         with:

package/app/components/Address/Fields.vue

@@ -18,6 +18,7 @@ const {
   correction,
   isInvalidCity,
   checkAddress,
+  flushPendingCheck,
   applyCorrection,
 } = useAddressValidation(model, {
   isShipping: props.isShipping,
@@ -27,6 +28,7 @@ const {
 
 defineExpose({
   checkAddress,
+  flushPendingCheck,
   showCorrection,
 });
 </script>

package/app/components/Checkout/Summary.vue

@@ -109,6 +109,7 @@ const checkoutButtonLabel = computed<string>(() => {
             :with-delete-button="false"
             class="p-6 bg-elevated"
           />
+          <CheckoutVoucherInput />
           <UButton
             :icon="
               isValidToProceed ? 'i-lucide-shopping-cart' : 'i-lucide-lock'

package/app/components/Checkout/VoucherInput.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const {
+  voucherCode,
+  voucherLoading,
+  applyVoucher,
+  appliedPromotionCodes,
+  removeItem,
+} = useVoucherCode();
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex flex-row gap-2">
+      <UInput
+        v-model="voucherCode"
+        placeholder="Gutscheincode"
+        class="flex-1"
+        :disabled="voucherLoading"
+        @keyup.enter="applyVoucher"
+      />
+      <UButton
+        label="Einlösen"
+        variant="outline"
+        :loading="voucherLoading"
+        :disabled="!voucherCode.trim() || voucherLoading"
+        @click="applyVoucher"
+      />
+    </div>
+    <div
+      v-for="promo in appliedPromotionCodes"
+      :key="promo.id"
+      class="flex flex-row justify-between items-center text-sm text-success"
+    >
+      <span class="flex items-center gap-1">
+        <UIcon name="i-lucide-tag" />
+        {{ promo.label }}
+      </span>
+      <UButton
+        icon="i-lucide-x"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        aria-label="Gutschein entfernen"
+        @click="removeItem(promo)"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Header/Body.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
+import { useUser } from "@shopware/composables";
 
-const config = useRuntimeConfig();
+const { mainMenu } = useNavigation(false);
+const multiChannelEnabled =
+  useRuntimeConfig().public.shopBite.feature.multiChannel;
 
-const multiChannelEnabled = computed(
-  () => config.public.shopBite.feature.multiChannel === "true",
-);
+const { isLoggedIn, isGuestSession, logout } = useUser();
+const toast = useToast();
 
-console.log(multiChannelEnabled.value);
-const { mainMenu } = useNavigation(false);
+const logoutHandler = () => {
+  logout();
+  toast.add({
+    title: "Tschüss!",
+    description: "Erfolgreich abgemeldet.",
+    color: "success",
+  });
+};
 </script>
 
 <template>
@@ -18,7 +25,58 @@ const { mainMenu } = useNavigation(false);
     orientation="vertical"
     class="-mx-2.5"
   />
-  <div v-if="multiChannelEnabled" class="my-4">
+
+  <USeparator class="my-4" />
+
+  <div class="flex flex-col gap-1">
+    <template v-if="isLoggedIn || isGuestSession">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/konto"
+        icon="i-lucide-user"
+        label="Mein Konto"
+        class="justify-start"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/konto/bestellungen"
+        icon="i-lucide-pizza"
+        label="Bestellungen"
+        class="justify-start"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-log-out"
+        label="Abmelden"
+        class="justify-start"
+        @click="logoutHandler"
+      />
+    </template>
+    <template v-else>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/anmelden"
+        icon="i-lucide-user"
+        label="Anmelden"
+        class="justify-start"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/registrierung"
+        icon="i-lucide-user-plus"
+        label="Registrieren"
+        class="justify-start"
+      />
+    </template>
+  </div>
+
+  <div v-if="multiChannelEnabled" class="mt-4">
+    <USeparator class="mb-4" />
     <SalesChannelSwitch />
   </div>
 </template>

package/app/components/Header.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
-
 const { mainMenu } = useNavigation(false);
-
 const loginSlide = ref(false);
 </script>
 
@@ -13,6 +10,7 @@ const loginSlide = ref(false);
     </template>
 
     <UNavigationMenu color="primary" variant="pill" :items="mainMenu" />
+    <SalesChannelSwitch />
 
     <template #right>
       <HeaderRight />

package/app/components/SalesChannelSwitch.vue

@@ -8,9 +8,7 @@ const { apiClient } = useShopwareContext();
 
 const config = useRuntimeConfig();
 
-const isMultiChannel = computed(
-  () => config.public.shopBite.feature.multiChannel === "true",
-);
+const isMultiChannel = useRuntimeConfig().public.shopBite.feature.multiChannel;
 
 const storeUrl = computed(() => config.public.storeUrl);
 

package/app/components/User/RegistrationForm.vue

@@ -65,30 +65,12 @@ const billingAddressFields = ref();
 const shippingAddressFields = ref();
 
 async function onSubmit(event: FormSubmitEvent<RegistrationSchema>) {
-  const registrationData = { ...event.data };
-
-  // Check for address corrections
-  // If a correction is already shown, treat it as found to prevent submission
-  const billingCorrectionFound =
-    Boolean(billingAddressFields.value?.showCorrection || false) ||
-    (await billingAddressFields.value?.checkAddress());
-
-  let shippingCorrectionFound = false;
+  billingAddressFields.value?.flushPendingCheck();
   if (state.isShippingAddressDifferent) {
-    shippingCorrectionFound =
-      Boolean(shippingAddressFields.value?.showCorrection || false) ||
-      (await shippingAddressFields.value?.checkAddress());
+    shippingAddressFields.value?.flushPendingCheck();
   }
 
-  if (billingCorrectionFound || shippingCorrectionFound) {
-    toast.add({
-      title: "Adresskorrektur vorgeschlagen",
-      description:
-        "Bitte überprüfen Sie die vorgeschlagene Adresskorrektur, bevor Sie fortfahren.",
-      color: "info",
-    });
-    return;
-  }
+  const registrationData = { ...event.data };
 
   if (
     !registrationData.billingAddress.firstName &&

package/app/composables/useAddressValidation.ts

@@ -64,6 +64,7 @@ export function useAddressValidation(
 
       if (debounceTimer) clearTimeout(debounceTimer);
       debounceTimer = setTimeout(() => {
+        debounceTimer = null;
         if (model.value.street) {
           checkAddress();
         }
@@ -72,6 +73,16 @@ export function useAddressValidation(
     { deep: true },
   );
 
+  function flushPendingCheck() {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+      if (model.value.street) {
+        checkAddress();
+      }
+    }
+  }
+
   onUnmounted(() => {
     if (debounceTimer) clearTimeout(debounceTimer);
   });
@@ -90,6 +101,7 @@ export function useAddressValidation(
     correction,
     isInvalidCity,
     checkAddress,
+    flushPendingCheck,
     applyCorrection,
   };
 }

package/app/composables/useVoucherCode.ts

@@ -0,0 +1,51 @@
+export function useVoucherCode() {
+  const { cart, addPromotionCode, appliedPromotionCodes, removeItem } =
+    useCart();
+  const toast = useToast();
+
+  const voucherCode = ref("");
+  const voucherLoading = ref(false);
+
+  async function applyVoucher() {
+    const code = voucherCode.value.trim();
+    if (!code || voucherLoading.value) return;
+    voucherLoading.value = true;
+    try {
+      await addPromotionCode(code);
+      const errors = cart.value?.errors ?? {};
+      const promotionError = Object.values(errors).find(
+        (e) => (e as { promotionCode?: string }).promotionCode === code,
+      ) as { translatedMessage?: string } | undefined;
+      if (promotionError) {
+        toast.add({
+          title: "Gutschein ungültig",
+          description:
+            promotionError.translatedMessage ??
+            "Der eingegebene Gutscheincode ist ungültig oder abgelaufen.",
+          color: "error",
+          icon: "i-lucide-x-circle",
+        });
+      } else {
+        voucherCode.value = "";
+      }
+    } catch {
+      toast.add({
+        title: "Gutschein ungültig",
+        description:
+          "Der eingegebene Gutscheincode ist ungültig oder abgelaufen.",
+        color: "error",
+        icon: "i-lucide-x-circle",
+      });
+    } finally {
+      voucherLoading.value = false;
+    }
+  }
+
+  return {
+    voucherCode,
+    voucherLoading,
+    applyVoucher,
+    appliedPromotionCodes,
+    removeItem,
+  };
+}

package/nuxt.config.ts

@@ -57,7 +57,7 @@ export default defineNuxtConfig({
       shopBite: {
         menuCategoryId: "",
         feature: {
-          multiChannel: "",
+          multiChannel: false,
           secureKey: "",
           contactForm: false,
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.17.4",
+  "version": "1.18.1",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -26,7 +26,7 @@
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.5.1",
-    "@nuxtjs/robots": "^5.7.1",
+    "@nuxtjs/robots": "^6.0.0",
     "@sentry/nuxt": "^10.43.0",
     "@shopware/api-client": "^1.4.0",
     "@shopware/api-gen": "^1.4.0",
@@ -53,7 +53,7 @@
     "@typescript-eslint/eslint-plugin": "^8.57.0",
     "@typescript-eslint/parser": "^8.57.0",
     "@vitejs/plugin-vue": "^6.0.5",
-    "@vitest/ui": "4.1.0",
+    "@vitest/ui": "4.1.2",
     "@vue/compiler-dom": "^3.5.30",
     "@vue/server-renderer": "^3.5.30",
     "@vue/test-utils": "^2.4.6",
@@ -65,7 +65,7 @@
     "playwright-core": "^1.58.2",
     "prettier": "^3.8.1",
     "tailwindcss": "^4.2.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.0",
     "vitest": "^4.1.0"
   },
   "scripts": {

package/renovate.json

@@ -1,13 +1,15 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "automerge": true,
+  "platformAutomerge": true,
+  "labels": ["dependencies"],
   "extends": ["config:recommended"],
+  "separateMultipleMajor": true,
+  "rebaseWhen": "auto",
   "packageRules": [
     {
-      "matchUpdateTypes": ["minor", "patch", "lockfileUpdate"],
-      "automerge": true,
-      "automergeType": "pr",
-      "automergeStrategy": "rebase",
-      "platformAutomerge": true
+      "matchUpdateTypes": ["major", "minor"],
+      "automerge": false
     }
   ]
 }

package/test/nuxt/CheckoutVoucherInput.test.ts

@@ -0,0 +1,196 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { ref, nextTick } from "vue";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import CheckoutVoucherInput from "~/components/Checkout/VoucherInput.vue";
+
+const { mockAddPromotionCode, mockRemoveItem } = vi.hoisted(() => ({
+  mockAddPromotionCode: vi.fn().mockResolvedValue(undefined),
+  mockRemoveItem: vi.fn(),
+}));
+
+const mockCart = ref<{ errors?: Record<string, unknown> } | null>(null);
+const mockAppliedPromotionCodes = ref<{ id: string; label: string }[]>([]);
+
+mockNuxtImport("useCart", () => () => ({
+  cart: mockCart,
+  addPromotionCode: mockAddPromotionCode,
+  appliedPromotionCodes: mockAppliedPromotionCodes,
+  removeItem: mockRemoveItem,
+}));
+
+const mockToastAdd = vi.fn();
+mockNuxtImport("useToast", () => () => ({
+  add: mockToastAdd,
+}));
+
+describe("CheckoutVoucherInput", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockAddPromotionCode.mockResolvedValue(undefined);
+    mockAppliedPromotionCodes.value = [];
+    mockCart.value = null;
+  });
+
+  it("renders the input and button", async () => {
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    expect(wrapper.find("input").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Einlösen");
+  });
+
+  it("apply button is disabled when input is empty", async () => {
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeDefined();
+  });
+
+  it("apply button is enabled when input has a value", async () => {
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("SAVE10");
+    await nextTick();
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeUndefined();
+  });
+
+  it("does not call addPromotionCode a second time if already loading", async () => {
+    let resolvePromotion!: () => void;
+    mockAddPromotionCode.mockReturnValueOnce(
+      new Promise<void>((resolve) => {
+        resolvePromotion = resolve;
+      }),
+    );
+
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("SAVE10");
+    await nextTick();
+
+    // First invocation — in-flight
+    wrapper.find("button").trigger("click");
+    await nextTick();
+
+    // Second invocation while still loading
+    wrapper.find("button").trigger("click");
+    await nextTick();
+    await wrapper.find("input").trigger("keyup.enter");
+    await nextTick();
+
+    resolvePromotion();
+    mockCart.value = { errors: {} };
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockAddPromotionCode).toHaveBeenCalledTimes(1);
+  });
+
+  it("disables the button and input while loading to prevent concurrent submits", async () => {
+    let resolvePromotion!: () => void;
+    mockAddPromotionCode.mockReturnValueOnce(
+      new Promise<void>((resolve) => {
+        resolvePromotion = resolve;
+      }),
+    );
+
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("SAVE10");
+    await nextTick();
+
+    wrapper.find("button").trigger("click");
+    await nextTick();
+
+    // While the request is in-flight both button and input must be disabled
+    expect(wrapper.find("button").attributes("disabled")).toBeDefined();
+    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+
+    // Resolve and confirm the loading guard is lifted
+    resolvePromotion();
+    mockCart.value = { errors: {} };
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Input is no longer disabled by loading (code was cleared on success, button
+    // disabled due to empty input is expected and correct)
+    expect(wrapper.find("input").attributes("disabled")).toBeUndefined();
+  });
+
+  it("clears the input and does not show a toast on successful voucher apply", async () => {
+    mockCart.value = { errors: {} };
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("SAVE10");
+    await wrapper.find("button").trigger("click");
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockAddPromotionCode).toHaveBeenCalledWith("SAVE10");
+    expect(mockToastAdd).not.toHaveBeenCalled();
+    expect(wrapper.find("input").element.value).toBe("");
+  });
+
+  it("shows the translated error from cart.errors when the code is invalid", async () => {
+    mockCart.value = {
+      errors: {
+        "promotion-not-found": {
+          promotionCode: "INVALID",
+          translatedMessage: 'Gutscheincode "INVALID" existiert nicht.',
+        },
+      },
+    };
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("INVALID");
+    await wrapper.find("button").trigger("click");
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Gutschein ungültig",
+        description: 'Gutscheincode "INVALID" existiert nicht.',
+        color: "error",
+      }),
+    );
+    expect(wrapper.find("input").element.value).toBe("INVALID");
+  });
+
+  it("shows a generic error toast when addPromotionCode throws", async () => {
+    mockAddPromotionCode.mockRejectedValueOnce(new Error("network error"));
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("SAVE10");
+    await wrapper.find("button").trigger("click");
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Gutschein ungültig",
+        color: "error",
+      }),
+    );
+  });
+
+  it("submits on Enter key", async () => {
+    mockCart.value = { errors: {} };
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    await wrapper.find("input").setValue("ENTER10");
+    await wrapper.find("input").trigger("keyup.enter");
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockAddPromotionCode).toHaveBeenCalledWith("ENTER10");
+  });
+
+  it("renders applied promotion codes", async () => {
+    mockAppliedPromotionCodes.value = [
+      { id: "promo-1", label: "10% Rabatt" },
+      { id: "promo-2", label: "Gratis Versand" },
+    ];
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+    expect(wrapper.text()).toContain("10% Rabatt");
+    expect(wrapper.text()).toContain("Gratis Versand");
+  });
+
+  it("calls removeItem when remove button is clicked", async () => {
+    const promo = { id: "promo-1", label: "10% Rabatt" };
+    mockAppliedPromotionCodes.value = [promo];
+    const wrapper = await mountSuspended(CheckoutVoucherInput);
+
+    const removeButtons = wrapper.findAll(
+      'button[aria-label="Gutschein entfernen"]',
+    );
+    expect(removeButtons).toHaveLength(1);
+    await removeButtons[0]!.trigger("click");
+
+    expect(mockRemoveItem).toHaveBeenCalledWith(promo);
+  });
+});

package/test/nuxt/RegistrationForm.test.ts

@@ -53,6 +53,7 @@ describe("RegistrationForm", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockIsLoggedIn.value = false;
+    mockGetSuggestions.mockResolvedValue([]);
   });
 
   it("renders correctly", async () => {
@@ -251,8 +252,8 @@ describe("RegistrationForm", () => {
     );
   });
 
-  it("shows correction suggestion and stops submission when address needs correction", async () => {
-    mockGetSuggestions.mockResolvedValueOnce([
+  it("proceeds with registration even when getSuggestions returns a correction", async () => {
+    mockGetSuggestions.mockResolvedValue([
       {
         street: "Corrected Street 123",
         city: "Corrected City",
@@ -263,11 +264,9 @@ describe("RegistrationForm", () => {
 
     const wrapper = await mountSuspended(RegistrationForm);
 
-    // Register as guest to avoid password requirements
     (wrapper.vm as unknown as { state: { guest: boolean } }).state.guest = true;
     await nextTick();
 
-    // Fill required fields
     await wrapper.find('input[name="firstName"]').setValue("John");
     await wrapper.find('input[name="lastName"]').setValue("Doe");
     await wrapper.find('input[name="email"]').setValue("john@example.com");
@@ -300,17 +299,10 @@ describe("RegistrationForm", () => {
     await wrapper.find("form").trigger("submit");
     await new Promise((resolve) => setTimeout(resolve, 100));
 
-    // Should NOT have called register
-    expect(mockRegister).not.toHaveBeenCalled();
-
-    // Should have shown a toast
-    expect(mockToastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: "Adresskorrektur vorgeschlagen",
-      }),
-    );
+    // Registration must not be blocked by the correction suggestion
+    expect(mockRegister).toHaveBeenCalled();
 
-    // Should show the correction alert in the form
+    // Correction UI surfaces non-blocking (flushPendingCheck triggers the async check)
     expect(wrapper.text()).toContain(
       "Meinten Sie: Corrected Street 123, 54321 Corrected City?",
     );