@shopbite-de/storefront 1.19.0 → 1.21.0

package/app/components/Cart/QuickView.vue

@@ -34,8 +34,15 @@ const emit = defineEmits(["go-to-cart"]);
     </div>
     <div class="flex flex-col gap-4">
       <div class="flex flex-row justify-between">
-        <div>Versandkosten:</div>
-        <div>{{ getFormattedPrice(shippingTotal) }}</div>
+        <template v-if="shippingTotal === 0">
+          <div class="text-success font-medium">
+            Versandkostenfreie Lieferung
+          </div>
+        </template>
+        <template v-else>
+          <div>Versandkosten:</div>
+          <div>{{ getFormattedPrice(shippingTotal) }}</div>
+        </template>
       </div>
       <div class="flex flex-row justify-between font-bold">
         <div>Summe:</div>

package/app/components/Checkout/Summary.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import QuickView from "~/components/Cart/QuickView.vue";
 import { useIntervalFn } from "@vueuse/core";
+import { useOrderPayment } from "@shopware/composables";
 
 const { createOrder, selectedPaymentMethod, selectedShippingMethod } =
   useCheckout();
@@ -9,6 +10,10 @@ const { isLoggedIn, isGuestSession, refreshUser } = useUser();
 const { isCheckoutEnabled, refresh } = useShopBiteConfig();
 const { trackOrder } = useTrackEvent();
 
