@shopbite-de/storefront 1.14.4 → 1.15.0

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/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/nuxt.config.ts

@@ -58,6 +58,7 @@ export default defineNuxtConfig({
         feature: {
           multiChannel: "",
           secureKey: "",
+          contactForm: false,
         },
       },
       site: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.14.4",
+  "version": "1.15.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);
+  });
+});