@bigbinary/neeto-molecules 3.9.10 → 3.9.12

package/dist/Schedule.js

@@ -1,7 +1,6 @@
-import { createContext, useContext, useState, useEffect, useImperativeHandle, createElement, forwardRef } from 'react';
-import { FieldArray, ErrorMessage, useFormikContext, Formik, Form as Form$1 } from 'formik';
-import { findIndexBy, isPresent, toLabelAndValue, isNotPresent, noop } from '@bigbinary/neeto-cist';
-import { uniq, pluck, difference, append, without, identity, pick, assoc } from 'ramda';
+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, 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';
@@ -11,6 +10,7 @@ import { ianaTimezoneToHumanReadable } from '@bigbinary/neeto-time-zones';
 import i18next from 'i18next';
 import { dayjs } from '@bigbinary/neeto-commons-frontend/utils';
 import { timeFormat } from '@bigbinary/neeto-commons-frontend/utils/datetime';
+import { fromPairs, map, prop, pick, assoc, uniq, pluck, difference, append, without, identity } from 'ramda';
 import * as yup from 'yup';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
@@ -176,22 +176,25 @@ var sortDays = function sortDays(chosenIndex) {
   if (chosenIndex < 0 || chosenIndex >= 7) return DAYS;
   return [].concat(_toConsumableArray(DAYS.slice(chosenIndex)), _toConsumableArray(DAYS.slice(0, chosenIndex)));
 };
+var wdayValidation = yup.object().shape({
+  periods: yup.array().of(yup.object().shape({
+    startTime: yup.string().required(i18next.t("neetoMolecules.schedule.errors.period.startTime")),
+    endTime: yup.string().required(i18next.t("neetoMolecules.schedule.errors.period.endTime")).test("ensureToTimeNotBehindFromTime", i18next.t("neetoMolecules.schedule.errors.period.isBehind"), function (value) {
+      var startTime = this.parent.startTime;
+      if (isFromAndToSame(value, startTime)) return true;
+      return isTimeBehind(startTime, value);
+    })
+  }).test("ensureTimeNotSame", i18next.t("neetoMolecules.schedule.errors.period.sameTime"), function (value) {
+    var startTime = value.startTime,
+      endTime = value.endTime;
+    return !isFromAndToSame(startTime, endTime);
+  })).ensureSlotsCantOverlap()
+});
 var getScheduleValidationSchema = function getScheduleValidationSchema() {
   return yup.object().shape({
-    wdays: yup.array().of(yup.object().shape({
-      periods: yup.array().of(yup.object().shape({
-        startTime: yup.string().required(i18next.t("neetoMolecules.schedule.errors.period.startTime")),
-        endTime: yup.string().required(i18next.t("neetoMolecules.schedule.errors.period.endTime")).test("ensureToTimeNotBehindFromTime", i18next.t("neetoMolecules.schedule.errors.period.isBehind"), function (value) {
-          var startTime = this.parent.startTime;
-          if (isFromAndToSame(value, startTime)) return true;
-          return isTimeBehind(startTime, value);
-        })
-      }).test("ensureTimeNotSame", i18next.t("neetoMolecules.schedule.errors.period.sameTime"), function (value) {
-        var startTime = value.startTime,
-          endTime = value.endTime;
-        return !isFromAndToSame(startTime, endTime);
-      })).ensureSlotsCantOverlap()
-    }))
+    wdays: yup.object().shape(fromPairs(map(function (day) {
+      return [day, wdayValidation];
+    }, DAYS)))
   });
 };
 var getUserTimeZone = function getUserTimeZone() {
@@ -281,6 +284,62 @@ var findIndicesOfOverlappingRangesInPeriods = function findIndicesOfOverlappingR
     secondIndex: secondIndex
   };
 };
