@shopbite-de/storefront 1.18.2 → 1.18.4

package/app/app.vue

@@ -89,14 +89,8 @@ if (import.meta.client) {
   }
 }
 
-const { refresh: refreshToppings } = useShopBiteConfig();
-
 onMounted(async () => {
-  await Promise.all([
-    refreshHolidays(),
-    refreshBusinessHours(),
-    refreshToppings(),
-  ]);
+  await Promise.all([refreshHolidays(), refreshBusinessHours()]);
   refreshCart();
   displayStoreStatus();
 });

package/app/components/Category/Listing.vue

@@ -159,61 +159,61 @@ const moreThanOneFilterAndOption = computed<boolean>(
               :items="getSortingOrders"
               placeholder="Sortierung"
             />
-            <UDrawer
-              v-if="moreThanOneFilterAndOption"
-              class="lg:hidden"
-              title="Filter"
-              direction="right"
-            >
-              <UButton
-                label="Filter"
-                icon="i-lucide-sliders-horizontal"
-                color="neutral"
-                variant="subtle"
-              />
+            <ClientOnly v-if="moreThanOneFilterAndOption">
+              <UDrawer class="lg:hidden" title="Filter" direction="right">
+                <UButton
+                  label="Filter"
+                  icon="i-lucide-sliders-horizontal"
+                  color="neutral"
+                  variant="subtle"
+                />
 
-              <template #body>
-                <div class="flex flex-col gap-4">
-                  <div
-                    v-for="filter in propertyFilters"
-                    :key="filter.id"
-                    class="flex flex-col gap-4"
-                  >
-                    <UCollapsible
-                      class="flex flex-col gap-2 w-48"
-                      :default-open="true"
+                <template #body>
+                  <div class="flex flex-col gap-4">
+                    <div
+                      v-for="filter in propertyFilters"
+                      :key="filter.id"
+                      class="flex flex-col gap-4"
                     >
-                      <UButton
-                        :label="filter.translated.name"
-                        color="neutral"
-                        variant="subtle"
-                        trailing-icon="i-lucide-chevron-down"
-                        block
-                        :ui="{
-                          trailingIcon:
-                            'group-data-[state=open]:rotate-180 transition-transform duration-200',
-                        }"
-                      />
-
-                      <template #content>
-                        <UCheckboxGroup
-                          v-model="selectedPropertyFilters"
-                          :items="filter.options"
-                          value-key="id"
-                          label-key="translated.name"
+                      <UCollapsible
+                        class="flex flex-col gap-2 w-48"
+                        :default-open="true"
+                      >
+                        <UButton
+                          :label="filter.translated.name"
+                          color="neutral"
+                          variant="subtle"
+                          trailing-icon="i-lucide-chevron-down"
+                          block
+                          :ui="{
+                            trailingIcon:
+                              'group-data-[state=open]:rotate-180 transition-transform duration-200',
+                          }"
                         />
-                      </template>
-                    </UCollapsible>
+
+                        <template #content>
+                          <UCheckboxGroup
+                            v-model="selectedPropertyFilters"
+                            :items="filter.options"
+                            value-key="id"
+                            label-key="translated.name"
+                          />
+                        </template>
+                      </UCollapsible>
+                    </div>
+                    <UButton
+                      label="Zurücksetzen"
+                      variant="outline"
+                      block
+                      @click="handleFilterRest"
+                    />
                   </div>
-                  <UButton
-                    label="Zurücksetzten"
-                    variant="outline"
-                    block
-                    @click="handleFilterRest"
-                  />
-                </div>
+                </template>
+              </UDrawer>
+              <template #fallback>
+                <USkeleton class="h-8 w-20 lg:hidden" />
               </template>
-            </UDrawer>
+            </ClientOnly>
           </div>
 
           <div
