@shopbite-de/storefront 1.1.0

package/app/components/Product/CrossSelling.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { onMounted, watch, computed, ref, toRefs } from "vue";
+import type { Schemas } from "#shopware";
+import type {
+  AssociationItemProduct,
+  AssociationItem,
+} from "~/types/Association";
+
+const DEFAULT_CURRENCY = "EUR";
+const DEFAULT_LOCALE = "de-DE";
+const ASSOCIATION_CONTEXT = "cross-selling";
+const LOADING_ICON = "i-lucide-loader";
+const DEFAULT_ICON = "i-lucide-plus";
+const LOAD_ASSOCIATIONS_METHOD = "post";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+const { product } = toRefs(props);
+const selectedExtras = ref<AssociationItemProduct[]>([]);
+
+const {
+  loadAssociations,
+  isLoading: isAssociationsLoading,
+  productAssociations,
+} = useProductAssociations(product, {
+  associationContext: ASSOCIATION_CONTEXT,
+});
+
+const { getFormattedPrice } = usePrice({
+  currencyCode: DEFAULT_CURRENCY,
+  localeCode: DEFAULT_LOCALE,
+});
+
+function mapAssociationToItems(
+  associations: Schemas["CrossSellingElement"][],
+): AssociationItem[] {
+  return associations.map((crossSellingElement) => ({
+    label: crossSellingElement.crossSelling.name,
+    products: crossSellingElement.products.map(
+      (product: Schemas["Product"]) => ({
+        label: product.name,
+        value: product.id,
+        price: getFormattedPrice(product.calculatedPrice.unitPrice),
+        icon: DEFAULT_ICON,
+      }),
+    ),
+  }));
+}
+
+const associationItems = computed(() =>
+  mapAssociationToItems(productAssociations.value),
+);
+
+onMounted(() => {
+  loadAssociations({ method: LOAD_ASSOCIATIONS_METHOD, searchParams: {} });
+});
+
+watch(selectedExtras, () => emit("extras-selected", selectedExtras.value), {
+  deep: true,
+});
+
+const emit = defineEmits<{
+  "extras-selected": [selectedExtras: AssociationItemProduct[]];
+}>();
+</script>
+
+<template>
+  <div v-if="!isAssociationsLoading" class="my-4">
+    <div
+      v-for="association in associationItems"
+      :key="association.label"
+      class=""
+    >
+      <div class="flex flex-row gap-2 items-center">
+        <div class="basis-1/3">{{ association.label }}:</div>
+        <UInputMenu
+          v-model="selectedExtras"
+          class="w-full"
+          :loading="isAssociationsLoading"
+          :loading-icon="LOADING_ICON"
+          multiple
+          :items="association.products"
+          icon="i-lucide-plus"
+        >
+          <template #item-trailing="{ item }">
+            <span class="">
+              {{ item.price }}
+            </span>
+          </template>
+        </UInputMenu>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Product/DeselectIngredient.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+import { toRefs, watch } from "vue";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+const { product } = toRefs(props);
+
+const deselected = ref([]);
+
+const list = computed(() => {
+  const propsList = product.value?.properties ?? [];
+  return propsList
+    .filter(
+      (propertyGroupOption: Schemas["PropertyGroupOption"]) =>
+        propertyGroupOption.group.name === "Hauptzutaten",
+    )
+    .map(
+      (propertyGroupOption: Schemas["PropertyGroupOption"]) =>
+        propertyGroupOption.translated.name,
+    );
+});
+
+watch(deselected, () => emit("ingredients-deselected", deselected.value), {
+  deep: true,
+});
+
+const emit = defineEmits<{
+  "ingredients-deselected": [deselected: string[]];
+}>();
+</script>
+
+<template>
+  <div v-if="list.length > 0" class="flex flex-row gap-2 my-6 items-center">
+    <div class="basis-1/3">Aber ohne:</div>
+    <USelect
+      v-model="deselected"
+      value-key="productId"
+      :items="list"
+      class="w-full"
+      icon="i-lucide-minus"
+      multiple
+    />
+  </div>
+</template>

