@shopbite-de/storefront 1.1.0

package/app/pages/order/[id].vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { useOrderDetails } from "@shopware/composables";
+import { formatDate } from "~/utils/formatDate";
+
+import type { RouteParams } from "vue-router";
+import type { ButtonProps } from "#ui/components/Button.vue";
+
+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;
+});
+const links = ref<ButtonProps[]>([
+  {
+    label: "Zurück zur Startseite",
+    to: "/",
+    color: "error",
+    variant: "subtle",
+  },
+]);
+</script>
+
+<template>
+  <!-- Show loading spinner while fetching order data -->
+  <UContainer v-if="isLoadingData">
+    <UPageHeader headline="BESTELLUNG" title="Lädt..." />
+    <UPageBody>
+      <div class="flex flex-col items-center justify-center py-16 gap-4">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="w-12 h-12 animate-spin text-primary"
+        />
+        <p class="text-lg text-muted">Bestellung wird geladen...</p>
+      </div>
+    </UPageBody>
+  </UContainer>
+
+  <UContainer v-else-if="order">
+    <UPageHeader
+      headline="BESTELLUNG"
+      :title="order?.orderNumber"
+      :description="formatDate(order?.createdAt)"
+    />
+    <UPageBody>
+      <OrderDetail :order="order" :status="status ?? 'laden...'" />
+    </UPageBody>
+  </UContainer>
+
+  <UContainer v-else>
+    <UPageSection
+      headline="FEHLER"
+      title="Irgendwas ist schief gelaufen"
+      description="Sie können Speisen und Getränke abholen, liefern lassen, oder vor Ort in unserem Restaurant genießen."
+      :links="links"
+    />
+  </UContainer>
+</template>

package/app/pages/passwort-vergessen.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+useHead({
+  meta: [
+    { name: "robots", content: "noindex, nofollow" },
+    { name: "googlebot", content: "noindex, nofollow" },
+  ],
+});
+
+// Constants
+const SUCCESS_TOAST_CONFIG = {
+  title: "Erfolgreich abgesendet!",
+  description: "Bitte überprüfen Sie Ihre Postfach.",
+  icon: "i-lucide-check",
+  color: "success" as const,
+  duration: 0,
+  close: true,
+};
+
+const ERROR_TOAST_CONFIG = {
+  title: "Fehler beim Senden",
+  icon: "i-lucide-x",
+  description: "Bitte versuchen Sie es später erneut.",
+  color: "error" as const,
+};
+
+const { apiClient } = useShopwareContext();
+const toast = useToast();
+
+const schema = z.object({
+  email: z.string().email("Ungültige E-Mail-Adresse"),
+});
+
+type Schema = z.output<typeof schema>;
+
+const fields = [
+  {
+    name: "email",
+    type: "text" as const,
+    label: "Email",
+    placeholder: "Email-Adresse eingeben",
+    required: true,
+  },
+];
+
+// Extract toast creation functions
+function showSuccessToast(): void {
+  toast.add(SUCCESS_TOAST_CONFIG);
+}
+
+function showErrorToast(): void {
+  toast.add(ERROR_TOAST_CONFIG);
+}
+
+async function handlePasswordRecovery(payload: FormSubmitEvent<Schema>) {
+  try {
+    await apiClient.invoke("sendRecoveryMail post /account/recovery-password", {
+      body: {
+        email: payload.data.email,
+        storefrontUrl: useRuntimeConfig().public.storeUrl,
+      },
+    });
+    showSuccessToast();
+  } catch (error) {
+    showErrorToast();
+    console.error("Password recovery error:", error);
+  }
+}
+</script>
+<template>
+  <UContainer class="max-w-xl mx-auto mt-18">
+    <UAuthForm
+      :schema="schema"
+      title="Password vergessen"
+      icon="i-lucide-shield-user"
+      :fields="fields"
+      :submit="{
+        label: 'Senden',
+      }"
+      @submit="handlePasswordRecovery"
+    >
+      <template #description>
+        <p>
+          Geben Sie Ihre E-Mail-Adresse ein um Ihr Passwort zurückzusetzten.
+        </p>
+        <p>
+          Wenn Sie bei uns ein Kundenkonto mit dieser Adresse angelegt haben
+          bekommen Sie in den nächsten Minuten eine E-Mail zugesendet mit
+          weiteren Anweisungen.
+        </p>
+      </template>
+      <template #footer>
+        Beim absenden stimmst du unseren
+        <ULink to="datenschutz" class="text-primary font-medium"
+          >Datenschutzbestimmungen</ULink
+        >
+        zu.
+      </template>
+    </UAuthForm>
+  </UContainer>
+</template>

