@shopbite-de/storefront 1.5.3 → 1.6.1

package/app/components/User/RegistrationForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { createRegistrationSchema } from "~/validation/registrationSchema";
 import type { RegistrationSchema } from "~/validation/registrationSchema";
+import { ApiClientError } from "@shopware/api-client";
 import type { FormSubmitEvent } from "@nuxt/ui";
 
 const config = useRuntimeConfig();
@@ -18,38 +19,40 @@ watch(isLoggedIn, (isLoggedIn) => {
 
 const state = reactive({
   accountType: "private",
-  salutationId: undefined,
-  firstName: undefined,
-  lastName: undefined,
-  email: undefined,
+  salutationId: "",
+  firstName: "",
+  lastName: "",
+  email: "",
   guest: true,
-  password: undefined,
-  passwordConfirm: undefined,
-  acceptedDataProtection: true,
+  password: "",
+  passwordConfirm: "",
+  acceptedDataProtection: false,
   isShippingAddressDifferent: false,
   storefrontUrl: config.public.shopware.devStorefrontUrl,
   billingAddress: {
-    company: undefined,
-    department: undefined,
-    salutationId: undefined,
-    firstName: undefined,
-    lastName: undefined,
-    phoneNumber: undefined,
-    street: undefined,
-    zipcode: undefined,
-    city: undefined,
+    company: "",
+    department: "",
+    salutationId: "",
+    firstName: "",
+    lastName: "",
+    phoneNumber: "",
+    additionalAddressLine1: "",
+    street: "",
+    zipcode: "",
+    city: "",
     countryId: config.public.site.countryId,
   },
   shippingAddress: {
-    company: undefined,
-    department: undefined,
-    salutationId: undefined,
-    firstName: undefined,
-    lastName: undefined,
-    phoneNumber: undefined,
-    street: undefined,
-    zipcode: undefined,
-    city: undefined,
+    company: "",
+    department: "",
+    salutationId: "",
+    firstName: "",
+    lastName: "",
+    phoneNumber: "",
+    additionalAddressLine1: "",
+    street: "",
+    zipcode: "",
+    city: "",
     countryId: config.public.site.countryId,
   },
 });
@@ -58,9 +61,37 @@ const schema = computed(() => createRegistrationSchema(state));
 
 const toast = useToast();
 
+const billingAddressFields = ref();
+const shippingAddressFields = ref();
+
 async function onSubmit(event: FormSubmitEvent<RegistrationSchema>) {
   const registrationData = { ...event.data };
 
+  // Check for address corrections
+  // Only check if correction is not already shown (user might have ignored it)
+  let billingCorrectionFound = false;
+  if (!billingAddressFields.value?.showCorrection) {
+    billingCorrectionFound = await billingAddressFields.value?.checkAddress();
+  }
+
+  let shippingCorrectionFound = false;
+  if (
+    state.isShippingAddressDifferent &&
+    !shippingAddressFields.value?.showCorrection
+  ) {
+    shippingCorrectionFound = await shippingAddressFields.value?.checkAddress();
+  }
+
+  if (billingCorrectionFound || shippingCorrectionFound) {
+    toast.add({
+      title: "Adresskorrektur vorgeschlagen",
+      description:
+        "Bitte überprüfen Sie die vorgeschlagene Adresskorrektur, bevor Sie fortfahren.",
+      color: "info",
+    });
+    return;
+  }
+
   if (
     !registrationData.billingAddress.firstName &&
     registrationData.firstName
@@ -76,7 +107,13 @@ async function onSubmit(event: FormSubmitEvent<RegistrationSchema>) {
     delete registrationData.shippingAddress;
   }
 
+  if (registrationData.guest) {
+    delete registrationData.password;
+    delete registrationData.passwordConfirm;
+  }
+
   try {
+    // @ts-expect-error - password is required in the API type but not for guests
     await register(registrationData);
 
     toast.add({
@@ -86,9 +123,19 @@ async function onSubmit(event: FormSubmitEvent<RegistrationSchema>) {
     emit("registration-success", registrationData);
   } catch (error) {
     console.error("Registration failed:", error);
+    let description = "Bitte versuchen Sie es erneut.";
+    if (error instanceof ApiClientError) {
+      const errors = error.details?.errors;
+      if (Array.isArray(errors) && errors.length > 0) {
+        description = errors
+          .map((e) => e.detail || e.title)
+          .filter(Boolean)
+          .join("\n");
+      }
+    }
     toast.add({
       title: "Registrierung fehlgeschlagen",
-      description: "Bitte versuchen Sie es erneut.",
+      description,
       color: "error",
     });
   }
@@ -101,15 +148,13 @@ const accountTypes = ref([
   },
   {
     label: "Geschäftskunde",
-    value: "commercial",
+    value: "business",
   },
 ]);
 
 const emit = defineEmits<{
   "registration-success": [data: RegistrationSchema];
 }>();
-
-const allowedCities = ref(["Obertshausen", "Lämmerspiel"]);
 </script>
 
 <template>
@@ -118,7 +163,7 @@ const allowedCities = ref(["Obertshausen", "Lämmerspiel"]);
     :state="state"
     class="space-y-4"
     @submit="onSubmit"
-    @error="(error) => console.log('Form validation error:', error)"
+    @error="(error: any) => console.log('Form validation error:', error)"
   >
     <UFormField name="accountType">
       <USelect
@@ -151,14 +196,6 @@ const allowedCities = ref(["Obertshausen", "Lämmerspiel"]);
       <UInput v-model="state.email" class="w-full" />
     </UFormField>
 
-    <UFormField label="Telefon" name="billingAddress.phoneNumber" required>
-      <UInput
-        v-model="state.billingAddress.phoneNumber"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
     <UFormField v-if="!state.guest" label="Password" name="password">
       <UInput v-model="state.password" type="password" class="w-full" />
     </UFormField>
@@ -180,70 +217,14 @@ const allowedCities = ref(["Obertshausen", "Lämmerspiel"]);
       "
     />
 
-    <UFormField
-      v-if="state.accountType === 'commercial'"
-      label="Unternehmen"
-      name="billingAddress.company"
-    >
-      <UInput
-        v-model="state.billingAddress.company"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      v-if="state.accountType === 'commercial'"
-      label="Abteilung"
-      name="billingAddress.department"
-    >
-      <UInput
-        v-model="state.billingAddress.department"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      label="Straße und Hausnr."
-      name="billingAddress.street"
-      required
-    >
-      <UInput
-        v-model="state.billingAddress.street"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      v-if="state.isShippingAddressDifferent"
-      label="Postleitzahl"
-      name="billingAddress.zipcode"
-    >
-      <UInput
-        v-model="state.billingAddress.zipcode"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField label="Ort" name="billingAddress.city" required>
-      <USelect
-        v-if="!state.isShippingAddressDifferent"
-        v-model="state.billingAddress.city"
-        :items="allowedCities"
-        class="w-full"
-      />
-      <UInput
-        v-else
-        v-model="state.billingAddress.city"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
+    <AddressFields
+      ref="billingAddressFields"
+      v-model="state.billingAddress"
+      prefix="billingAddress"
+      :account-type="state.accountType"
+    />
 
-    <UFormField name="guest">
+    <UFormField name="isShippingAddressDifferent">
       <UCheckbox
         v-model="state.isShippingAddressDifferent"
         label="Rechnungsadresse weicht von Lieferadresse ab"
@@ -251,87 +232,31 @@ const allowedCities = ref(["Obertshausen", "Lämmerspiel"]);
       />
     </UFormField>
 
-    <USeparator
-      v-if="state.isShippingAddressDifferent"
-      color="primary"
-      label="Lieferadresse"
-    />
-
-    <UFormField
-      v-if="
-        state.accountType === 'commercial' && state.isShippingAddressDifferent
-      "
-      label="Unternehmen"
-      name="shippingAddress.company"
-    >
-      <UInput
-        v-model="state.shippingAddress.company"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      v-if="
-        state.accountType === 'commercial' && state.isShippingAddressDifferent
-      "
-      label="Abteilung"
-      name="billingAddress.department"
-    >
-      <UInput
-        v-model="state.shippingAddress.department"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      v-if="state.isShippingAddressDifferent"
-      label="Vorname"
-      name="shippingAddress.firstName"
-      required
-    >
-      <UInput
-        v-model="state.shippingAddress.firstName"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      v-if="state.isShippingAddressDifferent"
-      label="Nachname"
-      name="shippingAddress.lastName"
-    >
-      <UInput
-        v-model="state.shippingAddress.lastName"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
-
-    <UFormField
-      v-if="state.isShippingAddressDifferent"
-      label="Straße und Hausnr."
-      name="shippingAddress.street"
-    >
-      <UInput
-        v-model="state.shippingAddress.street"
-        type="text"
-        class="w-full"
-      />
-    </UFormField>
+    <template v-if="state.isShippingAddressDifferent">
+      <USeparator color="primary" label="Lieferadresse" />
 
-    <UFormField
-      v-if="state.isShippingAddressDifferent"
-      label="Ort"
-      name="shippingAddress.city"
-    >
-      <USelect
-        v-model="state.shippingAddress.city"
-        :items="allowedCities"
-        class="w-full"
+      <AddressFields
+        ref="shippingAddressFields"
+        v-model="state.shippingAddress"
+        prefix="shippingAddress"
+        :account-type="state.accountType"
+        show-names
+        is-shipping
       />
+    </template>
+
+    <UFormField name="acceptedDataProtection">
+      <UCheckbox v-model="state.acceptedDataProtection" class="w-full">
+        <template #label>
+          <span>
+            Ich habe die
+            <ULink to="/unternehmen/datenschutz">
+              Datenschutzbestimmungen
+            </ULink>
+            gelesen und akzeptiere diese.
+          </span>
+        </template>
+      </UCheckbox>
     </UFormField>
 
     <UButton block type="submit">Speichern</UButton>

package/app/composables/useAddressAutocomplete.ts

@@ -0,0 +1,84 @@
+export interface AddressSuggestion {
+  street: string;
+  city: string;
+  zipcode: string;
+  label: string;
+}
+
+interface GeoapifyAddressProperties {
+  street?: string;
+  housenumber?: string;
+  name?: string;
+  city?: string;
+  town?: string;
+  village?: string;
+  postcode?: string;
+  formatted?: string;
+}
+
+interface GeoapifyFeature {
+  properties: GeoapifyAddressProperties;
+}
+
+interface GeoapifyResponse {
+  features: GeoapifyFeature[];
+}
+
+export function useAddressAutocomplete() {
+  const { boundingBoxCoordinates, validCities } = useValidCitiesForDelivery();
+
+  async function getSuggestions(text: string): Promise<AddressSuggestion[]> {
+    if (!text || text.length < 3) {
+      return [];
+    }
+
+    try {
+      const query: Record<string, string | number> = {
+        text,
+        lang: "de",
+        limit: 5,
+      };
+
+      if (boundingBoxCoordinates.value) {
+        query.filter = `rect:${boundingBoxCoordinates.value}`;
+      }
+
+      const { data } = await useFetch<GeoapifyResponse>(
+        "/api/address/autocomplete",
+        {
+          query,
+        },
+      );
+
+      if (!data.value?.features) {
+        return [];
+      }
+
+      return data.value.features
+        .map((feature: GeoapifyFeature) => {
+          const props = feature.properties;
+          return {
+            street: props.street
+              ? `${props.street}${props.housenumber ? " " + props.housenumber : ""}`
+              : props.name || "",
+            city: props.city || "",
+            zipcode: props.postcode || "",
+            label: props.formatted || "",
+          };
+        })
+        .filter((suggestion: AddressSuggestion) => {
+          if (validCities.value.length === 0) return true;
+          return validCities.value.some(
+            (city) => city.toLowerCase() === suggestion.city.toLowerCase(),
+          );
+        });
+    } catch (error) {
+      console.error("Error fetching address suggestions:", error);
+      return [];
+    }
+  }
+
+  return {
+    getSuggestions,
+  };
+}

package/app/composables/useAddressValidation.ts

@@ -0,0 +1,95 @@
+import { ref, computed, watch, toValue, onUnmounted } from "vue";
+import type { Ref, ComputedRef } from "vue";
+import type { AddressSchema } from "~/validation/registrationSchema";
+import type { AddressSuggestion } from "~/composables/useAddressAutocomplete";
+
+export function useAddressValidation(
+  model: Ref<AddressSchema>,
+  options: {
+    isShipping?: Ref<boolean> | ComputedRef<boolean> | boolean;
+    getSuggestions: (query: string) => Promise<AddressSuggestion[] | undefined>;
+    validCities: Ref<string[]>;
+  },
+) {
+  const { isShipping = ref(true), getSuggestions, validCities } = options;
+
+  const showCorrection = ref(false);
+  const correction = ref<AddressSuggestion | null>(null);
+
+  async function checkAddress() {
+    const m = toValue(model);
+    if (m.street) {
+      const searchText = `${m.street}, ${m.zipcode} ${m.city}`;
+      const results = await getSuggestions(searchText);
+      if (results && results.length > 0) {
+        const bestMatch = results[0];
+        // Check if it's different enough to suggest correction
+        if (
+          bestMatch &&
+          (bestMatch.street.toLowerCase() !== m.street.toLowerCase() ||
+            bestMatch.city.toLowerCase() !== m.city.toLowerCase() ||
+            bestMatch.zipcode !== m.zipcode)
+        ) {
+          correction.value = bestMatch;
+          showCorrection.value = true;
+          return true;
+        }
+      }
+    }
+    showCorrection.value = false;
+    correction.value = null;
+    return false;
+  }
+
+  const isInvalidCity = computed(() => {
+    if (!toValue(isShipping)) {
+      return false;
+    }
+    const m = toValue(model);
+    if (!m.city || validCities.value.length === 0) {
+      return false;
+    }
+    return !validCities.value.some(
+      (city) => city.toLowerCase() === m.city.toLowerCase(),
+    );
+  });
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  watch(
+    () => ({ ...model.value }),
+    () => {
+      showCorrection.value = false;
+      correction.value = null;
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        if (model.value.street) {
+          checkAddress();
+        }
+      }, 500);
+    },
+    { deep: true },
+  );
+
+  onUnmounted(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
+
+  function applyCorrection() {
+    if (correction.value) {
+      model.value.street = correction.value.street;
+      model.value.city = correction.value.city;
+      model.value.zipcode = correction.value.zipcode;
+      showCorrection.value = false;
+    }
+  }
+
+  return {
+    showCorrection,
+    correction,
+    isInvalidCity,
+    checkAddress,
+    applyCorrection,
+  };
+}

package/app/composables/useValidCitiesForDelivery.ts

@@ -0,0 +1,12 @@
+export function useValidCitiesForDelivery() {
+  const validCities = computed(() => ["Obertshausen", "Lämmerspiel", "Hausen"]);
+
+  const boundingBoxCoordinates = computed(
+    () => "8.822251,50.055026,8.899077,50.104327",
+  );
+
+  return {
+    validCities,
+    boundingBoxCoordinates,
+  };
+}

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

@@ -0,0 +1,28 @@
+<script setup>
+const route = useRoute();
+const { data: page, error } = await useAsyncData(
+  `landingpages-${route.path}`,
+  () => {
+    return queryCollection("landingpages").path(route.path).first();
+  },
+);
+
+if (error.value || !page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `Page ${route.path} not found!`,
+    fatal: true,
+  });
+}
+
+useSeoMeta({
+  title: page.value?.title,
+  description: page.value?.description,
+});
+</script>
+
+<template>
+  <UContainer>
+    <ContentRenderer v-if="page" :value="page" class="content my-8" />
+  </UContainer>
+</template>

package/app/pages/index.vue

@@ -13,8 +13,12 @@ if (!page.value) {
 useSeoMeta({
   title: page.value.seo?.title || page.value.title,
   ogTitle: page.value.seo?.title || page.value.title,
+  twitterTitle: page.value.seo?.title || page.value.title,
   description: page.value.seo?.description || page.value.description,
   ogDescription: page.value.seo?.description || page.value.description,
+  twitterDescription: page.value.seo?.description || page.value.description,
+  ogImage: page.value.seo?.image,
+  twitterImage: page.value.seo?.image,
 });
 </script>
 <template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+definePageMeta({
+  layout: "listing2",
+});
+const { clearBreadcrumbs } = useBreadcrumbs();
+const { resolvePath } = useNavigationSearch();
+const route = useRoute();
+const routePath = route.path;
+
+const { data: seoResult, error } = await useAsyncData(
+  `cmsResponse${routePath}`,
+  async () => {
+    // For client links if the history state contains seo url information we can omit the api call
+    if (import.meta.client) {
+      if (history.state?.routeName) {
+        return {
+          routeName: history.state?.routeName,
+          foreignKey: history.state?.foreignKey,
+        };
+      }
+    }
+    const seoUrl = await resolvePath(routePath);
+
+    if (!seoUrl?.foreignKey) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `No data fetched from API for ${routePath}`,
+      });
+    }
+
+    return seoUrl;
+  },
+);
+
+if (error.value) {
+  throw error.value;
+}
+
+const { foreignKey } = useNavigationContext(
+  seoResult as Ref<Schemas["SeoUrl"]>,
+);
+
+onBeforeRouteLeave(() => {
+  clearBreadcrumbs();
+});
+</script>
+
+<template>
+  <CategoryListing :id="foreignKey" />
+</template>