orc-shared 5.2.0-dev.1 → 5.3.0-dev.0

package/dist/components/MaterialUI/Inputs/DatePicker.js

@@ -9,7 +9,10 @@ var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
 require("react-datepicker/dist/react-datepicker.css");
 var _TimePicker = _interopRequireDefault(require("./TimePicker"));
 var _styles = require("@material-ui/core/styles");
-var _excluded = ["value", "useTime", "useDate", "onChange", "dateFormat", "showTimeZone", "timeInputLabel", "readOnly", "showTimeSelectOnly", "metadata", "timePickerTimeZone", "error"];
+var _timezoneHelper = require("../../../utils/timezoneHelper");
+var _metadata = require("../../../selectors/metadata");
+var _reactRedux = require("react-redux");
+var _excluded = ["value", "useTime", "useDate", "onChange", "useTimeZone", "dateFormat", "showTimeZone", "timeInputLabel", "readOnly", "showTimeSelectOnly", "metadata", "timePickerTimeZone", "error"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -152,6 +155,8 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
     _ref$useDate = _ref.useDate,
     useDate = _ref$useDate === void 0 ? true : _ref$useDate,
     onChange = _ref.onChange,
+    _ref$useTimeZone = _ref.useTimeZone,
+    useTimeZone = _ref$useTimeZone === void 0 ? false : _ref$useTimeZone,
     dateFormat = _ref.dateFormat,
     showTimeZone = _ref.showTimeZone,
     timeInputLabel = _ref.timeInputLabel,
@@ -164,11 +169,13 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
   var classes = useStyles({
     readOnly: readOnly
   });
-  var startDate = value ? new Date(value) : null;
+  var timeZoneName = (0, _timezoneHelper.getTimeZoneByName)(timePickerTimeZone);
+  var startDate = value ? timePickerTimeZone && useTimeZone ? (0, _timezoneHelper.convertTimeToLocalTimeZone)(new Date(value), timeZoneName) : new Date(value) : null;
   var disabledCls = (0, _classnames.default)(_defineProperty({}, classes.disabled, props.disabled));
+  var localizedTimeZoneName = (0, _reactRedux.useSelector)((0, _metadata.namedLookupLocalizedSelector)("customer", "TimeZone", timePickerTimeZone));
   var updateDate = function updateDate(date, metadata) {
     if (onChange) {
-      onChange(date, metadata);
+      onChange(useTimeZone && timePickerTimeZone ? (0, _timezoneHelper.convertTimeToOtherTimeZone)(date, timeZoneName) : date, metadata);
     }
   };
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -187,7 +194,7 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
     useTime: useTime != null ? useTime : false,
     customTimeInput: useTime ? /*#__PURE__*/_react.default.createElement(_TimePicker.default, {
       showTimeZone: showTimeZone,
-      requestedTimeZone: timePickerTimeZone
+      requestedTimeZone: localizedTimeZoneName
     }) : null,
     timeInputLabel: timeInputLabel != null ? timeInputLabel : "",
     readOnly: readOnly,
@@ -201,11 +208,11 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
     className: classes.errorText
   }, error));
 };
-__signature__(WrappedDatePicker, "useStyles{classes}", function () {
-  return [useStyles];
+__signature__(WrappedDatePicker, "useStyles{classes}\nuseSelector{localizedTimeZoneName}", function () {
+  return [useStyles, _reactRedux.useSelector];
 });
-__signature__(WrappedDatePicker, "useStyles{classes}", function () {
-  return [useStyles];
+__signature__(WrappedDatePicker, "useStyles{classes}\nuseSelector{localizedTimeZoneName}", function () {
+  return [useStyles, _reactRedux.useSelector];
 });
 var _default = WrappedDatePicker;
 var _default2 = _default;

package/dist/components/MaterialUI/Inputs/InputBase.js

@@ -132,6 +132,7 @@ var InputBase = function InputBase(_ref) {
   var endAdornment = inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.endAdornment);
   var metadata = inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.metadata);
   var autoComplete = inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.autoComplete);
+  var timeoutDelay = (inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.timeoutDelay)) || 100;
   var tooltipText = type === "text" ? value : "";
   var onClick = function onClick(item) {
     // Fixes FireFox issue, where the input number buttons do not focus on input control,
@@ -162,7 +163,7 @@ var InputBase = function InputBase(_ref) {
         var updateValue = update(inputText, metadata);
         setInputText(null);
         return updateValue;
-      }, 100);
+      }, timeoutDelay);
       return function () {
         return clearTimeout(timeOutId);
       };

package/dist/components/MaterialUI/Inputs/InputBaseProps.js

@@ -43,6 +43,7 @@ var InputBaseProps = /*#__PURE__*/function (_ComponentProps) {
     _this.componentProps.set(_this.constructor.propNames.endAdornment, null);
     _this.componentProps.set(_this.constructor.propNames.metadata, null);
     _this.componentProps.set(_this.constructor.propNames.autoComplete, null);
+    _this.componentProps.set(_this.constructor.propNames.timeoutDelay, null);
     _this.componentClasses.set(_this.constructor.ruleNames.input, null);
     _this.componentClasses.set(_this.constructor.ruleNames.errorText, null);
     _this._isInputProps = true;
@@ -71,7 +72,8 @@ _defineProperty(InputBaseProps, "propNames", {
   startAdornment: "startAdornment",
   endAdornment: "endAdornment",
   metadata: "metadata",
-  autoComplete: "autoComplete"
+  autoComplete: "autoComplete",
+  timeoutDelay: "timeoutDelay"
 });
 _defineProperty(InputBaseProps, "ruleNames", {
   input: "input",

package/dist/components/MaterialUI/Inputs/TimePicker.js

@@ -238,6 +238,9 @@ var TimePicker = function TimePicker(_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     time = _useState2[0],
     setTime = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setTime(parseTime(value || "00:00"));
+  }, [value, setTime]);
   var userTimeZone = (0, _timezoneHelper.getTimeZoneName)();
   var localizedTimeZoneName = (0, _reactRedux.useSelector)((0, _metadata.namedLookupLocalizedSelector)("customer", "TimeZone", userTimeZone, null));
   var onTimeChange = function onTimeChange(datetime) {
@@ -297,10 +300,10 @@ var TimePicker = function TimePicker(_ref4) {
     className: classes.timeZoneWrapper
   }, showTimeZone && getTimeZone(requestedTimeZone)));
 };