package/app/components/Product/Detail.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type { Schemas, operations } from "#shopware";
+import type { AssociationItemProduct } from "~/types/Association";
+import { v5 as uuidv5 } from "uuid";
+import { computed, ref, toRefs } from "vue";
+import { useTrackEvent } from "#imports";
+
+const UUID_NAMESPACE = "b098ef7e-0fa2-4073-b002-7ceec4360fbf";
+const CART_SUCCESS_TITLE = "Gute Wahl!";
+const LINE_ITEM_PRODUCT = "product";
+const LINE_ITEM_CONTAINER = "container";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+const { product } = toRefs(props);
+const { addProducts, refreshCart } = useCart();
+const toast = useToast();
+const { triggerProductAdded } = useProductEvents();
+
+const selectedExtras = ref<AssociationItemProduct[]>([]);
+const deselectedIngredients = ref<string[]>([]);
+const selectedQuantity = ref(1);
+const selectedProduct = ref<Schemas["Product"]>(product.value);
+
+const cartItemLabel = computed(() => {
+  const formatIngredientModifications = (
+    items: Array<{ label: string } | string>,
+    prefix: string,
+  ): string => {
+    if (!items.length) return "";
+
+    const labels = items.map((item) =>
+      typeof item === "string" ? item : item.label,
+    );
+    const separator = " " + prefix;
+    return " " + prefix + labels.join(separator);
+  };
+
+  const extrasFormatted = formatIngredientModifications(
+    selectedExtras.value,
+    "+",
+  );
+  const removedFormatted = formatIngredientModifications(
+    deselectedIngredients.value,
+    "-",
+  );
+
+  return `${selectedProduct.value.translated.name}${extrasFormatted}${removedFormatted}`;
+});
+
+const createExtras = () =>
+  selectedExtras.value.map((extra) => ({
+    id: extra.value,
+    type: LINE_ITEM_PRODUCT,
+    quantity: selectedQuantity.value,
+  }));
+
+const generateSortedExtrasString = (extras: AssociationItemProduct[]) =>
+  extras
+    .map((extra) => extra.value)
+    .sort()
+    .join("");
+
+const generateProductId = (baseId: string, extras: AssociationItemProduct[]) =>
+  extras.length ? baseId + generateSortedExtrasString(extras) : baseId;
+
+function createCartItems(): operations["addLineItem post /checkout/cart/line-item"]["body"]["items"] {
+  const extras = createExtras();
+
+  // Simple product when no extras
+  if (extras.length === 0 && deselectedIngredients.value.length === 0) {
+    return [
+      {
+        id: selectedProduct.value.id,
+        quantity: selectedQuantity.value,
+        type: LINE_ITEM_PRODUCT,
+        label: cartItemLabel.value,
+      },
+    ];
+  }
+
+  // Container product when extras are selected
+  const generatedUuid = uuidv5(
+    generateProductId(selectedProduct.value.id, selectedExtras.value),
+    UUID_NAMESPACE,
+  );
+
+  return [
+    {
+      id: generatedUuid,
+      quantity: selectedQuantity.value,
+      type: LINE_ITEM_CONTAINER,
+      label: cartItemLabel.value,
+      payload: {
+        productNumber: selectedProduct.value.productNumber,
+      },
+      children: [
+        {
+          id: selectedProduct.value.id,
+          quantity: selectedQuantity.value,
+          type: LINE_ITEM_PRODUCT,
+        },
+        ...extras,
+      ],
+    },
+  ];
+}
+
+// Toast Notification
+async function showSuccessToast() {
+  toast.add({
+    title: CART_SUCCESS_TITLE,
+    description: `${selectedProduct.value.translated.name} wurde in den Warenkorb gelegt.`,
+    icon: "i-lucide-shopping-cart",
+    color: "success",
+    progress: true,
+    color: "primary",
+    duration: 2000,
+  });
+}
+
+// Add to Cart
+async function addToCart() {
+  const cartItems = createCartItems();
+  const newCart = await addProducts(cartItems);
+  await refreshCart(newCart);
+  await showSuccessToast();
+  emit("product-added");
+  triggerProductAdded(); // Clear search globally
+  useTrackEvent("add_to_cart", {
+    props: {
+      product_number: selectedProduct.value.productNumber,
+      quantity: selectedQuantity.value,
+    },
+  });
+}
+
+// Event Handlers
+const onVariantSwitched = (variant: Schemas["Product"]) => {
+  selectedProduct.value = variant;
+};
+
+const onExtrasSelected = (extras: AssociationItemProduct[]) => {
+  selectedExtras.value = extras;
+};
+
+const onIngredientsDeselected = (deselected: string[]) => {
+  deselectedIngredients.value = deselected;
+};
+const emit = defineEmits(["product-added"]);
+</script>
+
+<template>
+  <div class="flex flex-col justify-between w-full">
+    <div>
+      <ProductConfigurator
+        :parent-product="product"
+        @variant-switched="onVariantSwitched"
+      />
+      <ProductCrossSelling
+        :product="selectedProduct"
+        @extras-selected="onExtrasSelected"
+      />
+      <ProductDeselectIngredient
+        :product="selectedProduct"
+        @ingredients-deselected="onIngredientsDeselected"
+      />
+    </div>
+    <div class="flex flex-row gap-4 mt-8">
+      <UInputNumber
+        v-model="selectedQuantity"
+        size="xl"
+        placeholder="Anzahl"
+        :min="1"
+        :max="100"
+      />
+      <UButton
+        size="xl"
+        label="In den Warenkorb"
+        icon="i-lucide-shopping-cart"
+        block
+        @click="addToCart"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Product/SearchBar.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { onClickOutside, useDebounceFn, useFocus } from "@vueuse/core";
+import type { Schemas } from "#shopware";
+import { useTrackEvent } from "#imports";
+
+withDefaults(
+  defineProps<{
+    searchInProgress?: boolean;
+  }>(),
+  {
+    searchInProgress: false,
+  },
+);
+
+const emit =
+  defineEmits<(e: "update:searchInProgress", value: boolean) => void>();
+
+const { searchTerm, search, getProducts, loading } = useProductSearchSuggest();
+const { onProductAdded } = useProductEvents();
+
+const searchContainer = ref(null);
+const searchInput = ref();
+const minSearchLength = 1;
+
+const active = ref(false);
+
+// Clear search when product is added to cart
+onProductAdded(() => {
+  typingQuery.value = "";
+  active.value = false;
+});
+
+watch(active, (value) => {
+  const { focused } = useFocus(searchInput);
+
+  focused.value = value;
+});
+
+// String the user has typed in the search field
+const typingQuery = ref("");
+
+watch(typingQuery, (value) => {
+  if (value.length >= minSearchLength) {
+    performSuggestSearch(value);
+    emit("update:searchInProgress", true);
+  } else {
+    emit("update:searchInProgress", false);
+  }
+});
+
+// Defer the search request to prevent the search from being triggered too after typing
+const performSuggestSearch = useDebounceFn((value) => {
+  searchTerm.value = value;
+  search();
+  trackEvent(value);
+}, 500);
+
+const trackEvent = useDebounceFn((searchTerm: string) => {
+  const searchResult = getProducts.value.map(function (
+    product: Schemas["Product"],
+  ) {
+    return product.productNumber;
+  });
+  useTrackEvent("search", {
+    props: { search_term: searchTerm, search_result: searchResult.join(",") },
+  });
+}, 500);
+
+if (import.meta.client) {
+  onClickOutside(searchContainer, () => {
+    active.value = false;
+  });
+}
+
+const showSuggest = computed(() => {
+  return typingQuery.value.length >= minSearchLength && active.value;
+});
+
+defineExpose({
+  showSuggest,
+  products: getProducts,
+  loading,
+});
+</script>
+
+<template>
+  <UInput
+    v-model="typingQuery"
+    name="search"
+    class="w-full my-2"
+    size="xl"
+    :loading="loading"
+    placeholder="Suche..."
+    :ui="{}"
+    @input="active = true"
+  >
+    <template v-if="typingQuery?.length" #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        icon="i-lucide-circle-x"
+        aria-label="Clear input"
+        @click="typingQuery = ''"
+      />
+    </template>
+  </UInput>
+</template>

