@shopbite-de/storefront 1.1.0

package/app/components/Checkout/Summary.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import QuickView from "~/components/Cart/QuickView.vue";
+import { useIntervalFn } from "@vueuse/core";
+import { useTrackEvent } from "#imports";
+
+const { selectedPaymentMethod, selectedShippingMethod } = useCheckout();
+const { createOrder } = useCheckout();
+const { refreshCart } = useCart();
+const { isLoggedIn, isGuestSession } = useUser();
+const { isCheckoutEnabled, refresh } = usePizzaToppings();
+
+const toast = useToast();
+
+onMounted(() => {
+  refresh();
+});
+
+watch(isCheckoutEnabled, () => console.log(isCheckoutEnabled.value));
+
+useIntervalFn(refresh, 10000);
+
+async function handleCreateOrder() {
+  const order = await createOrder({
+    customerComment: "Wunschlieferzeit: " + selectedDeliveryTime.value,
+  });
+
+  useTrackEvent("checkout", {
+    revenue: {
+      currency: "EUR",
+      amount: order.amountTotal as number,
+    },
+  });
+
+  await refreshCart();
+  toast.add({
+    title: "Bestellung aufgegeben!",
+    icon: "i-lucide-shopping-cart",
+    color: "success",
+    progress: false,
+  });
+  navigateTo("/order/" + order.id);
+}
+
+const customerDataAvailable = computed<boolean>(
+  () => isLoggedIn.value || isGuestSession.value,
+);
+
+const isValidToProceed = computed(
+  () =>
+    customerDataAvailable.value && isCheckoutEnabled.value && isValidTime.value,
+);
+
+const selectedDeliveryTime = ref("");
+const isValidTime = ref(true);
+
+watch(selectedDeliveryTime, (newValue) => {
+  console.log(newValue);
+});
+
+const checkoutButtonLabel = computed<string>(() => {
+  if (!customerDataAvailable.value) {
+    return "Bitte einloggen oder Kundendaten erfassen";
+  }
+
+  if (!isValidTime.value) {
+    return "Wir haben aktuell leider geschlossen";
+  }
+
+  if (!isCheckoutEnabled.value) {
+    return "Es werden aktuell keine weiteren Bestellungen mehr aufgenommen";
+  }
+
+  return "Jetzt bestellen!";
+});
+</script>
+
+<template>
+  <UContainer class="my-16">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div class="flex flex-col gap-4">
+        <h3 class="text-xl font-bold">Kundendaten</h3>
+        <UserDetail v-if="customerDataAvailable" />
+        <div v-else>Bitte vorher einloggen oder Kundendaten erfassen</div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-xl font-bold">Versand- und Zahlung</h3>
+          <CheckoutPaymentMethod :payment-method="selectedPaymentMethod" />
+          <CheckoutShippingMethod :shipping-method="selectedShippingMethod" />
+          <CheckoutDeliveryTimeSelect
+            v-model:valid="isValidTime"
+            v-model="selectedDeliveryTime"
+          />
+        </div>
+      </div>
+      <div class="flex flex-col gap-4">
+        <h3 class="text-xl font-bold">Warenkorb</h3>
+        <div class="rounded-lg flex flex-col gap-4">
+          <QuickView
+            :with-quantity-input="false"
+            :with-delete-button="false"
+            class="p-6 bg-elevated"
+          />
+          <UButton
+            :icon="
+              isValidToProceed ? 'i-lucide-shopping-cart' : 'i-lucide-lock'
+            "
+            :disabled="!isValidToProceed"
+            :label="checkoutButtonLabel"
+            size="xl"
+            block
+            @click="handleCreateOrder"
+          />
+          <p class="font-light text-muted">
+            Mit Klick auf den Button "Jetzt bestellen!" erklärst du dich mit
+            unseren
+            <ULink to="/agb" class="text-primary font-medium">AGB</ULink> und
+            <ULink to="/datenschutz" class="text-primary font-medium"
+              >Datenschutzbestimmungen</ULink
+            >
+            einverstanden.
+          </p>
+        </div>
+      </div>
+    </div>
+  </UContainer>
+</template>

package/app/components/Cta.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ButtonProps } from "#ui/components/Button.vue";
+
+const links = ref<ButtonProps[]>([
+  {
+    label: "Zur Speisekarte",
+    color: "primary",
+    to: "/speisekarte",
+  },
+  {
+    label: "Tisch reservieren",
+    variant: "outline",
+    trailingIcon: "i-lucide-phone",
+    to: "tel:+490610471427",
+  },
+]);
+</script>
+
+<template>
+  <div class="relative overflow-hidden">
+    <NuxtImg
+      src="https://shopware.shopbite.de/media/f5/19/4a/1762546880/category-pizza-header.webp"
+      class="absolute inset-0 z-0 w-full h-full object-cover opacity-40"
+      alt="CTA Background"
+    />
+    <UPageCTA
+      variant="soft"
+      title="Jetzt bestellen!"
+      description="Genieße die italienische Küche, frisch zubereitet und direkt zu dir geliefert oder vor Ort genießen."
+      :links="links"
+      class="relative z-10"
+    />
+  </div>
+</template>

