beem-component 1.6.8 → 1.7.1

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/dist/components/ProfileIcon/ProfileIcon.js

@@ -17,6 +17,8 @@ var _fb = _interopRequireDefault(require("../../assets/fb.png"));
 
 var _insta = _interopRequireDefault(require("../../assets/insta.png"));
 
+var _Google_Messages_logo = _interopRequireDefault(require("../../assets/Google_Messages_logo.png"));
+
 var _excluded = ["img", "content", "channel", "size"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -95,6 +97,10 @@ var BmProfileIcon = function BmProfileIcon(_ref) {
     size: size,
     src: _insta.default,
     alt: "icon"
+  }), channel && channel === 'google_business_messaging' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _Google_Messages_logo.default,
+    alt: "icon"
   })));
 };
 

package/dist/components/Tags/tags.js

@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
 
 var _colors = require("../colors");
 
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "closeButton", "onHide"];
+var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "bgColor", "closeButton", "onHide"];
 
 var _templateObject;
 
@@ -53,7 +53,7 @@ var Color = function Color(_ref) {
   var variant = _ref.variant,
       color = _ref.color;
 
-  if (variant === 'success' || variant === 'warning' || variant === 'danger') {
+  if (variant === 'success' || variant === 'warning' || variant === 'danger' || variant === 'primary') {
     return "".concat(_colors.BmPrimaryWhite);
   }
 
@@ -76,13 +76,16 @@ var BeemTag = _styledComponents.default.button(_templateObject || (_templateObje
 
   return show ? 'flex' : 'none';
 }, function (_ref3) {
-  var variant = _ref3.variant;
+  var variant = _ref3.variant,
+      bgColor = _ref3.bgColor;
+  if (bgColor && !variant) return bgColor;
   if (variant === 'neutral') return "".concat(_colors.BmGrey100);
   if (variant === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
   if (variant === 'warning') return "".concat(_colors.BmPrimaryGold);
   if (variant === 'danger') return "".concat(_colors.BmSecondaryRed);
   if (variant === 'light') return "".concat(_colors.BmPrimaryWhite);
-  if (!variant) return "".concat(_colors.BmGrey100);
+  if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
+  if (!variant && !bgColor) return "".concat(_colors.BmGrey100);
 }, function (_ref4) {
   var variant = _ref4.variant;
   if (variant === 'neutral') return "".concat(_colors.BmGrey100);
@@ -113,6 +116,7 @@ var BmTag = function BmTag(props) {
       leadingIcon = props.leadingIcon,
       trailingIcon = props.trailingIcon,
       color = props.color,
+      bgColor = props.bgColor,
       closeButton = props.closeButton,
       onHide = props.onHide,
       rest = _objectWithoutProperties(props, _excluded);
@@ -124,7 +128,8 @@ var BmTag = function BmTag(props) {
     children: children,
     color: color,
     closeButton: closeButton,
-    show: toggle
+    show: toggle,
+    bgColor: bgColor
   }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     disabled: disabled,
     icon: leadingIcon,

package/dist/components/Tags/tags.stories.js

@@ -24,6 +24,12 @@ var _default = {
       },
       description: 'Color of the Icons and Text, will work only if variant is not present'
     },
+    bgColor: {
+      control: {
+        type: 'text'
+      },
+      description: 'Background Color of Tags, will work only if variant is not present'
+    },
     closeButton: {
       control: {
         type: 'boolean'
@@ -44,7 +50,7 @@ var _default = {
       }
     },
     variant: {
-      options: ['success', 'warning', 'danger', 'light', 'neutral', undefined],
+      options: ['success', 'warning', 'danger', 'light', 'neutral', 'primary', undefined],
       control: {
         type: 'select'
       },

package/package.json

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

package/src/App.js

@@ -1,8 +1,99 @@
 import React from 'react';
-import { BmButton } 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,
+  BmProfileIcon,
+} from './lib/components';
 
 const Chat = () => {
-  return <BmButton type="submit">Hello</BmButton>;
+  const image =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/1225211.jpg?AWSAccessKeyId=AKIAVCAYXA54EPKHSRGL&Expires=1734873821&Signature=ySZ23PaUxUeUVA4lCZCE1RZIrnc%3D';
+  return (
+    <>
+      <GlobalStyle />
+      <BmProfileIcon channel="google_business_messaging" />
+      <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>
+    </>
+  );
 };
 
 export default Chat;

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>
+  );
+};

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -4,6 +4,7 @@ import { BmSecondaryBlue12, BmBgLightBlue } from '../colors';
 import wa from '../../assets/wa.png';
 import fb from '../../assets/fb.png';
 import insta from '../../assets/insta.png';
+import gbm from '../../assets/Google_Messages_logo.png';
 
 const handleSize = (size) => {
   if (size) {
@@ -76,6 +77,9 @@ export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
         {channel && channel === 'instagram' && (
           <Dot size={size} src={insta} alt="icon" />
         )}
+        {channel && channel === 'google_business_messaging' && (
+          <Dot size={size} src={gbm} alt="icon" />
+        )}
       </Profile>
     </>
   );

package/src/lib/components/Tags/tags.js

@@ -13,10 +13,16 @@ import {
   BmGrey100,
   BmGrey400,
   BmPrimaryGold,
+  BmPrimaryBlue,
 } from '../colors';
 
 const Color = ({ variant, color }) => {
-  if (variant === 'success' || variant === 'warning' || variant === 'danger') {
+  if (
+    variant === 'success' ||
+    variant === 'warning' ||
+    variant === 'danger' ||
+    variant === 'primary'
+  ) {
     return `${BmPrimaryWhite}`;
   }
   if (!variant && color) {
@@ -38,13 +44,15 @@ const BeemTag = styled.button`
   align-items: center;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
-  background: ${({ variant }) => {
+  background: ${({ variant, bgColor }) => {
+    if (bgColor && !variant) return bgColor;
     if (variant === 'neutral') return `${BmGrey100}`;
     if (variant === 'success') return `${BmSecondaryDarkGreen}`;
     if (variant === 'warning') return `${BmPrimaryGold}`;
     if (variant === 'danger') return `${BmSecondaryRed}`;
     if (variant === 'light') return `${BmPrimaryWhite}`;
-    if (!variant) return `${BmGrey100}`;
+    if (variant === 'primary') return `${BmPrimaryBlue}`;
+    if (!variant && !bgColor) return `${BmGrey100}`;
   }};
   border: 0.071rem solid
     ${({ variant }) => {
@@ -76,6 +84,7 @@ export const BmTag = (props) => {
     leadingIcon,
     trailingIcon,
     color,
+    bgColor,
     closeButton,
     onHide,
     ...rest
@@ -90,6 +99,7 @@ export const BmTag = (props) => {
       color={color}
       closeButton={closeButton}
       show={toggle}
+      bgColor={bgColor}
       {...rest}
     >
       {leadingIcon && (

package/src/lib/components/Tags/tags.stories.js

@@ -12,6 +12,11 @@ export default {
       description:
         'Color of the Icons and Text, will work only if variant is not present',
     },
+    bgColor: {
+      control: { type: 'text' },
+      description:
+        'Background Color of Tags, will work only if variant is not present',
+    },
     closeButton: {
       control: { type: 'boolean' },
       description: 'Will display (x) - Optional',
@@ -27,7 +32,15 @@ export default {
       defaultValue: { summary: 'small' },
     },
     variant: {
-      options: ['success', 'warning', 'danger', 'light', 'neutral', undefined],
+      options: [
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'neutral',
+        'primary',
+        undefined,
+      ],
       control: { type: 'select' },
       description: 'Type of tag',
       defaultValue: { summary: 'neutral' },