@plusscommunities/pluss-core-web 1.4.23 → 1.4.25

package/dist/index.cjs.js

@@ -27,13 +27,13 @@ var _typeof = require('@babel/runtime/helpers/typeof');
 var Dropzone = require('react-dropzone');
 var reactRouter = require('react-router');
 var reactBootstrap = require('react-bootstrap');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactLottie = require('@crello/react-lottie');
 var reactCsv = require('react-csv');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var reactColor = require('react-color');
 var tinycolor = require('tinycolor2');
 var reactRouterDom = require('react-router-dom');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -958,6 +958,14 @@ var getSiteLevelFromState = function getSiteLevelFromState(state) {
   return siteConfig;
 };
 
+var getMerchantsFromState = function getMerchantsFromState(state) {
+  if (!state || !state.auth || !state.auth.user) return [];
+  var currentSite = state.auth.user.Roles.find(function (r) {
+    return r.site === state.auth.site;
+  });
+  return currentSite && !___default['default'].isEmpty(currentSite.siteInfo.Accounts) ? currentSite.siteInfo.Accounts : [];
+};
+
 var readJSONFromStorage = function readJSONFromStorage(storage, key, fallback) {
   var value = storage.getItem(key);
 
@@ -1098,6 +1106,18 @@ var getTimepickerTime = function getTimepickerTime(input) {
     hours: timeSplit[0],
     minutes: timeSplit[1].substring(0, 2)
   };
+}; //converts the result of getTimePickerTime into a number representing minutes since midnight
+
+var timeToMinutes = function timeToMinutes(time) {
+  return parseInt(time.hours, 10) * 60 + parseInt(time.minutes, 10);
+}; // checks whether there is an overlap between two time frames given time and end times in minutes since midnight
+
+var hasTimeframeOverlap = function hasTimeframeOverlap(aStart, aEnd, bStart, bEnd) {
+  return aStart < bEnd && bStart < aEnd || bStart < aEnd && aStart < bEnd;
+}; // converts a time picker input into midnights since midnight
+
+var timepickerToMinutes = function timepickerToMinutes(input) {
+  return timeToMinutes(getTimepickerTime(input));
 };
 var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput, timeInput) {
   var dateObject = new Date(dateInput);
@@ -1106,6 +1126,22 @@ var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput,
   dateObject.setMinutes(time.minutes);
   return dateObject;
 };
