@messenger-box/platform-browser 0.0.1-alpha.42 → 0.0.1-alpha.420

package/src/components/InboxMessage/Popover/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Box } from '@chakra-ui/react';
+import { css } from '@emotion/css';
+import { styleSheet } from './style';
+
+export default function Popover({ toggleDrawer }: any) {
+    const content = [
+        {
+            name: 'All Conversations',
+        },
+        {
+            name: 'Archived Conversations',
+            total: '0',
+        },
+        {
+            name: 'Unread Conversations',
+            total: '0',
+        },
+    ];
+    return (
+        <div className={css(styleSheet.customPopoverStyles(toggleDrawer) as any)}>
+            {content?.map((item, index) => {
+                if (!item.total) {
+                    return (
+                        <Box _hover={{ bg: '#edecec' }} className="popover-style" key={index}>
+                            <Button
+                                border="none"
+                                fontSize="15px"
+                                color="#282121"
+                                variant="link"
+                                bg='none'
+                                height= '30px' 
+                            >
+                                {item.name}
+                            </Button>
+                        </Box>
+                    );
+                } else {
+                    return (
+                        <Box _hover={{ bg: '#edecec' }} className="popover-style" key={index}>
+                            <Button
+                                border="none"
+                                fontSize="15px"
+                                color="#282121"
+                                variant="link"
+                                bg='none'
+                                height= '30px'
+                            >
+                                {item.name + `(${item.total})`}
+                            </Button>
+                        </Box>
+                    );
+                }
+            })}
+        </div>
+    );
+}

package/src/components/InboxMessage/Popover/style.ts

@@ -0,0 +1,27 @@
+export const styleSheet = {
+    customPopoverStyles: (toggleDrawer) => ({
+        position: 'absolute',
+        height: '120px',
+        width: '200px',
+        zIndex: '1',
+        background: 'white',
+        boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+        left: `${toggleDrawer ? '145px' : '189px'}`,
+        top: '145px',
+        borderRadius: '10px',
+        '& .popover-style': {
+            width: '100%',
+            marginTop: '7px',
+            transition: '1s ease-out',
+            cursor: 'pointer',
+            '& :hover': {
+                backgroundColor: '#edecec',
+            },
+            '& .ant-btn': {
+                textDecoration: 'none',
+                width: '100%',
+                textAlign: 'start',
+            },
+        },
+    }),
+};