package/app/pages/registrierung/bestaetigen.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const route = useRoute();
+const toast = useToast();
+
+const { apiClient } = useShopwareContext();
+
+const emParameter = computed(() => route.query.em as string | undefined);
+const hashParameter = computed(() => route.query.hash as string | undefined);
+
+const { mergeWishlistProducts } = useWishlist();
+
+await useAsyncData("register-confirm", async () => {
+  try {
+    if (!emParameter.value || !hashParameter.value) {
+      throw new Error("Missing required parameters");
+    }
+
+    return await apiClient.invoke(
+      "registerConfirm post /account/register-confirm",
+      {
+        body: {
+          em: emParameter.value,
+          hash: hashParameter.value,
+        },
+      },
+    );
+  } catch (e) {
+    console.error("Registration confirmation failed:", e);
+    return null;
+  }
+});
+
+mergeWishlistProducts();
+toast.add({
+  title: "Bestätigung erfolgreich!",
+  description: "Jetzt anmelden und los legen.",
+  color: "success",
+});
+navigateTo({ path: "/konto" });
+</script>
+
+<template>
+  <UContainer> Etwas ist schief gelaufen </UContainer>
+</template>

package/app/pages/registrierung/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { isLoggedIn } = useUser();
+
+if (import.meta.client && isLoggedIn.value) {
+  navigateTo({ path: "/konto" });
+}
+
+watch(isLoggedIn, (isLoggedIn) => {
+  if (isLoggedIn) {
+    navigateTo({ path: "/konto" });
+  }
+});
+</script>
+
+<template>
+  <UPageSection
+    class="max-w-2xl mx-auto"
+    headline="KONTO"
+    title="Registrieren"
+    description="Erstelle dein Kundenkonto."
+  >
+    <UserRegistrationForm @registration-success="navigateTo('/konto')" />
+  </UPageSection>
+</template>

package/app/pages/speisekarte.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+useSeoMeta({
+  title: "Speisekarte | Pizzeria La Fattoria",
+});
+
+definePageMeta({
+  layout: "listing",
+});
+
+const { loadNavigationElements, navigationElements } = useNavigation();
+await loadNavigationElements({ depth: 1 });
+
+const searchBarRef = ref<{
+  showSuggest: boolean;
+  loading: boolean;
+  products: Schemas["Product"];
+} | null>(null);
+
+const searchInProgress = ref(false);
+</script>
+
+<template>
+  <div v-if="navigationElements">
+    <div
+      class="sticky top-16 left-0 z-20 w-full px-4 md:px-6 lg:px-8 backdrop-blur-md rounded-md"
+    >
+      <NavigationMobileTop v-if="!searchInProgress" class="" />
+      <ProductSearchBar
+        ref="searchBarRef"
+        v-model:search-in-progress="searchInProgress"
+      />
+    </div>
+    <div
+      v-if="searchBarRef?.showSuggest"
+      class="flex flex-col gap-4 mt-4 px-4 md:px-6 lg:px-8"
+    >
+      <div v-if="!searchBarRef?.loading" class="flex flex-col gap-4">
+        <ProductCard
+          v-for="product in searchBarRef?.products"
+          :key="product.id"
+          :product="product"
+          :with-favorite-button="true"
+          :with-add-to-cart-button="true"
+        />
+      </div>
+    </div>
+    <div v-else class="px-4 md:px-6 lg:px-8">
+      <ProductCategory
+        v-for="category in navigationElements"
+        :key="category.id"
+        :category="category"
+      />
+    </div>
+  </div>
+  <div v-else>Loading...</div>
+</template>

package/app/pages/unternehmen/[slug].vue