package/app/components/Features.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PageFeatureProps } from "#ui/components/PageFeature.vue";
+
+defineProps<{
+  title: string;
+  description: string;
+  headline?: string | undefined;
+  features: PageFeatureProps[];
+}>();
+</script>
+
+<template>
+  <AnimatedSection
+    animation="fade-up"
+    duration="duration-1000"
+    delay="delay-100"
+  >
+    <UPageSection
+      id="features"
+      :description="description"
+      :features="features"
+      :headline="headline"
+      class="relative overflow-hidden"
+    >
+      <div
+        class="absolute rounded-full -left-10 top-10 size-[300px] z-10 bg-primary opacity-30 blur-[200px]"
+      />
+      <div
+        class="absolute rounded-full -right-10 -bottom-10 size-[300px] z-10 bg-primary opacity-30 blur-[200px]"
+      />
+      <template #title>
+        <MDC :value="title" class="*:leading-9" />
+      </template>
+    </UPageSection>
+  </AnimatedSection>
+</template>

package/app/components/Food/Marquee.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { MarqueeItem } from "~/components/Food/MarqueeItem.vue";
+
+defineProps<{
+  title: string;
+  description?: string | undefined;
+  headline?: string | undefined;
+  items: MarqueeItem[];
+}>();
+</script>
+
+<template>
+  <AnimatedSection
+    animation="fade-up"
+    duration="duration-1000"
+    delay="delay-100"
+  >
+    <UPageSection
+      id="food"
+      :title="title"
+      :description="description"
+      :headline="headline"
+      :ui="{ container: 'max-w-full' }"
+    >
+      <UMarquee :repeat="6" pause-on-hover :overlay="true">
+        <FoodMarqueeItem
+          v-for="item in items"
+          :key="item.productId"
+          :product-id="item.productId"
+          :image="item.image"
+        />
+      </UMarquee>
+    </UPageSection>
+  </AnimatedSection>
+</template>

package/app/components/Food/MarqueeItem.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useTrackEvent } from "#imports";
+import { useProductSearch } from "@shopware/composables";
+import type { Schemas } from "#shopware";
+
+export type MarqueeItem = {
+  productId: string;
+  image: string;
+};
+
+const props = defineProps<MarqueeItem>();
+
+const { productId, image } = toRefs(props);
+const { search } = useProductSearch();
+
+const productResponse = await search(productId.value);
+
+// object that keeps a Product entity
+const product: Schemas["Product"] = productResponse.product;
+
+const CART_SUCCESS_TITLE = "Gute Wahl!";
+
+const { refreshCart, addProduct } = useCart();
+const toast = useToast();
+
+const alt = computed(() => product.name + " #" + product.productNumber);
+
+async function showSuccessToast() {
+  toast.add({
+    title: CART_SUCCESS_TITLE,
+    description: `${product.translated.name} wurde in den Warenkorb gelegt.`,
+    icon: "i-lucide-shopping-cart",
+    color: "success",
+    progress: false,
+  });
+}
+
+async function addToCart(productId: string) {
+  const newCart = await addProduct({
+    id: productId,
+    quantity: 1,
+  });
+  await refreshCart(newCart);
+  await showSuccessToast();
+  useTrackEvent("add_to_cart", {
+    props: {
+      product_number: product.productNumber,
+      quantity: 1,
+    },
+  });
+}
+</script>
+
+<template>
+  <div v-if="product" :id="product.id" class="relative inline-block">
+    <NuxtImg
+      :src="image"
+      :alt="alt"
+      class="rounded-lg shadow-2xl ring ring-default h-50 md:h-80"
+    />
+    <div
+      class="absolute bottom-0 left-0 right-0 bg-black/60 text-white px-4 py-2 rounded-b-md flex justify-between items-center"
+    >
+      <p class="text-sm font-medium truncate">{{ product.translated.name }}</p>
+      <UButton
+        icon="i-lucide-shopping-cart"
+        size="lg"
+        @click="addToCart(product.id)"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Footer.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// Fetch navigation from content
+const { data: navigationData } = await useAsyncData("footer-navigation", () =>
+  queryCollection("navigation").first(),
+);
+
+const columns = computed(() => {
+  if (!navigationData.value?.footer.columns) return [];
+  return navigationData.value.footer.columns;
+});
+</script>
+
+<template>
+  <USeparator class="h-px" />
+
+  <UFooter :ui="{ top: 'border-b border-default' }">
+    <template #top>
+      <UContainer>
+        <UFooterColumns :columns="columns" />
+      </UContainer>
+    </template>
+
+    <template #left>
+      <NuxtLink
+        to="https://shopbite.de"
+        class="text-sm text-muted"
+        target="_blank"
+      >
+        Bestellsystm von ShopBite • © {{ new Date().getFullYear() }}
+      </NuxtLink>
+    </template>
+
+    <p v-if="navigationData?.footer.text" class="text-muted text-sm">
+      {{ navigationData.footer.text }}
+    </p>
+
+    <template #right>
+      <UColorModeButton v-if="navigationData?.footer.withColorModeSwitch" />
+
+      <UButton
+        v-if="navigationData?.footer.withGithubLink"
+        to="https://github.com/shopbite-de/storefront"
+        target="_blank"
+        icon="i-simple-icons-github"
+        aria-label="ShopBite on GitHub"
+        color="neutral"
+        variant="ghost"
+      />
+    </template>
+  </UFooter>
+</template>

