@shopbite-de/storefront 1.14.0 → 1.14.4

package/.github/workflows/build.yaml

@@ -66,7 +66,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.29.3
+          version: 10.30.1
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

package/app/app.vue

@@ -1,22 +1,15 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import * as Sentry from "@sentry/nuxt";
 import type { Toast } from "#ui/composables/useToast";
 
 // Composables
 const toast = useToast();
 const appConfig = useAppConfig();
-const runtimeConfig = useRuntimeConfig();
 const { apiClient } = useShopwareContext();
 const { refresh: refreshToppings } = useShopBiteConfig();
 const { refreshCart } = useCart();
 const { getWishlistProducts } = useWishlist();
 
-// Initialize Sentry
-Sentry.init({
-  dsn: runtimeConfig.public.sentry.dsn,
-});
-
 const {
   getNextOpeningTime,
   isStoreOpen,

package/app/components/Address/Fields.vue

@@ -109,7 +109,7 @@ defineExpose({
     >
       <template #title>
         An diese Adresse können wir leider nicht liefern.
-        <ULink to="/unternehmen/zahlung-und-versand">Weitere Infos.</ULink>
+        <ULink to="/zahlung-und-versand">Weitere Infos.</ULink>
       </template>
     </UAlert>
 

package/app/components/Category/Listing.vue

@@ -58,7 +58,7 @@ const {
   defaultSearchCriteria: searchCriteria,
 });
 
-const { category } = useCategory(categoryId);
+const { category } = await useCategory(categoryId);
 
 useCategorySeo(category);
 

package/app/components/Checkout/PaymentAndDelivery.vue

@@ -89,7 +89,7 @@ watch(
           <UIcon name="i-lucide-badge-euro" class="size-8" />
           <h2 class="text-2xl text-blackish my-8">Zahlungsarten</h2>
           <UButton
-            to="/unternehmen/zahlung-und-versand"
+            to="/zahlung-und-versand"
             size="md"
             variant="ghost"
             icon="i-lucide-circle-question-mark"
@@ -106,7 +106,7 @@ watch(
           <UIcon name="i-lucide-car" class="size-8" />
           <h2 class="text-2xl text-blackish my-8">Versandarten</h2>
           <UButton
-            to="/unternehmen/zahlung-und-versand"
+            to="/zahlung-und-versand"
             size="md"
             variant="ghost"
             icon="i-lucide-circle-question-mark"

package/app/components/Footer.vue

@@ -1,28 +1,33 @@
 <script setup lang="ts">
 import { useNavigation } from "~/composables/useNavigation";
-import type { Schemas } from "#shopware";
-import type { NavigationMenuItem } from "@nuxt/ui";
+import type {
+  FooterColumn,
+  FooterColumnLink,
+  NavigationMenuItem,
+} from "@nuxt/ui";
 
-const { footerNavigation } = useNavigation();
+const { footerMenu } = useNavigation(true);
 
-const mapCategoryToNavItem = (
-  category: Schemas["Category"],
-): NavigationMenuItem => {
-  const label = category.translated?.name ?? "";
+const menuItemToFooterColumnLink = (
+  item: NavigationMenuItem,
+): FooterColumnLink => ({
+  label: item.label ?? "",
+  to: item.to as string | undefined,
+  target: item.target as string | undefined,
+  icon: item.icon,
+});
 
-  return {
-    label,
-    description: `${label} Kategorie`,
-    to: category.seoUrl,
-    defaultOpen: true,
-    icon: category.customFields?.shopbite_category_icon,
-    children: (category.children ?? []).map(mapCategoryToNavItem),
-  };
-};
+const menuItemsToFooterColumns = (
+  items: NavigationMenuItem[],
+): FooterColumn[] =>
+  items.map((item) => ({
+    label: item.label ?? "",
+    children: item.children?.map(menuItemToFooterColumnLink) ?? [],
+  }));
 
-const navItems = computed<NavigationMenuItem[]>(() => {
-  return (footerNavigation.value ?? []).map(mapCategoryToNavItem);
-});
+const footerColumns = computed<FooterColumn[]>(() =>
+  menuItemsToFooterColumns(footerMenu.value),
+);
 </script>
 
 <template>
@@ -31,7 +36,7 @@ const navItems = computed<NavigationMenuItem[]>(() => {
   <UFooter :ui="{ top: 'border-b border-default' }">
     <template #top>
       <UContainer>
-        <UFooterColumns :columns="navItems" />
+        <UFooterColumns :columns="footerColumns" />
       </UContainer>
     </template>
 

package/app/components/Header/Body.vue

@@ -1,36 +1,24 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui";
+import { useNavigation } from "~/composables/useNavigation";
 
-const route = useRoute();
+const config = useRuntimeConfig();
 
-const { data: navigationData } = useAsyncData("navigation", () =>
-  queryCollection("navigation").first(),
+const multiChannelEnabled = computed(
+  () => config.public.shopBite.feature.multiChannel === "true",
 );
 
-const navi = computed<NavigationMenuItem[]>(() => {
-  if (!navigationData.value?.main) return [];
-
-  return navigationData.value.main.map((item) => ({
-    label: item.label,
-    icon: item.icon,
-    to: item.to,
-    target: item.target,
-    active:
-      item.to === "/"
-        ? route.path.length === 1
-        : route.path.startsWith(item.to),
-  }));
-});
+console.log(multiChannelEnabled.value);
+const { mainMenu } = useNavigation(false);
 </script>
 
 <template>
   <UNavigationMenu
     color="primary"
-    :items="navi"
+    :items="mainMenu"
     orientation="vertical"
     class="-mx-2.5"
   />
-  <div class="my-4">
+  <div v-if="multiChannelEnabled" class="my-4">
     <SalesChannelSwitch />
   </div>
 </template>

package/app/components/Header/Right.vue

@@ -3,9 +3,10 @@ import { useUser } from "@shopware/composables";
 import type { DropdownMenuItem } from "@nuxt/ui";
 
 const cartQuickViewOpen = ref(false);
-const { count } = useCart();
+const { count: cartCount } = useCart();
+const { count: wishListCount } = useWishlist();
 const { isCheckoutEnabled } = useShopBiteConfig();
-const { isLoggedIn, isGuestSession, user, logout } = useUser();
+const { isLoggedIn, isGuestSession, logout } = useUser();
 const toast = useToast();
 
 const logoutHandler = () => {
@@ -17,50 +18,58 @@ const logoutHandler = () => {
   });
 };
 
-const { data: navigationData } = await useAsyncData("navigation:right", () =>
-  queryCollection("navigation").first(),
-);
-
-const accountHoverText = computed(() => {
-  return isLoggedIn.value || isGuestSession.value
-    ? `${user.value?.firstName} ${user.value?.lastName}`
-    : "Hallo";
-});
-
-const loggedInDropDown = computed<DropdownMenuItem[][]>(() => {
-  if (!navigationData.value?.account.loggedIn) return [];
-
-  return navigationData.value.account.loggedIn
-    .map((group) =>
-      group
-        .filter((item) => {
-          if (isGuestSession.value) {
-            return item.type === "label" || item.action === "logout";
-          }
-          return true;
-        })
-        .map((item) => ({
-          label: item.type === "label" ? accountHoverText.value : item.label,
-          type: item.type,
-          icon: item.icon,
-          to: item.to,
-          onSelect: item.action === "logout" ? logoutHandler : undefined,
-        })),
-    )
-    .filter((group) => group.length > 0);
-});
-
-const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
-  if (!navigationData.value?.account.loggedOut) return [];
-
-  return navigationData.value.account.loggedOut.map((group) =>
-    group.map((item) => ({
-      label: item.label,
-      type: item.type,
-      icon: item.icon,
-      to: item.to,
-    })),
-  );
+const dropDownMenu = computed<DropdownMenuItem[][]>(() => {
+  if (isLoggedIn.value) {
+    return [
+      [
+        {
+          label: "Mein Konto",
+          type: "label",
+        },
+        {
+          label: "Übersicht",
+          icon: "i-lucide-user",
+          to: "/konto",
+        },
+        {
+          label: "Bestellungen",
+          icon: "i-lucide-pizza",
+          to: "/konto/bestellungen",
+        },
+        {
+          label: "Adressen",
+          icon: "i-lucide-house",
+          to: "/konto/adressen",
+        },
+      ],
+      [
+        {
+          label: "Abmelden",
+          icon: "i-lucide-log-out",
+          onSelect: () => logoutHandler(),
+        },
+      ],
+    ];
+  } else {
+    return [
+      [
+        {
+          label: "Mein Konto",
+          type: "label",
+        },
+        {
+          label: "Anmelden",
+          icon: "i-lucide-user",
+          to: "/anmelden",
+        },
+        {
+          label: "Registrieren",
+          icon: "i-lucide-user-plus",
+          to: "/registrierung",
+        },
+      ],
+    ];
+  }
 });
 </script>
 
@@ -73,9 +82,7 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
     icon="i-lucide-phone"
     aria-label="Anrufen"
   />
-  <UDropdownMenu
-    :items="isLoggedIn || isGuestSession ? loggedInDropDown : loggedOutDropDown"
-  >
+  <UDropdownMenu :items="dropDownMenu">
     <UChip v-if="isLoggedIn || isGuestSession" size="3xl" text="✓">
       <UButton
         aria-label="Konto Dropdown öffnen"
@@ -89,29 +96,42 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
       aria-label="Konto Dropdown öffnen"
       icon="i-lucide-user"
       color="neutral"
-      variant="outline"
+      variant="ghost"
     />
   </UDropdownMenu>
+  <div>
+    <UChip :text="wishListCount" size="3xl">
+      <UButton
+        aria-label="Zur Merkliste"
+        color="neutral"
+        variant="ghost"
+        to="/merkliste"
+        icon="i-lucide-heart"
+      />
+    </UChip>
+  </div>
   <UDrawer
     v-if="isCheckoutEnabled"
     v-model:open="cartQuickViewOpen"
     title="Warenkorb"
     direction="right"
   >
-    <UChip :text="count" size="3xl">
+    <UChip :text="cartCount" size="3xl">
       <UButton
         aria-label="Zum Warenkorb"
         color="neutral"
-        variant="outline"
-        icon="i-lucide-shopping-cart"
+        variant="ghost"
+        icon="i-lucide-shopping-bag"
       />
     </UChip>
 
     <template #header>
-      <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">
-        <UIcon name="i-lucide-shopping-cart" class="size-8" color="primary" />
-        Warenkorb
-      </h2>
+      <div class="h-full flex flex-col justify-center">
+        <h2 class="flex items-center gap-2 text-3xl md:text-4xl mt-8 mb-3 pb-2">
+          <UIcon name="i-lucide-shopping-bag" class="size-8" color="primary" />
+          Warenkorb
+        </h2>
+      </div>
     </template>
     <template #body>
       <CartQuickView
@@ -122,5 +142,3 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
     </template>
   </UDrawer>
 </template>
-
-<style scoped></style>

package/app/components/Header.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useNavigation } from "~/composables/useNavigation";
 
-const { mainMenu } = useNavigation();
+const { mainMenu } = useNavigation(false);
 
 const loginSlide = ref(false);
 </script>

package/app/components/Navigation/DesktopLeft2.vue

@@ -3,7 +3,7 @@ import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 import { useNavigation } from "~/composables/useNavigation";
 
-const { mainNavigation } = useNavigation();
+const { mainNavigation } = useNavigation(false);
 
 const mapCategoryToNavItem = (
   category: Schemas["Category"],

package/app/components/Navigation/MobileTop2.vue

@@ -14,7 +14,7 @@ const props = withDefaults(
   },
 );
 
-const { mainNavigation } = useNavigation();
+const { mainNavigation } = useNavigation(true);
 
 const navItems = computed<NavigationMenuItem[]>(() => {
   const elements = mainNavigation.value ?? [];

package/app/components/SalesChannelSwitch.vue

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

package/app/composables/useCategory.ts

@@ -1,6 +1,6 @@
 import { encodeForQuery } from "@shopware/api-client/helpers";
 
-export function useCategory(categoryId: Ref<string>) {
+export async function useCategory(categoryId: Ref<string>) {
   const { apiClient } = useShopwareContext();
 
   const criteria = encodeForQuery({
@@ -17,7 +17,7 @@ export function useCategory(categoryId: Ref<string>) {
 
   const cacheKey = computed(() => `category-${categoryId.value}`);
 
-  const { data } = useAsyncData(cacheKey, async () => {
+  const { data } = await useAsyncData(cacheKey, async () => {
     const response = await apiClient.invoke(
       "readCategoryGet get /category/{navigationId}",
       {

package/app/composables/useNavigation.ts

@@ -1,7 +1,8 @@
 import type { NavigationMenuItem } from "@nuxt/ui";
 import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { Schemas } from "#shopware";
 
-export function useNavigation() {
+export function useNavigation(withChildren: boolean | undefined) {
   const { apiClient } = useShopwareContext();
 
   const criteria = encodeForQuery({
@@ -32,15 +33,24 @@ export function useNavigation() {
     return response.data;
   });
 
+  const mapCategoryToMenuItem = (
+    category: Schemas["Category"],
+  ): NavigationMenuItem => ({
+    label: category.translated?.name ?? category.name,
+    to: category.translated?.seoUrl ?? category.seoUrl,
+    target: category.linkNewTab ? "_blank" : undefined,
+    icon: (category.customFields as Record<string, string> | null)
+      ?.shopbite_category_icon,
+    children:
+      category.children?.length && withChildren
+        ? category.children.map(mapCategoryToMenuItem)
+        : undefined,
+  });
+
   const mainMenu = computed<NavigationMenuItem[]>(() => {
     if (!mainNavigation.value) return [];
 
-    return mainNavigation.value?.map((item) => ({
-      label: item.translated.name,
-      to: item.seoUrl,
-      target: item.linkNewTab ? "_blank" : undefined,
-      icon: item.customFields?.shopbite_category_icon,
-    }));
+    return mainNavigation.value?.map(mapCategoryToMenuItem);
   });
 
   const { data: footerNavigation } = useAsyncData(
@@ -64,12 +74,7 @@ export function useNavigation() {
   const footerMenu = computed<NavigationMenuItem[]>(() => {
     if (!footerNavigation.value) return [];
 
-    return footerNavigation.value?.map((item) => ({
-      label: item.translated.name,
-      to: item.seoUrl,
-      target: item.linkNewTab ? "_blank" : undefined,
-      icon: item.customFields?.shopbite_category_icon,
-    }));
+    return footerNavigation.value?.map(mapCategoryToMenuItem);
   });
 
   return {

package/nuxt.config.ts

@@ -66,9 +66,6 @@ export default defineNuxtConfig({
         countryId: "",
       },
       storeUrl: "",
-      sentry: {
-        dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
-      },
     },
   },
 
@@ -184,6 +181,9 @@ 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.14.0",
+  "version": "1.14.4",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -33,6 +33,7 @@
     "@vite-pwa/nuxt": "^1.0.7",
     "@vueuse/core": "^14.0.0",
     "dotenv": "^17.2.3",
+    "fflate": "^0.8.2",
     "nuxt": "^4.2.1",
     "nuxt-vitalizer": "2.0.0",
     "uuid": "^13.0.0"

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

@@ -28,7 +28,7 @@ test("Simple Checkout As Recurring Customer", async ({ page }) => {
 
 async function clearCart(page: Page) {
   const cartButton = page
-    .locator("button .i-lucide\\:shopping-cart")
+    .locator("button .i-lucide\\:shopping-bag")
     .locator("..");
 
   await expect(cartButton).toBeVisible({ timeout: 5000 });

package/test/nuxt/HeaderRight.test.ts

@@ -89,8 +89,7 @@ describe("HeaderRight", () => {
     const dropdown = component.findComponent({ name: "UDropdownMenu" });
     const items = dropdown.props("items");
 
-    expect(items[0][0].label).toBe("Jetzt anmelden");
-    expect(items[1][0].to).toBe("/anmelden");
+    expect(items[0][0].label).toBe("Mein Konto");
   });
 
   it("shows logged in dropdown items when logged in", async () => {
@@ -101,18 +100,7 @@ describe("HeaderRight", () => {
     const dropdown = component.findComponent({ name: "UDropdownMenu" });
     const items = dropdown.props("items");
 
-    expect(items[0][0].label).toBe("Jane Doe");
-    expect(items[1][0].to).toBe("/konto/bestellungen");
-    expect(items[2][0].label).toBe("Abmelden");
-  });
-
-  it("shows cart drawer with correct count when checkout is enabled", async () => {
-    const component = await mountSuspended(HeaderRight);
-    const drawer = component.findComponent({ name: "UDrawer" });
-    expect(drawer.exists()).toBe(true);
-
-    const chip = component.findComponent({ name: "UChip" });
-    expect(chip.props("text")).toBe(5);
+    expect(items[0][0].label).toBe("Mein Konto");
   });
 
   it("calls logout and updates state when logout is selected", async () => {

package/test/nuxt/PaymentAndDelivery.test.ts

@@ -70,9 +70,7 @@ describe("PaymentAndDelivery", () => {
 
   it("renders help buttons with correct links", async () => {
     const wrapper = await mountSuspended(PaymentAndDelivery);
-    const helpButtons = wrapper.findAll(
-      'a[href="/unternehmen/zahlung-und-versand"]',
-    );
+    const helpButtons = wrapper.findAll('a[href="/zahlung-und-versand"]');
     expect(helpButtons.length).toBe(2);
   });
 });

package/content/navigation.yml

@@ -1,57 +0,0 @@
-main:
-  - label: Speisekarte
-    icon: i-lucide-utensils
-    to: /speisekarte/
-  - label: Routenplaner
-    icon: i-lucide-map-pinned
-    to: https://www.openstreetmap.org/directions?from=&to=50.080610%2C8.863783#map=19/50.080323/8.864079
-    target: _blank
-  - label: Merkliste
-    icon: i-lucide-book-heart
-    to: /merkliste
-
-account:
-  loggedIn:
-    - - label: Mein Konto
-        type: label
-    - - label: Konto
-        icon: i-lucide-user
-        to: /konto
-      - label: Bestellungen
-        icon: i-lucide-pizza
-        to: /konto/bestellungen
-      - label: Adressen
-        icon: i-lucide-house
-        to: /konto/adressen
-    - - label: Abmelden
-        icon: i-lucide-log-out
-        action: logout
-  loggedOut:
-    - - label: Jetzt anmelden
-        type: label
-    - - label: Zur Anmeldung
-        icon: i-lucide-user
-        to: /anmelden
-
-footer:
-  withGithubLink: true
-  withColorModeSwitch: true
-  text: Alle Preise inkl. gesetzlicher Mehrwertsteuer zzgl. Versandkosten, wenn nicht anders beschrieben
-  columns:
-    - label: Informationen
-      children:
-        - label: Impressum
-          to: /impressum
-        - label: Datenschutz
-          to: /datenschutz
-        - label: AGB
-          to: /agb
-    - label: Top Kategorien
-      children:
-        - label: Pizza
-          to: /speisekarte/pizza/
-    - label: Unternehmen
-      children:
-        - label: 'Tel: 06104 71427'
-        - label: Kantstraße 6
-        - label: 631679 Oberthsuasen

package/content/unternehmen/agb.md

@@ -1,6 +0,0 @@
----
-title: AGB
-description: Allgemeine Geschäftsbedingungen
----
-
-# AGB

package/content/unternehmen/datenschutz.md

@@ -1,6 +0,0 @@
----
-title: Datenschutz
-description: Datenschutzbestimmungen für unsere Website
----
-
-# Datenschutz

package/content/unternehmen/zahlung-und-versand.md

@@ -1,34 +0,0 @@
----
-title: Zahlungs- und Lieferinformationen
-description: Zahlungs- und Lieferinformationen
----
-
-# Zahlungs- und Lieferinformationen
-
-### Liefermethoden
-
-Wir bieten Ihnen zwei Möglichkeiten, Ihre Bestellung zu erhalten:
-
-- **Lieferung:** Wir bringen Ihre Bestellung direkt zu Ihnen nach Hause (beachten Sie bitte unsere Liefergebiete).
-- **Abholung:** Sie können Ihre Bestellung auch direkt bei uns abholen (Kantstraße 6, 63179 Obertshausen).
-
-### Zahlungsmöglichkeiten
-
-- **Bei Lieferung:** Die Zahlung erfolgt ausschließlich **bar**.
-- **Bei Abholung:** Sie können bar oder elektronisch mit **EC-Karte** bezahlen.
-
-### Lieferbedingungen
-
-Wir liefern ausschließlich in folgende Gebiete:
-
-- **63179 Obertshausen** (Stadtteile Obertshausen und Hausen)
-- **63165 Mühlheim** (Stadtteil Lämmerspiel)
-
-### Lieferkosten
-
-- **Ab 15,00 € Bestellwert:** Lieferung frei Haus (versandkostenfrei).
-- **Unter 15,00 € Bestellwert:** Wir erheben eine Lieferpauschale von **2,00 €**.
-
-### Lieferzeit
-
-Die Lieferzeit beträgt in der Regel ca. **30 Minuten**. Bitte beachten Sie, dass es zu Stoßzeiten zu Abweichungen kommen kann.