@shopbite-de/storefront 1.1.0

package/app/components/Category/Listing.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import type { operations, Schemas } from "#shopware";
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const { id: categoryId } = toRefs(props);
+
+const {
+  resetFilters,
+  loading,
+  search,
+  getElements,
+  getCurrentSortingOrder,
+  getSortingOrders,
+  changeCurrentSortingOrder,
+  getAvailableFilters,
+  getCurrentFilters,
+  setCurrentFilters,
+} = useListing({
+  listingType: "categoryListing",
+  categoryId: props.id,
+});
+
+const { search: categorySearch } = useCategorySearch();
+
+const { data: category } = await useAsyncData(
+  `category${categoryId.value}`,
+  async () => {
+    return await categorySearch(categoryId.value);
+  },
+);
+
+const currentSorting = ref(getCurrentSortingOrder.value ?? "Sortieren");
+
+const propertyFilters = computed<Schemas["PropertyGroup"][]>(() =>
+  getAvailableFilters.value?.filter(
+    (availableFilter) => availableFilter.code === "properties",
+  ),
+);
+
+const selectedPropertyFilters = ref(getCurrentFilters.value?.properties ?? []);
+const selectedPropertyFiltersString = computed(() =>
+  selectedPropertyFilters.value?.join("|"),
+);
+
+const selectedListingFilters = computed<ShortcutFilterParam[]>(() => {
+  return [
+    {
+      code: "properties",
+      value: selectedPropertyFiltersString.value,
+    },
+  ];
+});
+
+const query = {
+  includes: {
+    product: [
+      "id",
+      "productNumber",
+      "name",
+      "description",
+      "calculatedPrice",
+      "translated",
+      "categories",
+      "properties",
+      "propertyIds",
+      "options",
+      "optionIds",
+      "configuratorSettings",
+      "children",
+      "parentId",
+      "sortedProperties",
+      "cover",
+      "parentId",
+    ],
+    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"],
+  },
+  sort: [
+    {
+      field: "productNumber",
+      order: "ASC",
+    },
+  ],
+  associations: {
+    cover: {
+      associations: {
+        media: {},
+      },
+    },
+    categories: {},
+    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"];
+
+await useAsyncData(`listing${categoryId.value}`, async () => {
+  await search(query);
+});
+
+watch(selectedListingFilters, () => {
+  setCurrentFilters(selectedListingFilters.value);
+});
+
+watch(currentSorting, () => {
+  changeCurrentSortingOrder(currentSorting.value as string);
+});
+
+async function handleFilterRest() {
+  await resetFilters();
+  selectedPropertyFilters.value = [];
+}
+
+const moreThanOneFilterAndOption = computed<boolean>(
+  () => propertyFilters.value.length > 0,
+);
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <template #left>
+        <UPageAside>
+          <NavigationDesktopLeft2 />
+        </UPageAside>
+      </template>
+
+      <UPageBody>
+        <div>
+          <CategoryHeader v-if="category" :category="category" />
+          <div class="flex flex-row justify-between gap-4 mb-4">
+            <UBadge
+              variant="subtle"
+              :label="`${getElements.length} Produkte`"
+            />
+            <USelect
+              v-model="currentSorting"
+              icon="i-lucide-arrow-down-wide-narrow"
+              value-key="key"
+              :items="getSortingOrders"
+              placeholder="Sortierung"
+            />
+            <UDrawer
+              v-if="moreThanOneFilterAndOption"
+              class="lg:hidden"
+              title="Filter"
+              direction="right"
+            >
+              <UButton
+                label="Filter"
+                icon="i-lucide-sliders-horizontal"
+                color="neutral"
+                variant="subtle"
+              />
+
+              <template #body>
+                <div class="flex flex-col gap-4">
+                  <div
+                    v-for="filter in propertyFilters"
+                    :key="filter.id"
+                    class="flex flex-col gap-4"
+                  >
+                    <UCollapsible
+                      class="flex flex-col gap-2 w-48"
+                      :default-open="true"
+                    >
+                      <UButton
+                        :label="filter.translated.name"
+                        color="neutral"
+                        variant="subtle"
+                        trailing-icon="i-lucide-chevron-down"
+                        block
+                        :ui="{
+                          trailingIcon:
+                            'group-data-[state=open]:rotate-180 transition-transform duration-200',
+                        }"
+                      />
+
+                      <template #content>
+                        <UCheckboxGroup
+                          v-model="selectedPropertyFilters"
+                          :items="filter.options"
+                          value-key="id"
+                          label-key="translated.name"
+                        />
+                      </template>
+                    </UCollapsible>
+                  </div>
+                  <UButton
+                    label="Zurücksetzten"
+                    variant="outline"
+                    block
+                    @click="handleFilterRest"
+                  />
+                </div>
+              </template>
+            </UDrawer>
+          </div>
+
+          <Loading v-if="loading" text="Produkte werden geladen..." size="lg" />
+
+          <div v-else class="flex flex-col gap-4">
+            <ProductCard
+              v-for="product in getElements"
+              :key="product.id"
+              :product="product"
+              :with-favorite-button="true"
+              :with-add-to-cart-button="true"
+            />
+          </div>
+        </div>
+      </UPageBody>
+
+      <template #right>
+        <UPageAside>
+          <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
+            <h3>Filter</h3>
+            <div
+              v-for="filter in propertyFilters"
+              :key="filter.id"
+              class="flex flex-col gap-4"
+            >
+              <UCollapsible
+                class="flex flex-col gap-2 w-48"
+                :default-open="true"
+              >
+                <UButton
+                  :label="filter.translated.name"
+                  color="neutral"
+                  variant="subtle"
+                  trailing-icon="i-lucide-chevron-down"
+                  block
+                  :ui="{
+                    trailingIcon:
+                      'group-data-[state=open]:rotate-180 transition-transform duration-200',
+                  }"
+                />
+
+                <template #content>
+                  <UCheckboxGroup
+                    v-model="selectedPropertyFilters"
+                    :items="filter.options"
+                    value-key="id"
+                    label-key="translated.name"
+                  />
+                </template>
+              </UCollapsible>
+            </div>
+            <UButton
+              label="Zurücksetzten"
+              variant="outline"
+              block
+              @click="handleFilterRest"
+            />
+          </div>
+        </UPageAside>
+      </template>
+    </UPage>
+  </UContainer>
+</template>

