@shopbite-de/storefront 1.5.3 → 1.6.0

package/app/validation/registrationSchema.ts

@@ -1,14 +1,47 @@
 // schemas/registrationSchema.ts
 import * as z from "zod";
 
+const baseAddressSchema = z.object({
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
+  company: z.string().optional(),
+  department: z.string().optional(),
+  salutationId: z.string().optional(),
+  street: z
+    .string()
+    .min(1, { message: "Bitte geben Sie Ihre Straße und Hausnummer an." })
+    .refine((val) => /[0-9]/.test(val), {
+      message: "Bitte geben Sie Ihre Straße und Hausnummer an.",
+    }),
+  additionalAddressLine1: z.string().optional(),
+  zipcode: z.string().optional(),
+  city: z.string().min(1, {
+    message: "Bitte geben Sie Ihren Ort an.",
+  }),
+  countryId: z.string().min(1, { message: "Bitte wählen Sie ein Land aus." }),
+  phoneNumber: z.string().min(7, {
+    message: "Bitte geben Sie eine gültige Telefonnummer an (mind. 7 Zeichen).",
+  }),
+});
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const createRegistrationSchema = (state: any) =>
   z.object({
-    accountType: z.string(),
-    email: z.string().email("Invalid email"),
-    firstName: z.string().min(1),
-    lastName: z.string().min(1),
+    accountType: z.enum(["private", "business"], {
+      errorMap: () => ({ message: "Bitte wählen Sie einen Kontotyp aus." }),
+    }),
+    email: z.string().email("Bitte geben Sie eine gültige E-Mail-Adresse ein."),
+    firstName: z
+      .string()
+      .min(1, { message: "Bitte geben Sie Ihren Vornamen an." }),
+    lastName: z
+      .string()
+      .min(1, { message: "Bitte geben Sie Ihren Nachnamen an." }),
     guest: z.boolean(),
+    acceptedDataProtection: z.boolean().refine((val) => val, {
+      message: "Bitte akzeptieren Sie die Datenschutzbestimmungen.",
+    }),
+    storefrontUrl: z.string().optional(),
     password: z
       .string()
       .optional()
@@ -17,7 +50,7 @@ export const createRegistrationSchema = (state: any) =>
           return state.guest || (val && val.length >= 8);
         },
         {
-          message: "Password muss mindestens 8 Zeichen lang sein.",
+          message: "Das Passwort muss mindestens 8 Zeichen lang sein.",
         },
       ),
     passwordConfirm: z
@@ -28,129 +61,77 @@ export const createRegistrationSchema = (state: any) =>
           return state.guest || val === state.password;
         },
         {
-          message: "Password stimmt nicht überein.",
+          message: "Die Passwörter stimmen nicht überein.",
         },
       ),
