@messenger-box/platform-browser 0.0.1-alpha.95 → 0.0.1-alpha.96

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.96](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.95...v0.0.1-alpha.96) (2021-12-01)
+
+**Note:** Version bump only for package @messenger-box/platform-browser
+
+
+
+
+
 ## [0.0.1-alpha.95](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.94...v0.0.1-alpha.95) (2021-12-01)
 
 **Note:** Version bump only for package @messenger-box/platform-browser

package/lib/components/InboxMessage/UserModalContent/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function UserModalContent({ username }: any): JSX.Element;

package/lib/components/InboxMessage/UserModalContent/style.d.ts

@@ -0,0 +1,98 @@
+export declare const styleSheet: {
+    UserContentStyles: () => {
+        display: string;
+        justifyContent: string;
+        padding: string;
+        '& .user-info': {
+            border: string;
+            padding: string;
+            width: string;
+            borderRadius: string;
+            '& .avatar': {
+                textAlign: string;
+                marginBottom: string;
+                display: string;
+                flexDirection: string;
+                alignItems: string;
+                '& .ant-avatar-lg': {
+                    height: string;
+                    width: string;
+                    '& svg': {
+                        fontSize: string;
+                    };
+                };
+                '& a': {
+                    color: string;
+                    textDecoration: string;
+                };
+            };
+            '& .identify': {
+                paddingBottom: string;
+                borderBottom: string;
+                '& h3': {
+                    color: string;
+                };
+                '& .get-badge-btn': {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    borderColor: string;
+                };
+                '& .get-badge-btn:hover ': {
+                    color: string;
+                };
+            };
+            '& .user-conformation': {
+                marginBottom: string;
+                '& h3': {
+                    color: string;
+                };
+                '& .email-address': {
+                    display: string;
+                    '& p': {
+                        fontSize: string;
+                        marginLeft: string;
+                    };
+                    '& svg': {
+                        fontSize: string;
+                    };
+                };
+            };
+        };
+        '& .user-details': {
+            width: string;
+            marginLeft: string;
+            '& .user': {
+                borderBottom: string;
+                paddingBottm: string;
+                '& h2': {
+                    color: string;
+                };
+                '& p': {
+                    marginBottom: string;
+                    color: string;
+                };
+                '& a': {
+                    color: string;
+                    textDecoration: string;
+                };
+                '& h3': {
+                    color: string;
+                    fontSize: string;
+                    '& svg': {
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+        };
+        '& .reviews': {
+            borderBottom: string;
+            padding: string;
+            '& a': {
+                color: string;
+                textDecoration: string;
+            };
+        };
+    };
+};

package/lib/components/InboxMessage/style.d.ts

@@ -11,6 +11,17 @@ export declare const stylesheet: {
             borderRight: string;
             width: string;
             height: string;
+            display: string;
+            flexDirection: string;
+            justifyContent: string;
+            '& .add-conversations': {
+                padding: string;
+                width: string;
+                borderTop: string;
+                '& .conversation-btn': {
+                    width: string;
+                };
+            };
         };
         '& .inbox-sidebar-active': {
             borderRight: string;

package/lib/index.js

@@ -110,7 +110,7 @@ function InboxDetails({ handleToggle, toggleDrawer }) {
     return (react_1.default.createElement("div", { className: css(style_1.styleSheet.detailDrawerStyles) },
         react_1.default.createElement("div", { className: "details" },
             react_1.default.createElement("h4", null, "Details"),
-            react_1.default.createElement(react_2.Button, { onClick: handleToggle, as: "a", className: "close-btn", rightIcon: react_1.default.createElement(icons_1.CloseOutlined, { color: "black" }) }))));
+            react_1.default.createElement(react_2.Button, { onClick: handleToggle, as: "a", className: "close-btn", marginRight: '10px', rightIcon: react_1.default.createElement(icons_1.CloseOutlined, { color: "black" }) }))));
 }
 exports.default = InboxDetails;
 
@@ -510,18 +510,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 const react_2 = __webpack_require__(/*! @chakra-ui/react */ "@chakra-ui/react");
 const ai_1 = __webpack_require__(/*! react-icons/ai */ "react-icons/ai");
+const UserModalContent_1 = __importDefault(__webpack_require__(/*! ../UserModalContent */ "./src/components/InboxMessage/UserModalContent/index.tsx"));
 function MsgList({ messageList, currentUser }) {
+    const { isOpen, onOpen, onClose } = react_2.useDisclosure();
     return (react_1.default.createElement(react_1.default.Fragment, null, messageList === null || messageList === void 0 ? void 0 : messageList.map((element, index) => {
-        var _a, _b;
+        var _a, _b, _c;
         // if (message.author.username == user?.username ) {
         return (react_1.default.createElement("div", { className: "message-list", key: index },
-            react_1.default.createElement(react_2.Box, { display: "flex", width: '100%' },
-                react_1.default.createElement(react_2.Avatar, { width: "40px", height: '40px', backgroundColor: "grey", borderRadius: "50%", marginRight: "30px" }),
-                react_1.default.createElement(react_2.Box, { width: '100%' },
-                    react_1.default.createElement(react_2.Text, { fontSize: '20px', color: 'black' }, (_a = element === null || element === void 0 ? void 0 : element.author) === null || _a === void 0 ? void 0 : _a.username),
+            react_1.default.createElement(react_2.Box, { display: "flex", width: "100%" },
+                react_1.default.createElement(react_2.Avatar, { width: "40px", height: "40px", backgroundColor: "grey", borderRadius: "50%", marginRight: "15px", onClick: onOpen }),
+                react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, motionPreset: "slideInBottom" },
+                    react_1.default.createElement(react_2.ModalOverlay, null),
+                    react_1.default.createElement(react_2.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)" },
+                        react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", borderBottom: "1px solid rgb(221, 221, 221)", paddingBottom: "15px", paddingTop: "15px" },
+                            react_1.default.createElement(react_2.ModalCloseButton, { as: "a", width: "30px", marginLeft: "10px", color: "black", _hover: { color: 'black' } })),
+                        react_1.default.createElement(react_2.ModalBody, null,
+                            react_1.default.createElement(UserModalContent_1.default, { username: (_a = element === null || element === void 0 ? void 0 : element.author) === null || _a === void 0 ? void 0 : _a.username })))),
+                react_1.default.createElement(react_2.Box, { width: "100%" },
+                    react_1.default.createElement(react_2.Text, { fontSize: "20px", color: "black" }, (_b = element === null || element === void 0 ? void 0 : element.author) === null || _b === void 0 ? void 0 : _b.username),
                     react_1.default.createElement(react_2.Box, { d: "flex", justifyContent: "space-between" },
-                        react_1.default.createElement(react_2.Text, { color: 'grey' }, element === null || element === void 0 ? void 0 : element.message),
-                        currentUser !== ((_b = element === null || element === void 0 ? void 0 : element.author) === null || _b === void 0 ? void 0 : _b.username) ? react_1.default.createElement(ai_1.AiFillFlag, { color: 'black' }) : '')))));
+                        react_1.default.createElement(react_2.Text, { color: "grey" }, element === null || element === void 0 ? void 0 : element.message),
+                        currentUser !== ((_c = element === null || element === void 0 ? void 0 : element.author) === null || _c === void 0 ? void 0 : _c.username) ? react_1.default.createElement(ai_1.AiFillFlag, { color: "black" }) : '')))));
         // }
         // else {
         //     return (