package/app/components/Checkout/DeliveryTimeSelect.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, computed } from "vue";
+import { useDeliveryTime } from "~/composables/useDeliveryTime";
+import { isClosedHoliday } from "~/utils/holidays";
+
+const props = defineProps<{
+  modelValue?: string;
+  valid?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | null): void;
+  (e: "update:valid", value: boolean): void;
+}>();
+
+const { deliveryTime } = usePizzaToppings();
+
+const selected = ref<string>(props.modelValue ?? "");
+const now = ref<Date>(new Date());
+
+function refreshCurrentTime(): void {
+  now.value = new Date();
+}
+
+let timeUpdateInterval: ReturnType<typeof setInterval> | undefined;
+
+onMounted(() => {
+  timeUpdateInterval = globalThis.setInterval(refreshCurrentTime, 60_000);
+});
+
+onUnmounted(() => {
+  if (timeUpdateInterval) {
+    globalThis.clearInterval(timeUpdateInterval);
+  }
+});
+
+const {
+  minTime,
+  maxTime,
+  isClosedToday,
+  helperText,
+  clampTimeToInterval,
+  isTimeWithinBounds,
+  validate,
+} = useDeliveryTime(now);
+
+const validationError = computed<string | null>(() =>
+  selected.value ? validate(selected.value) : null,
+);
+
+const isValid = computed<boolean>(() => {
+  if (!selected.value) return false;
+  if (isClosedHoliday(now.value)) return false;
+  return validate(selected.value) === null;
+});
+
+const deliveryTimeInfo = computed(() => {
+  return "Geschätzte Lieferzeit beträgt " + deliveryTime.value + " min.";
+});
+
+watch(
+  isValid,
+  (v) => {
+    emit("update:valid", v);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (typeof newValue === "string" && newValue !== selected.value) {
+      selected.value = newValue;
+    }
+  },
+);
+
+function roundToNext5MinInterval(timeString: string | null): string {
+  if (!timeString) return "";
+  const [hours, minutes] = timeString.split(":").map(Number);
+  const totalMinutes = hours * 60 + minutes;
+  const roundedMinutes = Math.ceil(totalMinutes / 5) * 5;
+  const newHours = Math.floor(roundedMinutes / 60) % 24;
+  const newMinutes = roundedMinutes % 60;
+  return `${newHours.toString().padStart(2, "0")}:${newMinutes.toString().padStart(2, "0")}`;
+}
+
+// Move initialization to a proper place
+watch(
+  [minTime, maxTime],
+  () => {
+    if (!minTime.value || !maxTime.value) {
+      if (selected.value) {
+        selected.value = "";
+        emit("update:modelValue", null);
+      }
+      return;
+    }
+
+    if (!selected.value) {
+      selected.value = roundToNext5MinInterval(minTime.value);
+      emit("update:modelValue", selected.value);
+      return;
+    }
+
+    if (
+      selected.value &&
+      !isTimeWithinBounds(selected.value, minTime.value, maxTime.value)
+    ) {
+      const clampedTime = clampTimeToInterval(
+        selected.value,
+        minTime.value,
+        maxTime.value,
+        now.value,
+      );
+      if (clampedTime !== selected.value) {
+        selected.value = clampedTime;
+        emit("update:modelValue", clampedTime);
+      }
+    }
+  },
+  { immediate: true },
+);
+
+function handleTimeInput(event: Event): void {
+  const value = (event.target as HTMLInputElement).value;
+  selected.value = value;
+  emit("update:modelValue", value || null);
+}
+</script>
+
+<template>
+  <div v-if="!isClosedHoliday(now)" class="flex flex-col gap-2 mt-4">
+    <div class="flex flex-row items-center justify-between gap-4">
+      <div>Wunschlieferung- oder Abholzeit ab:</div>
+      <client-only>
+        <input
+          type="time"
+          :min="minTime ?? undefined"
+          :max="maxTime ?? undefined"
+          :disabled="isClosedToday || isClosedHoliday(now)"
+          :value="selected"
+          step="300"
+          class="border rounded px-2 py-1"
+          @input="handleTimeInput"
+        >
+      </client-only>
+    </div>
+    <p v-if="validationError" class="text-sm text-red-600">
+      {{ validationError }}
+    </p>
+    <p v-else class="text-sm text-gray-500">{{ helperText }}</p>
+    <UBadge
+      :label="deliveryTimeInfo"
+      icon="i-lucide-clock"
+      size="xl"
+      color="neutral"
+      variant="subtle"
+    />
+    <UBadge
+      label="Lieferzeiten können zu Stoßzeiten variieren."
+      icon="i-lucide-info"
+      size="xl"
+      color="warning"
+      variant="subtle"
+    />
+  </div>
+  <div v-else>
+    <UBadge
+      variant="subtle"
+      class="w-full"
+      icon="i-lucide-info"
+      color="error"
+      label="Geschlossen wegen Betriebsferien"
+    />
+  </div>
+</template>

