@bigbinary/neeto-molecules 1.1.10 → 1.1.11

package/dist/Rename/index.js

@@ -0,0 +1,191 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useRef, Fragment } from "react";
+import classnames from "classnames";
+import { isNotEmpty, noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { useOnClickOutside, useStateWithDependency, useHotKeys } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Check, Close } from "@bigbinary/neeto-icons";
+import { Input, Button, Typography } from "@bigbinary/neetoui";
+import { isEmpty } from "ramda";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import MoreDropdown from "../MoreDropdown";
+import { MIN_WIDTH } from "./constants";
+import DummySpan from "./DummySpan";
+import "./rename.scss";
+import { mergeRefs } from "./utils";
+var Rename = function Rename(_ref) {
+  var value = _ref.value,
+    _ref$onRename = _ref.onRename,
+    onRename = _ref$onRename === void 0 ? noop : _ref$onRename,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$hideMenu = _ref.hideMenu,
+    hideMenu = _ref$hideMenu === void 0 ? false : _ref$hideMenu,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropdownItems = _ref.dropdownItems,
+    dropdownItems = _ref$dropdownItems === void 0 ? [] : _ref$dropdownItems,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$textProps = _ref.textProps,
+    textProps = _ref$textProps === void 0 ? {} : _ref$textProps,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$submitButtonProp = _ref.submitButtonProps,
+    submitButtonProps = _ref$submitButtonProp === void 0 ? {} : _ref$submitButtonProp,
+    _ref$cancelButtonProp = _ref.cancelButtonProps,
+    cancelButtonProps = _ref$cancelButtonProp === void 0 ? {} : _ref$cancelButtonProp,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$allowEmptySubmis = _ref.allowEmptySubmission,
+    allowEmptySubmission = _ref$allowEmptySubmis === void 0 ? false : _ref$allowEmptySubmis,
+    _ref$defaultName = _ref.defaultName,
+    defaultName = _ref$defaultName === void 0 ? "" : _ref$defaultName,
+    formatText = _ref.formatText;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useStateWithDependen = useStateWithDependency(value !== null && value !== void 0 ? value : ""),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    name = _useStateWithDependen2[0],
+    setName = _useStateWithDependen2[1];
+  var _useState = useState(isOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    editMode = _useState2[0],
+    setEditMode = _useState2[1];
+  var _useState3 = useState(MIN_WIDTH),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputWidth = _useState4[0],
+    setInputWidth = _useState4[1];
+  var renameRef = useRef(null);
+  var placeholderRef = useRef(null);
+  useOnClickOutside(renameRef, function () {
+    return editMode && handleClose();
+  });
+  var handleRename = function handleRename(event, name) {
+    event.stopPropagation();
+    var newName = allowEmptySubmission && isEmpty(name) ? defaultName : name;
+    setName(newName);
+    onRename(newName);
+    setEditMode(false);
+  };
+  var handleClose = function handleClose(event) {
+    event.stopPropagation();
+    setName(value);
+    setEditMode(false);
+  };
+  var handleRenameButton = function handleRenameButton(event) {
+    event.stopPropagation();
+    setEditMode(true);
+  };
+  var handleDisplayText = function handleDisplayText(event) {
+    event.stopPropagation();
+    !disabled && setEditMode(!editMode);
+  };
+  var closeRef = useHotKeys("escape", handleClose, {
+    mode: "scoped",
+    enabled: editMode
+  });
+  var submitRef = useHotKeys(["command+return", "return"], function (event) {
+    if (isEmpty(name) && !allowEmptySubmission) return;
+    handleRename(event, name);
+  }, {
+    mode: "scoped",
+    enabled: editMode
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: renameRef,
+    className: classnames("flex min-w-0 max-w-md flex-row items-center", className)
+  }, breadcrumbs.map(function (_ref2) {
+    var text = _ref2.text,
+      link = _ref2.link;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: text
+    }, /*#__PURE__*/React.createElement(Link, _extends({
+      className: "neeto-molecules-rename__text neeto-molecules-rename__breadcrumb-text",
+      "data-testid": "neeto-molecules-value-display",
+      to: link
+    }, textProps), text), /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-molecules-rename__breadcrumb-text neeto-molecules-breadcrumb__divider",
+      component: "span"
+    }, "/"));
+  }), /*#__PURE__*/React.createElement(DummySpan, {
+    name: name,
+    placeholderRef: placeholderRef,
+    setInputWidth: setInputWidth
+  }), editMode ? /*#__PURE__*/React.createElement("div", {
+    className: "flex min-w-0 max-w-full flex-grow"
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    autoFocus: true,
+    className: "neeto-molecules-rename__input flex-grow",
+    "data-cy": "form-rename-text-field",
+    "data-testid": "neeto-molecules-name-input",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    },
+    placeholder: placeholder,
+    ref: mergeRefs(closeRef, submitRef),
+    style: {
+      width: inputWidth
+    },
+    value: name,
+    suffix: /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center justify-end"
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      className: "neeto-ui-rounded-none",
+      "data-cy": "form-rename-submit-button",
+      "data-testid": "neeto-molecules-rename-button",
+      icon: Check,
+      loading: isLoading,
+      style: "text",
+      disabled: !allowEmptySubmission && isEmpty(name) || isLoading,
+      onClick: function onClick(event) {
+        return handleRename(event, name);
+      }
+    }, submitButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
+      className: "neeto-ui-rounded-none",
+      "data-cy": "form-rename-close-button",
+      "data-testid": "neeto-molecules-cancel-button",
+      disabled: isLoading,
+      icon: Close,
+      style: "text",
+      onClick: handleClose
+    }, cancelButtonProps))),
+    onChange: function onChange(event) {
+      return setName(event.target.value);
+    }
+  }, inputProps))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, _extends({
+    component: "p",
+    "data-cy": "form-title",
+    "data-testid": "neeto-molecules-value-display",
+    style: "body2",
+    className: classnames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
+      "cursor-pointer": !disabled,
+      "pointer-events-none cursor-text": disabled
+    }),
+    onClick: handleDisplayText
+  }, textProps), typeof formatText === "function" ? formatText(name) : name), !hideMenu && (isNotEmpty(dropdownItems) || !disabled) && /*#__PURE__*/React.createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "neeto-molecules-menu-button"
+    },
+    dropdownProps: {
+      position: "bottom-start",
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    },
+    menuItems: [{
+      "data-cy": "form-rename-button",
+      onClick: handleRenameButton,
+      label: t("neetoMolecules.common.actions.rename"),
+      isVisible: !disabled,
+      key: "edit-name-menu"
+    }].concat(_toConsumableArray(dropdownItems))
+  })));
+};
+export default Rename;