+var minutesToString = function minutesToString(minutes) {
+  var hours = Math.floor(minutes / 60);
+  var remainingMinutes = minutes % 60;
+  var hoursString = hours > 1 ? "".concat(hours, " hours") : "".concat(hours, " hour");
+  var minutesString = remainingMinutes > 1 ? "".concat(remainingMinutes, " minutes") : "".concat(remainingMinutes, " minute");
+
+  if (hours && remainingMinutes) {
+    return "".concat(hoursString, " ").concat(minutesString);
+  } else if (hours) {
+    return hoursString;
+  } else if (remainingMinutes) {
+    return minutesString;
+  } else {
+    return '0 minutes';
+  }
+};
 var getUTCFromTimeDatePickers = function getUTCFromTimeDatePickers(dateInput, timeInput) {
   var dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
   return moment__default['default'].utc(dateObject);
@@ -1759,11 +1795,16 @@ var index$3 = /*#__PURE__*/Object.freeze({
   getSiteNameFromRoles: getSiteNameFromRoles,
   getSiteSettingFromState: getSiteSettingFromState,
   getSiteLevelFromState: getSiteLevelFromState,
+  getMerchantsFromState: getMerchantsFromState,
   readJSONFromStorage: readJSONFromStorage,
   setLocalStorage: setLocalStorage,
   readStorageWithCookie: readStorageWithCookie,
   getTimepickerTime: getTimepickerTime,
+  timeToMinutes: timeToMinutes,
+  hasTimeframeOverlap: hasTimeframeOverlap,
+  timepickerToMinutes: timepickerToMinutes,
   getDateFromTimeDatePickers: getDateFromTimeDatePickers,
+  minutesToString: minutesToString,
   getUTCFromTimeDatePickers: getUTCFromTimeDatePickers,
   getPluralS: getPluralS,
   getPluralOptions: getPluralOptions,
@@ -5318,6 +5359,65 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   return DatePicker;
 }(React.Component);
 
+function DurationInput(_ref) {
+  var handleChange = _ref.handleChange,
+      label = _ref.label,
+      value = _ref.value,
+      className = _ref.className,
+      labelWidth = _ref.labelWidth;
+  var hours = Math.floor(value / 60);
+  var minutes = value % 60;
+
+  var handleHourChange = function handleHourChange(event) {
+    var newHours = Math.max(0, Math.min(+event.target.value, 24));
+    handleChange(newHours * 60 + minutes);
+  };
+
+  var handleMinuteChange = function handleMinuteChange(event) {
+    var newMinutes = Math.max(0, Math.min(+event.target.value, 59));
+    handleChange(hours * 60 + newMinutes);
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex flex-center ".concat(className ? className : '')
+  }, label && /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "formTitleSmall",
+    style: {
+      marginRight: '10px',
+      width: labelWidth || 50
+    }
+  }, label), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "genericInput",
+    type: "number",
+    min: "0",
+    max: "24",
+    value: hours,
+    onChange: handleHourChange,
+    style: {
+      width: 50,
+      marginRight: 5
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "formTitleSmall",
+    style: {
+      marginRight: 10
+    }
+  }, "Hour(s)"), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "genericInput",
+    type: "number",
+    min: "0",
+    max: "59",
+    value: minutes,
+    onChange: handleMinuteChange,
+    style: {
+      width: 50,
+      marginRight: 5
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "formTitleSmall"
+  }, "Minute(s)"));
+}
+
 function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -8785,6 +8885,55 @@ var UserListing = /*#__PURE__*/function (_Component) {
     value: function getSize() {
       return this.props.size || 30;
     }
+  }, {
+    key: "getImage",
+    value: function getImage() {
+      if (this.props.user && this.props.user.profilePic) {
+        return this.props.user.profilePic;
+      }
+
+      if (this.props.image) {
+        return this.props.image;
+      }
+
+      return undefined;
+    }
+  }, {
+    key: "getKey",
+    value: function getKey() {
+      if (this.props.user && this.props.user.id) {
+        return this.props.user.id;
+      }
+
+      return this.props.id;
+    }
+  }, {
+    key: "getText",
+    value: function getText() {
+      if (this.props.user && this.props.user.displayName) {
+        return this.props.user.displayName;
+      }
+
+      return this.props.title;
+    }
+  }, {
+    key: "getBorderRadius",
+    value: function getBorderRadius() {
+      if (this.props.squareImage) {
+        return 4;
+      }
+
+      return this.getSize() / 2;
+    }
+  }, {
+    key: "isLoading",
+    value: function isLoading() {
+      if (this.props.user && this.props.user.loading) {
+        return this.props.user && this.props.user.loading;
+      }
+
+      return this.props.isLoading;
+    }
   }, {
     key: "renderRight",
     value: function renderRight() {
@@ -8803,25 +8952,45 @@ var UserListing = /*#__PURE__*/function (_Component) {
 
       return this.props.subContent;
     }
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      if (this.props.squareImage) {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: "url(".concat(this.getImage(), ")")
+          },
+          alt: "".concat(this.getText(), " Image")
+        });
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+        size: this.getSize(),
+        className: "userListing_profilePic",
+        image: this.getImage()
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+        key: this.getKey(),
         className: "userListing",
         style: {
           minHeight: this.getSize() + 5,
           cursor: this.props.onClick ? 'pointer' : 'inherit',
-          opacity: this.props.user && this.props.user.loading ? 0.5 : 1
+          opacity: this.isLoading() ? 0.5 : 1
         },
         onClick: this.props.onClick
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "userListing_inner"
-      }, /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
-        size: this.getSize(),
-        className: "userListing_profilePic",
-        image: this.props.user.profilePic
-      }), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, this.renderImage(), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "userListing_middle",
         style: {
           height: this.getSize()
@@ -8832,7 +9001,7 @@ var UserListing = /*#__PURE__*/function (_Component) {
           color: '#fff'
         } : null,
         className: this.props.textClass
-      }, this.props.user.displayName), this.renderSub())), this.renderRight());
+      }, this.getText()), this.renderSub())), this.renderRight());
     }
   }]);
 
@@ -10512,6 +10681,23 @@ var OptionsSection = /*#__PURE__*/function (_Component) {
 
       return selectedOption.text;
     }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon(o, isSelected) {
+      switch (o.iconType) {
+        case 'fa':
+          return /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+            className: "optionsButton_icon",
+            icon: o.icon
+          });
+
+        default:
+          return /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+            icon: o.icon,
+            colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
+          });
+      }
+    }
   }, {
     key: "renderOptionButton",
     value: function renderOptionButton(o) {
@@ -10526,10 +10712,7 @@ var OptionsSection = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "optionsButton_iconContainer"
-      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-        icon: o.icon,
-        colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
-      })), /*#__PURE__*/React__default['default'].createElement(Text, {
+      }, this.renderIcon(o, isSelected)), /*#__PURE__*/React__default['default'].createElement(Text, {
         type: "formLabelSmall",
         className: "optionsButton_text"
       }, o.text));
