@shopbite-de/storefront 1.11.0 → 1.12.0

package/app/components/SalesChannelSwitch.vue

@@ -2,42 +2,68 @@
 import type { SelectMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 
+const { apiClient } = useShopwareContext();
+
 const config = useRuntimeConfig();
+
 const isMultiChannel = computed(
   () => !!config.public.shopBite.feature.multiChannel,
 );
+
 const storeUrl = computed(() => config.public.storeUrl);
 
-const { data: salesChannels, status } = await useFetch(
-  "/api/shopware/sales-channels",
+const { data: salesChannels, pending: status } = useAsyncData(
+  "multi-channel-group",
+  async () => {
+    const response = await apiClient.invoke(
+      "shopbite.multi-channel-group.get get /shopbite/multi-channel-group",
+    );
+
+    return response.data;
+  },
   {
-    key: "sales-channels",
-    transform: (data: Schemas["SalesChannel"][]) => {
-      const currentUrl = storeUrl.value;
-      return data?.map((channel) => {
-        const domains = channel.domains || [];
-        const matchingDomain =
-          currentUrl != null
-            ? domains.find((domain) => domain?.url === currentUrl)
-            : undefined;
-        const fallbackDomain = domains.find((domain) => !!domain?.url);
-        const domainUrl = matchingDomain?.url ?? fallbackDomain?.url ?? "";
-        return {
-          label: channel.translated.name ?? channel.name,
-          value: domainUrl,
-        };
-      });
-    },
-    lazy: true,
+    transform: (response: Schemas["MultiChannelGroupStruct"]) =>
+      transform(response),
   },
 );
 
+function transform(
+  multiChannelGroups: Schemas["MultiChannelGroupStruct"],
+): SelectMenuItem[] {
+  const group = multiChannelGroups.multiChannelGroup?.[0];
+  if (!group) return [];
+
+  const storeUrlValue = storeUrl.value;
+
+  const getBestDomainUrl = (
+    domains: Schemas["Domain"][] | undefined,
+    preferredUrl: string | null | undefined,
+  ): string => {
+    const safeDomains = domains ?? [];
+    const matchingDomain =
+      preferredUrl != null
+        ? safeDomains.find((domain) => domain?.url === preferredUrl)
+        : undefined;
+    const fallbackDomain = safeDomains.find((domain) => Boolean(domain?.url));
+    return matchingDomain?.url ?? fallbackDomain?.url ?? "";
+  };
+
+  const salesChannels = group.salesChannels ?? [];
+  return salesChannels.map((channel) => ({
+    label: channel.name,
+    value: getBestDomainUrl(channel.domains, storeUrlValue),
+  }));
+}
+
 const selectedStore = ref<SelectMenuItem>();
 
 watchEffect(() => {
-  if (salesChannels.value && storeUrl.value && !selectedStore.value) {
-    const matchingChannel = salesChannels.value.find(
-      (channel) => channel.value === storeUrl.value,
+  const scValue = (salesChannels as any)?.value as
+    | SelectMenuItem[]
+    | undefined;
+  if (Array.isArray(scValue) && storeUrl.value && !selectedStore.value) {
+    const matchingChannel = scValue.find(
+      (channel) => channel?.value === storeUrl.value,
     );
     if (matchingChannel) {
       selectedStore.value = matchingChannel;
@@ -57,7 +83,7 @@ watch(selectedStore, (newStore, oldStore) => {
     v-if="isMultiChannel"
     v-model="selectedStore"
     :items="salesChannels"
-    :loading="status === 'pending'"
+    :loading="status"
     icon="i-lucide-store"
   />
 </template>

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

@@ -48,5 +48,5 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
-  <CategoryListing :id="foreignKey" />
+  <CategoryListing v-if="foreignKey" :id="foreignKey" :key="foreignKey" />
 </template>

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

@@ -48,5 +48,5 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
-  <CategoryListing :id="foreignKey" />
+  <CategoryListing v-if="foreignKey" :id="foreignKey" :key="foreignKey" />
 </template>

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

@@ -48,5 +48,5 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
-  <CategoryListing :id="foreignKey" :key="foreignKey" />
+  <CategoryListing v-if="foreignKey" :id="foreignKey" :key="foreignKey" />
 </template>

package/content/navigation.yml

@@ -1,7 +1,7 @@
 main:
   - label: Speisekarte
     icon: i-lucide-utensils
-    to: /c/Pizza/
+    to: /speisekarte/
   - label: Routenplaner
     icon: i-lucide-map-pinned
     to: https://www.openstreetmap.org/directions?from=&to=50.080610%2C8.863783#map=19/50.080323/8.864079
@@ -48,8 +48,8 @@ footer:
           to: /agb
     - label: Top Kategorien
       children:
-        - label: Burger
-          to: /menu/burger/
+        - label: Pizza
+          to: /speisekarte/pizza/
     - label: Unternehmen
       children:
         - label: 'Tel: 06104 71427'

package/nuxt.config.ts

@@ -177,7 +177,6 @@ export default defineNuxtConfig({
       "@nuxt/content",
       "@nuxtjs/robots",
       "@vite-pwa/nuxt",
-      "@sentry/nuxt/module",
       "@nuxt/ui",
       "@nuxt/scripts",
       "@nuxt/test-utils/module",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -23,7 +23,7 @@
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.1.0",
     "@nuxtjs/robots": "^5.5.6",
-    "@sentry/nuxt": "^10.25.0",
+    "@sentry/nuxt": "^10.38.0",
     "@shopware/api-client": "^1.3.0",
     "@shopware/api-gen": "^1.3.3",
     "@shopware/composables": "^1.9.1",

package/server/api/shopware/sales-channels.get.ts

@@ -1,79 +0,0 @@
-import type { operations } from "@shopware/api-client/admin-api-types";
-import { createAdminAPIClient } from "@shopware/api-client";
-
-export default defineEventHandler(async () => {
-  const config = useRuntimeConfig();
-
-  // Get admin API credentials from runtime config
-  const adminEndpoint = config.shopware.adminEndpoint;
-  const adminClientId = config.shopware.adminClientId;
-  const adminClientSecret = config.shopware.adminClientSecret;
-
-  if (!adminEndpoint || !adminClientId || !adminClientSecret) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: "Shopware admin API credentials not configured",
-    });
-  }
-
-  try {
-    const adminApiClient = createAdminAPIClient<operations>({
-      baseURL: adminEndpoint,
-      credentials: {
-        grant_type: "client_credentials",
-        client_id: adminClientId,
-        client_secret: adminClientSecret,
-      },
-    });
-
-    const data = await adminApiClient.invoke(
-      "searchSalesChannel post /search/sales-channel",
-      {
-        body: {
-          includes: {
-            sales_channel: ["id", "translated", "name", "domains", "active"],
-            sales_channel_domain: ["url"],
-          },
-          associations: {
-            domains: {},
-          },
-          filter: [
-            {
-              field: "active",
-              type: "equals",
-              value: true,
-            },
-          ],
-        },
-      },
-    );
-
-    // Validate response data
-    if (!data || !data.data) {
-      throw createError({
-        statusCode: 500,
-        statusMessage: "Invalid response from Shopware API",
-      });
-    }
-
-    return data.data.data;
-  } catch (error) {
-    // Handle specific error cases
-    if (error && typeof error === "object" && "statusCode" in error) {
-      // Re-throw createError instances
-      throw error;
-    }
-
-    // Log the error for debugging
-    console.error("Failed to fetch sales channels:", error);
-
-    // Return a user-friendly error
-    throw createError({
-      statusCode: 503,
-      statusMessage: "Failed to fetch sales channels from Shopware",
-      data: {
-        originalError: error instanceof Error ? error.message : String(error),
-      },
-    });
-  }
-});

package/test/nuxt/SalesChannelSwitch.test.ts

@@ -1,201 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
-import SalesChannelSwitch from "~/components/SalesChannelSwitch.vue";
-import { ref } from "vue";
-
-// Mock window.location
-const mockWindowLocation = {
-  href: "",
-};
-
-// Mock the sales channels data that would be returned by useFetch
-const mockSalesChannels = [
-  {
-    label: "Main Store",
-    value: "https://main-store.example.com",
-  },
-  {
-    label: "Secondary Store",
-    value: "https://secondary-store.example.com",
-  },
-];
-
-// Use vi.hoisted to avoid hoisting issues
-const { mockUseFetch, mockRuntimeConfig } = vi.hoisted(() => ({
-  mockUseFetch: vi.fn(() => {
-    return {
-      data: ref(mockSalesChannels),
-      status: ref("success"),
-    };
-  }),
-  mockRuntimeConfig: {
-    public: {
-      shopBite: {
-        feature: {
-          multiChannel: true,
-        },
-      },
-      storeUrl: "https://main-store.example.com",
-    },
-  },
-}));
-
-// Set up the mocks at the top level
-mockNuxtImport("useRuntimeConfig", () => () => mockRuntimeConfig);
-mockNuxtImport("useFetch", () => mockUseFetch);
-
-describe("SalesChannelSwitch", () => {
-  beforeEach(() => {
-    // Reset window.location mock
-    mockWindowLocation.href = "";
-    global.window = { location: mockWindowLocation } as any;
-    vi.clearAllMocks();
-
-    // Reset default mock implementation for useFetch
-    mockUseFetch.mockImplementation(() => {
-      return {
-        data: ref(mockSalesChannels),
-        status: ref("success"),
-      };
-    });
-  });
-
-  it("should not render when multiChannel feature is disabled", async () => {
-    // Temporarily disable multiChannel
-    mockRuntimeConfig.public.shopBite.feature.multiChannel = false;
-
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    // Should not render the select menu
-    expect(component.findComponent({ name: "USelectMenu" }).exists()).toBe(
-      false,
-    );
-
-    // Re-enable for other tests
-    mockRuntimeConfig.public.shopBite.feature.multiChannel = true;
-  });
-
-  it("should render select menu when multiChannel feature is enabled", async () => {
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    // Should render the select menu
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-    expect(selectMenu.exists()).toBe(true);
-    expect(selectMenu.props("icon")).toBe("i-lucide-store");
-  });
-
-  it("should load and transform sales channels correctly", async () => {
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-    const items = selectMenu.props("items");
-
-    expect(items).toHaveLength(2);
-    expect(items[0]).toEqual({
-      label: "Main Store",
-      value: "https://main-store.example.com",
-    });
-    expect(items[1]).toEqual({
-      label: "Secondary Store",
-      value: "https://secondary-store.example.com",
-    });
-  });
-
-  it("should select the current store URL by default", async () => {
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-    const modelValue = selectMenu.props("modelValue");
-
-    expect(modelValue).toEqual({
-      label: "Main Store",
-      value: "https://main-store.example.com",
-    });
-  });
-
-  it("should show loading state when fetching data", async () => {
-    // Mock pending state
-    mockUseFetch.mockImplementationOnce(() => {
-      return {
-        data: ref(null),
-        status: ref("pending"),
-      };
-    });
-
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-    expect(selectMenu.props("loading")).toBe(true);
-  });
-
-  it("should redirect to new store URL when selection changes", async () => {
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-
-    // Change the selection
-    await selectMenu.setValue({
-      label: "Secondary Store",
-      value: "https://secondary-store.example.com",
-    });
-
-    // Should have redirected
-    expect(mockWindowLocation.href).toBe("https://secondary-store.example.com");
-  });
-
-  it("should not redirect on initial selection", async () => {
-    // Mock that no initial selection was made
-    mockRuntimeConfig.public.storeUrl = "https://unknown-store.example.com";
-
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    // Should not redirect immediately
-    expect(mockWindowLocation.href).toBe("");
-
-    // Restore original store URL
-    mockRuntimeConfig.public.storeUrl = "https://main-store.example.com";
-  });
-
-  it("should handle empty sales channels gracefully", async () => {
-    // Mock empty sales channels
-    mockUseFetch.mockImplementationOnce(() => {
-      return {
-        data: ref([]),
-        status: ref("success"),
-      };
-    });
-
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-    const items = selectMenu.props("items");
-
-    expect(items).toHaveLength(0);
-  });
-
-  it("should handle sales channels without domains", async () => {
-    const mockChannelsWithoutDomains = [
-      {
-        label: "Store Without Domain",
-        value: "",
-      },
-    ];
-
-    mockUseFetch.mockImplementationOnce(() => {
-      return {
-        data: ref(mockChannelsWithoutDomains),
-        status: ref("success"),
-      };
-    });
-
-    const component = await mountSuspended(SalesChannelSwitch);
-
-    const selectMenu = component.findComponent({ name: "USelectMenu" });
-    const items = selectMenu.props("items");
-
-    expect(items[0]).toEqual({
-      label: "Store Without Domain",
-      value: "",
-    });
-  });
-});