-    billingAddress: z.object({
-      firstName: z.string().min(1).optional(),
-      lastName: z.string().min(1).optional(),
-      company: z
-        .string()
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              state.accountType !== "commercial" ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Als Geschäftskunde ist dieses Feld pflicht.",
-          },
-        ),
-      department: z.string().optional(),
-      street: z.string().min(1),
-      zipcode: z.string().min(1).optional(),
-      city: z.string().min(1, {
-        message: "Bitte geben Sie den Ort an.",
-      }),
-      countryId: z.string().min(1),
-      phoneNumber: z.string().min(7),
-    }),
-    shippingAddress: z.object({
-      firstName: z
-        .string()
-        .min(1)
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              !state.isShippingAddressDifferent ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Erforderlich.",
-          },
-        ),
-      lastName: z
-        .string()
-        .min(1)
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              !state.isShippingAddressDifferent ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Erforderlich.",
-          },
-        ),
-      company: z
-        .string()
-        .min(1)
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              !state.isShippingAddressDifferent ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Erforderlich.",
-          },
-        ),
-      department: z.string().optional(),
-      phoneNumber: z
-        .string()
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              !state.isShippingAddressDifferent ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Erforderlich.",
-          },
-        ),
-      street: z
-        .string()
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              !state.isShippingAddressDifferent ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Erforderlich.",
-          },
-        ),
-      zipcode: z.string().min(1).optional(),
-      city: z
-        .string()
-        .optional()
-        .refine(
-          (val) => {
-            return (
-              !state.isShippingAddressDifferent ||
-              (val !== undefined && val !== "")
-            );
-          },
-          {
-            message: "Erforderlich.",
-          },
-        ),
-      countryId: z.string().min(1),
-    }),
+    billingAddress: baseAddressSchema.refine(
+      (data) => {
+        return (
+          state.accountType !== "business" ||
+          (data.company !== undefined && data.company !== "")
+        );
+      },
+      {
+        message: "Als Geschäftskunde ist der Firmenname ein Pflichtfeld.",
+        path: ["company"],
+      },
+    ),
+    shippingAddress: baseAddressSchema
+      .extend({
+        firstName: z.string().optional(),
+        lastName: z.string().optional(),
+        company: z.string().optional(),
+        phoneNumber: z.string().optional(),
+        street: z.string().optional(),
+        city: z.string().optional(),
+        zipcode: z.string().optional(),
+        countryId: z.string().optional(),
+      })
+      .superRefine((data, ctx) => {
+        if (!state.isShippingAddressDifferent) return;
+
+        const requiredFields: (keyof typeof data)[] = [
+          "firstName",
+          "lastName",
+          "company",
+          "phoneNumber",
+          "street",
+          "city",
+        ];
+
+        const fieldMessages: Record<string, string> = {
+          firstName: "Bitte geben Sie den Vornamen für die Lieferadresse an.",
+          lastName: "Bitte geben Sie den Nachnamen für die Lieferadresse an.",
+          company: "Bitte geben Sie den Firmennamen für die Lieferadresse an.",
+          phoneNumber:
+            "Bitte geben Sie eine Telefonnummer für die Lieferadresse an.",
+          street: "Bitte geben Sie die Straße für die Lieferadresse an.",
+          city: "Bitte geben Sie den Ort für die Lieferadresse an.",
+        };
+
+        requiredFields.forEach((field) => {
+          if (field === "company" && state.accountType !== "business") return;
+
+          if (!data[field] || data[field] === "") {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: fieldMessages[field] || "Dieses Feld ist erforderlich.",
+              path: [field],
+            });
+          } else if (field === "street" && !/[0-9]/.test(data.street || "")) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: "Bitte geben Sie Ihre Straße und Hausnummer an.",
+              path: ["street"],
+            });
+          }
+        });
+      })
+      .optional(),
   });
 
 export type RegistrationSchema = z.infer<
   ReturnType<typeof createRegistrationSchema>
 >;
+
+export type AddressSchema = z.infer<typeof baseAddressSchema>;

package/content/unternehmen/zahlung-und-versand.md

@@ -0,0 +1,29 @@
+# Zahlungs- und Lieferinformationen
+
+### Liefermethoden
+
+Wir bieten Ihnen zwei Möglichkeiten, Ihre Bestellung zu erhalten:
+
+- **Lieferung:** Wir bringen Ihre Bestellung direkt zu Ihnen nach Hause (beachten Sie bitte unsere Liefergebiete).
+- **Abholung:** Sie können Ihre Bestellung auch direkt bei uns abholen (Kantstraße 6, 63179 Obertshausen).
+
+### Zahlungsmöglichkeiten
+
+- **Bei Lieferung:** Die Zahlung erfolgt ausschließlich **bar**.
+- **Bei Abholung:** Sie können bar oder elektronisch mit **EC-Karte** bezahlen.
+
+### Lieferbedingungen
+
+Wir liefern ausschließlich in folgende Gebiete:
+
+- **63179 Obertshausen** (Stadtteile Obertshausen und Hausen)
+- **63165 Mühlheim** (Stadtteil Lämmerspiel)
+
+### Lieferkosten
+
+- **Ab 15,00 € Bestellwert:** Lieferung frei Haus (versandkostenfrei).
+- **Unter 15,00 € Bestellwert:** Wir erheben eine Lieferpauschale von **2,00 €**.
+
+### Lieferzeit
+
+Die Lieferzeit beträgt in der Regel ca. **30 Minuten**. Bitte beachten Sie, dass es zu Stoßzeiten zu Abweichungen kommen kann.

