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

package/package.json

@@ -1,69 +1,63 @@
 {
-  "name": "@messenger-box/platform-browser",
-  "version": "0.0.1-alpha.42",
-  "description": "Sample core for higher packages to depend on",
-  "license": "ISC",
-  "author": "CDMBase LLC",
-  "main": "lib/index.js",
-  "typings": "lib/index.d.ts",
-  "scripts": {
-    "build": "yarn build:clean && yarn build:lib",
-    "build:clean": "rimraf lib",
-    "build:lib": "webpack",
-    "build:lib:watch": "yarn build:lib -- --watch",
-    "jest": "./node_modules/.bin/jest",
-    "prepublish": "yarn build",
-    "test": "jest",
-    "test:debug": "npm test -- --runInBand",
-    "test:watch": "npm test -- --watch",
-    "watch": "yarn build:lib:watch"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "json"
-    ],
-    "modulePaths": [
-      "node_modules"
-    ],
-    "roots": [
-      "src"
-    ],
-    "testEnvironment": "node",
-    "testRegex": "/__tests__/.*test*\\.(ts|tsx|js)$",
-    "transform": {
-      "\\.(ts|tsx)$": "<rootDir>/../../node_modules/ts-jest/preprocessor.js"
-    }
-  },
-  "dependencies": {
-    "@messenger-box/core": "0.0.1-alpha.42",
-    "bootstrap": "3.4.1",
-    "css-vars-ponyfill": "2.4.5",
-    "dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#119db968c96643c7106d4d2c965f05b2e251bc83",
-    "emoji-mart": "^3.0.1",
-    "font-awesome": "4.7.0",
-    "jasny-bootstrap": "3.1.3",
-    "key-mirror": "1.0.1",
-    "moment-timezone": "0.5.33",
-    "react-bootstrap": "github:mattermost/react-bootstrap#c6957962364e0818a51bbfd13e89919903b422d6",
-    "react-icons": "^4.2.0",
-    "react-intl": "5.20.4",
-    "react-virtualized-auto-sizer": "1.0.5",
-    "reselect": "4.0.0"
-  },
-  "devDependencies": {
-    "@types/bootstrap": "4.5.0",
-    "@types/moment-timezone": "0.5.30",
-    "@types/react-bootstrap": "0.32.22",
-    "@types/react-virtualized-auto-sizer": "1.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "typescript": {
-    "definition": "lib/index.d.ts"
-  },
-  "gitHead": "d9693199acbe3645190a03f1db346c3b19c09873"
+    "name": "@messenger-box/platform-browser",
+    "version": "0.0.1-alpha.420",
+    "description": "Sample core for higher packages to depend on",
+    "license": "ISC",
+    "author": "CDMBase LLC",
+    "main": "lib/index.js",
+    "typings": "lib/index.d.ts",
+    "scripts": {
+        "build": "yarn build:clean && yarn build:lib",
+        "build:clean": "rimraf lib",
+        "build:lib": "webpack",
+        "build:lib:watch": "yarn build:lib -- --watch",
+        "jest": "./node_modules/.bin/jest",
+        "prepublish": "yarn build",
+        "test": "jest",
+        "test:debug": "npm test -- --runInBand",
+        "test:watch": "npm test -- --watch",
+        "watch": "yarn build:lib:watch"
+    },
+    "dependencies": {
+        "@ant-design/compatible": "^5.1.1",
+        "@chakra-ui/icons": "^1.0.16",
+        "@chakra-ui/react": "~1.6.12",
+        "@container-stack/file-info-client": "^0.0.53",
+        "@emotion/react": "^11",
+        "@emotion/styled": "^11",
+        "@messenger-box/core": "0.0.1-alpha.420",
+        "@messenger-box/platform-client": "0.0.1-alpha.420",
+        "bootstrap": "3.4.1",
+        "css-vars-ponyfill": "2.4.5",
+        "dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#119db968c96643c7106d4d2c965f05b2e251bc83",
+        "emoji-mart": "^3.0.1",
+        "font-awesome": "4.7.0",
+        "framer-motion": "^4",
+        "jasny-bootstrap": "3.1.3",
+        "key-mirror": "1.0.1",
+        "moment-timezone": "0.5.33",
+        "react-bootstrap": "github:mattermost/react-bootstrap#c6957962364e0818a51bbfd13e89919903b422d6",
+        "react-icons": "^4.2.0",
+        "react-intl": "5.20.4",
+        "react-select": "5.2.0",
+        "react-virtualized-auto-sizer": "1.0.5",
+        "reselect": "4.0.0"
+    },
+    "devDependencies": {
+        "@types/bootstrap": "4.5.0",
+        "@types/moment-timezone": "0.5.30",
+        "@types/react-bootstrap": "0.32.22",
+        "@types/react-virtualized-auto-sizer": "1.0.0"
+    },
+    "peerDependencies": {
+        "@apollo/client": "*",
+        "lodash": "*"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "typescript": {
+        "definition": "lib/index.d.ts"
+    },
+    "gitHead": "24214a864c4c5ce31cf68a9dab80e8680f649945"
 }

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Button } from '@chakra-ui/react';
+import { CloseOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { styleSheet } from './style';
+
+export default function InboxDetails({ handleToggle, toggleDrawer }: any) {
+
+    return (
+        <div className={css(styleSheet.detailDrawerStyles)}>
+            <div className="details">
+                <h4>Details</h4>
+                <Button
+                    onClick={handleToggle}
+                    as="a"
+                    className="close-btn"
+                    marginRight='10px'
+                    rightIcon={<CloseOutlined color="black" />}
+                ></Button>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,27 @@
+export const styleSheet = {
+    detailDrawerStyles: {
+        width: '100%',
+        '& .details': {
+            borderBottom: '1px solid #eaeaea',
+            height: '55px',
+            display: 'flex',
+            alignItems: 'center',
+            paddingLeft: '10px',
+            justifyContent: 'space-between',
+            '& h4': {
+                color: 'black',
+                fontSize: '1em',
+                fontWeight: 'bold',
+            },
+            '& .close-btn ': {
+                marginTop: '0',
+                '& svg': {
+                    color: 'black',
+                },
+            },
+            '& .close-btn:hover ': {
+                background: '#eaeaea',
+            },
+        },
+    },
+} as any;

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { Avatar, Button } from '@chakra-ui/react';
+import Moment from 'moment';
+import { css } from '@emotion/css';
+import { inboxData } from '../mock';
+import { styleSheet } from './styles';
+
+type IPropsType = {
+    handleSelectMessgae?: any;
+    user?: [] | any;
+    messageList?: any;
+    currentUser?: any;
+    userId?: any;
+    users?: any;
+};
+
+export default function InboxSidebar({ handleSelectMessgae, user, messageList, userId, users }: IPropsType) {
+    const userList = users?.filter((item) => {
+        return item?.id !== userId;
+    });
+    return (
+        <div className={css(styleSheet.inboxSibarStyles)}>
+            {user?.length > 0 ? (
+                user?.map((item, index) => {
+                    const lastMessage = messageList[messageList?.length - 1];
+                    let memberId;
+                    item?.members.find((ele) => {
+                        if (ele.user !== userId) {
+                            memberId = ele.user;
+                        }
+                    });
+                    const userMember = userList.find((element) => {
+                        return element.id === memberId;
+                    });
+                    return (
+                        <Button
+                            as="a"
+                            border="none"
+                            bg="none"
+                            width="100%"
+                            borderRadius="10px"
+                            _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
+                            className="show-message"
+                            paddingLeft="10px"
+                            onClick={() => handleSelectMessgae(item)}
+                            key={index}
+                        >
+                            <div className="inbox-contacts">
+                                <Avatar size="md" backgroundColor="grey" borderRadius="50%" width="50px" />
+                                <div className="last-message">
+                                    <h5>{userMember?.username}</h5>
+                                    <p>{lastMessage?.message}</p>
+                                </div>
+                            </div>
+                        </Button>
+                    );
+                })
+            ) : (
+                <div className="no-messages">
+                    <h4>You have no unread messages</h4>
+                    <p>When you book a trip or experience, messages from your host will show up here.</p>
+                    <Button
+                        variant="outline"
+                        width="110px"
+                        height="40px"
+                        borderRadius="7px"
+                        bg="none"
+                        border="1px solid rgb(34 34 34)"
+                        color="black"
+                        fontWeight="600"
+                    >
+                        Explore
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// {
+//     cnl.displayName.split(',').length > 1 ?
+//     <span
+//         className="num_style">{cnl.displayName.split(',').length}</span> :
+//     <span className="icon icon__globe"
+//         color="white"><RiAdminFill /></span>
+// }

package/src/components/InboxMessage/InboxSidebar/styles.ts

@@ -0,0 +1,57 @@
+export const styleSheet = {
+    inboxSibarStyles: {
+        width: '100%',
+        marginRight: '20px',
+        cursor: 'pointer',
+        top: '0',
+        bottom: '0',
+        height: '100%',
+        overflow: 'auto',
+        padding: '10px',
+        '& .show-message': {
+            color: 'black',
+            textDecoration: 'none',
+        },
+        '& .username': {
+            color: 'black',
+        },
+        '& .inbox-contacts': {
+            display: 'flex',
+            marginTop: '10px',
+            paddingBottom: '15px',
+            width: '100%',
+            borderBottom: '1px solid #eaeaea',
+            paddingRight: '10px',
+            justifiedContent: 'space-between',
+            '& .last-message': {
+                marginLeft: '10px',
+                lineHeight: '3px',
+            },
+        },
+        '& .no-messages': {
+            textAlign: 'center',
+            margin: '0 auto',
+            padding: '10px',
+            '& h4': {
+                fontSize: '18px',
+                color: 'black',
+            },
+            '& p': {
+                color: 'rgb(113, 113, 113)',
+                fontSize: '16px',
+            },
+            '& .ant-btn': {
+                width: '110px',
+                height: '40px',
+                borderRadius: '7px',
+                border: '1px solid rgb(34 34 34)',
+                color: 'black',
+                fontWeight: '600',
+                '& :hover': {
+                    color: 'black',
+                    borderColor: 'black',
+                },
+            },
+        },
+    },
+} as any;

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

@@ -0,0 +1,159 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { BiImage } from 'react-icons/bi';
+import { BiArchiveIn } from 'react-icons/bi';
+import { BsFillArrowUpCircleFill } from 'react-icons/bs';
+import { css } from '@emotion/css';
+import { Button, InputGroup, InputRightElement, Textarea, Tooltip } from '@chakra-ui/react';
+import { useGetMessagesQuery, useSendMessagesMutation } from '@messenger-box/platform-client';
+import MsgList from '../MessagesList';
+import { styleSheet } from './styles';
+
+export default function Messages({ id, user, userId, currentUser }: any) {
+    const [message, setMessage] = useState('');
+    const [messageList, setMessageList] = useState([]);
+    const [height, setHeight] = useState<any>('40px');
+    const { data, loading, error, refetch } = useGetMessagesQuery({
+        variables: {
+            channelId: id,
+        },
+    });
+    useEffect(() => {
+        if (!loading) {
+            setMessageList(data.messages.data);
+        }
+    }, [loading, id, data?.messages?.data, messageList]);
+    const [sendMsg, { }] = useSendMessagesMutation({
+        context: {},
+    });
+    const messagesEndRef = useRef(null);
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+    const handleEnterBtn = () => {
+        if (message) {
+            sendMsg({
+                variables: {
+                    channelId: id,
+                    content: message,
+                    files: []
+                },
+            }).then(() => {
+                refetch().then((value) => {
+                    setMessageList([...value.data.messages.data]);
+                });
+            });
+            setMessage('');
+        }
+    };
+    const item = user?.find((element) => {
+        return element.id !== userId;
+    });
+    // console.log(textarea)
+    const handleTextareaHeight = (e) => {
+        if (e.key === 'Enter' && message !== '') {
+            setHeight(40 + message.split('\n').length * 10 + 'px');
+        } else {
+            setHeight('40px');
+        }
+    };
+    return (
+        <div className={css(styleSheet.messageListStyles as any)}>
+            <div className="message-container">
+                <div className="message-username">
+                    <h2>{item?.username}</h2>
+                    <div>
+                        <Tooltip
+                            label="Archive"
+                            placement="bottom-end"
+                            backgroundColor="black"
+                            // bg="white"
+                            display="flex"
+                            alignItems="center"
+                            width="60px"
+                            borderRadius="10px"
+                            fontSize="15px"
+                            height="40px"
+                            justifyContent="center"
+                            marginTop="5px"
+                            color="white"
+                            boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
+                            hasArrow={true}
+                        >
+                            <Button
+                                border="none"
+                                bg="none"
+                                width="30px"
+                                height="30px"
+                                onClick={handleEnterBtn}
+                                borderRadius="50%"
+                                _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
+                            >
+                                <BiArchiveIn />
+                            </Button>
+                        </Tooltip>
+                    </div>
+                </div>
+                <div className="message-row">
+                    <MsgList id={id} messageList={messageList} user={user} currentUser={currentUser} />
+                    <div ref={messagesEndRef}></div>
+                    <div className="message-input">
+                        <Tooltip
+                            label="Image"
+                            placement="top"
+                            // bg="white"
+                            display="flex"
+                            alignItems="center"
+                            width="60px"
+                            borderRadius="10px"
+                            fontSize="15px"
+                            height="40px"
+                            justifyContent="center"
+                            marginTop="5px"
+                            color="black"
+                            boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
+                            hasArrow={true}
+                        >
+                            <Button
+                                border="none"
+                                borderRadius="50%"
+                                bg="none"
+                                marginRight="5px"
+                                height="40px"
+                                width="40px"
+                                _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
+                            >
+                                <BiImage color="#464646" style={{ fontSize: '25px' }} />
+                            </Button>
+                        </Tooltip>
+                        <InputGroup size="md">
+                            <Textarea
+                                placeholder="Type your message"
+                                value={message}
+                                height={height}
+                                onKeyUp={handleTextareaHeight}
+                                // height={enter ? message.split('\n').length * 10 + 'px' : '40px'}
+                                onChange={(e) => setMessage(e.target.value)}
+                            />
+                            <InputRightElement>
+                                <Button
+                                    border="none"
+                                    bg="none"
+                                    onClick={handleEnterBtn}
+                                    position="relative"
+                                    right="53px"
+                                    top="6px"
+                                >
+                                    {message !== '' ? (
+                                        <BsFillArrowUpCircleFill color="rgb(34, 34, 34)" style={{ fontSize: '25px' }} />
+                                    ) : (
+                                        ''
+                                    )}
+                                </Button>
+                            </InputRightElement>
+                        </InputGroup>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/InboxMessage/Messages/styles.ts

@@ -0,0 +1,85 @@
+export const styleSheet = {
+    messageListStyles: {
+        width: '100%',
+        padding: '15px 10px 10px 30px',
+        '& .message-container': {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            height: '65vh',
+            alignItems: 'center',
+        },
+        '& .message-row': {
+            marginLeft: '23px',
+            marginRight: '23px',
+            // maxHeight: '100%',
+            width: '60%',
+            overflow: 'auto',
+            '& .message-list ': {
+                // height :'58vh',
+                bottom: '80px',
+                width: '100%',
+                right: '0px',
+                left: '0px',
+                paddingTop: '0px',
+                top: '0px',
+                '& .ant-comment': {
+                    width: '100%',
+                },
+            },
+        },
+        '& .message-username': {
+            width: '100%',
+            display: 'flex',
+            color: 'black',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            '& div': {
+                // display: 'flex',
+                // justifyContent: 'space-evenly',
+                width: '50px',
+                '& svg': {
+                    fontSize: '20px',
+                    color: '#464646',
+                },
+            },
+        },
+        '& .username': {
+            color: 'black',
+        },
+        '& .message': {
+            width: '100%',
+            display: 'flex',
+            color: 'black',
+            justifyContent: 'space-between',
+            '& svg': {
+                color: '#464646',
+            },
+        },
+        '& .message-input': {
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'space-around',
+            marginTop: '30px',
+            '& textarea': {
+                borderRadius: '20px',
+                width: '93%',
+                overflow: 'hidden',
+                // maxHeight: '40px',
+                color: 'black',
+                lineHeight: '22px',
+                fontSize: '16px',
+                resize: 'none',
+                border: '1px solid rgb(221, 221, 221)',
+                padding: '9px 8px',
+            },
+            '& .image-btn': {
+                '& svg': {
+                    fontSize: '25px',
+                    fontWeight: '1px',
+                    color: '#464646',
+                },
+            },
+        },
+    },
+};

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

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Avatar,
+    Box,
+    Text,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalBody,
+    ModalCloseButton,
+    useDisclosure,
+} from '@chakra-ui/react';
+import Moment from 'moment';
+import { AiFillFlag } from 'react-icons/ai';
+import UserModalContent from '../UserModalContent';
+
+export default function MsgList({ messageList, currentUser }: any) {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    return (
+        <>
+            {messageList?.map((element, index) => {
+                // if (message.author.username == user?.username ) {
+                return (
+                    <div className="message-list" key={index}>
+                        <Box display="flex" width="100%">
+                            <Avatar
+                                width="40px"
+                                height="40px"
+                                backgroundColor="grey"
+                                borderRadius="50%"
+                                src={element?.imageUrl ? element?.imageUrl : ''}
+                                marginRight="15px"
+                                onClick={onOpen}
+                            ></Avatar>
+                            <Modal isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
+                                <ModalOverlay />
+                                <ModalContent
+                                    backgroundColor="white"
+                                    width="1036px"
+                                    position="absolute"
+                                    left="530px"
+                                    top="100px"
+                                    height="700px"
+                                    borderRadius="10px"
+                                    boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
+                                >
+                                    <Box
+                                        display="flex"
+                                        justifyContent="space-between"
+                                        borderBottom="1px solid rgb(221, 221, 221)"
+                                        paddingBottom="15px"
+                                        paddingTop="15px"
+                                    >
+                                        <ModalCloseButton
+                                            as="a"
+                                            width="30px"
+                                            marginLeft="10px"
+                                            color="black"
+                                            _hover={{ color: 'black' }}
+                                        />
+                                    </Box>
+                                    <ModalBody>
+                                        <UserModalContent
+                                            username={element?.author?.username}
+                                            image={element.imageUrl ? element.imageUrl : ''}
+                                        />
+                                    </ModalBody>
+                                </ModalContent>
+                            </Modal>
+                            <Box width="100%">
+                                <Text fontSize="20px" color="black">
+                                    {element?.author?.username}
+                                </Text>
+                                <Box d="flex" justifyContent="space-between">
+                                    <Text color="grey">{element?.message}</Text>
+                                    {currentUser !== element?.author?.username ? <AiFillFlag color="black" /> : ''}
+                                </Box>
+                            </Box>
+                        </Box>
+                    </div>
+                );
+                // }
+                // else {
+                //     return (
+                //         <div className='message-list'>
+                //             {element?.sendTo == user.username  ? <Comment author={<p className='username'>{element?.author?.username}</p>} key={index} datetime={Moment().format('HH mm: A')} avatar={<Avatar>{element?.author?.username.charAt(0)}</Avatar>} content={<div className="message"><p>{element.message}</p></div>} /> : '' }
+                //         </div>
+                //     )
+                // }
+            })}
+        </>
+    );
+}