beem-component 2.0.17 → 2.0.19

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

@@ -12,6 +12,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactAvatar = _interopRequireDefault(require("react-avatar"));
 var _List = _interopRequireDefault(require("@mui/icons-material/List"));
 var _ShoppingCartOutlined = _interopRequireDefault(require("@mui/icons-material/ShoppingCartOutlined"));
+var _lodash = require("lodash");
+var _reactPdf = require("react-pdf");
 var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
 var _iconStyles = require("../../iconStyles");
 var _sessionDetails = require("./sessionDetails");
@@ -25,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
 var BmChat = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmChat"
 })(["display:flex;flex-direction:column;height:100%;", ""], '' /* border: 0.071rem solid ${BmGrey400}; */);
@@ -53,13 +56,14 @@ var Messages = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:", ";align-items:", ";padding:1rem 0.5rem;background:", ";color:", ";border-radius:", ";border-left:", ";border:", ";word-break:break-word;margin:0rem;"], function (_ref2) {
   var type = _ref2.type,
     isInteractive = _ref2.isInteractive;
-  if (type === 'interactive' || isInteractive) {
+  if (type === 'interactive' || type === 'order' || isInteractive) {
     return 'column';
   }
   return 'row';
 }, function (_ref3) {
-  var type = _ref3.type;
-  if (type === 'interactive') {
+  var type = _ref3.type,
+    isInteractive = _ref3.isInteractive;
+  if (type === 'interactive' || type === 'order' || isInteractive) {
     return ' start';
   }
   return 'center';
@@ -128,19 +132,46 @@ var IntButton = _styledComponents.default.button.withConfig({
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
+var OrderBody = _styledComponents.default.button.withConfig({
+  displayName: "chatBody__OrderBody"
+})(["padding:1rem;margin:0.1rem;display:flex;flex-direction:column;align-items:start;justify-content:center;width:100%;background-color:rgba(217,217,217,0.3);border:none;color:", ";border-radius:0.3rem;> *{color:", ";}"], function (_ref10) {
+  var state = _ref10.state;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref11) {
+  var state = _ref11.state;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
+var CartContent = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__CartContent"
+})(["margin-bottom:0.5rem;display:flex;flex-direction:row;align-items:center;justify-content:center;color:", ";"], function (_ref12) {
+  var state = _ref12.state;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
 var 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;"], function (_ref10) {
-  var state = _ref10.state;
+})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], function (_ref13) {
+  var state = _ref13.state;
   if (state) {
     if (state === 'inbound') return '0px';
     if (state === 'outbound') return 'auto';
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-var handleState = function handleState(_ref11) {
-  var session = _ref11.session,
-    agentName = _ref11.agentName;
+var handleState = function handleState(_ref14) {
+  var session = _ref14.session,
+    agentName = _ref14.agentName;
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
@@ -171,23 +202,23 @@ var handleState = function handleState(_ref11) {
 // Start of File Attachment
 var 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:", ";}", " ", ""], function (_ref12) {
-  var state = _ref12.state;
+})(["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:", ";}", " ", ""], function (_ref15) {
+  var state = _ref15.state;
   if (state) {
     if (state === 'inbound') return "#F9FAFB";
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref13) {
-  var state = _ref13.state;
+}, function (_ref16) {
+  var state = _ref16.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref14) {
-  var state = _ref14.state,
-    src = _ref14.src;
+}, function (_ref17) {
+  var state = _ref17.state,
+    src = _ref17.src;
   if (state) {
     if (state === 'inbound') {
       if (src) {
@@ -203,14 +234,14 @@ var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
     }
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref15) {
-  var state = _ref15.state;
+}, function (_ref18) {
+  var state = _ref18.state;
   if (state) {
     if (state === 'inbound') return "0.071rem solid ".concat(_colors.BmGrey200, ";");
   }
   return '';
-}, function (_ref16) {
-  var state = _ref16.state;
+}, function (_ref19) {
+  var state = _ref19.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -218,14 +249,14 @@ var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 }, '' /* max-width: 100%; */, '' /* max-height: 100%; */);
 
-var BmFileAttachment = function BmFileAttachment(_ref17) {
-  var state = _ref17.state,
-    file = _ref17.file,
-    src = _ref17.src,
-    fileName = _ref17.fileName,
-    onDownload = _ref17.onDownload,
-    link = _ref17.link,
-    rest = _objectWithoutProperties(_ref17, _excluded);
+var BmFileAttachment = function BmFileAttachment(_ref20) {
+  var state = _ref20.state,
+    file = _ref20.file,
+    src = _ref20.src,
+    fileName = _ref20.fileName,
+    onDownload = _ref20.onDownload,
+    link = _ref20.link,
+    rest = _objectWithoutProperties(_ref20, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state,
     src: src
@@ -244,8 +275,8 @@ var BmFileAttachment = function BmFileAttachment(_ref17) {
 // Start of Component for Images
 var BmImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmImageWrapper"
-})(["display:flex;flex-direction:column;color:", ";"], function (_ref18) {
-  var state = _ref18.state;
+})(["display:flex;flex-direction:column;color:", ";"], function (_ref21) {
+  var state = _ref21.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -255,8 +286,8 @@ var BmImageWrapper = _styledComponents.default.div.withConfig({
 exports.BmImageWrapper = BmImageWrapper;
 var BmImage = _styledComponents.default.img.withConfig({
   displayName: "chatBody__BmImage"
-})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, function (_ref19) {
-  var state = _ref19.state;
+})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, function (_ref22) {
+  var state = _ref22.state;
   if (state) {
     if (state === 'inbound') return '.5714rem .5714rem 0rem 0rem';
     if (state === 'outbound') return '.5714rem .5714rem 0rem 0rem';
@@ -264,11 +295,11 @@ var BmImage = _styledComponents.default.img.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 });
 exports.BmImage = BmImage;
-var BmImageChat = function BmImageChat(_ref20) {
-  var state = _ref20.state,
-    src = _ref20.src,
-    fileName = _ref20.fileName,
-    rest = _objectWithoutProperties(_ref20, _excluded2);
+var BmImageChat = function BmImageChat(_ref23) {
+  var state = _ref23.state,
+    src = _ref23.src,
+    fileName = _ref23.fileName,
+    rest = _objectWithoutProperties(_ref23, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
@@ -291,15 +322,15 @@ var MessageState = _styledComponents.default.div.withConfig({
 exports.MessageState = MessageState;
 var 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, function (_ref21) {
-  var state = _ref21.state;
+})(["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, function (_ref24) {
+  var state = _ref24.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref22) {
-  var state = _ref22.state;
+}, function (_ref25) {
+  var state = _ref25.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -307,24 +338,98 @@ var RepliedTextWrapper = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 });
 exports.RepliedTextWrapper = RepliedTextWrapper;
-BmChat.Details = function (_ref23) {
-  var _metadata$content, _metadata$content2, _metadata$content3, _metadata$content4, _metadata$content5, _metadata$options, _metadata$globalButto, _children$content, _children$content2, _children$content3, _children$content4, _children$content5, _children$options, _children$header, _children$body, _children$globalButto;
-  var children = _ref23.children,
-    state = _ref23.state,
-    displayTime = _ref23.displayTime,
-    status = _ref23.status,
-    session = _ref23.session,
-    src = _ref23.src,
-    file = _ref23.file,
-    fileName = _ref23.fileName,
-    sessionDetails = _ref23.sessionDetails,
-    sessionTimeline = _ref23.sessionTimeline,
-    feedPostComments = _ref23.feedPostComments,
-    agentName = _ref23.agentName,
-    metadata = _ref23.metadata,
-    isInteractive = _ref23.isInteractive,
-    type = _ref23.type,
-    rest = _objectWithoutProperties(_ref23, _excluded3);
+var QuickReplyRender = function QuickReplyRender(_ref26) {
+  var content = _ref26.content,
+    options = _ref26.options,
+    type = _ref26.type,
+    state = _ref26.state,
+    rest = _ref26.rest,
+    isInteractive = _ref26.isInteractive;
+  return /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive,
+    isImg: true
+  }, (content === null || content === void 0 ? void 0 : content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+    state: state,
+    src: content === null || content === void 0 ? void 0 : content.url
+  }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, content === null || content === void 0 ? void 0 : content.header), /*#__PURE__*/_react.default.createElement("p", null, content === null || content === void 0 ? void 0 : content.text), /*#__PURE__*/_react.default.createElement("small", null, content === null || content === void 0 ? void 0 : content.caption), options === null || options === void 0 ? void 0 : options.map(function (button) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-key
+      _react.default.createElement(IntButton, {
+        state: state
+      }, button === null || button === void 0 ? void 0 : button.title)
+    );
+  }));
+};
+var ProductDetailRender = function ProductDetailRender(_ref27) {
+  var type = _ref27.type,
+    state = _ref27.state,
+    header = _ref27.header,
+    body = _ref27.body,
+    isInteractive = _ref27.isInteractive;
+  console.log(type, state, header, body);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive
+  }, /*#__PURE__*/_react.default.createElement("strong", null, header === null || header === void 0 ? void 0 : header.text), /*#__PURE__*/_react.default.createElement("p", null, body === null || body === void 0 ? void 0 : body.text), /*#__PURE__*/_react.default.createElement(IntButton, {
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, null), "Catalog")));
+};
+var ListReplyRender = function ListReplyRender(_ref28) {
+  var _globalButtons$;
+  var title = _ref28.title,
+    body = _ref28.body,
+    globalButtons = _ref28.globalButtons,
+    isInteractive = _ref28.isInteractive,
+    type = _ref28.type,
+    state = _ref28.state;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive
+  }, /*#__PURE__*/_react.default.createElement("strong", null, title), /*#__PURE__*/_react.default.createElement("p", null, body), /*#__PURE__*/_react.default.createElement(IntButton, {
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(_List.default, null), (_globalButtons$ = globalButtons[0]) === null || _globalButtons$ === void 0 ? void 0 : _globalButtons$.title)));
+};
+var OrderRender = function OrderRender(_ref29) {
+  var count = _ref29.count,
+    amount = _ref29.amount,
+    type = _ref29.type,
+    state = _ref29.state;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(OrderBody, {
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(CartContent, {
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
+    fontSize: "small"
+  }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, count, " items"))), /*#__PURE__*/_react.default.createElement("div", null, amount, " (estimated total)")), /*#__PURE__*/_react.default.createElement(IntButton, {
+    state: state
+  }, "view sent cart")));
+};
+BmChat.Details = function (_ref30) {
+  var children = _ref30.children,
+    state = _ref30.state,
+    displayTime = _ref30.displayTime,
+    status = _ref30.status,
+    session = _ref30.session,
+    src = _ref30.src,
+    file = _ref30.file,
+    fileName = _ref30.fileName,
+    sessionDetails = _ref30.sessionDetails,
+    sessionTimeline = _ref30.sessionTimeline,
+    feedPostComments = _ref30.feedPostComments,
+    agentName = _ref30.agentName,
+    metadata = _ref30.metadata,
+    isInteractive = _ref30.isInteractive,
+    type = _ref30.type,
+    rest = _objectWithoutProperties(_ref30, _excluded3);
+  console.log(src);
   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({
@@ -333,63 +438,57 @@ BmChat.Details = function (_ref23) {
     agentName: agentName
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, {
     feedPostComments: feedPostComments
-  }, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+  }, src && !(0, _lodash.isUndefined)(src) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: src,
     fileName: fileName
   }, rest)), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, metadata ? /*#__PURE__*/_react.default.createElement(RepliedTextWrapper, {
     state: state
-  }, metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
-    isInteractive: isInteractive,
+  }, metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
+    isInteractive: true,
+    rest: rest
+  }, metadata, {
     type: type,
-    state: state,
-    isImg: true
-  }, (metadata === null || metadata === void 0 ? void 0 : (_metadata$content = metadata.content) === null || _metadata$content === void 0 ? void 0 : _metadata$content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
-    state: state,
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$content2 = metadata.content) === null || _metadata$content2 === void 0 ? void 0 : _metadata$content2.url
-  }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$content3 = metadata.content) === null || _metadata$content3 === void 0 ? void 0 : _metadata$content3.header), /*#__PURE__*/_react.default.createElement("p", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$content4 = metadata.content) === null || _metadata$content4 === void 0 ? void 0 : _metadata$content4.text), /*#__PURE__*/_react.default.createElement("small", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$content5 = metadata.content) === null || _metadata$content5 === void 0 ? void 0 : _metadata$content5.caption), metadata === null || metadata === void 0 ? void 0 : (_metadata$options = metadata.options) === null || _metadata$options === void 0 ? void 0 : _metadata$options.map(function (button) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-key
-      _react.default.createElement(IntButton, {
-        state: state
-      }, button === null || button === void 0 ? void 0 : button.title)
-    );
-  })) : metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
-    isInteractive: isInteractive,
+    state: state
+  })) : metadata.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({
+    isInteractive: true
+  }, metadata, {
+    type: type,
+    state: state
+  })) : metadata.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({
+    isInteractive: true
+  }, metadata, {
     type: type,
     state: state
-  }, /*#__PURE__*/_react.default.createElement("strong", null, metadata === null || metadata === void 0 ? void 0 : metadata.title), /*#__PURE__*/_react.default.createElement("p", null, metadata === null || metadata === void 0 ? void 0 : metadata.body), /*#__PURE__*/_react.default.createElement(IntButton, {
+  })) : metadata.type === 'order' ? /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, metadata, {
+    type: type,
     state: state
-  }, /*#__PURE__*/_react.default.createElement(_List.default, null), metadata === null || metadata === void 0 ? void 0 : (_metadata$globalButto = metadata.globalButtons[0]) === null || _metadata$globalButto === void 0 ? void 0 : _metadata$globalButto.title)) : /*#__PURE__*/_react.default.createElement(Messages, {
+  })) : /*#__PURE__*/_react.default.createElement(Messages, {
     metadata: metadata,
     state: state
-  }, metadata), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && type === 'interactive' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
-    type: type,
-    state: state,
-    isImg: true
-  }, (children === null || children === void 0 ? void 0 : (_children$content = children.content) === null || _children$content === void 0 ? void 0 : _children$content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
-    state: state,
-    src: children === null || children === void 0 ? void 0 : (_children$content2 = children.content) === null || _children$content2 === void 0 ? void 0 : _children$content2.url
-  }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, children === null || children === void 0 ? void 0 : (_children$content3 = children.content) === null || _children$content3 === void 0 ? void 0 : _children$content3.header), /*#__PURE__*/_react.default.createElement("p", null, children === null || children === void 0 ? void 0 : (_children$content4 = children.content) === null || _children$content4 === void 0 ? void 0 : _children$content4.text), /*#__PURE__*/_react.default.createElement("small", null, children === null || children === void 0 ? void 0 : (_children$content5 = children.content) === null || _children$content5 === void 0 ? void 0 : _children$content5.caption), children === null || children === void 0 ? void 0 : (_children$options = children.options) === null || _children$options === void 0 ? void 0 : _children$options.map(function (button) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-key
-      _react.default.createElement(IntButton, {
-        state: state
-      }, button === null || button === void 0 ? void 0 : button.title)
-    );
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
+  }), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && (type === 'interactive' || type === 'order') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.type === 'quick_reply' && /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
+    rest: rest
+  }, children, {
     type: type,
     state: state
-  }, /*#__PURE__*/_react.default.createElement("strong", null, children === null || children === void 0 ? void 0 : (_children$header = children.header) === null || _children$header === void 0 ? void 0 : _children$header.text), /*#__PURE__*/_react.default.createElement("p", null, children === null || children === void 0 ? void 0 : (_children$body = children.body) === null || _children$body === void 0 ? void 0 : _children$body.text), /*#__PURE__*/_react.default.createElement(IntButton, {
+  })), children.type === 'list' && /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({}, children, {
+    type: type,
     state: state
-  }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, null), "Catalog"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
+  })), children.type === 'product_details' && /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({}, children, {
     type: type,
     state: state
-  }, /*#__PURE__*/_react.default.createElement("strong", null, children === null || children === void 0 ? void 0 : children.title), /*#__PURE__*/_react.default.createElement("p", null, children === null || children === void 0 ? void 0 : children.body), /*#__PURE__*/_react.default.createElement(IntButton, {
+  })), children.type === 'order' && /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, children, {
+    type: type,
     state: state
-  }, /*#__PURE__*/_react.default.createElement(_List.default, null), children === null || children === void 0 ? void 0 : (_children$globalButto = children.globalButtons[0]) === null || _children$globalButto === void 0 ? void 0 : _children$globalButto.title))))) : /*#__PURE__*/_react.default.createElement(Messages, {
+  }))) : type === 'pdf' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: {
+      url: "".concat(file)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: 1,
+    height: "250",
+    width: "200"
+  }))) : /*#__PURE__*/_react.default.createElement(Messages, {
     state: state
   }, children))), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
     file: file,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {
@@ -48,6 +48,7 @@
     "@material-ui/icons": "^4.11.2",
     "@mui/icons-material": "^5.2.1",
     "@mui/material": "^5.2.3",
+    "bootstrap": "^5.3.3",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",
     "node-sass": "^6.0.1",