package/dist/Rename/rename.scss

@@ -0,0 +1,69 @@
+.neeto-molecules-rename__input {
+  position: relative;
+  width: max-content;
+  margin-left: 4px;
+  height: 32px;
+  max-width: 100%;
+  transition: width 0.2s ease-in-out;
+
+  .neeto-ui-input {
+    border-color: transparent;
+
+    &:focus-within {
+      border-color: rgb(var(--neeto-ui-primary-500));
+    }
+
+    .neeto-ui-input__suffix {
+      margin-right: 0 !important;
+    }
+
+    input {
+      min-width: 150px;
+    }
+  }
+}
+
+.neeto-molecules-rename__text {
+  padding: 8px 5px;
+  margin: 0 1px;
+  cursor: pointer;
+  max-height: 32px;
+  max-width: 448px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0.005em;
+  transition: var(--neeto-ui-transition);
+  font-size: var(--neeto-ui-text-sm);
+  border-radius: var(--neeto-ui-rounded);
+  background-color: rgb(var(--neeto-ui-white));
+  border: thin solid rgb(var(--neeto-ui-white));
+}
+
+.neeto-molecules-rename__breadcrumb-text {
+  color: rgb(var(--neeto-ui-gray-500));
+  &:hover {
+    color: rgb(var(--neeto-ui-gray-800));
+  }
+}
+
+.neeto-molecules-rename__display-text {
+  color: rgb(var(--neeto-ui-gray-800));
+  &:hover {
+    border: thin solid rgb(var(--neeto-ui-gray-300));
+  }
+}
+
+.neeto-molecules-breadcrumb__divider {
+  padding: 0;
+  max-height: 32px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.005em;
+  pointer-events: none;
+}
+
+.dummy-span {
+  padding: 5px 8px;
+  font-weight: 400;
+  font-size: 14px;
+}

package/dist/Rename/utils.js

@@ -0,0 +1,10 @@
+export var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    return refs.forEach(function (ref) {
+      return typeof ref === "function" ? ref(node) : ref.current = node;
+    });
+  };
+};

