beem-component 1.1.3 → 1.1.7

package/dist/components/index.js

@@ -59,12 +59,30 @@ Object.defineProperty(exports, "BmChat", {
     return _chatBody.default;
   }
 });
+Object.defineProperty(exports, "BmChatForm", {
+  enumerable: true,
+  get: function get() {
+    return _FormAccordion.default;
+  }
+});
 Object.defineProperty(exports, "BmChatHeader", {
   enumerable: true,
   get: function get() {
     return _chatHeader.BmChatHeader;
   }
 });
+Object.defineProperty(exports, "BmChatLabels", {
+  enumerable: true,
+  get: function get() {
+    return _LabelAccordion.default;
+  }
+});
+Object.defineProperty(exports, "BmChatNotes", {
+  enumerable: true,
+  get: function get() {
+    return _NoteAccordion.default;
+  }
+});
 Object.defineProperty(exports, "BmChatbotIcon", {
   enumerable: true,
   get: function get() {
@@ -77,6 +95,12 @@ Object.defineProperty(exports, "BmCheckbox", {
     return _checkbox.BmCheckbox;
   }
 });
+Object.defineProperty(exports, "BmColorPicker", {
+  enumerable: true,
+  get: function get() {
+    return _colorPicker.BmColorPicker;
+  }
+});
 exports.BmColors = void 0;
 Object.defineProperty(exports, "BmContactCard", {
   enumerable: true,
@@ -331,9 +355,9 @@ var _noteBar = require("./NoteBar/noteBar");
 
 var _MainWrapper = require("../components/MainWrapper");
 
-var _chatBody = _interopRequireDefault(require("../components/ChatBody/chatBody"));
+var _chatBody = _interopRequireDefault(require("./ChatComponents/ChatBody/chatBody"));
 
-var _chatHeader = require("./ChatHeader/chatHeader");
+var _chatHeader = require("./ChatComponents/ChatHeader/chatHeader");
 
 var _contactCards = _interopRequireDefault(require("./ContactCards/contactCards"));
 
@@ -341,6 +365,14 @@ var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
 
 var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
 
+var _FormAccordion = _interopRequireDefault(require("./ChatComponents/FormAccordion/FormAccordion"));
+
+var _LabelAccordion = _interopRequireDefault(require("./ChatComponents/LabelAccordion/LabelAccordion"));
+
+var _NoteAccordion = _interopRequireDefault(require("./ChatComponents/NoteAccordion/NoteAccordion"));
+
+var _colorPicker = require("./ChatComponents/ColorPicker/colorPicker");
+
 var _index = require("./SuperFluid/Content/index");
 
 var _index2 = require("./SuperFluid/ContentTitle.js/index.js");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.1.3",
+    "version": "1.1.7",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -26,6 +26,7 @@
         "@material-ui/icons": "^4.11.2",
         "@mui/icons-material": "^5.2.1",
         "@mui/material": "^5.2.3",
+        "js-file-download": "^0.4.12",
         "node-sass": "^6.0.1",
         "polished": "^4.1.3",
         "react": "^17.0.2",

package/src/App.js

@@ -2,21 +2,18 @@ import React from "react";
 import "../src/main.scss";
 import { MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
-import "./lib/assets/css/sidebar.css";
+import "./lib/assets/css/sidebar.scss";
 import SideBar from "./SideBar";
 import ChatHeader from "./ChatHeader";
 import Chat from "./Chat";
 import CustomerInfo from "./CustomerInfo";
-import { BmTag } from "./lib/components/Tags/tags";
-import { Home } from "@material-ui/icons";
+import InfoAccordion from "./InfoAccordion";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BmTag leadingIcon={<Home/>} trailingIcon={<Home/>}><p>Hello</p></BmTag>
-
         <div className="main-chat-container">
           <div className="sidebar">
             <SideBar />
@@ -29,6 +26,7 @@ export const App = () => {
               </div>
               <div className="chat-contact-info">
                 <CustomerInfo />
+                <InfoAccordion />
               </div>
             </div>
           </div>

package/src/Chat.js

@@ -4,8 +4,9 @@ import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
 import QuickreplyIcon from "@mui/icons-material/Quickreply";
 import SendIcon from "@mui/icons-material/Send";
 import { BmChat, BmIcons, BmInput } from "./lib/components";
-import "../src/lib/assets/css/sidebar.css";
-import { BmMessage, BmMessageTabInput } from "./lib/components/Chats/chatInput";
+import "../src/lib/assets/css/sidebar.scss";
+import image from "../src/lib/assets/chart-img.png";
+import azam from '../src/lib/images/azam1.png';
 
 const Chat = () => {
   return (
@@ -16,16 +17,19 @@ const Chat = () => {
           session="bot"
           displayTime={<p>12:00pm</p>}
           status="sent"
-        >
-          <p>Inbound</p>
-        </BmChat.Details>
+          src={image}
+          fileName={<p>attachment.jpg</p>}
+        />
+
         <BmChat.Details
           state="outbound"
           session="live"
           displayTime={<p>10:00am</p>}
           status="failed"
+          src={azam}
+          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
         >
-          <p>Outbound</p>
+          <p>Hekkoi</p>
         </BmChat.Details>
         <BmChat.Details
           state="outbound"
@@ -108,18 +112,15 @@ const Chat = () => {
           <p>Outbound</p>
         </BmChat.Details>
       </BmChat.Body>
-      <BmChat.Footer>
-        <div class="footer">
+      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+        <div class="chat-footer">
           <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
         </div>
-        <div class="footer">
+        <div class="chat-footer">
           <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
           <BmIcons icon={<AttachFile />} size="xlarge" />
           <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-          {/* <BmInput placeholder="Enter Message" /> */}
-          <BmMessage>
-            <BmMessageTabInput placeholder="Type your message" />
-          </BmMessage>
+          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
           <BmIcons icon={<SendIcon />} size="xlarge" />
         </div>
       </BmChat.Footer>

package/src/ChatHeader.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BmChatHeader, BmButton } from "../src/lib/components/";
-import "../src/lib/assets/css/sidebar.css";
+import "../src/lib/assets/css/sidebar.scss";
 
 export const ChatHeader = () => {
   return (

package/src/InfoAccordion.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { BmAccordion } from "./lib/components";
+import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
+
+const InfoAccordion = () => {
+  return (
+    <>
+      <BmAccordion>
+        <BmAccordion.Title>
+          <h3>Notes</h3>
+        </BmAccordion.Title>
+        <BmAccordion.Body>
+          <BmForm>
+            <BmForm.Label><h4>Hello</h4></BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm>
+        </BmAccordion.Body>
+      </BmAccordion>
+    </>
+  );
+};
+
+export default InfoAccordion;

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

@@ -0,0 +1,279 @@
+import React from "react";
+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 BmAvatar from "../../Avatars/avatars";
+import { BmIcons } from "../../iconStyles";
+
+import {
+  BmPrimaryWhite,
+  BmPrimaryBlue,
+  BmPrimaryBlack,
+  BmSecondaryDarkGreen,
+  BmGrey200,
+} from "../../colors";
+
+const BmChat = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+`;
+
+BmChat.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 1.5rem;
+  flex-grow: 1;
+  overflow: auto;
+`;
+
+const Details = styled.div`
+  display: flex;
+  ${"" /* align-items: center; */}
+  justify-content: ${({ state }) => {
+    if (state === "inbound") {
+      return "flex-start";
+    }
+    if (state === "outbound") {
+      return "flex-end";
+    }
+    return "row";
+  }};
+  > *:not(:last-child) {
+    margin-right: 1rem;
+    margin-bottom: 0.5rem;
+  }
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+  margin: 0rem;
+  flex-grow: 1;
+`;
+
+const MessageDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 50%;
+  > * {
+    margin-top: 0.5rem;
+  }
+`;
+
+const Messages = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.143rem;
+  background: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryWhite}`;
+      if (state === "outbound") return `${BmPrimaryBlue}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  color: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border-radius: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+  word-break: break-all;
+  margin: 0rem;
+`;
+
+const MessagesSubDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  margin-top: 0.5rem;
+`;
+
+const handleState = ({ session }) => {
+  if (session === "bot") {
+    return <BmAvatar size="small" user="chatbot" />;
+  }
+  if (session === "live") {
+    return <BmAvatar size="small" user="employee" />;
+  }
+};
+
+// Start of File Attachment
+const FileAttachmentWrapper = styled.div`
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  padding: 1rem;
+  background: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryWhite}`;
+      if (state === "outbound") return `${BmPrimaryBlue}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  color: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border-radius: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+  > * {
+    &:last-child {
+      margin-left: auto;
+    }
+    :not(:last-child) {
+      margin-right: 0.5rem;
+    }
+  }
+  &&& > * {
+    align-items: center;
+    color: ${({ state }) => {
+      if (state) {
+        if (state === "inbound") return `${BmPrimaryBlue}`;
+        if (state === "outbound") return `${BmPrimaryWhite}`;
+      }
+      return `${BmPrimaryWhite}`;
+    }};
+  }
+  ${"" /* max-width: 100%; */}
+  ${"" /* max-height: 100%; */}
+`;
+
+const BmFileAttachment = ({ state, file, src, fileName, ...rest }) => {
+  return (
+    <FileAttachmentWrapper state={state} {...rest}>
+      <BmIcons icon={<FilePresentIcon />} />
+      {fileName}
+      <BmIcons icon={<DownloadIcon />} />
+    </FileAttachmentWrapper>
+  );
+};
+//Start of Component for Images
+export const BmImageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border-radius: ${({ state }) => {
+    if (state) {
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+`;
+
+export const BmImage = styled.img`
+  ${"" /* Fix width */}
+  width: 21.429rem;
+  object-fit: cover;
+  flex-grow: 1;
+`;
+
+export const BmImageChat = ({ state, src, fileName, ...rest }) => {
+  return (
+    <>
+      <BmImageWrapper state={state} {...rest}>
+        <BmImage src={src} alt="src" />
+        {fileName && (
+          <BmFileAttachment
+            state={state}
+            file={src}
+            fileName={fileName}
+            {...rest}
+          />
+        )}
+      </BmImageWrapper>
+    </>
+  );
+};
+
+//End of Component for Images
+
+BmChat.Details = ({
+  children,
+  state,
+  displayTime,
+  status,
+  session,
+  src,
+  file,
+  fileName,
+  ...rest
+}) => {
+  console.log("bbbb", fileName);
+  return (
+    <Details state={state} {...rest}>
+      {state === "inbound" && session && handleState({ state, session })}
+      <MessageDetails>
+        {/* For Images */}
+        {src && (
+          <BmImageChat state={state} src={src} fileName={fileName} {...rest} />
+        )}
+        {/* For Messages */}
+        {children && <Messages state={state}>{children}</Messages>}
+        {/* For files */}
+        {file && (
+          <BmFileAttachment
+            file={file}
+            fileName={fileName}
+            state={state}
+            {...rest}
+          />
+        )}
+        <MessagesSubDetails>
+          {displayTime && displayTime}
+          {status === "sent" && (
+            <BmIcons
+              icon={<DoneAll />}
+              color={`${BmSecondaryDarkGreen}`}
+              size="small"
+            />
+          )}
+          {status === "failed" && (
+            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />
+          )}
+        </MessagesSubDetails>
+      </MessageDetails>
+      {state === "outbound" && session && handleState({ state, session })}
+    </Details>
+  );
+};
+
+BmChat.Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0.5rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+export default BmChat;

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

@@ -0,0 +1,81 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmChat from "./chatBody";
+import { BmIcons } from "../../iconStyles";
+import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import QuickreplyIcon from "@mui/icons-material/Quickreply";
+import SendIcon from "@mui/icons-material/Send";
+import { BmInput } from "../../input";
+import image from "../../../assets/chart-img.png";
+
+export default {
+  component: BmChat,
+  title: "components/Chat/MainChat/ChatBody",
+};
+
+export const ChatBody = () => {
+  return (
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+        >
+          <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}
+        />
+        <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}
+        />
+      </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/{ChatHeader → ChatComponents/ChatHeader}/chatHeader.stories.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from "react";
-import { BmButton } from "../Buttons/buttons";
+import { BmButton } from "../../Buttons/buttons";
 import { BmChatHeader } from "./chatHeader";
 
 export default {
   component: BmChatHeader,
-  title: "components/Chat/ChatHeader",
+  title: "components/Chat/MainChat/ChatHeader",
 };
 
 export const ChatHeader = () => {
@@ -13,7 +13,10 @@ export const ChatHeader = () => {
     <BmChatHeader>
       <h2>Contact Name</h2>
       <p>Last seen: 00:00</p>
-      <BmButton size="medium">End Session</BmButton>
+      <div className="chat-header-buttons">
+        <BmButton size="medium">End Session</BmButton>
+        <BmButton size="medium">End Session</BmButton>
+      </div>
     </BmChatHeader>
   );
 };

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const BmColorPicker = styled.div`
+  width: 1.429rem;
+  height: 1.429rem;
+  border-radius: 50%;
+  background: ${(props) => (props.color ? props.color : 'green')};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.stories.js

@@ -0,0 +1,17 @@
+import { BmColorPicker } from "./colorPicker";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: BmColorPicker,
+  title: "components/Chat/Components/ColorPicker",
+};
+
+export const ChatBody = () => {
+  return (
+    <>
+      {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
+        <BmColorPicker key={color} color={color} />
+      ))}
+    </>
+  );
+};

package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.js

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+const BmChatForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 0.5rem;
+  justify-content: space-between;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmChatForm.Group = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+BmChatForm.Label = styled.div`
+  margin: 0rem;
+  text-align: left;
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+BmChatForm.Input = styled.input`
+  text-align: right;
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: none;
+  &:visited,
+  &:active,
+  &:hover,
+  &:focus {
+    outline: none !important;
+    text-decoration: none;
+  }
+  background: transparent;
+`
+
+export default BmChatForm;