@agilemotion/oui-react-js 1.7.5 → 1.7.7

package/dist/InteractionPortalApp.js

@@ -80,7 +80,7 @@ const InteractionPortalApp = props => {
       footerSplitterColor: props.implConfig.footerSplitterColor,
       title: props.implConfig.loginTitle,
       titleColor: props.implConfig.titleColor,
-      logo: props.implConfig.logo
+      logo: props.implConfig.appLogo
     })
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
@@ -95,7 +95,7 @@ const InteractionPortalApp = props => {
       footerSplitterColor: props.implConfig.footerSplitterColor,
       title: props.implConfig.loginTitle,
       titleColor: props.implConfig.titleColor,
-      logo: props.implConfig.logo
+      logo: props.implConfig.appLogo
     })
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
@@ -110,7 +110,7 @@ const InteractionPortalApp = props => {
       footerSplitterColor: props.implConfig.footerSplitterColor,
       title: props.implConfig.loginTitle,
       titleColor: props.implConfig.titleColor,
-      logo: props.implConfig.logo
+      logo: props.implConfig.appLogo
     })
   }))));
 };

package/dist/RestService.js

@@ -68,7 +68,7 @@ class RestService {
           }
           if (httpParameterType === 'PATH_VARIABLE') {
             if (!_Utils.default.isNull(parameterValue)) {
-              pathParameters += '/' + (typeof parameterValue.value === 'object' ? JSON.stringify(parameterValue.value) : parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue);
+              pathParameters += '/' + (typeof parameterValue.value === 'object' ? encodeURIComponent(JSON.stringify(parameterValue.value)) : parameterValue.instanceType === 'TypedValue' ? encodeURIComponent(parameterValue.value) : encodeURIComponent(parameterValue));
             }
           }
           if (httpParameterType === 'HEADER') {

package/dist/RestUtils.js

@@ -69,7 +69,7 @@ class RestUtils {
         }
         if (httpParameterType === 'PATH_VARIABLE') {
           if (!_Utils.default.isNull(parameterValue)) {
-            pathParameters += '/' + (typeof parameterValue.value === 'object' ? JSON.stringify(parameterValue.value) : parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue);
+            pathParameters += '/' + (typeof parameterValue.value === 'object' ? encodeURIComponent(JSON.stringify(parameterValue.value)) : parameterValue.instanceType === 'TypedValue' ? encodeURIComponent(parameterValue.value) : encodeURIComponent(parameterValue));
           }
         }
         if (httpParameterType === 'HEADER') {

package/dist/Utils.js

@@ -10,6 +10,7 @@ var _ApplicationManager = _interopRequireDefault(require("./ApplicationManager")
 var _Observable = _interopRequireDefault(require("./event/Observable"));
 var _EventType = _interopRequireDefault(require("./event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const colors = ['#F44336', '#e91e63', '#9c27b0', '#673ab7', '#ff9800', '#ff5722', '#795548', '#607d8b', '#3f51b5', '#2196F3', '#00bcd4', '#009688', '#2196F3', '#32c787', '#00BCD4', '#ff5652', '#ffc107', '#ff85af', '#FF9800', '#39bbb0', '#4CAF50', '#ffeb3b', '#ffc107'];
 class Utils {
   constructor() {}
   static SYSTEM_ERROR_MESSAGE = "A system error has accured. Please contact your system administrator";
@@ -354,5 +355,21 @@ class Utils {
     }
     return bytes.buffer;
   };
+  static getAvatarColor(name) {
+    name = name.substr(0, 6);
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = 31 * hash + name.charCodeAt(i);
+    }
+    let index = Math.abs(hash % colors.length);
+    return colors[index];
+  }
+  static formatDateTime(dateTimeString) {
+    const date = new Date(dateTimeString);
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const monthIndex = date.getMonth();
+    const year = date.getFullYear();
+    return date.getDate() + ' ' + monthNames[monthIndex] + ' ' + year + ' - ' + date.getHours() + ':' + date.getMinutes();
+  }
 }
 exports.default = Utils;

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -396,6 +396,7 @@ const DocumentTemplateDesignerComponent = props => {
     toolbarItems: items,
     toolbarClick: onToolbarClick,
     contentChange: onContentChange,
+    enableTrackChanges: false,
     serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
     enableToolbar: true
   })));

package/dist/components/form/TextField.js

@@ -69,7 +69,10 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
 }));
 const TextField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