+var handleCopy = function handleCopy(_ref3) {
+  var _values$wdays$day$per;
+  var values = _ref3.values,
+    day = _ref3.day,
+    setFieldValue = _ref3.setFieldValue,
+    wdaysToCopy = _ref3.wdaysToCopy;
+  var newPeriods = (_values$wdays$day$per = values.wdays[day].periods) === null || _values$wdays$day$per === void 0 ? void 0 : _values$wdays$day$per.map(pick(["startTime", "endTime"]));
+  if (isNotPresent(newPeriods)) return;
+  wdaysToCopy.forEach(function (wday) {
+    return setFieldValue("wdays.".concat(wday), {
+      available: true,
+      periods: newPeriods.map(assoc("wday", wday))
+    });
+  });
+};
+var buildFormValuesArray = function buildFormValuesArray(_ref4) {
+  var firstDay = _ref4.firstDay,
+    periods = _ref4.periods;
+  return sortDays(firstDay).map(function (wday) {
+    var _periods$wday;
+    return {
+      periods: sortPeriodsByKey({
+        periods: periods[wday],
+        key: "startTime",
+        order: "asc"
+      }),
+      available: !!((_periods$wday = periods[wday]) !== null && _periods$wday !== void 0 && _periods$wday.length),
+      wday: wday
+    };
+  });
+};
+var buildFormValuesObject = function buildFormValuesObject(_ref5) {
+  var periods = _ref5.periods;
+  var formValues = {};
+  DAYS.forEach(function (wday) {
+    var _periods$wday2;
+    formValues[wday] = {
+      periods: sortPeriodsByKey({
+        periods: periods[wday],
+        key: "startTime",
+        order: "asc"
+      }),
+      available: !!((_periods$wday2 = periods[wday]) !== null && _periods$wday2 !== void 0 && _periods$wday2.length),
+      wday: wday
+    };
+  });
+  return formValues;
+};
+var processFormValues = function processFormValues(values, firstDay) {
+  return {
+    wdays: buildFormValuesArray({
+      firstDay: firstDay,
+      periods: map(prop("periods"), values.wdays)
+    })
+  };
+};
 
 var DisplayAvailability = function DisplayAvailability(_ref) {
   var periods = _ref.periods;
@@ -344,20 +403,17 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
 
 var buildSlotIntervals = function buildSlotIntervals(_ref) {
   var interval = _ref.interval,
-    bookedSlots = _ref.bookedSlots,
-    slotType = _ref.slotType,
-    _ref$selectedValue = _ref.selectedValue,
-    selectedValue = _ref$selectedValue === void 0 ? null : _ref$selectedValue;
-  var selectedOption = {
-    label: selectedValue,
-    value: selectedValue
-  };
+    bookedSlots = _ref.bookedSlots;
   var allIntervalsForADay = dayjsExtended.timeIntervalsForDay(interval);
   allIntervalsForADay.push(END_OF_DAY);
-  var uniqBookedSlots = uniq(pluck(slotType, bookedSlots));
-  var slotsAvailableForBooking = difference(allIntervalsForADay, uniqBookedSlots);
-  var slots = slotsAvailableForBooking.map(toLabelAndValue);
-  return selectedValue ? sortSlots([selectedOption].concat(_toConsumableArray(slots))) : slots;
+  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);
+    if (!selectedValue) return slots;
+    return sortSlots([toLabelAndValue(selectedValue)].concat(_toConsumableArray(slots)));
+  };
 };
 var sortSlots = function sortSlots(slots) {
   return slots.sort(function (a, b) {
@@ -400,36 +456,43 @@ var addDefaultPeriod = function addDefaultPeriod(wday) {
 };
 
 var ScheduleRow = function ScheduleRow(_ref) {
-  var values = _ref.values,
-    setFieldValue = _ref.setFieldValue,
-    wdayIndex = _ref.wdayIndex,
-    day = _ref.day;
+  var day = _ref.day;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var bookedSlots = values.wdays[day].periods;
+  var _useContext = useContext(ScheduleContext),
+    allowAddPeriod = _useContext.allowAddPeriod,
+    slotInterval = _useContext.slotInterval;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var sortSlotsInterval = useMemo(function () {
+    return buildSlotIntervals({
+      interval: slotInterval,
+      bookedSlots: bookedSlots
+    });
+  }, [slotInterval, bookedSlots]);
   var handleAddRow = function handleAddRow(arrayHelpers) {
-    if (isNotPresent(values.wdays[wdayIndex].periods)) {
+    if (isNotPresent(values.wdays[day].periods)) {
       arrayHelpers.push(addDefaultPeriod(day));
     } else {
-      arrayHelpers.push(generateNewPeriod(values.wdays[wdayIndex].periods, day));
+      arrayHelpers.push(generateNewPeriod(values.wdays[day].periods, day));
     }
-    setFieldValue("wdays[".concat(wdayIndex, "].available"), true);
+    setFieldValue("wdays.".concat(day, ".available"), true);
   };
   var handleDeleteRow = function handleDeleteRow(arrayHelpers, index) {
-    var isLastRowDeleted = values.wdays[wdayIndex].periods.length === 1;
+    var isLastRowDeleted = values.wdays[day].periods.length === 1;
     arrayHelpers.remove(index);
-    setFieldValue("wdays[".concat(wdayIndex, "].available"), !isLastRowDeleted);
+    setFieldValue("wdays.".concat(day, ".available"), !isLastRowDeleted);
   };
-  var _useContext = useContext(ScheduleContext),
-    allowAddPeriod = _useContext.allowAddPeriod,
-    slotInterval = _useContext.slotInterval;
   return /*#__PURE__*/jsx(FieldArray, {
-    name: "wdays[".concat(wdayIndex, "].periods"),
+    name: "wdays.".concat(day, ".periods"),
     render: function render(arrayHelpers) {
-      var _values$wdays$wdayInd, _values$wdays$wdayInd2;
+      var _values$wdays$day, _values$wdays$day$per;
       return /*#__PURE__*/jsxs(Fragment, {
-        children: [isPresent((_values$wdays$wdayInd = values.wdays[wdayIndex]) === null || _values$wdays$wdayInd === void 0 ? void 0 : _values$wdays$wdayInd.periods) && /*#__PURE__*/jsx("div", {
+        children: [isPresent((_values$wdays$day = values.wdays[day]) === null || _values$wdays$day === void 0 ? void 0 : _values$wdays$day.periods) && /*#__PURE__*/jsx("div", {
           className: "w-full space-y-2",
-          children: (_values$wdays$wdayInd2 = values.wdays[wdayIndex].periods) === null || _values$wdays$wdayInd2 === void 0 ? void 0 : _values$wdays$wdayInd2.map(function (period, index) {
+          children: (_values$wdays$day$per = values.wdays[day].periods) === null || _values$wdays$day$per === void 0 ? void 0 : _values$wdays$day$per.map(function (period, index) {
             return /*#__PURE__*/jsxs("div", {
               className: "flex w-full flex-col sm:mx-auto sm:w-80",
               children: [/*#__PURE__*/jsxs("div", {
@@ -441,18 +504,13 @@ var ScheduleRow = function ScheduleRow(_ref) {
                   className: "w-full",
                   components: REMOVE_SELECT_DOWN_ARROW,
                   filterOption: customFilter,
-                  name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "].startTime"),
+                  name: "wdays.".concat(day, ".periods[").concat(index, "].startTime"),
                   placeholder: t("neetoMolecules.schedule.startTime"),
                   styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
-                  options: buildSlotIntervals({
-                    interval: slotInterval,
-                    bookedSlots: values.wdays[wdayIndex].periods,
-                    slotType: "startTime",
-                    selectedValue: period === null || period === void 0 ? void 0 : period.startTime
-                  }),
+                  options: sortSlotsInterval("startTime", period === null || period === void 0 ? void 0 : period.startTime),
                   value: slotsSelectComponentDefaultValue(period === null || period === void 0 ? void 0 : period.startTime),
                   onChange: function onChange(e) {
-                    return setFieldValue("wdays[".concat(wdayIndex, "].periods[").concat(index, "].startTime"), (e === null || e === void 0 ? void 0 : e.value) || "");
+                    return setFieldValue("wdays.".concat(day, ".periods[").concat(index, "].startTime"), (e === null || e === void 0 ? void 0 : e.value) || "");
                   }
                 }), /*#__PURE__*/jsx(Select, {
                   isClearable: true,
@@ -460,18 +518,13 @@ var ScheduleRow = function ScheduleRow(_ref) {
                   className: "w-full",
                   components: REMOVE_SELECT_DOWN_ARROW,
                   filterOption: customFilter,
-                  name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "].endTime"),
+                  name: "wdays.".concat(day, ".periods[").concat(index, "].endTime"),
+                  options: sortSlotsInterval("endTime", period === null || period === void 0 ? void 0 : period.endTime),
                   placeholder: t("neetoMolecules.schedule.endTime"),
                   styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
                   value: slotsSelectComponentDefaultValue(period === null || period === void 0 ? void 0 : period.endTime),
-                  options: buildSlotIntervals({
-                    interval: slotInterval,
-                    bookedSlots: values.wdays[wdayIndex].periods,
-                    slotType: "endTime",
-                    selectedValue: period === null || period === void 0 ? void 0 : period.endTime
-                  }),
                   onChange: function onChange(e) {
-                    return setFieldValue("wdays[".concat(wdayIndex, "].periods[").concat(index, "].endTime"), (e === null || e === void 0 ? void 0 : e.value) || "");
+                    return setFieldValue("wdays.".concat(day, ".periods[").concat(index, "].endTime"), (e === null || e === void 0 ? void 0 : e.value) || "");
                   }
                 }), /*#__PURE__*/jsx(Button, {
                   className: "flex-shrink-0 self-start",
@@ -484,7 +537,7 @@ var ScheduleRow = function ScheduleRow(_ref) {
                   }
                 })]
               }), /*#__PURE__*/jsx(ErrorMessage, {
-                name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "]"),
+                name: "wdays.".concat(day, ".periods[").concat(index, "]"),
                 children: function children(message) {
                   return _typeof(message) !== "object" && /*#__PURE__*/jsx("span", {
                     className: "neeto-ui-text-error-500 mt-1 w-11/12 px-2 text-xs",
@@ -492,9 +545,9 @@ var ScheduleRow = function ScheduleRow(_ref) {
                   });
                 }
               })]
-            }, "wdays[".concat(wdayIndex, "].periods[").concat(index, "]"));
+            }, "wdays.".concat(day, ".periods[").concat(index, "]"));
           })
-        }), values.wdays[wdayIndex].available && allowAddPeriod && /*#__PURE__*/jsx(Button, {
+        }), values.wdays[day].available && allowAddPeriod && /*#__PURE__*/jsx(Button, {
           className: "absolute right-14 top-3 ml-auto flex-shrink-0 sm:static",
           "data-cy": "add-new-period-button",
           "data-testid": "add-new-period-button",
@@ -514,14 +567,11 @@ var ScheduleRow = function ScheduleRow(_ref) {
     }
   });
 };
+var ScheduleRow$1 = /*#__PURE__*/memo(ScheduleRow);
 
 var Form = function Form(_ref) {
-  var _values$wdays$index;
-  var day = _ref.day,
-    handleCopy = _ref.handleCopy,
-    values = _ref.values,
-    setFieldValue = _ref.setFieldValue,
-    index = _ref.index;
+  var _values$wdays$day;
+  var day = _ref.day;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     deletedPeriods = _useState2[0],
@@ -530,39 +580,42 @@ var Form = function Form(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     wdaysToCopy = _useState4[0],
     setWdaysToCopy = _useState4[1];
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useContext = useContext(ScheduleContext),
     firstDay = _useContext.firstDay;
-  var restoreDeletedPeriods = function restoreDeletedPeriods(setFieldValue) {
-    setFieldValue("wdays[".concat(index, "].periods"), deletedPeriods);
+  var restoreDeletedPeriods = function restoreDeletedPeriods() {
+    setFieldValue("wdays.".concat(day, ".periods"), deletedPeriods);
   };
-  var uncheckCheckbox = function uncheckCheckbox(setFieldValue, values) {
-    var _values$wdays$index$p;
-    setFieldValue("wdays[".concat(index, "].available"), false);
-    setFieldValue("wdays[".concat(index, "].periods"), []);
-    if ((_values$wdays$index$p = values.wdays[index].periods[0]) !== null && _values$wdays$index$p !== void 0 && _values$wdays$index$p.id) {
-      setDeletedPeriods(values.wdays[index].periods.filter(function (item) {
+  var uncheckCheckbox = function uncheckCheckbox() {
+    var _values$wdays$day$per;
+    setFieldValue("wdays.".concat(day, ".available"), false);
+    setFieldValue("wdays.".concat(day, ".periods"), []);
+    if ((_values$wdays$day$per = values.wdays[day].periods[0]) !== null && _values$wdays$day$per !== void 0 && _values$wdays$day$per.id) {
+      setDeletedPeriods(values.wdays[day].periods.filter(function (item) {
         return item.startTime && item.endTime;
       }).map(identity));
     }
   };
-  var checkCheckbox = function checkCheckbox(setFieldValue) {
+  var checkCheckbox = function checkCheckbox() {
     var _deletedPeriods$;
-    setFieldValue("wdays[".concat(index, "].available"), true);
+    setFieldValue("wdays.".concat(day, ".available"), true);
     if ((_deletedPeriods$ = deletedPeriods[0]) !== null && _deletedPeriods$ !== void 0 && _deletedPeriods$.startTime) {
-      restoreDeletedPeriods(setFieldValue);
-    } else if (isNotPresent(values.wdays[index].periods)) {
-      setFieldValue("wdays[".concat(index, "].periods"), [addDefaultPeriod(day)]);
+      restoreDeletedPeriods();
+    } else if (isNotPresent(values.wdays[day].periods)) {
+      setFieldValue("wdays.".concat(day, ".periods"), [addDefaultPeriod(day)]);
     } else {
-      setFieldValue("wdays[".concat(index, "].periods"), [""]);
+      setFieldValue("wdays.".concat(day, ".periods"), [""]);
     }
   };
-  var handleCheckbox = function handleCheckbox(setFieldValue, values) {
-    if (values.wdays[index].available) {
-      uncheckCheckbox(setFieldValue, values);
+  var handleCheckbox = function handleCheckbox() {
+    if (values.wdays[day].available) {
+      uncheckCheckbox();
     } else {
-      checkCheckbox(setFieldValue);
+      checkCheckbox();
     }
   };
   var handleCopyChange = function handleCopyChange(e, day) {
@@ -576,34 +629,29 @@ var Form = function Form(_ref) {
       "data-cy": "working-day-container",
       children: [/*#__PURE__*/jsxs("div", {
         className: classnames("flex w-36 flex-shrink-0 items-center justify-start sm:mt-1", {
-          "mb-3 sm:mb-0": isPresent((_values$wdays$index = values.wdays[index]) === null || _values$wdays$index === void 0 ? void 0 : _values$wdays$index.periods)
+          "mb-3 sm:mb-0": isPresent((_values$wdays$day = values.wdays[day]) === null || _values$wdays$day === void 0 ? void 0 : _values$wdays$day.periods)
         }),
         children: [/*#__PURE__*/jsx(Switch, {
-          "aria-label": "wdays[".concat(index, "].available"),
-          checked: values.wdays[index].available,
+          "aria-label": "wdays.".concat(day, ".available"),
+          checked: values.wdays[day].available,
           className: "flex-grow-0",
           "data-cy": joinHyphenCase(day, "weekly-hours-checkbox"),
           id: "day",
-          name: "wdays[".concat(index, "].available"),
-          onChange: function onChange() {
-            return handleCheckbox(setFieldValue, values);
-          }
+          name: "wdays.".concat(day, ".available"),
+          onChange: handleCheckbox
         }), /*#__PURE__*/jsx(Typography, {
           component: "span",
           "data-cy": joinHyphenCase(day, "day-text"),
           style: "body2",
-          weight: values.wdays[index].available ? "semibold" : "normal",
+          weight: values.wdays[day].available ? "semibold" : "normal",
           className: classnames("ml-2 capitalize", {
-            "neeto-ui-text-gray-600": !values.wdays[index].available
+            "neeto-ui-text-gray-600": !values.wdays[day].available
           }),
           children: t("neetoMolecules.schedule.days.".concat(day))
         })]
-      }), /*#__PURE__*/jsx(ScheduleRow, {
-        day: day,
-        setFieldValue: setFieldValue,
-        values: values,
-        wdayIndex: index
-      }), values.wdays[index].available && /*#__PURE__*/jsxs(Dropdown, {
+      }), /*#__PURE__*/jsx(ScheduleRow$1, {
+        day: day
+      }), values.wdays[day].available && /*#__PURE__*/jsxs(Dropdown, {
         closeOnSelect: true,
         buttonStyle: "secondary",
         icon: Copy,
@@ -658,7 +706,7 @@ var Form = function Form(_ref) {
             onClick: function onClick() {
               handleCopy({
                 values: values,
-                index: index,
+                day: day,
                 setFieldValue: setFieldValue,
                 wdaysToCopy: wdaysToCopy
               });
@@ -670,19 +718,20 @@ var Form = function Form(_ref) {
     })
   });
 };
+var Form$1 = /*#__PURE__*/memo(Form);
 
 var Fields = function Fields(_ref) {
-  var handleCopy = _ref.handleCopy,
-    handleValuesChanged = _ref.handleValuesChanged,
+  var handleValuesChanged = _ref.handleValuesChanged,
     scheduleRef = _ref.scheduleRef;
+  var _useContext = useContext(ScheduleContext),
+    firstDay = _useContext.firstDay;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
-    setFieldValue = _useFormikContext.setFieldValue,
     resetForm = _useFormikContext.resetForm,
     errors = _useFormikContext.errors,
     dirty = _useFormikContext.dirty;
   useEffect(function () {
-    handleValuesChanged(values, dirty);
+    handleValuesChanged(processFormValues(values, firstDay), dirty);
   }, [values]);
   useImperativeHandle(scheduleRef, function () {
     return {
@@ -690,25 +739,10 @@ var Fields = function Fields(_ref) {
       errors: errors
     };
   });
-  return /*#__PURE__*/jsx(FieldArray, {
-    name: "wdays",
-    render: function render() {
-      return /*#__PURE__*/jsx("div", {
-        className: "space-y-4",
-        children: values.wdays.map(function (item, index) {
-          return /*#__PURE__*/createElement(Form, {
-            handleCopy: handleCopy,
-            index: index,
-            setFieldValue: setFieldValue,
-            values: values,
-            day: DAYS.find(function (day) {
-              return day === item.wday;
-            }),
-            key: item.wday
-          });
-        })
-      });
-    }
+  return sortDays(firstDay).map(function (wday) {
+    return /*#__PURE__*/jsx(Form$1, {
+      day: wday
+    }, wday);
   });
 };
 
@@ -829,69 +863,52 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
     showTimeZone = _ref$showTimeZone === void 0 ? true : _ref$showTimeZone,
     _ref$slotInterval = _ref.slotInterval,
     slotInterval = _ref$slotInterval === void 0 ? DEFAULT_SLOT_INTERVAL : _ref$slotInterval;
-  var handleCopy = function handleCopy(_ref2) {
-    var _values$wdays$index$p;
-    var values = _ref2.values,
-      index = _ref2.index,
-      setFieldValue = _ref2.setFieldValue,
-      wdaysToCopy = _ref2.wdaysToCopy;
-    var newPeriods = (_values$wdays$index$p = values.wdays[index].periods) === null || _values$wdays$index$p === void 0 ? void 0 : _values$wdays$index$p.map(pick(["startTime", "endTime"]));
-    wdaysToCopy.forEach(function (wday) {
-      var dayIndex = sortDays(firstDay).indexOf(wday);
-      setFieldValue("wdays[".concat(dayIndex, "].available"), isPresent(values.wdays[index].periods));
-      setFieldValue("wdays[".concat(dayIndex, "].periods"), newPeriods.map(function (period) {
-        return assoc("wday", wday, period);
-      }));
-    });
-  };
+  var validationSchema = useMemo(getScheduleValidationSchema, []);
   var getInitialFormValues = function getInitialFormValues() {
-    return sortDays(firstDay).map(function (wday) {
-      var _periods$wday;
-      return {
-        periods: sortPeriodsByKey({
-          periods: periods[wday],
-          key: "startTime",
-          order: "asc"
-        }),
-        available: !!((_periods$wday = periods[wday]) !== null && _periods$wday !== void 0 && _periods$wday.length),
-        wday: wday
-      };
+    var isSubmitHandler = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (isSubmitHandler) {
+      return buildFormValuesArray({
+        firstDay: firstDay,
+        periods: periods
+      });
+    }
+    return buildFormValuesObject({
+      periods: periods
     });
   };
-  return /*#__PURE__*/jsx("div", {
-    className: "neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0",
-    children: /*#__PURE__*/jsx(Formik, {
-      enableReinitialize: true,
-      initialValues: {
-        wdays: getInitialFormValues()
-      },
-      validationSchema: getScheduleValidationSchema(),
-      onSubmit: function onSubmit(values) {
-        return handleSubmit(values, getInitialFormValues());
-      },
-      children: /*#__PURE__*/jsxs(Fragment, {
-        children: [showHeader && /*#__PURE__*/jsx(Header, {
-          isCreating: isCreating,
-          isEditable: isEditable,
-          isEditing: isEditing,
-          setIsEditing: setIsEditing,
-          showTimeZone: showTimeZone
-        }), /*#__PURE__*/jsx(ScheduleContext.Provider, {
-          value: {
-            allowAddPeriod: allowAddPeriod,
-            firstDay: firstDay,
-            slotInterval: slotInterval
-          },
-          children: isEditing || !showHeader ? /*#__PURE__*/jsx(Form$1, {
+  return /*#__PURE__*/jsx(ScheduleContext.Provider, {
+    value: {
+      allowAddPeriod: allowAddPeriod,
+      firstDay: firstDay,
+      slotInterval: slotInterval
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0",
+      children: /*#__PURE__*/jsx(Formik, {
+        validationSchema: validationSchema,
+        enableReinitialize: true,
+        initialValues: {
+          wdays: getInitialFormValues()
+        },
+        onSubmit: function onSubmit(values) {
+          handleSubmit(processFormValues(values, firstDay), getInitialFormValues(true));
+        },
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [showHeader && /*#__PURE__*/jsx(Header, {
+            isCreating: isCreating,
+            isEditable: isEditable,
+            isEditing: isEditing,
+            setIsEditing: setIsEditing,
+            showTimeZone: showTimeZone
+          }), isEditing || !showHeader ? /*#__PURE__*/jsx(Form$2, {
             children: /*#__PURE__*/jsx(Fields, {
-              handleCopy: handleCopy,
               handleValuesChanged: handleValuesChanged,
               scheduleRef: scheduleRef
             })
           }) : /*#__PURE__*/jsx(DisplayAvailability, {
             periods: periods
-          })
-        })]
+          })]
+        })
       })
     })
   });