@@ -11622,6 +11805,7 @@ var index = /*#__PURE__*/Object.freeze({
   Comment: Comment,
   CommentSection: CommentSection,
   DatePicker: DatePicker,
+  DurationInput: DurationInput,
   FileInput: FileInput,
   GenericInput: GenericInput,
   Header: exportObj$4,

package/dist/index.esm.js

@@ -23,13 +23,13 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import Dropzone from 'react-dropzone';
 import { withRouter } from 'react-router';
 import { MenuItem, DropdownButton, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Lottie } from '@crello/react-lottie';
 import { CSVLink } from 'react-csv';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ChromePicker } from 'react-color';
 import tinycolor from 'tinycolor2';
 import { Link } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartLine } from '@fortawesome/free-solid-svg-icons';
 
 var CoreConfig = {
@@ -928,6 +928,14 @@ var getSiteLevelFromState = function getSiteLevelFromState(state) {
   return siteConfig;
 };
 
+var getMerchantsFromState = function getMerchantsFromState(state) {
+  if (!state || !state.auth || !state.auth.user) return [];
+  var currentSite = state.auth.user.Roles.find(function (r) {
+    return r.site === state.auth.site;
+  });
+  return currentSite && !_.isEmpty(currentSite.siteInfo.Accounts) ? currentSite.siteInfo.Accounts : [];
+};
+
 var readJSONFromStorage = function readJSONFromStorage(storage, key, fallback) {
   var value = storage.getItem(key);
 
@@ -1068,6 +1076,18 @@ var getTimepickerTime = function getTimepickerTime(input) {
     hours: timeSplit[0],
     minutes: timeSplit[1].substring(0, 2)
   };
+}; //converts the result of getTimePickerTime into a number representing minutes since midnight
+
+var timeToMinutes = function timeToMinutes(time) {
+  return parseInt(time.hours, 10) * 60 + parseInt(time.minutes, 10);
+}; // checks whether there is an overlap between two time frames given time and end times in minutes since midnight
+
+var hasTimeframeOverlap = function hasTimeframeOverlap(aStart, aEnd, bStart, bEnd) {
+  return aStart < bEnd && bStart < aEnd || bStart < aEnd && aStart < bEnd;
+}; // converts a time picker input into midnights since midnight
+
+var timepickerToMinutes = function timepickerToMinutes(input) {
+  return timeToMinutes(getTimepickerTime(input));
 };
 var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput, timeInput) {
   var dateObject = new Date(dateInput);
@@ -1076,6 +1096,22 @@ var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput,
   dateObject.setMinutes(time.minutes);
   return dateObject;
 };
