@bigbinary/neeto-molecules 1.1.77 → 1.2.0-beta1

package/dist/Schedule.js

@@ -1,80 +1,34 @@
-import React, { createContext, useContext, useState, useEffect, useImperativeHandle, forwardRef } from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useImperativeHandle, 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, mergeRight, pick, assoc } from 'ramda';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { timeFormat, joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
-import { Typography, Button, Dropdown, Label, Checkbox as Checkbox$1, Tooltip } from '@bigbinary/neetoui';
+import { uniq, pluck, difference, append, without, identity, pick, assoc } from 'ramda';
+import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
+import { Typography, Button, Dropdown, Label, Checkbox, Tooltip } from '@bigbinary/neetoui';
+import { _ as _slicedToArray } from './slicedToArray-b4278ecd.js';
 import { ianaTimezoneToHumanReadable } from '@bigbinary/neeto-time-zones';
 import dayjs from 'dayjs';
 import i18next from 'i18next';
+import { timeFormat } from '@bigbinary/neeto-commons-frontend/utils/datetime';
 import * as yup from 'yup';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
-import { Delete, Plus, Copy, MenuVertical, MenuHorizontal } from '@bigbinary/neeto-icons';
-import { Select, Checkbox } from '@bigbinary/neetoui/formik';
+import { a as _toPropertyKey, _ as _defineProperty, b as _typeof } from './defineProperty-549061a7.js';
+import classnames from 'classnames';
+import { Delete, Plus, Copy } from '@bigbinary/neeto-icons';
+import { Select, Switch } from '@bigbinary/neetoui/formik';
 import { useTranslation } from 'react-i18next';
+import { _ as _toConsumableArray } from './toConsumableArray-1cc38429.js';
+import { Profile } from '@bigbinary/neeto-team-members-frontend';
+import MoreDropdown from './MoreDropdown.js';
+import { n } from './inject-css-c86de496.js';
+import './extends-093996c9.js';
+import './objectWithoutProperties-a0edb288.js';
 
 var DAYS = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
 var DEFAULT_SLOT_INTERVAL = 30;
-var MY_PROFILE_URL = "/auth/profile/edit";
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray$1(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
-}
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -82,32 +36,6 @@ function _classCallCheck(instance, Constructor) {
   }
 }
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
     var descriptor = props[i];
