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

package/src/components/messenger/more_action/style.ts

@@ -1,45 +0,0 @@
-export const styleSheet = {
-    MoreActionStyle: {
-        position: 'absolute',
-        width: '200px',
-        height: '210px',
-        right: '90px',
-        bottom: '30px',
-        backgroundColor: '#fff',
-        border: '1px solid rgba(61 , 60 ,64 , 0.23)',
-        borderRadius: '5px',
-        '& ul': {
-            padding: '4px 0px',
-        },
-        '& ul li ': {
-            fontSize: '17px',
-            marginBottom: '8px',
-            marginRight: '5px',
-            textAlign: 'left',
-            width: '100%',
-            height: '26px',
-            transition: '0.1s ease-in',
-            listStyleType: 'none',
-        },
-        '& ul li a': {
-            color: '#858487',
-            marginLeft: '15px',
-            textDecoration: 'none'
-        },
-        '& ul li:hover': {
-            backgroundColor: 'rgba(61 , 60 ,64 , 0.12)'
-        },
-        '& .edit-btn': {
-            borderTop: '1px solid rgba(61 , 60 ,64 , 0.23) '
-        },
-        '& .delete-btn a': {
-            color: '#f74343',
-        },
-        '& .delete-btn:hover': {
-            backgroundColor: '#f74343',
-        },
-        '& .delete-btn:hover a': {
-            color: '#fff'
-        },
-    }
-} as any

package/src/components/messenger/postMessage/postMessage.tsx

@@ -1,28 +0,0 @@
-import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Col, Input } from 'antd';
-import { AiOutlinePaperClip } from '@react-icons/all-files/ai/AiOutlinePaperClip';
-import { AiOutlineSmile } from '@react-icons/all-files/ai/AiOutlineSmile';
-import { css } from '@emotion/css';
-import { IMessageList } from './../types/message';
-import { messagesData } from './../mock';
-import { styleSheet } from './style';
-
-export const PostMessage = (props) => {
-    const { handleEnterButton, enterValue } = props;
-    const { t } = useTranslation();
-    return (
-        <div className={css(styleSheet.postmessageStyles)}>
-            <Input
-                value={enterValue}
-                onPressEnter={(e) => handleEnterButton(e)}
-                placeholder={t('messenger_box_browser.please_enter')}
-                style={{ width: '100%' }}
-            />
-            <div className="icon">
-                <AiOutlinePaperClip />
-                <AiOutlineSmile />
-            </div>
-        </div>
-    );
-};

package/src/components/messenger/postMessage/style.ts

@@ -1,24 +0,0 @@
-export const styleSheet = {
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    postmessageStyles: {
-        display: 'inharit',
-        position: 'relative',
-        '& .message--box-outer': {
-            // position: 'fixed',
-            marginBottom: '10%',
-            width: '100%',
-        },
-        '& .icon': {
-            position: 'absolute',
-            top: '9px',
-            right: '23px',
-            cursor: 'pointer',
-        },
-        '& .icon .anticon': {
-            marginRight: '8px',
-        },
-        '& .icon .anticon svg path': {
-            fill: 'grey',
-        },
-    },
-} as any;

package/src/components/messenger/sidebarThreadList/index.tsx

