@shopbite-de/storefront 1.1.0

package/app/components/User/RegistrationForm.vue

@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import { createRegistrationSchema } from "~/validation/registrationSchema";
+import type { RegistrationSchema } from "~/validation/registrationSchema";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const config = useRuntimeConfig();
+const { register, isLoggedIn } = useUser();
+
+if (import.meta.client && isLoggedIn.value) {
+  navigateTo({ path: "/konto" });
+}
+
+watch(isLoggedIn, (isLoggedIn) => {
+  if (isLoggedIn) {
+    navigateTo({ path: "/konto" });
+  }
+});
+
+const state = reactive({
+  accountType: "private",
+  salutationId: undefined,
+  firstName: undefined,
+  lastName: undefined,
+  email: undefined,
+  guest: true,
+  password: undefined,
+  passwordConfirm: undefined,
+  acceptedDataProtection: true,
+  isShippingAddressDifferent: false,
+  storefrontUrl: config.public.shopware.devStorefrontUrl,
+  billingAddress: {
+    company: undefined,
+    department: undefined,
+    salutationId: undefined,
+    firstName: undefined,
+    lastName: undefined,
+    phoneNumber: undefined,
+    street: undefined,
+    zipcode: undefined,
+    city: undefined,
+    countryId: config.public.site.countryId,
+  },
+  shippingAddress: {
+    company: undefined,
+    department: undefined,
+    salutationId: undefined,
+    firstName: undefined,
+    lastName: undefined,
+    phoneNumber: undefined,
+    street: undefined,
+    zipcode: undefined,
+    city: undefined,
+    countryId: config.public.site.countryId,
+  },
+});
+
+const schema = computed(() => createRegistrationSchema(state));
+
+const toast = useToast();
+
+async function onSubmit(event: FormSubmitEvent<RegistrationSchema>) {
+  const registrationData = { ...event.data };
+
+  console.log(registrationData);
+  if (
+    !registrationData.billingAddress.firstName &&
+    registrationData.firstName
+  ) {
+    registrationData.billingAddress.firstName = registrationData.firstName;
+  }
+
+  if (!registrationData.billingAddress.lastName && registrationData.lastName) {
+    registrationData.billingAddress.lastName = registrationData.lastName;
+  }
+
+  if (!state.isShippingAddressDifferent) {
+    delete registrationData.shippingAddress;
+  }
+
+  try {
+    await register(registrationData);
+
+    toast.add({
+      title: "Erfolgreich Kundendaten erfasst",
+      color: "success",
+    });
+    emit("registration-success", registrationData);
+  } catch (error) {
+    console.error("Registration failed:", error);
+    toast.add({
+      title: "Registrierung fehlgeschlagen",
+      description: "Bitte versuchen Sie es erneut.",
+      color: "error",
+    });
+  }
+}
+
+const accountTypes = ref([
+  {
+    label: "Privatkunde",
+    value: "private",
+  },
+  {
+    label: "Geschäftskunde",
+    value: "commercial",
+  },
+]);
+
+const emit = defineEmits<{
+  "registration-success": [data: RegistrationSchema];
+}>();
+
+const allowedCities = ref(["Obertshausen", "Lämmerspiel"]);
+</script>
+
+<template>
+  <UForm
+    :schema="schema"
+    :state="state"
+    class="space-y-4"
+    @submit="onSubmit"
+    @error="(error) => console.log('Form validation error:', error)"
+  >
+    <UFormField name="accountType">
+      <USelect
+        v-model="state.accountType"
+        value-key="value"
+        :items="accountTypes"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField name="guest">
+      <USwitch
+        v-model="state.guest"
+        label="Als Gast bestellen"
+        class="w-full"
+      />
+    </UFormField>
+
+    <div class="flex flex-row justify-between gap-4">
+      <UFormField label="Vorname" name="firstName" required class="w-full">
+        <UInput v-model="state.firstName" type="text" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Nachname" name="lastName" required class="w-full">
+        <UInput v-model="state.lastName" type="text" class="w-full" />
+      </UFormField>
+    </div>
+
+    <UFormField label="Email" name="email" required>
+      <UInput v-model="state.email" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Telefon" name="billingAddress.phoneNumber" required>
+      <UInput
+        v-model="state.billingAddress.phoneNumber"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField v-if="!state.guest" label="Password" name="password">
+      <UInput v-model="state.password" type="password" class="w-full" />
+    </UFormField>
+
+    <UFormField
+      v-if="!state.guest"
+      label="Password wiederholen"
+      name="passwordConfirm"
+    >
+      <UInput v-model="state.passwordConfirm" type="password" class="w-full" />
+    </UFormField>
+
+    <USeparator
+      color="primary"
+      :label="
+        state.isShippingAddressDifferent
+          ? 'Rechnungsadresse'
+          : 'Rechnungs- und Lieferadresse'
+      "
+    />
+
+    <UFormField
+      v-if="state.accountType === 'commercial'"
+      label="Unternehmen"
+      name="billingAddress.company"
+    >
+      <UInput
+        v-model="state.billingAddress.company"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="state.accountType === 'commercial'"
+      label="Abteilung"
+      name="billingAddress.department"
+    >
+      <UInput
+        v-model="state.billingAddress.department"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      label="Straße und Hausnr."
+      name="billingAddress.street"
+      required
+    >
+      <UInput
+        v-model="state.billingAddress.street"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="state.isShippingAddressDifferent"
+      label="Postleitzahl"
+      name="billingAddress.zipcode"
+    >
+      <UInput
+        v-model="state.billingAddress.zipcode"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Ort" name="billingAddress.city" required>
+      <USelect
+        v-if="!state.isShippingAddressDifferent"
+        v-model="state.billingAddress.city"
+        :items="allowedCities"
+        class="w-full"
+      />
+      <UInput
+        v-else
+        v-model="state.billingAddress.city"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField name="guest">
+      <UCheckbox
+        v-model="state.isShippingAddressDifferent"
+        label="Rechnungsadresse weicht von Lieferadresse ab"
+        class="w-full"
+      />
+    </UFormField>
+
+    <USeparator
+      v-if="state.isShippingAddressDifferent"
+      color="primary"
+      label="Lieferadresse"
+    />
+
+    <UFormField
+      v-if="
+        state.accountType === 'commercial' && state.isShippingAddressDifferent
+      "
+      label="Unternehmen"
+      name="shippingAddress.company"
+    >
+      <UInput
+        v-model="state.shippingAddress.company"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="
+        state.accountType === 'commercial' && state.isShippingAddressDifferent
+      "
+      label="Abteilung"
+      name="billingAddress.department"
+    >
+      <UInput
+        v-model="state.shippingAddress.department"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="state.isShippingAddressDifferent"
+      label="Vorname"
+      name="shippingAddress.firstName"
+      required
+    >
+      <UInput
+        v-model="state.shippingAddress.firstName"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="state.isShippingAddressDifferent"
+      label="Nachname"
+      name="shippingAddress.lastName"
+    >
+      <UInput
+        v-model="state.shippingAddress.lastName"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="state.isShippingAddressDifferent"
+      label="Straße und Hausnr."
+      name="shippingAddress.street"
+    >
+      <UInput
+        v-model="state.shippingAddress.street"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      v-if="state.isShippingAddressDifferent"
+      label="Ort"
+      name="shippingAddress.city"
+    >
+      <USelect
+        v-model="state.shippingAddress.city"
+        :items="allowedCities"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UButton block type="submit">Speichern</UButton>
+  </UForm>
+</template>

