@shopbite-de/storefront 1.1.0

package/app/pages/bestellung.vue

@@ -0,0 +1,103 @@
+<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 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 activeStep = ref(0);
+
+const isCustomerAvailable = computed<boolean>(() => {
+  return isLoggedIn.value || isGuestSession.value;
+});
+</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 />
+              <UButton
+                label="Daten überarbeiten"
+                variant="subtle"
+                block
+                icon="i-lucide-pen"
+                class="my-4"
+                to="/konto"
+              />
+            </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>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+definePageMeta({
+  layout: "listing2",
+});
+const { clearBreadcrumbs } = useBreadcrumbs();
+const { resolvePath } = useNavigationSearch();
+const route = useRoute();
+const routePath = route.path;
+
+const { data: seoResult } = await useAsyncData(
+  `cmsResponse${routePath}`,
+  async () => {
+    // For client links if the history state contains seo url information we can omit the api call
+    if (import.meta.client) {
+      if (history.state?.routeName) {
+        return {
+          routeName: history.state?.routeName,
+          foreignKey: history.state?.foreignKey,
+        };
+      }
+    }
+    const seoUrl = await resolvePath(routePath);
+    return seoUrl;
+  },
+);
+
+if (!seoResult.value?.foreignKey) {
+  console.error("c/[...all].vue:", `No data found in API for ${routePath}`);
+
+  throw createError({
+    statusCode: 404,
+    statusMessage: `No data fetched from API for ${routePath}`,
+  });
+}
+
+const { foreignKey } = useNavigationContext(
+  seoResult as Ref<Schemas["SeoUrl"]>,
+);
+
+onBeforeRouteLeave(() => {
+  clearBreadcrumbs();
+});
+</script>
+
+<template>
+  <CategoryListing :id="foreignKey" />
+</template>

package/app/pages/index.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData("index", () =>
+  queryCollection("home").first(),
+);
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: "Page not found",
+    fatal: true,
+  });
+}
+
+useSeoMeta({
+  title: page.value.seo?.title || page.value.title,
+  ogTitle: page.value.seo?.title || page.value.title,
+  description: page.value.seo?.description || page.value.description,
+  ogDescription: page.value.seo?.description || page.value.description,
+});
+</script>
+<template>
+  <div v-if="page" class="relative">
+    <Hero
+      :title="page.title"
+      :background-video="page.hero.backgroundVideo"
+      :description="page.description"
+      :headline="page.hero.headline"
+      :links="page.hero.links"
+      :usps="page.hero.usps"
+    />
+
+    <USeparator :ui="{ border: 'border-primary/30' }" />
+
+    <Features
+      :title="page.features.title"
+      :description="page.features.description"
+      :headline="page.features.headline"
+      :features="page.features.features"
+    />
+
+    <USeparator :ui="{ border: 'border-primary/30' }" />
+
+    <FoodMarquee
+      v-if="page.marquee.items?.length > 0"
+      :title="page.marquee.title"
+      :description="page.marquee.description"
+      :headline="page.marquee.headline"
+      :items="page.marquee.items"
+    />
+
+    <ImageGallery
+      :title="page.gallery.title"
+      :description="page.gallery.description"
+      :headline="page.gallery.headline"
+      :images="page.gallery.images"
+      :links="page.gallery.links"
+    />
+    <Cta />
+  </div>
+</template>

