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

package/src/cdm-locales/es/translations.json

@@ -1,95 +0,0 @@
-{
-    "messenger_box_browser": {
-        "direct_messages": "Mensajes Directos",
-        "go": "Ir",
-        "use_browse_or_select": "Usa ↑↓ para navegar, ↵ para seleccionar.",
-        "toggle_sidebar": "Alternar barra lateral",
-        "create_channel": "Crear Canal",
-        "join": "unirse",
-        "no_more_channels_to_join": "No hay más canales a los que unirse",
-        "click_create_new_channel": "Haz clic en 'Crear Nuevo Canal' para crear uno nuevo",
-        "create_public_channel": "Crear Canal Público",
-        "channel_name": "Nombre del Canal",
-        "channel_description": "Descripción del Canal",
-        "close": "Cerrar",
-        "details": "Detalles",
-        "you_have_no_unread_messages": "No tienes mensajes sin leer",
-        "when_you_book_a_trip_or_experience": "Cuando reservas un viaje o experiencia, los mensajes de tu anfitrión aparecerán aquí.",
-        "explore": "Explorar",
-        "archive": "Archivo",
-        "image": "Imagen",
-        "type_your_message": "Escribe tu mensaje",
-        "all_conversations": "Todas las Conversaciones",
-        "archived_conversations": "Conversaciones Archivadas",
-        "unread_conversations": "Conversaciones sin Leer",
-        "update_photo": "Actualizar foto",
-        "identity_verification": "Verificación de identidad",
-        "show_others_you_are_really_you": "Demuestra a los demás que realmente eres tú con la insignia de verificación de identidad.",
-        "get_the_badge": "Obtener la insignia",
-        "username_confirmed": "{{username}} confirmado",
-        "email_address": "Correo electrónico",
-        "hi_username": "Hola, soy {{username}}",
-        "joined_in_date": "Se unió en {{date}}",
-        "edit_profile": "Editar perfil",
-        "reviews": "Reseñas",
-        "reviews_by_you": "Reseñas hechas por ti",
-        "messages": "Mensajes",
-        "add_conversations": "Añadir Conversaciones",
-        "edit_message": "Editar Mensaje",
-        "save": "Guardar",
-        "add_new_members_to_my_first_public_channel": "Añadir Nuevos Miembros a Mi Primer Canal Público",
-        "surveybot": "Survey Bot",
-        "survey_bot_collects_your": "El bot de encuestas recoge tu..",
-        "local_time": "Hora Local",
-        "send_message": "Enviar Mensaje",
-        "beginning_of": "Inicio de",
-        "direct_messages_and_files_shared": "Los mensajes directos y archivos compartidos aquí no se muestran a personas fuera de esta área.",
-        "invite_others_to_this_channel": "Invitar a otros a este canal",
-        "set_a_header": "Establecer un Encabezado",
-        "bot": "BOT",
-        "this_is_the_start_of_your_direct_message": "Este es el inicio de tu historial de mensajes directos con surveybot.",
-        "today": "Hoy",
-        "yesterday": "Ayer",
-        "pick_your_emoji": "Elige tu emoji...",
-        "system": "Sistema",
-        "working": "Trabajando..........",
-        "joined_the_channel": "se unió al canal",
-        "reply_to": "Responder a",
-        "we_supply_a_series_of_design_principles": "Proporcionamos una serie de principios de diseño, patrones prácticos y recursos de diseño de alta calidad (Sketch y Axure), para ayudar a las personas a crear sus prototipos de productos de manera hermosa y eficiente.",
-        "reply": "Responder",
-        "mark_as_unread": "Marcar como no leído",
-        "copy_link": "copiar enlace",
-        "unpin_to_channel": "desanclar del canal",
-        "pin_to_channel": "anclar al canal",
-        "edit": "Editar",
-        "delete": "Eliminar",
-        "please_enter": "Por favor ingrese",
-        "slack_bot": "Slack Bot",
-        "edit_account_setting": "Editar Configuración de la Cuenta",
-        "thank_for_chatting_with_us": "Gracias por chatear con nosotros",
-        "close_channel": "Cerrar Canal",
-        "this_channel_is_read_only": "Este canal es solo de lectura. Solo los miembros con permiso pueden publicar aquí.",
-        "retry": "Reintentar",
-        "cancel": "Cancelar",
-        "update_your_status": "Actualizar tu estado",
-        "only_visible_to_you": "(Solo visible para ti)",
-        "saved": "Guardado",
-        "pinned": "Anclado",
-        "show_less": "Mostrar menos",
-        "show_more": "Mostrar más",
-        "preview": "Vista previa",
-        "help": "Ayuda",
-        "following": "Siguiendo",
-        "follow": "Seguir",
-        "got_it": "Entendido",
-        "seen_this_before": "¿Has visto esto antes?",
-        "opt_out_of_these_tips": "Darse de baja de estos consejos.",
-        "invite_people": "Invitar a personas",
-        "username_joined_the_channel": "@{{username}} se unió al canal",
-        "PUBLIC_CHANNELS": "CANALES PÚBLICOS",
-        "more": "Más...",
-        "PRIVATE_CHANNELS": "CANALES PRIVADOS",
-        "DIRECT_MESSAGES": "MENSAJES DIRECTOS",
-        "loading": "Cargando"
-    }
-}

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

@@ -1,25 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@chakra-ui/react';
-import { AiOutlineClose } from '@react-icons/all-files/ai/AiOutlineClose';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
-
-export default function InboxDetails({ handleToggle, toggleDrawer }: any) {
-    const { t } = useTranslation();
-
-    return (
-        <div className={css(styleSheet.detailDrawerStyles)}>
-            <div className="details">
-                <h4> {t('messenger_box_browser.details')}</h4>
-                <Button
-                    onClick={handleToggle}
-                    as="a"
-                    className="close-btn"
-                    marginRight="10px"
-                    rightIcon={<AiOutlineClose color="black" />}
-                ></Button>
-            </div>
-        </div>
-    );
-}

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

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

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-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 { t } = useTranslation();
-
-    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>{t('messenger_box_browser.you_have_no_unread_messages')}</h4>
-                    <p>{t('messenger_box_browser.when_you_book_a_trip_or_experience')}</p>
-                    <Button
-                        variant="outline"
-                        width="110px"
-                        height="40px"
-                        borderRadius="7px"
-                        bg="none"
-                        border="1px solid rgb(34 34 34)"
-                        color="black"
-                        fontWeight="600"
-                    >
-                        {t('messenger_box_browser.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

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

@@ -1,161 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-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 'common/graphql';
-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 { t } = useTranslation();
-    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={t('messenger_box_browser.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={t('messenger_box_browser.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={t('messenger_box_browser.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

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

@@ -1,93 +0,0 @@
-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 display="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>
-                //     )
-                // }
-            })}
-        </>
-    );
-}