package/app/components/Wishlist.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const { getWishlistProducts, items, clearWishlist } = useWishlist();
+const { apiClient } = useShopwareContext();
+const products = ref<Schemas["Product"][]>([]);
+const isLoading = ref(false);
+
+const clearWishlistHandler = async () => {
+  try {
+    isLoading.value = true;
+    clearWishlist();
+  } finally {
+    isLoading.value = false;
+  }
+};
+const loadProductsByItemIds = async (itemIds: string[]): Promise<void> => {
+  isLoading.value = true;
+
+  try {
+    const { data } = await apiClient.invoke("readProduct post /product", {
+      body: { ids: itemIds || items.value },
+    });
+
+    if (data?.elements) {
+      products.value = data.elements;
+    }
+  } catch (error) {
+    console.error("[wishlist][loadProductsByItemIds]", error);
+  }
+
+  isLoading.value = false;
+};
+
+watch(
+  items,
+  (items, oldItems) => {
+    if (items.length !== oldItems?.length) {
+      products.value = products.value.filter(({ id }: { id: string }) =>
+        items.includes(id),
+      );
+    }
+    if (!items.length) {
+      return;
+    }
+    loadProductsByItemIds(items);
+  },
+  {
+    immediate: true,
+  },
+);
+
+onMounted(async () => {
+  await getWishlistProducts();
+});
+</script>
+
+<template>
+  <div>
+    <h2 class="text-2xl">Merkliste</h2>
+    <div class="flex flex-col gap-4 h-full">
+      <div
+        v-if="products.length === 0"
+        class="flex flex-row items-center gap-2"
+      >
+        <UIcon name="i-lucide-frown" class="size-5" />
+        <p>Keine Produkte</p>
+      </div>
+      <div class="flex flex-col gap-4">
+        <ProductCard
+          v-for="product in products"
+          :key="product.id"
+          :product="product"
+          :with-favorite-button="true"
+          :with-add-to-cart-button="false"
+        />
+        <UButton
+          v-if="products.length > 0"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-trash"
+          @click="clearWishlistHandler"
+        >
+          Alles löschen
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+h1 {
+  @apply text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted my-14;
+}
+
+h2 {
+  @apply mt-0 text-2xl sm:text-3xl lg:text-4xl text-pretty tracking-tight font-bold text-highlighted my-10;
+}
+</style>

