@shopbite-de/storefront 1.1.0

package/app/composables/useProductEvents.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi } from "vitest";
+import { useProductEvents } from "./useProductEvents";
+import { nextTick } from "vue";
+
+/**
+ * Unit tests for useProductEvents composable
+ *
+ * This composable provides a lightweight event bus for product-related events,
+ * specifically designed to handle the "product added to cart" event without
+ * requiring prop drilling or state management libraries like Pinia.
+ *
+ * Test Coverage:
+ * - Basic event triggering and listening
+ * - Multiple triggers and listeners
+ * - Edge cases (no listeners, callback errors)
+ * - Memory management (listener cleanup)
+ */
+describe("useProductEvents", () => {
+  it("should trigger and listen to product added event", async () => {
+    const { triggerProductAdded, onProductAdded } = useProductEvents();
+    const callback = vi.fn();
+
+    onProductAdded(callback);
+    triggerProductAdded();
+
+    await nextTick();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it("should call callback when triggered multiple times", async () => {
+    const { triggerProductAdded, onProductAdded } = useProductEvents();
+    const callback = vi.fn();
+
+    onProductAdded(callback);
+    triggerProductAdded();
+    await nextTick();
+
+    triggerProductAdded();
+    await nextTick();
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not call callback before trigger", () => {
+    const { onProductAdded } = useProductEvents();
+    const callback = vi.fn();
+
+    onProductAdded(callback);
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should work with multiple listeners", async () => {
+    const { triggerProductAdded, onProductAdded } = useProductEvents();
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+
+    onProductAdded(callback1);
+    onProductAdded(callback2);
+    triggerProductAdded();
+
+    await nextTick();
+    expect(callback1).toHaveBeenCalled();
+    expect(callback2).toHaveBeenCalled();
+  });
+
+  it("should work when triggered without any listeners", () => {
+    const { triggerProductAdded } = useProductEvents();
+
+    // Should not throw when no listeners are registered
+    expect(() => triggerProductAdded()).not.toThrow();
+  });
+
+  it("should work with shared global state across multiple instances", async () => {
+    const instance1 = useProductEvents();
+    const instance2 = useProductEvents();
+
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+
+    instance1.onProductAdded(callback1);
+    instance2.onProductAdded(callback2);
+
+    // Trigger from instance1
+    instance1.triggerProductAdded();
+    await nextTick();
+
+    // Both callbacks should be called (global event bus behavior)
+    expect(callback1).toHaveBeenCalled();
+    expect(callback2).toHaveBeenCalled();
+  });
+
+  it("should call callbacks on each trigger", async () => {
+    const { triggerProductAdded, onProductAdded } = useProductEvents();
+    const callback = vi.fn();
+
+    onProductAdded(callback);
+
+    triggerProductAdded();
+    await nextTick();
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    triggerProductAdded();
+    await nextTick();
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    triggerProductAdded();
+    await nextTick();
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+});

package/app/composables/useProductEvents.ts

@@ -0,0 +1,22 @@
+import { ref, watch } from "vue";
+
+const productAddedTrigger = ref(0);
+
+export const useProductEvents = () => {
+  const triggerProductAdded = () => {
+    productAddedTrigger.value++;
+  };
+
+  const onProductAdded = (callback: () => void) => {
+    watch(productAddedTrigger, () => {
+      if (productAddedTrigger.value > 0) {
+        callback();
+      }
+    });
+  };
+
+  return {
+    triggerProductAdded,
+    onProductAdded,
+  };
+};

package/app/composables/useProductVariants.ts

@@ -0,0 +1,61 @@
+import { computed } from "vue";
+import type { Schemas } from "#shopware";
+
+// Define the SelectItem interface to match what USelect expects
+interface SelectItem {
+  label: string;
+  value: string;
+  productId: string;
+}
+
+type VariantOptions = {
+  name: string;
+  options: SelectItem[]; // Changed to match USelect's expected format
+};
+
+type useProductVariantsReturn = {
+  variants: ComputedRef<Record<string, VariantOptions>>;
+};
+
+export function useProductVariants(
+  configuratorSettings: Ref<Schemas["ProductConfiguratorSetting"][]>,
+): useProductVariantsReturn {
+  const variants = computed(() => {
+    const configSettings = configuratorSettings.value || [];
+    const result: Record<string, VariantOptions> = {};
+
+    for (const option of configSettings) {
+      const groupId = option.option?.group?.id;
+      const groupName =
+        option.option?.group?.translated?.name || option.option?.group?.name;
+      const optionName = option.option?.translated?.name || option.option?.name;
+      const optionId = option.option?.id;
+
+      if (groupId && groupName && optionName && optionId) {
+        result[groupId] ??= {
+          name: groupName,
+          options: [],
+        };
+
+        // Check if option already exists to avoid duplicates
+        const existingOption = result[groupId].options.find(
+          (item) => item.value === optionId,
+        );
+        if (!existingOption) {
+          // Add option in the format USelect expects
+          result[groupId].options.push({
+            label: optionName,
+            value: optionId,
+            productId: optionId,
+          });
+        }
+      }
+    }
+
+    return result;
+  });
+
+  return {
+    variants,
+  };
+}

package/app/composables/useScrollAnimation.ts

@@ -0,0 +1,39 @@
+import { ref, onMounted, type Ref } from "vue";
+
+export interface ScrollAnimationOptions {
+  threshold?: number;
+  rootMargin?: string;
+}
+
+export function useScrollAnimation(options: ScrollAnimationOptions = {}) {
+  const { threshold = 0.1, rootMargin = "0px 0px -100px 0px" } = options;
+
+  const isVisible = ref(false);
+  const elementRef: Ref<HTMLElement | null> = ref(null);
+
+  onMounted(() => {
+    if (!elementRef.value) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            isVisible.value = true;
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold,
+        rootMargin,
+      },
+    );
+
+    observer.observe(elementRef.value);
+  });
+
+  return {
+    isVisible,
+    elementRef,
+  };
+}

package/app/composables/useTopSellers.ts

@@ -0,0 +1,34 @@
+import type { Schemas } from "#shopware";
+
+export type useTopSellersReturn = {
+  loadTopSellers(): Promise<Schemas["Card"]>;
+};
+
+export function useTopSellers(): useTopSellersReturn {
+  const { apiClient } = useShopwareContext();
+  async function loadTopSellers() {
+    try {
+      const result = await apiClient.invoke("getTopSellers post /product", {
+        body: {
+          filter: [{ type: "equals", field: "markAsTopseller", value: true }],
+          includes: {
+            product: [
+              "productNumber",
+              "name",
+              "description",
+              "calculatedPrice",
+            ],
+          },
+        },
+      });
+      return result.data.elements;
+    } catch (e) {
+      console.error("[useTopSellers][loadTopSellers]", e);
+      return [];
+    }
+  }
+
+  return {
+    loadTopSellers,
+  };
+}

package/app/error.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+const props = defineProps<{
+  error: NuxtError;
+}>();
+
+console.error(props.error);
+
+const statusCode = props.error.statusCode;
+
+useSeoMeta({
+  title: `${statusCode} | Pizzeria La Fattoria`,
+});
+</script>
+
+<template>
+  <NuxtLayout>
+    <div class="mb-20 flex flex-col items-center justify-center px-5 py-3">
+      <h2 v-if="statusCode === 404" class="text-center">
+        Die angeforderte Seite konnte nicht gefunden werden.
+      </h2>
+      <h2 v-else class="text-center">Irgendwas ist schief gelaufen</h2>
+      <h3 class="max-w-lg whitespace-pre-line pb-8 pt-5 text-3xl">
+        {{ error.statusCode }}
+      </h3>
+      <NuxtLink to="" class="button">Zurück zur Starseite</NuxtLink>
+    </div>
+  </NuxtLayout>
+</template>

package/app/layouts/account.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+import { useUser } from "@shopware/composables";
+const toast = useToast();
+const { isLoggedIn, logout } = useUser();
+
+onMounted(() => {
+  if (!isLoggedIn.value) {
+    navigateTo("/anmelden");
+  }
+});
+
+watch(isLoggedIn, (newValue) => {
+  if (!newValue) {
+    navigateTo("/anmelden");
+  }
+});
+
+const logoutHandler = () => {
+  logout();
+  toast.add({
+    title: "Tschüss!",
+    description: "Erfolreich abgemeldet.",
+    color: "success",
+  });
+};
+
+const items = ref<NavigationMenuItem[][]>([
+  [
+    {
+      label: "Übersicht",
+      icon: "i-lucide-grip",
+      to: "/konto",
+    },
+    {
+      label: "Bestellungen",
+      icon: "i-lucide-book-open",
+      to: "/konto/bestellungen",
+    },
+    {
+      label: "Persönliches Profil",
+      icon: "i-lucide-user",
+      to: "/konto/profil",
+    },
+    {
+      label: "Adressen",
+      icon: "i-lucide-house",
+      to: "/konto/adressen",
+    },
+    {
+      label: "Abmelden",
+      icon: "i-lucide-log-out",
+      onSelect: logoutHandler,
+    },
+  ],
+]);
+</script>
+<template>
+  <UContainer>
+    <UPage>
+      <template #left>
+        <UNavigationMenu
+          highlight
+          highlight-color="primary"
+          orientation="vertical"
+          :items="items"
+          class="data-[orientation=vertical] py-8"
+        />
+      </template>
+      <slot />
+      <BottomNavi />
+    </UPage>
+  </UContainer>
+</template>

package/app/layouts/default.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <UPage>
+    <slot />
+  </UPage>
+</template>

package/app/layouts/listing.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { count } = useWishlist();
+const { refresh } = usePizzaToppings();
+
+onMounted(() => {
+  refresh();
+});
+</script>
+
+<template>
+  <div>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <NavigationDesktopLeft />
+          </UPageAside>
+        </template>
+
+        <UPageBody>
+          <slot />
+        </UPageBody>
+
+        <template #right>
+          <UPageAside>
+            <Wishlist v-if="count > 0" />
+          </UPageAside>
+        </template>
+      </UPage>
+    </UContainer>
+  </div>
+</template>

package/app/layouts/listing2.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <UPage>
+    <NavigationMobileTop2 />
+    <slot />
+  </UPage>
+</template>

package/app/middleware/trailing-slash.global.ts

@@ -0,0 +1,19 @@
+import { defineNuxtRouteMiddleware, navigateTo } from "#app";
+
+export default defineNuxtRouteMiddleware((to) => {
+  // Only handle category pages
+  if (!to.path.startsWith("/c/")) return;
+
+  // Skip if it already has a trailing slash or it's just "/c/"
+  if (to.path.endsWith("/") || to.path === "/c/") return;
+
+  // Preserve query and hash while adding the trailing slash
+  return navigateTo(
+    {
+      path: `${to.path}/`,
+      query: to.query,
+      hash: to.hash,
+    },
+    { redirectCode: 301 },
+  );
+});

package/app/pages/account/recover/password/index.vue

@@ -0,0 +1,143 @@
+<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 MIN_PASSWORD_LENGTH = 8;
+const PASSWORD_MIN_LENGTH_ERROR = "Mindestens 8 Zeichen";
+const PASSWORD_MISMATCH_ERROR = "Passwörter stimmen nicht überein";
+const SUCCESS_TOAST_CONFIG = {
+  title: "Erfolgreich zurückgesetzt!",
+  description: "Melden Sie sich nun mit Ihrem neuen Passwort an.",
+  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 route = useRoute();
+const toast = useToast();
+
+// Schemas
+const routeValidationSchema = z.object({
+  hash: z.string().min(1, "Hash parameter is required and cannot be empty"),
+});
+
+const passwordResetSchema = z
+  .object({
+    newPassword: z.string().min(MIN_PASSWORD_LENGTH, PASSWORD_MIN_LENGTH_ERROR),
+    newPasswordConfirm: z
+      .string()
+      .min(MIN_PASSWORD_LENGTH, PASSWORD_MIN_LENGTH_ERROR),
+  })
+  .refine((data) => data.newPassword === data.newPasswordConfirm, {
+    message: PASSWORD_MISMATCH_ERROR,
+    path: ["newPasswordConfirm"],
+  });
+
+type PasswordResetSchema = z.output<typeof passwordResetSchema>;
+
+// Extract route validation logic
+function validateRouteParameters(): string {
+  try {
+    const validatedParams = routeValidationSchema.parse(route.query);
+    return validatedParams.hash as string;
+  } catch (error) {
+    console.error("Invalid route parameters:", error);
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid validation",
+    });
+  }
+}
+
+// Extract toast creation functions
+function showSuccessToast(): void {
+  toast.add(SUCCESS_TOAST_CONFIG);
+}
+
+function showErrorToast(): void {
+  toast.add(ERROR_TOAST_CONFIG);
+}
+
+const recoveryHash = ref<string>("");
+recoveryHash.value = validateRouteParameters();
+
+const formFields = [
+  {
+    name: "newPassword",
+    type: "password" as const,
+    label: "Neues Passwort",
+    placeholder: "Neues Passwort eingeben",
+    required: true,
+  },
+  {
+    name: "newPasswordConfirm",
+    type: "password" as const,
+    label: "Neues Passwort wiederholen",
+    placeholder: "Neues Passwort wiederholen",
+    required: true,
+  },
+];
+
+async function handlePasswordReset(
+  payload: FormSubmitEvent<PasswordResetSchema>,
+) {
+  try {
+    await apiClient.invoke(
+      "recoveryPassword post /account/recovery-password-confirm",
+      {
+        body: {
+          newPassword: payload.data.newPassword,
+          newPasswordConfirm: payload.data.newPasswordConfirm,
+          hash: recoveryHash.value,
+        },
+      },
+    );
+    showSuccessToast();
+    navigateTo("/anmelden");
+  } catch (error) {
+    showErrorToast();
+    console.error("Password recovery error:", error);
+  }
+}
+</script>
+<template>
+  <UContainer class="max-w-xl mx-auto mt-18">
+    <UAuthForm
+      :schema="passwordResetSchema"
+      title="Password zurücksetzten"
+      icon="i-lucide-shield-user"
+      :fields="formFields"
+      :submit="{
+        label: 'Senden',
+      }"
+      @submit="handlePasswordReset"
+    >
+      <template #description>
+        <p>Vergeben Sie hier Ihr neues Passwort.</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/anmelden.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { isLoggedIn } = useUser();
+
+onMounted(() => {
+  if (isLoggedIn.value) {
+    navigateTo("/konto");
+  }
+});
+
+watch(isLoggedIn, (newValue) => {
+  if (newValue) {
+    navigateTo("/konto");
+  }
+});
+
+function handleLoginSuccess() {
+  navigateTo("/speisekarte");
+}
+</script>
+
+<template>
+  <UContainer>
+    <div class="max-w-xl mx-auto mt-16">
+      <UserLoginForm
+        title="Anmelden"
+        icon="i-lucide-user"
+        with-register-hint
+        @login-success="handleLoginSuccess"
+      />
+    </div>
+  </UContainer>
+</template>