beem-component 2.1.29 → 2.1.31

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

@@ -1,8 +1,14 @@
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Done, DoneAll } from '@material-ui/icons';
 import FilePresentIcon from '@mui/icons-material/FilePresent';
+import PhoneCallbackOutlinedIcon from '@mui/icons-material/PhoneCallbackOutlined';
+import PhoneOutlinedIcon from '@mui/icons-material/PhoneOutlined';
+
+import PhoneMissedIcon from '@mui/icons-material/PhoneMissed';
+
 import DownloadIcon from '@mui/icons-material/Download';
 import styled from 'styled-components';
 import Avatar from 'react-avatar';
@@ -28,6 +34,63 @@ import { BmFeedPostComments } from './FeedPostComments';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
+const formatDuration = (totalSeconds) => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return (
+      `${String(hours).padStart(2, '0')}:` +
+      `${String(minutes).padStart(2, '0')}:` +
+      `${String(seconds).padStart(2, '0')}`
+    );
+  }
+
+  return (
+    `${String(minutes).padStart(2, '0')}:` +
+    `${String(seconds).padStart(2, '0')}`
+  );
+};
+
+const formatCallDuration = (totalSeconds) => {
+  // eslint-disable-next-line no-param-reassign
+  if (!totalSeconds || totalSeconds < 0) totalSeconds = 0;
+
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  let result = '';
+  if (hours > 0) result += `${hours} hr `;
+  result += `${minutes} min ${seconds} sec`;
+
+  return result.trim();
+};
+const useCallDuration = (running, callStartedAt) => {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    if (!running || !callStartedAt) return;
+
+    const startTime = new Date(callStartedAt).getTime();
+
+    const updateSeconds = () => {
+      const now = Date.now();
+      const elapsed = Math.max(Math.floor((now - startTime) / 1000), 0);
+      setSeconds(elapsed);
+    };
+
+    updateSeconds();
+
+    const intervalId = setInterval(updateSeconds, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [running, callStartedAt]);
+
+  return formatDuration(seconds);
+};
+
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
@@ -61,7 +124,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; */}
@@ -214,6 +277,60 @@ const CartContent = styled.div`
   }};
 `;
 
+const CallContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.6rem;
+  align-items: center;
+  justify-content: center;
+  color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+`;
+const CallInfoContainer = styled.div`
+  display: flex;
+  padding-right: 1.5rem;
+  flex-direction: column;
+  gap: 0.3rem;
+  align-items: center;
+  justify-content: center;
+  color: ${({ state }) => {
+    if (state === 'inbound') return `${BmPrimaryBlack} !important`;
+    if (state === 'outbound') return `${BmPrimaryWhite} !important`;
+    return `${BmPrimaryWhite} !important`;
+  }};
+  & > :last-child {
+    color: ${({ state }) => (state === 'inbound' ? '#A6A29F' : '#cde3ddff')};
+  }
+`;
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: max-content;
+  padding: 0.8rem;
+  border: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `1px solid #F3F4F6`;
+      if (state === 'outbound') return `1px solid #5CC1C8`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+
+  border-radius: 50%;
+  background-color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `#F3F4F6`;
+      if (state === 'outbound') return `#5CC1C8`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+`;
 const MessagesSubDetails = styled.div`
   display: flex;
   flex-direction: row;
