beem-component 2.1.26 → 2.1.27

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -7,6 +7,9 @@ exports.default = exports.RepliedTextWrapper = exports.MessageState = exports.Bm
 var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@material-ui/icons");
 var _FilePresent = _interopRequireDefault(require("@mui/icons-material/FilePresent"));
+var _PhoneCallbackOutlined = _interopRequireDefault(require("@mui/icons-material/PhoneCallbackOutlined"));
+var _PhoneOutlined = _interopRequireDefault(require("@mui/icons-material/PhoneOutlined"));
+var _PhoneMissed = _interopRequireDefault(require("@mui/icons-material/PhoneMissed"));
 var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactAvatar = _interopRequireDefault(require("react-avatar"));
@@ -20,10 +23,9 @@ var _sessionDetails = require("./sessionDetails");
 var _sessionTimeline = require("./sessionTimeline");
 var _colors = require("../../colors");
 var _FeedPostComments = require("./FeedPostComments");
-var _CallLog = require("./CallLog");
 const _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link"],
   _excluded2 = ["state", "src", "extensions", "fileName"],
-  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "callLog", "metadata", "isInteractive", "type", "extension"];
+  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type", "extension"];
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
@@ -33,6 +35,42 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const formatDuration = totalSeconds => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return "".concat(String(hours).padStart(2, '0'), ":") + "".concat(String(minutes).padStart(2, '0'), ":") + "".concat(String(seconds).padStart(2, '0'));
+  }
+  return "".concat(String(minutes).padStart(2, '0'), ":") + "".concat(String(seconds).padStart(2, '0'));
+};
+const formatCallDuration = totalSeconds => {
+  // eslint-disable-next-line no-param-reassign
+  if (!totalSeconds || totalSeconds < 0) totalSeconds = 0;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  let result = '';
+  if (hours > 0) result += "".concat(hours, " hr ");
+  result += "".concat(minutes, " min ").concat(seconds, " sec");
+  return result.trim();
+};
+const useCallDuration = (running, callStartedAt) => {
+  const [seconds, setSeconds] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (!running || !callStartedAt) return;
+    const startTime = new Date(callStartedAt).getTime();
+    const updateSeconds = () => {
+      const now = Date.now();
+      const elapsed = Math.max(Math.floor((now - startTime) / 1000), 0);
+      setSeconds(elapsed);
+    };
+    updateSeconds();
+    const intervalId = setInterval(updateSeconds, 1000);
+    return () => clearInterval(intervalId);
+  }, [running, callStartedAt]);
+  return formatDuration(seconds);
+};
 const BmChat = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmChat"
 })(["display:flex;flex-direction:column;height:100%;", ""], '' /* border: 0.071rem solid ${BmGrey400}; */);
