beem-component 1.7.6 → 1.7.9

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

@@ -15,6 +15,8 @@ var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _reactAvatar = _interopRequireDefault(require("react-avatar"));
+
 var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
 
 var _iconStyles = require("../../iconStyles");
@@ -29,7 +31,7 @@ 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"];
+    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -108,7 +110,8 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
 });
 
 var handleState = function handleState(_ref6) {
-  var session = _ref6.session;
+  var session = _ref6.session,
+      agentName = _ref6.agentName;
 
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
@@ -118,6 +121,14 @@ var handleState = function handleState(_ref6) {
   }
 
   if (session === 'live') {
+    if (agentName) {
+      return /*#__PURE__*/_react.default.createElement(_reactAvatar.default, {
+        name: agentName,
+        size: "25px",
+        round: true
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "employee"
@@ -262,18 +273,15 @@ BmChat.Details = function (_ref15) {
       sessionDetails = _ref15.sessionDetails,
       sessionTimeline = _ref15.sessionTimeline,
       feedPostComments = _ref15.feedPostComments,
+      agentName = _ref15.agentName,
       rest = _objectWithoutProperties(_ref15, _excluded3);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
-    message: sessionTimeline.message
-  }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
-    time: sessionDetails.time,
-    message: sessionDetails.message
-  }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
+  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: state,
-    session: session
+    session: session,
+    agentName: agentName
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, {
     feedPostComments: feedPostComments
   }, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -301,8 +309,14 @@ BmChat.Details = function (_ref15) {
     size: "small"
   }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
     state: state,
-    session: session
-  }))));
+    session: session,
+    agentName: agentName
+  }))), sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
+    message: sessionTimeline.message
+  }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
+    time: sessionDetails.time,
+    message: sessionDetails.message
+  }, rest)));
 };
 
 BmChat.Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));

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

@@ -58,6 +58,9 @@ var ChatBody = function ChatBody() {
     session: "sms",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
     status: "sent",
+    sessionTimeline: {
+      message: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    },
     sessionDetails: {
       message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
       time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
@@ -151,7 +154,17 @@ var ChatBody = function ChatBody() {
     onDownload: function onDownload() {
       alert('hello');
     }
-  })), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    agentName: "Agent Name",
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound Text Message"))), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "chat-footer"
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_EmojiEmotions.default, null),

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

@@ -25,7 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var SessionTimelineWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n"])));
+var SessionTimelineWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-bottom: 0.5rem;\n  margin-top: 0.5rem;\n"])));
 
 var container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0.714rem 0.714rem 0.714rem 0.714rem;\n  border: 0.071rem solid ", ";\n  padding: 0.5rem;\n  background-color: ", ";\n"])), _colors.BmBgGreyBlue, _colors.BmSecondaryBlue12);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.7.6",
+    "version": "1.7.9",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -43,7 +43,9 @@
         "polished": "^4.1.3",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
+        "react-avatar": "^5.0.3",
         "react-dom": "^17.0.2",
+        "react-lettered-avatar": "^1.0.2",
         "react-router-dom": "^5.3.0",
         "react-scripts": "^5.0.1",
         "save": "^2.4.0",

package/src/App.js

@@ -1,21 +1,26 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
 import SendIcon from '@mui/icons-material/Send';
 import QuickreplyIcon from '@mui/icons-material/Quickreply';
