@shopbite-de/storefront 1.4.1 → 1.5.1

package/api-types/storeApiTypes.d.ts

@@ -268,6 +268,24 @@ export type Schemas = {
     type: "page" | "link" | "folder";
   };
   BreadcrumbCollection: components["schemas"]["Breadcrumb"][];
+  BusinessHour: {
+    apiAlias?: string;
+    closingTime?: string;
+    /** Format: date-time */
+    createdAt?: string;
+    dayOfWeek?: number;
+    /** Format: uuid */
+    id?: string;
+    openingTime?: string;
+    /** Format: uuid */
+    salesChannelId?: string;
+    translated: [];
+    /** Format: date-time */
+    updatedAt?: string | null;
+  };
+  BusinessHourStruct: {
+    businessHours?: components["schemas"]["BusinessHour"][];
+  };
   CalculatedPrice: {
     /** @enum {string} */
     apiAlias: "calculated_price";
@@ -1519,6 +1537,25 @@ export type Schemas = {
     /** Format: date-time */
     readonly updatedAt?: string;
   };
+  Holiday: {
+    apiAlias?: string;
+    /** Format: date-time */
+    createdAt?: string;
+    /** Format: date-time */
+    end?: string;
+    /** Format: uuid */
+    id?: string;
+    /** Format: uuid */
+    salesChannelId?: string;
+    /** Format: date-time */
+    start?: string;
+    translated: [];
+    /** Format: date-time */
+    updatedAt?: string | null;
+  };
+  HolidayStruct: {
+    holidays?: components["schemas"]["Holiday"][];
+  };
   ImportExportFile: {
     /** Format: date-time */
     readonly createdAt?: string;
@@ -4546,6 +4583,30 @@ export type Schemas = {
     /** Whether checkout is enabled for ShopBite */
     isCheckoutEnabled: boolean;
   };
+  ShopbiteBusinessHour: {
+    closingTime: string;
+    /** Format: date-time */
+    readonly createdAt?: string;
+    /** Format: int64 */
+    dayOfWeek: number;
+    id: string;
+    openingTime: string;
+    salesChannelId: string;
+    /** Format: date-time */
+    readonly updatedAt?: string;
+  };
+  ShopbiteHoliday: {
+    /** Format: date-time */
+    readonly createdAt?: string;
+    /** Format: date-time */
+    end: string;
+    id: string;
+    salesChannelId: string;
+    /** Format: date-time */
+    start: string;
+    /** Format: date-time */
+    readonly updatedAt?: string;
+  };
   SimpleFilter: {
     field: string;
     /** @enum {string} */
@@ -7004,12 +7065,24 @@ export type operations = {
     } & components["schemas"]["EntitySearchResult"];
     responseCode: 200;
   };
+  "shopbite.business-hour.get get /shopbite/business-hour": {
+    contentType?: "application/json";
+    accept?: "application/json";
+    response: components["schemas"]["BusinessHourStruct"];
+    responseCode: 200;
+  };
   "shopbite.config.get get /shopbite/config": {
     contentType?: "application/json";
     accept?: "application/json";
     response: components["schemas"]["ShopBiteConfig"];
     responseCode: 200;
   };
+  "shopbite.holiday.get get /shopbite/holiday": {
+    contentType?: "application/json";
+    accept?: "application/json";
+    response: components["schemas"]["HolidayStruct"];
+    responseCode: 200;
+  };
   "readSitemap get /sitemap": {
     contentType?: "application/json";
     accept?: "application/json";

package/app/app.vue

@@ -17,6 +17,15 @@ Sentry.init({
   dsn: runtimeConfig.public.sentry.dsn,
 });
 
+const {
+  getNextOpeningTime,
+  isStoreOpen,
+  refresh: refreshBusinessHours,
+} = useBusinessHours();
+const { isClosedHoliday, refresh: refreshHolidays } = useHolidays();
+
+await Promise.all([refreshBusinessHours(), refreshHolidays()]);
+
 // Initialize session context
 const { data: sessionContextData } = await useAsyncData(
   "session-context",
@@ -59,12 +68,12 @@ const TOAST_CONFIG = {
 } as const;
 
 function displayStoreStatus() {
-  const isOpen = isStoreOpen();
+  const isOpen = isStoreOpen(undefined, isClosedHoliday);
 
   if (isOpen) {
     toast.add(TOAST_CONFIG.open);
   } else {
-    const nextOpening = getNextOpeningTime(ref(new Date()));
+    const nextOpening = getNextOpeningTime(ref(new Date()), isClosedHoliday);
     toast.add({
       ...TOAST_CONFIG.closed,
       description: nextOpening

package/app/components/Checkout/DeliveryTimeSelect.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, computed } from "vue";
 import { useDeliveryTime } from "~/composables/useDeliveryTime";
-import { isClosedHoliday } from "~/utils/holidays";
+import { useHolidays } from "~/composables/useHolidays";
 
 const props = defineProps<{
   modelValue?: string;
@@ -44,13 +44,15 @@ const {
   validate,
 } = useDeliveryTime(now);
 
+const { isClosedHoliday } = useHolidays();
+
 const validationError = computed<string | null>(() =>
   selected.value ? validate(selected.value) : null,
 );
 
 const isValid = computed<boolean>(() => {
   if (!selected.value) return false;
-  if (isClosedHoliday(now.value)) return false;
+  if (isClosedHoliday(now.value) === true) return false;
   return validate(selected.value) === null;
 });
 
@@ -130,7 +132,7 @@ function handleTimeInput(event: Event): void {
 </script>
 
 <template>
-  <div v-if="!isClosedHoliday(now)" class="flex flex-col gap-2 mt-4">
+  <div v-if="isClosedHoliday(now) === false" class="flex flex-col gap-2 mt-4">
     <div class="flex flex-row items-center justify-between gap-4">
       <div>Wunschlieferung- oder Abholzeit ab:</div>
       <client-only>
@@ -138,7 +140,7 @@ function handleTimeInput(event: Event): void {
           type="time"
           :min="minTime ?? undefined"
           :max="maxTime ?? undefined"
-          :disabled="isClosedToday || isClosedHoliday(now)"
+          :disabled="isClosedToday || isClosedHoliday(now) === true"
           :value="selected"
           step="300"
           class="border rounded px-2 py-1"
@@ -165,7 +167,7 @@ function handleTimeInput(event: Event): void {
       variant="subtle"
     />
   </div>
-  <div v-else>
+  <div v-else-if="isClosedHoliday(now) === true">
     <UBadge
       variant="subtle"
       class="w-full"
@@ -174,4 +176,13 @@ function handleTimeInput(event: Event): void {
       label="Geschlossen wegen Betriebsferien"
     />
   </div>
+  <div v-else>
+    <UBadge
+      variant="subtle"
+      class="w-full"
+      icon="i-lucide-loader"
+      color="neutral"
+      label="Lade Öffnungszeiten..."
+    />
+  </div>
 </template>

package/app/components/Header.vue

@@ -84,9 +84,8 @@ const cartQuickViewOpen = ref(false);
     <template #title>
       <NuxtLink to="/" class="-m-1.5 p-1.5">
         <span class="sr-only">{{ siteName }}</span>
-        <UColorModeImage
-          light="/light/Logo.svg"
-          dark="/dark/Logo.svg"
+        <NuxtImg
+          src="/light/Logo.svg"
           class="h-12 w-auto"
         />
       </NuxtLink>

package/app/composables/useBusinessHours.ts

@@ -0,0 +1,156 @@
+import { useShopwareContext } from "#imports";
+import type { Ref } from "vue";
+import { setTime } from "~/utils/time";
+
+export type ServiceInterval = { start: Date; end: Date };
+
+export function useBusinessHours() {
+  const { apiClient } = useShopwareContext();
+
+  const { data, pending, refresh } = useAsyncData(
+    "business-hours",
+    async () => {
+      const response = await apiClient.invoke(
+        "shopbite.business-hour.get get /shopbite/business-hour",
+      );
+
+      return response.data.businessHours;
+    },
+    { immediate: false },
+  );
+
+  const getServiceIntervals = (date: Date): Array<ServiceInterval> => {
+    if (!data.value) return [];
+
+    const dayOfWeek = date.getDay();
+    const dayBusinessHours = data.value.filter(
+      (bh) => bh.dayOfWeek === dayOfWeek,
+    );
+
+    return dayBusinessHours
+      .map((bh) => {
+        if (!bh.openingTime || !bh.closingTime) return null;
+        const [startH, startM] = bh.openingTime.split(":").map(Number);
+        const [endH, endM] = bh.closingTime.split(":").map(Number);
+
+        return {
+          start: setTime(date, startH, startM),
+          end: setTime(date, endH, endM),
+        };
+      })
+      .filter((interval): interval is ServiceInterval => interval !== null);
+  };
+
+  const getEarliestSelectableTime = (
+    currentTime: Date,
+    currentDeliveryTime: number | null,
+  ): Date => {
+    const earliest = new Date(currentTime);
+    earliest.setMinutes(earliest.getMinutes() + (currentDeliveryTime ?? 30));
+    earliest.setSeconds(0, 0);
+    return earliest;
+  };
+
+  const findActiveInterval = (
+    currentTime: Date,
+    currentDeliveryTime: number | null,
+  ): ServiceInterval | null => {
+    const intervals = getServiceIntervals(currentTime);
+    const earliest = getEarliestSelectableTime(
+      currentTime,
+      currentDeliveryTime ?? 30,
+    );
+
+    if (intervals.length === 0) return null;
+
+    const current = intervals.find(
+      (interval) => earliest >= interval.start && earliest <= interval.end,
+    );
+    if (current) return current;
+
+    return intervals.find((interval) => interval.start > earliest) ?? null;
+  };
+
+  const getNextOpeningTime = (
+    now: Ref<Date>,
+    isClosedHoliday: (date: Date) => boolean | undefined,
+  ): string | null => {
+    const currentDate = now.value;
+    const isHoliday = isClosedHoliday(currentDate);
+
+    // If we don't know if today is a holiday, we can't reliably say we are open/closed
+    if (isHoliday === undefined) return null;
+
+    // Try up to 60 days ahead to find next opening (covers long holiday periods)
+    for (let i = 0; i < 60; i++) {
+      const checkDate = new Date(currentDate);
+      checkDate.setDate(checkDate.getDate() + i);
+      checkDate.setHours(12, 0, 0, 0); // Set to midday to avoid timezone issues
+
+      // Skip holidays
+      if (isClosedHoliday(checkDate) === true) continue;
+
+      const intervals = getServiceIntervals(checkDate);
+      if (intervals.length === 0) continue;
+
+      // For today, check if there's still an opening coming
+      if (i === 0) {
+        for (const interval of intervals) {
+          if (interval.start.getTime() > currentDate.getTime()) {
+            const hours = interval.start.getHours().toString().padStart(2, "0");
+            const minutes = interval.start
+              .getMinutes()
+              .toString()
+              .padStart(2, "0");
+            return `${hours}:${minutes} Uhr`;
+          }
+        }
+        continue; // Today's openings have passed, check next days
+      }
+
+      const nextOpen = intervals[0].start;
+      const day = nextOpen.getDate().toString().padStart(2, "0");
+      const month = (nextOpen.getMonth() + 1).toString().padStart(2, "0");
+      const dayName = [
+        "Sonntag",
+        "Montag",
+        "Dienstag",
+        "Mittwoch",
+        "Donnerstag",
+        "Freitag",
+        "Samstag",
+      ][nextOpen.getDay()];
+      const hours = nextOpen.getHours().toString().padStart(2, "0");
+      const minutes = nextOpen.getMinutes().toString().padStart(2, "0");
+
+      if (i === 1) {
+        return `morgen um ${hours}:${minutes} Uhr`;
+      }
+      return `${dayName}, ${day}.${month}. um ${hours}:${minutes} Uhr`;
+    }
+
+    return null;
+  };
+
+  const isStoreOpen = (
+    date: Date = new Date(),
+    isClosedHoliday: (date: Date) => boolean | undefined,
+  ): boolean => {
+    if (isClosedHoliday(date) === true) return false;
+
+    const intervals = getServiceIntervals(date);
+    if (intervals.length === 0) return false;
+    return intervals.some(({ start, end }) => date >= start && date <= end);
+  };
+
+  return {
+    businessHours: data,
+    isLoading: pending,
+    refresh,
+    isStoreOpen,
+    getServiceIntervals,
+    getEarliestSelectableTime,
+    findActiveInterval,
+    getNextOpeningTime,
+  };
+}

package/app/composables/useDeliveryTime.ts

@@ -1,12 +1,4 @@
 import { computed, type Ref } from "vue";
-import { toTimeString, parseTimeString } from "~/utils/time";
-import {
-  getEarliestSelectableTime,
-  findActiveInterval,
-  getServiceIntervals,
-  isTuesday,
-  type ServiceInterval,
-} from "~/utils/businessHours";
 
 function isTimeWithinBounds(
   time: string,
@@ -19,6 +11,14 @@ function isTimeWithinBounds(
 
 export function useDeliveryTime(now: Ref<Date>) {
   const { deliveryTime } = useShopBiteConfig();
+  const {
+    getServiceIntervals,
+    getEarliestSelectableTime,
+    findActiveInterval,
+    businessHours,
+  } = useBusinessHours();
+  const { isClosedHoliday } = useHolidays();
+
   const earliest = computed<Date>(() =>
     getEarliestSelectableTime(now.value, deliveryTime.value),
   );
@@ -28,6 +28,7 @@ export function useDeliveryTime(now: Ref<Date>) {
   );
 
   const minTime = computed<string | null>(() => {
+    if (isClosedHoliday(now.value) !== false) return null;
     const interval = activeInterval.value;
     if (!interval) return null;
     const minDate = new Date(
@@ -37,6 +38,7 @@ export function useDeliveryTime(now: Ref<Date>) {
   });
 
   const maxTime = computed<string | null>(() => {
+    if (isClosedHoliday(now.value) !== false) return null;
     const interval = activeInterval.value;
     return interval ? toTimeString(interval.end) : null;
   });
@@ -44,11 +46,33 @@ export function useDeliveryTime(now: Ref<Date>) {
   const isClosedToday = computed<boolean>(() => activeInterval.value === null);
 
   const helperText = computed<string>(() => {
+    const isHoliday = isClosedHoliday(now.value);
+    if (isHoliday === undefined) {
+      return "Lade Informationen...";
+    }
+    if (isHoliday) {
+      return "Wegen Betriebsferien geschlossen.";
+    }
+
     const interval = activeInterval.value;
     if (!interval) {
-      if (isTuesday(now.value)) {
-        return "Heute (Dienstag) ist Ruhetag. Bitte an einem anderen Tag bestellen.";
+      const dayOfWeek = now.value.getDay();
+      const hasOpeningsToday =
+        businessHours.value?.some((bh) => bh.dayOfWeek === dayOfWeek) ?? false;
+
+      if (!hasOpeningsToday) {
+        const dayName = [
+          "Sonntag",
+          "Montag",
+          "Dienstag",
+          "Mittwoch",
+          "Donnerstag",
+          "Freitag",
+          "Samstag",
+        ][dayOfWeek];
+        return `Heute (${dayName}) ist Ruhetag. Bitte an einem anderen Tag bestellen.`;
       }
+
       const intervals = getServiceIntervals(now.value);
       const lastInterval = intervals.at(-1);
       if (lastInterval && earliest.value > lastInterval.end) {

package/app/composables/useHolidays.ts

@@ -0,0 +1,49 @@
+import { useShopwareContext } from "#imports";
+
+export function useHolidays() {
+  const { apiClient } = useShopwareContext();
+
+  const { data, pending, refresh } = useAsyncData(
+    "holidays",
+    async () => {
+      const response = await apiClient.invoke(
+        "shopbite.holiday.get get /shopbite/holiday",
+      );
+
+      return response.data.holidays;
+    },
+    { immediate: false },
+  );
+
+  /**
+   * Checks if a given date (default today) is a closed holiday.
+   * Returns undefined if holiday data is not yet loaded.
+   */
+  const isClosedHoliday = (date?: Date): boolean | undefined => {
+    if (!data.value) return undefined;
+    const checkDate = date ?? new Date();
+    const formattedDate = formatDateYYYYMMDD(checkDate);
+
+    return data.value.some((holiday) => {
+      if (!holiday.start || !holiday.end) return false;
+      const start = formatDateYYYYMMDD(new Date(holiday.start));
+      const end = formatDateYYYYMMDD(new Date(holiday.end));
+      return formattedDate >= start && formattedDate <= end;
+    });
+  };
+
+  return {
+    holidays: data,
+    isClosedHoliday,
+    isLoading: pending,
+    refresh,
+  };
+}
+
+function formatDateYYYYMMDD(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -48,7 +48,6 @@
     "@vue/compiler-dom": "^3.5.26",
     "@vue/server-renderer": "^3.5.26",
     "@vue/test-utils": "^2.4.6",
-    "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.1",
     "happy-dom": "^20.0.10",
     "jsdom": "^27.2.0",
@@ -72,7 +71,7 @@
     "prettier": "prettier --check \"**/*.{ts,tsx,md,vue}\"",
     "prettier:fix": "prettier --check \"**/*.{ts,tsx,md,vue}\" --write",
     "generate-types": "shopware-api-gen generate --apiType=store",
-    "load-schema": "bunx @shopware/api-gen loadSchema --apiType=store",
+    "load-schema": "pnpx @shopware/api-gen loadSchema --apiType=store",
     "lint:fix": "npm run prettier:fix && npm run eslint:fix"
   }
 }

package/test/nuxt/useBusinessHours.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
+import { useBusinessHours } from "~/composables/useBusinessHours";
+
+// Mock useAsyncData
+mockNuxtImport("useAsyncData", () => {
+  return (key: string, handler: () => Promise<any>) => {
+    const data = ref(null);
+    const pending = ref(false);
+    const refresh = vi.fn(async () => {
+      data.value = await handler();
+    });
+    return { data, pending, refresh };
+  };
+});
+
+const mockBusinessHoursData = [
+  { dayOfWeek: 1, openingTime: "11:30", closingTime: "14:30" },
+  { dayOfWeek: 1, openingTime: "17:30", closingTime: "23:00" },
+];
+
+mockNuxtImport("useShopwareContext", () => () => ({
+  apiClient: {
+    invoke: vi.fn().mockResolvedValue({
+      data: { businessHours: mockBusinessHoursData },
+    }),
+  },
+}));
+
+describe("useBusinessHours", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should identify if store is open", async () => {
+    const { isStoreOpen, refresh } = useBusinessHours();
+    await refresh();
+
+    const isClosedHoliday = vi.fn().mockReturnValue(false);
+
+    // Monday at 12:00 (Open)
+    const openTime = new Date("2023-10-23T12:00:00"); // Monday
+    expect(isStoreOpen(openTime, isClosedHoliday)).toBe(true);
+
+    // Monday at 15:00 (Closed - between intervals)
+    const closedTime = new Date("2023-10-23T15:00:00");
+    expect(isStoreOpen(closedTime, isClosedHoliday)).toBe(false);
+
+    // Monday at 10:00 (Closed - before intervals)
+    const beforeTime = new Date("2023-10-23T10:00:00");
+    expect(isStoreOpen(beforeTime, isClosedHoliday)).toBe(false);
+
+    // Holiday (Closed)
+    isClosedHoliday.mockReturnValue(true);
+    expect(isStoreOpen(openTime, isClosedHoliday)).toBe(false);
+  });
+});