package/app/components/Checkout/LoginOrRegister.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { TabsItem } from "@nuxt/ui";
+
+const { refreshUser } = useUser();
+const items = [
+  {
+    label: "Daten erfassen",
+    slot: "register" as const,
+  },
+  {
+    label: "Einloggen",
+    slot: "login" as const,
+  },
+] satisfies TabsItem[];
+
+const toast = useToast();
+
+const { mergeWishlistProducts } = useWishlist();
+
+async function handleLoginSuccess() {
+  await refreshUser();
+  mergeWishlistProducts();
+  toast.add({
+    title: "Wilkommen!",
+    color: "success",
+    progress: false,
+  });
+}
+</script>
+
+<template>
+  <div>
+    <UTabs :items="items" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
+      <template #register>
+        <UserRegistrationForm @registration-success="handleLoginSuccess" />
+      </template>
+
+      <template #login>
+        <UserLoginForm />
+      </template>
+    </UTabs>
+  </div>
+</template>

package/app/components/Checkout/PaymentAndDelivery.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type {
+  RadioGroupItem,
+  RadioGroupValue,
+} from "#ui/components/RadioGroup.vue";
+import type { Schemas } from "#shopware";
+
+const {
+  paymentMethods,
+  getPaymentMethods,
+  selectedPaymentMethod,
+  setPaymentMethod,
+  shippingMethods,
+  getShippingMethods,
+  selectedShippingMethod,
+  setShippingMethod,
+} = useCheckout();
+
+const { refreshCart } = useCart();
+
+const toast = useToast();
+
+onMounted(() => {
+  getPaymentMethods();
+  getShippingMethods();
+});
+
+const selectablePaymentMethods = computed<RadioGroupItem[]>(() => {
+  return paymentMethods.value?.map((method: Schemas["PaymentMethod"]) => ({
+    label: method.distinguishableName,
+    description: method.description,
+    value: method.id,
+  }));
+});
+
+const selectableShippingMethods = computed<RadioGroupItem[]>(() => {
+  return shippingMethods.value?.map((method: Schemas["ShippingMethod"]) => ({
+    label: method.name,
+    description: method.description,
+    value: method.id,
+  }));
+});
+
+const selectedPaymentMethodId = ref<RadioGroupValue>(
+  selectedPaymentMethod.value.id,
+);
+const selectedShippingMethodId = ref<RadioGroupValue>(
+  selectedShippingMethod.value.id,
+);
+
+watch(selectedPaymentMethodId, async (newValue: RadioGroupValue) => {
+  await setPaymentMethod({ id: newValue as string });
+  toast.add({
+    title: "Zahlart geändert",
+    description:
+      selectedPaymentMethod.value.distinguishableName + " ausgewählt",
+    color: "success",
+    progress: false,
+  });
+});
+
+watch(selectedShippingMethodId, async (newValue: RadioGroupValue) => {
+  await setShippingMethod({ id: newValue as string });
+  await refreshCart();
+  toast.add({
+    title: "Versandart geändert",
+    description: selectedShippingMethod.value.name + " ausgewählt",
+    color: "success",
+    progress: false,
+  });
+});
+</script>
+
+<template>
+  <UContainer>
+    <div class="flex flex-col md:flex-row justify-between">
+      <div>
+        <div class="flex flex-row items-center gap-4">
+          <UIcon name="i-lucide-badge-euro" class="size-8" />
+          <h2 class="text-2xl text-blackish my-8">Zahlungsarten</h2>
+        </div>
+        <URadioGroup
+          v-model="selectedPaymentMethodId"
+          :items="selectablePaymentMethods"
+          variant="card"
+        />
+      </div>
+      <div>
+        <div class="flex flex-row items-center gap-4">
+          <UIcon name="i-lucide-car" class="size-8" />
+          <h2 class="text-2xl text-blackish my-8">Versandarten</h2>
+        </div>
+        <URadioGroup
+          v-model="selectedShippingMethodId"
+          :items="selectableShippingMethods"
+          variant="card"
+        />
+      </div>
+    </div>
+  </UContainer>
+</template>