+var minutesToString = function minutesToString(minutes) {
+  var hours = Math.floor(minutes / 60);
+  var remainingMinutes = minutes % 60;
+  var hoursString = hours > 1 ? "".concat(hours, " hours") : "".concat(hours, " hour");
+  var minutesString = remainingMinutes > 1 ? "".concat(remainingMinutes, " minutes") : "".concat(remainingMinutes, " minute");
+
+  if (hours && remainingMinutes) {
+    return "".concat(hoursString, " ").concat(minutesString);
+  } else if (hours) {
+    return hoursString;
+  } else if (remainingMinutes) {
+    return minutesString;
+  } else {
+    return '0 minutes';
+  }
+};
 var getUTCFromTimeDatePickers = function getUTCFromTimeDatePickers(dateInput, timeInput) {
   var dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
   return moment.utc(dateObject);
@@ -1729,11 +1765,16 @@ var index$3 = /*#__PURE__*/Object.freeze({
   getSiteNameFromRoles: getSiteNameFromRoles,
   getSiteSettingFromState: getSiteSettingFromState,
   getSiteLevelFromState: getSiteLevelFromState,
+  getMerchantsFromState: getMerchantsFromState,
   readJSONFromStorage: readJSONFromStorage,
   setLocalStorage: setLocalStorage,
   readStorageWithCookie: readStorageWithCookie,
   getTimepickerTime: getTimepickerTime,
+  timeToMinutes: timeToMinutes,
+  hasTimeframeOverlap: hasTimeframeOverlap,
+  timepickerToMinutes: timepickerToMinutes,
   getDateFromTimeDatePickers: getDateFromTimeDatePickers,
+  minutesToString: minutesToString,
   getUTCFromTimeDatePickers: getUTCFromTimeDatePickers,
   getPluralS: getPluralS,
   getPluralOptions: getPluralOptions,
@@ -5288,6 +5329,65 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   return DatePicker;
 }(Component);
 
+function DurationInput(_ref) {
+  var handleChange = _ref.handleChange,
+      label = _ref.label,
+      value = _ref.value,
+      className = _ref.className,
+      labelWidth = _ref.labelWidth;
+  var hours = Math.floor(value / 60);
+  var minutes = value % 60;
+
+  var handleHourChange = function handleHourChange(event) {
+    var newHours = Math.max(0, Math.min(+event.target.value, 24));
+    handleChange(newHours * 60 + minutes);
+  };
+
+  var handleMinuteChange = function handleMinuteChange(event) {
+    var newMinutes = Math.max(0, Math.min(+event.target.value, 59));
+    handleChange(hours * 60 + newMinutes);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-center ".concat(className ? className : '')
+  }, label && /*#__PURE__*/React.createElement(Text, {
+    type: "formTitleSmall",
+    style: {
+      marginRight: '10px',
+      width: labelWidth || 50
+    }
+  }, label), /*#__PURE__*/React.createElement("input", {
+    className: "genericInput",
+    type: "number",
+    min: "0",
+    max: "24",
+    value: hours,
+    onChange: handleHourChange,
+    style: {
+      width: 50,
+      marginRight: 5
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    type: "formTitleSmall",
+    style: {
+      marginRight: 10
+    }
+  }, "Hour(s)"), /*#__PURE__*/React.createElement("input", {
+    className: "genericInput",
+    type: "number",
+    min: "0",
+    max: "59",
+    value: minutes,
+    onChange: handleMinuteChange,
+    style: {
+      width: 50,
+      marginRight: 5
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    type: "formTitleSmall"
+  }, "Minute(s)"));
+}
+
 function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -8755,6 +8855,55 @@ var UserListing = /*#__PURE__*/function (_Component) {
     value: function getSize() {
       return this.props.size || 30;
     }
+  }, {
+    key: "getImage",
+    value: function getImage() {
+      if (this.props.user && this.props.user.profilePic) {
+        return this.props.user.profilePic;
+      }
+
+      if (this.props.image) {
+        return this.props.image;
+      }
+
+      return undefined;
+    }
+  }, {
+    key: "getKey",
+    value: function getKey() {
+      if (this.props.user && this.props.user.id) {
+        return this.props.user.id;
+      }
+
+      return this.props.id;
+    }
+  }, {
+    key: "getText",
+    value: function getText() {
+      if (this.props.user && this.props.user.displayName) {
+        return this.props.user.displayName;
+      }
+
+      return this.props.title;
+    }
+  }, {
+    key: "getBorderRadius",
+    value: function getBorderRadius() {
+      if (this.props.squareImage) {
+        return 4;
+      }
+
+      return this.getSize() / 2;
+    }
+  }, {
+    key: "isLoading",
+    value: function isLoading() {
+      if (this.props.user && this.props.user.loading) {
+        return this.props.user && this.props.user.loading;
+      }
+
+      return this.props.isLoading;
+    }
   }, {
     key: "renderRight",
     value: function renderRight() {
@@ -8773,25 +8922,45 @@ var UserListing = /*#__PURE__*/function (_Component) {
 
       return this.props.subContent;
     }
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      if (this.props.squareImage) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: "url(".concat(this.getImage(), ")")
+          },
+          alt: "".concat(this.getText(), " Image")
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(ProfilePic, {
+        size: this.getSize(),
+        className: "userListing_profilePic",
+        image: this.getImage()
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", {
-        key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+        key: this.getKey(),
         className: "userListing",
         style: {
           minHeight: this.getSize() + 5,
           cursor: this.props.onClick ? 'pointer' : 'inherit',
-          opacity: this.props.user && this.props.user.loading ? 0.5 : 1
+          opacity: this.isLoading() ? 0.5 : 1
         },
         onClick: this.props.onClick
       }, /*#__PURE__*/React.createElement("div", {
         className: "userListing_inner"
-      }, /*#__PURE__*/React.createElement(ProfilePic, {
-        size: this.getSize(),
-        className: "userListing_profilePic",
-        image: this.props.user.profilePic
-      }), /*#__PURE__*/React.createElement("div", {
+      }, this.renderImage(), /*#__PURE__*/React.createElement("div", {
         className: "userListing_middle",
         style: {
           height: this.getSize()
@@ -8802,7 +8971,7 @@ var UserListing = /*#__PURE__*/function (_Component) {
           color: '#fff'
         } : null,
         className: this.props.textClass
-      }, this.props.user.displayName), this.renderSub())), this.renderRight());
+      }, this.getText()), this.renderSub())), this.renderRight());
     }
   }]);
 
@@ -10482,6 +10651,23 @@ var OptionsSection = /*#__PURE__*/function (_Component) {
 
       return selectedOption.text;
     }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon(o, isSelected) {
+      switch (o.iconType) {
+        case 'fa':
+          return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+            className: "optionsButton_icon",
+            icon: o.icon
+          });
+
+        default:
+          return /*#__PURE__*/React.createElement(SVGIcon, {
+            icon: o.icon,
+            colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
+          });
+      }
+    }
   }, {
     key: "renderOptionButton",
     value: function renderOptionButton(o) {
@@ -10496,10 +10682,7 @@ var OptionsSection = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "optionsButton_iconContainer"
-      }, /*#__PURE__*/React.createElement(SVGIcon, {
-        icon: o.icon,
-        colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
-      })), /*#__PURE__*/React.createElement(Text, {
+      }, this.renderIcon(o, isSelected)), /*#__PURE__*/React.createElement(Text, {
         type: "formLabelSmall",
         className: "optionsButton_text"
       }, o.text));