package/app/components/Header.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { DropdownMenuItem, NavigationMenuItem } from "@nuxt/ui";
+import { useRoute } from "vue-router";
+import { useUser } from "@shopware/composables";
+
+const route = useRoute();
+const toast = useToast();
+
+const { isLoggedIn, user, logout } = useUser();
+const { isCheckoutEnabled } = usePizzaToppings();
+const { count } = useCart();
+const runtimeConfig = useRuntimeConfig();
+
+// Fetch navigation from content
+const { data: navigationData } = await useAsyncData("header-navigation", () =>
+  queryCollection("navigation").first(),
+);
+
+const siteName = computed(() => runtimeConfig.public.site?.name ?? "ShopBite");
+
+const navi = computed<NavigationMenuItem[]>(() => {
+  if (!navigationData.value?.main) return [];
+
+  return navigationData.value.main.map((item) => ({
+    label: item.label,
+    icon: item.icon,
+    to: item.to,
+    target: item.target,
+    active:
+      item.to === "/"
+        ? route.path.length === 1
+        : route.path.startsWith(item.to),
+  }));
+});
+
+const accountHoverText = computed(() => {
+  return isLoggedIn.value
+    ? `${user.value?.firstName} ${user.value?.lastName}`
+    : "Hallo";
+});
+
+const logoutHandler = () => {
+  logout();
+  toast.add({
+    title: "Tschüss!",
+    description: "Erfolreich abgemeldet.",
+    color: "success",
+  });
+};
+
+const loggedInDropDown = computed<DropdownMenuItem[][]>(() => {
+  if (!navigationData.value?.account.loggedIn) return [];
+
+  return navigationData.value.account.loggedIn.map((group) =>
+    group.map((item) => ({
+      label: item.type === "label" ? accountHoverText.value : item.label,
+      type: item.type,
+      icon: item.icon,
+      to: item.to,
+      onSelect: item.action === "logout" ? logoutHandler : undefined,
+    })),
+  );
+});
+
+const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
+  if (!navigationData.value?.account.loggedOut) return [];
+
+  return navigationData.value.account.loggedOut.map((group) =>
+    group.map((item) => ({
+      label: item.label,
+      type: item.type,
+      icon: item.icon,
+      to: item.to,
+    })),
+  );
+});
+
+const loginSlide = ref(false);
+const cartQuickViewOpen = ref(false);
+</script>
+
+<template>
+  <UHeader>
+    <template #title>
+      <NuxtLink to="/" class="-m-1.5 p-1.5">
+        <span class="sr-only">{{ siteName }}</span>
+        <UColorModeImage
+          light="/light/Logo.svg"
+          dark="/dark/Logo.svg"
+          class="h-12 w-auto"
+        />
+      </NuxtLink>
+    </template>
+
+    <UNavigationMenu color="primary" variant="pill" :items="navi" />
+
+    <template #right>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="tel:+49610471427"
+        target="_blank"
+        icon="i-lucide-phone"
+        aria-label="Anrufen"
+      />
+      <UDropdownMenu :items="isLoggedIn ? loggedInDropDown : loggedOutDropDown">
+        <UChip v-if="isLoggedIn" size="3xl" text="✓">
+          <UButton icon="i-lucide-user" color="neutral" variant="outline" />
+        </UChip>
+        <UButton
+          v-else
+          icon="i-lucide-user"
+          color="neutral"
+          variant="outline"
+        />
+      </UDropdownMenu>
+      <UDrawer
+        v-if="isCheckoutEnabled"
+        v-model:open="cartQuickViewOpen"
+        title="Warenkorb"
+        direction="right"
+      >
+        <UChip :text="count" size="3xl">
+          <UButton
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-shopping-cart"
+          />
+        </UChip>
+        <template #body>
+          <CartQuickView
+            :with-to-cart-button="true"
+            class="md:min-w-90"
+            @go-to-cart="cartQuickViewOpen = false"
+          />
+        </template>
+      </UDrawer>
+    </template>
+
+    <template #body>
+      <UNavigationMenu
+        color="primary"
+        :items="navi"
+        orientation="vertical"
+        class="-mx-2.5"
+      />
+    </template>
+  </UHeader>
+  <USlideover
+    v-model:open="loginSlide"
+    title="Konto"
+    description="Alle Vorteile eines Kontos genießen"
+  >
+    <template #body>
+      <div class="h-full m-4">
+        <UserLoginForm />
+      </div>
+    </template>
+  </USlideover>
+</template>