@@ -624,6 +633,190 @@ exports.styleSheet = {
 };
 
 
+/***/ }),
+
+/***/ "./src/components/InboxMessage/UserModalContent/index.tsx":
+/*!****************************************************************!*\
+  !*** ./src/components/InboxMessage/UserModalContent/index.tsx ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
+const react_1 = __webpack_require__(/*! @chakra-ui/react */ "@chakra-ui/react");
+const style_1 = __webpack_require__(/*! ./style */ "./src/components/InboxMessage/UserModalContent/style.ts");
+const all_1 = __webpack_require__(/*! react-icons/all */ "react-icons/all");
+function UserModalContent({ username }) {
+    const { css } = react_fela_1.useFela();
+    return (React.createElement("div", { className: css(style_1.styleSheet.UserContentStyles) },
+        React.createElement("div", { className: "user-info" },
+            React.createElement("div", { className: "avatar" },
+                React.createElement(react_1.Avatar, { size: "large", backgroundColor: "grey", width: "200px", height: "200px", borderRadius: "50%", marginBottom: '10px' }),
+                React.createElement("a", { href: "#" }, "Update photo")),
+            React.createElement(all_1.AiOutlineSecurityScan, { style: { width: '24px', height: '24px', color: 'black' } }),
+            React.createElement("div", { className: "identify" },
+                React.createElement("h3", null, "Identity verification"),
+                React.createElement(react_1.Text, { as: 'p', color: 'black' }, "Show others you\u2019re really you with the identity verification badge."),
+                React.createElement(react_1.Button, { className: "get-badge-btn", color: "black", bg: 'transparent' }, "Get the badge")),
+            React.createElement("div", { className: "user-conformation" },
+                React.createElement("h3", null,
+                    username,
+                    " confirmed "),
+                React.createElement("div", { className: "email-address" },
+                    React.createElement(all_1.FiCheck, { color: "black" }),
+                    React.createElement(react_1.Text, { as: 'p', color: 'black' }, "Email address")))),
+        React.createElement("div", { className: "user-details" },
+            React.createElement("div", { className: "user" },
+                React.createElement("h2", null,
+                    "Hi, I'm ",
+                    username),
+                React.createElement(react_1.Text, { as: 'p' }, "Joined in 2021"),
+                React.createElement("a", null, "Edit profile"),
+                React.createElement("h3", null,
+                    React.createElement(all_1.BsFillStarFill, { color: "black" }),
+                    " Reviews")),
+            React.createElement("div", { className: "reviews" },
+                React.createElement("a", null, "Reviews by you")))));
+}
+exports.default = UserModalContent;
+
+
+/***/ }),
+
+/***/ "./src/components/InboxMessage/UserModalContent/style.ts":
+/*!***************************************************************!*\
+  !*** ./src/components/InboxMessage/UserModalContent/style.ts ***!
+  \***************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleSheet = void 0;
+exports.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',
+            },
+        },
+    }),
+};
+
+
 /***/ }),
 
 /***/ "./src/components/InboxMessage/index.tsx":