@@ -11592,6 +11775,7 @@ var index = /*#__PURE__*/Object.freeze({
   Comment: Comment,
   CommentSection: CommentSection,
   DatePicker: DatePicker,
+  DurationInput: DurationInput,
   FileInput: FileInput,
   GenericInput: GenericInput,
   Header: exportObj$4,

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('moment'), require('react'), require('jquery'), require('js-cookie'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2'), require('react-router-dom'), require('@fortawesome/react-fontawesome'), require('@fortawesome/free-solid-svg-icons')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'moment', 'react', 'jquery', 'js-cookie', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2', 'react-router-dom', '@fortawesome/react-fontawesome', '@fortawesome/free-solid-svg-icons'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.moment, global.React, global.$, global.Cookies, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._toConsumableArray, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor, global.reactRouterDom, global.reactFontawesome, global.freeSolidSvgIcons));
-}(this, (function (exports, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, moment, React, $, Cookies, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _toConsumableArray, _typeof, Dropzone, reactRouter, reactBootstrap, reactLottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor, reactRouterDom, reactFontawesome, freeSolidSvgIcons) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('moment'), require('react'), require('jquery'), require('js-cookie'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@fortawesome/react-fontawesome'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2'), require('react-router-dom'), require('@fortawesome/free-solid-svg-icons')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'moment', 'react', 'jquery', 'js-cookie', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@fortawesome/react-fontawesome', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2', 'react-router-dom', '@fortawesome/free-solid-svg-icons'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.moment, global.React, global.$, global.Cookies, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._toConsumableArray, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactFontawesome, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor, global.reactRouterDom, global.freeSolidSvgIcons));
+}(this, (function (exports, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, moment, React, $, Cookies, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _toConsumableArray, _typeof, Dropzone, reactRouter, reactBootstrap, reactFontawesome, reactLottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor, reactRouterDom, freeSolidSvgIcons) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -926,6 +926,14 @@
     return siteConfig;
   };
 
+  var getMerchantsFromState = function getMerchantsFromState(state) {
+    if (!state || !state.auth || !state.auth.user) return [];
+    var currentSite = state.auth.user.Roles.find(function (r) {
+      return r.site === state.auth.site;
+    });
+    return currentSite && !___default['default'].isEmpty(currentSite.siteInfo.Accounts) ? currentSite.siteInfo.Accounts : [];
+  };
+
   var readJSONFromStorage = function readJSONFromStorage(storage, key, fallback) {
     var value = storage.getItem(key);
 
@@ -1066,6 +1074,18 @@
       hours: timeSplit[0],
       minutes: timeSplit[1].substring(0, 2)
     };
+  }; //converts the result of getTimePickerTime into a number representing minutes since midnight
+
+  var timeToMinutes = function timeToMinutes(time) {
+    return parseInt(time.hours, 10) * 60 + parseInt(time.minutes, 10);
+  }; // checks whether there is an overlap between two time frames given time and end times in minutes since midnight
+
+  var hasTimeframeOverlap = function hasTimeframeOverlap(aStart, aEnd, bStart, bEnd) {
+    return aStart < bEnd && bStart < aEnd || bStart < aEnd && aStart < bEnd;
+  }; // converts a time picker input into midnights since midnight
+
+  var timepickerToMinutes = function timepickerToMinutes(input) {
+    return timeToMinutes(getTimepickerTime(input));
   };
   var getDateFromTimeDatePickers = function getDateFromTimeDatePickers(dateInput, timeInput) {
     var dateObject = new Date(dateInput);
@@ -1074,6 +1094,22 @@
     dateObject.setMinutes(time.minutes);
     return dateObject;
   };
+  var minutesToString = function minutesToString(minutes) {
+    var hours = Math.floor(minutes / 60);
+    var remainingMinutes = minutes % 60;
+    var hoursString = hours > 1 ? "".concat(hours, " hours") : "".concat(hours, " hour");
+    var minutesString = remainingMinutes > 1 ? "".concat(remainingMinutes, " minutes") : "".concat(remainingMinutes, " minute");
+
+    if (hours && remainingMinutes) {
+      return "".concat(hoursString, " ").concat(minutesString);
+    } else if (hours) {
+      return hoursString;
+    } else if (remainingMinutes) {
+      return minutesString;
+    } else {
+      return '0 minutes';
+    }
+  };
   var getUTCFromTimeDatePickers = function getUTCFromTimeDatePickers(dateInput, timeInput) {
     var dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
     return moment__default['default'].utc(dateObject);
@@ -1727,11 +1763,16 @@
     getSiteNameFromRoles: getSiteNameFromRoles,
     getSiteSettingFromState: getSiteSettingFromState,
     getSiteLevelFromState: getSiteLevelFromState,
+    getMerchantsFromState: getMerchantsFromState,
     readJSONFromStorage: readJSONFromStorage,
     setLocalStorage: setLocalStorage,
     readStorageWithCookie: readStorageWithCookie,
     getTimepickerTime: getTimepickerTime,
+    timeToMinutes: timeToMinutes,
+    hasTimeframeOverlap: hasTimeframeOverlap,
+    timepickerToMinutes: timepickerToMinutes,
     getDateFromTimeDatePickers: getDateFromTimeDatePickers,
+    minutesToString: minutesToString,
     getUTCFromTimeDatePickers: getUTCFromTimeDatePickers,
     getPluralS: getPluralS,
     getPluralOptions: getPluralOptions,
@@ -5286,6 +5327,65 @@
     return DatePicker;
   }(React.Component);
 