@@ -0,0 +1,66 @@
+<script setup>
+const slug = useRoute().params.slug;
+const { data } = await useAsyncData(`unternehmen-${slug}`, () => {
+  return queryCollection("unternehmen").path(`/unternehmen/${slug}`).first();
+});
+</script>
+
+<template>
+  <UContainer>
+    <ContentRenderer :value="data" class="content my-8" />
+  </UContainer>
+</template>
+
+<style scoped>
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+:deep(.content h1) {
+  @apply text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100;
+}
+
+:deep(.content h2) {
+  @apply text-2xl font-semibold mt-8 mb-4 text-gray-800 dark:text-gray-200;
+}
+
+:deep(.content h3) {
+  @apply text-xl font-semibold mt-6 mb-3 text-gray-800 dark:text-gray-200;
+}
+
+:deep(.content p) {
+  @apply mb-4 text-gray-700 dark:text-gray-300 leading-relaxed;
+}
+
+:deep(.content ul),
+:deep(.content ol) {
+  @apply mb-4 ml-6 space-y-2;
+}
+
+:deep(.content li) {
+  @apply text-gray-700 dark:text-gray-300 leading-relaxed;
+}
+
+:deep(.content ul li) {
+  @apply list-disc;
+}
+
+:deep(.content ol li) {
+  @apply list-decimal;
+}
+
+:deep(.content strong) {
+  @apply font-semibold text-gray-900 dark:text-gray-100;
+}
+
+/* Unstyle links by default, keep subtle hover */
+:deep(.content a) {
+  @apply no-underline text-inherit transition-colors;
+}
+:deep(.content a:hover) {
+  @apply text-primary;
+}
+
+:deep(.content section) {
+  @apply mb-8;
+}
+</style>

package/app/types/Association.d.ts

@@ -0,0 +1,11 @@
+export type AssociationItemProduct = {
+  label: string;
+  value: string;
+  price: string;
+  icon?: string;
+};
+
+export type AssociationItem = {
+  label: string;
+  products: AssociationItemProduct[];
+};

package/app/utils/businessHours.ts

@@ -0,0 +1,119 @@
+import { setTime } from "./time";
+import { isClosedHoliday } from "~/utils/holidays";
+
+export type ServiceInterval = { start: Date; end: Date };
+
+export function isTuesday(date: Date): boolean {
+  return date.getDay() === 2;
+}
+
+export function isSaturday(date: Date): boolean {
+  return date.getDay() === 6;
+}
+
+export function getServiceIntervals(date: Date): Array<ServiceInterval> {
+  if (isTuesday(date)) return [];
+
+  const lunchStart = setTime(date, 11, 30);
+  const lunchEnd = setTime(date, 14, 30);
+  const dinnerStart = setTime(date, 17, 30);
+  const dinnerEnd = isSaturday(date)
+    ? setTime(date, 23, 30)
+    : setTime(date, 23, 0);
+
+  if (isSaturday(date)) {
+    // Saturday: only dinner, no lunch
+    return [{ start: dinnerStart, end: dinnerEnd }];
+  }
+
+  return [
+    { start: lunchStart, end: lunchEnd },
+    { start: dinnerStart, end: dinnerEnd },
+  ];
+}
+
+export function getEarliestSelectableTime(
+  currentTime: Date,
+  currentDeliveryTime: number | null,
+): Date {
+  const earliest = new Date(currentTime);
+  earliest.setMinutes(earliest.getMinutes() + (currentDeliveryTime ?? 30));
+  earliest.setSeconds(0, 0);
+  return earliest;
+}
+
+export function getNextOpeningTime(now: Ref<Date>): string | null {
+  const currentDate = now.value;
+
+  // Check if closed for holiday
+  if (isClosedHoliday(currentDate)) {
+    return "13.08."; // Based on your existing code
+  }
+
+  // Check today's intervals
+  const todayIntervals = getServiceIntervals(currentDate);
+  const currentTime = currentDate.getTime();
+
+  // Find next opening today
+  for (const interval of todayIntervals) {
+    if (interval.start.getTime() > currentTime) {
+      const hours = interval.start.getHours().toString().padStart(2, "0");
+      const minutes = interval.start.getMinutes().toString().padStart(2, "0");
+      return `${hours}:${minutes} Uhr`;
+    }
+  }
+
+  // Check tomorrow
+  const tomorrow = new Date(currentDate);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow.setHours(0, 0, 0, 0);
+
+  // Try up to 7 days ahead to find next opening
+  for (let i = 0; i < 7; i++) {
+    const checkDate = new Date(tomorrow);
+    checkDate.setDate(checkDate.getDate() + i);
+
+    const intervals = getServiceIntervals(checkDate);
+    if (intervals.length > 0) {
+      const nextOpen = intervals[0].start;
+      const dayName = [
+        "Sonntag",
+        "Montag",
+        "Dienstag",
+        "Mittwoch",
+        "Donnerstag",
+        "Freitag",
+        "Samstag",
+      ][nextOpen.getDay()];
+      const hours = nextOpen.getHours().toString().padStart(2, "0");
+      const minutes = nextOpen.getMinutes().toString().padStart(2, "0");
+
+      if (i === 0) {
+        return `morgen um ${hours}:${minutes} Uhr`;
+      }
+      return `${dayName} um ${hours}:${minutes} Uhr`;
+    }
+  }
+
+  return null;
+}
+
+export function findActiveInterval(
+  currentTime: Date,
+  currentDeliveryTime: number | null,
+): ServiceInterval | null {
+  const intervals = getServiceIntervals(currentTime);
+  const earliest = getEarliestSelectableTime(
+    currentTime,
+    currentDeliveryTime ?? 30,
+  );
+
+  if (intervals.length === 0) return null;
+
+  const current = intervals.find(
+    (interval) => earliest >= interval.start && earliest <= interval.end,
+  );
+  if (current) return current;
+
+  return intervals.find((interval) => interval.start > earliest) ?? null;
+}