package/nuxt.config.ts

@@ -45,6 +45,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     shopware: {},
     apiClientConfig: {},
+    geoapifyApiKey: "",
     public: {
       site: {
         name: "ShopBite",

package/package.json

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

package/server/api/address/autocomplete.get.ts

@@ -0,0 +1,33 @@
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const apiKey = config.geoapifyApiKey;
+  const query = getQuery(event);
+
+  if (!apiKey) {
+    return { features: [] };
+  }
+
+  const { text, lang, limit, filter } = query;
+
+  if (!text) {
+    return { features: [] };
+  }
+
+  const geoapifyUrl = new URL(
+    "https://api.geoapify.com/v1/geocode/autocomplete",
+  );
+  geoapifyUrl.searchParams.set("apiKey", apiKey);
+  geoapifyUrl.searchParams.set("text", text as string);
+  if (lang) geoapifyUrl.searchParams.set("lang", lang as string);
+  if (limit) geoapifyUrl.searchParams.set("limit", limit as string);
+  if (filter) geoapifyUrl.searchParams.set("filter", filter as string);
+
+  try {
+    return await $fetch(geoapifyUrl.toString());
+  } catch (error) {
+    throw createError({
+      statusCode: error.response?.status || 500,
+      statusMessage: error.message || "Error fetching address suggestions",
+    });
+  }
+});

package/test/nuxt/AddressFields.test.ts