@@ -128,23 +56,8 @@ function _createClass(Constructor, protoProps, staticProps) {
 
 var INTERVALS = ["year", "quarter", "month", "week", "day", "hour", "minute", "second"];
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var REMOVE_SELECT_DOWN_ARROW = {
   DropdownIndicator: function DropdownIndicator() {
     return null;
@@ -155,7 +68,7 @@ var REMOVE_SELECT_DOWN_ARROW = {
 };
 var BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN = {
   singleValue: function singleValue(base, state) {
-    return _objectSpread$2(_objectSpread$2({}, base), {}, {
+    return _objectSpread(_objectSpread({}, base), {}, {
       color: state.selectProps.menuIsOpen ? "#c2c8cc" : base.color
     });
   }
@@ -299,6 +212,9 @@ var getUserTimeZone = function getUserTimeZone() {
 var getTimeZoneAndTime = function getTimeZoneAndTime() {
   var timeZone = getUserTimeZone();
   var humanReadableTimezone = ianaTimezoneToHumanReadable(timeZone);
+
+  // Requires timezone initialization
+  // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
   return "".concat(humanReadableTimezone, ": ").concat(dayjs().tz(timeZone).format(SLOT_TIME_FORMAT));
 };
 var isTimeBehind = function isTimeBehind(timeA, timeB) {
@@ -380,46 +296,46 @@ var findIndicesOfOverlappingRangesInPeriods = function findIndicesOfOverlappingR
 var DisplayAvailability = withT(function (_ref) {
   var t = _ref.t,
     periods = _ref.periods;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full space-y-4"
   }, DAYS.map(function (day) {
     var _sortPeriodsByKey;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-rounded-md neeto-ui-shadow-s neeto-ui-border-gray-300 flex w-full items-start justify-start border py-4 px-12",
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "neeto-ui-rounded-md neeto-ui-shadow-s neeto-ui-border-gray-300 flex w-full flex-wrap items-center justify-center gap-2 border px-6 py-4 sm:items-start sm:justify-start",
       key: day
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: "mt-0.5 w-16",
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      className: "mt-0.5 w-24 text-center sm:w-1/4 sm:text-left",
       "data-cy": joinHyphenCase(day, "day-text"),
       style: "h5",
       weight: "semibold"
-    }, t("neetoMolecules.schedule.days.".concat(day))), /*#__PURE__*/React.createElement("div", {
-      className: "flex w-9/12 flex-col items-center space-y-4"
+    }, t("neetoMolecules.schedule.days.".concat(day))), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-grow flex-col items-center space-y-4 sm:w-1/2"
     }, isPresent(periods[day]) ? (_sortPeriodsByKey = sortPeriodsByKey({
       periods: periods[day],
       key: "startTime",
       order: "asc"
     })) === null || _sortPeriodsByKey === void 0 ? void 0 : _sortPeriodsByKey.map(function (period) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default.createElement("div", {
         className: "flex items-center space-x-4",
         key: period.id
-      }, /*#__PURE__*/React.createElement(Typography, {
-        className: "w-24 text-right",
+      }, /*#__PURE__*/React__default.createElement(Typography, {
+        className: "w-20 text-right",
         lineHeight: "relaxed",
         style: "h5",
         weight: "semibold",
         "data-cy": joinHyphenCase(day, period.startTime, "start-time-text")
-      }, period.startTime), /*#__PURE__*/React.createElement(Typography, {
+      }, period.startTime), /*#__PURE__*/React__default.createElement(Typography, {
         className: "neeto-ui-text-gray-600",
         component: "span"
-      }, "-"), /*#__PURE__*/React.createElement(Typography, {
-        className: "w-24 text-left",
+      }, "-"), /*#__PURE__*/React__default.createElement(Typography, {
+        className: "w-20 text-left",
         lineHeight: "relaxed",
         style: "h5",
         weight: "semibold",
         "data-cy": joinHyphenCase(day, period.endTime, "start-time-text")
       }, period.endTime));
-    }) : /*#__PURE__*/React.createElement(Typography, {
-      className: "mx-8 mt-0.5",
+    }) : /*#__PURE__*/React__default.createElement(Typography, {
+      className: "mx-8 flex-grow text-center",
       "data-cy": joinHyphenCase(day, "unavailable-time-text"),
       lineHeight: "relaxed",
       style: "h5"
@@ -427,22 +343,6 @@ var DisplayAvailability = withT(function (_ref) {
   }));
 });
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
-}
-
 var buildSlotIntervals = function buildSlotIntervals(_ref) {
   var interval = _ref.interval,
     bookedSlots = _ref.bookedSlots,
@@ -528,28 +428,20 @@ var ScheduleRow = function ScheduleRow(_ref) {
   };
   var _useContext = useContext(ScheduleContext),
     allowAddPeriod = _useContext.allowAddPeriod;
-  return /*#__PURE__*/React.createElement(FieldArray, {
+  return /*#__PURE__*/React__default.createElement(FieldArray, {
     name: "wdays[".concat(wdayIndex, "].periods"),
     render: function render(arrayHelpers) {
       var _values$wdays$wdayInd, _values$wdays$wdayInd2;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "flex w-full items-start justify-between"
-      }, isNotPresent((_values$wdays$wdayInd = values.wdays[wdayIndex]) === null || _values$wdays$wdayInd === void 0 ? void 0 : _values$wdays$wdayInd.periods) ? /*#__PURE__*/React.createElement("div", {
-        className: "mx-auto mt-1 flex w-80 items-center justify-center"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        "data-cy": "unavailable-text",
-        lineHeight: "relaxed",
-        style: "h5"
-      }, t("neetoMolecules.schedule.unavailable"))) : /*#__PURE__*/React.createElement("div", {
-        className: "w-full space-y-4"
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isPresent((_values$wdays$wdayInd = values.wdays[wdayIndex]) === null || _values$wdays$wdayInd === void 0 ? void 0 : _values$wdays$wdayInd.periods) && /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full space-y-2"
       }, (_values$wdays$wdayInd2 = values.wdays[wdayIndex].periods) === null || _values$wdays$wdayInd2 === void 0 ? void 0 : _values$wdays$wdayInd2.map(function (period, index) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "mx-auto flex w-80 flex-col",
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "flex w-full flex-col sm:mx-auto sm:w-80",
           key: "wdays[".concat(wdayIndex, "].periods[").concat(index, "]")
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "flex min-w-full items-start space-x-3",
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "flex items-start gap-2 sm:gap-3",
           "data-cy": "schedule-row"
-        }, /*#__PURE__*/React.createElement(Select, {
+        }, /*#__PURE__*/React__default.createElement(Select, {
           isClearable: true,
           isSearchable: true,
           className: "w-full",
@@ -568,7 +460,7 @@ var ScheduleRow = function ScheduleRow(_ref) {
           onChange: function onChange(e) {
             return setFieldValue("wdays[".concat(wdayIndex, "].periods[").concat(index, "].startTime"), (e === null || e === void 0 ? void 0 : e.value) || "");
           }
-        }), /*#__PURE__*/React.createElement(Select, {
+        }), /*#__PURE__*/React__default.createElement(Select, {
           isClearable: true,
           isSearchable: true,
           className: "w-full",
@@ -577,32 +469,34 @@ var ScheduleRow = function ScheduleRow(_ref) {
           name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "].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: DEFAULT_SLOT_INTERVAL,
             bookedSlots: values.wdays[wdayIndex].periods,
             slotType: "endTime",
             selectedValue: period === null || period === void 0 ? void 0 : period.endTime
           }),
-          value: slotsSelectComponentDefaultValue(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) || "");
           }
-        }), /*#__PURE__*/React.createElement(Delete, {
-          className: "hover:neeto-ui-text-error-600 mt-2 w-16 cursor-pointer",
+        }), /*#__PURE__*/React__default.createElement(Button, {
+          className: "flex-shrink-0 self-start",
           "data-cy": "delete-period-button",
-          size: 20,
+          "data-testid": "delete-period-button",
+          icon: Delete,
+          style: "text",
           onClick: function onClick() {
             return handleDeleteRow(arrayHelpers, index);
           }
-        })), /*#__PURE__*/React.createElement(ErrorMessage, {
+        })), /*#__PURE__*/React__default.createElement(ErrorMessage, {
           name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "]")
         }, function (message) {
-          return _typeof(message) !== "object" && /*#__PURE__*/React.createElement("span", {
+          return _typeof(message) !== "object" && /*#__PURE__*/React__default.createElement("span", {
             className: "neeto-ui-text-error-500 mt-1 w-11/12 px-2 text-xs"
           }, message);
         }));
-      }))), allowAddPeriod && /*#__PURE__*/React.createElement(Button, {
-        className: "flex-shrink-0",
+      })), values.wdays[wdayIndex].available && allowAddPeriod && /*#__PURE__*/React__default.createElement(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",
         icon: Plus,
@@ -621,6 +515,7 @@ var ScheduleRow = function ScheduleRow(_ref) {
 };
 
 var Form = function Form(_ref) {
+  var _values$wdays$index;
   var day = _ref.day,
     handleCopy = _ref.handleCopy,
     values = _ref.values,
@@ -670,34 +565,40 @@ var Form = function Form(_ref) {
   var handleCopyChange = function handleCopyChange(e, day) {
     return setWdaysToCopy(e.target.checked ? append(day) : without([day]));
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-rounded-md neeto-ui-shadow-s neeto-ui-border-gray-300 w-full border px-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "my-4 flex w-full items-start space-x-4",
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-rounded-md neeto-ui-shadow-s neeto-ui-border-gray-300 relative w-full border px-4 md:px-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sm:flex-no-wrap my-4 flex w-full flex-wrap items-start gap-2 sm:flex-nowrap sm:gap-4" // Added `sm:flex-no-wrap` since neetoCal is using old version of tailwind
+    ,
     "data-cy": "working-day-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mt-1 flex w-16 items-center justify-start"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
+  }, /*#__PURE__*/React__default.createElement("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)
+    })
+  }, /*#__PURE__*/React__default.createElement(Switch, {
     "aria-label": "wdays[".concat(index, "].available"),
     checked: values.wdays[index].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);
     }
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "ml-2 capitalize",
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     component: "span",
     "data-cy": joinHyphenCase(day, "day-text"),
     style: "body2",
-    weight: "semibold"
-  }, t("neetoMolecules.schedule.days.".concat(day)))), /*#__PURE__*/React.createElement(ScheduleRow, {
+    weight: values.wdays[index].available ? "semibold" : "normal",
+    className: classnames("ml-2 capitalize", {
+      "neeto-ui-text-gray-600": !values.wdays[index].available
+    })
+  }, t("neetoMolecules.schedule.days.".concat(day)))), /*#__PURE__*/React__default.createElement(ScheduleRow, {
     day: day,
     setFieldValue: setFieldValue,
     values: values,
     wdayIndex: index
-  }), /*#__PURE__*/React.createElement(Dropdown, {
+  }), values.wdays[index].available && /*#__PURE__*/React__default.createElement(Dropdown, {
     closeOnSelect: true,
     buttonStyle: "secondary",
     icon: Copy,
@@ -708,26 +609,26 @@ var Form = function Form(_ref) {
         position: "top",
         hideAfter: 5000
       },
-      className: "flex-shrink-0",
+      className: "absolute right-4 top-3 sm:static flex-shrink-0",
       "data-testid": joinHyphenCase(day, "copy-schedule-icon"),
       "data-cy": joinHyphenCase(day, "copy-schedule-icon")
     },
     onClose: function onClose() {
       return setWdaysToCopy([]);
     }
-  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Typography, {
     style: "h5"
   }, t("neetoMolecules.schedule.copySchedule"))), DAYS.filter(function (copyDay) {
     return copyDay !== day;
   }).map(function (day) {
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/React__default.createElement("li", {
       key: day,
       onClick: function onClick(e) {
         return e.stopPropagation();
       }
-    }, /*#__PURE__*/React.createElement(Label, {
+    }, /*#__PURE__*/React__default.createElement(Label, {
       className: "w-full cursor-pointer capitalize"
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+    }, /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: wdaysToCopy.includes(day),
       id: day,
       label: t("neetoMolecules.schedule.days.".concat(day)),
@@ -735,7 +636,7 @@ var Form = function Form(_ref) {
         return handleCopyChange(e, day);
       }
     })));
-  }), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "copy-schedule-submit-button",
     disabled: isNotPresent(wdaysToCopy),
     label: t("neetoMolecules.common.actions.submit"),
