beem-component 2.0.17 → 2.0.19

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

@@ -8,6 +8,8 @@ import styled from 'styled-components';
 import Avatar from 'react-avatar';
 import ListIcon from '@mui/icons-material/List';
 import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
+import { isUndefined } from 'lodash';
+import { Document, pdfjs, Page } from 'react-pdf';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
@@ -24,6 +26,8 @@ import {
 } from '../../colors';
 import { BmFeedPostComments } from './FeedPostComments';
 
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
@@ -75,13 +79,13 @@ const MessageDetails = styled.div`
 const Messages = styled.div`
   display: flex;
   flex-direction: ${({ type, isInteractive }) => {
-    if (type === 'interactive' || isInteractive) {
+    if (type === 'interactive' || type === 'order' || isInteractive) {
       return 'column';
     }
     return 'row';
   }};
-  align-items: ${({ type }) => {
-    if (type === 'interactive') {
+  align-items: ${({ type, isInteractive }) => {
+    if (type === 'interactive' || type === 'order' || isInteractive) {
       return ' start';
     }
     return 'center';
@@ -159,6 +163,48 @@ const IntButton = styled.button`
   }};
   border-radius: 0.3rem;
 `;
+const OrderBody = styled.button`
+  padding: 1rem;
+  margin: 0.1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  width: 100%;
+  background-color: rgba(217, 217, 217, 0.3);
+  border: none;
+  color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border-radius: 0.3rem;
+  > * {
+    color: ${({ state }) => {
+      if (state) {
+        if (state === 'inbound') return `${BmPrimaryBlack}`;
+        if (state === 'outbound') return `${BmPrimaryWhite}`;
+      }
+      return `${BmPrimaryWhite}`;
+    }};
+  }
+`;
+const CartContent = styled.div`
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+`;
 
 const MessagesSubDetails = styled.div`
   display: flex;
@@ -364,6 +410,87 @@ export const RepliedTextWrapper = styled.div`
   }};
 `;
 
+const QuickReplyRender = ({
+  content,
+  options,
+  type,
+  state,
+  rest,
+  isInteractive,
+}) => {
+  return (
+    <Messages type={type} state={state} isInteractive={isInteractive} isImg>
+      {content?.url && (
+        <BmImageChat state={state} src={content?.url} {...rest} />
+      )}
+
+      <strong>{content?.header}</strong>
+      <p>{content?.text}</p>
+      <small>{content?.caption}</small>
+      {options?.map((button) => (
+        // eslint-disable-next-line react/jsx-key
+        <IntButton state={state}>{button?.title}</IntButton>
+      ))}
+    </Messages>
+  );
+};
+const ProductDetailRender = ({ type, state, header, body, isInteractive }) => {
+  console.log(type, state, header, body);
+  return (
+    <>
+      <Messages type={type} state={state} isInteractive={isInteractive}>
+        <strong>{header?.text}</strong>
+        <p>{body?.text}</p>
+        <IntButton state={state}>
+          <ShoppingCartOutlinedIcon />
+          Catalog
+        </IntButton>
+      </Messages>
+    </>
+  );
+};
+const ListReplyRender = ({
+  title,
+  body,
+  globalButtons,
+  isInteractive,
+  type,
+  state,
+}) => {
+  return (
+    <>
+      <Messages type={type} state={state} isInteractive={isInteractive}>
+        <strong>{title}</strong>
+        <p>{body}</p>
+        <IntButton state={state}>
+          <ListIcon />
+          {globalButtons[0]?.title}
+        </IntButton>
+      </Messages>
+    </>
+  );
+};
+
+const OrderRender = ({ count, amount, type, state }) => {
+  return (
+    <>
+      <Messages type={type} state={state}>
+        <OrderBody state={state}>
+          <CartContent state={state}>
+            <ShoppingCartOutlinedIcon fontSize="small" />
+            <h5>
+              <strong>{count} items</strong>
+            </h5>
+          </CartContent>
+          <div>{amount} (estimated total)</div>
+        </OrderBody>
+
+        <IntButton state={state}>view sent cart</IntButton>
+      </Messages>
+    </>
+  );
+};
+
 BmChat.Details = ({
   children,
   state,
@@ -382,6 +509,7 @@ BmChat.Details = ({
   type,
   ...rest
 }) => {
+  console.log(src);
   return (
     <>
       <Details state={state} {...rest}>
@@ -393,7 +521,7 @@ BmChat.Details = ({
         </MessageState>
         <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
-          {src && (
+          {src && !isUndefined(src) && (
             <BmImageChat
               state={state}
               src={src}
@@ -407,99 +535,75 @@ BmChat.Details = ({
               {metadata ? (
                 <RepliedTextWrapper state={state}>
                   {metadata.type === 'quick_reply' ? (
-                    <Messages
-                      isInteractive={isInteractive}
+                    <QuickReplyRender
+                      isInteractive
+                      rest={rest}
+                      {...metadata}
                       type={type}
                       state={state}
-                      isImg
-                    >
-                      {metadata?.content?.url && (
-                        <BmImageChat
-                          state={state}
-                          src={metadata?.content?.url}
-                          {...rest}
-                        />
-                      )}
-
-                      <strong>{metadata?.content?.header}</strong>
-                      <p>{metadata?.content?.text}</p>
-                      <small>{metadata?.content?.caption}</small>
-                      {metadata?.options?.map((button) => (
-                        // eslint-disable-next-line react/jsx-key
-                        <IntButton state={state}>{button?.title}</IntButton>
-                      ))}
-                    </Messages>
-                  ) : metadata.type === 'quick_reply' ? (
-                    <Messages
-                      isInteractive={isInteractive}
+                    />
+                  ) : metadata.type === 'list' ? (
+                    <ListReplyRender
+                      isInteractive
+                      {...metadata}
+                      type={type}
+                      state={state}
+                    />
+                  ) : metadata.type === 'product_details' ? (
+                    <ProductDetailRender
+                      isInteractive
+                      {...metadata}
                       type={type}
                       state={state}
-                    >
-                      <strong>{metadata?.title}</strong>
-                      <p>{metadata?.body}</p>
-                      <IntButton state={state}>
-                        <ListIcon />
-                        {metadata?.globalButtons[0]?.title}
-                      </IntButton>
-                    </Messages>
+                    />
+                  ) : metadata.type === 'order' ? (
+                    <OrderRender {...metadata} type={type} state={state} />
                   ) : (
-                    <Messages metadata={metadata} state={state}>
-                      {metadata}
-                    </Messages>
+                    <Messages metadata={metadata} state={state} />
                   )}
 
                   {children}
                 </RepliedTextWrapper>
               ) : (
                 <>
-                  {type && type === 'interactive' ? (
+                  {type && (type === 'interactive' || type === 'order') ? (
                     <>
-                      {children.type === 'quick_reply' ? (
-                        <Messages type={type} state={state} isImg>
-                          {children?.content?.url && (
-                            <BmImageChat
-                              state={state}
-                              src={children?.content?.url}
-                              {...rest}
-                            />
-                          )}
-
-                          <strong>{children?.content?.header}</strong>
-                          <p>{children?.content?.text}</p>
-                          <small>{children?.content?.caption}</small>
-                          {children?.options?.map((button) => (
-                            // eslint-disable-next-line react/jsx-key
-                            <IntButton state={state}>{button?.title}</IntButton>
-                          ))}
-                        </Messages>
-                      ) : (
-                        <>
-                          {children.type === 'product_details' ? (
-                            <>
-                              <Messages type={type} state={state}>
-                                <strong>{children?.header?.text}</strong>
-                                <p>{children?.body?.text}</p>
-                                <IntButton state={state}>
-                                  <ShoppingCartOutlinedIcon />
-                                  Catalog
-                                </IntButton>
-                              </Messages>
-                            </>
-                          ) : (
-                            <>
-                              <Messages type={type} state={state}>
-                                <strong>{children?.title}</strong>
-                                <p>{children?.body}</p>
-                                <IntButton state={state}>
-                                  <ListIcon />
-                                  {children?.globalButtons[0]?.title}
-                                </IntButton>
-                              </Messages>
-                            </>
-                          )}
-                        </>
+                      {children.type === 'quick_reply' && (
+                        <QuickReplyRender
+                          rest={rest}
+                          {...children}
+                          type={type}
+                          state={state}
+                        />
+                      )}
+                      {children.type === 'list' && (
+                        <ListReplyRender
+                          {...children}
+                          type={type}
+                          state={state}
+                        />
+                      )}
+                      {children.type === 'product_details' && (
+                        <ProductDetailRender
+                          {...children}
+                          type={type}
+                          state={state}
+                        />
+                      )}
+                      {children.type === 'order' && (
+                        <OrderRender {...children} type={type} state={state} />
                       )}
                     </>
+                  ) : type === 'pdf' ? (
+                    <>
+                      <Document
+                        file={{
+                          url: `${file}`,
+                        }}
+                      >
+                        <Page pageNumber={1} height="250" width="200" />
+                      </Document>
+                    </>
                   ) : (
                     <Messages state={state}>{children}</Messages>
                   )}