-    handle: props.handle
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      return value ? value.toString().trim() : value;
+    }
   }), base => /*#__PURE__*/_react.default.createElement(TextFieldWrapper, _extends({
     ref: ref,
     base: base

package/dist/components/media/chat/ChatPoll.js

@@ -0,0 +1,331 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _Utils = _interopRequireDefault(require("../../../Utils"));
+var _core = require("@material-ui/core");
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+require("./NewPoll.css");
+var _icons = require("@material-ui/icons");
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+var _RestUtils = require("../../../RestUtils");
+var _ApplicationManager = _interopRequireDefault(require("../../../ApplicationManager"));
+var _ChatRoom = require("./ChatRoom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import TextField from '../../form/TextField';
+
+const pollLengthDaysOptions = [{
+  id: 0,
+  label: "0"
+}, {
+  id: 1,
+  label: "1"
+}, {
+  id: 2,
+  label: "2"
+}, {
+  id: 3,
+  label: "3"
+}, {
+  id: 4,
+  label: "4"
+}, {
+  id: 5,
+  label: "5"
+}, {
+  id: 6,
+  label: "6"
+}, {
+  id: 7,
+  label: "7"
+}, {
+  id: 8,
+  label: "8"
+}, {
+  id: 9,
+  label: "9"
+}];
+const pollLengthHoursOptions = [{
+  id: 1,
+  label: "1"
+}, {
+  id: 2,
+  label: "2"
+}, {
+  id: 3,
+  label: "3"
+}, {
+  id: 4,
+  label: "4"
+}, {
+  id: 5,
+  label: "5"
+}, {
+  id: 3,
+  label: "6"
+}, {
+  id: 7,
+  label: "7"
+}, {
+  id: 8,
+  label: "8"
+}, {
+  id: 9,
+  label: "9"
+}, {
+  id: 10,
+  label: "10"
+}, {
+  id: 11,
+  label: "11"
+}, {
+  id: 12,
+  label: "12"
+}];
+const ChatPoll = props => {
+  const [errors, setErrors] = (0, _react.useState)({});
+  const [pollQuestion, setPollQuestion] = (0, _react.useState)('');
+  const [pollLengthDays, setPollLengthDays] = (0, _react.useState)('0');
+  const [pollLengthHours, setPollLengthHours] = (0, _react.useState)('1');
+  const [options, setOptions] = (0, _react.useState)([{
+    id: 'option-1',
+    label: 'Option 1',
+    value: ''
+  }, {
+    id: 'option-2',
+    label: 'Option 2',
+    value: ''
+  }]);
+  const getParticipantNames = () => {
+    let listOfParticipants = '';
+    for (const argument of props.participants) {
+      listOfParticipants += argument.name + ', ';
+    }
+    return listOfParticipants;
+  };
+  const formValueChangeHandler = e => {
+    handleFormValueChange(e.target.value, e.target.id, e.target.required);
+  };
+  const handleFormValueChange = (fieldValue, id, required) => {
+    if (id === 'pollQuestion') {
+      setPollQuestion(fieldValue);
+    }
+    if (required && !validateField(id, fieldValue)) {
+      return;
+    }
+    setErrors({
+      ...errors,
+      [id]: false
+    });
+  };
+  const validateField = (fieldId, fieldValue) => {
+    if (_Utils.default.isNull(fieldValue) || typeof fieldValue === 'string' && _Utils.default.isStringEmpty(fieldValue)) {
+      // value[fieldId] = null;
+      setErrors({
+        ...errors,
+        [fieldId]: true
+      });
+      return false;
+    }
+    return true;
+  };
+  const addOption = () => {
+    const ops = options.slice();
+    setOptions(ops.concat([{
+      id: `option-${options.length + 1}`,
+      label: `Option ${options.length + 1}`,
+      value: ''
+    }]));
+  };
+  const removeOption = index => {
+    const ops = options.slice();
+    setOptions([...ops.slice(0, index), ...ops.slice(index + 1)]);
+  };
+  const hasErrors = errorState => {
+    let properties = Object.getOwnPropertyNames(errorState);
+    for (let i = 0; i < properties.length; i++) {
+      if (errorState[properties[i]]) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const handleFormChange = (index, event) => {
+    let data = [...options];
+    data[index]['value'] = event.target.value;
+    setOptions(data);
+  };
+  const sendPoll = () => {
+    let errorState = {
+      pollQuestion: pollQuestion.length === 0,
+      pollOptions: options[0].value.length === 0 || options[1].value.length === 0
+    };
+    setErrors(errorState);
+    if (!hasErrors(errorState)) {
+      const data = {
+        question: pollQuestion,
+        pollLength: {
+          days: pollLengthDays,
+          hours: pollLengthHours
+        },
+        options: options.filter(option => option.value.length > 0).map(option => {
+          return {
+            text: option.value
+          };
+        })
+      };
+      (0, _RestUtils.postData)(`${_ChatRoom.location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/poll/create`, response => {
+        props.createPollHandler(response);
+      }, e => {}, true, data);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'chat-container'
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    style: {
+      fontSize: '24px',
+      marginBottom: '8px'
+    }
+  }, "Create Poll"), /*#__PURE__*/_react.default.createElement("p", null, "Poll audience: ", /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontWeight: '10'
+    }
+  }, getParticipantNames(), " ")), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Form, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.chatTab ? "poll-input" : 'full-poll-input'
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    className: 'question-txt',
+    style: {
+      width: '100%'
+    },
+    id: "pollQuestion",
+    label: "Question",
+    value: pollQuestion,
+    onChange: e => formValueChangeHandler(e),
+    error: Boolean(errors.pollQuestion),
+    helperText: errors.pollQuestion ? 'A poll question is required. Please enter a value' : '',
+    required: true,
+    fullWidth: true
+  })), options.map((option, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: 'row no-margin'
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: props.chatTab ? options[index].id === 'option-1' || options[index].id === 'option-2' ? "poll-input" : "optional-poll-input" : 'full-poll-input'
+    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      className: options[index].id === 'option-1' || options[index].id === 'option-2' ? 'question-txt' : 'optional-choice',
+      style: {
+        width: '100%'
+      },
+      id: option.id,
+      label: option.label,
+      value: option.value,
+      onChange: e => handleFormChange(index, e),
+      error: Boolean(errors.pollQuestion),
+      helperText: errors.pollOptions ? 'At least two options required.' : '',
+      required: true,
+      fullWidth: true
+    })), options[index].id === 'option-1' || options[index].id === 'option-2' ? null : /*#__PURE__*/_react.default.createElement("div", {
+      className: props.chatTab ? 'dynamic-delete-button' : null,
+      style: {
+        paddingLeft: '8px',
+        width: '32px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+      onClick: () => removeOption(index)
+    }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))));
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => addOption(),
+    style: {
+      marginTop: '8px'
+    },
+    variant: "outlined",
+    color: 'primary',
+    disabled: options.length === 6,
+    startIcon: /*#__PURE__*/_react.default.createElement(_icons.Add, null)
+  }, "Add Option"), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row no-margin'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    style: {
+      width: '150px',
+      marginRight: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+    id: "poll-length-day"
+  }, "Poll Days"), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    labelId: "poll-length-day",
+    id: "poll-length-day",
+    value: pollLengthDays,
+    onChange: e => {
+      setPollLengthDays(e.target.value);
+    }
+  }, pollLengthDaysOptions?.map(option => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    key: option.id,
+    value: option.id
+  }, option.label))))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    style: {
+      width: '150px',
+      marginRight: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+    id: "poll-length-day"
+  }, "Poll Hours"), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    labelId: "poll-length-hours",
+    id: "poll-length-hours",
+    value: pollLengthHours,
+    onChange: e => {
+      setPollLengthHours(e.target.value);
+    }
+  }, pollLengthHoursOptions?.map(option => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    key: option.id,
+    value: option.id
+  }, option.label)))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex mb-1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'right',
+      margin: '16px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: e => sendPoll(),
+    variant: 'contained',
+    size: "large",
+    color: 'primary'
+  }, "SEND")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    style: {
+      marginRight: '4px'
+    },
+    variant: 'text',
+    size: "large",
+    onClick: e => props.cancelPollHandler()
+  }, "CANCEL"))))));
+};
+var _default = exports.default = ChatPoll;