package/dist/ResponsiveDevicePicker/constants.js

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _RESPONSIVE_DEVICES_M;
+import { t } from "i18next";
+import { Computer, Tablet, Mobile } from "@bigbinary/neeto-icons";
+export var RESPONSIVE_DEVICES = {
+  DESKTOP: "desktop",
+  TABLET: "tablet",
+  MOBILE: "mobile"
+};
+export var RESPONSIVE_DEVICES_MAP = (_RESPONSIVE_DEVICES_M = {}, _defineProperty(_RESPONSIVE_DEVICES_M, RESPONSIVE_DEVICES.DESKTOP, {
+  icon: Computer,
+  label: t("neetoMolecules.responsiveDevicePicker.desktop")
+}), _defineProperty(_RESPONSIVE_DEVICES_M, RESPONSIVE_DEVICES.TABLET, {
+  icon: Tablet,
+  label: t("neetoMolecules.responsiveDevicePicker.tablet")
+}), _defineProperty(_RESPONSIVE_DEVICES_M, RESPONSIVE_DEVICES.MOBILE, {
+  icon: Mobile,
+  label: t("neetoMolecules.responsiveDevicePicker.mobile")
+}), _RESPONSIVE_DEVICES_M);

package/dist/ResponsiveDevicePicker/index.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "selectedDevice", "onDeviceChange"];
+import React from "react";
+import classnames from "classnames";
+import { Button } from "@bigbinary/neetoui";
+import { RESPONSIVE_DEVICES_MAP } from "./constants";
+var ResponsiveDevicePicker = function ResponsiveDevicePicker(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    selectedDevice = _ref.selectedDevice,
+    onDeviceChange = _ref.onDeviceChange,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames("flex items-center justify-center gap-2", className)
+  }, otherProps), Object.entries(RESPONSIVE_DEVICES_MAP).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      _ref3$ = _ref3[1],
+      icon = _ref3$.icon,
+      label = _ref3$.label;
+    return /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "".concat(label.toLowerCase(), "-device-button"),
+      icon: icon,
+      key: key,
+      size: "small",
+      style: key === selectedDevice ? "primary" : "secondary",
+      title: label,
+      onClick: function onClick() {
+        return onDeviceChange(key);
+      }
+    });
+  }));
+};
+export default ResponsiveDevicePicker;

package/dist/Schedule/DisplayAvailability.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { isPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { joinHyphenCase } from "@bigbinary/neeto-commons-frontend/utils";
+import { Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { DAYS } from "./constants";
+import { sortPeriodsByKey } from "./utils";
+var DisplayAvailability = function DisplayAvailability(_ref) {
+  var periods = _ref.periods;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.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",
+      key: day
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: "mt-0.5 w-16",
+      "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"
+    }, 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", {
+        className: "flex items-center space-x-4",
+        key: period.id
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: "w-24 text-right",
+        lineHeight: "relaxed",
+        style: "h5",
+        weight: "semibold",
+        "data-cy": joinHyphenCase(day, period.startTime, "start-time-text")
+      }, period.startTime), /*#__PURE__*/React.createElement(Typography, {
+        className: "neeto-ui-text-gray-600",
+        component: "span"
+      }, "-"), /*#__PURE__*/React.createElement(Typography, {
+        className: "w-24 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",
+      "data-cy": joinHyphenCase(day, "unavailable-time-text"),
+      lineHeight: "relaxed",
+      style: "h5"
+    }, t("neetoMolecules.schedule.unavailable"))));
+  }));
+};
+export default DisplayAvailability;

package/dist/Schedule/Fields.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useImperativeHandle } from "react";
+import { FieldArray, useFormikContext } from "formik";
+import { DAYS } from "./constants";
+import Form from "./Form";
+var Fields = function Fields(_ref) {
+  var handleCopy = _ref.handleCopy,
+    handleValuesChanged = _ref.handleValuesChanged,
+    scheduleRef = _ref.scheduleRef;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue,
+    resetForm = _useFormikContext.resetForm,
+    errors = _useFormikContext.errors;
+  useEffect(function () {
+    return handleValuesChanged(values);
+  }, [values]);
+  useImperativeHandle(scheduleRef, function () {
+    return {
+      resetForm: resetForm,
+      errors: errors
+    };
+  });
+  return /*#__PURE__*/React.createElement(FieldArray, {
+    name: "wdays",
+    render: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "space-y-4"
+      }, values.wdays.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Form, {
+          day: DAYS.find(function (day) {
+            return day === item.wday;
+          }),
+          handleCopy: handleCopy,
+          index: index,
+          key: item.wday,
+          setFieldValue: setFieldValue,
+          values: values
+        });
+      }));
+    }
+  });
+};
+export default Fields;