package/app/pages/konto/adressen.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useAddress, useUser } from "@shopware/composables";
+
+definePageMeta({
+  layout: "account",
+});
+
+const toast = useToast();
+const { userDefaultShippingAddress, userDefaultBillingAddress, refreshUser } =
+  useUser();
+const {
+  customerAddresses,
+  loadCustomerAddresses,
+  setDefaultCustomerBillingAddress,
+  setDefaultCustomerShippingAddress,
+} = useAddress();
+
+onMounted(async () => {
+  await loadCustomerAddresses();
+});
+
+const reloadCustomerData = async () => {
+  openEditModal.value = false;
+  openNewModal.value = false;
+  await loadCustomerAddresses();
+  await refreshUser();
+};
+
+async function makeDefaultShippingAddress(addressId: string) {
+  await setDefaultCustomerShippingAddress(addressId);
+  await reloadCustomerData();
+  toast.add({
+    title: "Standard Lieferadresse wurde geändert!",
+    color: "success",
+  });
+}
+
+async function makeDefaultBillingAddress(addressId: string) {
+  await setDefaultCustomerBillingAddress(addressId);
+  await reloadCustomerData();
+  toast.add({
+    title: "Standard Rechnungsadresse wurde geändert!",
+    color: "success",
+  });
+}
+
+const openEditModal = ref(false);
+const openNewModal = ref(false);
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      headline="KONTO"
+      title="Adressen"
+      description="Verwalte deine Adressen."
+    />
+    <UPageBody>
+      <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-8">
+        <AddressCard
+          v-if="userDefaultShippingAddress"
+          :address="userDefaultShippingAddress"
+          title="Standard Lieferadresse"
+          icon="i-lucide-house"
+        />
+        <AddressCard
+          v-if="userDefaultBillingAddress"
+          :address="userDefaultBillingAddress"
+          title="Standard Rechnungsadresse"
+          icon="i-lucide-receipt-text"
+        />
+      </div>
+      <USeparator label="Alle Adressen" color="primary" />
+      <UPageGrid>
+        <div
+          v-for="address in customerAddresses ?? []"
+          :key="address.id"
+          class="space-y-4"
+        >
+          <AddressCard :address="address" />
+          <div class="flex justify-between">
+            <UModal v-model:open="openEditModal" title="Adresse bearbeiten">
+              <UButton
+                label="Bearbeiten"
+                variant="outline"
+                icon="i-lucide-pen"
+              />
+              <template #body>
+                <div class="p-8">
+                  <AddressForm
+                    :address="address"
+                    @submit-success="reloadCustomerData"
+                  />
+                </div>
+              </template>
+            </UModal>
+            <div class="flex gap-2">
+              <UTooltip
+                v-if="address.id !== userDefaultShippingAddress?.id"
+                text="Als Standard Lieferaddresse setzten"
+              >
+                <UButton
+                  color="secondary"
+                  variant="subtle"
+                  icon="i-lucide-house"
+                  @click="makeDefaultShippingAddress(address.id)"
+                />
+              </UTooltip>
+              <UTooltip
+                v-if="address.id !== userDefaultBillingAddress?.id"
+                text="Als Standard Rechnungsaddresse setzten"
+              >
+                <UButton
+                  color="secondary"
+                  variant="subtle"
+                  icon="i-lucide-receipt-text"
+                  @click="makeDefaultBillingAddress(address.id)"
+                />
+              </UTooltip>
+            </div>
+          </div>
+        </div>
+      </UPageGrid>
+      <UModal v-model:open="openNewModal" title="Neue Adresse erstellen">
+        <UButton label="Neue Adresse hinzufügen" icon="i-lucide-plus" />
+
+        <template #body>
+          <div class="p-8">
+            <AddressForm :address="{}" @submit-success="reloadCustomerData" />
+          </div>
+        </template>
+      </UModal>
+    </UPageBody>
+  </UContainer>
+</template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useOrderDetails } from "@shopware/composables";
+import { formatDate } from "~/utils/formatDate";
+
+import type { RouteParams } from "vue-router";
+
+definePageMeta({
+  layout: "account",
+});
+
+interface OrderRouteParams extends RouteParams {
+  id: string;
+}
+
+const route = useRoute();
+const { id } = route.params as OrderRouteParams;
+const { order, loadOrderDetails, status } = useOrderDetails(id);
+
+const isLoadingData = ref(true);
+
+onMounted(async () => {
+  isLoadingData.value = true;
+
+  await loadOrderDetails();
+
+  isLoadingData.value = false;
+});
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      headline="BESTELLUNG"
+      :title="order?.orderNumber"
+      :description="formatDate(order?.createdAt)"
+    />
+    <UPageBody>
+      <OrderDetail :order="order" :status="status ?? 'laden...'" />
+    </UPageBody>
+  </UContainer>
+</template>