package/app/components/PublicAnnouncement.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+
+defineProps<{
+  message?: string;
+}>();
+</script>
+
+<template>
+  <div
+    v-if="message"
+    class="bg-red-100 z-50 text-blackish flex p-8 gap-4 shadow-md rounded-md my-4"
+  >
+    <ExclamationTriangleIcon class="w-14 h-14 min-w-12" />
+    <div>{{ message }}</div>
+  </div>
+</template>

package/app/components/Topseller.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ButtonProps } from "#ui/components/Button.vue";
+
+const { loadTopSellers } = useTopSellers();
+
+const topSellers = await loadTopSellers();
+
+const links = ref<ButtonProps[]>([
+  {
+    label: "Zur Speisekarte",
+    to: "/speisekarte",
+    color: "primary",
+    variant: "subtle",
+    trailingIcon: "i-lucide-arrow-right",
+  },
+]);
+</script>
+
+<template>
+  <div v-if="topSellers.length > 0">
+    <AnimatedSection
+      animation="fade-up"
+      duration="duration-1000"
+      delay="delay-100"
+    >
+      <UPageSection
+        headline="Bestseller"
+        title="Am meisten bestellt"
+        :links="links"
+      >
+        <UPageGrid>
+          <ProductCard
+            v-for="product in topSellers"
+            :key="product.productNumber"
+            :product="product"
+            :with-favorite-button="false"
+            :with-add-to-cart-button="false"
+          />
+        </UPageGrid>
+      </UPageSection>
+    </AnimatedSection>
+  </div>
+</template>