package/app/components/Checkout/PaymentMethod.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  paymentMethod: Schemas["PaymentMethod"] | null;
+}>();
+
+const { paymentMethod } = toRefs(props);
+</script>
+
+<template>
+  <div
+    v-if="paymentMethod !== null"
+    class="flex flex-row gap-8 p-6 border rounded-lg border-primary"
+  >
+    <NuxtImg
+      v-if="paymentMethod.media?.url"
+      :src="paymentMethod.media?.url"
+      width="50"
+    />
+    <div>
+      <h3 class="text-base text-pretty font-semibold text-highlighted">
+        Zahlart
+      </h3>
+      <p class="text-[15px] text-pretty text-toned mt-1">
+        {{ paymentMethod.distinguishableName }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/Checkout/ShippingMethod.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  shippingMethod: Schemas["ShippingMethod"] | null;
+}>();
+
+const { shippingMethod } = toRefs(props);
+</script>
+
+<template>
+  <div
+    v-if="shippingMethod !== null"
+    class="flex flex-row gap-8 p-6 border rounded-lg border-primary"
+  >
+    <NuxtImg
+      v-if="shippingMethod.media?.url"
+      :src="shippingMethod.media.url"
+      width="50"
+    />
+    <div>
+      <h3 class="text-base text-pretty font-semibold text-highlighted">
+        Versandart
+      </h3>
+      <p class="text-[15px] text-pretty text-toned mt-1">
+        {{ shippingMethod.name }}
+      </p>
+    </div>
+  </div>
+</template>