package/app/utils/formatDate.ts

@@ -0,0 +1,9 @@
+export function formatDate(date: string) {
+  return new Date(date).toLocaleString("de-DE", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}

package/app/utils/holidays.ts

@@ -0,0 +1,43 @@
+export function isClosedHoliday(date: Date): boolean {
+  // Format date as YYYY-MM-DD for comparison
+  const formattedDate = formatDateYYYYMMDD(date);
+
+  // List of holidays (YYYY-MM-DD format)
+  const holidays = [
+    "2025-07-21",
+    "2025-07-22",
+    "2025-07-23",
+    "2025-07-24",
+    "2025-07-25",
+    "2025-07-26",
+    "2025-07-27",
+    "2025-07-28",
+    "2025-07-29",
+    "2025-07-30",
+    "2025-07-31",
+    "2025-08-01",
+    "2025-08-02",
+    "2025-08-03",
+    "2025-08-04",
+    "2025-08-05",
+    "2025-08-06",
+    "2025-08-07",
+    "2025-08-08",
+    "2025-08-09",
+  ];
+
+  return holidays.includes(formattedDate);
+}
+
+/**
+ * Formats a date as YYYY-MM-DD
+ * @param date The date to format
+ * @returns The formatted date string
+ */
+function formatDateYYYYMMDD(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}

package/app/utils/storeHours.ts

@@ -0,0 +1,8 @@
+// utils/storeHours.ts
+import { getServiceIntervals } from "~/utils/businessHours";
+
+export function isStoreOpen(date: Date = new Date()): boolean {
+  const intervals = getServiceIntervals(date);
+  if (intervals.length === 0) return false;
+  return intervals.some(({ start, end }) => date >= start && date <= end);
+}

package/app/utils/time.ts

@@ -0,0 +1,20 @@
+// app/utils/time.ts
+
+export function pad(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+export function toTimeString(date: Date): string {
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+export function setTime(date: Date, h: number, m: number): Date {
+  const d = new Date(date);
+  d.setHours(h, m, 0, 0);
+  return d;
+}
+
+export function parseTimeString(timeStr: string, baseDate: Date): Date {
+  const [hours, minutes] = timeStr.split(":").map((n) => Number.parseInt(n));
+  return setTime(baseDate, hours as number, minutes as number);
+}

package/app/validation/addressSchema.ts

@@ -0,0 +1,34 @@
+// schemas/registrationSchema.ts
+import * as z from "zod";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const createAddressSchema = (state: any) =>
+  z.object({
+    id: z.string().optional(),
+    firstName: z.string().min(1).optional(),
+    lastName: z.string().min(1).optional(),
+    accountType: z.string().min(1).optional(),
+    company: z
+      .string()
+      .optional()
+      .refine(
+        (val) => {
+          return (
+            state.accountType !== "commercial" ||
+            (val !== undefined && val !== "")
+          );
+        },
+        {
+          message: "Als Geschäftskunde ist dieses Feld pflicht.",
+        },
+      ),
+    department: z.string().optional(),
+    street: z.string().min(1),
+    zipcode: z.string().min(1),
+    city: z.string().min(1),
+    countryId: z.string().min(1),
+    phoneNumber: z.string().min(7),
+    additionalAddressLine1: z.string().optional(),
+  });
+
+export type AddressSchema = z.infer<ReturnType<typeof createAddressSchema>>;