@shopbite-de/storefront 1.14.4 → 1.16.0

package/app/components/Category/Listing.vue

@@ -118,7 +118,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
     <UPage>
       <template #left>
         <UPageAside>
-          <NavigationDesktopLeft2 />
+          <NavigationDesktopLeft />
         </UPageAside>
       </template>
 
@@ -212,7 +212,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
       <template #right>
         <UPageAside>
           <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
-            <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Filter</h2>
+            <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
             <div
               v-for="filter in propertyFilters"
               :key="filter.id"

package/app/components/Contact/Form.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { z } from "zod";
+import type { FormSubmitEvent } from "#ui/types";
+import { useSalutations } from "@shopware/composables";
+
+const { apiClient } = useShopwareContext();
+const { getSalutations } = useSalutations();
+const toast = useToast();
+
+const salutations = computed(() =>
+  getSalutations.value.map((salutation) => ({
+    label: salutation.displayName,
+    value: salutation.id,
+  })),
+);
+
+const schema = z.object({
+  salutationId: z.string().optional(),
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
+  email: z.string().email("Ungültige E-Mail-Adresse"),
+  phone: z.string().optional(),
+  subject: z.string().min(3, "Bitte gib einen Betreff an"),
+  comment: z
+    .string()
+    .min(10, "Die Nachricht muss mindestens 10 Zeichen lang sein"),
+  hp: z.string().optional(),
+});
+
+type Schema = z.output<typeof schema>;
+
+const state = reactive({
+  salutationId: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+  phone: "",
+  subject: "",
+  comment: "",
+  hp: "",
+});
+
+const loading = ref(false);
+const submitted = ref(false);
+const successMessage = ref("");
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  if (event.data.hp) {
+    console.warn("Honeypot filled, submission ignored.");
+    successMessage.value = "Deine Nachricht wurde erfolgreich versendet.";
+    submitted.value = true;
+    return;
+  }
+  loading.value = true;
+  const salutation = event.data.salutationId || salutations.value.at(-1)?.value;
+  try {
+    const result = await apiClient.invoke(
+      "sendContactMail post /contact-form",
+      {
+        body: {
+          salutationId: salutation,
+          firstName: event.data.firstName,
+          lastName: event.data.lastName,
+          email: event.data.email,
+          phone: event.data.phone,
+          subject: event.data.subject,
+          comment: event.data.comment,
+        },
+      },
+    );
+
+    const msg =
+      typeof result?.data?.individualSuccessMessage === "string"
+        ? result.data.individualSuccessMessage.trim()
+        : "";
+    successMessage.value =
+      msg && msg.length > 0
+        ? msg
+        : "Deine Nachricht wurde erfolgreich versendet.";
+    submitted.value = true;
+
+    toast.add({
+      title: "Erfolg!",
+      description: successMessage.value,
+      color: "success",
+    });
+
+    // Reset form
+    state.salutationId = "";
+    state.firstName = "";
+    state.lastName = "";
+    state.email = "";
+    state.phone = "";
+    state.subject = "";
+    state.comment = "";
+    state.hp = "";
+  } catch (error) {
+    console.error("Error sending contact mail:", error);
+    toast.add({
+      title: "Fehler!",
+      description:
+        "Deine Nachricht konnte nicht versendet werden. Bitte versuche es später erneut.",
+      color: "error",
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="submitted" class="space-y-4 text-center">
+    <UAlert
+      color="success"
+      variant="soft"
+      icon="i-lucide-check-circle"
+      :title="successMessage"
+    />
+    <UButton variant="link" @click="submitted = false">
+      Weiteres Formular senden
+    </UButton>
+  </div>
+
+  <UForm
+    v-else
+    :schema="schema"
+    :state="state"
+    class="space-y-4"
+    @submit="onSubmit"
+  >
+    <UFormField label="Anrede" name="salutationId">
+      <USelect
+        v-model="state.salutationId"
+        :items="salutations"
+        placeholder="Bitte wählen"
+        class="w-full"
+      />
+    </UFormField>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <UFormField label="Vorname" name="firstName">
+        <UInput
+          v-model="state.firstName"
+          placeholder="Dein Vorname"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField label="Nachname" name="lastName">
+        <UInput
+          v-model="state.lastName"
+          placeholder="Dein Nachname"
+          class="w-full"
+        />
+      </UFormField>
+    </div>
+
+    <UFormField label="E-Mail" name="email" required>
+      <UInput
+        v-model="state.email"
+        type="email"
+        placeholder="Deine E-Mail-Adresse"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Telefon" name="phone">
+      <UInput
+        v-model="state.phone"
+        type="tel"
+        placeholder="Deine Telefonnummer"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Betreff" name="subject" required>
+      <UInput
+        v-model="state.subject"
+        placeholder="Worum geht es?"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Nachricht" name="comment" required>
+      <UTextarea
+        v-model="state.comment"
+        placeholder="Wie können wir dir helfen?"
+        class="w-full"
+      />
+    </UFormField>
+
+    <!-- Honeypot field -->
+    <div class="hidden-field" aria-hidden="true">
+      <UFormField label="Address" name="hp">
+        <UInput
+          v-model="state.hp"
+          type="text"
+          placeholder="Address"
+          tabindex="-1"
+          autocomplete="off"
+        />
+      </UFormField>
+    </div>
+
+    <UButton type="submit" :loading="loading" block> Absenden </UButton>
+  </UForm>
+</template>
+
+<style scoped>
+.hidden-field {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
+  overflow: hidden;
+}
+</style>

package/app/components/Navigation/{DesktopLeft2.vue → DesktopLeft.vue}

@@ -3,7 +3,7 @@ import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 import { useNavigation } from "~/composables/useNavigation";
 
-const { mainNavigation } = useNavigation(false);
+const { menuCardNavigation } = useNavigation(true);
 
 const mapCategoryToNavItem = (
   category: Schemas["Category"],
@@ -21,13 +21,13 @@ const mapCategoryToNavItem = (
 };
 
 const navItems = computed<NavigationMenuItem[]>(() => {
-  return (mainNavigation.value ?? []).map(mapCategoryToNavItem);
+  return (menuCardNavigation.value ?? []).map(mapCategoryToNavItem);
 });
 </script>
 
 <template>
   <div>
-    <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Speisekarte</h2>
+    <h2 class="text-3xl md:text-4xl mb-3 pb-2">Speisekarte</h2>
     <UNavigationMenu
       variant="link"
       orientation="vertical"

package/app/components/Navigation/MobileTop.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useNavigation } from "~/composables/useNavigation";
+
+const { menuCardMenu } = useNavigation(true);
+</script>
+
+<template>
+  <UNavigationMenu
+    class="lg:hidden"
+    orientation="horizontal"
+    :items="menuCardMenu"
+    :ui="{
+      list: 'overflow-x-auto',
+      item: 'flex-shrink-0',
+    }"
+  >
+    <template #list-leading>
+      <UIcon name="i-lucide-chevron-left" class="size-8" />
+    </template>
+    <template #list-trailing>
+      <UIcon name="i-lucide-chevron-right" class="size-8" />
+    </template>
+  </UNavigationMenu>
+</template>

package/app/composables/useNavigation.ts

@@ -4,6 +4,10 @@ import type { Schemas } from "#shopware";
 
 export function useNavigation(withChildren: boolean | undefined) {
   const { apiClient } = useShopwareContext();
+  const config = useRuntimeConfig();
+  const menuCategoryId = computed(
+    () => config.public.shopBite.menuCategoryId ?? "main-navigation",
+  );
 
   const criteria = encodeForQuery({
     includes: {
@@ -77,10 +81,36 @@ export function useNavigation(withChildren: boolean | undefined) {
     return footerNavigation.value?.map(mapCategoryToMenuItem);
   });
 
+  const { data: menuCardNavigation } = useAsyncData(
+    "menu-category",
+    async () => {
+      const response = await apiClient.invoke(
+        "readNavigationGet get /navigation/{activeId}/{rootId}",
+        {
+          query: { _criteria: criteria },
+          pathParams: {
+            activeId: "main-navigation",
+            rootId: menuCategoryId.value,
+          },
+        },
+      );
+
+      return response.data;
+    },
+  );
+
+  const menuCardMenu = computed<NavigationMenuItem[]>(() => {
+    if (!menuCardNavigation.value) return [];
+
+    return menuCardNavigation.value?.map(mapCategoryToMenuItem);
+  });
+
   return {
     mainNavigation,
     mainMenu,
     footerNavigation,
     footerMenu,
+    menuCardNavigation,
+    menuCardMenu,
   };
 }

package/app/composables/useNavigationSearch.ts

@@ -0,0 +1,68 @@
+import { useSessionContext, useShopwareContext } from "#imports";
+import type { Schemas } from "#shopware";
+import { encodeForQuery } from "@shopware/api-client/helpers";
+
+export type UseNavigationSearchReturn = {
+  /**
+   * Get {@link SeoUrl} entity for given path
+   * @example resolvePath("/my-category/my-product") or resolvePath("/") for home page
+   */
+  resolvePath(path: string): Promise<Schemas["SeoUrl"] | null>;
+};
+
+/**
+ * Composable to get search for SeoUrl entity for given path.
+ * @public
+ * @category Navigation & Routing
+ */
+export function useNavigationSearch(): UseNavigationSearchReturn {
+  const { apiClient } = useShopwareContext();
+  const { sessionContext } = useSessionContext();
+
+  async function resolvePath(path: string): Promise<Schemas["SeoUrl"] | null> {
+    if (path === "/") {
+      // please ignore optional chaining for salesChannel object as it's always present (type definition issue)
+      const categoryId =
+        sessionContext.value?.salesChannel?.navigationCategoryId;
+
+      return {
+        routeName: "frontend.navigation.page",
+        foreignKey: categoryId,
+      } as Schemas["SeoUrl"];
+    }
+
+    const isTechnicalUrl =
+      path.startsWith("/navigation/") ||
+      path.startsWith("/detail/") ||
+      path.startsWith("/landingPage/");
+
+    // remove leading slash in case of seo url or remove trailing slash in case of technical url
+    const normalizedPath = isTechnicalUrl
+      ? path.endsWith("/")
+        ? path.slice(0, -1)
+        : path
+      : path.substring(1);
+
+    const criteria = encodeForQuery({
+      filter: [
+        {
+          type: "equals",
+          field: isTechnicalUrl ? "pathInfo" : "seoPathInfo",
+          value: normalizedPath,
+        },
+      ],
+    });
+
+    const seoResult = await apiClient.invoke("readSeoUrlGet get /seo-url", {
+      query: {
+        _criteria: criteria,
+      },
+    });
+
+    return seoResult.data.elements?.[0] ?? null;
+  }
+
+  return {
+    resolvePath,
+  };
+}

package/app/layouts/{listing2.vue → listing.vue}

@@ -3,7 +3,7 @@
 <template>
   <UPage>
     <div class="sticky top-16 left-0 z-20 w-full backdrop-blur-md rounded-md">
-      <NavigationMobileTop2 :should-skip-first-level="true" />
+      <NavigationMobileTop />
     </div>
     <slot />
   </UPage>

package/app/pages/kontakt.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import ContactForm from "~/components/Contact/Form.vue";
+const config = useRuntimeConfig();
+
+if (config.public.shopBite.feature.contactForm !== true) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: "Page not found",
+    fatal: true,
+  });
+}
+</script>
+
+<template>
+  <UPageSection
+    title="Sie haben eine Frage oder Anregung?Wir freuen uns auf Ihre Nachricht."
+    description="Bitte beachten Sie, dass wir Tischreservierung oder Tischstornierung nur telefonisch entgegennehmen können."
+    icon="i-lucide-mail"
+    orientation="horizontal"
+  >
+    <ContactForm />
+  </UPageSection>
+</template>

package/app/pages/speisekarte/[...all].vue

@@ -2,8 +2,9 @@
 import type { Schemas } from "#shopware";
 
 definePageMeta({
-  layout: "listing2",
+  layout: "listing",
 });
+
 const { clearBreadcrumbs } = useBreadcrumbs();
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();

package/nuxt.config.ts

@@ -55,9 +55,11 @@ export default defineNuxtConfig({
     geoapifyApiKey: "",
     public: {
       shopBite: {
+        menuCategoryId: "",
         feature: {
           multiChannel: "",
           secureKey: "",
+          contactForm: false,
         },
       },
       site: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.14.4",
+  "version": "1.16.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [

package/test/nuxt/ContactForm.test.ts

@@ -0,0 +1,187 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import ContactForm from "~/components/Contact/Form.vue";
+
+const { mockInvoke } = vi.hoisted(() => {
+  return {
+    mockInvoke: vi.fn(),
+  };
+});
+
+mockNuxtImport("useShopwareContext", () => () => ({
+  apiClient: {
+    invoke: mockInvoke,
+  },
+}));
+
+mockNuxtImport("useSalutations", () => () => ({
+  getSalutations: ref([
+    { id: "1", displayName: "Herr" },
+    { id: "2", displayName: "Frau" },
+  ]),
+}));
+
+const mockToastAdd = vi.fn();
+mockNuxtImport("useToast", () => () => ({
+  add: mockToastAdd,
+}));
+
+describe("ContactForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("submits the form and shows success message component with custom individualSuccessMessage", async () => {
+    const customMessage = "Vielen Dank für deine Nachricht!";
+    mockInvoke.mockResolvedValueOnce({
+      data: {
+        individualSuccessMessage: customMessage,
+        apiAlias: "contact_form_result",
+      },
+    });
+
+    const wrapper = await mountSuspended(ContactForm);
+
+    const validData = {
+      salutationId: "1",
+      firstName: "Max",
+      lastName: "Mustermann",
+      email: "max@example.com",
+      phone: "01234 567890",
+      subject: "Frage zum Produkt",
+      comment: "Ich habe eine Frage zu Ihrem Produkt.",
+    };
+
+    await (wrapper.vm as any).onSubmit({ data: validData });
+
+    expect(mockInvoke).toHaveBeenCalled();
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        description: customMessage,
+        color: "success",
+      }),
+    );
+
+    // Verify submitted state
+    expect((wrapper.vm as any).submitted).toBe(true);
+    expect((wrapper.vm as any).successMessage).toBe(customMessage);
+
+    // Wait for DOM update
+    await nextTick();
+
+    // Check if success message is displayed in the template
+    expect(wrapper.text()).toContain(customMessage);
+    expect(wrapper.text()).toContain("Weiteres Formular senden");
+    expect(wrapper.find("form").exists()).toBe(false);
+
+    // Click on "Weiteres Formular senden"
+    await wrapper.find("button").trigger("click");
+    expect((wrapper.vm as any).submitted).toBe(false);
+
+    await nextTick();
+    expect(wrapper.find("form").exists()).toBe(true);
+  });
+
+  it("submits the form and shows default success message if individualSuccessMessage is empty", async () => {
+    mockInvoke.mockResolvedValueOnce({
+      data: {
+        individualSuccessMessage: "",
+        apiAlias: "contact_form_result",
+      },
+    });
+
+    const wrapper = await mountSuspended(ContactForm);
+
+    const validData = {
+      salutationId: "1",
+      firstName: "Max",
+      lastName: "Mustermann",
+      email: "max@example.com",
+      phone: "01234 567890",
+      subject: "Frage zum Produkt",
+      comment: "Ich habe eine Frage zu Ihrem Produkt.",
+    };
+
+    await (wrapper.vm as any).onSubmit({ data: validData });
+
+    const defaultMessage = "Deine Nachricht wurde erfolgreich versendet.";
+    expect((wrapper.vm as any).successMessage).toBe(defaultMessage);
+
+    await nextTick();
+    expect(wrapper.text()).toContain(defaultMessage);
+  });
+
+  it("submits the form with only mandatory fields", async () => {
+    mockInvoke.mockResolvedValueOnce({
+      data: {
+        individualSuccessMessage: "",
+        apiAlias: "contact_form_result",
+      },
+    });
+
+    const wrapper = await mountSuspended(ContactForm);
+
+    const mandatoryDataOnly = {
+      email: "test@example.com",
+      subject: "Nur Betreff",
+      comment: "Dies ist ein Test mit nur Pflichtfeldern.",
+    };
+
+    await (wrapper.vm as any).onSubmit({ data: mandatoryDataOnly });
+
+    expect(mockInvoke).toHaveBeenCalledWith(
+      "sendContactMail post /contact-form",
+      {
+        body: expect.objectContaining({
+          email: "test@example.com",
+          subject: "Nur Betreff",
+          comment: "Dies ist ein Test mit nur Pflichtfeldern.",
+        }),
+      },
+    );
+
+    expect((wrapper.vm as any).submitted).toBe(true);
+  });
+
+  it("shows error toast when submission fails", async () => {
+    mockInvoke.mockRejectedValueOnce(new Error("Network error"));
+
+    const wrapper = await mountSuspended(ContactForm);
+
+    const validData = {
+      salutationId: "2",
+      firstName: "Erika",
+      lastName: "Musterfrau",
+      email: "erika@example.com",
+      phone: "09876 54321",
+      subject: "Supportanfrage",
+      comment: "Bitte um Unterstützung.",
+    };
+
+    await (wrapper.vm as any).onSubmit({ data: validData });
+
+    expect(mockInvoke).toHaveBeenCalled();
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Fehler!",
+        color: "error",
+      }),
+    );
+  });
+
+  it("does not call API but marks form as submitted when honeypot is filled", async () => {
+    mockInvoke.mockClear();
+    mockToastAdd.mockClear();
+    const wrapper = await mountSuspended(ContactForm);
+    const botData = {
+      email: "bot@example.com",
+      subject: "Bot request",
+      comment: "This is spam.",
+      hp: "I am a bot",
+    };
+    await (wrapper.vm as any).onSubmit({ data: botData });
+    expect(mockInvoke).not.toHaveBeenCalled();
+    expect((wrapper.vm as any).submitted).toBe(true);
+  });
+});