package/app/composables/useDeliveryTime.ts

@@ -0,0 +1,139 @@
+import { computed, type Ref } from "vue";
+import { toTimeString, parseTimeString } from "~/utils/time";
+import {
+  getEarliestSelectableTime,
+  findActiveInterval,
+  getServiceIntervals,
+  isTuesday,
+  type ServiceInterval,
+} from "~/utils/businessHours";
+
+function isTimeWithinBounds(
+  time: string,
+  min: string | null,
+  max: string | null,
+): boolean {
+  if (!min || !max) return false;
+  return time >= min && time <= max;
+}
+
+export function useDeliveryTime(now: Ref<Date>) {
+  const { deliveryTime } = usePizzaToppings();
+  const earliest = computed<Date>(() =>
+    getEarliestSelectableTime(now.value, deliveryTime.value),
+  );
+
+  const activeInterval = computed<ServiceInterval | null>(() =>
+    findActiveInterval(now.value, deliveryTime.value),
+  );
+
+  const minTime = computed<string | null>(() => {
+    const interval = activeInterval.value;
+    if (!interval) return null;
+    const minDate = new Date(
+      Math.max(earliest.value.getTime(), interval.start.getTime()),
+    );
+    return toTimeString(minDate);
+  });
+
+  const maxTime = computed<string | null>(() => {
+    const interval = activeInterval.value;
+    return interval ? toTimeString(interval.end) : null;
+  });
+
+  const isClosedToday = computed<boolean>(() => activeInterval.value === null);
+
+  const helperText = computed<string>(() => {
+    const interval = activeInterval.value;
+    if (!interval) {
+      if (isTuesday(now.value)) {
+        return "Heute (Dienstag) ist Ruhetag. Bitte an einem anderen Tag bestellen.";
+      }
+      const intervals = getServiceIntervals(now.value);
+      const lastInterval = intervals.at(-1);
+      if (lastInterval && earliest.value > lastInterval.end) {
+        return "Heute sind keine Lieferzeiten mehr verfügbar.";
+      }
+      return "Aktuell keine Lieferzeit verfügbar. Bitte später erneut versuchen.";
+    }
+
+    const startStr = toTimeString(interval.start);
+    const endStr = toTimeString(interval.end);
+    const earliestStr = toTimeString(earliest.value);
+
+    return earliest.value <= interval.start
+      ? `Nächster möglicher Zeitraum: ${startStr} – ${endStr}`
+      : `Frühestmöglich ab ${earliestStr} (heute), erlaubt: ${startStr} – ${endStr}`;
+  });
+
+  function clampTimeToInterval(
+    selectedTime: string,
+    min: string,
+    max: string,
+    baseDate: Date,
+  ): string {
+    const selected = parseTimeString(selectedTime, baseDate);
+    const minDate = parseTimeString(min, baseDate);
+    const maxDate = parseTimeString(max, baseDate);
+
+    let clamped = selected;
+    if (selected < minDate) clamped = minDate;
+    if (selected > maxDate) clamped = maxDate;
+
+    return toTimeString(clamped);
+  }
+
+  /**
+   * Validate a selected time and return a human-readable error message,
+   * or null if the time is valid (or empty).
+   */
+  function validate(selectedTime: string | null | undefined): string | null {
+    // No value -> no error (let required-validation happen elsewhere if needed)
+    if (!selectedTime) return null;
+
+    // Simple HH:MM check – prevents parse errors and immediate feedback
+    const isHHMM = /^\d{2}:\d{2}$/.test(selectedTime);
+    if (!isHHMM) {
+      return "Bitte eine gültige Uhrzeit im Format HH:MM eingeben.";
+    }
+
+    // Closed or no selectable window
+    if (isClosedToday.value || !minTime.value || !maxTime.value) {
+      return helperText.value;
+    }
+
+    // Bound checks (string compare works for HH:MM)
+    if (selectedTime < minTime.value) {
+      return `Die Zeit liegt vor dem frühestmöglichen Zeitpunkt. Frühestens ab ${minTime.value}.`;
+    }
+    if (selectedTime > maxTime.value) {
+      return `Die Zeit liegt nach dem spätestmöglichen Zeitpunkt. Spätestens bis ${maxTime.value}.`;
+    }
+
+    // Optional: enforce 5-minute steps (step="300" in input)
+    try {
+      const parsed = parseTimeString(selectedTime, now.value);
+      const minutes = parsed.getHours() * 60 + parsed.getMinutes();
+      if (minutes % 5 !== 0) {
+        return "Bitte eine Zeit in 5-Minuten-Schritten auswählen.";
+      }
+    } catch {
+      // If parsing fails for some reason, show a generic message
+      return "Bitte eine gültige Uhrzeit auswählen.";
+    }
+
+    return null;
+  }
+
+  return {
+    earliest,
+    activeInterval,
+    minTime,
+    maxTime,
+    isClosedToday,
+    helperText,
+    clampTimeToInterval,
+    isTimeWithinBounds,
+    validate,
+  };
+}