package/app/pages/konto/bestellungen.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { formatDate } from "~/utils/formatDate";
+
+definePageMeta({
+  layout: "account",
+});
+
+const { orders, loadOrders } = useCustomerOrders();
+
+onMounted(() => {
+  loadOrders();
+});
+
+const { getFormattedPrice } = usePrice({
+  currencyCode: "EUR",
+  localeCode: "de-DE",
+});
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      headline="KONTO"
+      title="Meine Bestellungen"
+      description="Historie deiner Bestellungen."
+    />
+    <UPageBody>
+      <UPageList divide>
+        <UPageCard
+          v-for="order in orders"
+          :key="order.id"
+          variant="ghost"
+          :to="'/konto/bestellung/' + order.id"
+          :ui="{
+            root: 'shadow-md rounded-md',
+            footer: 'w-full',
+          }"
+        >
+          <template #default>
+            <div class="flex flex-row justify-between">
+              <div>Bestellung: {{ order.orderNumber }}</div>
+              <div>vom: {{ formatDate(order.createdAt) }}</div>
+              <div>
+                Gesamtbetrag: {{ getFormattedPrice(order.amountTotal) }}
+              </div>
+              <UIcon name="i-lucide-eye" class="size-6" />
+            </div>
+          </template>
+        </UPageCard>
+      </UPageList>
+    </UPageBody>
+  </UContainer>
+</template>

package/app/pages/konto/index.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "account",
+});
+
+const { user, userDefaultShippingAddress, userDefaultBillingAddress } =
+  useUser();
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      headline="KONTO"
+      title="Übersicht"
+      description="Verwalte deine Nutzerdaten und Bestellungen."
+    />
+    <UPageBody>
+      <UPageGrid>
+        <div class="flex flex-col gap-2 w-full">
+          <UPageCard
+            class="h-full"
+            icon="i-lucide-user"
+            title="Persönliches Profil"
+            :ui="{
+              root: 'shadow-md rounded-md',
+              footer: 'w-full',
+            }"
+          >
+            <div class="h-full">
+              <p>{{ user?.firstName }} {{ user?.lastName }}</p>
+              <p>{{ user?.email }}</p>
+            </div>
+          </UPageCard>
+          <UButton
+            variant="outline"
+            label="Bearbeiten"
+            icon="i-lucide-pen"
+            block
+            to="/konto/profil"
+          />
+        </div>
+        <div class="flex flex-col gap-2 w-full">
+          <AddressCard
+            :address="userDefaultShippingAddress"
+            title="Standard Lieferadresse"
+            icon="i-lucide-house"
+          />
+          <UButton
+            variant="outline"
+            label="Bearbeiten"
+            icon="i-lucide-pen"
+            block
+            to="/konto/adressen"
+          />
+        </div>
+        <div class="flex flex-col gap-2 w-full">
+          <AddressCard
+            :address="userDefaultBillingAddress"
+            title="Standard Rechnungsadresse"
+            icon="i-lucide-receipt-text"
+            :with-edit-button="false"
+          />
+          <UButton
+            variant="outline"
+            label="Bearbeiten"
+            icon="i-lucide-pen"
+            block
+            to="/konto/adressen"
+          />
+        </div>
+      </UPageGrid>
+    </UPageBody>
+  </UContainer>
+</template>

