beem-component 1.6.0 → 1.6.3

package/dist/components/Avatars/avatars.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _SmartToy = _interopRequireDefault(require("@mui/icons-material/SmartToy"));
 
+var _Chat = _interopRequireDefault(require("@mui/icons-material/Chat"));
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
@@ -53,6 +55,7 @@ var BmAvatarWrapper = _styledComponents.default.div(_templateObject || (_templat
   var user = _ref3.user;
   if (user === 'chatbot') return "".concat(_colors.BmPrimaryBlue);
   if (user === 'employee') return "".concat(_colors.BmPrimaryBlue);
+  if (user === 'sms') return "".concat(_colors.BmPrimaryBlue);
   return "".concat(_colors.BmGrey100);
 }, function (_ref4) {
   var type = _ref4.type;
@@ -63,6 +66,7 @@ var BmAvatarWrapper = _styledComponents.default.div(_templateObject || (_templat
   var user = _ref5.user;
   if (user === 'chatbot') return "".concat(_colors.BmPrimaryBlue);
   if (user === 'employee') return "".concat(_colors.BmPrimaryBlue);
+  if (user === 'sms') return "".concat(_colors.BmPrimaryBlue);
   return "".concat(_colors.BmGrey100);
 });
 
@@ -85,7 +89,11 @@ var BmAvatar = function BmAvatar(props) {
     icon: /*#__PURE__*/_react.default.createElement(_SmartToy.default, null),
     size: size,
     color: color
-  }, rest)), user !== 'chatbot' && user !== 'employee' && user !== 'default' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+  }, rest)), user === 'sms' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+    icon: /*#__PURE__*/_react.default.createElement(_Chat.default, null),
+    size: size,
+    color: color
+  }, rest)), user !== 'chatbot' && user !== 'employee' && user !== 'sms' && user !== 'default' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
     icon: user,
     size: size,
     color: color

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

@@ -23,7 +23,7 @@ var _sessionDetails = require("./sessionDetails");
 
 var _colors = require("../../colors");
 
-var _excluded = ["state", "file", "src", "fileName", "onDownload"],
+var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
     _excluded2 = ["state", "src", "fileName"],
     _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails"];
 
@@ -110,6 +110,13 @@ var handleState = function handleState(_ref5) {
       user: "employee"
     });
   }
+
+  if (session === 'sms') {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "sms"
+    });
+  }
 }; // Start of File Attachment
 
 
@@ -161,16 +168,19 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
       src = _ref10.src,
       fileName = _ref10.fileName,
       onDownload = _ref10.onDownload,
+      link = _ref10.link,
       rest = _objectWithoutProperties(_ref10, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
-  }), fileName, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
-    onClick: onDownload
-  }));
+  }), fileName, /*#__PURE__*/_react.default.createElement("a", {
+    href: link,
+    download: true
+  }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
+  })));
 }; // Start of Component for Images
 
 

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

@@ -36,7 +36,7 @@ exports.default = _default;
 var ChatBody = function ChatBody() {
   return /*#__PURE__*/_react.default.createElement(_chatBody.default, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Body, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "inbound",
-    session: "bot",
+    session: "sms",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
     status: "sent",
     sessionDetails: {
@@ -80,6 +80,7 @@ var ChatBody = function ChatBody() {
     status: "failed",
     fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
     file: _chartImg.default,
+    link: _chartImg.default,
     onDownload: function onDownload() {
       alert('hello');
     }

package/dist/components/PaymentBox/paymentBox.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../colors");
+
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 BmPaymentBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 240px;\n  min-height: 280px;\n  border: 0.071rem solid ", ";\n  border-radius: 0.5rem;\n  > * {\n    margin-bottom: 1rem;\n  }\n  &:hover {\n    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);\n  }\n"])), _colors.BmGrey200);
+
+var BmPaymentBox = function BmPaymentBox(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BmPaymentBoxWrapper, rest, children);
+};
+
+BmPaymentBox.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.5rem 0rem;\n  border-radius: 0.5rem 0.5rem 0rem 0rem;\n  background: ", "} \n"])), function (_ref2) {
+  var headerColor = _ref2.headerColor;
+  return headerColor || _colors.BmPrimaryBlue;
+});
+BmPaymentBox.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])));
+BmPaymentBox.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  margin-top: auto;\n"])));
+BmPaymentBox.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = BmPaymentBox;
+exports.default = _default;

