isometrik-chat 0.1.0

package/src/view/component/ContactInfo/index.js

@@ -0,0 +1,543 @@
+import React, { useEffect, useState } from "react";
+import { Avatar } from "@mui/material";
+import "./styles.css";
+import SearchBar from "../SeachBar";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import MailIcon from "@mui/icons-material/Mail";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import PropTypes from "prop-types";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import MediaList from "../../component/mediaList/index";
+import watsappbg from "../../../assets/images/watsappbg.png";
+import darkbg from "../../../assets/images/drkbg.jpg";
+import {
+  BELL_ICON,
+  BLOCKICON,
+  CLOSE_ICON,
+  DELETEICON,
+  DISAPEAR_ICON,
+  LOCKICON,
+  RIGHT_ARROW,
+  ROUND_STAR,
+  THUMB_DOWN,
+} from "../../../utils/global";
+import ImageComponent from "../../../components/ImageComponent";
+import { Brightness1 } from "@mui/icons-material";
+import { decodeChatBody, getMessageDateSorted, getTimeWithMeridian, getUserStatus } from "../../../lib/helpers";
+import client from "../../../utils/chatSdk";
+import styled ,{css} from "styled-components";
+import MediaDocs from "../../../components/MediaDocs";
+import Icon from "../../../components/Icon";
+import { getCookie } from "../../../lib/session";
+import { mobile} from "../../../utils/media";
+import MediaDocumentContainer from "../../../components/MediaDocumentContainer";
+// import Box from '@mui/material/Box';
+
+
+const MessageInfo = styled.div`
+  margin: 20px;
+  max-width: auto%;
+  border-radius: 7.5px;
+  --wt-bg-opacity: 1;
+  padding: 0.2rem 0.4rem;
+  background-color: var(--sender_chatbg);
+  word-break: break-word;
+  text-align: end;
+  width: fit-content;
+`;
+
+const MessageInfoBody = styled.div`
+  max-height: 10rem;
+  overflow: scroll;
+  color: var(--black);
+`;
+
+const ReadStatus = styled.div`
+  padding: 20px 40px;
+  border-bottom: 1px solid var(--border_color);
+  display: flex;
+  flex-direction: column;
+  color: var(--black);
+`;
+
+const DeliveredStatus = styled.div`
+  border-bottom: 1px solid var(--border_color);
+  display: flex;
+  flex-direction: column;
+  padding: 20px 40px;
+  color: var(--black);
+`;
+
+const StatusMode = styled.div`
+  background-color: var(--primary-white);
+`;
+
+const ShowSearchChatMessage = styled.div`
+  position: relative;
+  padding: 0 1rem;
+`;
+
+const SearchChatMessageText = styled.p`
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--profile-color);
+  margin-bottom: 0;
+`;
+
+const SearchChatMessageTime = styled.h5`
+    color: var(--chat-msg-text);
+    font-size: 14px;
+    margin-top: 1rem;
+    margin-bottom: 0;
+    text-align: ${props => props.textCenter ? 'center' : 'left'};
+    padding: ${props => props.customPadding ? '2rem 0' : ''};
+`;
+
+const SearchChatMessageTextContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+`;
+
+const MediaDrawer = styled.div`
+  width:70vw;
+${mobile(css`
+  width:100vw;
+`)}
+`
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+
+function ContactInfo(props) {
+  const { sidebarChatItem, setShowProfilePicture, setDeleteChatModal, setUserBlockModal, userConversationDetail, theme, Messages, messageInfo, conversationId, messageChat,mediaDocs, debounceSearchMessages, searchedMessageArray, searchMessageLoaderStatus,handleClosee,handler,
+    handleImgVidClick, enteredSearchQuery } = props;
+
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+  const [value, setValue] = React.useState(0);
+  const [totalMediaFiles, setTotalMediaFiles] = useState();
+  const [readTime, setReadTime] = useState();
+  const [deliveryTime, setDeliveryTime] = useState();
+  const userId = getCookie("userId");
+
+  useEffect(() => {
+    if (!messageChat) return;
+    const payload = { conversationId: conversationId, messageId: messageChat?.messageId, limit: 20, skip: 0 };
+
+    client.message.getStatusDelivery(payload).then((res) => {
+      const DeliveredTime = getTimeWithMeridian(new Date(res?.users && res?.users[0]?.timestamp));
+      setDeliveryTime(DeliveredTime)
+      setDeliveryTime(res?.users && res?.users[0]?.timestamp);
+    }).catch((error) => {
+      console.log("error message ", error);
+    })
+    client.message.getStatusRead(payload).then((res) => {
+      const ReadedTime = getTimeWithMeridian(new Date(res?.users && res?.users[0]?.timestamp));
+      setReadTime(ReadedTime);
+      setDeliveryTime(res?.users && res?.users[0]?.timestamp);
+    }).catch((error) => {
+      console.log("error while fetching message status", error);
+    });
+  }, [messageChat]);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const toggleDrawer = (anchor, open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+
+    setState({ ...state, [anchor]: open });
+  };
+
+  const list = (anchor) => (
+    <Box
+      sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : 250 }}
+      role="presentation"
+      onClick={toggleDrawer(anchor, false)}
+      onKeyDown={toggleDrawer(anchor, false)}
+    >
+      <List>
+        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {["All mail", "Trash", "Spam"].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+  const closeHandler = () => {
+    handleClosee();
+    handler();
+  };
+
+  const avatarClickHandler = () => {
+    setShowProfilePicture({ showProfile: true, userName: sidebarChatItem?.opponentDetails?.userName, userImageSrc: sidebarChatItem?.opponentDetails?.userProfileImageUrl, theme: props?.theme })
+  }
+
+
+  return (
+    <>
+      {props?.slideShow || props?.searchShow || messageInfo ? (
+        <div className="contact_container">
+          <div
+            className={
+              props?.slideShow || props?.searchShow || messageInfo
+                ? "contact_header header"
+                : "contact_header"
+            }
+          >
+            <ImageComponent
+              onClick={closeHandler}
+              src={CLOSE_ICON}
+              // style={{height:"18px", width:"18px"}}
+              className={props?.theme ? "darkicons" : "lighticons"}
+            />
+            <p>{`${props?.slideShow ? "Contact info" : ""} ${props?.searchShow ? "Search Messages" : ""} ${messageInfo ? "Message Info" : ""}`}</p>
+          </div>
+          {props?.slideShow ? (
+            <div>
+              <div className={props?.slideShow ? "showMe" : ""}>
+                <div className="contact_profile">
+                  <Avatar
+                    className="profile_image"
+                    src={sidebarChatItem?.opponentDetails?.userProfileImageUrl}
+                    onClick={() => avatarClickHandler(sidebarChatItem)}
+                  ></Avatar>
+                </div>
+                <div className="contact_name">
+                  <div>
+                    {props?.sidebarChatItem?.name}
+                    <p className="text_Color d-flex justify-content-center">
+                      {sidebarChatItem?.opponentDetails?.userName}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div>
+                {["right"].map((anchor) => (
+                  <React.Fragment key={anchor}>
+                    <div
+                      className={
+                        props?.slideShow
+                          ? "contactsocialInfo showMe msgFont text_Color pointer"
+                          : "contactsocialInfo pointer"
+                      }
+                      onClick={toggleDrawer(anchor, true)}
+                    >
+                      <span>
+                        Media And docs -  </span>
+                      <div>
+                        {/* {["right"].map((anchor) => (
+                      <React.Fragment key={anchor}> */}
+                        {/* <Button onClick={toggleDrawer(anchor, true)}>  */}
+                        <span
+                          data-testid="chevron-right-alt"
+                          data-icon="chevron-right-alt"
+                          class="aft2yglh pointer"
+                        // onClick={mediaHandler}
+
+                        > <span style={{ marginRight: "10px" }}>{mediaDocs?.length}</span>
+                          <ImageComponent
+                            style={{ filter: "brightness(0.5)" }}
+                            src={RIGHT_ARROW}
+                            className={
+                              props?.theme
+                                ? "dark_footer_icon"
+                                : "light_footer_icon"
+                            }
+                          />
+                        </span>
+
+
+                        <Drawer
+                          anchor={anchor}
+                          open={state[anchor]}
+                          onClose={toggleDrawer(anchor, false)}
+                          // hideBackdrop
+                        >
+                          <MediaDrawer className="media_Container">
+                            <div className="media_header">
+                              <KeyboardBackspaceIcon
+                                className="pointer icons keyboard"
+                                onClick={(e) => {
+                                  toggleDrawer(anchor, false)(e);
+                                  e.stopPropagation();
+                                }}
+                              />
+
+                              <div className="bg-white ss">
+                                <Box sx={{ width: "100%", marginTop: "50px" }}>
+                                  <Box
+                                    sx={{
+                                      borderBottom: 1,
+                                      borderColor: "divider",
+                                    }}
+                                  >
+                                    <Tabs
+                                      value={value}
+                                      onChange={handleChange}
+                                      aria-label="basic tabs example"
+                                      sx={{ width: "100%" }}
+                                    >
+                                      <Tab label="Media" {...a11yProps(0)} />
+                                      <Tab label="Docs" {...a11yProps(1)} />
+                                    </Tabs>
+                                  </Box>
+                                  <TabPanel value={value} index={0}>
+                                    <MediaDocs handleImgVidClick={handleImgVidClick} mediaDocs={mediaDocs} />
+                                  </TabPanel>
+                                  <TabPanel value={value} index={1}>
+                                    <MediaDocumentContainer mediaDocs={mediaDocs} />
+                                  </TabPanel>
+                                  <TabPanel value={value} index={2}>
+                                    No Link Items
+                                  </TabPanel>
+                                </Box>
+                              </div>
+                            </div>
+                          </MediaDrawer>
+                        </Drawer>
+
+                      </div>
+                    </div>
+                    <div>
+                      <MediaList message={Messages} conversationId={conversationId} setTotalMediaFiles={setTotalMediaFiles} totalMediaFiles={totalMediaFiles} />
+                    </div>
+                  </React.Fragment>
+                ))}
+
+                <div
+                  className={
+                    props?.slideShow ? "text textt showMe" : "text textt"
+                  }
+                >
+                  {/* <p>
+                    <ImageComponent
+                      src={ROUND_STAR}
+                      className={
+                       props?.theme
+                          ? "darkicons"
+                          : "lighticons"
+                      }
+                    />
+                    <span>Starred Message</span>
+                    <ImageComponent
+                      src={RIGHT_ARROW}
+                      className={
+                      props?.theme
+                          ? "darkicons"
+                          : "lighticons"
+                      }
+                    />
+                  </p> */}
+
+                  {/* <p>
+                    <ImageComponent
+                      src={DISAPEAR_ICON}
+                      className={
+                      props?.theme
+                          ? "darkicons"
+                          : "lighticons"
+                      }
+                    />
+                    <span>Disappearing Messages </span>
+                    <ImageComponent
+                      src={RIGHT_ARROW}
+                      className={
+                       props?.theme
+                          ? "darkicons"
+                          : "lighticons"
+                      }
+                    />
+                  </p> */}
+                  {/* <p className="d-block pd-0">
+                    <ImageComponent
+                      src={LOCKICON}
+                      className={
+                      props?.theme
+                          ? "darkicons"
+                          : "lighticons"
+                      }
+                    />
+                    <span>Encryption </span>
+
+                    <p className="text_Color txt">
+                      messages are end to end encrypted Please cick to verify
+                    </p>
+                  </p> */}
+
+
+                  <p className="pointer" onClick={() => setUserBlockModal(true)}>
+                    <ImageComponent src={BLOCKICON} className={`icons svgg ${userConversationDetail?.messagingDisabled ? 'user_unblock' : ''}`} />
+                    <span className={`${userConversationDetail?.messagingDisabled ? 'user_unblock' : ''} pointer btnn`}>
+                      {userConversationDetail?.messagingDisabled ? 'Unblock' : 'Block'}  {userConversationDetail?.opponentDetails?.userName}
+
+                    </span>
+                  </p>
+                  {/* <p>
+                    <ImageComponent src={THUMB_DOWN} className="icons svgg" />
+                    <span className="pointer btnn">
+                      Reporterd To {props?.sidebarChatItem?.name}{" "}
+                    </span>
+                  </p> */}
+                  <p onClick={() => setDeleteChatModal(true)} className="pointer pb-4">
+                    <ImageComponent src={DELETEICON} className="icons" />
+                    <span className="pointer btnn">Delete Chat </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+
+          {props?.searchShow ? (
+            <div className="contact_container">
+              <div>
+                <div className="contact_profile">
+                  <SearchBar userSearchEnteredData={debounceSearchMessages} searchShow={props?.searchShow} theme={theme}  />
+                </div>
+                <ShowSearchChatMessage>
+                  {
+                    searchMessageLoaderStatus ? <SearchChatMessageTime textCenter customPadding>{'Looking for messages.....'}</SearchChatMessageTime> :
+                      searchedMessageArray?.length > 0 ?
+                        searchedMessageArray.map(data => (
+                          <>
+                            <SearchChatMessageTime>{getMessageDateSorted(data?.sentAt)}</SearchChatMessageTime>
+                            <SearchChatMessageTextContainer>
+                              {(data.senderInfo?.userId || data?.senderId) === userId && (
+                                <Icon style={{ marginLeft: "2px" }} id={'singleTick'}
+                                />
+                              )}
+                              <SearchChatMessageText key={data.messageId}>{decodeChatBody(data.body)}</SearchChatMessageText>
+                            </SearchChatMessageTextContainer>
+                          </>
+                        )) :
+                        enteredSearchQuery?.length > 0 ?
+                          <SearchChatMessageTime textCenter customPadding>{'No messages found'}</SearchChatMessageTime> :
+                          <div className="bg-white">
+                            <p className="text_Color text-align-center searchmsg text-center">
+                              Search for message with {sidebarChatItem?.opponentDetails?.userName}{" "}
+                            </p>
+                          </div>
+                  }
+                </ShowSearchChatMessage>
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+
+          {messageInfo ? (
+            <div className="contact_container" style={{ marginTop: "66px", backgroundColor: "var(--gray_color)" }}>
+              <MessageInfoBody style={{
+                background: `url(${props?.theme ? darkbg : watsappbg})`,
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "cover",
+              }}>
+                <MessageInfo>
+                  {messageChat?.attachments && messageChat?.attachments?.[0]?.mediaUrl.length > 0 ? <ImageComponent style={{ width: "21rem", height: "11rem" }}
+                    src={messageChat?.attachments[0]?.mediaUrl}
+                  /> : decodeChatBody(messageChat?.body)}
+                </MessageInfo>
+              </MessageInfoBody>
+              <StatusMode>
+                <ReadStatus>
+                  <span>Read</span>
+                  <span>{readTime ? readTime : "-"}</span>
+                </ReadStatus>
+                <DeliveredStatus>
+                  <span>Delivered </span>
+                  <span>{deliveryTime ? readTime : "-"}</span>
+                </DeliveredStatus> </StatusMode>
+            </div>
+
+          ) : (
+            ""
+          )}
+        </div>
+      ) : (
+        ""
+      )}
+      <style jsx>{`
+        @media (max-width: 48rem) {
+          .contact_container {
+            max-width: 100vw;
+          }
+        }
+      `}</style>
+    </>
+  );
+}
+
+export default ContactInfo;