-__signature__(TimePicker, "useStyles{classes}\nuseState{[time, setTime](parseTime(value || \"00:00\"))}\nuseSelector{localizedTimeZoneName}", function () {
+__signature__(TimePicker, "useStyles{classes}\nuseState{[time, setTime](parseTime(value || \"00:00\"))}\nuseEffect{}\nuseSelector{localizedTimeZoneName}", function () {
   return [useStyles, _reactRedux.useSelector];
 });
-__signature__(TimePicker, "useStyles{classes}\nuseState{[time, setTime](parseTime(value || \"00:00\"))}\nuseSelector{localizedTimeZoneName}", function () {
+__signature__(TimePicker, "useStyles{classes}\nuseState{[time, setTime](parseTime(value || \"00:00\"))}\nuseEffect{}\nuseSelector{localizedTimeZoneName}", function () {
   return [useStyles, _reactRedux.useSelector];
 });
 var _default = TimePicker;

package/dist/components/Routing/SubPage.js

@@ -46,7 +46,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 var SubPage = exports.SubPage = function SubPage(_ref) {
-  var _props$title, _props$title2, _props$title3;
+  var _props$title, _props$title2, _props$title3, _props$componentProps;
   var config = _ref.config,
     match = _ref.match,
     location = _ref.location,
@@ -94,6 +94,24 @@ var SubPage = exports.SubPage = function SubPage(_ref) {
     disableElevation: true,
     onClick: closeSubPage
   }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.close)));
+  if (((_props$componentProps = props.componentProps) == null || (_props$componentProps = _props$componentProps.actionPanel()) == null ? void 0 : _props$componentProps.length) > 0) {
+    var _props$componentProps2;
+    actionPanel = /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.actionPanel
+    }, (_props$componentProps2 = props.componentProps) == null ? void 0 : _props$componentProps2.actionPanel().map(function (action) {
+      var _action$label;
+      return /*#__PURE__*/_react.default.createElement(_Button.default, {
+        key: (_action$label = action.label) == null ? void 0 : _action$label.id,
+        variant: action.isPrimary ? "contained" : "outlined",
+        color: action.isPrimary ? "primary" : "default",
+        disableElevation: action.isPrimary,
+        onClick: function onClick(e) {
+          action.handler && action.handler(e);
+          closeSubPage();
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, action.label));
+    }));
+  }
   modalProps.set(_modalProps.default.propNames.actionPanel, actionPanel);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, {
     message: message,

package/dist/content/icons/archives.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="#333" fill-rule="evenodd" d="M23.5,3 C23.7761424,3 24,3.22385763 24,3.5 L24,3.5 L24,8.5 C24,8.77614237 23.7761424,9 23.5,9 L23.5,9 L23,9 L23,21.5 C23,21.7454599 22.8231248,21.9496084 22.5898756,21.9919443 L22.5,22 L1.5,22 C1.22385763,22 1,21.7761424 1,21.5 L1,21.5 L1,9 L0.5,9 C0.254540111,9 0.0503916296,8.82312484 0.00805566941,8.58987563 L0,8.5 L0,3.5 C0,3.22385763 0.223857625,3 0.5,3 L0.5,3 Z M22,9 L2,9 L2,21 L22,21 L22,9 Z M15.5,11 C15.7761424,11 16,11.2238576 16,11.5 L16,11.5 L16,13.5 C16,13.7761424 15.7761424,14 15.5,14 L15.5,14 L8.5,14 C8.22385763,14 8,13.7761424 8,13.5 L8,13.5 L8,11.5 C8,11.2238576 8.22385763,11 8.5,11 L8.5,11 Z M15,12 L9,12 L9,13 L15,13 L15,12 Z M23,4 L1,4 L1,8 L23,8 L23,4 Z"/>
+</svg>

package/dist/content/iconsSheet.svg

@@ -8,6 +8,9 @@
 <symbol id="icon-app-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path stroke="none" fill-rule="evenodd" d="M21,18 C22.7,18 24,19.3 24,21 C24,22.7 22.7,24 21,24 C19.3,24 18,22.7 18,21 C18,19.3 19.3,18 21,18 Z M3,0 C4.7,0 6,1.3 6,3 C6,4.7 4.7,6 3,6 C1.3,6 0,4.7 0,3 C0,1.3 1.3,0 3,0 Z M12,0 C13.7,0 15,1.3 15,3 C15,4.7 13.7,6 12,6 C10.3,6 9,4.7 9,3 C9,1.3 10.3,0 12,0 Z M21,0 C22.7,0 24,1.3 24,3 C24,4.7 22.7,6 21,6 C19.3,6 18,4.7 18,3 C18,1.3 19.3,0 21,0 Z M3,9 C4.7,9 6,10.3 6,12 C6,13.7 4.7,15 3,15 C1.3,15 0,13.7 0,12 C0,10.3 1.3,9 3,9 Z M12,9 C13.7,9 15,10.3 15,12 C15,13.7 13.7,15 12,15 C10.3,15 9,13.7 9,12 C9,10.3 10.3,9 12,9 Z M21,9 C22.7,9 24,10.3 24,12 C24,13.7 22.7,15 21,15 C19.3,15 18,13.7 18,12 C18,10.3 19.3,9 21,9 Z M3,18 C4.7,18 6,19.3 6,21 C6,22.7 4.7,24 3,24 C1.3,24 0,22.7 0,21 C0,19.3 1.3,18 3,18 Z M12,18 C13.7,18 15,19.3 15,21 C15,22.7 13.7,24 12,24 C10.3,24 9,22.7 9,21 C9,19.3 10.3,18 12,18 Z"/>
 </symbol>
+<symbol id="icon-archives" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<path stroke="none" fill-rule="evenodd" d="M23.5,3 C23.7761424,3 24,3.22385763 24,3.5 L24,3.5 L24,8.5 C24,8.77614237 23.7761424,9 23.5,9 L23.5,9 L23,9 L23,21.5 C23,21.7454599 22.8231248,21.9496084 22.5898756,21.9919443 L22.5,22 L1.5,22 C1.22385763,22 1,21.7761424 1,21.5 L1,21.5 L1,9 L0.5,9 C0.254540111,9 0.0503916296,8.82312484 0.00805566941,8.58987563 L0,8.5 L0,3.5 C0,3.22385763 0.223857625,3 0.5,3 L0.5,3 Z M22,9 L2,9 L2,21 L22,21 L22,9 Z M15.5,11 C15.7761424,11 16,11.2238576 16,11.5 L16,11.5 L16,13.5 C16,13.7761424 15.7761424,14 15.5,14 L15.5,14 L8.5,14 C8.22385763,14 8,13.7761424 8,13.5 L8,13.5 L8,11.5 C8,11.2238576 8.22385763,11 8.5,11 L8.5,11 Z M15,12 L9,12 L9,13 L15,13 L15,12 Z M23,4 L1,4 L1,8 L23,8 L23,4 Z"/>
+</symbol>
 <symbol id="icon-arrow-large-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
  <path stroke="none" fill-rule="evenodd" d="M8.79069767,17.6511628 C8.69302326,17.6511628 8.59534884,17.6511628 8.49767442,17.5534884 L0.195348837,10.7162791 C0.0976744186,10.6186047 0,10.5209302 0,10.3255814 C0,10.1302326 0.0976744186,10.0325581 0.195348837,9.93488372 L8.49767442,3.09767442 C8.59534884,3 8.79069767,3 8.98604651,3 C9.18139535,3.09767442 9.27906977,3.29302326 9.27906977,3.48837209 L9.27906977,6.90697674 L20.5116279,6.90697674 C20.8046512,6.90697674 21,7.10232558 21,7.39534884 L21,13.255814 C21,13.5488372 20.8046512,13.744186 20.5116279,13.744186 L9.27906977,13.744186 L9.27906977,17.1627907 C9.27906977,17.3581395 9.18139535,17.5534884 8.98604651,17.6511628 C8.88837209,17.6511628 8.88837209,17.6511628 8.79069767,17.6511628 Z M1.26976744,10.3255814 L8.30232558,16.0883721 L8.30232558,13.255814 C8.30232558,12.9627907 8.49767442,12.7674419 8.79069767,12.7674419 L20.0232558,12.7674419 L20.0232558,7.88372093 L8.79069767,7.88372093 C8.49767442,7.88372093 8.30232558,7.68837209 8.30232558,7.39534884 L8.30232558,4.5627907 L1.26976744,10.3255814 Z"/>
 </symbol>

package/dist/utils/timezoneHelper.js

@@ -1,7 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports.timeZonesList = exports.getTimeZoneName = exports.getTimeZoneByName = exports.getTimeZone = void 0;
+exports.timeZonesList = exports.getTimeZoneName = exports.getTimeZoneByName = exports.getTimeZone = exports.convertTimeToOtherTimeZone = exports.convertTimeToLocalTimeZone = void 0;
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -41,6 +43,22 @@ var getTimeZoneName = exports.getTimeZoneName = function getTimeZoneName() {
   var timezoneName = timeZonesList.get(customerTimezone);
   return timezoneName;
 };
+
+//converting time from other timezone to local
+var convertTimeToLocalTimeZone = exports.convertTimeToLocalTimeZone = function convertTimeToLocalTimeZone(date, timezone) {
+  var dateWithoutZone = _momentTimezone.default.tz(date, timezone).format("YYYY-MM-DDTHH:mm:ss.SSS");
+  var localZone = (0, _momentTimezone.default)(dateWithoutZone).format("Z");
+  var dateWithLocalZone = [dateWithoutZone, localZone].join("");
+  return new Date(dateWithLocalZone);
+};
+
+//converting time from local timezone to other
+var convertTimeToOtherTimeZone = exports.convertTimeToOtherTimeZone = function convertTimeToOtherTimeZone(date, timezone) {
+  var dateWithoutZone = (0, _momentTimezone.default)(date).format("YYYY-MM-DDTHH:mm:ss.SSS");
+  var otherZone = _momentTimezone.default.tz(date, timezone).format("Z");
+  var dateWithOtherZone = [dateWithoutZone, otherZone].join("");
+  return new Date(dateWithOtherZone);
+};
 var timeZonesList = exports.timeZonesList = new Map([["Africa/Bangui", "W. Central Africa Standard Time"], ["Africa/Cairo", "Egypt Standard Time"], ["Africa/Casablanca", "Morocco Standard Time"], ["Africa/Harare", "South Africa Standard Time"], ["Africa/Johannesburg", "South Africa Standard Time"], ["Africa/Lagos", "W. Central Africa Standard Time"], ["Africa/Monrovia", "Greenwich Standard Time"], ["Africa/Nairobi", "E. Africa Standard Time"], ["Africa/Windhoek", "Namibia Standard Time"], ["America/Anchorage", "Alaskan Standard Time"], ["America/Argentina/San_Juan", "Argentina Standard Time"], ["America/Asuncion", "Paraguay Standard Time"], ["America/Bahia", "Bahia Standard Time"], ["America/Bogota", "SA Pacific Standard Time"], ["America/Buenos_Aires", "Argentina Standard Time"], ["America/Caracas", "Venezuela Standard Time"], ["America/Cayenne", "SA Eastern Standard Time"], ["America/Chicago", "Central Standard Time"], ["America/Chihuahua", "Mountain Standard Time (Mexico)"], ["America/Cuiaba", "Central Brazilian Standard Time"], ["America/Denver", "Mountain Standard Time"], ["America/Fortaleza", "SA Eastern Standard Time"], ["America/Godthab", "Greenland Standard Time"], ["America/Guatemala", "Central America Standard Time"], ["America/Halifax", "Atlantic Standard Time"], ["America/Indianapolis", "US Eastern Standard Time"], ["America/Indiana/Indianapolis", "US Eastern Standard Time"], ["America/La_Paz", "SA Western Standard Time"], ["America/Los_Angeles", "Pacific Standard Time"], ["America/Mexico_City", "Mexico Standard Time"], ["America/Montevideo", "Montevideo Standard Time"], ["America/New_York", "Eastern Standard Time"], ["America/Noronha", "UTC-02"], ["America/Phoenix", "US Mountain Standard Time"], ["America/Regina", "Canada Central Standard Time"], ["America/Santa_Isabel", "Pacific Standard Time (Mexico)"], ["America/Santiago", "Pacific SA Standard Time"], ["America/Sao_Paulo", "E. South America Standard Time"], ["America/St_Johns", "Newfoundland Standard Time"], ["America/Tijuana", "Pacific Standard Time"], ["Antarctica/McMurdo", "New Zealand Standard Time"], ["Atlantic/South_Georgia", "UTC-02"], ["Asia/Almaty", "Central Asia Standard Time"], ["Asia/Amman", "Jordan Standard Time"], ["Asia/Baghdad", "Arabic Standard Time"], ["Asia/Baku", "Azerbaijan Standard Time"], ["Asia/Bangkok", "SE Asia Standard Time"], ["Asia/Beirut", "Middle East Standard Time"], ["Asia/Calcutta", "India Standard Time"], ["Asia/Colombo", "Sri Lanka Standard Time"], ["Asia/Damascus", "Syria Standard Time"], ["Asia/Dhaka", "Bangladesh Standard Time"], ["Asia/Dubai", "Arabian Standard Time"], ["Asia/Irkutsk", "North Asia East Standard Time"], ["Asia/Jerusalem", "Israel Standard Time"], ["Asia/Kabul", "Afghanistan Standard Time"], ["Asia/Kamchatka", "Kamchatka Standard Time"], ["Asia/Karachi", "Pakistan Standard Time"], ["Asia/Katmandu", "Nepal Standard Time"], ["Asia/Kolkata", "India Standard Time"], ["Asia/Krasnoyarsk", "North Asia Standard Time"], ["Asia/Kuala_Lumpur", "Singapore Standard Time"], ["Asia/Kuwait", "Arab Standard Time"], ["Asia/Magadan", "Magadan Standard Time"], ["Asia/Muscat", "Arabian Standard Time"], ["Asia/Novosibirsk", "N. Central Asia Standard Time"], ["Asia/Oral", "West Asia Standard Time"], ["Asia/Rangoon", "Myanmar Standard Time"], ["Asia/Riyadh", "Arab Standard Time"], ["Asia/Seoul", "Korea Standard Time"], ["Asia/Shanghai", "China Standard Time"], ["Asia/Singapore", "Singapore Standard Time"], ["Asia/Taipei", "Taipei Standard Time"], ["Asia/Tashkent", "West Asia Standard Time"], ["Asia/Tbilisi", "Georgian Standard Time"], ["Asia/Tehran", "Iran Standard Time"], ["Asia/Tokyo", "Tokyo Standard Time"], ["Asia/Ulaanbaatar", "Ulaanbaatar Standard Time"], ["Asia/Vladivostok", "Vladivostok Standard Time"], ["Asia/Yakutsk", "Yakutsk Standard Time"], ["Asia/Yekaterinburg", "Ekaterinburg Standard Time"], ["Asia/Yerevan", "Armenian Standard Time"], ["Atlantic/Azores", "Azores Standard Time"], ["Atlantic/Cape_Verde", "Cape Verde Standard Time"], ["Atlantic/Reykjavik", "Greenwich Standard Time"], ["Australia/Adelaide", "Cen. Australia Standard Time"], ["Australia/Brisbane", "E. Australia Standard Time"], ["Australia/Darwin", "AUS Central Standard Time"], ["Australia/Hobart", "Tasmania Standard Time"], ["Australia/Perth", "W. Australia Standard Time"], ["Australia/Sydney", "AUS Eastern Standard Time"], ["UTC", "UTC"], ["Etc/GMT+11", "UTC-11"], ["Etc/GMT+12", "Dateline Standard Time"], ["Etc/GMT+2", "UTC-02"], ["Etc/GMT-12", "UTC+12"], ["Europe/Amsterdam", "W. Europe Standard Time"], ["Europe/Athens", "GTB Standard Time"], ["Europe/Belgrade", "Central Europe Standard Time"], ["Europe/Berlin", "W. Europe Standard Time"], ["Europe/Brussels", "Romance Standard Time"], ["Europe/Budapest", "Central Europe Standard Time"], ["Europe/Dublin", "GMT Standard Time"], ["Europe/Helsinki", "FLE Standard Time"], ["Europe/Istanbul", "GTB Standard Time"], ["Europe/Kiev", "FLE Standard Time"], ["Europe/London", "GMT Standard Time"], ["Europe/Minsk", "E. Europe Standard Time"], ["Europe/Moscow", "Russian Standard Time"], ["Europe/Paris", "Romance Standard Time"], ["Europe/Sarajevo", "Central European Standard Time"], ["Europe/Warsaw", "Central European Standard Time"], ["Indian/Mauritius", "Mauritius Standard Time"], ["Pacific/Apia", "Samoa Standard Time"], ["Pacific/Auckland", "New Zealand Standard Time"], ["Pacific/Fiji", "Fiji Standard Time"], ["Pacific/Guadalcanal", "Central Pacific Standard Time"], ["Pacific/Guam", "West Pacific Standard Time"], ["Pacific/Honolulu", "Hawaiian Standard Time"], ["Pacific/Pago_Pago", "UTC-11"], ["Pacific/Port_Moresby", "West Pacific Standard Time"], ["Pacific/Tongatapu", "Tonga Standard Time"]]);
 ;
 (function () {
@@ -51,6 +69,8 @@ var timeZonesList = exports.timeZonesList = new Map([["Africa/Bangui", "W. Centr
   reactHotLoader.register(getTimeZone, "getTimeZone", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
   reactHotLoader.register(getTimeZoneByName, "getTimeZoneByName", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
   reactHotLoader.register(getTimeZoneName, "getTimeZoneName", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
+  reactHotLoader.register(convertTimeToLocalTimeZone, "convertTimeToLocalTimeZone", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
+  reactHotLoader.register(convertTimeToOtherTimeZone, "convertTimeToOtherTimeZone", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
   reactHotLoader.register(timeZonesList, "timeZonesList", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
 })();
 ;
@@ -67,6 +87,8 @@ var timeZonesList = exports.timeZonesList = new Map([["Africa/Bangui", "W. Centr
   reactHotLoader.register(getTimeZone, "getTimeZone", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
   reactHotLoader.register(getTimeZoneByName, "getTimeZoneByName", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
   reactHotLoader.register(getTimeZoneName, "getTimeZoneName", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
+  reactHotLoader.register(convertTimeToLocalTimeZone, "convertTimeToLocalTimeZone", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
+  reactHotLoader.register(convertTimeToOtherTimeZone, "convertTimeToOtherTimeZone", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
   reactHotLoader.register(timeZonesList, "timeZonesList", "/home/vsts/work/1/s/src/utils/timezoneHelper.js");
 })();
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.2.0-dev.1",
+	"version": "5.3.0-dev.0",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {
@@ -49,7 +49,10 @@
 	],
 	"devDependencies": {},
 	"peerDependencies": {
-		"orc-scripts": "1.6.0"
+		"orc-scripts": "1.8.0-dev.2"
+	},
+	"dependencies": {
+		"orc-scripts": "1.8.0-dev.2"
 	},
 	"sideEffects": false,
 	"lint-staged": {
@@ -67,8 +70,5 @@
 		"hooks": {
 			"pre-commit": "lint-staged"
 		}
-	},
-	"dependencies": {
-		"orc-scripts": "1.6.0"
 	}
 }

package/src/components/Form/InputField.test.js

@@ -59,6 +59,24 @@ describe("InputField", () => {
 				field_fieldName: { wasBlurred: true },
 				activeForm_fieldName: { wasBlurred: true },
 			},
+			metadata: {
+				lookups: {
+					customer: {
+						index: {
+							TimeZone: {
+								values: {
+									UTC: {
+										value: "UTC",
+										displayName: {
+											"en-US": "(UTC) Coordinated Universal Time",
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
 		});
 		store = {
 			subscribe: () => {},

package/src/components/Form/Inputs/Date.test.js

@@ -14,6 +14,24 @@ describe("DateInput", () => {
 			locale: {
 				locale: "en-CA",
 			},
+			metadata: {
+				lookups: {
+					customer: {
+						index: {
+							TimeZone: {
+								values: {
+									UTC: {
+										value: "UTC",
+										displayName: {
+											"en-US": "(UTC) Coordinated Universal Time",
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
 		});
 
 		store = {

package/src/components/MaterialUI/Inputs/DatePicker.js

@@ -5,6 +5,13 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import TimePicker from "./TimePicker";
 import { makeStyles } from "@material-ui/core/styles";
+import {
+	getTimeZoneByName,
+	convertTimeToOtherTimeZone,
+	convertTimeToLocalTimeZone,
+} from "../../../utils/timezoneHelper";
+import { namedLookupLocalizedSelector } from "../../../selectors/metadata";
+import { useSelector } from "react-redux";
 
 const useStyles = makeStyles(theme => ({
 	container: {
@@ -120,6 +127,7 @@ const WrappedDatePicker = ({
 	useTime,
 	useDate = true,
 	onChange,
+	useTimeZone = false,
 	dateFormat,
 	showTimeZone,
 	timeInputLabel,
@@ -131,12 +139,18 @@ const WrappedDatePicker = ({
 	...props
 }) => {
 	const classes = useStyles({ readOnly });
-	const startDate = value ? new Date(value) : null;
+	const timeZoneName = getTimeZoneByName(timePickerTimeZone);
+	const startDate = value
+		? timePickerTimeZone && useTimeZone
+			? convertTimeToLocalTimeZone(new Date(value), timeZoneName)
+			: new Date(value)
+		: null;
 	const disabledCls = classNames({ [classes.disabled]: props.disabled });
+	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", timePickerTimeZone));
 
 	const updateDate = (date, metadata) => {
 		if (onChange) {
-			onChange(date, metadata);
+			onChange(useTimeZone && timePickerTimeZone ? convertTimeToOtherTimeZone(date, timeZoneName) : date, metadata);
 		}
 	};
 
@@ -152,7 +166,7 @@ const WrappedDatePicker = ({
 						showTimeInput={useTime ?? false}
 						useTime={useTime ?? false}
 						customTimeInput={
-							useTime ? <TimePicker showTimeZone={showTimeZone} requestedTimeZone={timePickerTimeZone} /> : null
+							useTime ? <TimePicker showTimeZone={showTimeZone} requestedTimeZone={localizedTimeZoneName} /> : null
 						}
 						timeInputLabel={timeInputLabel ?? ""}
 						readOnly={readOnly}

package/src/components/MaterialUI/Inputs/DatePicker.test.js

@@ -15,8 +15,25 @@ describe("DatePicker", () => {
 			locale: {
 				locale: "en-CA",
 			},
+			metadata: {
+				lookups: {
+					customer: {
+						index: {
+							TimeZone: {
+								values: {
+									UTC: {
+										value: "Eastern Standard Time",
+										displayName: {
+											"en-US": "Eastern Standard Time",
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
 		});
-
 		store = {
 			subscribe: () => {},
 			dispatch: () => {},
@@ -311,6 +328,131 @@ describe("DatePicker", () => {
 
 		input.at(0).simulate("change", event);
 	});
+
+	it("should call onChange prop with timezone", () => {
+		const onChangeMock = jest.fn();
+		const date = new Date("2020-06-30T00:00:00");
+		const event = {
+			preventDefault() {},
+			target: { value: "" },
+		};
+		const requestTimeZone = "Eastern Standard Time";
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<DatePicker
+					onChange={onChangeMock}
+					value={date}
+					useTime={true}
+					useDate={false}
+					showTimeSelectOnly={true}
+					timePickerTimeZone={requestTimeZone}
+				/>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.at(0).simulate("change", event);
+		expect(onChangeMock.mock.calls.length, "to equal", 1);
+	});
+
+	it("should call onChange prop with null timezone", () => {
+		const onChangeMock = jest.fn();
+		const date = new Date("2020-06-30T00:00:00");
+		const event = {
+			preventDefault() {},
+			target: { value: "" },
+		};
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<DatePicker
+					onChange={onChangeMock}
+					value={date}
+					useTime={true}
+					useDate={false}
+					showTimeSelectOnly={true}
+					timePickerTimeZone={null}
+				/>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.at(0).simulate("change", event);
+		expect(onChangeMock.mock.calls.length, "to equal", 1);
+	});
+
+	it("should call onChange prop with timezone without date value", () => {
+		const onChangeMock = jest.fn();
+		const event = {
+			preventDefault() {},
+			target: { value: "" },
+		};
+		const requestTimeZone = "Eastern Standard Time";
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<DatePicker
+					onChange={onChangeMock}
+					useTime={true}
+					useDate={false}
+					showTimeSelectOnly={true}
+					timePickerTimeZone={requestTimeZone}
+				/>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.at(0).simulate("change", event);
+	});
+
+	it("should call onChange prop with timezone and not use time", () => {
+		const date = new Date("2020-06-30T00:00:00");
+		const event = {
+			preventDefault() {},
+			target: { value: "" },
+		};
+		const requestTimeZone = "Eastern Standard Time";
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<DatePicker value={date} useDate={false} showTimeSelectOnly={true} timePickerTimeZone={requestTimeZone} />
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.at(0).simulate("change", event);
+	});
+
+	it("should call onChange prop with useTimeZone", () => {
+		const onChangeMock = jest.fn();
+		const date = new Date("2020-06-30T00:00:00");
+		const event = {
+			preventDefault() {},
+			target: { value: "" },
+		};
+		const requestTimeZone = "Eastern Standard Time";
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<DatePicker
+					onChange={onChangeMock}
+					value={date}
+					useTime={true}
+					useDate={false}
+					useTimeZone={true}
+					showTimeSelectOnly={true}
+					timePickerTimeZone={requestTimeZone}
+				/>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.at(0).simulate("change", event);
+		expect(onChangeMock.mock.calls.length, "to equal", 1);
+	});
 });
 
 describe("createFormat", () => {

package/src/components/MaterialUI/Inputs/InputBase.js

@@ -99,6 +99,7 @@ const InputBase = ({ inputProps }) => {
 	const endAdornment = inputProps?.get(InputBaseProps.propNames.endAdornment);
 	const metadata = inputProps?.get(InputBaseProps.propNames.metadata);
 	const autoComplete = inputProps?.get(InputBaseProps.propNames.autoComplete);
+	const timeoutDelay = inputProps?.get(InputBaseProps.propNames.timeoutDelay) || 100;
 
 	const tooltipText = type === "text" ? value : "";
 
@@ -133,7 +134,7 @@ const InputBase = ({ inputProps }) => {
 				setInputText(null);
 
 				return updateValue;
-			}, 100);
+			}, timeoutDelay);
 			return () => clearTimeout(timeOutId);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/MaterialUI/Inputs/InputBaseProps.js

@@ -17,6 +17,7 @@ class InputBaseProps extends ComponentProps {
 		endAdornment: "endAdornment",
 		metadata: "metadata",
 		autoComplete: "autoComplete",
+		timeoutDelay: "timeoutDelay",
 	};
 
 	static ruleNames = {
@@ -41,6 +42,7 @@ class InputBaseProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.endAdornment, null);
 		this.componentProps.set(this.constructor.propNames.metadata, null);
 		this.componentProps.set(this.constructor.propNames.autoComplete, null);
+		this.componentProps.set(this.constructor.propNames.timeoutDelay, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.input, null);
 		this.componentClasses.set(this.constructor.ruleNames.errorText, null);

package/src/components/MaterialUI/Inputs/InputBaseProps.test.js

@@ -18,6 +18,7 @@ describe("InputBase Props", () => {
 			"endAdornment",
 			"metadata",
 			"autoComplete",
+			"timeoutDelay",
 		];
 
 		expect(InputBaseProps.propNames, "to have keys", propNames);
@@ -40,6 +41,7 @@ describe("InputBase Props", () => {
 			"endAdornment",
 			"metadata",
 			"autoComplete",
+			"timeoutDelay",
 		];
 
 		const ruleNames = ["input", "errorText"];

package/src/components/MaterialUI/Inputs/TimePicker.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Select from "./Select";
 import SelectProps from "./SelectProps";
@@ -180,6 +180,10 @@ const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone
 	showAMPM = showAMPM ?? isBrowserUsingAMPM();
 	const [time, setTime] = useState(parseTime(value || "00:00"));
 
+	useEffect(() => {
+		setTime(parseTime(value || "00:00"));
+	}, [value, setTime]);
+
 	const userTimeZone = getTimeZoneName();
 	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", userTimeZone, null));
 

package/src/components/Routing/SubPage.js

@@ -61,7 +61,7 @@ export const SubPage = ({ config, match, location, history, root, modulePrependP
 	modalProps.set(ModalProps.propNames.type, "fullwidth");
 	modalProps.set(ModalProps.propNames.backdropClickCallback, closeSubPage);
 
-	const actionPanel = (
+	let actionPanel = (
 		<div className={classes.actionPanel}>
 			<Button variant="contained" color="primary" disableElevation onClick={closeSubPage}>
 				<FormattedMessage {...sharedMessages.close} />
@@ -69,6 +69,27 @@ export const SubPage = ({ config, match, location, history, root, modulePrependP
 		</div>
 	);
 
+	if (props.componentProps?.actionPanel()?.length > 0) {
+		actionPanel = (
+			<div className={classes.actionPanel}>
+				{props.componentProps?.actionPanel().map(action => (
+					<Button
+						key={action.label?.id}
+						variant={action.isPrimary ? "contained" : "outlined"}
+						color={action.isPrimary ? "primary" : "default"}
+						disableElevation={action.isPrimary}
+						onClick={e => {
+							action.handler && action.handler(e);
+							closeSubPage();
+						}}
+					>
+						<FormattedMessage {...action.label} />
+					</Button>
+				))}
+			</div>
+		);
+	}
+
 	modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
 
 	return <Modal message={message} modalProps={modalProps} />;

package/src/components/Routing/SubPage.test.js

@@ -11,7 +11,6 @@ import Modal from "../MaterialUI/DataDisplay/Modal";
 import ModalProps from "../MaterialUI/DataDisplay/modalProps";
 import Button from "@material-ui/core/Button";
 import translations from "~/translations/en-US.json";
-
 import { TestWrapper, createMuiTheme } from "../../utils/testUtils";
 import sharedMessages from "../../sharedMessages";
 
@@ -181,4 +180,86 @@ describe("SubPage", () => {
 		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
 		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
 	});
+
+	it("renders action panel passed from props", () => {
+		const actions = () => [{ label: sharedMessages.cancel }, { label: sharedMessages.applyChanges }];
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<div id="outer" />
+					<Router history={history}>
+						<Route
+							path="/foo/bar"
+							render={route => (
+								<SubPage
+									config={{
+										component: InnerView,
+										set: true,
+										title: "Item Details",
+										componentProps: { actionPanel: actions },
+									}}
+									root="/foo"
+									path="/foo/bar"
+									{...route}
+								/>
+							)}
+						/>
+					</Router>
+				</div>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const closeButton = mountedComponent.find("button").at(0);
+		const applyButton = mountedComponent.find("button").at(1);
+
+		closeButton.invoke("onClick")();
+
+		expect(applyButton, "not to be", null);
+		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
+		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
+	});
+
+	it("Executes handler from button received from props", () => {
+		const someEvent = sinon.spy().named("someEvent");
+
+		const actions = () => [{ label: sharedMessages.applyChanges, isPrimary: true, handler: someEvent }];
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<div id="outer" />
+					<Router history={history}>
+						<Route
+							path="/foo/bar"
+							render={route => (
+								<SubPage
+									config={{
+										component: InnerView,
+										set: true,
+										title: "Item Details",
+										componentProps: { actionPanel: actions },
+									}}
+									root="/foo"
+									path="/foo/bar"
+									{...route}
+								/>
+							)}
+						/>
+					</Router>
+				</div>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const applyButton = mountedComponent.find("button").at(0);
+
+		applyButton.invoke("onClick")();
+
+		const applyButtonClassName = applyButton.props().className;
+		expect(applyButtonClassName, "to contain", "MuiButton-contained");
+		expect(applyButtonClassName, "to contain", "MuiButton-containedPrimary");
+		expect(someEvent, "was called");
+	});
 });

package/src/content/icons/archives.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="#333" fill-rule="evenodd" d="M23.5,3 C23.7761424,3 24,3.22385763 24,3.5 L24,3.5 L24,8.5 C24,8.77614237 23.7761424,9 23.5,9 L23.5,9 L23,9 L23,21.5 C23,21.7454599 22.8231248,21.9496084 22.5898756,21.9919443 L22.5,22 L1.5,22 C1.22385763,22 1,21.7761424 1,21.5 L1,21.5 L1,9 L0.5,9 C0.254540111,9 0.0503916296,8.82312484 0.00805566941,8.58987563 L0,8.5 L0,3.5 C0,3.22385763 0.223857625,3 0.5,3 L0.5,3 Z M22,9 L2,9 L2,21 L22,21 L22,9 Z M15.5,11 C15.7761424,11 16,11.2238576 16,11.5 L16,11.5 L16,13.5 C16,13.7761424 15.7761424,14 15.5,14 L15.5,14 L8.5,14 C8.22385763,14 8,13.7761424 8,13.5 L8,13.5 L8,11.5 C8,11.2238576 8.22385763,11 8.5,11 L8.5,11 Z M15,12 L9,12 L9,13 L15,13 L15,12 Z M23,4 L1,4 L1,8 L23,8 L23,4 Z"/>
+</svg>

package/src/content/iconsSheet.svg

@@ -8,6 +8,9 @@
 <symbol id="icon-app-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path stroke="none" fill-rule="evenodd" d="M21,18 C22.7,18 24,19.3 24,21 C24,22.7 22.7,24 21,24 C19.3,24 18,22.7 18,21 C18,19.3 19.3,18 21,18 Z M3,0 C4.7,0 6,1.3 6,3 C6,4.7 4.7,6 3,6 C1.3,6 0,4.7 0,3 C0,1.3 1.3,0 3,0 Z M12,0 C13.7,0 15,1.3 15,3 C15,4.7 13.7,6 12,6 C10.3,6 9,4.7 9,3 C9,1.3 10.3,0 12,0 Z M21,0 C22.7,0 24,1.3 24,3 C24,4.7 22.7,6 21,6 C19.3,6 18,4.7 18,3 C18,1.3 19.3,0 21,0 Z M3,9 C4.7,9 6,10.3 6,12 C6,13.7 4.7,15 3,15 C1.3,15 0,13.7 0,12 C0,10.3 1.3,9 3,9 Z M12,9 C13.7,9 15,10.3 15,12 C15,13.7 13.7,15 12,15 C10.3,15 9,13.7 9,12 C9,10.3 10.3,9 12,9 Z M21,9 C22.7,9 24,10.3 24,12 C24,13.7 22.7,15 21,15 C19.3,15 18,13.7 18,12 C18,10.3 19.3,9 21,9 Z M3,18 C4.7,18 6,19.3 6,21 C6,22.7 4.7,24 3,24 C1.3,24 0,22.7 0,21 C0,19.3 1.3,18 3,18 Z M12,18 C13.7,18 15,19.3 15,21 C15,22.7 13.7,24 12,24 C10.3,24 9,22.7 9,21 C9,19.3 10.3,18 12,18 Z"/>
 </symbol>
+<symbol id="icon-archives" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<path stroke="none" fill-rule="evenodd" d="M23.5,3 C23.7761424,3 24,3.22385763 24,3.5 L24,3.5 L24,8.5 C24,8.77614237 23.7761424,9 23.5,9 L23.5,9 L23,9 L23,21.5 C23,21.7454599 22.8231248,21.9496084 22.5898756,21.9919443 L22.5,22 L1.5,22 C1.22385763,22 1,21.7761424 1,21.5 L1,21.5 L1,9 L0.5,9 C0.254540111,9 0.0503916296,8.82312484 0.00805566941,8.58987563 L0,8.5 L0,3.5 C0,3.22385763 0.223857625,3 0.5,3 L0.5,3 Z M22,9 L2,9 L2,21 L22,21 L22,9 Z M15.5,11 C15.7761424,11 16,11.2238576 16,11.5 L16,11.5 L16,13.5 C16,13.7761424 15.7761424,14 15.5,14 L15.5,14 L8.5,14 C8.22385763,14 8,13.7761424 8,13.5 L8,13.5 L8,11.5 C8,11.2238576 8.22385763,11 8.5,11 L8.5,11 Z M15,12 L9,12 L9,13 L15,13 L15,12 Z M23,4 L1,4 L1,8 L23,8 L23,4 Z"/>
+</symbol>
 <symbol id="icon-arrow-large-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
  <path stroke="none" fill-rule="evenodd" d="M8.79069767,17.6511628 C8.69302326,17.6511628 8.59534884,17.6511628 8.49767442,17.5534884 L0.195348837,10.7162791 C0.0976744186,10.6186047 0,10.5209302 0,10.3255814 C0,10.1302326 0.0976744186,10.0325581 0.195348837,9.93488372 L8.49767442,3.09767442 C8.59534884,3 8.79069767,3 8.98604651,3 C9.18139535,3.09767442 9.27906977,3.29302326 9.27906977,3.48837209 L9.27906977,6.90697674 L20.5116279,6.90697674 C20.8046512,6.90697674 21,7.10232558 21,7.39534884 L21,13.255814 C21,13.5488372 20.8046512,13.744186 20.5116279,13.744186 L9.27906977,13.744186 L9.27906977,17.1627907 C9.27906977,17.3581395 9.18139535,17.5534884 8.98604651,17.6511628 C8.88837209,17.6511628 8.88837209,17.6511628 8.79069767,17.6511628 Z M1.26976744,10.3255814 L8.30232558,16.0883721 L8.30232558,13.255814 C8.30232558,12.9627907 8.49767442,12.7674419 8.79069767,12.7674419 L20.0232558,12.7674419 L20.0232558,7.88372093 L8.79069767,7.88372093 C8.49767442,7.88372093 8.30232558,7.68837209 8.30232558,7.39534884 L8.30232558,4.5627907 L1.26976744,10.3255814 Z"/>
 </symbol>

package/src/utils/timezoneHelper.js

@@ -1,3 +1,5 @@
+import moment from "moment-timezone";
+
 export const getTimeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 export const getTimeZoneByName = name => {
@@ -14,6 +16,22 @@ export const getTimeZoneName = () => {
 	return timezoneName;
 };
 
+//converting time from other timezone to local
+export const convertTimeToLocalTimeZone = (date, timezone) => {
+	const dateWithoutZone = moment.tz(date, timezone).format("YYYY-MM-DDTHH:mm:ss.SSS");
+	const localZone = moment(dateWithoutZone).format("Z");
+	const dateWithLocalZone = [dateWithoutZone, localZone].join("");
+	return new Date(dateWithLocalZone);
+};
+
+//converting time from local timezone to other
+export const convertTimeToOtherTimeZone = (date, timezone) => {
+	const dateWithoutZone = moment(date).format("YYYY-MM-DDTHH:mm:ss.SSS");
+	const otherZone = moment.tz(date, timezone).format("Z");
+	const dateWithOtherZone = [dateWithoutZone, otherZone].join("");
+	return new Date(dateWithOtherZone);
+};
+
 export const timeZonesList = new Map([
 	["Africa/Bangui", "W. Central Africa Standard Time"],
 	["Africa/Cairo", "Egypt Standard Time"],

package/src/utils/timezoneHelper.test.js

@@ -1,4 +1,10 @@
-import { getTimeZone, getTimeZoneByName, getTimeZoneName } from "./timezoneHelper";
+import {
+	getTimeZone,
+	getTimeZoneByName,
+	getTimeZoneName,
+	convertTimeToLocalTimeZone,
+	convertTimeToOtherTimeZone,
+} from "./timezoneHelper";
 
 describe("Timezone Helper", () => {
 	beforeEach(() => {
@@ -30,4 +36,18 @@ describe("Timezone Helper", () => {
 	it("Retrieves user timezone name", () => {
 		expect(getTimeZoneName, "called with", [], "to satisfy", "W. Europe Standard Time");
 	});
+
+	it("Retrieves user local timezone date", () => {
+		const timezoneName = "America/New_York";
+		const date = "Mon Apr 04 2022 13:00:00 GMT+0300 (Eastern European Summer Time)";
+		const expectedDate = new Date("2022-04-04T09:00:00Z");
+		expect(convertTimeToLocalTimeZone, "called with", [date, timezoneName], "to satisfy", expectedDate);
+	});
+
+	it("Retrieves user other timezone date", () => {
+		const timezoneName = "America/New_York";
+		const date = "Mon Apr 04 2022 03:00:00 GMT+0300 (Eastern European Summer Time)";
+		const expectedDate = new Date("2022-04-04T04:00:00Z");
+		expect(convertTimeToOtherTimeZone, "called with", [date, timezoneName], "to satisfy", expectedDate);
+	});
 });