@@ -1,201 +0,0 @@
-import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Col, Row, Divider } from 'antd';
-import { Popover, Avatar } from 'antd';
-import { Comment } from '@ant-design/compatible';
-import { useSelector } from 'react-redux';
-import { IoBookmarkOutline } from 'react-icons/io5';
-import { useGetUserAccountQuery } from 'common/graphql';
-import { BiDotsHorizontalRounded, BiPaperPlane, BiEdit } from 'react-icons/bi';
-import { MdOutlineEmojiEmotions } from 'react-icons/md';
-import { FaRobot } from 'react-icons/fa';
-import { css } from '@emotion/css';
-import Moment from 'moment';
-import { IMessageReplyList } from '../types/message';
-import { styleSheet } from '../threadSidebar/style';
-
-interface IProps {
-    userMessagesList?: IMessageReplyList[];
-}
-
-interface SyntheticEvent<T> {
-    currentTarget: EventTarget & T;
-}
-
-export const SidebarThreadList: FC<IProps> = ({ userMessagesList }) => {
-    const userId = useSelector<any>((state) => state.user.authUserId);
-    const { data: { getUserAccount } = {} } = useGetUserAccountQuery({
-        //@ts-ignore
-        variables: { userId },
-        skip: !userId,
-    });
-    const [showHoverModal, setShowHoverModal] = useState<boolean>(false);
-    const { t } = useTranslation();
-    var time = '10:45 PM';
-
-    return (
-        <Row gutter={[24, 6]} className={css(styleSheet.costumThreadStyles)}>
-            {userMessagesList?.map((items: any, index: any) => {
-                if (!items?.loginUser) {
-                    return (
-                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles)}>
-                            <div className="btn-hover">
-                                <div className="hover_btns">
-                                    <button>
-                                        <BiDotsHorizontalRounded fontSize="16px" fill="gray" />
-                                    </button>
-                                    <button>
-                                        <MdOutlineEmojiEmotions fontSize="16px" fill="gray" />
-                                    </button>
-                                    <button>
-                                        <IoBookmarkOutline fontSize="16px" color="gray" />
-                                    </button>
-                                </div>
-                            </div>
-                            <Comment
-                                className="chat-cmt"
-                                // actions={actions}
-                                author={<a>{t('messenger_box_browser.slack_bot')}</a>}
-                                avatar={
-                                    <Popover
-                                        placement="right"
-                                        title={<a>{'@' + 'surveybot'}</a>}
-                                        content={
-                                            <div
-                                                style={{
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    // alignItems: 'center',
-                                                }}
-                                            >
-                                                <Avatar
-                                                    size={{ xxl: 100 }}
-                                                    style={{
-                                                        backgroundColor: 'black',
-                                                        marginBottom: '15px',
-                                                        marginLeft: '25px',
-                                                        alignItems: 'center',
-                                                    }}
-                                                >
-                                                    <FaRobot
-                                                        style={{ marginTop: '22px' }}
-                                                        fontSize="50px"
-                                                        fill="white"
-                                                    />
-                                                </Avatar>
-                                                <p style={{ fontWeight: 'bold' }}>
-                                                    {t('messenger_box_browser.surveybot')}
-                                                </p>
-                                                <p>{t('messenger_box_browser.survey_bot_collects_your')}</p>
-                                                <div>
-                                                    <h5>
-                                                        {t('messenger_box_browser.local_time')}{' '}
-                                                        <span>{Moment().format('HH:mm A')}</span>
-                                                    </h5>
-                                                </div>
-                                                <a className="icon-popover">
-                                                    <BiPaperPlane style={{ fontSize: '15px', marginRight: '3px' }} />
-                                                    {t('messenger_box_browser.send_message')}
-                                                </a>
-                                            </div>
-                                        }
-                                        trigger="click"
-                                    >
-                                        <Avatar style={{ backgroundColor: 'black' }}>
-                                            <FaRobot style={{ marginTop: '4px' }} fontSize="20px" fill="white" />
-                                        </Avatar>
-                                    </Popover>
-                                }
-                                content={<p>{items?.message}</p>}
-                                datetime={
-                                    // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                                    <div>
-                                        {/*<span>{Moment().fromNow()}</span>*/}
-                                        <span>{Moment().format('HH:mm A')}</span>
-                                    </div>
-                                    /*</Tooltip>*/
-                                }
-                            />
-                        </Col>
-                    );
-                } else {
-                    return (
-                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles)}>
-                            <div className="btn-hover">
-                                <div className="hover_btns">
-                                    <button>
-                                        <BiDotsHorizontalRounded fontSize="16px" fill="gray" />
-                                    </button>
-                                    <button>
-                                        <MdOutlineEmojiEmotions fontSize="16px" fill="gray" />
-                                    </button>
-                                    <button>
-                                        <IoBookmarkOutline fontSize="16px" color="gray" />
-                                    </button>
-                                </div>
-                            </div>
-                            <Comment
-                                author={<a>{getUserAccount.username}</a>}
-                                avatar={
-                                    <Popover
-                                        placement="right"
-                                        title={<a>{'@' + getUserAccount.username}</a>}
-                                        content={
-                                            <div
-                                                style={{
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    alignItems: 'center',
-                                                }}
-                                            >
-                                                <Avatar
-                                                    size={{ xxl: 100 }}
-                                                    style={{
-                                                        backgroundColor: 'blue',
-                                                        textTransform: 'uppercase',
-                                                        fontSize: '50px',
-                                                        marginBottom: '15px',
-                                                    }}
-                                                >
-                                                    {getUserAccount?.username.substring(0, 1)}
-                                                </Avatar>
-                                                <a>{getUserAccount?.email}</a>
-                                                <div>
-                                                    <h5>
-                                                        {t('messenger_box_browser.local_time')}{' '}
-                                                        <span>{Moment().format('HH:mm A')}</span>
-                                                    </h5>
-                                                </div>
-                                                <a
-                                                    className="icon-popover"
-                                                    style={{ display: 'flex', justifyContent: 'c' }}
-                                                >
-                                                    <BiEdit style={{ fontSize: '15px', marginRight: '3px' }} />
-                                                    {t('messenger_box_browser.edit_account_setting')}
-                                                </a>
-                                            </div>
-                                        }
-                                        trigger="click"
-                                    >
-                                        <Avatar style={{ backgroundColor: 'blue', textTransform: 'uppercase' }}>
-                                            {getUserAccount.username.substring(0, 1)}
-                                        </Avatar>
-                                    </Popover>
-                                }
-                                content={<p>{items?.message}</p>}
-                                datetime={
-                                    // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                                    <div>
-                                        {/*<span>{Moment().fromNow()}</span>*/}
-                                        <span>{Moment().format('HH:mm A')}</span>
-                                    </div>
-                                    /*</Tooltip>*/
-                                }
-                            />
-                        </Col>
-                    );
-                }
-            })}
-        </Row>
-    );
-};