package/src/components/InboxMessage/UserModalContent/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { AiOutlineSecurityScan, AiOutlineUser } from 'react-icons/ai';
+import { FiCheck } from 'react-icons/fi';
+import { BsFillStarFill } from 'react-icons/bs';
+import { Avatar, Button, Text } from '@chakra-ui/react';
+import { css } from "@emotion/css";
+import { styleSheet } from './style';
+
+export default function UserModalContent({ username, imageUrl }: any) {
+    return (
+        <div className={css(styleSheet.UserContentStyles)}>
+            <div className="user-info">
+                <div className="avatar">
+                    <Avatar
+                        size="large"
+                        src={imageUrl !== '' ? imageUrl : ''}
+                        backgroundColor="grey"
+                        width="200px"
+                        height="200px"
+                        borderRadius="50%"
+                        marginBottom="10px"
+                    />
+                    <a href="#">Update photo</a>
+                </div>
+                <AiOutlineSecurityScan style={{ width: '24px', height: '24px', color: 'black' }} />
+                <div className="identify">
+                    <h3>Identity verification</h3>
+                    <Text as="p" color="black">
+                        Show others you’re really you with the identity verification badge.
+                    </Text>
+                    <Button className="get-badge-btn" color="black" bg="transparent">
+                        Get the badge
+                    </Button>
+                </div>
+                <div className="user-conformation">
+                    <h3>{username} confirmed </h3>
+                    <div className="email-address">
+                        <FiCheck color="black" />
+                        <Text as="p" color="black">
+                            Email address
+                        </Text>
+                    </div>
+                </div>
+            </div>
+            <div className="user-details">
+                <div className="user">
+                    <h2>Hi, I'm {username}</h2>
+                    <Text as="p">Joined in 2021</Text>
+                    <a>Edit profile</a>
+                    <h3>
+                        <BsFillStarFill color="black" /> Reviews
+                    </h3>
+                </div>
+                <div className="reviews">
+                    <a>Reviews by you</a>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/InboxMessage/UserModalContent/style.ts

@@ -0,0 +1,98 @@
+export const styleSheet = {
+    UserContentStyles: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding : '20px',
+        '& .user-info': {
+            border: '1px solid rgb(221, 221, 221)',
+            padding: '15px',
+            width: '40%',
+            borderRadius: '10px',
+            '& .avatar': {
+                textAlign: 'center',
+                marginBottom: '20px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                '& .ant-avatar-lg': {
+                    height: '150px',
+                    width: '150px',
+                    '& svg': {
+                        fontSize: '130px',
+                    },
+                },
+                '& a': {
+                    color: 'black',
+                    textDecoration: 'underline',
+                },
+            },
+            '& .identify': {
+                paddingBottom: '30px',
+                borderBottom: '1px solid rgb(221, 221, 221)',
+                '& h3': {
+                    color: '#484848',
+                },
+                '& .get-badge-btn': {
+                    height: '45px',
+                    width: '170px',
+                    borderRadius: '8px',
+                    borderColor: 'rgb(34, 34, 34)',
+                },
+                '& .get-badge-btn:hover ': {
+                    color: 'rgb(34, 34, 34)',
+                },
+            },
+            '& .user-conformation': {
+                marginBottom: '30px',
+                '& h3': {
+                    color: '#484848',
+                },
+                '& .email-address': {
+                    display: 'flex',
+                    '& p': {
+                        fontSize: '16px',
+                        marginLeft: '7px',
+                    },
+                    '& svg': {
+                        fontSize: '23px',
+                    },
+                },
+            },
+        },
+        '& .user-details': {
+            width: '60%',
+            marginLeft: '25px',
+            '& .user': {
+                borderBottom: '1px solid rgb(221, 221, 221)',
+                paddingBottm: '30px',
+                '& h2': {
+                    color: '#484848',
+                },
+                '& p': {
+                    marginBottom: '20px',
+                    color: 'rgb(113, 113, 113)',
+                },
+                '& a': {
+                    color: 'black',
+                    textDecoration: 'underline',
+                },
+                '& h3': {
+                    color: '#484848',
+                    fontSize: '20px',
+                    '& svg': {
+                        width: '16px',
+                        height: '16px',
+                    },
+                },
+            },
+        },
+        '& .reviews': {
+            borderBottom: '1px solid rgb(221, 221, 221)',
+            padding: '30px 0 30px 0',
+            '& a': {
+                color: 'black',
+                textDecoration: 'underline',
+            },
+        },
+    },
+} as any;

