beem-component 1.6.9 → 1.7.0

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

@@ -21,11 +21,13 @@ var _iconStyles = require("../../iconStyles");
 
 var _sessionDetails = require("./sessionDetails");
 
+var _sessionTimeline = require("./sessionTimeline");
+
 var _colors = require("../../colors");
 
 var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
     _excluded2 = ["state", "src", "fileName"],
-    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails"];
+    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -247,9 +249,12 @@ BmChat.Details = function (_ref14) {
       file = _ref14.file,
       fileName = _ref14.fileName,
       sessionDetails = _ref14.sessionDetails,
+      sessionTimeline = _ref14.sessionTimeline,
       rest = _objectWithoutProperties(_ref14, _excluded3);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
+  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({

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SessionTimeline = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../../colors");
+
+var _excluded = ["message", "time"];
+
+var _templateObject, _templateObject2;
+
+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; }
+
+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; }
+
+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 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);
+
+SessionTimelineWrapper.Container = container;
+
+var SessionTimeline = function SessionTimeline(_ref) {
+  var message = _ref.message,
+      time = _ref.time,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(SessionTimelineWrapper, _extends({
+    message: message
+  }, rest), /*#__PURE__*/_react.default.createElement(SessionTimelineWrapper.Container, null, message || /*#__PURE__*/_react.default.createElement("p", null, "\xA0")));
+};
+
+exports.SessionTimeline = SessionTimeline;

package/package.json

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

package/src/App.js

@@ -1,11 +1,91 @@
 import React from 'react';
-import { BmTag } from './lib/components';
+
+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 { BmChat, BmInput, BmIcons, GlobalStyle } from './lib/components';
 
 const Chat = () => {
+  const image =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/1225211.jpg?AWSAccessKeyId=AKIAVCAYXA54EPKHSRGL&Expires=1734873821&Signature=ySZ23PaUxUeUVA4lCZCE1RZIrnc%3D';
   return (
-    <BmTag bgColor="red" variant="primary" color="white">
-      <p>Hello</p>
-    </BmTag>
+    <>
+      <GlobalStyle />
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionTimeline={{
+              message: <p>2022-07-28</p>,
+              // time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Inbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          />
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+          />
+          <BmChat.Details
+            state="outbound"
+            session="bot"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Outbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+          />
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+            link={image}
+            onDownload={() => {
+              alert('hello');
+            }}
+          />
+        </BmChat.Body>
+        <BmChat.Footer>
+          <div className="chat-footer">
+            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+            <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
+            <BmIcons icon={<SendIcon />} size="xlarge" />
+          </div>
+        </BmChat.Footer>
+      </BmChat>
+    </>
   );
 };
 

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

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
+import { SessionTimeline } from './sessionTimeline';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -250,10 +251,14 @@ BmChat.Details = ({
   file,
   fileName,
   sessionDetails,
+  sessionTimeline,
   ...rest
 }) => {
   return (
     <>
+      {sessionTimeline && (
+        <SessionTimeline message={sessionTimeline.message} {...rest} />
+      )}
       {sessionDetails && (
         <SessionDetails
           time={sessionDetails.time}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BmSecondaryBlue12, BmBgGreyBlue } from '../../colors';
+
+const SessionTimelineWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+
+const container = styled.div`
+  border-radius: 0.714rem 0.714rem 0.714rem 0.714rem;
+  border: 0.071rem solid ${BmBgGreyBlue};
+  padding: 0.5rem;
+  background-color: ${BmSecondaryBlue12};
+`;
+SessionTimelineWrapper.Container = container;
+
+export const SessionTimeline = ({ message, time, ...rest }) => {
+  return (
+    <SessionTimelineWrapper message={message} {...rest}>
+      <SessionTimelineWrapper.Container>
+        {message || <p>&nbsp;</p>}
+      </SessionTimelineWrapper.Container>
+    </SessionTimelineWrapper>
+  );
+};