@@ -697,7 +890,6 @@ function InboxMessage() {
     const currentUserAuth0Id = react_redux_1.useSelector((state) => state.user.auth0UserId);
     const channelData = core_1.useGetChannelsByUserQuery();
     const allChannels = core_1.useGetAllChannelQuery();
-    console.log(allChannels);
     react_1.useEffect(() => {
         if (!channelData.loading) {
             let fChannel = [];
@@ -732,8 +924,8 @@ function InboxMessage() {
             return setUserId(e.user);
         });
         setSelectedChannel(item);
+        setToggleDrawer(false);
     };
-    console.log(userId, channel);
     const usersRes = core_1.useGetAllUsersQuery();
     react_1.useEffect(() => {
         var _a;
@@ -857,7 +1049,7 @@ function InboxMessage() {
                                         react_1.default.createElement("p", null,
                                             "Use \u2191\u2193 to browse, \u21B5 to select.",
                                             react_1.default.createElement("span", null, " ")))))))),
-                react_1.default.createElement(react_2.Button, { size: "large", className: "conversation-btn", backgroundColor: "teal", height: "40px", borderRadius: "3px", border: 'none', color: 'white', variant: "outline", fontSize: '20px', onClick: () => setShowModal(true) }, "Add Conversations"))),
+                react_1.default.createElement(react_2.Button, { size: "large", className: "conversation-btn", backgroundColor: "#1890ff", height: "40px", borderRadius: "3px", border: 'none', color: 'white', variant: "outline", fontSize: '20px', onClick: () => setShowModal(true) }, "Add Conversations"))),
         react_1.default.createElement("div", { className: `msg-container${toggleDrawer ? '-active' : ''}` },
             react_1.default.createElement("div", { className: "border" }),
             showMessageSide == true ? (react_1.default.createElement(Messages_1.default, { id: id, user: user, userId: userId, currentUser: currentUser })) : ('')),
@@ -887,12 +1079,23 @@ exports.stylesheet = {
         height: '75vh',
         background: '#ffff',
         '& .conversations': {
-            width: '100%'
+            width: '100%',
         },
         '& .inbox-sidebar': {
             borderRight: '1px solid #eaeaea',
             width: '25%',
             height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            '& .add-conversations': {
+                padding: '20px',
+                width: '100%',
+                borderTop: '1px solid #eaeaea',
+                '& .conversation-btn': {
+                    width: '100%',
+                },
+            },
         },
         '& .inbox-sidebar-active': {
             borderRight: '1px solid #eaeaea',
@@ -906,9 +1109,9 @@ exports.stylesheet = {
                 width: '100%',
                 borderTop: '1px solid #eaeaea',
                 '& .conversation-btn': {
-                    width: '100%'
-                }
-            }
+                    width: '100%',
+                },
+            },
         },
         '& .allmessage-header': {
             display: 'flex',
@@ -920,14 +1123,14 @@ exports.stylesheet = {
                 marginTop: '15px',
                 color: 'black',
                 fontWeight: 'bold',
-                fontSize: '1em !important'
+                fontSize: '1em !important',
             },
             '& .ant-btn': {
-                padding: '4px'
+                padding: '4px',
             },
             '& .ant-btn:hover': {
-                background: '#eaeaea'
-            }
+                background: '#eaeaea',
+            },
         },
         '& .header-section': {
             marginBottom: '20px',
@@ -940,38 +1143,38 @@ exports.stylesheet = {
             marginRight: '5px',
             textAlign: 'center',
             '& .ant-btn-circle:hover': {
-                backgroundColor: '#eaeaea'
-            }
+                backgroundColor: '#eaeaea',
+            },
         },
         '& .ant-popover-inner-content': {
-            padding: '0'
+            padding: '0',
         },
         '& .border': {
             height: '55px',
             width: '115%',
-            borderBottom: '1px solid #eaeaea'
+            borderBottom: '1px solid #eaeaea',
         },
         '& .msg-container': {
-            width: '80%'
+            width: '80%',
         },
         '& .msg-container-active': {
             width: '60%',
             '& .border': {
-                width: '100%'
-            }
+                width: '100%',
+            },
         },
         '& .inbox-details': {
             width: '20%',
             borderLeft: '1px solid #eaeaea',
-            transition: "500ms",
+            transition: '500ms',
         },
         '&  .inbox-details-active': {
             width: '0',
-            transition: "500ms",
+            transition: '500ms',
             opacity: '0',
             border: 'none',
-            overflow: "hidden",
-        }
+            overflow: 'hidden',
+        },
     }),
     modelStyle: () => ({
         display: 'flex',
@@ -1056,7 +1259,7 @@ exports.stylesheet = {
                 fontSize: '14px',
             },
         },
-    })
+    }),
 };