@@ -433,30 +550,241 @@ 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 ImageRender = ({
+  type,
+  state,
+  rest,
+  isInteractive,
+  connector,
+  caption,
+  originalUrl,
+}) => {
+  const renderers = {
+    dotgo_v3: () => (
+      <>
+        {originalUrl && (
+          <>
+            <BmImageChat state={state} src={originalUrl} {...rest} />
+          </>
+        )}
+
+        {caption && (
+          <>
+            {caption?.text?.split('\n').map((line, idx) => (
+              <p key={`body-line-${idx}`}>
+                {line}
+                <br />
+              </p>
+            ))}
+          </>
+        )}
+      </>
+    ),
+  };
+
+  const FallbackRenderer = () => (
+    <>
+      {originalUrl && (
+        <div>
+          <BmImageChat state={state} src={originalUrl} {...rest} />
+        </div>
+      )}
+
+      {caption && (
+        <>
+          {caption?.split('\n').map((line, idx) => (
+            <div>
+              <p key={`content-line-${idx}`}>
+                {line}
+                <br />
+              </p>
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return (
+    <Messages type={type} state={state} isInteractive={isInteractive} isImg>
+      <ConnectorRenderer />
+    </Messages>
+  );
+};
+const CallRender = ({
+  type,
+  state,
+  isInteractive,
+  connector,
+  message,
+  status,
+  call_started_at,
+}) => {
+  const duration = useCallDuration(status === 'in_progress', call_started_at);
+  const renderers = {
+    yeastar: () => (
+      <>
+        {status === 'in_progress' && (
+          <CallContainer state={state}>
+            <IconContainer state={state}>
+              {state === 'inbound' ? (
+                <PhoneCallbackOutlinedIcon sx={{ color: '#4A5565' }} />
+              ) : (
+                <PhoneOutlinedIcon />
+              )}
+            </IconContainer>
+
+            <CallInfoContainer state={state}>
+              <p>
+                <strong>Voice Call</strong>
+              </p>
+
+              <p>{duration}</p>
+            </CallInfoContainer>
+          </CallContainer>
+        )}
+        {status === 'answered' && (
+          <CallContainer state={state}>
+            <IconContainer state={state}>
+              {state === 'inbound' ? (
+                <PhoneCallbackOutlinedIcon sx={{ color: '#4A5565' }} />
+              ) : (
+                <PhoneOutlinedIcon />
+              )}
+            </IconContainer>
+
+            <CallInfoContainer state={state}>
+              <h4>
+                <strong>Voice Call</strong>
+              </h4>
+
+              <p>{formatCallDuration(message.talk_duration)}</p>
+            </CallInfoContainer>
+          </CallContainer>
+        )}
+        {status === 'no answer' && (
+          <CallContainer state={state}>
+            <IconContainer state={state}>
+              <PhoneMissedIcon sx={{ color: '#e64d4dff' }} />
+            </IconContainer>
+
+            <CallInfoContainer state={state}>
+              <h4>
+                <strong>Voice Call</strong>
+              </h4>
+
+              <p>No answer</p>
+            </CallInfoContainer>
+          </CallContainer>
+        )}
+      </>
+    ),
+  };
+
+  const FallbackRenderer = () => (
+    <>
+      <div>{status}</div>
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return (
+    <Messages
+      type={type}
+      state={state}
+      isInteractive={isInteractive}
+      connector={connector}
+      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 +805,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 +894,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 +928,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>
     </>
   );
@@ -573,6 +1024,7 @@ BmChat.Details = ({
   sessionTimeline,
   feedPostComments,
   agentName,
+
   metadata,
   isInteractive,
   type,
@@ -603,33 +1055,50 @@ 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}
+                    />
+                  ) : metadata.message.type === 'image' ? (
+                    <ImageRender
+                      isInteractive
+                      {...metadata.message}
+                      type={type}
+                      state={state}
+                      connector={metadata?.connector}
+                    />
                   ) : (
                     <Messages metadata={metadata} state={state}>
-                      {metadata}
+                      {metadata.message.text}
                     </Messages>
                   )}
 
@@ -639,30 +1108,54 @@ 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}
+                        />
+                      )}
+                      {children.message.type === 'image' && (
+                        <ImageRender
+                          {...children.message}
+                          type={type}
+                          state={state}
+                          connector={children?.connector}
+                        />
+                      )}
+                      {children.message.type === 'call' && (
+                        <CallRender
+                          {...children.message}
+                          type={type}
+                          state={state}
+                          connector={children?.connector}
+                        />
                       )}
                     </>
                   ) : type === 'pdf' ? (
@@ -727,6 +1220,7 @@ BmChat.Details = ({
       {sessionTimeline && (
         <SessionTimeline message={sessionTimeline.message} {...rest} />
       )}
+
       {sessionDetails && (
         <SessionDetails
           time={sessionDetails.time}