fix: align pickup times with API data (#256)

Fixed weekday ordering and mapped pickup times accurately to match API data. INT-663 Co-authored-by: Clerise Swart <[email protected]>
myparcelnl · Dec 3, 2024 · 70ec73b · 70ec73b
1 parent 1e20262
commit 70ec73b
Showing 1 changed file with 37 additions and 50 deletions.
diff --git a/.../MyParcelDeliveryOptions/Pickup/PickupLocationOpeningHours/PickupLocationOpeningHours.vue b/.../MyParcelDeliveryOptions/Pickup/PickupLocationOpeningHours/PickupLocationOpeningHours.vue
@@ -3,71 +3,58 @@
     <b
       class="mp-block"
       v-text="translate(OPENING_HOURS)" />
-
     <div
-      v-for="hours in filteredOpeningHours"
+      v-if="openingHours.length === 0"
+      class="mp-content-between"
+      v-text="translate(CLOSED)"></div>
+    <div
+      v-for="hours in openingHours"
       :key="hours.weekday"
       class="mp-content-between mp-gap-1 mp-grid mp-grid-cols-2">
-      <span v-text="hours.weekday" />
+      <span v-text="translate(hours.weekday)" />
       <span
         class="mp-text-nowrap"
-        v-text="hours.timeString" />
+        v-text="hours.timeString === CLOSED ? translate(CLOSED) : hours.timeString" />
     </div>
-
-    <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 {type StartEndDate} from '@myparcel/sdk';
-import {createNextDate, createUtcDate} from '../../../../utils';
-import {SHOWN_OPENING_HOURS} from '../../../../data';
-import {useDateFormat, useLanguage, usePickupLocation, useTimeRange} from '../../../../composables';
-import {DoButton} from '../../../../components';
+import {computed, toRef, toValue} from 'vue';
+import {format} from 'date-fns';
+import {OPENING_HOURS, CLOSED} from '@myparcel-do/shared';
+import {useLanguage, usePickupLocation} from '../../../../composables';
 
 const props = defineProps<{locationCode: string; expanded?: boolean}>();
-const propRefs = toRefs(props);
-
 const {translate} = useLanguage();
+const locationCodeRef = toRef(props, 'locationCode');
+const {pickupLocation} = usePickupLocation(locationCodeRef);
 
-const {pickupLocation} = usePickupLocation(propRefs.locationCode);
-
-const mutableShowAll = ref(false);
-const resolvedShowAll = computed(() => props.expanded || mutableShowAll.value);
+const weekDaysMap = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', '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 filteredOpeningHours = computed(() => {
-  return resolvedShowAll.value ? openingHours.value : openingHours.value.slice(0, SHOWN_OPENING_HOURS);
-});
-
-onDeactivated(() => {
-  mutableShowAll.value = false;
+  const openingHoursData = toValue(pickupLocation)?.openingHours ?? [];
+  return weekDaysMap.map((day, index) => {
+    const dayData = openingHoursData.find((entry: {weekday: number}) => entry.weekday === index);
+
+    if (dayData?.hours && dayData.hours.length > 0) {
+      const times = dayData.hours[0];
+
+      if (times.start && times.end) {
+        const startTime = format(new Date(times.start.date), 'HH:mm');
+        const endTime = format(new Date(times.end.date), 'HH:mm');
+        const timeString = `${startTime} - ${endTime}`;
+        return {
+          weekday: day,
+          timeString,
+        };
+      }
+    }
+
+    return {
+      weekday: day,
+      timeString: CLOSED,
+    };
+  });
 });
 </script>