@@ -771,13 +672,13 @@ var Fields = function Fields(_ref) {
       errors: errors
     };
   });
-  return /*#__PURE__*/React.createElement(FieldArray, {
+  return /*#__PURE__*/React__default.createElement(FieldArray, {
     name: "wdays",
     render: function render() {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default.createElement("div", {
         className: "space-y-4"
       }, values.wdays.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(Form, {
+        return /*#__PURE__*/React__default.createElement(Form, {
           handleCopy: handleCopy,
           index: index,
           setFieldValue: setFieldValue,
@@ -792,164 +693,10 @@ var Fields = function Fields(_ref) {
   });
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
-var _excluded$2 = ["label", "key"],
-  _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown.MenuItem,
-  Menu$1 = Dropdown.Menu;
-var Submenu = function Submenu(_ref) {
-  var label = _ref.label,
-    key = _ref.key,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
-    key: key,
-    position: "left",
-    trigger: "hover"
-  }, menuItemProps.dropdownProps), /*#__PURE__*/React.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  })));
-};
-
-var _excluded$1 = ["onClick", "label", "type", "hasSubItems"];
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MenuItem = Dropdown.MenuItem,
-  Divider = Dropdown.Divider;
-var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
-  var onClick = _ref.onClick,
-    label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
-    _ref$hasSubItems = _ref.hasSubItems,
-    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$1);
-  if (type === MENU_ITEM_TYPES.divider) {
-    return /*#__PURE__*/React.createElement(Divider, null);
-  }
-  if (hasSubItems) {
-    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$1({
-      label: label
-    }, menuItemProps));
-  }
-  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$1({
-    onClick: onClick
-  }, menuItemProps), label);
-};
-
-var _excluded = ["isVisible", "key"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu = Dropdown.Menu;
-var MoreDropdown = function MoreDropdown(_ref) {
-  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
-    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
-    _ref$isVertical = _ref.isVertical,
-    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    menuTopChildren = _ref.menuTopChildren,
-    menuBottomChildren = _ref.menuBottomChildren,
-    _ref$menuItems = _ref.menuItems,
-    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
-  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
-  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
-  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
-  if (isDropdownDisabled && !tooltipProps.disabled) {
-    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
-      disabled: true,
-      "data-cy": "more-dropdown-button",
-      "data-testid": "nui-dropdown-button",
-      icon: targetIcon,
-      iconPosition: "right",
-      size: "medium",
-      style: "text"
-    }, dropdownButtonProps))));
-  }
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    autoWidth: true,
-    className: "flex",
-    disabled: isDisabled,
-    icon: targetIcon,
-    buttonProps: _objectSpread({
-      className: "min-h-0 flex-shrink-0",
-      style: "text"
-    }, dropdownButtonProps)
-  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  }), menuBottomChildren));
-};
-
 var Header = function Header(_ref) {
-  var isEditing = _ref.isEditing,
+  var isCreating = _ref.isCreating,
+    isEditable = _ref.isEditable,
+    isEditing = _ref.isEditing,
     setIsEditing = _ref.setIsEditing;
   var _useFormikContext = useFormikContext(),
     dirty = _useFormikContext.dirty,
@@ -962,6 +709,10 @@ var Header = function Header(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     timeZoneAndTime = _useState2[0],
     setTimeZoneAndTime = _useState2[1];
+  var _Profile$usePaneState = Profile.usePaneState(),
+    _Profile$usePaneState2 = _slicedToArray(_Profile$usePaneState, 2);
+    _Profile$usePaneState2[0];
+    var setIsProfilePaneOpen = _Profile$usePaneState2[1];
   var handleReset = function handleReset() {
     if (dirty) resetForm();else setIsEditing(false);
   };
@@ -973,42 +724,48 @@ var Header = function Header(_ref) {
       return clearInterval(time);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mb-4 flex justify-between"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-6 flex flex-wrap justify-between gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-3"
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
     content: t("neetoMolecules.schedule.timezoneTooltip"),
     position: "bottom"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     component: "h4",
     "data-cy": "timezone-text",
     style: "h5",
     weight: "medium"
-  }, timeZoneAndTime)), /*#__PURE__*/React.createElement(MoreDropdown, {
+  }, timeZoneAndTime)), isEditable && /*#__PURE__*/React__default.createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "nui-more-dropdown"
+    },
     menuItems: [{
-      href: MY_PROFILE_URL,
+      onClick: function onClick() {
+        return setIsProfilePaneOpen(true);
+      },
       label: t("neetoMolecules.common.actions.changeTimezone"),
       target: "_blank",
-      key: "change-timezone-option"
+      key: "change-timezone-option",
+      "data-testid": "change-timezone-option"
     }]
