@bigbinary/neeto-molecules 4.0.143 → 4.0.144

package/dist/Schedule.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, memo, useMemo, useState, useEffect, useImperativeHandle, forwardRef } from 'react';
 import { useFormikContext, FieldArray, ErrorMessage, Formik, Form as Form$2 } from 'formik';
-import { findIndexBy, isNotPresent, isPresent, toLabelAndValue, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { findIndexBy, isNotPresent, isPresent, toLabelAndValue, isNotEmpty, findBy, noop } from '@bigbinary/neeto-cist';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation } from 'react-i18next';
@@ -38,12 +38,17 @@ import '@bigbinary/neeto-commons-frontend/react-utils';
 
 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__*/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"];
@@ -66,9 +71,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 = dayjs().endOf("day").format(SLOT_TIME_FORMAT);
+var END_OF_DAY = dayjs().endOf("day").format(SLOT_TIME_FORMAT_24H);
 
 var DayjsRange = /*#__PURE__*/function () {
   function DayjsRange(startDate, endDate) {
@@ -106,7 +112,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;
@@ -172,7 +178,7 @@ yup.addMethod(yup.array, "ensureSlotsCantOverlap", function () {
 });
 var isFromAndToSame = function isFromAndToSame(startTime, endTime) {
   if (!startTime || !endTime) return true;
-  return dayjs(startTime, SLOT_TIME_FORMAT).isSame(dayjs(endTime, SLOT_TIME_FORMAT));
+  return dayjs(startTime, SLOT_TIME_FORMAT_24H).isSame(dayjs(endTime, SLOT_TIME_FORMAT_24H));
 };
 var sortDays = function sortDays(chosenIndex) {
   if (chosenIndex < 0 || chosenIndex >= 7) return DAYS;
@@ -212,7 +218,7 @@ var getTimeZoneAndTime = function getTimeZoneAndTime() {
   return "".concat(humanReadableTimezone, ": ").concat(dayjs().tz(timeZone).format(SLOT_TIME_FORMAT));
 };
 var isTimeBehind = function isTimeBehind(timeA, timeB) {
-  return dayjs(timeA, SLOT_TIME_FORMAT).isBefore(dayjs(timeB, SLOT_TIME_FORMAT));
+  return dayjs(timeA, SLOT_TIME_FORMAT_24H).isBefore(dayjs(timeB, SLOT_TIME_FORMAT_24H));
 };
 var sortPeriodsByKey = function sortPeriodsByKey(_ref) {
   var periods = _ref.periods,
@@ -253,8 +259,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,
@@ -276,10 +282,10 @@ var findIndicesOfOverlappingRangesInPeriods = function findIndicesOfOverlappingR
     range2 = _ref2.range2,
     periods = _ref2.periods;
   var firstIndex = 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,
@@ -342,13 +348,26 @@ var processFormValues = function processFormValues(values, firstDay) {
     })
   };
 };
+var convert24hTo12h = function convert24hTo12h(time) {
+  return (
+    // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+    dayjs(time, SLOT_TIME_FORMAT_24H).format(SLOT_TIME_FORMAT)
+  );
+};
 
 var DisplayAvailability = function DisplayAvailability(_ref) {
   var periods = _ref.periods;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useContext = 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__*/jsx("div", {
     className: "flex w-full flex-col gap-y-3",
     children: sortDays(firstDay).map(function (day) {
@@ -377,7 +396,7 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
                 style: "h5",
                 weight: "semibold",
                 "data-testid": joinHyphenCase(day, period.startTime, "start-time-text"),
-                children: period.startTime
+                children: formatHour(period.startTime)
               }), /*#__PURE__*/jsx(Typography, {
                 className: "neeto-ui-text-gray-600",
                 component: "span",
@@ -388,7 +407,7 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
                 style: "h5",
                 weight: "semibold",
                 "data-testid": joinHyphenCase(day, period.endTime, "start-time-text"),
-                children: period.endTime
+                children: formatHour(period.endTime)
               })]
             }, period.id);
           }) : /*#__PURE__*/jsx(Typography, {
@@ -406,16 +425,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 = uniq(pluck(slotType, bookedSlots));
     var slotsAvailableForBooking = difference(allIntervalsForADay, uniqBookedSlots);
-    var slots = slotsAvailableForBooking.map(toLabelAndValue);
+    var slots;
+    if (hourFormat === "12h") {
+      slots = slotsAvailableForBooking.map(function (value) {
+        return {
+          value: value,
+          label: convert24hTo12h(value)
+        };
+      });
+    } else {
+      slots = slotsAvailableForBooking.map(toLabelAndValue);
+    }
     if (!selectedValue) return slots;
-    return sortSlots([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) {
@@ -437,28 +472,33 @@ var filterSlots = function filterSlots(option, searchTerm) {
 };
 var formatCreateLabel = 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 (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;
@@ -470,19 +510,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)
   };
 };
 
@@ -494,15 +534,23 @@ var ScheduleRow = function ScheduleRow(_ref) {
   var bookedSlots = values.wdays[day].periods;
   var _useContext = useContext(ScheduleContext),
     allowAddPeriod = _useContext.allowAddPeriod,
-    slotInterval = _useContext.slotInterval;
+    slotInterval = _useContext.slotInterval,
+    hourFormat = _useContext.hourFormat;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var sortSlotsInterval = 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);
@@ -543,11 +591,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: findBy({
+                    value: period === null || period === void 0 ? void 0 : period.startTime
+                  }, startTimeOptions(period)),
                   onChange: function onChange(e) {
                     return handleChange(index, "startTime", e);
                   }
@@ -561,11 +611,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: findBy({
+                    value: period === null || period === void 0 ? void 0 : period.endTime
+                  }, endTimeOptions(period)),
                   onChange: function onChange(e) {
                     return handleChange(index, "endTime", e);
                   }
@@ -901,7 +953,9 @@ var Schedule = /*#__PURE__*/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 = useMemo(getScheduleValidationSchema, []);
   var getInitialFormValues = function getInitialFormValues() {
     var isSubmitHandler = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -919,7 +973,8 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
     value: {
       allowAddPeriod: allowAddPeriod,
       firstDay: firstDay,
-      slotInterval: slotInterval
+      slotInterval: slotInterval,
+      hourFormat: hourFormat
     },
     children: /*#__PURE__*/jsx("div", {
       className: "neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0",