+  function DurationInput(_ref) {
+    var handleChange = _ref.handleChange,
+        label = _ref.label,
+        value = _ref.value,
+        className = _ref.className,
+        labelWidth = _ref.labelWidth;
+    var hours = Math.floor(value / 60);
+    var minutes = value % 60;
+
+    var handleHourChange = function handleHourChange(event) {
+      var newHours = Math.max(0, Math.min(+event.target.value, 24));
+      handleChange(newHours * 60 + minutes);
+    };
+
+    var handleMinuteChange = function handleMinuteChange(event) {
+      var newMinutes = Math.max(0, Math.min(+event.target.value, 59));
+      handleChange(hours * 60 + newMinutes);
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "flex flex-center ".concat(className ? className : '')
+    }, label && /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "formTitleSmall",
+      style: {
+        marginRight: '10px',
+        width: labelWidth || 50
+      }
+    }, label), /*#__PURE__*/React__default['default'].createElement("input", {
+      className: "genericInput",
+      type: "number",
+      min: "0",
+      max: "24",
+      value: hours,
+      onChange: handleHourChange,
+      style: {
+        width: 50,
+        marginRight: 5
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "formTitleSmall",
+      style: {
+        marginRight: 10
+      }
+    }, "Hour(s)"), /*#__PURE__*/React__default['default'].createElement("input", {
+      className: "genericInput",
+      type: "number",
+      min: "0",
+      max: "59",
+      value: minutes,
+      onChange: handleMinuteChange,
+      style: {
+        width: 50,
+        marginRight: 5
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "formTitleSmall"
+    }, "Minute(s)"));
+  }
+
   function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -8753,6 +8853,55 @@
       value: function getSize() {
         return this.props.size || 30;
       }
+    }, {
+      key: "getImage",
+      value: function getImage() {
+        if (this.props.user && this.props.user.profilePic) {
+          return this.props.user.profilePic;
+        }
+
+        if (this.props.image) {
+          return this.props.image;
+        }
+
+        return undefined;
+      }
+    }, {
+      key: "getKey",
+      value: function getKey() {
+        if (this.props.user && this.props.user.id) {
+          return this.props.user.id;
+        }
+
+        return this.props.id;
+      }
+    }, {
+      key: "getText",
+      value: function getText() {
+        if (this.props.user && this.props.user.displayName) {
+          return this.props.user.displayName;
+        }
+
+        return this.props.title;
+      }
+    }, {
+      key: "getBorderRadius",
+      value: function getBorderRadius() {
+        if (this.props.squareImage) {
+          return 4;
+        }
+
+        return this.getSize() / 2;
+      }
+    }, {
+      key: "isLoading",
+      value: function isLoading() {
+        if (this.props.user && this.props.user.loading) {
+          return this.props.user && this.props.user.loading;
+        }
+
+        return this.props.isLoading;
+      }
     }, {
       key: "renderRight",
       value: function renderRight() {
@@ -8771,25 +8920,45 @@
 
         return this.props.subContent;
       }
+    }, {
+      key: "renderImage",
+      value: function renderImage() {
+        if (this.props.squareImage) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            style: {
+              height: this.getSize(),
+              width: this.getSize(),
+              borderRadius: this.getBorderRadius(),
+              marginRight: 8,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundImage: "url(".concat(this.getImage(), ")")
+            },
+            alt: "".concat(this.getText(), " Image")
+          });
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+          size: this.getSize(),
+          className: "userListing_profilePic",
+          image: this.getImage()
+        });
+      }
     }, {
       key: "render",
       value: function render() {
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+          key: this.getKey(),
           className: "userListing",
           style: {
             minHeight: this.getSize() + 5,
             cursor: this.props.onClick ? 'pointer' : 'inherit',
-            opacity: this.props.user && this.props.user.loading ? 0.5 : 1
+            opacity: this.isLoading() ? 0.5 : 1
           },
           onClick: this.props.onClick
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "userListing_inner"
-        }, /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
-          size: this.getSize(),
-          className: "userListing_profilePic",
-          image: this.props.user.profilePic
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, this.renderImage(), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "userListing_middle",
           style: {
             height: this.getSize()
@@ -8800,7 +8969,7 @@
             color: '#fff'
           } : null,
           className: this.props.textClass
-        }, this.props.user.displayName), this.renderSub())), this.renderRight());
+        }, this.getText()), this.renderSub())), this.renderRight());
       }
     }]);
 
