@shopbite-de/storefront 1.16.0 → 1.17.0

package/.claude/settings.local.json

@@ -0,0 +1,21 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(grep:*)",
+      "Bash(pnpm add:*)",
+      "Bash(pnpm nuxt:*)",
+      "Bash(ls /home/lirim/workspace/shopbite/storefront/.nuxt/eslint* 2>&1)",
+      "Bash(pnpm typecheck:*)",
+      "Bash(git stash:*)",
+      "Bash(ls node_modules/.bin/vue-tsc 2>&1 && node_modules/.bin/vue-tsc --version 2>&1)",
+      "Bash(cat /home/lirim/workspace/shopbite/storefront/node_modules/.pnpm/nuxt@4.2.2_*/node_modules/nuxt/package.json 2>/dev/null | python3 -c \"import json,sys; p=json.load\\(sys.stdin\\); deps={**p.get\\('dependencies',{}\\),**p.get\\('devDependencies',{}\\),**p.get\\('peerDependencies',{}\\)}; print\\({k:v for k,v in deps.items\\(\\) if 'tsc' in k or 'volar' in k or 'vue-tsc' in k}\\)\" 2>/dev/null | head -5)",
+      "Bash(find /home/lirim/workspace/shopbite/storefront/node_modules/.pnpm -path \"*/nuxt@4.2.2*/nuxt/package.json\" 2>/dev/null | head -2 | xargs -I{} python3 -c \"import json,sys; p=json.load\\(open\\('{}',\\)\\); all_deps={**p.get\\('dependencies',{}\\),**p.get\\('devDependencies',{}\\),**p.get\\('optionalDependencies',{}\\)}; [print\\(k,v\\) for k,v in all_deps.items\\(\\) if any\\(x in k for x in ['tsc','volar','typescript']\\)]\" 2>/dev/null)",
+      "Bash(pnpm run:*)",
+      "Bash(git log:*)",
+      "Bash(pnpm test:unit 2>&1 | tail -80)",
+      "Bash(pnpm test:unit 2>&1 | grep -E \"\\(FAIL|PASS|TypeError|ContextError|error\\)\" | head -30)",
+      "Bash(pnpm test:unit 2>&1 | tail -30)"
+    ]
+  }
+}

package/.env.example

@@ -7,10 +7,6 @@ NUXT_PUBLIC_SHOPWARE_ENDPOINT="https://shopware.shopbite.de/store-api"
 NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN="TOKEN"
 NUXT_PUBLIC_SHOPWARE_COUNTRY_ID=019a17a0f67b706a8ec9ead3059e12ba
 
-NUXT_SHOPWARE_ADMIN_ENDPOINT=https://your-shopware-instance.com
-NUXT_SHOPWARE_ADMIN_CLIENT_ID=your_client_id
-NUXT_SHOPWARE_ADMIN_CLIENT_SECRET=your_client_secret
-
 NUXT_PUBLIC_SHOP_BITE_FEATURE_MULTI_CHANNEL=false
 NUXT_PUBLIC_SHOP_BITE_FEATURE_SECURE_KEY=
 

package/.github/workflows/build.yaml

@@ -14,8 +14,11 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v4
+
       - name: Log in to the Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -23,7 +26,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for app image
         id: meta-app
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: ghcr.io/${{ github.repository }}-app
           tags: |
@@ -35,7 +38,7 @@ jobs:
             type=raw,value=latest,enable=${{ github.event_name == 'release' }}
 
       - name: Build and push Docker app image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: ./node.dockerfile
