@shopbite-de/storefront 1.18.1 → 1.18.3

package/app/components/ImageGallery.vue

@@ -26,19 +26,32 @@ defineProps<{
     :links="links"
   >
     <template #body>
-      <UCarousel
-        v-slot="{ item, index }"
-        arrows
-        :items="images"
-        class="w-full max-w-2xl mx-auto"
-      >
-        <img
-          :src="item.image"
-          :alt="item.alt"
-          :fetchpriority="index === 0 ? 'high' : 'auto'"
-          class="rounded-lg"
-        />
-      </UCarousel>
+      <ClientOnly>
+        <UCarousel
+          v-slot="{ item, index }"
+          arrows
+          :items="images"
+          class="w-full max-w-2xl mx-auto"
+        >
+          <img
+            :src="item.image"
+            :alt="item.alt"
+            :fetchpriority="index === 0 ? 'high' : 'auto'"
+            class="rounded-lg"
+          />
+        </UCarousel>
+        <template #fallback>
+          <div class="w-full max-w-2xl mx-auto">
+            <img
+              v-if="images?.[0]"
+              :src="images[0].image"
+              :alt="images[0].alt"
+              fetchpriority="high"
+              class="rounded-lg"
+            />
+          </div>
+        </template>
+      </ClientOnly>
     </template>
   </UPageSection>
 </template>

package/app/components/Product/Card.vue

@@ -81,7 +81,7 @@ function onVariantSelected(variant: Schemas["Product"]) {
       :ui="{ footer: 'w-full', root: 'shadow-lg' }"
     >
       <template #header>
-        <UBadge
+        <LazyUBadge
           v-if="isVegi"
           icon="i-lucide-leaf"
           color="success"
@@ -92,7 +92,7 @@ function onVariantSelected(variant: Schemas["Product"]) {
       </template>
 
       <div v-if="product.cover?.media?.url">
-        <NuxtImg
+        <LazyNuxtImg
           :src="product.cover.media.url"
           class="rounded-md h-auto max-w-full object-contain ransition-opacity duration-700"
           sizes="(min-width: 1024px) 50vw, 100vw"
@@ -138,15 +138,17 @@ function onVariantSelected(variant: Schemas["Product"]) {
             />
           </div>
         </div>
-        <UCollapsible v-model:open="openDetails" class="flex flex-col gap-2">
-          <template #content>
-            <ProductDetail2
-              :product-id="product.id"
-              @product-added="toggleDetails"
-              @variant-selected="onVariantSelected"
-            />
-          </template>
-        </UCollapsible>
+        <ClientOnly>
+          <UCollapsible v-model:open="openDetails" class="flex flex-col gap-2">
+            <template #content>
+              <LazyProductDetail
+                :product-id="product.id"
+                @product-added="toggleDetails"
+                @variant-selected="onVariantSelected"
+              />
+            </template>
+          </UCollapsible>
+        </ClientOnly>
       </template>
     </UPageCard>
   </AnimatedSection>

package/app/components/Product/CardSkeleton.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="ring-1 ring-accented rounded-xl shadow-lg p-4 flex flex-row gap-4"
+  >
+    <div class="flex flex-col gap-3 flex-1 min-w-0">
+      <USkeleton class="h-5 w-20 rounded-full" />
+      <div class="flex items-baseline gap-2">
+        <USkeleton class="h-3.5 w-7" />
+        <USkeleton class="h-3.5 w-36" />
+      </div>
+      <div class="flex flex-col gap-2">
+        <USkeleton class="h-3 w-full" />
+        <USkeleton class="h-3 w-5/6" />
+        <USkeleton class="h-3 w-1/2" />
+      </div>
+      <div class="flex justify-between items-center mt-auto pt-2">
+        <USkeleton class="h-4 w-14" />
+        <div class="flex gap-2">
+          <USkeleton class="h-8 w-8 rounded-md" />
+          <USkeleton class="h-8 w-8 rounded-md" />
+        </div>
+      </div>
+    </div>
+    <USkeleton class="size-28 rounded-md shrink-0" />
+  </div>
+</template>

package/app/components/Product/{Detail2.vue → Detail.vue}

@@ -142,7 +142,7 @@ watch(productDetails, () => {
 <template>
   <div v-if="!pending">
     <div v-if="productDetails?.configurator">
-      <ProductConfigurator2
+      <ProductConfigurator
         v-if="productDetails?.configurator"
         :p="productDetails.product"
         :c="productDetails.configurator"

package/app/components/User/Detail.vue

@@ -47,7 +47,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="shadow-md rounded-md mb-4 p-6 bg-elevated">
+  <UCard class="mb-4">
     <div>{{ fullName }}</div>
     <div>{{ user?.email }}</div>
     <USeparator
@@ -76,5 +76,5 @@ onMounted(() => {
       :with-edit-button="withEditButton"
       @update:address="handleAddressUpdate"
     />
-  </div>
+  </UCard>
 </template>

package/app/composables/useShopBiteConfig.ts

@@ -1,31 +1,16 @@
-import { useContext, useShopwareContext } from "#imports";
-import type { Schemas } from "#shopware";
-
-type useShopBiteConfigReturn = {
-  deliveryTime: ComputedRef<number>;
-  isCheckoutEnabled: ComputedRef<boolean>;
-  refresh(): Promise<Schemas["ShopBiteConfig"]>;
-};
-
-export function useShopBiteConfig(): useShopBiteConfigReturn {
+export function useShopBiteConfig() {
   const { apiClient } = useShopwareContext();
 
-  const _deliveryTime = useContext<number>("deliveryTime");
-  const _isCheckoutEnabled = useContext<boolean>("isCheckoutActive");
-
-  async function refresh(): Promise<Schemas["ShopBiteConfig"]> {
+  const { data, refresh } = useAsyncData("shopbite-config", async () => {
     const { data } = await apiClient.invoke(
       "shopbite.config.get get /shopbite/config",
     );
-    _deliveryTime.value = data.deliveryTime;
-    _isCheckoutEnabled.value = data.isCheckoutEnabled;
-
     return data;
-  }
+  });
 
   return {
-    deliveryTime: computed(() => _deliveryTime.value),
-    isCheckoutEnabled: computed(() => _isCheckoutEnabled.value),
+    deliveryTime: computed(() => data.value?.deliveryTime ?? 30),
+    isCheckoutEnabled: computed(() => data.value?.isCheckoutEnabled ?? false),
     refresh,
   };
 }

package/app/pages/bestellung/bestaetigen.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { isLoggedIn, isGuestSession } = useUser();
+const { setStep } = useCheckoutStore();
+
+if (!isLoggedIn.value && !isGuestSession.value) {
+  await navigateTo("/bestellung/warenkorb");
+}
+
+setStep(2);
+</script>
+
+<template>
+  <CheckoutSummary />
+</template>

package/app/pages/bestellung/warenkorb.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import LoginOrRegister from "~/components/Checkout/LoginOrRegister.vue";
+
+const { isLoggedIn, isGuestSession } = useUser();
+const { isEmpty } = useCart();
+const { setStep } = useCheckoutStore();
+
+setStep(0);
+
+const isCustomerAvailable = computed<boolean>(() => {
+  return isLoggedIn.value || isGuestSession.value;
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 py-8">
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-semibold">
+        {{ isCustomerAvailable ? "Deine Daten" : "Anmelden oder registrieren" }}
+      </h2>
+      <LoginOrRegister v-if="!isLoggedIn && !isGuestSession" />
+      <UserDetail v-else :with-edit-button="true" />
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-semibold">Warenkorb</h2>
+      <UCard>
+        <CartQuickView />
+      </UCard>
+      <UButton
+        v-if="!isEmpty && isCustomerAvailable"
+        label="Zahlungs- und Versandart auswählen"
+        size="xl"
+        block
+        trailing-icon="i-lucide-arrow-right"
+        to="/bestellung/zahlung-versand"
+      />
+      <UButton
+        v-if="isEmpty"
+        label="Zur Speisekarte"
+        size="xl"
+        block
+        variant="outline"
+        icon="i-lucide-arrow-left"
+        to="/speisekarte"
+      />
+    </div>
+  </div>
+</template>

package/app/pages/bestellung/zahlung-versand.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { isLoggedIn, isGuestSession } = useUser();
+const { setStep } = useCheckoutStore();
+
+if (!isLoggedIn.value && !isGuestSession.value) {
+  await navigateTo("/bestellung/warenkorb");
+}
+
+setStep(1);
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 py-8">
+    <CheckoutPaymentAndDelivery />
+    <UButton
+      label="Weiter zu Prüfen & Bestellen"
+      trailing-icon="i-lucide-arrow-right"
+      size="xl"
+      block
+      to="/bestellung/bestaetigen"
+    />
+  </div>
+</template>

package/app/pages/bestellung.vue

@@ -1,95 +1,47 @@
 <script setup lang="ts">
-import LoginOrRegister from "~/components/Checkout/LoginOrRegister.vue";
 import type { StepperItem } from "@nuxt/ui";
 
-const { isLoggedIn, isGuestSession } = useUser();
-const { isEmpty } = useCart();
+const checkoutStore = useCheckoutStore();
+const { step } = storeToRefs(checkoutStore);
 
-const items = [
-  {
-    slot: "user" as const,
-    title: "Deine Daten",
-    icon: "i-lucide-user",
-  },
-  {
-    slot: "shipping" as const,
-    title: "Zahlung & Versand",
-    icon: "i-lucide-truck",
-  },
-  {
-    slot: "checkout" as const,
-    title: "Prüfen & Bestellen",
-    icon: "i-lucide-check",
-  },
-] satisfies StepperItem[];
+const stepRoutes = [
+  "/bestellung/warenkorb",
+  "/bestellung/zahlung-versand",
+  "/bestellung/bestaetigen",
+] as const;
 
-const activeStep = ref(0);
+const items = computed(
+  () =>
+    [
+      {
+        title: "Warenkorb",
+        icon: "i-lucide-shopping-cart",
+        disabled: false,
+      },
+      {
+        title: "Zahlung & Versand",
+        icon: "i-lucide-truck",
+        disabled: step.value < 1,
+      },
+      {
+        title: "Prüfen & Bestellen",
+        icon: "i-lucide-check",
+        disabled: step.value < 2,
+      },
+    ] satisfies StepperItem[],
+);
 
-const isCustomerAvailable = computed<boolean>(() => {
-  return isLoggedIn.value || isGuestSession.value;
+watch(step, (newStep) => {
+  navigateTo(stepRoutes[newStep]);
 });
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader title="Bestellung aufgeben" />
-    <UPageBody>
-      <UStepper v-model="activeStep" :items="items">
-        <template #user>
-          <div class="flex flex-col md:flex-row w-full gap-18 my-16">
-            <LoginOrRegister
-              v-if="!isLoggedIn && !isGuestSession"
-              class="basis-1/2"
-            />
-            <div v-else class="basis-1/2">
-              <UserDetail :with-edit-button="true" />
-            </div>
-            <div class="basis-1/2">
-              <h3 class="text-2xl mb-6 font-semibold">Warenkorb</h3>
-              <CartQuickView />
-              <UButton
-                v-if="!isEmpty && isCustomerAvailable"
-                :disabled="!isLoggedIn && !isGuestSession"
-                label="Zahlungs- und Versandart auswählen"
-                size="xl"
-                block
-                trailing-icon="i-lucide-arrow-right"
-                class="my-4"
-                @click="activeStep = 1"
-              />
-              <UButton
-                v-if="isEmpty"
-                label="Zur Speisekarte"
-                size="xl"
-                block
-                icon="i-lucide-arrow-left"
-                class="my-4"
-                to="/speisekarte"
-              />
-            </div>
-          </div>
-        </template>
-
-        <template #shipping>
-          <div class="my-14">
-            <CheckoutPaymentAndDelivery />
-            <div class="w-full flex justify-end">
-              <UButton
-                label="Weiter zu Prüfen & Bestellen"
-                trailing-icon="i-lucide-arrow-right"
-                class="m-8 md:max-w-96"
-                size="xl"
-                block
-                @click="activeStep = 2"
-              />
-            </div>
-          </div>
-        </template>
-
-        <template #checkout>
-          <CheckoutSummary />
-        </template>
-      </UStepper>
-    </UPageBody>
-  </UContainer>
+  <UPageSection>
+    <UStepper ref="stepper" v-model="step" :items="items" size="lg">
+      <template #content>
+        <NuxtPage />
+      </template>
+    </UStepper>
+  </UPageSection>
 </template>

package/app/pages/index.vue

@@ -47,7 +47,7 @@ useSeoMeta({
 
     <USeparator :ui="{ border: 'border-primary/30' }" />
 
-    <FoodMarquee
+    <LazyFoodMarquee
       v-if="page.marquee.items?.length > 0"
       :title="page.marquee.title"
       :description="page.marquee.description"

package/app/pages/kontakt.vue

@@ -13,7 +13,7 @@ if (config.public.shopBite.feature.contactForm !== true) {
 
 <template>
   <UPageSection
-    title="Sie haben eine Frage oder Anregung?Wir freuen uns auf Ihre Nachricht."
+    title="Sie haben eine Frage oder Anregung? Wir freuen uns auf Ihre Nachricht."
     description="Bitte beachten Sie, dass wir Tischreservierung oder Tischstornierung nur telefonisch entgegennehmen können."
     icon="i-lucide-mail"
     orientation="horizontal"

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

@@ -1,3 +1,4 @@
+H
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
 

package/app/stores/checkout.ts

@@ -0,0 +1,22 @@
+const stepRoutes = [
+  "/bestellung/warenkorb",
+  "/bestellung/zahlung-versand",
+  "/bestellung/bestaetigen",
+] as const;
+
+export const useCheckoutStore = defineStore("checkout", () => {
+  const step = ref(0);
+
+  function setStep(index: number) {
+    step.value = index;
+  }
+
+  async function navigateToStep(index: number) {
+    if (index < 0 || index >= stepRoutes.length) return;
+    if (index <= step.value) {
+      await navigateTo(stepRoutes[index]);
+    }
+  }
+
+  return { step, setStep, navigateToStep };
+});

package/nuxt.config.ts

@@ -78,6 +78,9 @@ export default defineNuxtConfig({
     "/registrierung/bestaetigen": {
       ssr: false,
     },
+    "/bestellung": {
+      redirect: "/bestellung/warenkorb",
+    },
   },
 
   css: ["~/assets/css/main.css"],
@@ -100,6 +103,7 @@ export default defineNuxtConfig({
     "@nuxt/scripts",
     "nuxt-vitalizer",
     "@nuxt/eslint",
+    "@pinia/nuxt",
   ],
 
   content: {
@@ -197,6 +201,7 @@ export default defineNuxtConfig({
       "@nuxt/scripts",
       "@nuxt/test-utils/module",
       "@nuxt/eslint",
+      "@nuxt/hints",
     ],
   },
   $production: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.18.1",
+  "version": "1.18.3",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -27,6 +27,7 @@
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.5.1",
     "@nuxtjs/robots": "^6.0.0",
+    "@pinia/nuxt": "0.11.3",
     "@sentry/nuxt": "^10.43.0",
     "@shopware/api-client": "^1.4.0",
     "@shopware/api-gen": "^1.4.0",
@@ -43,6 +44,7 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
+    "@nuxt/hints": "1.0.2",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/hugeicons": "^1.2.23",
     "@nuxt/devtools-kit": "^3.2.3",

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

@@ -39,7 +39,7 @@ async function clearCart(page: Page) {
   await expect(page.getByRole("heading", { name: /warenkorb/i })).toBeVisible();
 
   const deleteButtons = page.getByRole("button", {
-    name: "Remove item from cart",
+    name: "Artikel entfernen",
   });
   const itemCount = await deleteButtons.count();
 
@@ -92,7 +92,7 @@ async function selectProductAndAddToCart(
 }
 
 async function proceedToCheckoutAndLogin(page: Page) {
-  await page.goto("/bestellung", { waitUntil: "load" });
+  await page.goto("/bestellung/warenkorb", { waitUntil: "load" });
 
   const loginTab = page.getByRole("tab", { name: "Einloggen" });
   await expect(loginTab).toBeVisible();
@@ -129,7 +129,7 @@ async function proceedToCheckoutAndLogin(page: Page) {
 
     // Wait for login to complete and navigate back to checkout
     await page.waitForTimeout(2000);
-    await page.goto("/bestellung", { waitUntil: "load" });
+    await page.goto("/bestellung/zahlung-versand", { waitUntil: "load" });
     await page.waitForTimeout(1000);
 
     // Skip the rest of this function since we already logged in
@@ -159,15 +159,15 @@ async function proceedToCheckoutAndLogin(page: Page) {
 
 async function verifyCheckoutQuantity(page: Page) {
   // Ensure we're on the checkout page
-  if (!page.url().includes("/bestellung")) {
-    await page.goto("/bestellung", { waitUntil: "load" });
+  if (!page.url().includes("/bestellung/warenkorb")) {
+    await page.goto("/bestellung/warenkorb", { waitUntil: "load" });
     await page.waitForTimeout(1000);
   }
 
   // Try to find the quantity input with multiple strategies
   const checkoutQuantityInput = page
     .getByRole("spinbutton", {
-      name: /item quantity/i,
+      name: /menge/i,
     })
     .or(page.getByRole("spinbutton"))
     .or(page.locator("input[type='number']"));
@@ -178,7 +178,7 @@ async function verifyCheckoutQuantity(page: Page) {
 }
 
 async function selectPaymentAndShipping(page: Page) {
-  const nextStepButton = page.getByRole("button", {
+  const nextStepButton = page.getByRole("link", {
     name: "Zahlungs- und Versandart auswählen",
   });
   await expect(nextStepButton).toBeVisible({ timeout: 10000 });
@@ -197,7 +197,7 @@ async function selectPaymentAndShipping(page: Page) {
 }
 
 async function proceedToOrderReview(page: Page) {
-  const lastStepButton = page.getByRole("button", {
+  const lastStepButton = page.getByRole("link", {
     name: "Weiter zu Prüfen & Bestellen",
   });
   await expect(lastStepButton).toBeVisible({ timeout: 10000 });

package/test/nuxt/useShopBiteConfig.test.ts

@@ -1,14 +1,11 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
 import { useShopBiteConfig } from "~/composables/useShopBiteConfig";
 
-const { mockInvoke, mockDeliveryTime, mockIsCheckoutEnabled } = vi.hoisted(
-  () => ({
-    mockInvoke: vi.fn(),
-    mockDeliveryTime: { value: 0 },
-    mockIsCheckoutEnabled: { value: false },
-  }),
-);
+const { mockInvoke } = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+}));
 
 mockNuxtImport("useShopwareContext", () => () => ({
   apiClient: {
@@ -16,25 +13,26 @@ mockNuxtImport("useShopwareContext", () => () => ({
   },
 }));
 
-mockNuxtImport("useContext", () => (key: string) => {
-  if (key === "deliveryTime") return mockDeliveryTime;
-  if (key === "isCheckoutActive") return mockIsCheckoutEnabled;
-  return { value: null };
-});
+mockNuxtImport(
+  "useAsyncData",
+  () => (_key: string, fetcher: () => Promise<unknown>) => {
+    const data = ref<unknown>(null);
+    const refresh = async () => {
+      data.value = await fetcher();
+    };
+    return { data, refresh };
+  },
+);
 
 describe("useShopBiteConfig", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    mockDeliveryTime.value = 0;
-    mockIsCheckoutEnabled.value = false;
   });
 
-  it("should initialize with values from context", () => {
-    mockDeliveryTime.value = 30;
-    mockIsCheckoutEnabled.value = true;
+  it("should return default values when no data is loaded", () => {
     const { deliveryTime, isCheckoutEnabled } = useShopBiteConfig();
     expect(deliveryTime.value).toBe(30);
-    expect(isCheckoutEnabled.value).toBe(true);
+    expect(isCheckoutEnabled.value).toBe(false);
   });
 
   it("should refresh values from API", async () => {
@@ -53,7 +51,5 @@ describe("useShopBiteConfig", () => {
     );
     expect(deliveryTime.value).toBe(45);
     expect(isCheckoutEnabled.value).toBe(true);
-    expect(mockDeliveryTime.value).toBe(45);
-    expect(mockIsCheckoutEnabled.value).toBe(true);
   });
 });