package/dist/components/PaymentBox/paymentBox.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SamplePaymentBox = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _paymentBox = _interopRequireDefault(require("./paymentBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _paymentBox.default,
+  title: 'components/PaymentBox',
+  argTypes: {
+    headerColor: {
+      description: 'Color of the box header ',
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var SamplePaymentBox = function SamplePaymentBox() {
+  return /*#__PURE__*/_react.default.createElement(_paymentBox.default, null, /*#__PURE__*/_react.default.createElement(_paymentBox.default.Header, null, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_paymentBox.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_paymentBox.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer")));
+};
+
+exports.SamplePaymentBox = SamplePaymentBox;

package/dist/components/index.js

@@ -210,6 +210,12 @@ Object.defineProperty(exports, "BmNoteBar", {
     return _noteBar.BmNoteBar;
   }
 });
+Object.defineProperty(exports, "BmPaymentBox", {
+  enumerable: true,
+  get: function get() {
+    return _paymentBox.default;
+  }
+});
 Object.defineProperty(exports, "BmProfileIcon", {
   enumerable: true,
   get: function get() {
@@ -381,6 +387,8 @@ var _ProfileIcon = require("./ProfileIcon/ProfileIcon");
 
 var _checkboxToggler = require("./Checkbox/checkboxToggler");
 
+var _paymentBox = _interopRequireDefault(require("./PaymentBox/paymentBox"));
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/package.json

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

package/src/App.js

@@ -1,14 +1,93 @@
-import React, { useState } from 'react';
-import { GlobalStyle, BmModal, BmButton } from './lib/components';
-import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
+import React from 'react';
+import { GlobalStyle, BmChat } from './lib/components';
+// import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
+// import BmChat from './lib/components';
 
 const Chat = () => {
-  const [checked, setChecked] = useState(false);
-  const [showModal, setShowModal] = useState(false);
+  // const [checked, setChecked] = useState(false);
+  // const [showModal, setShowModal] = useState(false);
+  const image =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/3ba5560f-5446-4623-940e-c92b0f50a9b1?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652431&Signature=WEt9my0kkm3SRkiJjvth2vQKcHc%3D';
+  const file =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/270e8552-064f-42aa-970c-0593b5cf3a20?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652558&Signature=0sTEvpH0UoKHeb8mrFSXlf65h24%3D';
   return (
     <>
       <GlobalStyle />
-      <div>
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              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>chahhhhhhhht.png</p>}
+            src={image}
+            link={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>fifdsfdsfsdfsfle.csv</p>}
+            file={file}
+            link={file}
+          />
+          <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}
+            // 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>
+      {/* <div>
         <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
       </div>
       <BmModal show={showModal} onHide={() => setShowModal(false)}>
@@ -29,8 +108,8 @@ const Chat = () => {
         </BmModal.Body>
         <BmModal.Footer>
           <p>This is a footer</p>
-        </BmModal.Footer>
-      </BmModal>
+        </BmModal.Footer> */}
+      {/* </BmModal> */}
     </>
   );
 };

package/src/lib/components/Avatars/avatars.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
+import ChatIcon from '@mui/icons-material/Chat';
 import { BmGrey100, BmPrimaryBlue } from '../colors';
 import { BmAvatarIcon } from '../iconStyles';
 
@@ -29,6 +30,7 @@ export const BmAvatarWrapper = styled.div`
   background: ${({ user }) => {
     if (user === 'chatbot') return `${BmPrimaryBlue}`;
     if (user === 'employee') return `${BmPrimaryBlue}`;
+    if (user === 'sms') return `${BmPrimaryBlue}`;
     return `${BmGrey100}`;
   }};
   border-radius: ${({ type }) => {
@@ -40,6 +42,8 @@ export const BmAvatarWrapper = styled.div`
     ${({ user }) => {
       if (user === 'chatbot') return `${BmPrimaryBlue}`;
       if (user === 'employee') return `${BmPrimaryBlue}`;
+      if (user === 'sms') return `${BmPrimaryBlue}`;
+
       return `${BmGrey100}`;
     }};
 `;
@@ -59,9 +63,15 @@ const BmAvatar = (props) => {
           {...rest}
         />
       )}
-      {user !== 'chatbot' && user !== 'employee' && user !== 'default' && (
-        <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
+      {user === 'sms' && (
+        <BmAvatarIcon icon={<ChatIcon />} size={size} color={color} {...rest} />
       )}
+      {user !== 'chatbot' &&
+        user !== 'employee' &&
+        user !== 'sms' &&
+        user !== 'default' && (
+          <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
+        )}
     </BmAvatarWrapper>
   );
 };

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

@@ -111,6 +111,9 @@ const handleState = ({ session }) => {
   if (session === 'live') {
     return <BmAvatar size="small" user="employee" />;
   }
+  if (session === 'sms') {
+    return <BmAvatar size="small" user="sms" />;
+  }
 };
 
 // Start of File Attachment
@@ -169,13 +172,17 @@ const BmFileAttachment = ({
   src,
   fileName,
   onDownload,
+  link,
   ...rest
 }) => {
   return (
     <FileAttachmentWrapper state={state} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
+      {/* {fileName} */}
       {fileName}
-      <BmIcons icon={<DownloadIcon />} onClick={onDownload} />
+      <a href={link} download>
+        <BmIcons icon={<DownloadIcon />} />
+      </a>
     </FileAttachmentWrapper>
   );
 };

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

@@ -20,7 +20,7 @@ export const ChatBody = () => {
       <BmChat.Body>
         <BmChat.Details
           state="inbound"
-          session="bot"
+          session="sms"
           displayTime={<p>12:00pm</p>}
           status="sent"
           sessionDetails={{
@@ -73,6 +73,7 @@ export const ChatBody = () => {
           status="failed"
           fileName={<p>file.csv</p>}
           file={image}
+          link={image}
           onDownload={() => {
             alert('hello');
           }}

package/src/lib/components/PaymentBox/paymentBox.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey200, BmPrimaryBlue } from '../colors';
+
+const BmPaymentBoxWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 240px;
+  min-height: 280px;
+  border: 0.071rem solid ${BmGrey200};
+  border-radius: 0.5rem;
+  > * {
+    margin-bottom: 1rem;
+  }
+  &:hover {
+    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
+  }
+`;
+
+const BmPaymentBox = ({ children, ...rest }) => {
+  return <BmPaymentBoxWrapper {...rest}>{children}</BmPaymentBoxWrapper>;
+};
+
+BmPaymentBox.Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0rem;
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
+  background: ${({ headerColor }) => headerColor || BmPrimaryBlue}} 
+`;
+
+BmPaymentBox.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+BmPaymentBox.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: auto;
+`;
+
+BmPaymentBox.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default BmPaymentBox;

package/src/lib/components/PaymentBox/paymentBox.stories.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from 'react';
+import BmPaymentBox from './paymentBox';
+
+export default {
+  component: BmPaymentBox,
+  title: 'components/PaymentBox',
+  argTypes: {
+    headerColor: {
+      description: 'Color of the box header ',
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+export const SamplePaymentBox = () => {
+  return (
+    <BmPaymentBox>
+      <BmPaymentBox.Header>
+        <h2>Header</h2>
+      </BmPaymentBox.Header>
+      <BmPaymentBox.Body>
+        <p>This is a body</p>
+      </BmPaymentBox.Body>
+      <BmPaymentBox.Footer>
+        <p>This is a footer</p>
+      </BmPaymentBox.Footer>
+    </BmPaymentBox>
+  );
+};

package/src/lib/components/index.js

@@ -22,6 +22,7 @@ import BmBanner from './BannerCard/bannerCards';
 import BmProgressRing from './ProgressRing/progressRing';
 import { BmProfileIcon } from './ProfileIcon/ProfileIcon';
 import { BmCheckboxToggle } from './Checkbox/checkboxToggler';
+import BmPaymentBox from './PaymentBox/paymentBox';
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -80,6 +81,7 @@ export {
   BmProgressRing,
   BmProfileIcon,
   BmCheckboxToggle,
+  BmPaymentBox,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,