package/dist/components/media/chat/ChatRoom.js

@@ -30,6 +30,8 @@ var _excel = _interopRequireDefault(require("../../../assets/img/excel.png"));
 var _VCEventManager = _interopRequireDefault(require("../VCEventManager"));
 var _SocketManager = _interopRequireDefault(require("../../SocketManager"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
+var _ChatPoll = _interopRequireDefault(require("./ChatPoll"));
+var _PollContainer = _interopRequireDefault(require("./PollContainer"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -70,13 +72,31 @@ const ChatRoom = props => {
     };
   };
   const fetchChat = () => {
-    alert("MEETING ID : ", selectedChat.meetingId);
     (0, _RestUtils.sendRequest)(`${location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/chat/fetchMeetingChat/${selectedChat.meetingId}`, response => {
       if (response && response.id) {
         setSelectedChat(response);
       }
     }, e => {}, true, false);
   };
+  const closePollHandler = (e, poll) => {
+    (0, _RestUtils.postData)(`${location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/poll/close`, response => {
+      sendMessage(e, `Poll: ${poll.question} has been closed.`);
+      fetchChat();
+    }, e => {}, true, {
+      id: poll.id
+    });
+  };
+  const submitPollVoteHandler = poll => {
+    let chatParticipant = selectedChat.participants.find(p => p.username === currentUser.username);
+    const data = {
+      pollId: poll.id,
+      optionId: poll.selectedOption,
+      chatParticipant: chatParticipant
+    };
+    (0, _RestUtils.postData)(`${location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/poll/vote`, response => {
+      fetchChat();
+    }, e => {}, true, data);
+  };
   const onSystemEvent = payload => {
     console.log(messages);
     if (payload.systemEventType === "NEW_POLL_VOTE") {
@@ -609,6 +629,18 @@ const ChatRoom = props => {
             width: '100%'
           }
         }));
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_PollContainer.default, {
+          poll: message.poll,
+          chatTab: props.chatTab,
+          pollCreator: message.participant,
+          createdDate: message.createdDate,
+          submitPollVoteHandler: poll => submitPollVoteHandler(poll),
+          pollParticipantIDs: selectedChat.participants.map(p => p.userId),
+          currentUser: currentUser,
+          closePollHandler: (e, poll) => closePollHandler(e, poll),
+          numberOfPollParticipants: selectedChat.participants.length
+        });
       }
     }
   };
