beem-component 2.1.18 → 2.1.20

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
 import React, { useState } from 'react';
@@ -61,7 +62,7 @@ const Details = styled.div`
   }
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
-  margin: 0rem;import { extension } from 'mime-types';
+  margin: 0rem;
 
   flex-grow: 1;
   ${'' /* border: 1px solid red; */}
@@ -433,30 +434,90 @@ const QuickReplyRender = ({
   state,
   rest,
   isInteractive,
+  connector,
+  body,
+  action,
+  header,
+  footer,
 }) => {
-  return (
-    <Messages type={type} state={state} isInteractive={isInteractive} isImg>
+  const MEDIA_TYPES = ['document', 'image', 'video'];
+  const renderers = {
+    dotgo_v3: () => (
+      <>
+        {header && (
+          <>
+            {MEDIA_TYPES.includes(header?.type) ? (
+              <BmImageChat
+                state={state}
+                src={header[header.type]?.link}
+                {...rest}
+              />
+            ) : (
+              <h5>{header[header.type]?.text}</h5>
+            )}
+          </>
+        )}
+
+        {body && (
+          <>
+            {body?.text?.split('\n').map((line, idx) => (
+              <p key={`body-line-${idx}`}>
+                {line}
+                <br />
+              </p>
+            ))}
+          </>
+        )}
+
+        {footer && <small>{footer?.text}</small>}
+
+        {action?.buttons?.length > 0 &&
+          action.buttons.map((button, idx) => (
+            <IntButton state={state} key={`action-btn-${idx}`}>
+              {button[button.type]?.title}
+            </IntButton>
+          ))}
+      </>
+    ),
+  };
+
+  const FallbackRenderer = () => (
+    <>
       {content?.url && (
-        <BmImageChat state={state} src={content?.url} {...rest} />
+        <div>
+          <BmImageChat state={state} src={content?.url} {...rest} />
+        </div>
       )}
 
-      <strong>{content?.header}</strong>
-      {content?.text?.split('\n').map((line) => (
-        <p>
-          {line}
-          <br />
-        </p>
+      {content?.header && <strong>{content.header}</strong>}
+
+      {content?.text?.split('\n').map((line, idx) => (
+        <div>
+          <p key={`content-line-${idx}`}>
+            {line}
+            <br />
+          </p>
+        </div>
       ))}
-      <small>{content?.caption}</small>
-      {options?.map((button) => (
-        // eslint-disable-next-line react/jsx-key
-        <IntButton state={state}>{button?.title}</IntButton>
+
+      {content?.caption && <small>{content.caption}</small>}
+
+      {options?.map((button, idx) => (
+        <IntButton state={state} key={`opt-btn-${idx}`}>
+          {button?.title}
+        </IntButton>
       ))}
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return (
+    <Messages type={type} state={state} isInteractive={isInteractive} isImg>
+      <ConnectorRenderer />
     </Messages>
   );
 };
 const ProductDetailRender = ({ type, state, header, body, isInteractive }) => {
-  console.log(type, state, header, body);
   return (
     <>
       <Messages type={type} state={state} isInteractive={isInteractive}>
@@ -477,43 +538,88 @@ const ListReplyRender = ({
   isInteractive,
   type,
   state,
+  connector,
+  header,
+  action,
+  footer,
 }) => {
+  const renderers = {
+    dotgo_v3: () => (
+      <>
+        {header && (
+          <>
+            <h6>{header[header.type]?.text}</h6>
+          </>
+        )}
+
+        {body && (
+          <>
+            {body?.text?.split('\n').map((line, idx) => (
+              <p key={`body-line-${idx}`}>
+                {line}
+                <br />
+              </p>
+            ))}
+          </>
+        )}
+
+        {footer && <small>{footer?.text}</small>}
+
+        {action.button && (
+          <IntButton state={state}>
+            <ListIcon />
+            {action.button}
+          </IntButton>
+        )}
+      </>
+    ),
+  };
+
+  const FallbackRenderer = () => (
+    <>
+      <strong>{title}</strong>
+      {body.split('\n').map((line) => (
+        <p>
+          {line}
+          <br />
+        </p>
+      ))}
+      <IntButton state={state}>
+        <ListIcon />
+        {globalButtons[0]?.title}
+      </IntButton>
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   return (
     <>
       <Messages type={type} state={state} isInteractive={isInteractive}>
-        <strong>{title}</strong>
-        {body.split('\n').map((line) => (
-          <p>
-            {line}
-            <br />
-          </p>
-        ))}
-        <IntButton state={state}>
-          <ListIcon />
-          {globalButtons[0]?.title}
-        </IntButton>
+        <ConnectorRenderer />
       </Messages>
     </>
   );
 };
 
-const OrderRender = ({ amount, type, state, items }) => {
-  const [displayItems, setDisplayItems] = useState(false);
-
-  const sumQuantities = () => {
-    return items?.reduce((total, item) => {
-      return total + parseInt(item.quantity, 10);
-    }, 0);
-  };
-  return (
-    <>
-      <Messages type={type} state={state}>
+const OrderRender = ({
+  amount,
+  type,
+  state,
+  items,
+  product_items,
+  connector,
+  isInteractive,
+}) => {
+  const renderers = {
+    dotgo_v3: ({ displayItems, sumQuantities, setDisplayItems }) => (
+      <>
         <OrderBody state={state}>
           <CartContent state={state}>
             <ShoppingCartOutlinedIcon fontSize="small" />
             <h5>
               <strong>
-                {sumQuantities()} {sumQuantities() > 1 ? 'items' : 'item'}
+                {sumQuantities(product_items)}{' '}
+                {sumQuantities(product_items) > 1 ? 'items' : 'item'}
               </strong>
             </h5>
           </CartContent>
@@ -521,7 +627,7 @@ const OrderRender = ({ amount, type, state, items }) => {
 
         {displayItems ? (
           <OrderBody state={state}>
-            {items.map((data, index) => (
+            {product_items.map((data, index) => (
               <>
                 <CartContent state={state}>
                   <p>{index + 1}. </p>
@@ -555,6 +661,84 @@ const OrderRender = ({ amount, type, state, items }) => {
         >
           <p>{displayItems ? 'HIDE' : 'SHOW'} CART ITEMS</p>
         </IntButton>
+      </>
+    ),
+  };
+
+  const FallbackRenderer = ({
+    sumQuantities,
+    displayItems,
+    setDisplayItems,
+  }) => (
+    <>
+      <OrderBody state={state}>
+        <CartContent state={state}>
+          <ShoppingCartOutlinedIcon fontSize="small" />
+          <h5>
+            <strong>
+              {sumQuantities(items)}{' '}
+              {sumQuantities(items) > 1 ? 'items' : 'item'}
+            </strong>
+          </h5>
+        </CartContent>
+      </OrderBody>
+
+      {displayItems ? (
+        <OrderBody state={state}>
+          {items.map((data, index) => (
+            <>
+              <CartContent state={state}>
+                <p>{index + 1}. </p>
+                <ProductImage src={data.imgURL} alt="product" />
+
+                <p>
+                  {data.quantity} X {data.description} @ {data.currency}{' '}
+                  {data.amount}
+                </p>
+              </CartContent>
+              <hr style={{ width: '100%' }} />
+            </>
+          ))}
+        </OrderBody>
+      ) : (
+        <></>
+      )}
+      <OrderBody state={state}>
+        <CartContent state={state}>
+          <p>
+            {' '}
+            Estimated Total: <strong>{amount}</strong>
+          </p>
+        </CartContent>
+      </OrderBody>
+      <IntButton
+        state={state}
+        onClick={() => {
+          setDisplayItems(!displayItems);
+        }}
+      >
+        <p>{displayItems ? 'HIDE' : 'SHOW'} CART ITEMS</p>
+      </IntButton>
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  const [displayItems, setDisplayItems] = useState(false);
+
+  const sumQuantities = (data) => {
+    return data?.reduce((total, item) => {
+      return total + parseInt(item.quantity, 10);
+    }, 0);
+  };
+  return (
+    <>
+      <Messages type={type} state={state} isInteractive={isInteractive}>
+        <ConnectorRenderer
+          sumQuantities={sumQuantities}
+          setDisplayItems={setDisplayItems}
+          displayItems={displayItems}
+          items={items}
+        />
       </Messages>
     </>
   );
@@ -603,33 +787,42 @@ BmChat.Details = ({
             <>
               {metadata ? (
                 <RepliedTextWrapper state={state}>
-                  {metadata.type === 'quick_reply' ? (
+                  {metadata.message.type === 'quick_reply' ||
+                  metadata.message.type === 'button' ? (
                     <QuickReplyRender
                       isInteractive
                       rest={rest}
-                      {...metadata}
+                      {...metadata.message}
                       type={type}
                       state={state}
+                      connector={metadata.connector}
                     />
-                  ) : metadata.type === 'list' ? (
+                  ) : metadata.message.type === 'list' ? (
                     <ListReplyRender
                       isInteractive
-                      {...metadata}
+                      {...metadata.message}
                       type={type}
                       state={state}
+                      connector={metadata.connector}
                     />
-                  ) : metadata.type === 'product_details' ? (
+                  ) : metadata.message.type === 'product_details' ? (
                     <ProductDetailRender
                       isInteractive
-                      {...metadata}
+                      {...metadata.message}
                       type={type}
                       state={state}
                     />
-                  ) : metadata.type === 'order' ? (
-                    <OrderRender {...metadata} type={type} state={state} />
+                  ) : metadata.message.type === 'order' ? (
+                    <OrderRender
+                      isInteractive
+                      {...metadata.message}
+                      type={type}
+                      state={state}
+                      connector={metadata.connector}
+                    />
                   ) : (
                     <Messages metadata={metadata} state={state}>
-                      {metadata}
+                      {metadata.message}
                     </Messages>
                   )}
 
@@ -639,30 +832,38 @@ BmChat.Details = ({
                 <>
                   {type && (type === 'interactive' || type === 'order') ? (
                     <>
-                      {children.type === 'quick_reply' && (
+                      {(children?.message?.type === 'quick_reply' ||
+                        children?.message?.type === 'button') && (
                         <QuickReplyRender
                           rest={rest}
-                          {...children}
+                          {...children.message}
                           type={type}
                           state={state}
+                          connector={children?.connector}
                         />
                       )}
-                      {children.type === 'list' && (
+                      {children.message.type === 'list' && (
                         <ListReplyRender
-                          {...children}
+                          {...children.message}
                           type={type}
                           state={state}
+                          connector={children?.connector}
                         />
                       )}
-                      {children.type === 'product_details' && (
+                      {children.message.type === 'product_details' && (
                         <ProductDetailRender
-                          {...children}
+                          {...children.message}
                           type={type}
                           state={state}
                         />
                       )}
-                      {children.type === 'order' && (
-                        <OrderRender {...children} type={type} state={state} />
+                      {children.message.type === 'order' && (
+                        <OrderRender
+                          {...children.message}
+                          type={type}
+                          state={state}
+                          connector={children?.connector}
+                        />
                       )}
                     </>
                   ) : type === 'pdf' ? (

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

@@ -15,7 +15,7 @@ export const Overlay = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 20;
+  z-index: ${({ zIndex }) => zIndex || 20};
   width: 100vw;
   height: 100vh;
   background-color: ${BmBgGrey45};
@@ -58,7 +58,15 @@ export const ModalWrapper = styled.div`
   overflow-y: auto;
 `;
 
-const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
+const BmModal = ({
+  children,
+  show,
+  size,
+  zIndex,
+  onHide,
+  centered,
+  ...rest
+}) => {
   const [toggle, setToggle] = useState(show);
   useEffect(() => {
     setToggle(show);
@@ -82,7 +90,7 @@ const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
     <>
       {toggle && (
         <>
-          <Overlay />
+          <Overlay zIndex={zIndex} />
           <ModalWrapper showModal={show} centered={centered} onHide={onHide}>
             <Provider value={{ toggle, setToggle, size, show, onHide }}>
               <ModalContent size={size} {...rest}>

package/src/lib/components/Modals/modals.stories.js

@@ -8,12 +8,11 @@ export default {
   component: BmModal,
   title: 'components/Modals',
   argTypes: {
-    // size: {
-    //   options: ["small", "default", "large", "xlarge"],
-    //   control: { type: "select" },
-    //   description: "Size of the Modal (Optional)",
-    //   defaultValue: { summary: "default" },
-    // },
+    size: {
+      control: { type: 'text' },
+      description: 'Controls the width of the modal in Pixels',
+      defaultValue: '500px',
+    },
     closeButton: {
       description:
         'Placed on BmModal.Header component. Displays the close button (X)',
@@ -28,6 +27,11 @@ export default {
     onHide: {
       description: 'Handling the closing of the modal',
     },
+    zIndex: {
+      description:
+        'Controls the stacking order of the modal in an event you have multiple modals',
+      control: { type: 'number' },
+    },
   },
 };