@@ -189,23 +227,73 @@ const CartContent = _styledComponents.default.div.withConfig({
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
+const CallContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__CallContainer"
+})(["display:flex;flex-direction:row;gap:0.6rem;align-items:center;justify-content:center;color:", ";"], _ref11 => {
+  let {
+    state
+  } = _ref11;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
+const CallInfoContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__CallInfoContainer"
+})(["display:flex;padding-right:1.5rem;flex-direction:column;gap:0.3rem;align-items:center;justify-content:center;color:", ";& >:last-child{color:", ";}"], _ref12 => {
+  let {
+    state
+  } = _ref12;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+}, _ref13 => {
+  let {
+    state
+  } = _ref13;
+  return state === 'inbound' ? '#A6A29F' : '#cde3ddff';
+});
+const IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__IconContainer"
+})(["display:flex;align-items:center;justify-content:center;width:max-content;height:max-content;padding:0.8rem;border:", ";border-radius:50%;background-color:", ";"], _ref14 => {
+  let {
+    state
+  } = _ref14;
+  if (state) {
+    if (state === 'inbound') return "1px solid #F3F4F6";
+    if (state === 'outbound') return "1px solid #5CC1C8";
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+}, _ref15 => {
+  let {
+    state
+  } = _ref15;
+  if (state) {
+    if (state === 'inbound') return "#F3F4F6";
+    if (state === 'outbound') return "#5CC1C8";
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
 const MessagesSubDetails = _styledComponents.default.div.withConfig({
   displayName: "chatBody__MessagesSubDetails"
-})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], _ref11 => {
+})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], _ref16 => {
   let {
     state
-  } = _ref11;
+  } = _ref16;
   if (state) {
     if (state === 'inbound') return '0px';
     if (state === 'outbound') return 'auto';
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-const handleState = _ref12 => {
+const handleState = _ref17 => {
   let {
     session,
     agentName
-  } = _ref12;
+  } = _ref17;
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
@@ -239,29 +327,29 @@ const FileNameContainer = _styledComponents.default.div.withConfig({
 // Start of File Attachment
 const FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__FileAttachmentWrapper"
-})(["display:flex;cursor:pointer;flex-direction:row;align-items:center;padding:1rem;background:", ";color:", ";border-radius:", ";border:", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], _ref13 => {
+})(["display:flex;cursor:pointer;flex-direction:row;align-items:center;padding:1rem;background:", ";color:", ";border-radius:", ";border:", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], _ref18 => {
   let {
     state
-  } = _ref13;
+  } = _ref18;
   if (state) {
     if (state === 'inbound') return "#F9FAFB";
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref14 => {
+}, _ref19 => {
   let {
     state
-  } = _ref14;
+  } = _ref19;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref15 => {
+}, _ref20 => {
   let {
     state,
     src
-  } = _ref15;
+  } = _ref20;
   if (state) {
     if (state === 'inbound') {
       if (src) {
@@ -277,25 +365,25 @@ const FileAttachmentWrapper = _styledComponents.default.div.withConfig({
     }
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref16 => {
+}, _ref21 => {
   let {
     state
-  } = _ref16;
+  } = _ref21;
   if (state) {
     if (state === 'inbound') return "0.071rem solid ".concat(_colors.BmGrey200, ";");
   }
   return '';
-}, _ref17 => {
+}, _ref22 => {
   let {
     state
-  } = _ref17;
+  } = _ref22;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, '' /* max-width: 100%; */, '' /* max-height: 100%; */);
-const BmFileAttachment = _ref18 => {
+const BmFileAttachment = _ref23 => {
   let {
       state,
       file,
@@ -304,8 +392,8 @@ const BmFileAttachment = _ref18 => {
       onDownload,
       extension,
       link
-    } = _ref18,
-    rest = _objectWithoutProperties(_ref18, _excluded);
+    } = _ref23,
+    rest = _objectWithoutProperties(_ref23, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state,
     src: src
@@ -324,10 +412,10 @@ const BmFileAttachment = _ref18 => {
 // Start of Component for Images
 const BmImageWrapper = exports.BmImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmImageWrapper"
-})(["display:flex;flex-direction:column;color:", ";"], _ref19 => {
+})(["display:flex;flex-direction:column;color:", ";"], _ref24 => {
   let {
     state
-  } = _ref19;
+  } = _ref24;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -336,24 +424,24 @@ const BmImageWrapper = exports.BmImageWrapper = _styledComponents.default.div.wi
 });
 const BmImage = exports.BmImage = _styledComponents.default.img.withConfig({
   displayName: "chatBody__BmImage"
-})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, _ref20 => {
+})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, _ref25 => {
   let {
     state
-  } = _ref20;
+  } = _ref25;
   if (state) {
     if (state === 'inbound') return '.5714rem .5714rem 0rem 0rem';
     if (state === 'outbound') return '.5714rem .5714rem 0rem 0rem';
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-const BmImageChat = _ref21 => {
+const BmImageChat = _ref26 => {
   let {
       state,
       src,
       extensions,
       fileName
-    } = _ref21,
-    rest = _objectWithoutProperties(_ref21, _excluded2);
+    } = _ref26,
+    rest = _objectWithoutProperties(_ref26, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
@@ -376,26 +464,26 @@ const MessageState = exports.MessageState = _styledComponents.default.div.withCo
 
 const RepliedTextWrapper = exports.RepliedTextWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__RepliedTextWrapper"
-})(["display:flex;flex-direction:column;justify-content:center;padding:1.14286rem 1.14286rem 1.14286rem 0.35714rem;gap:1rem;border-radius:0.25rem 0.25rem 0.25rem 0.25rem;border:1px solid ", ";background:", ";color:", ";"], _colors.BmGrey200, _ref22 => {
+})(["display:flex;flex-direction:column;justify-content:center;padding:1.14286rem 1.14286rem 1.14286rem 0.35714rem;gap:1rem;border-radius:0.25rem 0.25rem 0.25rem 0.25rem;border:1px solid ", ";background:", ";color:", ";"], _colors.BmGrey200, _ref27 => {
   let {
     state
-  } = _ref22;
+  } = _ref27;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref23 => {
+}, _ref28 => {
   let {
     state
-  } = _ref23;
+  } = _ref28;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-const QuickReplyRender = _ref24 => {
+const QuickReplyRender = _ref29 => {
   let {
     content,
     options,
@@ -408,7 +496,7 @@ const QuickReplyRender = _ref24 => {
     action,
     header,
     footer
-  } = _ref24;
+  } = _ref29;
   const MEDIA_TYPES = ['document', 'image', 'video'];
   const renderers = {
     dotgo_v3: () => {
@@ -447,7 +535,7 @@ const QuickReplyRender = _ref24 => {
     isImg: true
   }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
 };
-const ImageRender = _ref25 => {
+const ImageRender = _ref30 => {
   let {
     type,
     state,
@@ -456,7 +544,7 @@ const ImageRender = _ref25 => {
     connector,
     caption,
     originalUrl
-  } = _ref25;
+  } = _ref30;
   const renderers = {
     dotgo_v3: () => {
       var _caption$text;
@@ -482,14 +570,68 @@ const ImageRender = _ref25 => {
     isImg: true
   }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
 };
-const ProductDetailRender = _ref26 => {
+const CallRender = _ref31 => {
+  let {
+    type,
+    state,
+    isInteractive,
+    connector,
+    message,
+    status,
+    call_started_at
+  } = _ref31;
+  const duration = useCallDuration(status === 'in_progress', call_started_at);
+  const renderers = {
+    yeastar: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, status === 'in_progress' && /*#__PURE__*/_react.default.createElement(CallContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(IconContainer, {
+      state: state
+    }, state === 'inbound' ? /*#__PURE__*/_react.default.createElement(_PhoneCallbackOutlined.default, {
+      sx: {
+        color: '#4A5565'
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_PhoneOutlined.default, null)), /*#__PURE__*/_react.default.createElement(CallInfoContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement("strong", null, "Voice Call")), /*#__PURE__*/_react.default.createElement("p", null, duration))), status === 'answered' && /*#__PURE__*/_react.default.createElement(CallContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(IconContainer, {
+      state: state
+    }, state === 'inbound' ? /*#__PURE__*/_react.default.createElement(_PhoneCallbackOutlined.default, {
+      sx: {
+        color: '#4A5565'
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_PhoneOutlined.default, null)), /*#__PURE__*/_react.default.createElement(CallInfoContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement("strong", null, "Voice Call")), /*#__PURE__*/_react.default.createElement("p", null, formatCallDuration(message.talk_duration)))), status === 'no answer' && /*#__PURE__*/_react.default.createElement(CallContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(IconContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(_PhoneMissed.default, {
+      sx: {
+        color: '#e64d4dff'
+      }
+    })), /*#__PURE__*/_react.default.createElement(CallInfoContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement("strong", null, "Voice Call")), /*#__PURE__*/_react.default.createElement("p", null, "No answer"))))
+  };
+  const FallbackRenderer = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, status));
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive,
+    connector: connector,
+    isImg: true
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
+};
+const ProductDetailRender = _ref32 => {
   let {
     type,
     state,
     header,
     body,
     isInteractive
-  } = _ref26;
+  } = _ref32;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
@@ -498,7 +640,7 @@ const ProductDetailRender = _ref26 => {
     state: state
   }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, null), "Catalog")));
 };
-const ListReplyRender = _ref27 => {
+const ListReplyRender = _ref33 => {
   let {
     title,
     body,
@@ -510,7 +652,7 @@ const ListReplyRender = _ref27 => {
     header,
     action,
     footer
-  } = _ref27;
+  } = _ref33;
   const renderers = {
     dotgo_v3: () => {
       var _header$header$type3, _body$text2;
@@ -534,7 +676,7 @@ const ListReplyRender = _ref27 => {
     isInteractive: isInteractive
   }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null)));
 };
-const OrderRender = _ref28 => {
+const OrderRender = _ref34 => {
   let {
     amount,
     type,
@@ -543,14 +685,14 @@ const OrderRender = _ref28 => {
     product_items,
     connector,
     isInteractive
-  } = _ref28;
+  } = _ref34;
   const renderers = {
-    dotgo_v3: _ref29 => {
+    dotgo_v3: _ref35 => {
       let {
         displayItems,
         sumQuantities,
         setDisplayItems
-      } = _ref29;
+      } = _ref35;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
         state: state
       }, /*#__PURE__*/_react.default.createElement(CartContent, {
@@ -580,12 +722,12 @@ const OrderRender = _ref28 => {
       }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS")));
     }
   };
-  const FallbackRenderer = _ref30 => {
+  const FallbackRenderer = _ref36 => {
     let {
       sumQuantities,
       displayItems,
       setDisplayItems
-    } = _ref30;
+    } = _ref36;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
       state: state
     }, /*#__PURE__*/_react.default.createElement(CartContent, {
@@ -632,7 +774,7 @@ const OrderRender = _ref28 => {
     items: items
   })));
 };
-BmChat.Details = _ref31 => {
+BmChat.Details = _ref37 => {
   var _children$message, _children$message2;
   let {
       children,
@@ -647,21 +789,13 @@ BmChat.Details = _ref31 => {
       sessionTimeline,
       feedPostComments,
       agentName,
-      callLog,
       metadata,
       isInteractive,
       type,
       extension
-    } = _ref31,
-    rest = _objectWithoutProperties(_ref31, _excluded3);
-  console.log({
-    type
-  });
-  console.log(children);
-  console.log(metadata);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'call' && /*#__PURE__*/_react.default.createElement(_CallLog.CallPill, {
-    message: children.message
-  }), /*#__PURE__*/_react.default.createElement(Details, _extends({
+    } = _ref37,
+    rest = _objectWithoutProperties(_ref37, _excluded3);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
     state,
@@ -729,6 +863,10 @@ BmChat.Details = _ref31 => {
     type: type,
     state: state,
     connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'call' && /*#__PURE__*/_react.default.createElement(CallRender, _extends({}, children.message, {
+    type: type,
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
   }))) : type === 'pdf' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
     file: {
       url: "".concat(file)
@@ -737,11 +875,7 @@ BmChat.Details = _ref31 => {
     pageNumber: 1,
     height: "250",
     width: "200"
-  }))) :
-  // : type === 'call' ? (
-  //   <CallPill message={children.message} />
-  // )
-  type !== 'call' && /*#__PURE__*/_react.default.createElement(Messages, {
+  }))) : /*#__PURE__*/_react.default.createElement(Messages, {
     state: state
   }, children))), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
     extension: extension,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.1.26",
+  "version": "2.1.27",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {