@shopbite-de/storefront 1.12.0 → 1.14.3

package/.github/workflows/build.yaml

@@ -66,7 +66,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.29.3
+          version: 10.30.1
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

package/app/app.vue

@@ -26,18 +26,17 @@ const { isClosedHoliday, refresh: refreshHolidays } = useHolidays();
 
 await Promise.all([refreshBusinessHours(), refreshHolidays()]);
 
-// Initialize session context
-const { data: sessionContextData } = await useAsyncData(
-  "session-context",
-  async () => {
-    const response = await apiClient.invoke("readContext get /context");
-    return response.data as Schemas["SalesChannelContext"];
-  },
-);
+const sessionContextData = ref<Schemas["SalesChannelContext"]>();
 
-if (sessionContextData.value) {
-  useSessionContext(sessionContextData.value);
-}
+const contextResponse = await apiClient
+  .invoke("readContext get /context")
+  .catch((error) => {
+    console.error("Error fetching session context data:", error);
+    return { data: undefined };
+  });
+
+sessionContextData.value = contextResponse.data;
+useSessionContext(sessionContextData.value);
 
 // Toast configuration
 const TOAST_CONFIG = {

package/app/components/Address/Detail.vue

@@ -1,22 +1,51 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
 
-const props = defineProps<{
+defineProps<{
   address: Schemas["CustomerAddress"] | undefined | null;
+  withEditButton?: boolean;
 }>();
 
-const { address } = toRefs(props);
+const emit = defineEmits<{
+  "update:address": [address: Schemas["CustomerAddress"]];
+}>();
+
+const editMode = ref(false);
+
+function onSubmit(updatedAddress: Schemas["CustomerAddress"] | undefined) {
+  if (!updatedAddress) return;
+
+  emit("update:address", updatedAddress);
+  editMode.value = false;
+}
 </script>
 
 <template>
-  <div v-if="address">
-    <div>{{ address.firstName }} {{ address.lastName }}</div>
-    <div>{{ address.phoneNumber }}</div>
-    <div>{{ address.company }}</div>
-    <div>{{ address.department }}</div>
-    <div>{{ address.additionalAddressLine1 }}</div>
-    <div>{{ address.additionalAddressLine2 }}</div>
-    <div>{{ address.street }}</div>
-    <div>{{ address.zipcode }} {{ address.city }}</div>
+  <div v-if="address" class="flex flex-col gap-2">
+    <div v-if="!editMode" class="flex flex-col gap-2">
+      <div>{{ address.firstName }} {{ address.lastName }}</div>
+      <div>{{ address.phoneNumber }}</div>
+      <div v-if="address.company">{{ address.company }}</div>
+      <div v-if="address.department">{{ address.department }}</div>
+      <div v-if="address.additionalAddressLine1">
+        {{ address.additionalAddressLine1 }}
+      </div>
+      <div v-if="address.additionalAddressLine2">
+        {{ address.additionalAddressLine2 }}
+      </div>
+      <div>{{ address.street }}</div>
+      <div>{{ address.zipcode }} {{ address.city }}</div>
+      <UButton
+        v-if="withEditButton"
+        variant="subtle"
+        icon="i-lucide-pen"
+        label="Bearbeiten"
+        block
+        @click="editMode = true"
+      />
+    </div>
+    <div v-else>
+      <AddressForm :address="address" @submit-success="onSubmit" />
+    </div>
   </div>
 </template>

package/app/components/Address/Fields.vue

@@ -109,7 +109,7 @@ defineExpose({
     >
       <template #title>
         An diese Adresse können wir leider nicht liefern.
-        <ULink to="/unternehmen/zahlung-und-versand">Weitere Infos.</ULink>
+        <ULink to="/zahlung-und-versand">Weitere Infos.</ULink>
       </template>
     </UAlert>
 

package/app/components/Address/Form.vue

@@ -10,23 +10,21 @@ const props = defineProps<{
   address?: Schemas["CustomerAddress"] | undefined;
 }>();
 
-const { address } = toRefs(props);
-
+const config = useRuntimeConfig();
 const { updateCustomerAddress, createCustomerAddress } = useAddress();
 
 const state = reactive({
-  id: address.value.id,
-  accountType: "privat",
-  firstName: address.value.firstName ?? undefined,
-  lastName: address.value.lastName ?? undefined,
-  company: address.value.company ?? undefined,
-  department: address.value.department ?? undefined,
-  additionalAddressLine1: address.value.additionalAddressLine1 ?? undefined,
-  phoneNumber: address.value.phoneNumber ?? undefined,
-  street: address.value.street ?? undefined,
-  zipcode: address.value.zipcode ?? undefined,
-  city: address.value.city ?? undefined,
-  countryId: "018d9f162ade709b9ccc92929b44d236",
+  id: props.address?.id,
+  firstName: props.address?.firstName ?? undefined,
+  lastName: props.address?.lastName ?? undefined,
+  company: props.address?.company ?? undefined,
+  department: props.address?.department ?? undefined,
+  additionalAddressLine1: props.address?.additionalAddressLine1 ?? undefined,
+  phoneNumber: props.address?.phoneNumber ?? undefined,
+  street: props.address?.street ?? undefined,
+  zipcode: props.address?.zipcode ?? undefined,
+  city: props.address?.city ?? undefined,
+  countryId: config.public.site.countryId,
 });
 
 const schema = computed(() => createAddressSchema(state));
@@ -34,23 +32,33 @@ const schema = computed(() => createAddressSchema(state));
 const toast = useToast();
 
 async function onSubmit(event: FormSubmitEvent<AddressSchema>) {
-  if (event.data.id) {
-    await updateCustomerAddress(event.data);
-  } else {
-    await createCustomerAddress(event.data);
+  try {
+    let response: undefined | Schemas["CustomerAddress"] = undefined;
+    if (event.data.id) {
+      response = await updateCustomerAddress(event.data);
+    } else {
+      response = await createCustomerAddress(event.data);
+    }
+
+    toast.add({
+      title: "Erfolgreich gespeichert",
+      color: "success",
+    });
+    emit("submit-success", response);
+  } catch (error) {
+    console.error("Address save failed:", error);
+    toast.add({
+      title: "Speichern fehlgeschlagen",
+      description: "Bitte versuchen Sie es erneut.",
+      color: "error",
+    });
   }
-
-  toast.add({
-    title: "Erfolgreich gespeichert",
-    color: "success",
-  });
-  emit("submit-success", event.data);
 }
 
 const accountType = ref("privat");
 
 const emit = defineEmits<{
-  "submit-success": [data: AddressSchema];
+  "submit-success": [data: Schemas["CustomerAddress"]];
 }>();
 </script>
 

package/app/components/Category/Breadcrumb.vue

@@ -40,7 +40,7 @@ const { data } = await useAsyncData(cacheKey, async () => {
 });
 
 const items = computed<BreadcrumbItem[]>(() => {
-  if (!data.value) return [];
+  if (!data.value) return [{ label: "Kategorie", to: "#" }];
   return data.value?.map((item: Schemas["Breadcrumb"]) => {
     return {
       label: item.name,

package/app/components/Category/Listing.vue

@@ -58,13 +58,7 @@ const {
   defaultSearchCriteria: searchCriteria,
 });
 
-const { search: categorySearch } = useCategorySearch();
-
-const categoryCacheKey = computed(() => `category-${categoryId.value}`);
-
-const { data: category } = await useAsyncData(categoryCacheKey, async () => {
-  return await categorySearch(categoryId.value);
-});
+const { category } = useCategory(categoryId);
 
 useCategorySeo(category);
 

package/app/components/Checkout/LoginOrRegister.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TabsItem } from "@nuxt/ui";
 
-const { refreshUser } = useUser();
 const items = [
   {
     label: "Daten erfassen",
@@ -18,7 +17,6 @@ const toast = useToast();
 const { mergeWishlistProducts } = useWishlist();
 
 async function handleLoginSuccess() {
-  await refreshUser();
   mergeWishlistProducts();
   toast.add({
     title: "Wilkommen!",

package/app/components/Checkout/PaymentAndDelivery.vue

@@ -89,7 +89,7 @@ watch(
           <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"
+            to="/zahlung-und-versand"
             size="md"
             variant="ghost"
             icon="i-lucide-circle-question-mark"
@@ -106,7 +106,7 @@ watch(
           <UIcon name="i-lucide-car" class="size-8" />
           <h2 class="text-2xl text-blackish my-8">Versandarten</h2>
           <UButton
-            to="/unternehmen/zahlung-und-versand"
+            to="/zahlung-und-versand"
             size="md"
             variant="ghost"
             icon="i-lucide-circle-question-mark"

package/app/components/Checkout/Summary.vue

@@ -2,10 +2,10 @@
 import QuickView from "~/components/Cart/QuickView.vue";
 import { useIntervalFn } from "@vueuse/core";
 
-const { selectedPaymentMethod, selectedShippingMethod } = useCheckout();
-const { createOrder } = useCheckout();
+const { createOrder, selectedPaymentMethod, selectedShippingMethod } =
+  useCheckout();
 const { refreshCart } = useCart();
-const { isLoggedIn, isGuestSession } = useUser();
+const { isLoggedIn, isGuestSession, refreshUser } = useUser();
 const { isCheckoutEnabled, refresh } = useShopBiteConfig();
 const { trackOrder } = useTrackEvent();
 
@@ -13,6 +13,14 @@ const toast = useToast();
 
 onMounted(() => {
   refresh();
+  refreshUser({
+    associations: {
+      defaultShippingAddress: {},
+      defaultBillingAddress: {},
+      activeShippingAddress: {},
+      activeBillingAddress: {},
+    },
+  });
 });
 
 watch(isCheckoutEnabled, () => console.log(isCheckoutEnabled.value));
@@ -40,9 +48,16 @@ const customerDataAvailable = computed<boolean>(
   () => isLoggedIn.value || isGuestSession.value,
 );
 
+const shippingAndPaymentSet = computed(
+  () => selectedPaymentMethod.value && selectedShippingMethod.value,
+);
+
 const isValidToProceed = computed(
   () =>
-    customerDataAvailable.value && isCheckoutEnabled.value && isValidTime.value,
+    customerDataAvailable.value &&
+    isCheckoutEnabled.value &&
+    isValidTime.value &&
+    shippingAndPaymentSet.value,
 );
 
 const selectedDeliveryTime = ref("");

package/app/components/Footer.vue

@@ -1,12 +1,33 @@
 <script setup lang="ts">
-const { data: navigationData } = await useAsyncData("navigation:footer", () =>
-  queryCollection("navigation").first(),
-);
+import { useNavigation } from "~/composables/useNavigation";
+import type {
+  FooterColumn,
+  FooterColumnLink,
+  NavigationMenuItem,
+} from "@nuxt/ui";
+
+const { footerMenu } = useNavigation(true);
 
-const columns = computed(() => {
-  if (!navigationData.value?.footer.columns) return [];
-  return navigationData.value.footer.columns;
+const menuItemToFooterColumnLink = (
+  item: NavigationMenuItem,
+): FooterColumnLink => ({
+  label: item.label ?? "",
+  to: item.to as string | undefined,
+  target: item.target as string | undefined,
+  icon: item.icon,
 });
+
+const menuItemsToFooterColumns = (
+  items: NavigationMenuItem[],
+): FooterColumn[] =>
+  items.map((item) => ({
+    label: item.label ?? "",
+    children: item.children?.map(menuItemToFooterColumnLink) ?? [],
+  }));
+
+const footerColumns = computed<FooterColumn[]>(() =>
+  menuItemsToFooterColumns(footerMenu.value),
+);
 </script>
 
 <template>
@@ -15,7 +36,7 @@ const columns = computed(() => {
   <UFooter :ui="{ top: 'border-b border-default' }">
     <template #top>
       <UContainer>
-        <UFooterColumns :columns="columns" />
+        <UFooterColumns :columns="footerColumns" />
       </UContainer>
     </template>
 
@@ -29,15 +50,15 @@ const columns = computed(() => {
       </NuxtLink>
     </template>
 
-    <p v-if="navigationData?.footer.text" class="text-muted text-sm">
-      {{ navigationData.footer.text }}
+    <p class="text-muted text-sm">
+      Alle Preise inkl. gesetzlicher Mehrwertsteuer zzgl. Versandkosten, wenn
+      nicht anders beschrieben
     </p>
 
     <template #right>
-      <UColorModeButton v-if="navigationData?.footer.withColorModeSwitch" />
+      <UColorModeButton />
 
       <UButton
-        v-if="navigationData?.footer.withGithubLink"
         to="https://github.com/shopbite-de/storefront"
         target="_blank"
         icon="i-simple-icons-github"

package/app/components/Header/Body.vue

@@ -1,36 +1,24 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui";
+import { useNavigation } from "~/composables/useNavigation";
 
-const route = useRoute();
+const config = useRuntimeConfig();
 
-const { data: navigationData } = useAsyncData("navigation", () =>
-  queryCollection("navigation").first(),
+const multiChannelEnabled = computed(
+  () => config.public.shopBite.feature.multiChannel === "true",
 );
 
-const navi = computed<NavigationMenuItem[]>(() => {
-  if (!navigationData.value?.main) return [];
-
-  return navigationData.value.main.map((item) => ({
-    label: item.label,
-    icon: item.icon,
-    to: item.to,
-    target: item.target,
-    active:
-      item.to === "/"
-        ? route.path.length === 1
-        : route.path.startsWith(item.to),
-  }));
-});
+console.log(multiChannelEnabled.value);
+const { mainMenu } = useNavigation(false);
 </script>
 
 <template>
   <UNavigationMenu
     color="primary"
-    :items="navi"
+    :items="mainMenu"
     orientation="vertical"
     class="-mx-2.5"
   />
-  <div class="my-4">
+  <div v-if="multiChannelEnabled" class="my-4">
     <SalesChannelSwitch />
   </div>
 </template>

package/app/components/Header/Right.vue

@@ -3,9 +3,10 @@ import { useUser } from "@shopware/composables";
 import type { DropdownMenuItem } from "@nuxt/ui";
 
 const cartQuickViewOpen = ref(false);
-const { count } = useCart();
+const { count: cartCount } = useCart();
+const { count: wishListCount } = useWishlist();
 const { isCheckoutEnabled } = useShopBiteConfig();
-const { isLoggedIn, isGuestSession, user, logout } = useUser();
+const { isLoggedIn, isGuestSession, logout } = useUser();
 const toast = useToast();
 
 const logoutHandler = () => {
@@ -17,50 +18,58 @@ const logoutHandler = () => {
   });
 };
 
-const { data: navigationData } = await useAsyncData("navigation:right", () =>
-  queryCollection("navigation").first(),
-);
-
-const accountHoverText = computed(() => {
-  return isLoggedIn.value || isGuestSession.value
-    ? `${user.value?.firstName} ${user.value?.lastName}`
-    : "Hallo";
-});
-
-const loggedInDropDown = computed<DropdownMenuItem[][]>(() => {
-  if (!navigationData.value?.account.loggedIn) return [];
-
-  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[][]>(() => {
-  if (!navigationData.value?.account.loggedOut) return [];
-
-  return navigationData.value.account.loggedOut.map((group) =>
-    group.map((item) => ({
-      label: item.label,
-      type: item.type,
-      icon: item.icon,
-      to: item.to,
-    })),
-  );
+const dropDownMenu = computed<DropdownMenuItem[][]>(() => {
+  if (isLoggedIn.value) {
+    return [
+      [
+        {
+          label: "Mein Konto",
+          type: "label",
+        },
+        {
+          label: "Übersicht",
+          icon: "i-lucide-user",
+          to: "/konto",
+        },
+        {
+          label: "Bestellungen",
+          icon: "i-lucide-pizza",
+          to: "/konto/bestellungen",
+        },
+        {
+          label: "Adressen",
+          icon: "i-lucide-house",
+          to: "/konto/adressen",
+        },
+      ],
+      [
+        {
+          label: "Abmelden",
+          icon: "i-lucide-log-out",
+          onSelect: () => logoutHandler(),
+        },
+      ],
+    ];
+  } else {
+    return [
+      [
+        {
+          label: "Mein Konto",
+          type: "label",
+        },
+        {
+          label: "Anmelden",
+          icon: "i-lucide-user",
+          to: "/anmelden",
+        },
+        {
+          label: "Registrieren",
+          icon: "i-lucide-user-plus",
+          to: "/registrierung",
+        },
+      ],
+    ];
+  }
 });
 </script>
 
@@ -73,9 +82,7 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
     icon="i-lucide-phone"
     aria-label="Anrufen"
   />
-  <UDropdownMenu
-    :items="isLoggedIn || isGuestSession ? loggedInDropDown : loggedOutDropDown"
-  >
+  <UDropdownMenu :items="dropDownMenu">
     <UChip v-if="isLoggedIn || isGuestSession" size="3xl" text="✓">
       <UButton
         aria-label="Konto Dropdown öffnen"
@@ -89,29 +96,42 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
       aria-label="Konto Dropdown öffnen"
       icon="i-lucide-user"
       color="neutral"
-      variant="outline"
+      variant="ghost"
     />
   </UDropdownMenu>
+  <div>
+    <UChip :text="wishListCount" size="3xl">
+      <UButton
+        aria-label="Zur Merkliste"
+        color="neutral"
+        variant="ghost"
+        to="/merkliste"
+        icon="i-lucide-heart"
+      />
+    </UChip>
+  </div>
   <UDrawer
     v-if="isCheckoutEnabled"
     v-model:open="cartQuickViewOpen"
     title="Warenkorb"
     direction="right"
   >
-    <UChip :text="count" size="3xl">
+    <UChip :text="cartCount" size="3xl">
       <UButton
         aria-label="Zum Warenkorb"
         color="neutral"
-        variant="outline"
-        icon="i-lucide-shopping-cart"
+        variant="ghost"
+        icon="i-lucide-shopping-bag"
       />
     </UChip>
 
     <template #header>
-      <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">
-        <UIcon name="i-lucide-shopping-cart" class="size-8" color="primary" />
-        Warenkorb
-      </h2>
+      <div class="h-full flex flex-col justify-center">
+        <h2 class="flex items-center gap-2 text-3xl md:text-4xl mt-8 mb-3 pb-2">
+          <UIcon name="i-lucide-shopping-bag" class="size-8" color="primary" />
+          Warenkorb
+        </h2>
+      </div>
     </template>
     <template #body>
       <CartQuickView
@@ -122,5 +142,3 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
     </template>
   </UDrawer>
 </template>
-
-<style scoped></style>

package/app/components/Header.vue

@@ -1,26 +1,7 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui";
+import { useNavigation } from "~/composables/useNavigation";
 
-const route = useRoute();
-
-const { data: navigationData } = await useAsyncData("navigation", () =>
-  queryCollection("navigation").first(),
-);
-
-const navi = computed<NavigationMenuItem[]>(() => {
-  if (!navigationData.value?.main) return [];
-
-  return navigationData.value.main.map((item) => ({
-    label: item.label,
-    icon: item.icon,
-    to: item.to,
-    target: item.target,
-    active:
-      item.to === "/"
-        ? route.path.length === 1
-        : route.path.startsWith(item.to),
-  }));
-});
+const { mainMenu } = useNavigation(false);
 
 const loginSlide = ref(false);
 </script>
@@ -31,7 +12,7 @@ const loginSlide = ref(false);
       <HeaderTitle />
     </template>
 
-    <UNavigationMenu color="primary" variant="pill" :items="navi" />
+    <UNavigationMenu color="primary" variant="pill" :items="mainMenu" />
 
     <template #right>
       <HeaderRight />