@@ -10480,6 +10649,23 @@
 
         return selectedOption.text;
       }
+    }, {
+      key: "renderIcon",
+      value: function renderIcon(o, isSelected) {
+        switch (o.iconType) {
+          case 'fa':
+            return /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+              className: "optionsButton_icon",
+              icon: o.icon
+            });
+
+          default:
+            return /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+              icon: o.icon,
+              colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
+            });
+        }
+      }
     }, {
       key: "renderOptionButton",
       value: function renderOptionButton(o) {
@@ -10494,10 +10680,7 @@
           }
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "optionsButton_iconContainer"
-        }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-          icon: o.icon,
-          colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
-        })), /*#__PURE__*/React__default['default'].createElement(Text, {
+        }, this.renderIcon(o, isSelected)), /*#__PURE__*/React__default['default'].createElement(Text, {
           type: "formLabelSmall",
           className: "optionsButton_text"
         }, o.text));
@@ -11590,6 +11773,7 @@
     Comment: Comment,
     CommentSection: CommentSection,
     DatePicker: DatePicker,
+    DurationInput: DurationInput,
     FileInput: FileInput,
     GenericInput: GenericInput,
     Header: exportObj$4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.4.23",
+  "version": "1.4.25",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/DurationInput.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Text } from './Text';
+
+function DurationInput({ handleChange, label, value, className, labelWidth }) {
+  const hours = Math.floor(value / 60);
+  const minutes = value % 60;
+
+  const handleHourChange = (event) => {
+    const newHours = Math.max(0, Math.min(+event.target.value, 24));
+    handleChange(newHours * 60 + minutes);
+  };
+
+  const handleMinuteChange = (event) => {
+    const newMinutes = Math.max(0, Math.min(+event.target.value, 59));
+    handleChange(hours * 60 + newMinutes);
+  };
+
+  return (
+    <div className={`flex flex-center ${className ? className : ''}`}>
+      {label && (
+        <Text type="formTitleSmall" style={{ marginRight: '10px', width: labelWidth || 50 }}>
+          {label}
+        </Text>
+      )}
+      <input
+        className="genericInput"
+        type="number"
+        min="0"
+        max="24"
+        value={hours}
+        onChange={handleHourChange}
+        style={{ width: 50, marginRight: 5 }}
+      />
+      <Text type="formTitleSmall" style={{ marginRight: 10 }}>
+        Hour(s)
+      </Text>
+      <input
+        className="genericInput"
+        type="number"
+        min="0"
+        max="59"
+        value={minutes}
+        onChange={handleMinuteChange}
+        style={{ width: 50, marginRight: 5 }}
+      />
+      <Text type="formTitleSmall">Minute(s)</Text>
+    </div>
+  );
+}
+
+export { DurationInput };

package/src/components/OptionsSection.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { COLOUR_BRANDING_MAIN } from '../colours';
 import { SVGIcon } from './SVGIcon';
 import { Text } from './Text';
@@ -17,6 +18,15 @@ class OptionsSection extends Component {
     return selectedOption.text;
   }
 