+const {
+  public: { storeUrl },
+} = useRuntimeConfig();
+
 const toast = useToast();
 
 onMounted(() => {
@@ -25,21 +30,42 @@ onMounted(() => {
 
 useIntervalFn(refresh, 10000);
 
-async function handleCreateOrder() {
-  const order = await createOrder({
-    customerComment: "Wunschlieferzeit: " + selectedDeliveryTime.value,
-  });
-
-  trackOrder(order);
+const createdOrder = ref<Awaited<ReturnType<typeof createOrder>> | null>(null);
+const { handlePayment, paymentUrl } = useOrderPayment(
+  computed(() => createdOrder.value),
+);
 
-  await refreshCart();
-  toast.add({
-    title: "Bestellung aufgegeben!",
-    icon: "i-lucide-shopping-cart",
-    color: "success",
-    progress: false,
-  });
-  navigateTo("/order/" + order.id);
+async function handleCreateOrder() {
+  isPlacingOrder.value = true;
+  try {
+    const order = await createOrder({
+      customerComment: "Wunschlieferzeit: " + selectedDeliveryTime.value,
+    });
+
+    trackOrder(order);
+    createdOrder.value = order;
+
+    await handlePayment(
+      `${storeUrl}/bestellung/${order.id}/erfolg`,
+      `${storeUrl}/bestellung/${order.id}/fehler`,
+    );
+
+    if (paymentUrl.value) {
+      await navigateTo(paymentUrl.value, { external: true });
+      return;
+    }
+
+    await refreshCart();
+    toast.add({
+      title: "Bestellung aufgegeben!",
+      icon: "i-lucide-shopping-cart",
+      color: "success",
+      progress: false,
+    });
+    navigateTo(`/bestellung/${order.id}/erfolg`);
+  } finally {
+    isPlacingOrder.value = false;
+  }
 }
 
 const customerDataAvailable = computed<boolean>(
@@ -58,6 +84,7 @@ const isValidToProceed = computed(
     shippingAndPaymentSet.value,
 );
 
+const isPlacingOrder = ref(false);
 const selectedDeliveryTime = ref("");
 const isValidTime = ref(true);
 
@@ -106,7 +133,8 @@ const checkoutButtonLabel = computed<string>(() => {
       <CheckoutVoucherInput />
       <UButton
         :icon="isValidToProceed ? 'i-lucide-shopping-cart' : 'i-lucide-lock'"
-        :disabled="!isValidToProceed"
+        :disabled="!isValidToProceed || isPlacingOrder"
+        :loading="isPlacingOrder"
         :label="checkoutButtonLabel"
         size="xl"
         block

package/app/components/Order/Detail.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import type { TableColumn } from "#ui/components/Table.vue";
 
 const props = defineProps<{
   order: Schemas["Order"];
@@ -14,89 +13,118 @@ const { getFormattedPrice } = usePrice({
   localeCode: "de-DE",
 });
 
-const isLoadingData = ref(true);
+const lineItems = computed(() =>
+  order.value?.lineItems?.filter(
+    (item: Schemas["OrderLineItem"]) => item.parentId === null,
+  ),
+);
 
-const columns: TableColumn<Schemas["OrderLineItem"]>[] = [
-  {
-    accessorKey: "payload.productNumber",
-    header: "#",
-  },
-  {
-    accessorKey: "label",
-    header: "Name",
-  },
-  {
-    accessorKey: "unitPrice",
-    header: "Preis",
-    cell: ({ row }) => {
-      return getFormattedPrice(row.getValue("unitPrice"));
-    },
-  },
-  {
-    accessorKey: "quantity",
-    header: "Anzahl",
-  },
-  {
-    accessorKey: "totalPrice",
-    header: () => h("div", { class: "text-right" }, "Gesamt"),
-    cell: ({ row }) => {
-      const formatted = getFormattedPrice(row.getValue("totalPrice"));
+const paymentState = computed(
+  () => order.value?.transactions?.at(-1)?.stateMachineState,
+);
 
-      return h("div", { class: "text-right" }, formatted);
-    },
-  },
-];
+type BadgeColor =
+  | "success"
+  | "error"
+  | "warning"
+  | "info"
+  | "neutral"
+  | "primary";
 
-onMounted(() => {
-  isLoadingData.value = false;
-});
-
-const columnRows = computed(() => {
-  return order.value?.lineItems?.filter(
-    (lineItem: Schemas["OrderLineItem"]) => lineItem.parentId === null,
-  );
+const paymentStateColor = computed((): BadgeColor => {
+  switch (paymentState.value?.technicalName) {
+    case "paid":
+    case "authorized":
+      return "success";
+    case "failed":
+    case "cancelled":
+    case "chargeback":
+      return "error";
+    case "open":
+    case "reminded":
+    case "unconfirmed":
+      return "warning";
+    case "in_progress":
+      return "info";
+    default:
+      return "neutral";
+  }
 });
 </script>
 
 <template>
-  <div>
-    <div class="flex flex-row justify-between">
-      <UBadge variant="outline" color="neutral" size="xl"
-        >Status: {{ status }}</UBadge
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-wrap gap-2">
+      <UBadge variant="subtle" color="neutral" icon="i-lucide-package">
+        {{ status }}
+      </UBadge>
+      <UBadge
+        v-if="order?.deliveries?.[0]?.shippingMethod?.name"
+        variant="subtle"
+        color="neutral"
+        icon="i-lucide-truck"
       >
-      <UBadge variant="outline" color="neutral" size="xl"
-        >Versandart: {{ order?.deliveries?.[0]?.shippingMethod?.name }}</UBadge
+        {{ order.deliveries[0].shippingMethod.name }}
+      </UBadge>
+      <UBadge
+        v-if="paymentState"
+        variant="subtle"
+        :color="paymentStateColor"
+        icon="i-lucide-credit-card"
       >
+        {{ paymentState.translated?.name ?? paymentState.name }}
+      </UBadge>
     </div>
-    <UTable
-      :columns="columns"
-      :loading="isLoadingData"
-      loading-color="primary"
-      loading-animation="carousel"
-      :data="columnRows"
-      class="flex-1"
-    />
-    <div class="flex flex-col items-end w-full pr-4">
-      <div>Lieferkosten: {{ getFormattedPrice(order?.shippingTotal) }}</div>
-      <div>Gesamtkosten Netto: {{ getFormattedPrice(order?.amountNet) }}</div>
-      <div v-for="tax in order?.price.calculatedTaxes" :key="tax.taxRate">
-        inkl. {{ tax.taxRate }}% MwSt. {{ getFormattedPrice(tax.tax) }}
+
+    <ul class="flex flex-col divide-y divide-default">
+      <li
+        v-for="item in lineItems"
+        :key="item.id"
+        class="flex items-start gap-4 py-4 first:pt-0 last:pb-0"
+      >
+        <div
+          class="size-10 rounded-md bg-elevated flex items-center justify-center shrink-0 text-sm font-semibold text-muted"
+        >
+          {{ item.quantity }}×
+        </div>
+        <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+          <p class="font-medium truncate">{{ item.label }}</p>
+          <p
+            v-if="item.payload?.productNumber"
+            class="text-xs text-muted truncate"
+          >
+            #{{ item.payload.productNumber }}
+          </p>
+        </div>
+        <p class="font-semibold shrink-0">
+          {{ getFormattedPrice(item.totalPrice) }}
+        </p>
+      </li>
+    </ul>
+
+    <USeparator />
+
+    <div class="flex flex-col gap-2 text-sm">
+      <div class="flex justify-between text-muted">
+        <span>Lieferkosten</span>
+        <span>{{ getFormattedPrice(order?.shippingTotal) }}</span>
       </div>
-      <div class="font-bold">
-        Gesamtkosten Brutto: {{ getFormattedPrice(order?.amountTotal) }}
+      <div class="flex justify-between text-muted">
+        <span>Netto</span>
+        <span>{{ getFormattedPrice(order?.amountNet) }}</span>
       </div>
-    </div>
-    <div class="p-2 text-balance mt-4">
-      <div class="text-sm text-muted">
-        Bei Fragen oder Problemen wenden Sie sich bitte telefonisch an uns.
+      <div
+        v-for="tax in order?.price?.calculatedTaxes"
+        :key="tax.taxRate"
+        class="flex justify-between text-muted"
+      >
+        <span>MwSt. {{ tax.taxRate }}%</span>
+        <span>{{ getFormattedPrice(tax.tax) }}</span>
+      </div>
+      <div class="flex justify-between font-semibold text-base pt-1">
+        <span>Gesamt</span>
+        <span>{{ getFormattedPrice(order?.amountTotal) }}</span>
       </div>
-      <UButton
-        label="Anrufen"
-        variant="outline"
-        color="primary"
-        to="tel:+4917623456789"
-        icon="i-heroicons-phone"
-      />
     </div>
   </div>
 </template>

package/app/components/Product/Configurator.vue

@@ -14,17 +14,12 @@ const { variants: selectableOptions } = useProductVariantsZwei(configurator);
 
 const selectedOptions = ref<Record<string, string>>({});
 
-function initialOptions(variant: Ref<Schemas["Product"]>) {
-  const options = variant.value.options as Schemas["PropertyGroupOption"][];
-  for (const option of options) {
-    if (option.group && option.id) {
-      selectedOptions.value[option.group.id] = option.id;
-    }
+const options = product.value.options as Schemas["PropertyGroupOption"][];
+for (const option of options ?? []) {
+  if (option.group && option.id) {
+    selectedOptions.value[option.group.id] = option.id;
   }
 }
-onMounted(() => {
-  initialOptions(product);
-});
 
 watch(
   selectedOptions.value,

package/app/components/Product/CrossSelling.vue

@@ -1,69 +1,26 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import type {
-  AssociationItemProduct,
-  AssociationItem,
-} from "~/types/Association";
-import { useShopwareContext } from "#imports";
+import type { AssociationItemProduct } from "~/types/Association";
 
-const DEFAULT_CURRENCY = "EUR";
-const DEFAULT_LOCALE = "de-DE";
 const LOADING_ICON = "i-lucide-loader";
-const DEFAULT_ICON = "i-lucide-plus";
 
 const props = defineProps<{
   product: Schemas["Product"];
 }>();
 
-const product = computed(() => props.product);
-const selectedExtras = ref<AssociationItemProduct[]>([]);
-
-const { getFormattedPrice } = usePrice({
-  currencyCode: DEFAULT_CURRENCY,
-  localeCode: DEFAULT_LOCALE,
-});
-
-function mapAssociationToItems(
-  associations: Schemas["CrossSellingElement"][],
-): AssociationItem[] {
-  return associations.map((crossSellingElement) => ({
-    label: crossSellingElement.crossSelling.name,
-    products: crossSellingElement.products.map(
-      (product: Schemas["Product"]) => ({
-        label: product.name,
-        value: product.id,
-        price: getFormattedPrice(product.calculatedPrice.unitPrice),
-        icon: DEFAULT_ICON,
-      }),
-    ),
-  }));
-}
-
-const { apiClient } = useShopwareContext();
-
-const { data: productAssociations, pending: isAssociationsLoading } =
-  useAsyncData(`cross-selling-${product.value.id}`, async () => {
-    const response = await apiClient.invoke(
-      "readProductCrossSellings post /product/{productId}/cross-selling",
-      {
-        pathParams: { productId: product.value.id },
-      },
-    );
+const emit = defineEmits<{
+  "extras-selected": [selectedExtras: AssociationItemProduct[]];
+}>();
 
-    return response.data;
-  });
+const selectedExtras = ref<AssociationItemProduct[]>([]);
 
-const associationItems = computed(() =>
-  mapAssociationToItems(productAssociations.value ?? []),
+const { associationItems, isAssociationsLoading } = useProductCrossSelling(
+  () => props.product.id,
 );
 
 watch(selectedExtras, () => emit("extras-selected", selectedExtras.value), {
   deep: true,
 });
-
-const emit = defineEmits<{
-  "extras-selected": [selectedExtras: AssociationItemProduct[]];
-}>();
 </script>
 
 <template>

package/app/components/Product/Detail.vue

@@ -1,142 +1,30 @@
 <script setup lang="ts">
-import type { operations, Schemas } from "#shopware";
-import type { AssociationItemProduct } from "~/types/Association";
-import { useTrackEvent } from "~/composables/useTrackEvent";
+import type { Schemas } from "#shopware";
 
 const props = defineProps<{
   productId: string;
 }>();
 
-const { apiClient } = useShopwareContext();
-const { trackProductView } = useTrackEvent();
-
-const productId = toRef(props.productId);
-
-const searchCriteria = {
-  includes: {
-    product: [
-      "id",
-      "productNumber",
-      "name",
-      "description",
-      "calculatedPrice",
-      "translated",
-      "properties",
-      "propertyIds",
-      "options",
-      "optionIds",
-      "seoCategory",
-      "configuratorSettings",
-      "children",
-      "parentId",
-      "sortedProperties",
-      "cover",
-    ],
-    property: ["id", "name", "translated", "options"],
-    property_group_option: ["id", "name", "translated", "group"],
-    product_configurator_setting: ["id", "optionId", "option", "productId"],
-    product_option: ["id", "groupId", "name", "translated", "group"],
-    category: ["id", "name", "translated"],
-  },
-  associations: {
-    cover: {
-      associations: {
-        media: {},
-      },
-    },
-    properties: {
-      associations: {
-        group: {},
-      },
-    },
-    options: {
-      associations: {
-        group: {},
-      },
-    },
-    configuratorSettings: {
-      associations: {
-        option: {
-          associations: {
-            group: {},
-          },
-        },
-      },
-    },
-    children: {
-      associations: {
-        properties: {
-          associations: {
-            group: {},
-          },
-        },
-        options: {
-          associations: {
-            group: {},
-          },
-        },
-      },
-    },
-  },
-} as operations["searchPage post /search"]["body"];
-
-const { data: productDetails, pending } = useAsyncData(
-  () => `product-${productId.value ?? "none"}`,
-  async () => {
-    if (!productId.value) return null;
-    const response = await apiClient.invoke(
-      "readProductDetail post /product/{productId}",
-      {
-        pathParams: { productId: productId.value },
-        body: searchCriteria,
-      },
-    );
-    return response.data;
-  },
-);
+const emit = defineEmits(["product-added", "variant-selected"]);
 
 const {
+  productDetails,
+  pending,
   selectedProduct,
   selectedQuantity,
   isLoading,
   addToCart,
   setSelectedProduct,
-  setSelectedExtras,
-  setDeselectedIngredients,
-} = useAddToCart();
-
-// Initialize when productDetails is loaded
-watch(
-  () => productDetails.value?.product,
-  (product) => {
-    if (product) {
-      setSelectedProduct(product);
-    }
-  },
-  { immediate: true },
-);
+  onExtrasSelected,
+  onIngredientsDeselected,
+} = useProductDetail(() => props.productId);
 
 const onVariantSwitched = (variant: Schemas["Product"]) => {
   setSelectedProduct(variant);
   emit("variant-selected", variant);
 };
 
-const onExtrasSelected = (extras: AssociationItemProduct[]) => {
-  setSelectedExtras(extras);
-};
-
-const onIngredientsDeselected = (deselected: string[]) => {
-  setDeselectedIngredients(deselected);
-};
-
 const onAddToCart = () => emit("product-added");
-
-const emit = defineEmits(["product-added", "variant-selected"]);
-
-watch(productDetails, () => {
-  if (!productDetails.value) return;
-  trackProductView(productDetails.value.product);
-});
 </script>
 
 <template>

package/app/composables/useAddToCart.ts

@@ -128,6 +128,12 @@ export function useAddToCart() {
       color: "primary",
       progress: true,
       duration: 2000,
+      actions: [
+        {
+          label: "Zum Warenkorb",
+          to: "/bestellung/warenkorb",
+        },
+      ],
     });
   }
 

package/app/composables/useProductConfigurator.ts

@@ -1,15 +1,12 @@
 import { computed, ref } from "vue";
 import type { Schemas } from "#shopware";
 import {
-  useShopwareContext,
   useProductConfigurator as useProductConfiguratorOriginal,
   useProduct,
 } from "@shopware/composables";
 import { getTranslatedProperty } from "@shopware/helpers";
 
 export function useProductConfigurator() {
-  const { apiClient } = useShopwareContext();
-
   const original = useProductConfiguratorOriginal();
 
   const { configurator, product } = useProduct();
@@ -18,7 +15,9 @@ export function useProductConfigurator() {
     [key: string]: string;
   }>({});
   const isLoadingOptions = ref(!!product.value.options?.length);
-  const parentProductId = computed(() => product.value?.parentId);
+  const parentProductId = computed(
+    () => product.value?.parentId ?? product.value?.id,
+  );
   const getOptionGroups = computed<Schemas["PropertyGroup"][]>(() => {
     return configurator.value || [];
   });
@@ -45,57 +44,18 @@ export function useProductConfigurator() {
   async function findVariantForSelectedOptions(options?: {
     [code: string]: string;
   }): Promise<Schemas["Product"] | undefined> {
-    const filter: Schemas["Filters"] = [
-      {
-        type: "equals",
-        field: "parentId",
-        value: parentProductId.value as string,
-      },
-      ...Object.values(options || selected.value).map(
-        (id) =>
-          ({
-            type: "equals",
-            field: "optionIds",
-            value: id,
-          }) as Schemas["EqualsFilter"],
-      ),
-    ];
+    if (!parentProductId.value) return undefined;
     try {
-      const response = await apiClient.invoke("readProduct post /product", {
-        body: {
-          filter,
-          limit: 1,
-          includes: {
-            product: [
-              "id",
-              "name",
-              "description",
-              "translated",
-              "productNumber",
-              "options",
-              "properties",
-              "calculatedPrice",
-              "translated",
-            ],
-            product_option: ["id", "groupId", "name", "translated", "group"],
-            property: ["id", "name", "translated", "options"],
-            property_group_option: ["id", "name", "translated", "group"],
-          },
-          associations: {
-            options: {
-              associations: {
-                group: {},
-              },
-            },
-            properties: {
-              associations: {
-                group: {},
-              },
-            },
+      const result = await $fetch<Schemas["Product"] | null>(
+        "/api/product/variant",
+        {
+          query: {
+            parentId: parentProductId.value,
+            optionIds: Object.values(options || selected.value),
           },
         },
-      });
-      return response.data.elements?.[0]; // return first matching product
+      );
+      return result ?? undefined;
     } catch (e) {
       console.error("SwProductDetails:findVariantForSelectedOptions", e);
       return undefined;

package/app/composables/useProductCrossSelling.ts

@@ -0,0 +1,45 @@
+import type { Schemas } from "#shopware";
+import type { AssociationItem } from "~/types/Association";
+
+const DEFAULT_CURRENCY = "EUR";
+const DEFAULT_LOCALE = "de-DE";
+const DEFAULT_ICON = "i-lucide-plus";
+
+function mapAssociationToItems(
+  associations: Schemas["CrossSellingElement"][],
+  getFormattedPrice: (price: number) => string,
+): AssociationItem[] {
+  return associations.map((crossSellingElement) => ({
+    label: crossSellingElement.crossSelling.name,
+    products: crossSellingElement.products.map(
+      (product: Schemas["Product"]) => ({
+        label: product.name,
+        value: product.id,
+        price: getFormattedPrice(product.calculatedPrice.unitPrice),
+        icon: DEFAULT_ICON,
+      }),
+    ),
+  }));
+}
+
+export function useProductCrossSelling(getProductId: () => string) {
+  const { getFormattedPrice } = usePrice({
+    currencyCode: DEFAULT_CURRENCY,
+    localeCode: DEFAULT_LOCALE,
+  });
+
+  const { data, pending: isAssociationsLoading } = useFetch<
+    Schemas["CrossSellingElement"][]
+  >(() => `/api/product/${getProductId()}/cross-selling`, {
+    key: () => `cross-selling-${getProductId()}`,
+  });
+
+  const associationItems = computed(() =>
+    mapAssociationToItems(data.value ?? [], getFormattedPrice),
+  );
+
+  return {
+    associationItems,
+    isAssociationsLoading,
+  };
+}

package/app/composables/useProductDetail.ts

@@ -0,0 +1,62 @@
+import type { Schemas } from "#shopware";
+import type { AssociationItemProduct } from "~/types/Association";
+
+export function useProductDetail(getProductId: () => string) {
+  const { trackProductView } = useTrackEvent();
+
+  const { data: productDetails, pending } = useFetch<{
+    product: Schemas["Product"];
+    configurator?: Schemas["PropertyGroup"][];
+  }>(() => `/api/product/${getProductId()}`, {
+    key: () => `product-${getProductId() ?? "none"}`,
+  });
+
+  const {
+    selectedProduct,
+    selectedQuantity,
+    isLoading,
+    addToCart,
+    setSelectedProduct,
+    setSelectedExtras,
+    setDeselectedIngredients,
+  } = useAddToCart();
+
+  watch(
+    () => productDetails.value?.product,
+    (product) => {
+      if (product) {
+        setSelectedProduct(product);
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(
+    productDetails,
+    () => {
+      if (!productDetails.value) return;
+      trackProductView(productDetails.value.product);
+    },
+    { immediate: true },
+  );
+
+  const onExtrasSelected = (extras: AssociationItemProduct[]) => {
+    setSelectedExtras(extras);
+  };
+
+  const onIngredientsDeselected = (deselected: string[]) => {
+    setDeselectedIngredients(deselected);
+  };
+
+  return {
+    productDetails,
+    pending,
+    selectedProduct,
+    selectedQuantity,
+    isLoading,
+    addToCart,
+    setSelectedProduct,
+    onExtrasSelected,
+    onIngredientsDeselected,
+  };
+}

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const {
+  public: { site },
+} = useRuntimeConfig();
+
+useSeoMeta({
+  title: `Zahlung erfolgreich | ${site.name}`,
+  robots: "noindex, nofollow",
+});
+
+const route = useRoute();
+const orderId = route.params.id as string;
+
+const { refreshCart } = useCart();
+
+onMounted(async () => {
+  await refreshCart();
+});
+
+const links = [
+  {
+    label: "Zur Bestellung",
+    to: `/bestellung/${orderId}`,
+    icon: "i-lucide-receipt",
+    size: "xl" as const,
+  },
+];
+</script>
+
+<template>
+  <UPageSection
+    icon="i-lucide-circle-check"
+    title="Bestellung erfolgreich erstellt!"
+    description="Wir bereiten deine Bestellung jetzt vor."
+    :links="links"
+  />
+</template>

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { useOrderPayment, useOrderDetails } from "@shopware/composables";
+import type { Schemas } from "#shopware";
+
+const {
+  public: { site, storeUrl },
+} = useRuntimeConfig();
+
+useSeoMeta({
+  title: `Zahlung fehlgeschlagen | ${site.name}`,
+  robots: "noindex, nofollow",
+});
+
+const route = useRoute();
+const orderId = route.params.id as string;
+
+const { order, loadOrderDetails, status } = useOrderDetails(orderId);
+const { paymentMethods, getPaymentMethods } = useCheckout();
+
+onMounted(async () => {
+  await Promise.all([loadOrderDetails(), getPaymentMethods()]);
+});
+
+const orderRef = computed(() => order.value);
+const { handlePayment, paymentUrl, changePaymentMethod } =
+  useOrderPayment(orderRef);
+
+const currentPaymentMethodId = computed(
+  () => order.value?.transactions?.at(-1)?.paymentMethodId ?? "",
+);
+const selectedPaymentMethodId = ref("");
+
+watch(
+  currentPaymentMethodId,
+  (id) => {
+    if (id && !selectedPaymentMethodId.value) {
+      selectedPaymentMethodId.value = id;
+    }
+  },
+  { immediate: true },
+);
+
+const selectablePaymentMethods = computed(() =>
+  paymentMethods.value?.map((m: Schemas["PaymentMethod"]) => ({
+    label: m.distinguishableName ?? m.name,
+    value: m.id,
+  })),
+);
+
+const isRetrying = ref(false);
+
+async function retryPayment() {
+  isRetrying.value = true;
+  try {
+    if (selectedPaymentMethodId.value !== currentPaymentMethodId.value) {
+      await changePaymentMethod(selectedPaymentMethodId.value);
+    }
+
+    await handlePayment(
+      `${storeUrl}/bestellung/${orderId}/erfolg`,
+      `${storeUrl}/bestellung/${orderId}/fehler`,
+    );
+
+    if (paymentUrl.value) {
+      await navigateTo(paymentUrl.value, { external: true });
+    } else {
+      await navigateTo(`/bestellung/${orderId}/erfolg`);
+    }
+  } finally {
+    isRetrying.value = false;
+  }
+}
+</script>
+
+<template>
+  <UPageSection>
+    <div class="flex flex-col gap-8">
+      <UPageHero
+        icon="i-lucide-circle-x"
+        title="Zahlung fehlgeschlagen"
+        description="Bei der Verarbeitung deiner Zahlung ist ein Fehler aufgetreten. Wähle eine Zahlungsmethode und versuche es erneut."
+      />
+
+      <USeparator />
+
+      <div v-if="order" class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="flex flex-col gap-4">
+          <p class="text-sm font-semibold text-muted uppercase tracking-wide">
+            Bestellung {{ order.orderNumber }}
+          </p>
+          <UCard>
+            <OrderDetail :order="order" :status="status ?? ''" />
+          </UCard>
+        </div>
+
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-3">
+            <p class="text-sm font-semibold text-muted uppercase tracking-wide">
+              Zahlungsmethode
+            </p>
+            <URadioGroup
+              v-model="selectedPaymentMethodId"
+              :items="selectablePaymentMethods"
+              variant="card"
+            />
+          </div>
+
+          <UButton
+            label="Jetzt bezahlen"
+            icon="i-lucide-refresh-cw"
+            size="xl"
+            block
+            :loading="isRetrying"
+            :disabled="!selectedPaymentMethodId"
+            @click="retryPayment"
+          />
+        </div>
+      </div>
+
+      <div v-else class="flex justify-center py-16">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-10 animate-spin text-primary"
+        />
+      </div>
+    </div>
+  </UPageSection>
+</template>

package/app/pages/{order/[id].vue → bestellung/[id]/index.vue}

@@ -55,6 +55,26 @@ const links = ref<ButtonProps[]>([
     />
     <UPageBody>
       <OrderDetail :order="order" :status="status ?? 'laden...'" />
+      <UCard class="mt-6">
+        <div
+          class="flex flex-col sm:flex-row items-start sm:items-center gap-4"
+        >
+          <div class="flex-1">
+            <p class="font-semibold">Stimmt etwas nicht?</p>
+            <p class="text-sm text-muted mt-0.5">
+              Ruf uns sofort an, damit wir deine Bestellung noch rechtzeitig
+              korrigieren können.
+            </p>
+          </div>
+          <UButton
+            label="Jetzt anrufen"
+            color="primary"
+            to="tel:+4917623456789"
+            icon="i-lucide-phone"
+            shrink-0
+          />
+        </div>
+      </UCard>
     </UPageBody>
   </UContainer>
 

package/app/pages/bestellung.vue

@@ -31,14 +31,24 @@ const items = computed(
     ] satisfies StepperItem[],
 );
 
+const route = useRoute();
+const isPaymentReturnRoute = computed(() =>
+  /^\/bestellung\/[0-9a-f]{32}(\/erfolg|\/fehler)?$/.test(route.path),
+);
 watch(step, (newStep) => {
+  if (isPaymentReturnRoute.value) {
+    return;
+  }
   navigateTo(stepRoutes[newStep]);
 });
 </script>
 
 <template>
   <UPageSection>
-    <UStepper ref="stepper" v-model="step" :items="items" size="lg">
+    <template v-if="isPaymentReturnRoute">
+      <NuxtPage />
+    </template>
+    <UStepper v-else ref="stepper" v-model="step" :items="items" size="lg">
       <template #content>
         <NuxtPage />
       </template>

package/nuxt.config.ts

@@ -55,6 +55,13 @@ export default defineNuxtConfig({
     geoapifyApiKey: "",
     public: {
       shopBite: {
+        cacheTtl: {
+          product: 86400,
+          crossSelling: 86400,
+          listing: 86400,
+          variant: 3600,
+          category: 86400,
+        },
         menuCategoryId: "",
         feature: {
           multiChannel: false,
@@ -72,9 +79,6 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    "/": {
-      prerender: true,
-    },
     "/merkliste": {
       ssr: false,
     },
@@ -113,8 +117,6 @@ export default defineNuxtConfig({
     experimental: { sqliteConnector: "native" },
   },
 
-  vitalizer: {},
-
   pwa: {
     strategies: sw ? "injectManifest" : "generateSW",
     srcDir: sw ? "service-worker" : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [

package/server/api/category/[categoryId].get.ts

@@ -1,5 +1,6 @@
 import { encodeForQuery } from "@shopware/api-client/helpers";
-import type { Schemas } from "#shopware";
+import type { components } from "~~/api-types/storeApiTypes";
+type Schemas = components["schemas"];
 
 const criteria = encodeForQuery({
   includes: {
@@ -18,7 +19,7 @@ export default defineCachedEventHandler(
     });
   },
   {
-    maxAge: 86400,
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.category,
     name: "category",
     getKey: (event) => `category-${getRouterParam(event, "categoryId")}`,
   },

package/server/api/listing/[categoryId].get.ts

@@ -87,7 +87,7 @@ export default defineCachedEventHandler(
     });
   },
   {
-    maxAge: 86400,
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.listing,
     name: "listing",
     getKey: (event) => {
       const categoryId = getRouterParam(event, "categoryId") ?? "";

package/server/api/product/[productId]/cross-selling.get.ts

@@ -0,0 +1,31 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { components } from "~~/api-types/storeApiTypes";
+
+type Schemas = components["schemas"];
+
+const criteria = encodeForQuery({
+  includes: {
+    cross_selling_element: ["crossSelling", "products"],
+    cross_selling: ["name"],
+    product: ["id", "name", "calculatedPrice", "translated"],
+    calculated_price: ["unitPrice"],
+  },
+});
+
+export default defineCachedEventHandler(
+  async (event): Promise<Schemas["CrossSellingElement"][]> => {
+    const productId = getRouterParam(event, "productId")!;
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    return await $fetch(`${endpoint}/product/${productId}/cross-selling`, {
+      method: "POST",
+      headers: { "sw-access-key": accessToken },
+      query: { _criteria: criteria },
+    });
+  },
+  {
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.crossSelling,
+    name: "cross-selling",
+    getKey: (event) => `cross-selling-${getRouterParam(event, "productId")}`,
+  },
+);

package/server/api/product/[productId].get.ts

@@ -0,0 +1,68 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { components } from "~~/api-types/storeApiTypes";
+
+type Schemas = components["schemas"];
+
+const criteria = encodeForQuery({
+  includes: {
+    product: [
+      "id",
+      "productNumber",
+      "name",
+      "description",
+      "calculatedPrice",
+      "translated",
+      "properties",
+      "propertyIds",
+      "options",
+      "optionIds",
+      "seoCategory",
+      "configuratorSettings",
+      "children",
+      "parentId",
+      "sortedProperties",
+      "cover",
+    ],
+    property: ["id", "name", "translated", "options"],
+    property_group_option: ["id", "name", "translated", "group"],
+    product_configurator_setting: ["id", "optionId", "option", "productId"],
+    product_option: ["id", "groupId", "name", "translated", "group"],
+    category: ["id", "name", "translated"],
+  },
+  associations: {
+    cover: { associations: { media: {} } },
+    properties: { associations: { group: {} } },
+    options: { associations: { group: {} } },
+    configuratorSettings: {
+      associations: { option: { associations: { group: {} } } },
+    },
+    children: {
+      associations: {
+        properties: { associations: { group: {} } },
+        options: { associations: { group: {} } },
+      },
+    },
+  },
+});
+
+export default defineCachedEventHandler(
+  async (
+    event,
+  ): Promise<{
+    product: Schemas["Product"];
+    configurator?: Schemas["PropertyGroup"][];
+  }> => {
+    const productId = getRouterParam(event, "productId")!;
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    return await $fetch(`${endpoint}/product/${productId}`, {
+      headers: { "sw-access-key": accessToken },
+      query: { _criteria: criteria },
+    });
+  },
+  {
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.product,
+    name: "product",
+    getKey: (event) => `product-${getRouterParam(event, "productId")}`,
+  },
+);

package/server/api/product/variant.get.ts

@@ -0,0 +1,99 @@
+import type { components } from "~~/api-types/storeApiTypes";
+
+type Schemas = components["schemas"];
+
+const MAX_OPTION_IDS = 20;
+const MAX_OPTION_ID_LENGTH = 64;
+
+function parseOptionIds(raw: unknown): string[] {
+  const arr = Array.isArray(raw) ? raw : [raw];
+  const seen = new Set<string>();
+  for (const v of arr) {
+    if (
+      typeof v !== "string" ||
+      v.trim() === "" ||
+      v.length > MAX_OPTION_ID_LENGTH
+    )
+      continue;
+    seen.add(v);
+    if (seen.size >= MAX_OPTION_IDS) break;
+  }
+  return [...seen];
+}
+
+export default defineCachedEventHandler(
+  async (event): Promise<Schemas["Product"] | null> => {
+    const { parentId, optionIds: rawOptionIds } = getQuery(event);
+
+    if (typeof parentId !== "string" || parentId.trim() === "") {
+      throw createError({
+        statusCode: 400,
+        message: "Missing or invalid parentId",
+      });
+    }
+
+    const optionIds = parseOptionIds(rawOptionIds);
+    if (optionIds.length === 0) {
+      throw createError({
+        statusCode: 400,
+        message: "At least one optionId is required",
+      });
+    }
+
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    const filter: Schemas["Filters"] = [
+      { type: "equals", field: "parentId", value: parentId },
+      ...optionIds.map(
+        (id) =>
+          ({
+            type: "equals",
+            field: "optionIds",
+            value: id,
+          }) as Schemas["EqualsFilter"],
+      ),
+    ];
+
+    const response = await $fetch<{ elements?: Schemas["Product"][] }>(
+      `${endpoint}/product`,
+      {
+        method: "POST",
+        headers: { "sw-access-key": accessToken },
+        body: {
+          filter,
+          limit: 1,
+          includes: {
+            product: [
+              "id",
+              "name",
+              "description",
+              "translated",
+              "productNumber",
+              "options",
+              "properties",
+              "calculatedPrice",
+            ],
+            product_option: ["id", "groupId", "name", "translated", "group"],
+            property: ["id", "name", "translated", "options"],
+            property_group_option: ["id", "name", "translated", "group"],
+          },
+          associations: {
+            options: { associations: { group: {} } },
+            properties: { associations: { group: {} } },
+          },
+        },
+      },
+    );
+
+    return response.elements?.[0] ?? null;
+  },
+  {
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.variant,
+    name: "variant",
+    getKey: (event) => {
+      const { parentId, optionIds } = getQuery(event);
+      const ids = parseOptionIds(optionIds).sort();
+      return `variant-${parentId}-${ids.join("|")}`;
+    },
+  },
+);

package/test/nuxt/useProductConfigurator.test.ts

@@ -1,19 +1,15 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { useProductConfigurator } from "../../app/composables/useProductConfigurator";
 
-const { mockInvoke, mockConfigurator, mockProduct } = vi.hoisted(() => ({
-  mockInvoke: vi.fn(),
+const { mockFetch, mockConfigurator, mockProduct } = vi.hoisted(() => ({
+  mockFetch: vi.fn(),
   mockConfigurator: { value: [] },
   mockProduct: { value: { id: "p1", optionIds: [], options: [] } },
 }));
 
-// Use vi.mock for explicit imports
+vi.stubGlobal("$fetch", mockFetch);
+
 vi.mock("@shopware/composables", () => ({
-  useShopwareContext: () => ({
-    apiClient: {
-      invoke: mockInvoke,
-    },
-  }),
   useProductConfigurator: () => ({
     handleChange: vi.fn(),
   }),
@@ -57,24 +53,25 @@ describe("useProductConfigurator", () => {
     mockProduct.value = {
       parentId: "parent-1",
     } as unknown as typeof mockProduct.value;
-    mockInvoke.mockResolvedValue({
-      data: {
-        elements: [{ id: "variant-1" }],
-      },
-    });
+    mockFetch.mockResolvedValue({ id: "variant-1" });
 
     const { findVariantForSelectedOptions } = useProductConfigurator();
     const result = await findVariantForSelectedOptions({ Size: "o1" });
 
-    expect(mockInvoke).toHaveBeenCalledWith(
-      "readProduct post /product",
-      expect.any(Object),
+    expect(mockFetch).toHaveBeenCalledWith(
+      "/api/product/variant",
+      expect.objectContaining({
+        query: {
+          parentId: "parent-1",
+          optionIds: ["o1"],
+        },
+      }),
     );
     expect(result).toEqual({ id: "variant-1" });
   });
 
   it("should return undefined on error in findVariantForSelectedOptions", async () => {
-    mockInvoke.mockRejectedValue(new Error("API Error"));
+    mockFetch.mockRejectedValue(new Error("API Error"));
     const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
 
     const { findVariantForSelectedOptions } = useProductConfigurator();