package/app/composables/useInterval.ts

@@ -0,0 +1,15 @@
+import { onMounted, onUnmounted } from "vue";
+
+export function useInterval(callback: () => void, interval: number) {
+  let timer: NodeJS.Timeout | null = null;
+
+  onMounted(() => {
+    timer = setInterval(callback, interval);
+  });
+
+  onUnmounted(() => {
+    if (timer !== null) {
+      clearInterval(timer);
+    }
+  });
+}

package/app/composables/usePizzaToppings.ts

@@ -0,0 +1,31 @@
+import { useContext, useShopwareContext } from "#imports";
+import type { Schemas } from "#shopware";
+
+type usePizzaToppingsReturn = {
+  deliveryTime: ComputedRef<number>;
+  isCheckoutEnabled: ComputedRef<boolean>;
+  refresh(): Promise<Schemas["PizzaToppings"]>;
+};
+
+export function usePizzaToppings(): usePizzaToppingsReturn {
+  const { apiClient } = useShopwareContext();
+
+  const _deliveryTime = useContext<number>("deliveryTime");
+  const _isCheckoutEnabled = useContext<boolean>("isCheckoutActive");
+
+  async function refresh(): Promise<Schemas["PizzaToppings"]> {
+    const { data } = await apiClient.invoke(
+      "pizza-toppings.get get /pizza-toppings",
+    );
+    _deliveryTime.value = data.deliveryTime;
+    _isCheckoutEnabled.value = data.isCheckoutEnabled;
+
+    return data;
+  }
+
+  return {
+    deliveryTime: computed(() => _deliveryTime.value),
+    isCheckoutEnabled: computed(() => _isCheckoutEnabled.value),
+    refresh,
+  };
+}