package/src/components/InboxMessage/index.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { Modal } from 'react-bootstrap';
+import Select from 'react-select';
+import { VscChromeClose } from 'react-icons/vsc';
+import { AiOutlineMenu } from 'react-icons/ai';
+import { indexOf } from 'lodash-es';
+import { Button, Avatar, Text } from '@chakra-ui/react';
+import { css } from "@emotion/css"
+import {
+    useGetAllUsersQuery,
+    useGetMessagesQuery,
+    useAddDirectChannelMutation,
+    useGetChannelsByUserQuery,
+    useGetAllChannelQuery,
+} from '@messenger-box/platform-client';
+import Messages from './Messages';
+import PopoverComponent from './Popover';
+import InboxDetails from './InboxDetails';
+import InboxSidebar from './InboxSidebar';
+import { stylesheet } from './style';
+
+export default function InboxMessage() {
+    const [id, setId] = useState<number>();
+    const [showMessageSide, setShowMessageSide] = useState<boolean>(false);
+    const [showPopover, setShowPopover] = useState<boolean>(false);
+    const [toggleDrawer, setToggleDrawer] = useState<boolean>(true);
+    const [messageList, setMessageList] = useState([]);
+    const [channel, setChannel] = useState<any>([]);
+    const [user, setUser] = useState<any>();
+    const [showModal, setShowModal] = useState<boolean>(false);
+    const [currentUserId, setCurrentUserId] = useState<any>();
+    const [currentUser, setCurrentUser] = useState<string>('');
+    const [options, setOptions] = useState<any>([]);
+    const [userId, setUserId] = useState<any>();
+    const [selectedValues, setSelectedValues] = useState<any>();
+    const [channels, setChannels] = useState([]);
+    const [selectedChannel, setSelectedChannel] = useState<any>();
+    const { data, loading, error, refetch } = useGetMessagesQuery({
+        variables: {
+            channelId: '61a009978512232154f65a0c',
+        },
+    });
+
+    const currentUserAuth0Id = useSelector((state: any) => state.user.auth0UserId);
+
+    const channelData = useGetChannelsByUserQuery();
+    const allChannels = useGetAllChannelQuery();
+    useEffect(() => {
+        if (!channelData.loading) {
+            let fChannel = [];
+            let diChal = [];
+            if (currentUserId !== '' && !allChannels.loading) {
+                let uc = [];
+                channelData.data.channelsByUser.forEach((u) => uc.push(u.id));
+                let ac = [];
+                allChannels.data.channels.forEach((a) => ac.push(a.id));
+                diChal = ac.filter((t) => !uc.includes(t));
+                allChannels.data.channels.filter((dc) => {
+                    if (diChal.includes(dc.id)) {
+                        dc.members.forEach((m) => {
+                            if (m.user === currentUserId) {
+                                fChannel.push(dc);
+                            }
+                        });
+                    }
+                });
+            }
+            setChannel([
+                ...channelData?.data.channelsByUser.filter(
+                    (chl) =>
+                        chl.type === 'DIRECT' && chl?.displayName !== 'admin (you)' && chl?.displayName !== 'surveybot',
+                ),
+                ...fChannel.filter((chl) => chl.type === 'DIRECT'),
+            ]);
+        }
+    }, [loading, channelData, currentUserId]);
+    // console.log(allChannels)
+    console.log(channel)
+
+    const handleSelectMessgae = (item: any) => {
+        setShowMessageSide(true);
+        setId(item?.id);
+        item.members.map((e) => {
+            return setUserId(e.user);
+        });
+        setSelectedChannel(item);
+        setToggleDrawer(false);
+    };
+    const usersRes = useGetAllUsersQuery();
+    useEffect(() => {
+        if (!usersRes.loading) {
+            setUser(usersRes.data.getUsers);
+            let tempOpt = [];
+            usersRes.data.getUsers?.map((i) => {
+                if (i.alias[0] !== currentUserAuth0Id) {
+                    tempOpt.push({
+                        value: { username: `${i.username}`, uid: `${i.id}` },
+                        label: (
+                            <div style={{ cursor: 'pointer' }}>
+                                <Avatar width="40px" backgroundColor="grey" size="42" borderRadius="50%"></Avatar>
+                                <Text color="black">{i.username}</Text>
+                            </div>
+                        ),
+                    });
+                } else {
+                    setCurrentUserId(i.id);
+                    setCurrentUser(i.username);
+                }
+                setOptions(tempOpt);
+            });
+        }
+    }, [usersRes.loading, usersRes.data]);
+    console.log(user)
+    useEffect(() => {
+        if (!loading) {
+            setMessageList(data.messages.data);
+        }
+    });
+    const handleToggle = () => {
+        setToggleDrawer(false);
+    };
+    const handleClose = () => {
+        setShowModal(false);
+    };
+    const handleSelect = (selectedOption) => {
+        setSelectedValues(selectedOption);
+    };
+    const [createDirectChannel, addedDirectChannel] = useAddDirectChannelMutation({
+        context: { headers: {} },
+    });
+    useEffect(() => {
+        if (!addedDirectChannel.loading && addedDirectChannel.data) {
+            setSelectedChannel(addedDirectChannel.data.createDirectChannel);
+        }
+    });
+    const handleGo = () => {
+        if (selectedValues) {
+            let uids = [];
+            let dName = '';
+            console.log(selectedChannel?.value);
+            if (selectedValues.length > 1) {
+                selectedValues.forEach((i) => {
+                    uids.push(i.value.uid);
+                    dName += i.value.username;
+                    if (indexOf(selectedValues, i) + 1 !== selectedValues.length) {
+                        dName += ',';
+                    }
+                });
+            } else {
+                uids.push(selectedValues[0].value.uid);
+                dName = selectedValues[0].value.username;
+            }
+            let channl;
+            channel.forEach((i) => {
+                if (i?.displayName == dName) {
+                    channl = i.members.find((e) => {
+                        return e.user == uids;
+                    });
+                }
+            });
+            if (channl?.user !== uids[0]) {
+                createDirectChannel({
+                    variables: {
+                        receiver: uids,
+                        displayName: dName,
+                    },
+                }).then((res) => {
+                    setSelectedChannel(res.data.createDirectChannel);
+                    channelData.refetch().then((value) => {
+                        setChannels(value.data.channelsByUser);
+                        setSelectedValues([]);
+                    });
+                });
+            }
+            handleClose();
+        }
+    };
+    return (
+        <div className={css(stylesheet.inboxStyles)}>
+            <div className={toggleDrawer ? 'inbox-sidebar-active' : 'inbox-sidebar'}>
+                <div className="conversations">
+                    <div className="header-section">
+                        <div className="allmessage-header">
+                            <h3>Messages</h3>
+                            <Button
+                                as="a"
+                                borderRadius="50%"
+                                width="30px"
+                                height="30px"
+                                _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
+                                onClick={() => {
+                                    setShowPopover(!showPopover);
+                                }}
+                            >
+                                <AiOutlineMenu style={{ fontSize: '20px', color: 'black' }} />
+                            </Button>
+                            {showPopover ? <PopoverComponent toggleDrawer={toggleDrawer} /> : ''}
+                        </div>
+                    </div>
+                    <InboxSidebar
+                        userId={currentUserId}
+                        user={channel}
+                        handleSelectMessgae={handleSelectMessgae}
+                        currentUser={currentUser}
+                        messageList={messageList}
+                        users={user}
+                    />
+                </div>
+                <div className="add-conversations">
+                    <Modal show={showModal} onHide={handleClose}>
+                        <Modal.Header
+                            style={{
+                                backgroundColor: '#2b5ebf',
+                                color: 'white',
+                                display: 'flex',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <Modal.Title>Add Conversations</Modal.Title>
+                            <VscChromeClose
+                                onClick={() => handleClose()}
+                                fontSize="16px"
+                                style={{ marginLeft: 'auto', cursor: 'pointer' }}
+                            />
+                        </Modal.Header>
+                        <Modal.Body>
+                            <div className={css(stylesheet.modelStyle as any)}>
+                                <div className="root_modal">
+                                    <div className="root_first">
+                                        <div className="search_box">
+                                            <Select
+                                                className="temp"
+                                                value={selectedValues?.value}
+                                                onChange={handleSelect}
+                                                components={{
+                                                    DropdownIndicator: () => null,
+                                                    IndicatorSeparator: () => null,
+                                                }}
+                                                autoFocus={true}
+                                                options={options}
+                                                isMulti={true}
+                                                menuIsOpen={true}
+                                            />
+                                            <button onClick={handleGo}>Go</button>
+                                        </div>
+                                        <div className="mid_line">
+                                            <p>
+                                                Use ↑↓ to browse, ↵ to select.<span> </span>
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </Modal.Body>
+                    </Modal>
+                    <Button
+                        size="large"
+                        className="conversation-btn"
+                        backgroundColor="#1890ff"
+                        height="40px"
+                        borderRadius="3px"
+                        border="none"
+                        color="white"
+                        variant="outline"
+                        fontSize="20px"
+                        onClick={() => setShowModal(true)}
+                    >
+                        Add Conversations
+                    </Button>
+                </div>
+            </div>
+            <div className={`msg-container${toggleDrawer ? '-active' : ''}`}>
+                <div className="border"></div>
+                {showMessageSide == true ? (
+                    <Messages id={id} user={user} userId={userId} currentUser={currentUser} />
+                ) : (
+                    ''
+                )}
+            </div>
+            <div className={toggleDrawer ? 'inbox-details' : 'inbox-details-active'}>
+                <InboxDetails handleToggle={handleToggle} toggleDrawer={toggleDrawer} />
+            </div>
+        </div>
+    );
+}

package/src/components/InboxMessage/mock.ts

@@ -0,0 +1,53 @@
+export const inboxData = [
+    {
+        username: 'Alex',
+        id: Math.random(),
+        isLoggedIn: true,
+        messages: [
+            {
+                message: 'hello',
+                id: Math.random(),
+                isLoggedIn: true,
+            },
+        ]
+    },
+    {
+        username: 'Tim',
+        id: Math.random(),
+        isLoggedIn: false,
+        messages: [
+            {
+                message: 'hello',
+                id: Math.random(),
+                isLoggedIn: false,
+
+            },
+        ]
+    },
+    {
+        username: 'Jack',
+        id: Math.random(),
+        isLoggedIn: false,
+        messages: [
+            {
+                message: 'hello',
+                id: Math.random(),
+                isLoggedIn: false,
+
+            },
+        ]
+    },
+    {
+        username: 'Conner',
+        id: Math.random(),
+        isLoggedIn: false,
+        messages: [
+            {
+                message: 'hi',
+                id: Math.random(),
+                isLogged: false,
+
+            },
+        ]
+    },
+]