package/app/components/User/Detail.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const { user, userDefaultBillingAddress, userDefaultShippingAddress } =
+  useUser();
+
+const fullName = computed(
+  () => user.value?.firstName + " " + user.value?.lastName,
+);
+
+const areAddressesDifferent = computed(() => {
+  if (!userDefaultBillingAddress.value || !userDefaultShippingAddress.value) {
+    return false; // Or true depending on your requirements
+  }
+
+  // Deep compare the address objects
+  return (
+    JSON.stringify(userDefaultBillingAddress.value) !==
+    JSON.stringify(userDefaultShippingAddress.value)
+  );
+});
+</script>
+
+<template>
+  <div class="shadow-md rounded-md mb-4 p-6 bg-elevated">
+    <div>{{ fullName }}</div>
+    <div>{{ user?.email }}</div>
+    <USeparator
+      color="primary"
+      class="my-6"
+      :decorative="true"
+      :label="
+        areAddressesDifferent ? 'Lieferadresse' : 'Liefer- und Rechnungsadresse'
+      "
+    />
+    <AddressDetail :address="userDefaultShippingAddress" />
+    <USeparator
+      v-if="areAddressesDifferent"
+      class="my-6"
+      color="primary"
+      :decorative="true"
+      label="Rechnungsadresse"
+    />
+    <AddressDetail
+      v-if="areAddressesDifferent"
+      :address="userDefaultBillingAddress"
+    />
+  </div>
+</template>

package/app/components/User/LoginForm.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import * as z from "zod";
+import { useWishlist, useUser } from "@shopware/composables";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const { isLoggedIn, login, user } = useUser();
+const { mergeWishlistProducts } = useWishlist();
+const toast = useToast();
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    icon?: string;
+    withRegisterHint?: boolean;
+  }>(),
+  {
+    title: "",
+    icon: "",
+    withRegisterHint: false,
+  },
+);
+
+const emit = defineEmits<{
+  "login-success": [data: string];
+}>();
+
+const { title, icon } = toRefs(props);
+
+if (isLoggedIn.value) {
+  navigateTo({ path: "/konto" });
+}
+
+const fields = [
+  {
+    name: "email",
+    type: "text" as const,
+    label: "Email",
+    placeholder: "Email-Adresse eingeben",
+    required: true,
+  },
+  {
+    name: "password",
+    label: "Passwort",
+    type: "password" as const,
+    placeholder: "Passwort eingeben",
+    required: true,
+  },
+];
+
+const schema = z.object({
+  email: z.string().email("Email Adresse nicht gültig"),
+  password: z.string().min(8, "Mindestens 8 Zeichen"),
+});
+
+type Schema = z.output<typeof schema>;
+
+async function onSubmit(payload: FormSubmitEvent<Schema>) {
+  await login({
+    username: payload.data.email,
+    password: payload.data.password,
+  });
+  toast.add({
+    title: "Hallo " + user.value.firstName + " " + user.value.lastName + "!",
+    description: "Erfolreich angemeldet.",
+    color: "success",
+  });
+  mergeWishlistProducts();
+  emit("login-success", payload.data.email);
+}
+</script>
+
+<template>
+  <UAuthForm
+    :schema="schema"
+    :title="title"
+    :icon="icon"
+    :fields="fields"
+    :submit="{
+      label: 'Anmelden',
+    }"
+    @submit="onSubmit"
+  >
+    <template v-if="withRegisterHint" #description>
+      Noch kein Konto erstellt?
+      <ULink to="registrierung" class="text-primary font-medium"
+        >Jetzt erstellen</ULink
+      >.
+    </template>
+    <template #password-hint>
+      <ULink
+        to="passwort-vergessen"
+        class="text-primary font-medium"
+        tabindex="-1"
+        >Passwort vergessen?</ULink
+      >
+    </template>
+    <template #footer>
+      Bei Anmeldung stimmst du unseren
+      <ULink to="datenschutz" class="text-primary font-medium"
+        >Datenschutzbestimmungen</ULink
+      >
+      zu.
+    </template>
+  </UAuthForm>
+</template>