-  })), isEditing ? /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-4"
-  }, /*#__PURE__*/React.createElement(Button, {
+  })), isEditing ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "reset-button",
     style: "secondary",
     label: !dirty ? t("neetoMolecules.common.actions.cancel") : t("neetoMolecules.common.actions.reset"),
     onClick: handleReset
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "weekly-hours-save-changes-button",
-    disabled: !dirty || isSubmitting,
+    disabled: !dirty && !isCreating || isSubmitting,
     label: t("neetoMolecules.common.actions.saveChanges"),
     loading: isSubmitting,
     onClick: submitForm
-  })) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  })) : /*#__PURE__*/React__default.createElement("div", null, isEditable && /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "weekly-schedule-header",
     label: t("neetoMolecules.schedule.changeAvailability"),
-    style: "secondary",
+    style: "primary",
     weight: "semibold",
     onClick: function onClick() {
       return setIsEditing(true);
@@ -1016,6 +773,9 @@ var Header = function Header(_ref) {
   })));
 };
 
+var css = ".neeto-molecules-schedule{margin:auto;max-width:40rem;width:100%}";
+n(css,{});
+
 var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
   var periods = _ref.periods,
     _ref$handleSubmit = _ref.handleSubmit,
@@ -1028,7 +788,11 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
     _ref$handleValuesChan = _ref.handleValuesChanged,
     handleValuesChanged = _ref$handleValuesChan === void 0 ? noop : _ref$handleValuesChan,
     _ref$allowAddPeriod = _ref.allowAddPeriod,