package/app/components/Hero.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { ButtonProps } from "#ui/components/Button.vue";
+
+withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    headline?: string;
+    backgroundVideo?: string;
+    links: ButtonProps[];
+    usps?: {
+      title?: string;
+      subtitle?: string;
+      icon?: string;
+      link?: string;
+    }[];
+  }>(),
+  {
+    description: undefined,
+    headline: undefined,
+    backgroundVideo: undefined,
+    usps: () => [],
+  },
+);
+</script>
+
+<template>
+  <div class="relative">
+    <video
+      autoplay
+      loop
+      muted
+      playsinline
+      class="absolute inset-0 w-full h-full object-cover -z-10"
+    >
+      <source :src="backgroundVideo" type="video/mp4" >
+    </video>
+    <div class="bg-black/50 backdrop-blur-sm">
+      <UPageHero
+        :title="title"
+        :description="description"
+        :headline="headline"
+        :links="links"
+        orientation="vertical"
+        :ui="{
+          title: 'text-white',
+          description: 'text-white',
+        }"
+      >
+        <div v-if="usps" class="flex flex-row gap-2 md:gap-8 justify-center">
+          <ULink
+            v-for="(usp, index) in usps"
+            :key="index"
+            as="button"
+            :to="usp.link ?? ''"
+            class="flex items-center text-left gap-2"
+            target="_blank"
+          >
+            <UIcon
+              v-if="usp.icon"
+              :name="usp.icon"
+              class="text-white text-xl"
+            />
+            <div class="flex flex-col">
+              <span v-if="usp.title" class="text-white font-semibold">{{
+                usp.title
+              }}</span>
+              <span v-if="usp.subtitle" class="text-white/80 text-xs">{{
+                usp.subtitle
+              }}</span>
+            </div>
+          </ULink>
+        </div>
+      </UPageHero>
+    </div>
+  </div>
+</template>

package/app/components/ImageGallery.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { CarouselItem } from "#ui/components/Carousel.vue";
+import type { ButtonProps } from "#ui/components/Button.vue";
+
+type ImageProp = {
+  image: string;
+  alt: string;
+};
+
+type ImageCarousel = CarouselItem & ImageProp;
+
+defineProps<{
+  title: string;
+  description?: string | undefined;
+  headline?: string | undefined;
+  images: ImageCarousel[] | undefined;
+  links?: ButtonProps[] | undefined;
+}>();
+</script>
+
+<template>
+  <UPageSection
+    :title="title"
+    :description="description"
+    :headline="headline"
+    :links="links"
+  >
+    <template #body>
+      <UCarousel
+        v-slot="{ item }"
+        :items="images"
+        class="mx-auto w-full"
+        auto-height
+        arrows
+        loop
+      >
+        <NuxtImg
+          :src="item.image"
+          :alt="item.alt"
+          class="rounded-lg w-full max-h-screen object-contain"
+          sizes="sm:100vw md:100vw lg:100vw"
+        />
+      </UCarousel>
+    </template>
+  </UPageSection>
+</template>

package/app/components/Loading.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  size?: "sm" | "md" | "lg";
+  text?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+  text: "Loading...",
+});
+
+const sizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-8 h-8",
+  lg: "w-12 h-12",
+} as const;
+
+const spinnerSize = computed(() => sizeClasses[props.size]);
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-3 p-8">
+    <div
+      class="animate-spin rounded-full border-2 border-gray-300 border-t-primary"
+      :class="spinnerSize"
+    />
+    <p v-if="text" class="text-gray-600">{{ text }}</p>
+  </div>
+</template>