@@ -0,0 +1,284 @@
+import { describe, it, expect, vi } from "vitest";
+import { reactive, ref } from "vue";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import Fields from "~/components/Address/Fields.vue";
+
+const { mockGetSuggestions } = vi.hoisted(() => ({
+  mockGetSuggestions: vi.fn().mockResolvedValue([]),
+}));
+
+mockNuxtImport("useAddressAutocomplete", () => () => ({
+  getSuggestions: mockGetSuggestions,
+}));
+
+describe("AddressFields", () => {
+  const defaultProps = {
+    modelValue: {
+      firstName: "",
+      lastName: "",
+      street: "",
+      zipcode: "",
+      city: "",
+      phoneNumber: "",
+    },
+    prefix: "billingAddress",
+  };
+
+  it("renders basic address fields", async () => {
+    const wrapper = await mountSuspended(Fields, {
+      props: defaultProps,
+    });
+
+    expect(wrapper.find('input[name="billingAddress.street"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('input[name="billingAddress.zipcode"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('input[name="billingAddress.city"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('input[name="billingAddress.phoneNumber"]').exists(),
+    ).toBe(true);
+  });
+
+  it("renders name fields when showNames is true", async () => {
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        showNames: true,
+      },
+    });
+
+    expect(
+      wrapper.find('input[name="billingAddress.firstName"]').exists(),
+    ).toBe(true);
+    expect(wrapper.find('input[name="billingAddress.lastName"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it("does not render name fields when showNames is false", async () => {
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        showNames: false,
+      },
+    });
+
+    expect(
+      wrapper.find('input[name="billingAddress.firstName"]').exists(),
+    ).toBe(false);
+    expect(wrapper.find('input[name="billingAddress.lastName"]').exists()).toBe(
+      false,
+    );
+  });
+
+  it("renders business fields when accountType is business", async () => {
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        accountType: "business",
+      },
+    });
+
+    expect(wrapper.find('input[name="billingAddress.company"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('input[name="billingAddress.department"]').exists(),
+    ).toBe(true);
+  });
+
+  it("updates modelValue when input changes", async () => {
+    const modelValue = reactive({
+      firstName: "",
+      lastName: "",
+      street: "",
+      zipcode: "",
+      city: "",
+      phoneNumber: "",
+    });
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+        "onUpdate:modelValue": (val: any) => Object.assign(modelValue, val),
+      },
+    });
+
+    await wrapper
+      .find('input[name="billingAddress.street"]')
+      .setValue("New Street");
+    expect(modelValue.street).toBe("New Street");
+  });
+
+  it("shows warning when an invalid city is selected for shipping address", async () => {
+    const modelValue = reactive({
+      firstName: "John",
+      lastName: "Doe",
+      street: "Main St 1",
+      zipcode: "12345",
+      city: "InvalidCity",
+      phoneNumber: "12345678",
+    });
+
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+        isShipping: true,
+      },
+    });
+
+    expect(wrapper.text()).toContain(
+      "An diese Adresse können wir leider nicht liefern.",
+    );
+  });
+
+  it("does not show warning for valid city in shipping address", async () => {
+    const modelValue = reactive({
+      firstName: "John",
+      lastName: "Doe",
+      street: "Main St 1",
+      zipcode: "63179",
+      city: "Obertshausen",
+      phoneNumber: "12345678",
+    });
+
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+        isShipping: true,
+      },
+    });
+
+    expect(wrapper.text()).not.toContain(
+      "An diese Adresse können wir leider nicht liefern.",
+    );
+  });
+
+  it("does not show warning for billing address even if city is 'invalid'", async () => {
+    const modelValue = reactive({
+      firstName: "John",
+      lastName: "Doe",
+      street: "Main St 1",
+      zipcode: "12345",
+      city: "InvalidCity",
+      phoneNumber: "12345678",
+    });
+
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+        isShipping: false,
+      },
+    });
+
+    expect(wrapper.text()).not.toContain(
+      "An diese Adresse können wir leider nicht liefern.",
+    );
+  });
+
+  it("shows correction automatically on input after debounce", async () => {
+    mockGetSuggestions.mockResolvedValue([
+      {
+        street: "Corrected Street 123",
+        city: "Corrected City",
+        zipcode: "54321",
+        label: "Corrected Street 123, 54321 Corrected City",
+      },
+    ]);
+
+    const modelValue = reactive({
+      firstName: "John",
+      lastName: "Doe",
+      street: "Musterstr 1",
+      zipcode: "12345",
+      city: "Musterstadt",
+      phoneNumber: "12345678",
+    });
+
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+      },
+    });
+
+    // Change input to trigger watch
+    await wrapper
+      .find('input[name="billingAddress.street"]')
+      .setValue("Musterstr 2");
+
+    // Wait for debounce and async check
+    await new Promise((resolve) => setTimeout(resolve, 600));
+
+    expect(wrapper.text()).toContain(
+      "Meinten Sie: Corrected Street 123, 54321 Corrected City?",
+    );
+  });
+
+  it("shows correction when checkAddress is called", async () => {
+    const modelValue = reactive({
+      firstName: "John",
+      lastName: "Doe",
+      street: "Musterstr 1",
+      zipcode: "12345",
+      city: "Musterstadt",
+      phoneNumber: "12345678",
+    });
+
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+      },
+    });
+
+    // Mock getSuggestions to return a correction
+    // Note: In a real test we might need to mock useAddressAutocomplete
+    // But let's see if we can just call the exposed method
+
+    // For this to work reliably in test, we might need to mock useAddressAutocomplete
+    // since it's used inside checkAddress
+  });
+
+  it("shows correction automatically on input after debounce even for short street names", async () => {
+    mockGetSuggestions.mockResolvedValueOnce([
+      {
+        street: "B 1",
+        city: "Berlin",
+        zipcode: "10115",
+        label: "B 1, 10115 Berlin",
+      },
+    ]);
+
+    const modelValue = reactive({
+      firstName: "John",
+      lastName: "Doe",
+      street: "",
+      zipcode: "10115",
+      city: "Berlin",
+      phoneNumber: "12345678",
+    });
+
+    const wrapper = await mountSuspended(Fields, {
+      props: {
+        ...defaultProps,
+        modelValue,
+      },
+    });
+
+    // Change input to trigger watch
+    await wrapper.find('input[name="billingAddress.street"]').setValue("B1");
+
+    // Wait for debounce and async check
+    await new Promise((resolve) => setTimeout(resolve, 600));
+
+    expect(wrapper.text()).toContain("Meinten Sie: B 1, 10115 Berlin?");
+  });
+});