@@ -46,6 +49,8 @@ jobs:
           push: true
           tags: ${{ steps.meta-app.outputs.tags }}
           labels: ${{ steps.meta-app.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
   release-npm:
     runs-on: ubuntu-latest
@@ -57,17 +62,18 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.32.1
+
       - name: Install Node.js
         uses: actions/setup-node@v6
         with:
           node-version: '24'
+          cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.30.1
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

package/.github/workflows/ci.yaml

@@ -4,56 +4,39 @@ on:
     branches: ["main", "dev"]
   pull_request:
     types: [opened, synchronize]
+
+env:
+  NUXT_PUBLIC_APP_ENV: 'test'
+  NUXT_PUBLIC_STORE_URL: 'http://localhost:3005'
+  NUXT_PUBLIC_SHOPWARE_DEV_STORE_FRONT_URL: 'http://localhost:3005'
+  PORT: '3005'
+  NUXT_PUBLIC_SHOPWARE_ENDPOINT: ${{ secrets.NUXT_PUBLIC_SHOPWARE_ENDPOINT }}
+  NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN: ${{ secrets.NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN }}
+  NUXT_PUBLIC_SITE_COUNTRY_ID: ${{ secrets.NUXT_PUBLIC_SITE_COUNTRY_ID }}
+  GEOPIFY: ${{ secrets.GEOPIFY }}
+
 jobs:
-  test:
-    name: Run unit and e2e tests
-    environment: test
-    env:
-      NUXT_PUBLIC_APP_ENV: 'test'
-      NUXT_PUBLIC_STORE_URL: 'http://localhost:3005'
-      NUXT_PUBLIC_SHOPWARE_DEV_STORE_FRONT_URL: 'http://localhost:3005'
-      PORT: '3005'
-      NUXT_PUBLIC_SHOPWARE_ENDPOINT: ${{ secrets.NUXT_PUBLIC_SHOPWARE_ENDPOINT }}
-      NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN: ${{ secrets.NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN }}
-      NUXT_PUBLIC_SITE_COUNTRY_ID: ${{ secrets.NUXT_PUBLIC_SITE_COUNTRY_ID }}
-      GEOPIFY: ${{ secrets.GEOPIFY }}
-      TEST_USER: ${{ secrets.TEST_USER }}
-      TEST_USER_PASS: ${{ secrets.TEST_USER_PASS }}
+  setup:
+    name: Install & Build
     if: github.event.pull_request.draft == false
-    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
-      - name: Check out code
-        uses: actions/checkout@v6
+      - uses: actions/checkout@v6
 
-      - name: Fetch main
-        run: git fetch origin main
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.32.1
 
-      - name: Install Node.js
-        uses: actions/setup-node@v6
+      - uses: actions/setup-node@v6
         with:
           node-version: '24'
-
-      - name: Enable corepack and pnpm
-        run: |
-          corepack enable
-          corepack prepare pnpm@10.26.2 --activate
+          cache: 'pnpm'
 
       - name: Install build dependencies
         run: |
           sudo apt-get update
           sudo apt-get install -y build-essential python3
 
-      - name: Cache pnpm dependencies
-        uses: actions/cache@v5
-        with:
-          path: |
-            /home/runner/.local/share/pnpm/store/v3
-            ./node_modules
-          key: ${{ runner.os }}-pnpm-${{ inputs.workdir }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile --prefer-offline
 
@@ -65,24 +48,124 @@ jobs:
           NODE_OPTIONS: "--max_old_space_size=4096"
         run: pnpm run build
 
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps chromium
+      - name: Save workspace to cache
+        uses: actions/cache/save@v5
+        with:
+          path: |
+            ~/.local/share/pnpm/store
+            node_modules
+            .nuxt
+            .output
+          key: workspace-${{ runner.os }}-${{ github.sha }}
+
+  lint:
+    name: Lint & format
+    environment: test
+    needs: [setup]
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.32.1
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+
+      - name: Restore workspace from cache
+        uses: actions/cache/restore@v5
+        with:
+          path: |
+            ~/.local/share/pnpm/store
+            node_modules
+            .nuxt
+            .output
+          key: workspace-${{ runner.os }}-${{ github.sha }}
+
+      - name: Prettier
+        run: pnpm prettier
+
+      - name: ESLint
+        run: pnpm eslint
+
+  unit-test:
+    name: Unit tests
+    environment: test
+    needs: [setup]
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.32.1
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+
+      - name: Restore workspace from cache
+        uses: actions/cache/restore@v5
+        with:
+          path: |
+            ~/.local/share/pnpm/store
+            node_modules
+            .nuxt
+            .output
+          key: workspace-${{ runner.os }}-${{ github.sha }}
 
       - name: Unit tests
         run: pnpm test:unit
 
+  e2e-test:
+    name: E2E tests
+    environment: test
+    needs: [setup]
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.32.1
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+
+      - name: Restore workspace from cache
+        uses: actions/cache/restore@v5
+        with:
+          path: |
+            ~/.local/share/pnpm/store
+            node_modules
+            .nuxt
+            .output
+          key: workspace-${{ runner.os }}-${{ github.sha }}
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
       - name: E2E tests
         env:
           TEST_USER: ${{ secrets.TEST_USER }}
           TEST_USER_PASS: ${{ secrets.TEST_USER_PASS }}
-
         run: pnpm test:e2e
 
-      - uses: actions/upload-artifact@v6
+      - uses: actions/upload-artifact@v7
         if: ${{ !cancelled() }}
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
-
-

package/.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="3.23.0"
+setups.@nuxt/test-utils="4.0.0"

package/CLAUDE.md

@@ -0,0 +1,106 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+# Development
+pnpm dev              # Start dev server
+pnpm build            # Production build
+pnpm generate         # Static generation
+pnpm preview          # Preview production build
+
+# Type checking
+pnpm typecheck        # nuxt typecheck (uses project-local vue-tsc, not npx)
+
+# Linting & formatting
+pnpm lint:fix         # Run prettier:fix + eslint:fix
+pnpm eslint           # Check ESLint
+pnpm prettier         # Check Prettier
+
+# Testing
+pnpm test:unit        # Vitest (unit + nuxt environments, with coverage)
+pnpm test:e2E         # Playwright e2e (Chromium, requires .env.test)
+
+# Shopware API types
+pnpm generate-types   # Regenerate api-types/storeApiTypes.d.ts from schema
+pnpm load-schema      # Reload Shopware API schema
+```
+
+### Running a single test
+
+```bash
+# Vitest – filter by test name or file path
+pnpm vitest run test/nuxt/useBusinessHours.test.ts
+pnpm vitest run --reporter=verbose -t "should return true"
+
+# Playwright – filter by file
+pnpm playwright test test/e2e/checkout.spec.ts
+```
+
+### Typecheck note
+
+Always run `nuxt typecheck` via the `pnpm typecheck` script, not via `npx vue-tsc`. The global npx-cached `vue-tsc` version may not be compatible with the project's installed `vue-router`. If `.nuxt/tsconfig.json` has stale pnpm paths after a dependency update, run `pnpm nuxt prepare` to regenerate it.
+
+## Architecture
+
+### Stack
+
+- **Nuxt 4** with `app/` directory convention (not `src/`)
+- **Shopware 6** headless commerce backend via `@shopware/nuxt-module`, `@shopware/composables` (extended as a Nuxt layer), and `@shopware/api-client`
+- **Tailwind CSS v4** + **Nuxt UI** component library
+- **Zod** for form validation schemas (`app/validation/`)
+- **PWA** via `@vite-pwa/nuxt` (strategy configurable via `SW` env var)
+- German-language URL routes (`/konto/`, `/warenkorb/`, etc.)
+
+### Shopware type system
+
+Custom Shopware Store API types are auto-generated into `api-types/storeApiTypes.d.ts`. The module augmentation in `shopware.d.ts` wires them into the `#shopware` virtual module:
+
+```ts
+declare module "#shopware" {
+  export type operations = import("./api-types/storeApiTypes").operations;
+  export type Schemas =
+    import("./api-types/storeApiTypes").components["schemas"];
+}
+```
+
+Custom ShopBite plugin endpoints are prefixed `shopbite.*` in the operations type (e.g. `shopbite.business-hour.get`, `shopbite.config.get`). Run `pnpm generate-types` after Shopware plugin changes.
+
+### Composables layer
+
+`@shopware/composables` is consumed as a **Nuxt layer** (via `extends` in `nuxt.config.ts`). This means its composables, components, and pages are auto-imported alongside the project's own `app/composables/`. Project-level composables override the layer.
+
+Key custom composables:
+
+- **`useBusinessHours`** – opening hours with multi-interval support; Sunday is day 7 (not 0)
+- **`useDeliveryTime`** – validates slots in 5-minute increments, accounts for `deliveryMinutes` (default 30), handles holidays
+- **`useAddToCart`** – products with extras/toppings use UUID v5 (product ID + sorted extras) as container item reference; simple products bypass the container
+- **`useAddressAutocomplete`** – proxies Geoapify through `/api/address/autocomplete` to avoid exposing the API key client-side
+- **`useShopBiteConfig`** – fetches delivery config and checkout state from the custom Shopware plugin
+
+### Server routes
+
+`server/api/address/autocomplete.get.ts` — Geoapify proxy (keeps API key server-side).
+`server/utils/shopware/adminApiClient.ts` — Admin API client for server-side Shopware operations requiring elevated credentials.
+
+### Testing setup
+
+Two Vitest projects in `vitest.config.ts`:
+
+- **`unit`** – `test/unit/`, Node environment, pure function tests
+- **`nuxt`** – `test/nuxt/`, Nuxt environment via `@nuxt/test-utils`, for composables and components
+
+E2E tests in `test/e2e/` use Playwright (Chromium only) and require `TEST_USER` / `TEST_USER_PASS` env vars. A local dev server must be running before the suite executes.
+
+### Route rendering strategy
+
+Most pages are SSR. Exceptions defined in `nuxt.config.ts` route rules:
+
+- `/wishlist` – client-side rendered (wishlist fetching deferred to client)
+- `/registrierung/bestaetigen/**` – client-side rendered
+
+### CI
+
+`.github/workflows/ci.yaml` runs four jobs in sequence: **setup** (install + build, cached) → **lint** → **unit tests** → **e2e tests**. The `build.yaml` workflow handles Docker image builds and NPM publishing on releases.

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/Address/Form.vue

@@ -34,10 +34,13 @@ const toast = useToast();
 async function onSubmit(event: FormSubmitEvent<AddressSchema>) {
   try {
     let response: undefined | Schemas["CustomerAddress"] = undefined;
+    const addressData = event.data as unknown as Parameters<
+      typeof updateCustomerAddress
+    >[0];
     if (event.data.id) {
-      response = await updateCustomerAddress(event.data);
+      response = await updateCustomerAddress(addressData);
     } else {
-      response = await createCustomerAddress(event.data);
+      response = await createCustomerAddress(addressData);
     }
 
     toast.add({

package/app/components/Category/Listing.vue

@@ -64,10 +64,11 @@ useCategorySeo(category);
 
 const currentSorting = ref(getCurrentSortingOrder.value ?? "Sortieren");
 
-const propertyFilters = computed<Schemas["PropertyGroup"][]>(() =>
-  getAvailableFilters.value?.filter(
-    (availableFilter) => availableFilter.code === "properties",
-  ),
+const propertyFilters = computed<Schemas["PropertyGroup"][]>(
+  () =>
+    (getAvailableFilters.value?.filter(
+      (availableFilter) => availableFilter.code === "properties",
+    ) ?? []) as unknown as Schemas["PropertyGroup"][],
 );
 
 const selectedPropertyFilters = ref(getCurrentFilters.value?.properties ?? []);

package/app/components/Checkout/DeliveryTimeSelect.vue

@@ -79,7 +79,9 @@ watch(
 
 function roundToNext5MinInterval(timeString: string | null): string {
   if (!timeString) return "";
-  const [hours, minutes] = timeString.split(":").map(Number);
+  const parts = timeString.split(":").map(Number);
+  const hours = parts[0] ?? 0;
+  const minutes = parts[1] ?? 0;
   const totalMinutes = hours * 60 + minutes;
   const roundedMinutes = Math.ceil(totalMinutes / 5) * 5;
   const newHours = Math.floor(roundedMinutes / 60) % 24;
@@ -145,7 +147,7 @@ function handleTimeInput(event: Event): void {
           step="300"
           class="border rounded px-2 py-1"
           @input="handleTimeInput"
-        >
+        />
       </client-only>
     </div>
     <p v-if="validationError" class="text-sm text-red-600">

package/app/components/Contact/Form.vue

@@ -69,9 +69,10 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       },
     );
 
+    const resultData = result?.data as Record<string, unknown> | undefined;
     const msg =
-      typeof result?.data?.individualSuccessMessage === "string"
-        ? result.data.individualSuccessMessage.trim()
+      typeof resultData?.individualSuccessMessage === "string"
+        ? (resultData.individualSuccessMessage as string).trim()
         : "";
     successMessage.value =
       msg && msg.length > 0

package/app/components/Hero.vue

@@ -46,7 +46,7 @@ onMounted(() => {
       fetchpriority="high"
       class="absolute inset-0 w-full h-full object-cover -z-10"
     >
-      <source :src="backgroundVideo" type="video/mp4" >
+      <source :src="backgroundVideo" type="video/mp4" />
     </video>
     <div class="bg-black/50 backdrop-blur-sm">
       <UPageHero

package/app/components/ImageGallery.vue

@@ -37,7 +37,7 @@ defineProps<{
           :alt="item.alt"
           :fetchpriority="index === 0 ? 'high' : 'auto'"
           class="rounded-lg"
-        >
+        />
       </UCarousel>
     </template>
   </UPageSection>

package/app/components/Navigation/DesktopLeft.vue

@@ -15,7 +15,8 @@ const mapCategoryToNavItem = (
     description: `${label} Kategorie`,
     to: category.seoUrl,
     defaultOpen: true,
-    icon: category.customFields?.shopbite_category_icon,
+    icon: (category.customFields as Record<string, unknown> | undefined)
+      ?.shopbite_category_icon as string | undefined,
     children: (category.children ?? []).map(mapCategoryToNavItem),
   };
 };

package/app/components/Order/Detail.vue

@@ -52,7 +52,7 @@ onMounted(() => {
 });
 
 const columnRows = computed(() => {
-  return order.value?.lineItems.filter(
+  return order.value?.lineItems?.filter(
     (lineItem: Schemas["OrderLineItem"]) => lineItem.parentId === null,
   );
 });
@@ -65,7 +65,7 @@ const columnRows = computed(() => {
         >Status: {{ status }}</UBadge
       >
       <UBadge variant="outline" color="neutral" size="xl"
-        >Versandart: {{ order?.deliveries[0].shippingMethod.name }}</UBadge
+        >Versandart: {{ order?.deliveries?.[0]?.shippingMethod?.name }}</UBadge
       >
     </div>
     <UTable