@shopbite-de/storefront 1.5.2 → 1.6.0

package/.env.example

@@ -8,4 +8,6 @@ NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN="TOKEN"
 NUXT_PUBLIC_SHOPWARE_COUNTRY_ID=019a17a0f67b706a8ec9ead3059e12ba
 
 OPENAPI_ACCESS_KEY=key
-OPENAPI_JSON_URL="https://shopware.shopbite.net"
+OPENAPI_JSON_URL="https://shopware.shopbite.net"
+
+NUXT_GEOAPIFY_API_KEY=

package/app/components/Address/Fields.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { AddressSchema } from "~/validation/registrationSchema";
+
+const model = defineModel<AddressSchema>({ required: true });
+
+const props = defineProps<{
+  prefix: string;
+  accountType?: string;
+  showNames?: boolean;
+  isShipping?: boolean;
+}>();
+
+const { getSuggestions } = useAddressAutocomplete();
+const { validCities } = useValidCitiesForDelivery();
+
+const {
+  showCorrection,
+  correction,
+  isInvalidCity,
+  checkAddress,
+  applyCorrection,
+} = useAddressValidation(model, {
+  isShipping: props.isShipping,
+  getSuggestions,
+  validCities,
+});
+
+defineExpose({
+  checkAddress,
+  showCorrection,
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UFormField
+      v-if="accountType === 'business'"
+      label="Unternehmen"
+      :name="`${prefix}.company`"
+    >
+      <UInput v-model="model.company" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField
+      v-if="accountType === 'business'"
+      label="Abteilung"
+      :name="`${prefix}.department`"
+    >
+      <UInput v-model="model.department" type="text" class="w-full" />
+    </UFormField>
+
+    <div v-if="showNames" class="flex flex-row justify-between gap-4">
+      <UFormField
+        label="Vorname"
+        :name="`${prefix}.firstName`"
+        required
+        class="w-full"
+      >
+        <UInput v-model="model.firstName" type="text" class="w-full" />
+      </UFormField>
+
+      <UFormField
+        label="Nachname"
+        :name="`${prefix}.lastName`"
+        required
+        class="w-full"
+      >
+        <UInput v-model="model.lastName" type="text" class="w-full" />
+      </UFormField>
+    </div>
+
+    <UFormField label="Straße und Hausnr." :name="`${prefix}.street`" required>
+      <UInput v-model="model.street" type="text" class="w-full" />
+    </UFormField>
+
+    <div class="flex flex-row gap-4">
+      <UFormField label="PLZ" :name="`${prefix}.zipcode`" class="w-24">
+        <UInput v-model="model.zipcode" type="text" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Ort" :name="`${prefix}.city`" required class="flex-1">
+        <UInput v-model="model.city" type="text" class="w-full" />
+      </UFormField>
+    </div>
+
+    <div v-if="showCorrection" class="flex flex-col items-center gap-2">
+      <UAlert
+        color="info"
+        variant="soft"
+        icon="i-lucide-info"
+        :title="`Meinten Sie: ${correction?.label}?`"
+        class="flex-1"
+      />
+      <UButton
+        label="Korrigieren"
+        color="info"
+        variant="solid"
+        size="sm"
+        block
+        @click="applyCorrection"
+      />
+    </div>
+
+    <UAlert
+      v-if="isInvalidCity"
+      color="warning"
+      variant="soft"
+      icon="i-lucide-triangle-alert"
+    >
+      <template #title>
+        An diese Adresse können wir leider nicht liefern.
+        <ULink to="/unternehmen/zahlung-und-versand">Weitere Infos.</ULink>
+      </template>
+    </UAlert>
+
+    <UFormField label="Adresszusatz" :name="`${prefix}.additionalAddressLine1`">
+      <UInput
+        v-model="model.additionalAddressLine1"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Telefon" :name="`${prefix}.phoneNumber`" required>
+      <UInput v-model="model.phoneNumber" type="text" class="w-full" />
+    </UFormField>
+  </div>
+</template>

package/app/components/Checkout/PaymentAndDelivery.vue

@@ -41,43 +41,59 @@ const selectableShippingMethods = computed<RadioGroupItem[]>(() => {
   }));
 });
 