package/src/components/messenger/style.ts

@@ -1,40 +0,0 @@
-export const styleSheet = {
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    messengerStyles: () => ({
-        display: 'inharit',
-        '& .messagner-list': {
-            width: '100%',
-            display: 'flex',
-        },
-        '& .messagner-list:hover ': {
-            borderColor: 'rgba(61,60,64,0.04)',
-            backgroundColor: 'rgba(61,60,64,0.04)',
-            WebkitBoxShadow: '0 2px 3px 0 rgba(0,0,0,0.08)',
-            MozBoxShadow: '0 2px 3px 0 rgba(0,0,0,0.08)',
-            boxShadow: '0 2px 3px 0 rgba(0,0,0,0.08)',
-        },
-        '& .modal': {
-            position: 'absolute',
-            display: 'flex',
-            width: '120px',
-            height: '30px',
-            boxShadow: '0 6px 10px rgba(0, 0, 0, 0.12)',
-            left: 'auto',
-            right: '30px',
-            top: '30px',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            alignItems: 'center',
-        },
-        '& .modal div': {
-            textAlign: 'center',
-            width: '25px',
-            marginLeft: '5px',
-            marginRight: '5px',
-            borderRadius: '3px',
-        },
-        '& .modal div:hover': {
-            backgroundColor: 'rgba(61,60,64,0.12)',
-        },
-    }),
-};

package/src/components/messenger/threadSidebar/index.tsx

