@idkwebsites/components 0.1.15 → 0.1.16

package/dist/index.cjs

@@ -1503,7 +1503,19 @@ function BookingWidget({
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__slots", children: (() => {
                 const activeEntry = selectedDate ? availability.data.dates.find((entry) => entry.date === selectedDate) : availability.data.dates[0];
                 if (!activeEntry) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Select a date to see times." });
-                const slots = (activeEntry.slots || []).filter((slot) => slot.available);
+                const availableSlots = (activeEntry.slots || []).filter((slot) => slot.available).sort((a, b) => {
+                  const aTime = parseDateTime(a.time, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
+                  const bTime = parseDateTime(b.time, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
+                  if (aTime === bTime) {
+                    const aEnd = parseDateTime(a.endTime, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
+                    const bEnd = parseDateTime(b.endTime, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
+                    return aEnd - bEnd;
+                  }
+                  return aTime - bTime;
+                });
+                const slots = availableSlots.filter(
+                  (slot, index) => index === 0 || slot.time !== availableSlots[index - 1].time || slot.endTime !== availableSlots[index - 1].endTime
+                );
                 if (slots.length === 0) {
                   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No available times for this date." });
                 }
@@ -1511,7 +1523,7 @@ function BookingWidget({
                   "button",
                   {
                     type: "button",
-                    className: slot.time === selectedTime ? "is-active" : void 0,
+                    className: slot.time === selectedTime && slot.endTime === selectedEndTime ? "is-active" : void 0,
                     onClick: () => {
                       const date = selectedDate || activeEntry.date;
                       setSelectedDate(date || null);