+  renderIcon(o, isSelected) {
+    switch (o.iconType) {
+      case 'fa':
+        return <FontAwesomeIcon className="optionsButton_icon" icon={o.icon} />;
+      default:
+        return <SVGIcon icon={o.icon} colour={isSelected ? '#fff' : COLOUR_BRANDING_MAIN} />;
+    }
+  }
+
   renderOptionButton(o) {
     const isSelected = this.props.selected === o.key;
     return (
@@ -27,9 +37,7 @@ class OptionsSection extends Component {
           this.props.selectOption(o.key);
         }}
       >
-        <div className="optionsButton_iconContainer">
-          <SVGIcon icon={o.icon} colour={isSelected ? '#fff' : COLOUR_BRANDING_MAIN} />
-        </div>
+        <div className="optionsButton_iconContainer">{this.renderIcon(o, isSelected)}</div>
         <Text type="formLabelSmall" className="optionsButton_text">
           {o.text}
         </Text>

package/src/components/UserListing.js

@@ -7,6 +7,44 @@ class UserListing extends Component {
     return this.props.size || 30;
   }
 
+  getImage() {
+    if (this.props.user && this.props.user.profilePic) {
+      return this.props.user.profilePic;
+    }
+    if (this.props.image) {
+      return this.props.image;
+    }
+    return undefined;
+  }
+
+  getKey() {
+    if (this.props.user && this.props.user.id) {
+      return this.props.user.id;
+    }
+    return this.props.id;
+  }
+
+  getText() {
+    if (this.props.user && this.props.user.displayName) {
+      return this.props.user.displayName;
+    }
+    return this.props.title;
+  }
+
+  getBorderRadius() {
+    if (this.props.squareImage) {
+      return 4;
+    }
+    return this.getSize() / 2;
+  }
+
+  isLoading() {
+    if (this.props.user && this.props.user.loading) {
+      return this.props.user && this.props.user.loading;
+    }
+    return this.props.isLoading;
+  }
+
   renderRight() {
     if (!this.props.rightContent) {
       return null;
@@ -21,23 +59,43 @@ class UserListing extends Component {
     return this.props.subContent;
   }
 
+  renderImage() {
+    if (this.props.squareImage) {
+      return (
+        <div
+          style={{
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: `url(${this.getImage()})`,
+          }}
+          alt={`${this.getText()} Image`}
+        />
+      );
+    }
+    return <ProfilePic size={this.getSize()} className="userListing_profilePic" image={this.getImage()} />;
+  }
+
   render() {
     return (
       <div
-        key={this.props.user.userId || this.props.user.Id || this.props.user.id}
+        key={this.getKey()}
         className="userListing"
         style={{
           minHeight: this.getSize() + 5,
           cursor: this.props.onClick ? 'pointer' : 'inherit',
-          opacity: this.props.user && this.props.user.loading ? 0.5 : 1,
+          opacity: this.isLoading() ? 0.5 : 1,
         }}
         onClick={this.props.onClick}
       >
         <div className="userListing_inner">
-          <ProfilePic size={this.getSize()} className="userListing_profilePic" image={this.props.user.profilePic} />
+          {this.renderImage()}
           <div className="userListing_middle" style={{ height: this.getSize() }}>
             <Text type="name" style={this.props.whiteText ? { color: '#fff' } : null} className={this.props.textClass}>
-              {this.props.user.displayName}
+              {this.getText()}
             </Text>
             {this.renderSub()}
           </div>

package/src/components/index.js

@@ -5,6 +5,7 @@ export * from './CheckBox';
 export * from './Comment';
 export * from './CommentSection';
 export * from './DatePicker';
+export * from './DurationInput';
 export * from './FileInput';
 export * from './GenericInput';
 export * from './Header';

package/src/helper/helper.js

@@ -111,6 +111,21 @@ export const getTimepickerTime = (input) => {
   };
 };
 
+//converts the result of getTimePickerTime into a number representing minutes since midnight
+export const timeToMinutes = (time) => {
+  return parseInt(time.hours, 10) * 60 + parseInt(time.minutes, 10);
+};
+
+// checks whether there is an overlap between two time frames given time and end times in minutes since midnight
+export const hasTimeframeOverlap = (aStart, aEnd, bStart, bEnd) => {
+  return (aStart < bEnd && bStart < aEnd) || (bStart < aEnd && aStart < bEnd);
+};
+
+// converts a time picker input into midnights since midnight
+export const timepickerToMinutes = (input) => {
+  return timeToMinutes(getTimepickerTime(input));
+};
+
 export const getDateFromTimeDatePickers = (dateInput, timeInput) => {
   const dateObject = new Date(dateInput);
   const time = getTimepickerTime(timeInput);
@@ -119,6 +134,24 @@ export const getDateFromTimeDatePickers = (dateInput, timeInput) => {
   return dateObject;
 };
 
+export const minutesToString = (minutes) => {
+  let hours = Math.floor(minutes / 60);
+  let remainingMinutes = minutes % 60;
+
+  let hoursString = hours > 1 ? `${hours} hours` : `${hours} hour`;
+  let minutesString = remainingMinutes > 1 ? `${remainingMinutes} minutes` : `${remainingMinutes} minute`;
+
+  if (hours && remainingMinutes) {
+    return `${hoursString} ${minutesString}`;
+  } else if (hours) {
+    return hoursString;
+  } else if (remainingMinutes) {
+    return minutesString;
+  } else {
+    return '0 minutes';
+  }
+};
+
 export const getUTCFromTimeDatePickers = (dateInput, timeInput) => {
   const dateObject = getDateFromTimeDatePickers(dateInput, timeInput);
   return moment.utc(dateObject);

package/src/helper/index.js

@@ -32,6 +32,7 @@ export { default as getSiteName } from './site/getSiteName';
 export { default as getSiteNameFromRoles } from './site/getSiteNameFromRoles';
 export { default as getSiteSettingFromState } from './site/getSiteSettingFromState';
 export { default as getSiteLevelFromState } from './site/getSiteLevelFromState';
+export { default as getMerchantsFromState } from './site/getMerchantsFromState';
 
 // storage
 export { default as readJSONFromStorage } from './storage/readJSONFromStorage';

package/src/helper/site/getMerchantsFromState.js

@@ -0,0 +1,9 @@
+import _ from 'lodash';
+
+const getMerchantsFromState = (state) => {
+  if (!state || !state.auth || !state.auth.user) return [];
+  const currentSite = state.auth.user.Roles.find((r) => r.site === state.auth.site);
+  return currentSite && !_.isEmpty(currentSite.siteInfo.Accounts) ? currentSite.siteInfo.Accounts : [];
+};
+
+export default getMerchantsFromState;