@@ -1,129 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { MessagesList } from './../messagesList/index';
-import { messagesData } from './../mock';
-import { IMessageList } from './../types/message';
-import { css } from '@emotion/css';
-import { Input, Col, Row } from 'antd';
-import { AiOutlineClose } from '@react-icons/all-files/ai/AiOutlineClose';
-import { HiOutlinePaperClip } from 'react-icons/hi';
-import { MdOutlineEmojiEmotions } from 'react-icons/md';
-import { useTranslation } from 'react-i18next';
-import { Picker } from 'emoji-mart';
-import { styleSheet } from './style';
-import { PostMessage } from './../postMessage/postMessage';
-import { SidebarThreadList } from './../sidebarThreadList';
-
-export const ThreadSidebar = (props) => {
-    // const { handleEnterButton } = props;
-    const [enterValue, setEnterValue] = useState<string>('');
-    const { t } = useTranslation();
-    const [flag, setFlag] = useState<boolean>(false);
-    const [userMessagesReplyList, setUserMessagesReplyList] = useState<IMessageList | any>([]);
-    useEffect(() => {
-        if (flag === true) {
-            setTimeout(() => {
-                setUserMessagesReplyList([
-                    ...userMessagesReplyList,
-                    {
-                        threadId: Math.random(),
-                        loginUser: false,
-                        message: t('messenger_box_browser.thank_for_chatting_with_us'),
-                        timeIsToday: true,
-                    },
-                ]);
-                setFlag(false);
-            }, 1000);
-        }
-        scrollToBottom();
-    }, [flag]);
-    const messagesEndRef = useRef(null);
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-    document.body.onclick = () => {
-        setDisplayEmoji(false);
-    };
-    const [displayEmoji, setDisplayEmoji] = useState(false);
-    const emojiClick = () => {
-        setDisplayEmoji(true);
-    };
-    const fileUploader = useRef(null);
-    const fileClick = () => {
-        fileUploader.current.click();
-    };
-    const handleEnterButton = (e) => {
-        setEnterValue(e.target.value);
-        setUserMessagesReplyList([
-            ...userMessagesReplyList,
-            {
-                threadId: Math.random(),
-                message: enterValue,
-                loginUser: true,
-                timeIsToday: true,
-            },
-        ]);
-        setEnterValue('');
-        setFlag(true);
-    };
-
-    return (
-        <div className={css(styleSheet.ThreadSidebarStyles)}>
-            <Col>
-                <div className="close-icon">
-                    <AiOutlineClose />
-                </div>
-            </Col>
-            <Col md={16}>
-                <SidebarThreadList userMessagesList={userMessagesReplyList} />
-                <div ref={messagesEndRef} />
-            </Col>
-            <Col md={16} className="input_row_thread">
-                <div className="input_class">
-                    {displayEmoji ? (
-                        <Picker
-                            native={true}
-                            set="apple"
-                            emoji="point_up"
-                            title={t('messenger_box_browser.pick_your_emoji')}
-                            emojiSize={24}
-                            perLine={6}
-                            color="#ae65c5"
-                            // skin={null}
-                            // defaultSkin={1}
-                            sheetSize={16}
-                            // emojisToShowFilter={null}
-                            showPreview={true}
-                            showSkinTones={false}
-                            // emojiTooltip={false}
-                            // autoFocus={false}
-                            // skinEmoji=""
-                            notFoundEmoji="sleuth_or_spy"
-                        />
-                    ) : (
-                        ''
-                    )}
-                    <Input
-                        value={enterValue}
-                        onChange={(e: any) => setEnterValue(e?.target?.value)}
-                        onPressEnter={(e) => handleEnterButton(e)}
-                        placeholder={t('messenger_box_browser.please_enter')}
-                        className="msg_input"
-                    />
-                    <div className="icon_box">
-                        <div className="icon_style">
-                            <input type="file" ref={fileUploader} style={{ display: 'none' }} />
-                            <button style={{ border: '0px' }} onClick={fileClick}>
-                                <HiOutlinePaperClip />
-                            </button>
-                        </div>
-                        <div className="icon_style">
-                            <button style={{ border: '0px' }} onClick={emojiClick}>
-                                <MdOutlineEmojiEmotions />
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </Col>
-        </div>
-    );
-};

package/src/components/messenger/threadSidebar/style.ts

