@shopbite-de/storefront 1.20.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/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/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/package.json

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