-import { BmCheckboxToggle } from './lib/components';
 import {
   BmChat,
   BmInput,
   BmIcons,
   GlobalStyle,
   BmProfileIcon,
+  BmContactCard,
+  BmTag,
+  BmCounter,
+  BmAvatar,
+
+  // BmCheckboxToggle,
 } from './lib/components';
 
 const Chat = () => {
-  const [test, setTest] = useState(false);
-  const [test1, setTest1] = useState(false);
+  // const [test, setTest] = useState(false);
+  // const [test1, setTest1] = useState(false);
 
   const image =
     'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
@@ -26,14 +31,15 @@ const Chat = () => {
       <BmChat>
         <BmChat.Body>
           <BmChat.Details
-            state="outbound"
+            state="inbound"
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            // sessionDetails={{
+            //   message: <h3>Session Message</h3>,
+            //   time: <p>12:00pm</p>,
+            // }}
             feedPostComments={{
               header: <p>Comment Reply</p>,
               body: {
@@ -41,15 +47,25 @@ const Chat = () => {
                 image,
               },
               footer: <p>This is a Footer</p>,
-              state: 'outbound',
+              state: 'inbound',
               status: 'comment',
             }}
           />
           <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+          />
+          {/* <BmChat.Details
             state="inbound"
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             sessionDetails={{
               message: <h3>Session Message</h3>,
               time: <p>12:00pm</p>,
@@ -70,6 +86,7 @@ const Chat = () => {
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             sessionDetails={{
               message: <h3>Session Message</h3>,
               time: <p>12:00pm</p>,
@@ -85,11 +102,40 @@ const Chat = () => {
               status: 'story',
             }}
           />
+          <BmChat.Details
+            agentName="Agent Name"
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Outbound Text Message2</p>
+          </BmChat.Details>
+
+          <BmChat.Details
+            agentName="Test Agent"
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Outbound Text Message2</p>
+          </BmChat.Details>
+
           <BmChat.Details
             state="inbound"
             session="sms"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             sessionDetails={{
               message: <h3>Session Message</h3>,
               time: <p>12:00pm</p>,
@@ -110,6 +156,7 @@ const Chat = () => {
             session="live"
             displayTime={<p>12:00pm</p>}
             status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             fileName={<p>chat.png</p>}
             src={image}
             sessionDetails={{
@@ -121,6 +168,7 @@ const Chat = () => {
             state="inbound"
             session="live"
             displayTime={<p>10:00am</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             status="failed"
             fileName={<p>file.csv</p>}
             file={image}
@@ -128,6 +176,7 @@ const Chat = () => {
           <BmChat.Details
             state="outbound"
             session="bot"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             displayTime={<p>12:00pm</p>}
             status="sent"
           >
@@ -136,6 +185,7 @@ const Chat = () => {
           <BmChat.Details
             state="outbound"
             session="live"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             displayTime={<p>12:00pm</p>}
             status="sent"
             fileName={<p>chat.png</p>}
@@ -147,12 +197,13 @@ const Chat = () => {
             displayTime={<p>10:00am</p>}
             status="failed"
             fileName={<p>file.csv</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
             file={image}
             link={image}
             onDownload={() => {
               alert('hello');
             }}
-          />
+          /> */}
         </BmChat.Body>
         <BmChat.Footer>
           <div className="chat-footer">
@@ -165,12 +216,12 @@ const Chat = () => {
         </BmChat.Footer>
       </BmChat>
 
-      <BmCheckboxToggle
+      {/* <BmCheckboxToggle
         key="test"
         checked={test}
         onChange={(check) => {
           console.log(check);
-          setTest(check)
+          setTest(check);
         }}
       />
 
@@ -179,9 +230,33 @@ const Chat = () => {
         checked={test1}
         onChange={(check) => {
           console.log(check);
-          setTest(check)
+          setTest(check);
         }}
-      />
+
+        
+      /> */}
+
+      <BmContactCard>
+        <BmContactCard.Profile>
+          <BmAvatar user="chatbot" size="medium" />
+        </BmContactCard.Profile>
+        <BmContactCard.Details>
+          <BmContactCard.SubDetails>
+            <h3>Contact Names</h3>
+          </BmContactCard.SubDetails>
+          <BmContactCard.SubDetails>
+            <p>
+              Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
+              odfigj ofdigj ofdijg dofigj dfoig jodfigj text
+            </p>
+            <BmCounter>10</BmCounter>
+          </BmContactCard.SubDetails>
+          <BmContactCard.SubDetails>
+            <BmTag variant="success">label</BmTag>
+            <p>10:00 am</p>
+          </BmContactCard.SubDetails>
+        </BmContactCard.Details>
+      </BmContactCard>
     </>
   );
 };

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

@@ -4,10 +4,12 @@ import { Done, DoneAll } from '@material-ui/icons';
 import FilePresentIcon from '@mui/icons-material/FilePresent';
 import DownloadIcon from '@mui/icons-material/Download';
 import styled from 'styled-components';
+import Avatar from 'react-avatar';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
 import { SessionTimeline } from './sessionTimeline';
+
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -113,11 +115,14 @@ const MessagesSubDetails = styled.div`
   margin-top: 0.5rem;
 `;
 
-const handleState = ({ session }) => {
+const handleState = ({ session, agentName }) => {
   if (session === 'bot') {
     return <BmAvatar size="small" user="chatbot" />;
   }
   if (session === 'live') {
+    if (agentName) {
+      return <Avatar name={agentName} size="25px" round />;
+    }
     return <BmAvatar size="small" user="employee" />;
   }
   if (session === 'sms') {
@@ -261,24 +266,17 @@ BmChat.Details = ({
   sessionDetails,
   sessionTimeline,
   feedPostComments,
+  agentName,
   ...rest
 }) => {
   return (
     <>
-      {sessionTimeline && (
-        <SessionTimeline message={sessionTimeline.message} {...rest} />
-      )}
-      {sessionDetails && (
-        <SessionDetails
-          time={sessionDetails.time}
-          message={sessionDetails.message}
-          {...rest}
-        />
-      )}
       <Details state={state} {...rest}>
         {/* Adding for mobile */}
         <MessageState>
-          {state === 'inbound' && session && handleState({ state, session })}
+          {state === 'inbound' &&
+            session &&
+            handleState({ state, session, agentName })}
         </MessageState>
         <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
@@ -327,9 +325,22 @@ BmChat.Details = ({
           </MessagesSubDetails>
         </MessageDetails>
         <MessageState>
-          {state === 'outbound' && session && handleState({ state, session })}
+          {state === 'outbound' &&
+            session &&
+            handleState({ state, session, agentName })}
         </MessageState>
       </Details>
+
+      {sessionTimeline && (
+        <SessionTimeline message={sessionTimeline.message} {...rest} />
+      )}
+      {sessionDetails && (
+        <SessionDetails
+          time={sessionDetails.time}
+          message={sessionDetails.message}
+          {...rest}
+        />
+      )}
     </>
   );
 };

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

@@ -43,6 +43,7 @@ export const ChatBody = () => {
           session="sms"
           displayTime={<p>12:00pm</p>}
           status="sent"
+          sessionTimeline={{ message: <p>12:00pm</p> }}
           sessionDetails={{
             message: <h3>Session Message</h3>,
             time: <p>12:00pm</p>,
@@ -146,6 +147,19 @@ export const ChatBody = () => {
             alert('hello');
           }}
         />
+        <BmChat.Details
+          agentName="Agent Name"
+          state="outbound"
+          session="live"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
+        >
+          <p>Outbound Text Message</p>
+        </BmChat.Details>
       </BmChat.Body>
       <BmChat.Footer>
         <div className="chat-footer">

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

@@ -8,6 +8,8 @@ const SessionTimelineWrapper = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
 `;
 
 const container = styled.div`