@@ -1,65 +0,0 @@
-export const styleSheet = {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  ThreadSidebarStyles: {
-    '& .input_row_thread': {
-      width: 'calc(100% - 240px)',
-      paddingLeft: '0',
-      paddingRight: '0',
-      marginLeft: '15px',
-    },
-    '& .close-icon' : {
-      position : 'relative',
-      left : '0',
-      top : '10px',
-      float : 'right'
-
-      
-    }
-  },
-  costumThreadStyles: {
-    '& .ant-comment-content-author-name > * ': {
-      color: '#3d3c40',
-      fontWeight: '600',
-      fontSize: '14px',
-    },
-    '& span.ant-comment-content-author-time': {
-      color: 'gray',
-      fontSize: '14px',
-    },
-    '& .btn-hover': {
-      display: 'none',
-    },
-    '& .hover_btns': {
-      borderRadius: '4px',
-      border: '1px solid lightgray',
-      display: 'flex',
-      justifyContent: 'flex-end',
-      padding: '4px',
-      position: 'absolute',
-      right: '0',
-      top: '0px',
-      whiteSpace: 'normal',
-      zIndex: '1',
-    },
-    '& .hover_btns button': {
-      border: 'none',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      margin: '0 6px',
-      width: '28px',
-      height: '28px',
-      background: 'white',
-    },
-  },
-  costumThreadHoverStyles: {
-    ':hover .btn-hover': {
-      display: 'block',
-    },
-    '.btn-hover': {
-      display: 'none',
-    },
-    padding: '0px 36px',
-    paddingRight: '15px',
-  }
-} as any;

package/src/components/messenger/types/message.ts

@@ -1,16 +0,0 @@
-export interface IMessageList {
-    id: number;
-    loginUser: boolean;
-    message: string;
-    timeIsToday: boolean;
-    isReply: boolean;
-    thread?: IMessageReplyList[]
-    isPin?: boolean
-}
-
-export interface IMessageReplyList {
-    threadId: number;
-    message: string
-    time: string;
-    timeIsToday: boolean;
-}

package/src/components/messenger/utils/utils.ts

@@ -1,5 +0,0 @@
-
-export const currentTime = () => {
-    var today = new Date();
-    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
-}

package/src/components/overlay_trigger.tsx

@@ -1,59 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import * as React from 'react';
-
-// eslint-disable-next-line no-restricted-imports
-import { OverlayTrigger as OriginalOverlayTrigger, OverlayTriggerProps } from 'react-bootstrap';
-import { IntlContext, IntlShape } from 'react-intl';
-
-import { Provider } from 'react-redux';
-
-// import store from 'stores/redux_store.jsx';
-
-export type BaseOverlayTrigger = OriginalOverlayTrigger & {
-    hide: () => void;
-};
-
-type Props = OverlayTriggerProps & {
-    disabled?: boolean;
-    className?: string;
-};
-
-const OverlayTrigger = React.forwardRef((props: Props, ref?: React.Ref<OriginalOverlayTrigger>) => {
-    const { overlay, disabled, ...otherProps } = props;
-
-    // The overlay is rendered outside of the regular React context, and our version react-bootstrap can't forward
-    // that context itself, so we have to manually forward the react-intl context to this component's child.
-    const OverlayWrapper = ({ intl, ...overlayProps }: { intl: IntlShape }) => (
-        <Provider store={null}>
-            <IntlContext.Provider value={intl}>{React.cloneElement(overlay, overlayProps)}</IntlContext.Provider>
-        </Provider>
-    );
-
-    return (
-        <IntlContext.Consumer>
-            {(intl): React.ReactNode => {
-                const overlayProps = { ...overlay.props };
-                if (disabled) {
-                    overlayProps.style = { visibility: 'hidden', ...overlayProps.style };
-                }
-                return (
-                    <OriginalOverlayTrigger
-                        {...otherProps}
-                        ref={ref}
-                        overlay={<OverlayWrapper {...overlayProps} intl={intl} />}
-                    />
-                );
-            }}
-        </IntlContext.Consumer>
-    );
-});
-
-OverlayTrigger.defaultProps = {
-    defaultOverlayShown: false,
-    trigger: ['hover', 'focus'],
-};
-OverlayTrigger.displayName = 'OverlayTrigger';
-
-export default OverlayTrigger;