-    allowAddPeriod = _ref$allowAddPeriod === void 0 ? true : _ref$allowAddPeriod;
+    allowAddPeriod = _ref$allowAddPeriod === void 0 ? true : _ref$allowAddPeriod,
+    _ref$isEditable = _ref.isEditable,
+    isEditable = _ref$isEditable === void 0 ? true : _ref$isEditable,
+    _ref$isCreating = _ref.isCreating,
+    isCreating = _ref$isCreating === void 0 ? false : _ref$isCreating;
   var handleCopy = function handleCopy(_ref2) {
     var _values$wdays$index$p;
     var values = _ref2.values,
@@ -1058,9 +822,9 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
       };
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-200 w-41 flex-shrink-0"
-  }, /*#__PURE__*/React.createElement(Formik, {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0"
+  }, /*#__PURE__*/React__default.createElement(Formik, {
     enableReinitialize: true,
     initialValues: {
       wdays: getInitialFormValues()
@@ -1069,18 +833,20 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
     onSubmit: function onSubmit(values) {
       return handleSubmit(values, getInitialFormValues());
     }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, showHeader && /*#__PURE__*/React.createElement(Header, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showHeader && /*#__PURE__*/React__default.createElement(Header, {
+    isCreating: isCreating,
+    isEditable: isEditable,
     isEditing: isEditing,
     setIsEditing: setIsEditing
-  }), isEditing || !showHeader ? /*#__PURE__*/React.createElement(Form$1, null, /*#__PURE__*/React.createElement(ScheduleContext.Provider, {
+  }), isEditing || !showHeader ? /*#__PURE__*/React__default.createElement(Form$1, null, /*#__PURE__*/React__default.createElement(ScheduleContext.Provider, {
     value: {
       allowAddPeriod: allowAddPeriod
     }
-  }, /*#__PURE__*/React.createElement(Fields, {
+  }, /*#__PURE__*/React__default.createElement(Fields, {
     handleCopy: handleCopy,
     handleValuesChanged: handleValuesChanged,
     scheduleRef: scheduleRef
-  }))) : /*#__PURE__*/React.createElement(DisplayAvailability, {
+  }))) : /*#__PURE__*/React__default.createElement(DisplayAvailability, {
     periods: periods
   }))));
 });