@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Box } from '@chakra-ui/react';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
-
-export default function Popover({ toggleDrawer }: any) {
-    const { t } = useTranslation();
-
-    const content = [
-        {
-            name: t('messenger_box_browser.all_conversations'),
-        },
-        {
-            name: t('messenger_box_browser.archived_conversations'),
-            total: '0',
-        },
-        {
-            name: t('messenger_box_browser.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

@@ -1,27 +0,0 @@
-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

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-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) {
-    const { t } = useTranslation();
-    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="#">{t('messenger_box_browser.update_photo')}</a>
-                </div>
-                <AiOutlineSecurityScan style={{ width: '24px', height: '24px', color: 'black' }} />
-                <div className="identify">
-                    <h3>{t('messenger_box_browser.identity_verification')}</h3>
-                    <Text as="p" color="black">
-                        {t('messenger_box_browser.show_others_you_are_really_you')}
-                    </Text>
-                    <Button className="get-badge-btn" color="black" bg="transparent">
-                        {t('messenger_box_browser.get_the_badge')}
-                    </Button>
-                </div>
-                <div className="user-conformation">
-                    <h3>{t('messenger_box_browser.username_confirmed', { username: username })}</h3>
-                    <div className="email-address">
-                        <FiCheck color="black" />
-                        <Text as="p" color="black">
-                            {t('messenger_box_browser.email_address')}
-                        </Text>
-                    </div>
-                </div>
-            </div>
-            <div className="user-details">
-                <div className="user">
-                    <h2>{t('messenger_box_browser.hi_username', { username: username })}</h2>
-                    <Text as="p">{t('messenger_box_browser.joined_in_date', { date: '2021' })}</Text>
-                    <a>{t('messenger_box_browser.edit_profile')}</a>
-                    <h3>
-                        <BsFillStarFill color="black" />
-                        {t('messenger_box_browser.reviews')}
-                    </h3>
-                </div>
-                <div className="reviews">
-                    <a>{t('messenger_box_browser.reviews_by_you')}</a>
-                </div>
-            </div>
-        </div>
-    );
-}

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

@@ -1,98 +0,0 @@
-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

@@ -1,289 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { Modal } from 'react-bootstrap';
-import Select from 'react-select';
-import { useTranslation } from 'react-i18next';
-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 'common/graphql';
-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 { t } = useTranslation();
-
-    const currentUserAuth0Id = useSelector((state: any) => state.user.authUserId);
-
-    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>{t('messenger_box_browser.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>{t('messenger_box_browser.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>
-                                                {t('messenger_box_browser.use_browse_or_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)}
-                    >
-                        {t('messenger_box_browser.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

@@ -1,53 +0,0 @@
-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,
-
-            },
-        ]
-    },
-]