@@ -243,46 +243,64 @@ const moreThanOneFilterAndOption = computed<boolean>(
 
       <template #right>
         <UPageAside>
-          <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
-            <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
-            <div
-              v-for="filter in propertyFilters"
-              :key="filter.id"
-              class="flex flex-col gap-4"
-            >
-              <UCollapsible
-                class="flex flex-col gap-2 w-48"
-                :default-open="true"
+          <ClientOnly v-if="moreThanOneFilterAndOption">
+            <div class="flex flex-col gap-4">
+              <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
+              <div
+                v-for="filter in propertyFilters"
+                :key="filter.id"
+                class="flex flex-col gap-4"
               >
-                <UButton
-                  :label="filter.translated.name"
-                  color="neutral"
-                  variant="subtle"
-                  trailing-icon="i-lucide-chevron-down"
-                  block
-                  :ui="{
-                    trailingIcon:
-                      'group-data-[state=open]:rotate-180 transition-transform duration-200',
-                  }"
-                />
-
-                <template #content>
-                  <UCheckboxGroup
-                    v-model="selectedPropertyFilters"
-                    :items="filter.options"
-                    value-key="id"
-                    label-key="translated.name"
+                <UCollapsible
+                  class="flex flex-col gap-2 w-48"
+                  :default-open="true"
+                >
+                  <UButton
+                    :label="filter.translated.name"
+                    color="neutral"
+                    variant="subtle"
+                    trailing-icon="i-lucide-chevron-down"
+                    block
+                    :ui="{
+                      trailingIcon:
+                        'group-data-[state=open]:rotate-180 transition-transform duration-200',
+                    }"
                   />
-                </template>
-              </UCollapsible>
+
+                  <template #content>
+                    <UCheckboxGroup
+                      v-model="selectedPropertyFilters"
+                      :items="filter.options"
+                      value-key="id"
+                      label-key="translated.name"
+                    />
+                  </template>
+                </UCollapsible>
+              </div>
+              <UButton
+                label="Zurücksetzen"
+                variant="outline"
+                block
+                @click="handleFilterRest"
+              />
             </div>
-            <UButton
-              label="Zurücksetzten"
-              variant="outline"
-              block
-              @click="handleFilterRest"
-            />
-          </div>
+            <template #fallback>
+              <div class="flex flex-col gap-4">
+                <USkeleton class="h-9 w-20" />
+                <div class="flex flex-col gap-2">
+                  <USkeleton class="h-8 w-48" />
+                  <USkeleton class="h-4 w-36" />
+                  <USkeleton class="h-4 w-32" />
+                  <USkeleton class="h-4 w-40" />
+                </div>
+                <div class="flex flex-col gap-2">
+                  <USkeleton class="h-8 w-48" />
+                  <USkeleton class="h-4 w-36" />
+                  <USkeleton class="h-4 w-32" />
+                </div>
+              </div>
+            </template>
+          </ClientOnly>
         </UPageAside>
       </template>
     </UPage>

package/app/components/Header/Right.vue

