beem-component 2.0.13 → 2.0.14

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

@@ -19,7 +19,7 @@ var _colors = require("../../colors");
 var _FeedPostComments = require("./FeedPostComments");
 var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
   _excluded2 = ["state", "src", "fileName"],
-  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "type"];
+  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -50,8 +50,9 @@ var MessageDetails = _styledComponents.default.div.withConfig({
 var Messages = _styledComponents.default.div.withConfig({
   displayName: "chatBody__Messages"
 })(["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;
-  if (type === 'interactive') {
+  var type = _ref2.type,
+    isInteractive = _ref2.isInteractive;
+  if (type === 'interactive' || isInteractive) {
     return 'column';
   }
   return 'row';
@@ -306,7 +307,7 @@ var RepliedTextWrapper = _styledComponents.default.div.withConfig({
 });
 exports.RepliedTextWrapper = RepliedTextWrapper;
 BmChat.Details = function (_ref23) {
-  var _children$content, _children$content2, _children$content3, _children$content4, _children$content5, _children$options, _children$globalButto;
+  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$globalButto;
   var children = _ref23.children,
     state = _ref23.state,
     displayTime = _ref23.displayTime,
@@ -320,6 +321,7 @@ BmChat.Details = function (_ref23) {
     feedPostComments = _ref23.feedPostComments,
     agentName = _ref23.agentName,
     metadata = _ref23.metadata,
+    isInteractive = _ref23.isInteractive,
     type = _ref23.type,
     rest = _objectWithoutProperties(_ref23, _excluded3);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
@@ -336,14 +338,36 @@ BmChat.Details = function (_ref23) {
     fileName: fileName
   }, rest)), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, metadata ? /*#__PURE__*/_react.default.createElement(RepliedTextWrapper, {
     state: state
-  }, /*#__PURE__*/_react.default.createElement(Messages, {
+  }, metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
+    isInteractive: isInteractive,
+    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,
+    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, {
+    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, {
     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.caption) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+  }, (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) {

package/package.json

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

package/src/App.js

@@ -39,6 +39,30 @@ const Chat = () => {
       statusCode: 3,
     },
   };
+  const x = {
+    id: 64816,
+    message: 'Give Feedback',
+    time: '2025-02-13T11:19:42.000Z',
+    direction: 'inbound',
+    message_type: 'text',
+    messageId: null,
+    is_live_agent: 1,
+    is_deleted: 0,
+    is_comment: 0,
+    channel: 'whatsapp',
+    sent_to_vendor: 1,
+    replyMessageId: '035a7484-ee02-4829-8cb5-33c4623f1c8a',
+    agent_name: null,
+    df_agent_name: null,
+    resolve_time: null,
+    metadata: {
+      id: '035a7484-ee02-4829-8cb5-33c4623f1c8a',
+      prev_message:
+        '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","url":"https://i.imgur.com/BZylAb1.jpeg","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|22a6d22a-1085-4c03-aa5b-364e68f1519c"},{"type":"text","title":"No Thank you","postbackText":"dev-defined-postback2"}]}}',
+    },
+  };
+
+  const ms = JSON.parse(x.metadata.prev_message);
   // const parsed = JSON.stringify(message.message);
   // const dotGoV2Content = parsed?.dotgoV2;
   const data = {
@@ -101,7 +125,7 @@ const Chat = () => {
     const parsedMessage = JSON.parse(message.message);
     const dotGoV2Content = parsedMessage?.dotgoV2;
     console.log({ parsedMessage });
-    console.log(dotGoV2Content);
+    console.log({ dotGoV2Content });
     return dotGoV2Content;
   };
   console.log(data);
@@ -451,6 +475,18 @@ const Chat = () => {
               goes this wide mhhhhhh interesting
             </p> */}
         </BmChat.Details>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          sessionTimeline={{ message: <p>12:00pm</p> }}
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // type="interactive"
+          metadata={ms.dotgoV2}
+          isInteractive="true"
+        >
+          <p>{x.message}</p>
+        </BmChat.Details>
       </BmChat>
     </>
   );

package/src/lib/components/ChatComponents/ChatBody/chatBody.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
 import React from 'react';
 import { Done, DoneAll } from '@material-ui/icons';
@@ -72,8 +73,8 @@ const MessageDetails = styled.div`
 
 const Messages = styled.div`
   display: flex;
-  flex-direction: ${({ type }) => {
-    if (type === 'interactive') {
+  flex-direction: ${({ type, isInteractive }) => {
+    if (type === 'interactive' || isInteractive) {
       return 'column';
     }
     return 'row';
@@ -376,6 +377,7 @@ BmChat.Details = ({
   feedPostComments,
   agentName,
   metadata,
+  isInteractive,
   type,
   ...rest
 }) => {
@@ -403,9 +405,48 @@ BmChat.Details = ({
             <>
               {metadata ? (
                 <RepliedTextWrapper state={state}>
-                  <Messages metadata={metadata} state={state}>
-                    {metadata}
-                  </Messages>
+                  {metadata.type === 'quick_reply' ? (
+                    <Messages
+                      isInteractive={isInteractive}
+                      type={type}
+                      state={state}
+                      isImg
+                    >
+                      {metadata?.content?.url && (
+                        <BmImageChat
+                          state={state}
+                          src={metadata?.content?.url}
+                          {...rest}
+                        />
+                      )}
+
+                      <strong>{metadata?.content?.header}</strong>
+                      <p>{metadata?.content?.text}</p>
+                      <small>{metadata?.content?.caption}</small>
+                      {metadata?.options?.map((button) => (
+                        // eslint-disable-next-line react/jsx-key
+                        <IntButton state={state}>{button?.title}</IntButton>
+                      ))}
+                    </Messages>
+                  ) : metadata.type === 'quick_reply' ? (
+                    <Messages
+                      isInteractive={isInteractive}
+                      type={type}
+                      state={state}
+                    >
+                      <strong>{metadata?.title}</strong>
+                      <p>{metadata?.body}</p>
+                      <IntButton state={state}>
+                        <ListIcon />
+                        {metadata?.globalButtons[0]?.title}
+                      </IntButton>
+                    </Messages>
+                  ) : (
+                    <Messages metadata={metadata} state={state}>
+                      {metadata}
+                    </Messages>
+                  )}
+
                   {children}
                 </RepliedTextWrapper>
               ) : (
@@ -414,7 +455,7 @@ BmChat.Details = ({
                     <>
                       {children.type === 'quick_reply' ? (
                         <Messages type={type} state={state} isImg>
-                          {children?.content?.caption && (
+                          {children?.content?.url && (
                             <BmImageChat
                               state={state}
                               src={children?.content?.url}