package/dist/Schedule/Form/ScheduleRow.js

@@ -0,0 +1,125 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import React, { useContext } from "react";
+import { FieldArray, ErrorMessage } from "formik";
+import { isNotPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { Plus, Delete } from "@bigbinary/neeto-icons";
+import { Typography, Button } from "@bigbinary/neetoui";
+import { Select } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import { REMOVE_SELECT_DOWN_ARROW, BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN } from "./constants";
+import { buildSlotIntervals, slotsSelectComponentDefaultValue, customFilter, generateNewPeriod, addDefaultPeriod } from "./utils";
+import { DEFAULT_SLOT_INTERVAL } from "../constants";
+import ScheduleContext from "../ScheduleContext";
+var ScheduleRow = function ScheduleRow(_ref) {
+  var values = _ref.values,
+    setFieldValue = _ref.setFieldValue,
+    wdayIndex = _ref.wdayIndex,
+    day = _ref.day;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleAddRow = function handleAddRow(arrayHelpers) {
+    if (isNotPresent(values.wdays[wdayIndex].periods)) {
+      arrayHelpers.push(addDefaultPeriod(day));
+    } else {
+      arrayHelpers.push(generateNewPeriod(values.wdays[wdayIndex].periods, day));
+    }
+    setFieldValue("wdays[".concat(wdayIndex, "].available"), true);
+  };
+  var handleDeleteRow = function handleDeleteRow(arrayHelpers, index) {
+    var isLastRowDeleted = values.wdays[wdayIndex].periods.length === 1;
+    arrayHelpers.remove(index);
+    setFieldValue("wdays[".concat(wdayIndex, "].available"), !isLastRowDeleted);
+  };
+  var _useContext = useContext(ScheduleContext),
+    allowAddPeriod = _useContext.allowAddPeriod;
+  return /*#__PURE__*/React.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"
+      }, (_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",
+          key: "wdays[".concat(wdayIndex, "].periods[").concat(index, "]")
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex min-w-full items-start space-x-3",
+          "data-cy": "schedule-row"
+        }, /*#__PURE__*/React.createElement(Select, {
+          isClearable: true,
+          isSearchable: true,
+          className: "w-full",
+          components: REMOVE_SELECT_DOWN_ARROW,
+          filterOption: customFilter,
+          name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "].startTime"),
+          placeholder: t("neetoMolecules.schedule.startTime"),
+          styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
+          options: buildSlotIntervals({
+            interval: DEFAULT_SLOT_INTERVAL,
+            bookedSlots: values.wdays[wdayIndex].periods,
+            slotType: "startTime",
+            selectedValue: 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) || "");
+          }
+        }), /*#__PURE__*/React.createElement(Select, {
+          isClearable: true,
+          isSearchable: true,
+          className: "w-full",
+          components: REMOVE_SELECT_DOWN_ARROW,
+          filterOption: customFilter,
+          name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "].endTime"),
+          placeholder: t("neetoMolecules.schedule.endTime"),
+          styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
+          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",
+          "data-cy": "delete-period-button",
+          size: 20,
+          onClick: function onClick() {
+            return handleDeleteRow(arrayHelpers, index);
+          }
+        })), /*#__PURE__*/React.createElement(ErrorMessage, {
+          name: "wdays[".concat(wdayIndex, "].periods[").concat(index, "]")
+        }, function (message) {
+          return _typeof(message) !== "object" && /*#__PURE__*/React.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",
+        "data-cy": "add-new-period-button",
+        "data-testid": "add-new-period-button",
+        icon: Plus,
+        tooltipProps: {
+          content: t("neetoMolecules.schedule.addNewPeriod"),
+          position: "top",
+          hideAfter: 5000
+        },
+        onClick: function onClick() {
+          return handleAddRow(arrayHelpers);
+        }
+      }));
+    }
+  });
+};
+export default ScheduleRow;

package/dist/Schedule/Form/constants.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+export var REMOVE_SELECT_DOWN_ARROW = {
+  DropdownIndicator: function DropdownIndicator() {
+    return null;
+  },
+  IndicatorSeparator: function IndicatorSeparator() {
+    return null;
+  }
+};
+export var BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN = {
+  singleValue: function singleValue(base, state) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: state.selectProps.menuIsOpen ? "#c2c8cc" : base.color
+    });
+  }
+};
+export var SLOT_TIME_FORMAT = "hh:mm A";
+export var END_OF_DAY = "11:59 PM";