-const selectedPaymentMethodId = ref<RadioGroupValue>(
-  selectedPaymentMethod.value.id,
+const selectedPaymentMethodId = ref<RadioGroupValue | undefined>(
+  selectedPaymentMethod.value?.id,
 );
-const selectedShippingMethodId = ref<RadioGroupValue>(
-  selectedShippingMethod.value.id,
+const selectedShippingMethodId = ref<RadioGroupValue | undefined>(
+  selectedShippingMethod.value?.id,
 );
 
-watch(selectedPaymentMethodId, async (newValue: RadioGroupValue) => {
-  await setPaymentMethod({ id: newValue as string });
-  toast.add({
-    title: "Zahlart geändert",
-    description:
-      selectedPaymentMethod.value.distinguishableName + " ausgewählt",
-    color: "success",
-    progress: false,
-  });
-});
+watch(
+  selectedPaymentMethodId,
+  async (newValue: RadioGroupValue | undefined) => {
+    if (newValue === undefined) return;
+    if (selectedPaymentMethod.value === null) return;
+    await setPaymentMethod({ id: newValue as string });
+    toast.add({
+      title: "Zahlart geändert",
+      description:
+        selectedPaymentMethod.value.distinguishableName + " ausgewählt",
+      color: "success",
+      progress: false,
+    });
+  },
+);
 
-watch(selectedShippingMethodId, async (newValue: RadioGroupValue) => {
-  await setShippingMethod({ id: newValue as string });
-  await refreshCart();
-  toast.add({
-    title: "Versandart geändert",
-    description: selectedShippingMethod.value.name + " ausgewählt",
-    color: "success",
-    progress: false,
-  });
-});
+watch(
+  selectedShippingMethodId,
+  async (newValue: RadioGroupValue | undefined) => {
+    if (newValue === undefined) return;
+    if (selectedShippingMethod.value === null) return;
+    await setShippingMethod({ id: newValue as string });
+    await refreshCart();
+    toast.add({
+      title: "Versandart geändert",
+      description: selectedShippingMethod.value.name + " ausgewählt",
+      color: "success",
+      progress: false,
+    });
+  },
+);
 </script>
 
 <template>
   <UContainer>
-    <div class="flex flex-col md:flex-row justify-between">
-      <div>
+    <div class="flex flex-col md:flex-row justify-between gap-4">
+      <div class="basis-1/2">
         <div class="flex flex-row items-center gap-4">
           <UIcon name="i-lucide-badge-euro" class="size-8" />
           <h2 class="text-2xl text-blackish my-8">Zahlungsarten</h2>
+          <UButton
+            to="/unternehmen/zahlung-und-versand"
+            size="md"
+            variant="ghost"
+            icon="i-lucide-circle-question-mark"
+          />
         </div>
         <URadioGroup
           v-model="selectedPaymentMethodId"
@@ -85,10 +101,16 @@ watch(selectedShippingMethodId, async (newValue: RadioGroupValue) => {
           variant="card"
         />
       </div>
-      <div>
+      <div class="basis-1/2">
         <div class="flex flex-row items-center gap-4">
           <UIcon name="i-lucide-car" class="size-8" />
           <h2 class="text-2xl text-blackish my-8">Versandarten</h2>
+          <UButton
+            to="/unternehmen/zahlung-und-versand"
+            size="md"
+            variant="ghost"
+            icon="i-lucide-circle-question-mark"
+          />
         </div>
         <URadioGroup
           v-model="selectedShippingMethodId"

package/app/components/Header.vue

@@ -6,7 +6,7 @@ import { useUser } from "@shopware/composables";
 const route = useRoute();
 const toast = useToast();
 
-const { isLoggedIn, user, logout } = useUser();
+const { isLoggedIn, isGuestSession, user, logout } = useUser();
 const { isCheckoutEnabled } = useShopBiteConfig();
 const { count } = useCart();
 const runtimeConfig = useRuntimeConfig();
@@ -34,7 +34,7 @@ const navi = computed<NavigationMenuItem[]>(() => {
 });
 
 const accountHoverText = computed(() => {
-  return isLoggedIn.value
+  return isLoggedIn.value || isGuestSession.value
     ? `${user.value?.firstName} ${user.value?.lastName}`
     : "Hallo";
 });
@@ -51,15 +51,24 @@ const logoutHandler = () => {
 const loggedInDropDown = computed<DropdownMenuItem[][]>(() => {
   if (!navigationData.value?.account.loggedIn) return [];
 
-  return navigationData.value.account.loggedIn.map((group) =>
-    group.map((item) => ({
-      label: item.type === "label" ? accountHoverText.value : item.label,
-      type: item.type,
-      icon: item.icon,
-      to: item.to,
-      onSelect: item.action === "logout" ? logoutHandler : undefined,
-    })),
-  );
+  return navigationData.value.account.loggedIn
+    .map((group) =>
+      group
+        .filter((item) => {
+          if (isGuestSession.value) {
+            return item.type === "label" || item.action === "logout";
+          }
+          return true;
+        })
+        .map((item) => ({
+          label: item.type === "label" ? accountHoverText.value : item.label,
+          type: item.type,
+          icon: item.icon,
+          to: item.to,
+          onSelect: item.action === "logout" ? logoutHandler : undefined,
+        })),
+    )
+    .filter((group) => group.length > 0);
 });
 
 const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
@@ -103,8 +112,12 @@ const cartQuickViewOpen = ref(false);
         icon="i-lucide-phone"
         aria-label="Anrufen"
       />
-      <UDropdownMenu :items="isLoggedIn ? loggedInDropDown : loggedOutDropDown">
-        <UChip v-if="isLoggedIn" size="3xl" text="✓">
+      <UDropdownMenu
+        :items="
+          isLoggedIn || isGuestSession ? loggedInDropDown : loggedOutDropDown
+        "
+      >
+        <UChip v-if="isLoggedIn || isGuestSession" size="3xl" text="✓">
           <UButton icon="i-lucide-user" color="neutral" variant="outline" />
         </UChip>
         <UButton

package/app/components/User/LoginForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import * as z from "zod";
 import { useWishlist, useUser } from "@shopware/composables";
+import { ApiClientError } from "@shopware/api-client";
 import type { FormSubmitEvent } from "@nuxt/ui";
 
 const { isLoggedIn, login, user } = useUser();
@@ -55,17 +56,37 @@ const schema = z.object({
 type Schema = z.output<typeof schema>;
 
 async function onSubmit(payload: FormSubmitEvent<Schema>) {
-  await login({
-    username: payload.data.email,
-    password: payload.data.password,
-  });
-  toast.add({
-    title: "Hallo " + user.value.firstName + " " + user.value.lastName + "!",
-    description: "Erfolreich angemeldet.",
-    color: "success",
-  });
-  mergeWishlistProducts();
-  emit("login-success", payload.data.email);
+  try {
+    await login({
+      username: payload.data.email,
+      password: payload.data.password,
+    });
+    toast.add({
+      title:
+        "Hallo " + user.value?.firstName + " " + user.value?.lastName + "!",
+      description: "Erfolreich angemeldet.",
+      color: "success",
+    });
+    mergeWishlistProducts();
+    emit("login-success", payload.data.email);
+  } catch (error) {
+    console.error("Login failed:", error);
+    let description = "Bitte überprüfen Sie Ihre Zugangsdaten.";
+    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: "Login fehlgeschlagen",
+      description,
+      color: "error",
+    });
+  }
 }
 </script>