@@ -110,7 +110,7 @@ const dropDownMenu = computed<DropdownMenuItem[][]>(() => {
       />
     </UChip>
   </div>
-  <UDrawer
+  <LazyUDrawer
     v-if="isCheckoutEnabled"
     v-model:open="cartQuickViewOpen"
     title="Warenkorb"
@@ -140,5 +140,5 @@ const dropDownMenu = computed<DropdownMenuItem[][]>(() => {
         @go-to-cart="cartQuickViewOpen = false"
       />
     </template>
-  </UDrawer>
+  </LazyUDrawer>
 </template>

package/app/components/ImageGallery.vue

@@ -26,19 +26,32 @@ defineProps<{
     :links="links"
   >
     <template #body>
-      <UCarousel
-        v-slot="{ item, index }"
-        arrows
-        :items="images"
-        class="w-full max-w-2xl mx-auto"
-      >
-        <img
-          :src="item.image"
-          :alt="item.alt"
-          :fetchpriority="index === 0 ? 'high' : 'auto'"
-          class="rounded-lg"
-        />
-      </UCarousel>
+      <ClientOnly>
+        <UCarousel
+          v-slot="{ item, index }"
+          arrows
+          :items="images"
+          class="w-full max-w-2xl mx-auto"
+        >
+          <img
+            :src="item.image"
+            :alt="item.alt"
+            :fetchpriority="index === 0 ? 'high' : 'auto'"
+            class="rounded-lg"
+          />
+        </UCarousel>
+        <template #fallback>
+          <div class="w-full max-w-2xl mx-auto">
+            <img
+              v-if="images?.[0]"
+              :src="images[0].image"
+              :alt="images[0].alt"
+              fetchpriority="high"
+              class="rounded-lg"
+            />
+          </div>
+        </template>
+      </ClientOnly>
     </template>
   </UPageSection>
 </template>

package/app/composables/useShopBiteConfig.ts

@@ -1,31 +1,16 @@
-import { useContext, useShopwareContext } from "#imports";
-import type { Schemas } from "#shopware";
-
-type useShopBiteConfigReturn = {
-  deliveryTime: ComputedRef<number>;
-  isCheckoutEnabled: ComputedRef<boolean>;
-  refresh(): Promise<Schemas["ShopBiteConfig"]>;
-};
-
-export function useShopBiteConfig(): useShopBiteConfigReturn {
+export function useShopBiteConfig() {
   const { apiClient } = useShopwareContext();
 
-  const _deliveryTime = useContext<number>("deliveryTime");
-  const _isCheckoutEnabled = useContext<boolean>("isCheckoutActive");
-
-  async function refresh(): Promise<Schemas["ShopBiteConfig"]> {
+  const { data, refresh } = useAsyncData("shopbite-config", async () => {
     const { data } = await apiClient.invoke(
       "shopbite.config.get get /shopbite/config",
     );
-    _deliveryTime.value = data.deliveryTime;
-    _isCheckoutEnabled.value = data.isCheckoutEnabled;
-
     return data;
-  }
+  });
 
   return {
-    deliveryTime: computed(() => _deliveryTime.value),
-    isCheckoutEnabled: computed(() => _isCheckoutEnabled.value),
+    deliveryTime: computed(() => data.value?.deliveryTime ?? 30),
+    isCheckoutEnabled: computed(() => data.value?.isCheckoutEnabled ?? false),
     refresh,
   };
 }

package/nuxt.config.ts

@@ -104,7 +104,6 @@ export default defineNuxtConfig({
     "nuxt-vitalizer",
     "@nuxt/eslint",
     "@pinia/nuxt",
-    "@nuxt/hints",
   ],
 
   content: {
@@ -202,6 +201,7 @@ export default defineNuxtConfig({
       "@nuxt/scripts",
       "@nuxt/test-utils/module",
       "@nuxt/eslint",
+      "@nuxt/hints",
     ],
   },
   $production: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.18.2",
+  "version": "1.18.4",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -23,7 +23,6 @@
     "@iconify-json/lucide": "^1.2.97",
     "@iconify-json/simple-icons": "^1.2.73",
     "@nuxt/content": "3.12.0",
-    "@nuxt/hints": "1.0.2",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.5.1",
@@ -45,6 +44,7 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
+    "@nuxt/hints": "1.0.2",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/hugeicons": "^1.2.23",
     "@nuxt/devtools-kit": "^3.2.3",

package/test/nuxt/useShopBiteConfig.test.ts

@@ -1,14 +1,11 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
 import { useShopBiteConfig } from "~/composables/useShopBiteConfig";
 
-const { mockInvoke, mockDeliveryTime, mockIsCheckoutEnabled } = vi.hoisted(
-  () => ({
-    mockInvoke: vi.fn(),
-    mockDeliveryTime: { value: 0 },
-    mockIsCheckoutEnabled: { value: false },
-  }),
-);
+const { mockInvoke } = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+}));
 
 mockNuxtImport("useShopwareContext", () => () => ({
   apiClient: {
@@ -16,25 +13,26 @@ mockNuxtImport("useShopwareContext", () => () => ({
   },
 }));
 
-mockNuxtImport("useContext", () => (key: string) => {
-  if (key === "deliveryTime") return mockDeliveryTime;
-  if (key === "isCheckoutActive") return mockIsCheckoutEnabled;
-  return { value: null };
-});
+mockNuxtImport(
+  "useAsyncData",
+  () => (_key: string, fetcher: () => Promise<unknown>) => {
+    const data = ref<unknown>(null);
+    const refresh = async () => {
+      data.value = await fetcher();
+    };
+    return { data, refresh };
+  },
+);
 
 describe("useShopBiteConfig", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    mockDeliveryTime.value = 0;
-    mockIsCheckoutEnabled.value = false;
   });
 
-  it("should initialize with values from context", () => {
-    mockDeliveryTime.value = 30;
-    mockIsCheckoutEnabled.value = true;
+  it("should return default values when no data is loaded", () => {
     const { deliveryTime, isCheckoutEnabled } = useShopBiteConfig();
     expect(deliveryTime.value).toBe(30);
-    expect(isCheckoutEnabled.value).toBe(true);
+    expect(isCheckoutEnabled.value).toBe(false);
   });
 
   it("should refresh values from API", async () => {
@@ -53,7 +51,5 @@ describe("useShopBiteConfig", () => {
     );
     expect(deliveryTime.value).toBe(45);
     expect(isCheckoutEnabled.value).toBe(true);
-    expect(mockDeliveryTime.value).toBe(45);
-    expect(mockIsCheckoutEnabled.value).toBe(true);
   });
 });