package/app/components/Navigation/MobileTop2.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
-import type { NavigationMenuItem } from "@nuxt/ui";
-import type { Schemas } from "#shopware";
-
-type Category = Schemas["Category"];
-
-const props = withDefaults(
-  defineProps<{
-    shouldSkipFirstLevel?: boolean;
-  }>(),
-  {
-    shouldSkipFirstLevel: false,
-  },
-);
-
-const { mainNavigation } = useNavigation(true);
-
-const navItems = computed<NavigationMenuItem[]>(() => {
-  const elements = mainNavigation.value ?? [];
-
-  const mapCategoryRecursively = (category: Category): NavigationMenuItem => {
-    const hasChildren = (category.children?.length ?? 0) > 0;
-
-    return {
-      label: category.translated?.name ?? "",
-      to: hasChildren ? undefined : category.seoUrl,
-      children: hasChildren
-        ? category.children!.map(mapCategoryRecursively)
-        : undefined,
-    };
-  };
-
-  if (props.shouldSkipFirstLevel) {
-    return elements
-      .flatMap((item: Category) => item.children ?? [])
-      .map(mapCategoryRecursively);
-  }
-
-  return elements.map(mapCategoryRecursively);
-});
-</script>
-
-<template>
-  <UNavigationMenu
-    class="lg:hidden"
-    orientation="horizontal"
-    :items="navItems"
-    :ui="{
-      list: 'overflow-x-auto',
-      item: 'flex-shrink-0',
-    }"
-  >
-    <template #list-leading>
-      <UIcon name="i-lucide-chevron-left" class="size-8" />
-    </template>
-    <template #list-trailing>
-      <UIcon name="i-lucide-chevron-right" class="size-8" />
-    </template>
-  </UNavigationMenu>
-</template>