feat: align pickup times with API data

               Fixed weekday ordering and mapped pickup times accurately to match API data.

               Closes #INT-663

apps/delivery-options/src/utils/createNextDate.ts

@@ -7,10 +7,12 @@ import {createUtcDate} from './createUtcDate';
  */
 export const createNextDate = (weekday: number): Date => {
   const date = createUtcDate();
+  const currentDay = getDay(date);
+  let days = weekday - currentDay;
 
-  if (getDay(date) === weekday) {
-    return date;
+  if (days < 0) {
+    days += DAYS_IN_WEEK;
   }
 
-  return addDays(date, (weekday + DAYS_IN_WEEK - getDay(date)) % DAYS_IN_WEEK);
+  return addDays(date, days);
 };

apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationOpeningHours/PickupLocationOpeningHours.vue

@@ -1,66 +1,94 @@
 <template>
   <div>
-    <b
-      class="mp-block"
-      v-text="translate(OPENING_HOURS)" />
-
-    <div
-      v-for="hours in filteredOpeningHours"
-      :key="hours.weekday"
-      class="mp-content-between mp-gap-1 mp-grid mp-grid-cols-2">
+    <b class="mp-block" v-text="translate(OPENING_HOURS)" />
+
+    <div v-if="filteredOpeningHours.length === 0" class="mp-content-between">
+      <span>{{ translate(CLOSED) }}</span>
+    </div>
+
+    <div v-for="hours in filteredOpeningHours" :key="hours.weekday" class="mp-content-between mp-gap-1 mp-grid mp-grid-cols-2">
       <span v-text="hours.weekday" />
-      <span
-        class="mp-text-nowrap"
-        v-text="hours.timeString" />
+      <span class="mp-text-nowrap" v-text="hours.timeString" />
     </div>
 
-    <DoButton
-      v-if="!resolvedShowAll"
-      link
-      @click="mutableShowAll = true">
+    <DoButton v-if="!resolvedShowAll" link @click="mutableShowAll = true">
       {{ translate(SHOW_MORE_HOURS) }}
     </DoButton>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {capitalize, computed, onDeactivated, ref, toRefs} from 'vue';
-import {addDays, isSameDay, isToday} from 'date-fns';
-import {CLOSED, OPENING_HOURS, SHOW_MORE_HOURS} from '@myparcel-do/shared';
+import {computed, onDeactivated, ref, toRefs} from 'vue';
+import {
+  CLOSED,
+  OPENING_HOURS,
+  SHOW_MORE_HOURS,
+  DAY_MONDAY,
+  DAY_TUESDAY,
+  DAY_WEDNESDAY,
+  DAY_THURSDAY,
+  DAY_FRIDAY,
+  DAY_SATURDAY,
+  DAY_SUNDAY,
+} from '@myparcel-do/shared';
 import {type StartEndDate} from '@myparcel/sdk';
-import {createNextDate, createUtcDate} from '../../../../utils';
+import {createNextDate} from '../../../../utils';
 import {SHOWN_OPENING_HOURS} from '../../../../data';
-import {useDateFormat, useLanguage, usePickupLocation, useTimeRange} from '../../../../composables';
+import {useDateFormat, useLanguage, usePickupLocation} from '../../../../composables';
 import {DoButton} from '../../../../components';
 
-const props = defineProps<{locationCode: string; expanded?: boolean}>();
+const props = defineProps<{ locationCode: string; expanded?: boolean }>();
 const propRefs = toRefs(props);
 
-const {translate} = useLanguage();
-
-const {pickupLocation} = usePickupLocation(propRefs.locationCode);
+const { translate } = useLanguage();
+const { pickupLocation } = usePickupLocation(propRefs.locationCode);
 
 const mutableShowAll = ref(false);
 const resolvedShowAll = computed(() => props.expanded || mutableShowAll.value);
 
+const weekDaysMap = {
+  [DAY_MONDAY]: 'Monday',
+  [DAY_TUESDAY]: 'Tuesday',
+  [DAY_WEDNESDAY]: 'Wednesday',
+  [DAY_THURSDAY]: 'Thursday',
+  [DAY_FRIDAY]: 'Friday',
+  [DAY_SATURDAY]: 'Saturday',
+  [DAY_SUNDAY]: 'Sunday',
+};
+
 const openingHours = computed(() => {
-  return (pickupLocation.value?.openingHours ?? [])
-    .map(({hours, weekday}) => {
-      const date = createNextDate(weekday);
-      const formattedDay = useDateFormat(date);
-
-      const isTodayOrTomorrow = isToday(date) || isSameDay(addDays(createUtcDate(), 1), date);
-
-      const time: StartEndDate = hours?.[0];
-      const timeString = time ? useTimeRange(time.start.date, time.end.date).value : translate(CLOSED);
-
-      return {
-        date,
-        weekday: capitalize(isTodayOrTomorrow ? formattedDay.relative.value : formattedDay.weekday.value),
-        timeString,
-      };
-    })
-    .sort((a, b) => a.date.getTime() - b.date.getTime());
+  const allWeekdays = [DAY_SUNDAY, DAY_MONDAY, DAY_TUESDAY, DAY_WEDNESDAY, DAY_THURSDAY, DAY_FRIDAY, DAY_SATURDAY];
+
+  const hoursArray = allWeekdays.map((weekday) => {
+    const openingHour = (pickupLocation.value?.openingHours ?? []).find(({ weekday: wd }) => wd === weekday);
+    const date = createNextDate(weekday);
+    const formattedDay = useDateFormat(date);
+
+    const time: StartEndDate | undefined = openingHour && Array.isArray(openingHour.hours) && openingHour.hours.length > 0 ? openingHour.hours[0] : undefined;
+
+    let timerange = 'CLOSED';
+    if (time) {
+      const start = time.start.date.substring(11, 16);
+      const end = time.end.date.substring(11, 16);
+      timerange = `${start} - ${end}`;
+    }
+
+    return {
+      date: formattedDay,
+      weekday: weekDaysMap[weekday as keyof typeof weekDaysMap],
+      timeString: timerange,
+    };
+  });
+
+  const timeStrings = hoursArray.map(hours => hours.timeString);
+
+  timeStrings.unshift(timeStrings.pop()!);
+
+  hoursArray.forEach((hours, index) => {
+    hours.timeString = timeStrings[index];
+  });
+
+  return hoursArray;
 });
 
 const filteredOpeningHours = computed(() => {

libs/shared/src/utils/createTimestamp.ts

@@ -1,12 +1,12 @@
 import {format} from 'date-fns';
 import {type DateLike, normalizeDate} from '@vueuse/core';
 import {type Timestamp} from '@myparcel/sdk';
-import {DEFAULT_TIMEZONE, DEFAULT_TIMEZONE_TYPE, API_DATE_FORMAT} from '../data';
+import {API_DATE_FORMAT} from '../data';
 
 export const createTimestamp = (date: DateLike = new Date()): Timestamp => {
   return {
     date: format(normalizeDate(date), API_DATE_FORMAT),
-    timezone: DEFAULT_TIMEZONE,
-    timezone_type: DEFAULT_TIMEZONE_TYPE,
+    timezone: 'GMT',
+    timezone_type: 0,
   };
 };