@@ -627,7 +659,28 @@ const ChatRoom = props => {
       }
     }, selectedChat.type === 'CALENDAR_MEETING' || selectedChat.participants.length > 2 ? /*#__PURE__*/_react.default.createElement(_reactFeather.Calendar, null) : _Utils.default.getInitials(selectedChat.participants.find(p => p.username !== currentUser.username).name))), /*#__PURE__*/_react.default.createElement("h5", null, getChatRoomTitle())), /*#__PURE__*/_react.default.createElement("div", {
       className: "chatroom__headerright"
-    }, !props.chatTab && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), mode === 'CHAT' ? /*#__PURE__*/_react.default.createElement("div", {
+    }, !props.chatTab && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: "Poll"
+    }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+      onClick: e => {
+        setMode('POLL');
+      }
+    }, /*#__PURE__*/_react.default.createElement(_icons.Poll, {
+      style: {
+        color: props.chatTab ? 'white' : null,
+        marginTop: props.chatTab ? '8px' : null
+      }
+    })))))), mode === 'POLL' ? /*#__PURE__*/_react.default.createElement(_ChatPoll.default, {
+      chatTab: props.chatTab,
+      participants: selectedChat.participants,
+      createPollHandler: pollData => {
+        sendMessage(null, null, pollData);
+        setMode('CHAT');
+      },
+      cancelPollHandler: () => {
+        setMode('CHAT');
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), mode === 'CHAT' ? /*#__PURE__*/_react.default.createElement("div", {
       id: "messages",
       ref: messagesEndRef,
       className: "chatroom__body"

package/dist/components/media/chat/ChatRooms.scss

@@ -382,6 +382,7 @@
 
 .poll-content {
   margin-top: 16px;
+  margin-left: 26px;
   margin-bottom: 28px;
   padding: 20px 15px 20px 15px;
   letter-spacing: .01em;

package/dist/components/media/chat/NewPoll.css

@@ -0,0 +1,82 @@
+.chat-container {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 8px;
+  background-color: #FFFFFF;
+  margin-top: 2px;
+}
+
+.poll-input {
+  width: 100%;
+}
+
+.full-poll-input {
+  width: 60%;
+}
+
+.optional-poll-input {
+  width: calc(100% - 58px);
+}
+.full-poll-input div,
+.optional-poll-input div,
+.poll-input div {
+  width: 100%;
+}
+
+.new-poll-container {
+    max-width: 520px;
+    margin: 0 auto;
+    margin-top: 40px;
+}
+
+.create-poll-form-button {
+    width: 100%;
+}
+
+.create-poll-form-button[disabled], .create-poll-form-button[disabled]:hover, .create-poll-form-button[disabled]:focus {
+    opacity: 0.6;
+    color: #fff;
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+
+.dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all .3s;
+}
+
+.optional-choice {
+    width: calc(80% - 252px);
+}
+
+.question-txt {
+    width: calc(80% - 188px);
+}
+
+.dynamic-delete-button:hover {
+    color: #777;
+}
+
+.dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.poll-form-row {
+    margin-bottom: 20px;
+}
+
+.poll-form-row input, .poll-form-row textarea {
+    margin-bottom: 4px;
+}
+
+@media screen and (max-width: 991px) {
+}

package/dist/components/media/chat/PollContainer.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./ChatRooms.scss");
+var _core = require("@material-ui/core");
+var _Utils = _interopRequireDefault(require("../../../Utils"));
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _VCEventManager = _interopRequireDefault(require("../VCEventManager"));
+var _SocketManager = _interopRequireDefault(require("../../SocketManager"));
+var _VCEventType = require("../VCEventType");
+var _PollResult = _interopRequireDefault(require("./PollResult"));
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PollContainer = props => {
+  const [pollOptions, setPollOptions] = (0, _react.useState)([]);
+  const [poll, setPoll] = (0, _react.useState)({});
+  const [pollClosed, setPollClosed] = (0, _react.useState)(false);
+  const [currentVote, setCurrentVote] = (0, _react.useState)(null);
+  const [totalVotes, setTotalVotes] = (0, _react.useState)(0);
+  const [socketEventHandler] = (0, _react.useState)({});
+  const socketEventHandlerApi = () => {
+    return {
+      get id() {
+        return `poll-container-${props.poll.id}`;
+      },
+      on: (eventType, be) => {
+        switch (eventType) {
+          case _VCEventType.VCEventType.SYSTEM_EVENT:
+            onSystemEvent(be.payload);
+            break;
+        }
+      }
+    };
+  };
+  const onSystemEvent = payload => {
+    if (payload.systemEventType === "NEW_POLL_VOTE" && payload.data.pollId === poll.id) {
+      setTotalVotes(totalVotes + 1);
+    }
+  };
+  const pollRemainingTime = expirationDateTime => {
+    const expirationTime = new Date(expirationDateTime).getTime();
+    const currentTime = new Date().getTime();
+    const difference_ms = expirationTime - currentTime;
+    const seconds = Math.floor(difference_ms / 1000 % 60);
+    const minutes = Math.floor(difference_ms / 1000 / 60 % 60);
+    const hours = Math.floor(difference_ms / (1000 * 60 * 60) % 24);
+    const days = Math.floor(difference_ms / (1000 * 60 * 60 * 24));
+    let timeRemaining;
+    if (days > 0) {
+      timeRemaining = days + " days left";
+    } else if (hours > 0) {
+      timeRemaining = hours + " hours left";
+    } else if (minutes > 0) {
+      timeRemaining = minutes + " minutes left";
+    } else if (seconds > 0) {
+      timeRemaining = seconds + " seconds left";
+    } else {
+      timeRemaining = "less than a second left";
+    }
+    return timeRemaining;
+  };
+  const calculatePercentage = (renderedPoll, option) => {
+    if (renderedPoll.totalVotes === 0) {
+      return 0;
+    }
+    return option.voteCount * 100 / renderedPoll.totalVotes;
+  };
+  const winningOptions = options => {
+    return options.reduce((prevOption, currentOption) => currentOption.voteCount > prevOption.voteCount ? currentOption : prevOption, {
+      voteCount: -Infinity
+    });
+  };
+  (0, _react.useEffect)(() => {
+    _VCEventManager.default.addSubscriptions(socketEventHandler, _VCEventType.VCEventType.CHAT_MESSAGE, _VCEventType.VCEventType.SYSTEM_EVENT);
+    return () => {
+      _VCEventManager.default.removeSubscriptions(socketEventHandler);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    socketEventHandler.api = socketEventHandlerApi();
+  });
+  (0, _react.useEffect)(() => {
+    console.log('___ POLL: ', props.poll);
+    if (props.poll) {
+      const renderedPoll = props.poll;
+      setPoll(renderedPoll);
+      setTotalVotes(renderedPoll.totalVotes ? renderedPoll.totalVotes : 0);
+      const pollOptionRows = [];
+      const closed = renderedPoll.isExpired || !renderedPoll.open;
+      setPollClosed(closed);
+      if (closed) {
+        const winningOpt = winningOptions(renderedPoll.options);
+        renderedPoll.options.forEach(option => {
+          pollOptionRows.push( /*#__PURE__*/_react.default.createElement(_PollResult.default, {
+            key: option.id,
+            option: option,
+            isWinner: winningOpt && option.id === winningOpt.id,
+            isSelected: renderedPoll.selectedOption === option.id,
+            percentVote: calculatePercentage(renderedPoll, option)
+          }));
+        });
+      } else {
+        renderedPoll.options.forEach(option => {
+          pollOptionRows.push( /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
+            key: option.id,
+            className: "poll-choice-radio",
+            value: option.id,
+            control: /*#__PURE__*/_react.default.createElement(_Radio.default, null),
+            label: option.text
+          }));
+        });
+      }
+      setPollOptions(pollOptionRows);
+    }
+  }, [props.poll]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-creator-info"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Avatar, {
+    className: "poll-creator-avatar",
+    style: {
+      backgroundColor: _Utils.default.getAvatarColor(props.pollCreator.name)
+    }
+  }, _Utils.default.getInitials(props.pollCreator.name)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "poll-creator-name"
+  }, props.pollCreator.name), /*#__PURE__*/_react.default.createElement("span", {
+    className: "poll-creation-date"
+  }, _Utils.default.formatDateTime(props.createdDate)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-question"
+  }, poll.question), /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-creation-date"
+  }, "Results are visible after the poll has closed / expired.")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-choices"
+  }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+    className: "poll-choice-radio-group",
+    value: currentVote ? currentVote : poll.selectedOption ? poll.selectedOption : '',
+    onChange: e => {
+      setCurrentVote(e.target.value);
+    }
+  }, pollOptions))), !pollClosed ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-footer"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "vote-button",
+    variant: 'outlined',
+    onClick: () => {
+      const hasVoted = poll.selectedOption;
+      poll.selectedOption = currentVote ? currentVote : '';
+      props.submitPollVoteHandler(poll);
+      if (!hasVoted) {
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.SYSTEM_EVENT, {
+          systemEventType: "NEW_POLL_VOTE",
+          recipients: props.pollParticipantIDs,
+          data: {
+            pollId: poll.id
+          }
+        }).catch(error => {});
+      }
+    }
+  }, "Submit Vote"), props.currentUser.userId === props.pollCreator.userId && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "vote-button",
+    variant: 'outlined',
+    onClick: e => {
+      props.closePollHandler(e, poll);
+    },
+    style: {
+      marginLeft: '8px'
+    }
+  }, "Close Poll"), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '8px',
+      color: '#000000'
+    },
+    className: "time-left"
+  }, `${totalVotes} votes out of ${props.numberOfPollParticipants}`), /*#__PURE__*/_react.default.createElement("span", {
+    className: "separator"
+  }, "\u2022"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "time-left",
+    style: {
+      marginLeft: '4px',
+      color: '#000000'
+    }
+  }, pollRemainingTime(poll.expirationDateTime)), poll.selectedOption && /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-creation-date"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#945c33'
+    }
+  }, "You have voted ", props.poll.options.find(o => o.id === poll.selectedOption)?.text))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "poll-footer"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '4px'
+    },
+    className: "time-left"
+  }, `${totalVotes} voted out of ${props.numberOfPollParticipants}`), /*#__PURE__*/_react.default.createElement("span", {
+    className: "separator"
+  }, "\u2022"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "time-left",
+    style: {
+      marginLeft: '4px'
+    }
+  }, "Closed / Expired")));
+};
+var _default = exports.default = PollContainer;

package/dist/components/media/chat/PollResult.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./ChatRooms.scss");
+var _icons = require("@material-ui/icons");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PollResult = props => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cv-poll-choice"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "cv-poll-choice-details"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "cv-choice-percentage"
+  }, !props.percentVote ? '0' : Math.round(props.percentVote * 100) / 100, "%"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "cv-choice-text"
+  }, props.option.text), props.isSelected ? /*#__PURE__*/_react.default.createElement(_icons.CheckCircle, {
+    className: "selected-choice-icon"
+  }) : null), /*#__PURE__*/_react.default.createElement("span", {
+    className: props.isWinner ? 'cv-choice-percent-chart winner' : 'cv-choice-percent-chart',
+    style: {
+      width: !props.percentVote ? '0%' : props.percentVote + '%'
+    }
+  }));
+};
+var _default = exports.default = PollResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "files": [
     "dist"
   ],