@bigbinary/neeto-molecules 4.0.142 → 4.0.144

package/dist/cjs/Schedule.js

@@ -61,12 +61,17 @@ var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
 var DAYS = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
 var DEFAULT_SLOT_INTERVAL = 30;
+var HOUR_FORMATS = {
+  H24: "24h"};
+var DEFAULT_HOUR_FORMAT = HOUR_FORMATS.H24;
 
 // To avoid prop drilling `allowAddPeriod` to `ScheduleRow` component
 // eslint-disable-next-line @bigbinary/neeto/use-zustand-for-global-state-management
 var ScheduleContext = /*#__PURE__*/React.createContext({
   allowAddPeriod: true,
-  firstDay: 0
+  firstDay: 0,
+  slotInterval: DEFAULT_SLOT_INTERVAL,
+  hourFormat: DEFAULT_HOUR_FORMAT
 });
 
 var INTERVALS = ["year", "quarter", "month", "week", "day", "hour", "minute", "second"];
@@ -89,9 +94,10 @@ var BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN = {
   }
 };
 var SLOT_TIME_FORMAT = "hh:mm A";
+var SLOT_TIME_FORMAT_24H = "HH:mm";
 
 // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
-var END_OF_DAY = utils.dayjs().endOf("day").format(SLOT_TIME_FORMAT);
+var END_OF_DAY = utils.dayjs().endOf("day").format(SLOT_TIME_FORMAT_24H);
 
 var DayjsRange = /*#__PURE__*/function () {
   function DayjsRange(startDate, endDate) {
@@ -129,7 +135,7 @@ var DayjsRange = /*#__PURE__*/function () {
       var endTime = this.endDate.add(1, "days");
       var allTimes = [];
       while (startTime < endTime) {
-        allTimes.push(startTime.format(SLOT_TIME_FORMAT));
+        allTimes.push(startTime.format(SLOT_TIME_FORMAT_24H));
         startTime = startTime.add(interval, "minutes");
       }
       return allTimes;
@@ -195,7 +201,7 @@ yup__namespace.addMethod(yup__namespace.array, "ensureSlotsCantOverlap", functio
 });
 var isFromAndToSame = function isFromAndToSame(startTime, endTime) {
   if (!startTime || !endTime) return true;
-  return utils.dayjs(startTime, SLOT_TIME_FORMAT).isSame(utils.dayjs(endTime, SLOT_TIME_FORMAT));
+  return utils.dayjs(startTime, SLOT_TIME_FORMAT_24H).isSame(utils.dayjs(endTime, SLOT_TIME_FORMAT_24H));
 };
 var sortDays = function sortDays(chosenIndex) {
   if (chosenIndex < 0 || chosenIndex >= 7) return DAYS;
@@ -235,7 +241,7 @@ var getTimeZoneAndTime = function getTimeZoneAndTime() {
   return "".concat(humanReadableTimezone, ": ").concat(utils.dayjs().tz(timeZone).format(SLOT_TIME_FORMAT));
 };
 var isTimeBehind = function isTimeBehind(timeA, timeB) {
-  return utils.dayjs(timeA, SLOT_TIME_FORMAT).isBefore(utils.dayjs(timeB, SLOT_TIME_FORMAT));
+  return utils.dayjs(timeA, SLOT_TIME_FORMAT_24H).isBefore(utils.dayjs(timeB, SLOT_TIME_FORMAT_24H));
 };
 var sortPeriodsByKey = function sortPeriodsByKey(_ref) {
   var periods = _ref.periods,
@@ -276,8 +282,8 @@ var checkForOverlapBetweenPeriods = function checkForOverlapBetweenPeriods(perio
         value = _step$value[1];
       var seg1 = value;
       var seg2 = slotsSortedByStartTime[index + 1];
-      var range1 = dayjsExtended.range(dayjsExtended(seg1.startTime, SLOT_TIME_FORMAT), dayjsExtended(seg1.endTime, SLOT_TIME_FORMAT));
-      var range2 = dayjsExtended.range(dayjsExtended(seg2.startTime, SLOT_TIME_FORMAT), dayjsExtended(seg2.endTime, SLOT_TIME_FORMAT));
+      var range1 = dayjsExtended.range(dayjsExtended(seg1.startTime, SLOT_TIME_FORMAT_24H), dayjsExtended(seg1.endTime, SLOT_TIME_FORMAT_24H));
+      var range2 = dayjsExtended.range(dayjsExtended(seg2.startTime, SLOT_TIME_FORMAT_24H), dayjsExtended(seg2.endTime, SLOT_TIME_FORMAT_24H));
       if (range1.isOverlap(range2)) {
         response = {
           exists: true,
@@ -299,10 +305,10 @@ var findIndicesOfOverlappingRangesInPeriods = function findIndicesOfOverlappingR
     range2 = _ref2.range2,
     periods = _ref2.periods;
   var firstIndex = neetoCist.findIndexBy({
-    startTime: range1.startDate.format(SLOT_TIME_FORMAT)
+    startTime: range1.startDate.format(SLOT_TIME_FORMAT_24H)
   }, periods);
   var secondIndex = periods.findIndex(function (slot, index) {
-    return index > firstIndex && slot.startTime === range2.startDate.format(SLOT_TIME_FORMAT);
+    return index > firstIndex && slot.startTime === range2.startDate.format(SLOT_TIME_FORMAT_24H);
   });
   return {
     firstIndex: firstIndex,
@@ -365,13 +371,26 @@ var processFormValues = function processFormValues(values, firstDay) {
     })
   };
 };
+var convert24hTo12h = function convert24hTo12h(time) {
+  return (
+    // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+    utils.dayjs(time, SLOT_TIME_FORMAT_24H).format(SLOT_TIME_FORMAT)
+  );
+};
 
 var DisplayAvailability = function DisplayAvailability(_ref) {
   var periods = _ref.periods;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useContext = React.useContext(ScheduleContext),
-    firstDay = _useContext.firstDay;
+    firstDay = _useContext.firstDay,
+    hourFormat = _useContext.hourFormat;
+  var formatHour = function formatHour(hour) {
+    if (hourFormat === HOUR_FORMATS.H24) {
+      return hour;
+    }
+    return convert24hTo12h(hour);
+  };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex w-full flex-col gap-y-3",
     children: sortDays(firstDay).map(function (day) {
@@ -400,7 +419,7 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
                 style: "h5",
                 weight: "semibold",
                 "data-testid": general.joinHyphenCase(day, period.startTime, "start-time-text"),
-                children: period.startTime
+                children: formatHour(period.startTime)
               }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
                 className: "neeto-ui-text-gray-600",
                 component: "span",
@@ -411,7 +430,7 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
                 style: "h5",
                 weight: "semibold",
                 "data-testid": general.joinHyphenCase(day, period.endTime, "start-time-text"),
-                children: period.endTime
+                children: formatHour(period.endTime)
               })]
             }, period.id);
           }) : /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -429,16 +448,32 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
 
 var buildSlotIntervals = function buildSlotIntervals(_ref) {
   var interval = _ref.interval,
-    bookedSlots = _ref.bookedSlots;
+    bookedSlots = _ref.bookedSlots,
+    _ref$hourFormat = _ref.hourFormat,
+    hourFormat = _ref$hourFormat === void 0 ? DEFAULT_HOUR_FORMAT : _ref$hourFormat;
   var allIntervalsForADay = dayjsExtended.timeIntervalsForDay(interval);
   allIntervalsForADay.push(END_OF_DAY);
   return function (slotType) {
     var selectedValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var uniqBookedSlots = ramda.uniq(ramda.pluck(slotType, bookedSlots));
     var slotsAvailableForBooking = ramda.difference(allIntervalsForADay, uniqBookedSlots);
-    var slots = slotsAvailableForBooking.map(neetoCist.toLabelAndValue);
+    var slots;
+    if (hourFormat === "12h") {
+      slots = slotsAvailableForBooking.map(function (value) {
+        return {
+          value: value,
+          label: convert24hTo12h(value)
+        };
+      });
+    } else {
+      slots = slotsAvailableForBooking.map(neetoCist.toLabelAndValue);
+    }
     if (!selectedValue) return slots;
-    return sortSlots([neetoCist.toLabelAndValue(selectedValue)].concat(_toConsumableArray(slots)));
+    var selectedSlot = {
+      value: selectedValue,
+      label: hourFormat === "12h" ? convert24hTo12h(selectedValue) : selectedValue
+    };
+    return sortSlots([selectedSlot].concat(_toConsumableArray(slots)));
   };
 };
 var sortSlots = function sortSlots(slots) {
@@ -460,28 +495,33 @@ var filterSlots = function filterSlots(option, searchTerm) {
 };
 var formatCreateLabel = ramda.identity;
 var isValidTimeSlotOption = function isValidTimeSlotOption(value) {
-  // Allow HH:MM AM/PM, H:MM AM/PM, H:MM am/pm, or HH:MM (24h)
-  // Accepts 1 or 2 digit hour (1-12) with AM/PM OR 00-23:00-59 for 24h, AM/PM (any case) optional, optional leading zero
-  // eslint-disable-next-line prettier/prettier
-  var timeRegex = /^(((0?[1-9]|1[0-2]):[0-5]\d ?[AaPp][Mm])|([01]?\d|2[0-3]):[0-5]\d)$/;
-  return timeRegex.test(value);
+  if (!value || typeof value !== "string") return false;
+  var valueTrimmed = value.trim();
+
+  // Try 24h format (e.g. "14:30")
+  var time = dayjsExtended(valueTrimmed, SLOT_TIME_FORMAT_24H, true);
+  if (time.isValid()) return true;
+
+  // Try 12h format with padded hour
+  time = dayjsExtended(valueTrimmed, SLOT_TIME_FORMAT, true);
+  return time.isValid();
 };
 var formatTimeSlotOption = function formatTimeSlotOption(v) {
-  var value = (v || "").toUpperCase();
+  var value = v || "";
   if (neetoCist.isNotEmpty(value)) {
     // If value is in 24h format and missing AM/PM, convert to 12h with AM/PM
-    var time24hMatch = value.match(/^([01]?\d|2[0-3]):([0-5]\d)$/);
-    if (time24hMatch) {
-      var _time24hMatch = _slicedToArray(time24hMatch, 3),
-        hours = _time24hMatch[1],
-        minutes = _time24hMatch[2];
-      var hoursInt = parseInt(hours, 10);
-      var suffix = hoursInt >= 12 ? "PM" : "AM";
-      var hour12 = hoursInt % 12 || 12;
-      value = "".concat(hour12.toString().padStart(2, "0"), ":").concat(minutes, " ").concat(suffix);
-    } else if (value[1] === ":") {
-      // Pad hour with 0 if single digit (legacy logic)
-      value = "0".concat(value);
+    // Use dayjs to parse and format instead of manual regex, etc.
+    var parsed24h = dayjsExtended(value, SLOT_TIME_FORMAT_24H, true);
+    if (parsed24h.isValid()) {
+      value = parsed24h.format(SLOT_TIME_FORMAT_24H);
+    } else {
+      var parsed12h = dayjsExtended(value, SLOT_TIME_FORMAT, true);
+      if (parsed12h.isValid()) {
+        value = parsed12h.format(SLOT_TIME_FORMAT_24H);
+      } else if (value[1] === ":") {
+        // Pad hour with 0 if single digit (legacy logic)
+        value = "0".concat(value);
+      }
     }
   }
   return value;
@@ -493,19 +533,19 @@ var roundToNearestHour = function roundToNearestHour(time) {
 };
 var generateNewPeriod = function generateNewPeriod(periods, wday) {
   var lastEndTime = periods[periods.length - 1].endTime;
-  var newStartTime = roundToNearestHour(dayjsExtended(lastEndTime, SLOT_TIME_FORMAT));
-  var newEndTime = dayjsExtended(newStartTime, SLOT_TIME_FORMAT).add(1, "hour");
+  var newStartTime = roundToNearestHour(dayjsExtended(lastEndTime, SLOT_TIME_FORMAT_24H));
+  var newEndTime = dayjsExtended(newStartTime, SLOT_TIME_FORMAT_24H).add(1, "hour");
   return {
-    startTime: dayjsExtended(newStartTime).format(SLOT_TIME_FORMAT),
-    endTime: dayjsExtended(newEndTime).format(SLOT_TIME_FORMAT),
+    startTime: dayjsExtended(newStartTime).format(SLOT_TIME_FORMAT_24H),
+    endTime: dayjsExtended(newEndTime).format(SLOT_TIME_FORMAT_24H),
     wday: wday
   };
 };
 var addDefaultPeriod = function addDefaultPeriod(wday) {
   return {
     wday: wday,
-    startTime: dayjsExtended().hour(9).minute(0).format(SLOT_TIME_FORMAT),
-    endTime: dayjsExtended().hour(17).minute(0).format(SLOT_TIME_FORMAT)
+    startTime: dayjsExtended().hour(9).minute(0).format(SLOT_TIME_FORMAT_24H),
+    endTime: dayjsExtended().hour(17).minute(0).format(SLOT_TIME_FORMAT_24H)
   };
 };
 
@@ -517,15 +557,23 @@ var ScheduleRow = function ScheduleRow(_ref) {
   var bookedSlots = values.wdays[day].periods;
   var _useContext = React.useContext(ScheduleContext),
     allowAddPeriod = _useContext.allowAddPeriod,
-    slotInterval = _useContext.slotInterval;
+    slotInterval = _useContext.slotInterval,
+    hourFormat = _useContext.hourFormat;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var sortSlotsInterval = React.useMemo(function () {
     return buildSlotIntervals({
       interval: slotInterval,
-      bookedSlots: bookedSlots
+      bookedSlots: bookedSlots,
+      hourFormat: hourFormat
     });
-  }, [slotInterval, bookedSlots]);
+  }, [slotInterval, bookedSlots, hourFormat]);
+  var startTimeOptions = function startTimeOptions(period) {
+    return sortSlotsInterval("startTime", period === null || period === void 0 ? void 0 : period.startTime);
+  };
+  var endTimeOptions = function endTimeOptions(period) {
+    return sortSlotsInterval("endTime", period === null || period === void 0 ? void 0 : period.endTime);
+  };
   var handleChange = function handleChange(index, field, e) {
     var value = formatTimeSlotOption(e === null || e === void 0 ? void 0 : e.value);
     setFieldValue("wdays.".concat(day, ".periods[").concat(index, "].").concat(field), value);
@@ -566,11 +614,13 @@ var ScheduleRow = function ScheduleRow(_ref) {
                   filterOption: filterSlots,
                   isValidNewOption: isValidTimeSlotOption,
                   name: "wdays.".concat(day, ".periods[").concat(index, "].startTime"),
+                  options: startTimeOptions(period),
                   placeholder: t("neetoMolecules.schedule.startTime"),
                   strategy: "fixed",
                   styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
-                  options: sortSlotsInterval("startTime", period === null || period === void 0 ? void 0 : period.startTime),
-                  value: slotsSelectComponentDefaultValue(period === null || period === void 0 ? void 0 : period.startTime),
+                  value: neetoCist.findBy({
+                    value: period === null || period === void 0 ? void 0 : period.startTime
+                  }, startTimeOptions(period)),
                   onChange: function onChange(e) {
                     return handleChange(index, "startTime", e);
                   }
@@ -584,11 +634,13 @@ var ScheduleRow = function ScheduleRow(_ref) {
                   filterOption: filterSlots,
                   isValidNewOption: isValidTimeSlotOption,
                   name: "wdays.".concat(day, ".periods[").concat(index, "].endTime"),
-                  options: sortSlotsInterval("endTime", period === null || period === void 0 ? void 0 : period.endTime),
+                  options: endTimeOptions(period),
                   placeholder: t("neetoMolecules.schedule.endTime"),
                   strategy: "fixed",
                   styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
-                  value: slotsSelectComponentDefaultValue(period === null || period === void 0 ? void 0 : period.endTime),
+                  value: neetoCist.findBy({
+                    value: period === null || period === void 0 ? void 0 : period.endTime
+                  }, endTimeOptions(period)),
                   onChange: function onChange(e) {
                     return handleChange(index, "endTime", e);
                   }
@@ -924,7 +976,9 @@ var Schedule = /*#__PURE__*/React.forwardRef(function (_ref, scheduleRef) {
     _ref$showTimeZone = _ref.showTimeZone,
     showTimeZone = _ref$showTimeZone === void 0 ? true : _ref$showTimeZone,
     _ref$slotInterval = _ref.slotInterval,
-    slotInterval = _ref$slotInterval === void 0 ? DEFAULT_SLOT_INTERVAL : _ref$slotInterval;
+    slotInterval = _ref$slotInterval === void 0 ? DEFAULT_SLOT_INTERVAL : _ref$slotInterval,
+    _ref$hourFormat = _ref.hourFormat,
+    hourFormat = _ref$hourFormat === void 0 ? DEFAULT_HOUR_FORMAT : _ref$hourFormat;
   var validationSchema = React.useMemo(getScheduleValidationSchema, []);
   var getInitialFormValues = function getInitialFormValues() {
     var isSubmitHandler = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -942,7 +996,8 @@ var Schedule = /*#__PURE__*/React.forwardRef(function (_ref, scheduleRef) {
     value: {
       allowAddPeriod: allowAddPeriod,
       firstDay: firstDay,
-      slotInterval: slotInterval
+      slotInterval: slotInterval,
+      hourFormat: hourFormat
     },
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0",