package/app/pages/konto/profil.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useUser } from "@shopware/composables";
+import type { FormSubmitEvent } from "@nuxt/ui";
+import * as z from "zod";
+
+definePageMeta({
+  layout: "account",
+});
+
+const { apiClient } = useShopwareContext();
+const loading = ref(true);
+const { user, refreshUser, updatePersonalInfo, updateEmail, logout } =
+  useUser();
+const toast = useToast();
+const open = ref(false);
+
+const schema = z.object({
+  email: z.string().email("Keine gültige Emailadresse"),
+  firstName: z.string().min(1),
+  lastName: z.string().min(1),
+});
+type Schema = z.output<typeof schema>;
+
+function initializeFormState() {
+  return reactive({
+    email: user.value?.email,
+    firstName: user.value?.firstName,
+    lastName: user.value?.lastName,
+  });
+}
+
+const state = initializeFormState();
+
+async function handleEmailUpdate(newEmail: string) {
+  if (newEmail !== user.value?.email) {
+    await updateEmail(newEmail);
+  }
+}
+
+async function handlePersonalInfoUpdate(firstName: string, lastName: string) {
+  await updatePersonalInfo({
+    firstName,
+    lastName,
+  });
+}
+
+function showSuccessMessage(message: string) {
+  toast.add({
+    title: message,
+    color: "success",
+  });
+}
+
+function showErrorMessage(title: string, description: string) {
+  toast.add({
+    title,
+    description,
+    icon: "i-lucide-x",
+    color: "error" as const,
+  });
+}
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  try {
+    loading.value = true;
+    const eventData = event.data;
+
+    await handleEmailUpdate(eventData.email);
+    await handlePersonalInfoUpdate(eventData.firstName, eventData.lastName);
+    await refreshUser();
+
+    showSuccessMessage("Erfolgreich gespeichert");
+  } catch (error) {
+    console.error("Profile update error:", error);
+    showErrorMessage("Fehler!", "Bitte versuchen Sie es später erneut.");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function deleteCustomerAccount() {
+  await apiClient.invoke("deleteCustomer delete /account/customer");
+  toast.add({
+    title: "Tschüss!",
+    icon: "i-lucide-check",
+    color: "success" as const,
+  });
+  await logout();
+  navigateTo("/");
+}
+
+async function onDeleteProfile() {
+  try {
+    await deleteCustomerAccount();
+  } catch (error) {
+    console.error("Customer delete error:", error);
+    showErrorMessage("Fehler!", "Bitte versuchen Sie es später erneut.");
+  }
+}
+
+onMounted(async () => {
+  await refreshUser();
+  loading.value = false;
+});
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      headline="KONTO"
+      title="Mein Profil"
+      description="Ändere hier deine prerönlichen Daten."
+    />
+    <UPageBody v-if="!loading">
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-4"
+        @submit="onSubmit"
+        @error="(error) => console.log('Form validation error:', error)"
+      >
+        <UFormField label="Vorname" name="firstName">
+          <UInput v-model="state.firstName" type="text" class="w-full" />
+        </UFormField>
+        <UFormField label="Nachname" name="lastName">
+          <UInput v-model="state.lastName" type="text" class="w-full" />
+        </UFormField>
+        <UFormField label="Emailadresse" name="email">
+          <UInput v-model="state.email" type="email" class="w-full" />
+        </UFormField>
+        <div class="flex flex-row justify-between">
+          <UButton label="Speichern" type="submit" />
+          <UButton label="Konto löschen" color="error" @click="open = !open" />
+        </div>
+      </UForm>
+      <UModal
+        v-model:open="open"
+        title="Konto löschen"
+        description="Ihre Daten werden unwiederruflich gelöscht."
+        :ui="{ footer: 'justify-end' }"
+      >
+        <template #body>
+          <p>
+            Löscht unwiederuflich ihr Kundenkonto zusammen mit Ihren Adressen,
+            Merklisten und verknüpften Daten.
+          </p>
+        </template>
+        <template #footer="{ close }">
+          <UButton
+            label="Abbrechen"
+            color="neutral"
+            variant="outline"
+            @click="close"
+          />
+          <UButton label="Löschen" color="error" @click="onDeleteProfile" />
+        </template>
+      </UModal>
+    </UPageBody>
+  </UContainer>
+</template>

package/app/pages/merkliste.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: "Merkliste | Pizzeria La Fattoria",
+});
+</script>
+
+<template>
+  <UContainer>
+    <Wishlist />
+  </UContainer>
+</template>