beem-component 2.0.23 → 2.0.25

package/dist/components/Modals/modal.js

@@ -34,7 +34,7 @@ var Overlay = _styledComponents.default.div.withConfig({
 exports.Overlay = Overlay;
 var ModalContent = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalContent"
-})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){max-width:500px;width:500px;}"], _colors.BmPrimaryWhite);
+})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:500px;}"], _colors.BmPrimaryWhite);
 exports.ModalContent = ModalContent;
 var ModalWrapper = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalWrapper"

package/dist/components/MultipleDateSelector/multipleDateSelector.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = require("../colors");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "multipleDateSelector__Wrapper"
-})(["display:flex;flex-direction:row;flex-wrap:wrap;border:0.071rem solid ", ";padding:1rem;background:", ";font-family:'Arial',sans-serif;font-size:1.5rem;"], _colors.BmGrey100, _colors.BmSecondaryBlue12);
+})(["display:flex;flex-direction:row;flex-wrap:wrap;border:0.071rem solid #33b1ba;padding:1rem;background:#e6f6f7;border-radius:0.5rem;font-family:'Arial',sans-serif;font-size:1.9rem;"]);
 var Box = _styledComponents.default.div.withConfig({
   displayName: "multipleDateSelector__Box"
-})(["display:inline-flex;border:0.071rem solid ", ";padding:0.5rem;cursor:pointer;font-family:'Arial',sans-serif;font-size:1.1rem;"], _colors.BmGrey100);
+})(["display:inline-flex;border:0.071rem solid #eeeeee;padding:0.5rem;cursor:pointer;"]);
 var BmMultiDateSelector = function BmMultiDateSelector(_ref) {
   var _ref$selectedNumbers = _ref.selectedNumbers,
     selectedNumbers = _ref$selectedNumbers === void 0 ? [] : _ref$selectedNumbers,
@@ -31,8 +30,8 @@ var BmMultiDateSelector = function BmMultiDateSelector(_ref) {
         return _onClick === null || _onClick === void 0 ? void 0 : _onClick(day);
       },
       style: {
-        backgroundColor: isSelected ? _colors.BmPrimaryBlue : _colors.BmPrimaryWhite,
-        color: isSelected ? _colors.BmPrimaryWhite : _colors.BmPrimaryBlack,
+        backgroundColor: isSelected ? '#33b1ba' : '#ffffff',
+        color: isSelected ? '#ffffff' : '#000000',
         fontWeight: isSelected ? 'bold' : 'normal'
       }
     }, day);

package/package.json

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

package/src/App.js

@@ -17,6 +17,7 @@ import {
   // BmButtonDropDown,
   // BmBtnIcon,
   BmContactCard,
+  BmModal,
   // BmContactCheckbox,
   // BmCounter,
   // BmProfileIcon,
@@ -893,7 +894,22 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
+      <BmModal show style={{ width: '800px' }}>
+        <div>
+          <BmModal.Header subHeading={<h5>Orders for user.</h5>} closeButton>
+            <h3 className="text-black font-weight-bold">
+              <h3>Order History</h3>
+            </h3>
+          </BmModal.Header>
+          <BmModal.Body>
+            {' '}
+            <p>TEXT HERE</p>
+          </BmModal.Body>
+          {/* <BmModal.Footer>
 
+      </BmModal.Footer> */}
+        </div>
+      </BmModal>
       <div>
         <BmChat.Details
           key={85279}
@@ -919,6 +935,25 @@ const Chat = () => {
         >
           <p>{x.message}</p>
         </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="bot"
+          sessionTimeline={{ message: <p>12:00pm</p> }}
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // type="interactive"
+          isInteractive="true"
+        >
+          <p style={{ whiteSpace: 'pre-line' }}>
+            {`*Order placed successfully!* 
+
+ *ORDER ID: 191* 
+
+ 1 X 16" Zuri Wig Straight Ciara @ USD 504
+,2 X 18" Zuri Wig Straight Ciara @ USD 504
+,3 X 16" Zuri Wig Straight Feza Caramel Brown @ USD 808`}
+          </p>
+        </BmChat.Details>
         <BmChatAccordion Open expandIconPosition="left">
           <BmChatAccordion.Title
           // trailingIcon={<AbcIcon />}

package/src/lib/components/Modals/modal.js

@@ -34,7 +34,6 @@ export const ModalContent = styled.div`
     margin-bottom: 0.5rem;
   }
   @media (min-width: 576px) {
-    max-width: 500px;
     width: 500px;
   }
 `;

package/src/lib/components/MultipleDateSelector/multipleDateSelector.js

@@ -1,31 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
-import {
-  BmGrey100,
-  BmPrimaryBlack,
-  BmPrimaryBlue,
-  BmPrimaryWhite,
-  BmSecondaryBlue12,
-} from '../colors';
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  border: 0.071rem solid ${BmGrey100};
+  border: 0.071rem solid #33b1ba;
   padding: 1rem;
-  background: ${BmSecondaryBlue12};
+  background: #e6f6f7;
+  border-radius: 0.5rem;
   font-family: 'Arial', sans-serif;
-  font-size: 1.5rem;
+  font-size: 1.9rem;
 `;
 
 const Box = styled.div`
   display: inline-flex;
-  border: 0.071rem solid ${BmGrey100};
+  border: 0.071rem solid #eeeeee;
   padding: 0.5rem;
   cursor: pointer;
-  font-family: 'Arial', sans-serif;
-  font-size: 1.1rem;
 `;
 
 const BmMultiDateSelector = ({ selectedNumbers = [], onClick }) => {
@@ -40,8 +32,8 @@ const BmMultiDateSelector = ({ selectedNumbers = [], onClick }) => {
             key={day}
             onClick={() => onClick?.(day)}
             style={{
-              backgroundColor: isSelected ? BmPrimaryBlue : BmPrimaryWhite,
-              color: isSelected ? BmPrimaryWhite : BmPrimaryBlack,
+              backgroundColor: isSelected ? '#33b1ba' : '#ffffff',
+              color: isSelected ? '#ffffff' : '#000000',
               fontWeight: isSelected ? 'bold' : 'normal',
             }}
           >