@messenger-box/platform-browser 0.0.1-alpha.100 → 0.0.1-alpha.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/components/InboxMessage/InboxSidebar/index.d.ts +1 -1
  3. package/lib/components/InboxMessage/Messages/styles.d.ts +0 -2
  4. package/lib/components/InboxMessage/UserModalContent/index.d.ts +1 -1
  5. package/lib/index.js +37 -32
  6. package/lib/index.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/components/InboxMessage/InboxSidebar/index.tsx +23 -29
  9. package/src/components/InboxMessage/Messages/index.tsx +55 -20
  10. package/src/components/InboxMessage/Messages/styles.ts +3 -3
  11. package/src/components/InboxMessage/MessagesList/index.tsx +5 -1
  12. package/src/components/InboxMessage/UserModalContent/index.tsx +19 -7
  13. package/src/components/InboxMessage/index.tsx +16 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.0.1-alpha.101](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.100...v0.0.1-alpha.101) (2021-12-03)
7
+
8
+ **Note:** Version bump only for package @messenger-box/platform-browser
9
+
10
+
11
+
12
+
13
+
6
14
  ## [0.0.1-alpha.100](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.99...v0.0.1-alpha.100) (2021-12-03)
7
15
 
8
16
  **Note:** Version bump only for package @messenger-box/platform-browser
package/lib/components/InboxMessage/InboxSidebar/index.d.ts CHANGED
@@ -6,5 +6,5 @@ declare type IPropsType = {
6
6
  currentUser?: any;
7
7
  userId?: any;
8
8
  };
9
- export default function InboxSidebar({ handleSelectMessgae, user, messageList, currentUser, userId }: IPropsType): JSX.Element;
9
+ export default function InboxSidebar({ handleSelectMessgae, user, messageList, userId }: IPropsType): JSX.Element;
10
10
  export {};
package/lib/components/InboxMessage/Messages/styles.d.ts CHANGED
@@ -33,8 +33,6 @@ export declare const styleSheet: {
33
33
  justifyContent: string;
34
34
  alignItems: string;
35
35
  '& div': {
36
- display: string;
37
- justifyContent: string;
38
36
  width: string;
39
37
  '& svg': {
40
38
  fontSize: string;
package/lib/components/InboxMessage/UserModalContent/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export default function UserModalContent({ username }: any): JSX.Element;
2
+ export default function UserModalContent({ username, imageUrl }: any): JSX.Element;
package/lib/index.js CHANGED
@@ -192,24 +192,20 @@ const React = __importStar(__webpack_require__(/*! react */ "react"));
192
192
  const react_1 = __webpack_require__(/*! @chakra-ui/react */ "@chakra-ui/react");
193
193
  const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
194
194
  const styles_1 = __webpack_require__(/*! ./styles */ "./src/components/InboxMessage/InboxSidebar/styles.ts");
195
- function InboxSidebar({ handleSelectMessgae, user, messageList, currentUser, userId }) {
195
+ function InboxSidebar({ handleSelectMessgae, user, messageList, userId }) {
196
196
  const { css } = react_fela_1.useFela();
197
197
  return (React.createElement("div", { className: css(styles_1.styleSheet.inboxSibarStyles) }, (user === null || user === void 0 ? void 0 : user.length) > 0 ? (user === null || user === void 0 ? void 0 : user.map((item, index) => {
198
198
  const lastMessage = messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
199
- if (item.displayName !== currentUser &&
200
- item.displayName !== 'admin (you)' &&
201
- item.displayName !== 'surveybot') {
202
- return (React.createElement(react_1.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 },
203
- React.createElement("div", { className: "inbox-contacts" },
204
- React.createElement(react_1.Avatar, { size: "md", backgroundColor: "grey", borderRadius: "50%", width: "50px" }),
205
- React.createElement("div", { className: "last-message" },
206
- React.createElement("h5", null, item === null || item === void 0 ? void 0 : item.displayName),
207
- React.createElement("p", null, lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message)))));
208
- }
199
+ return (React.createElement(react_1.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 },
200
+ React.createElement("div", { className: "inbox-contacts" },
201
+ React.createElement(react_1.Avatar, { size: "md", backgroundColor: "grey", borderRadius: "50%", width: "50px" }),
202
+ React.createElement("div", { className: "last-message" },
203
+ React.createElement("h5", null, item === null || item === void 0 ? void 0 : item.displayName),
204
+ React.createElement("p", null, lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message)))));
209
205
  })) : (React.createElement("div", { className: "no-messages" },
210
206
  React.createElement("h4", null, "You have no unread messages"),
211
207
  React.createElement("p", null, "When you book a trip or experience, messages from your host will show up here."),
212
- React.createElement(react_1.Button, { variant: "outline", width: "110px", height: "40px", borderRadius: "7px", bg: 'none', border: "1px solid rgb(34 34 34)", color: "black", fontWeight: "600" }, "Explore")))));
208
+ React.createElement(react_1.Button, { variant: "outline", width: "110px", height: "40px", borderRadius: "7px", bg: "none", border: "1px solid rgb(34 34 34)", color: "black", fontWeight: "600" }, "Explore")))));
213
209
  }
214
210
  exports.default = InboxSidebar;
215
211
  // {
@@ -383,14 +379,20 @@ function Messages({ id, user, userId, currentUser }) {
383
379
  react_1.default.createElement("div", { className: "message-username" },
384
380
  react_1.default.createElement("h2", null, item === null || item === void 0 ? void 0 : item.username),
385
381
  react_1.default.createElement("div", null,
386
- react_1.default.createElement(react_2.Button, { border: "none", bg: "none", width: "30px", height: "30px", onClick: handleEnterBtn, borderRadius: "50%", _hover: { backgroundColor: 'rgb(221, 221, 221)' } },
387
- react_1.default.createElement(all_1.BiArchiveIn, null)))),
382
+ react_1.default.createElement(react_2.Tooltip, { label: "Archive", placement: "bottom-end", backgroundColor: 'black',
383
+ // bg="white"
384
+ 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 },
385
+ react_1.default.createElement(react_2.Button, { border: "none", bg: "none", width: "30px", height: "30px", onClick: handleEnterBtn, borderRadius: "50%", _hover: { backgroundColor: 'rgb(221, 221, 221)' } },
386
+ react_1.default.createElement(all_1.BiArchiveIn, null))))),
388
387
  react_1.default.createElement("div", { className: "message-row" },
389
388
  react_1.default.createElement(MessagesList_1.default, { id: id, messageList: messageList, user: user, currentUser: currentUser }),
390
389
  react_1.default.createElement("div", { ref: messagesEndRef }),
391
390
  react_1.default.createElement("div", { className: "message-input" },
392
- react_1.default.createElement(react_2.Button, { border: "none", borderRadius: "50%", bg: "none", marginRight: "5px", height: "40px", width: "40px", _hover: { backgroundColor: 'rgb(221, 221, 221)' } },
393
- react_1.default.createElement(bi_1.BiImage, { color: "#464646", style: { fontSize: '25px' } })),
391
+ react_1.default.createElement(react_2.Tooltip, { label: "Image", placement: "top",
392
+ // bg="white"
393
+ 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 },
394
+ react_1.default.createElement(react_2.Button, { border: "none", borderRadius: "50%", bg: "none", marginRight: "5px", height: "40px", width: "40px", _hover: { backgroundColor: 'rgb(221, 221, 221)' } },
395
+ react_1.default.createElement(bi_1.BiImage, { color: "#464646", style: { fontSize: '25px' } }))),
394
396
  react_1.default.createElement(react_2.InputGroup, { size: "md" },
395
397
  react_1.default.createElement(react_2.Input, { placeholder: "Type your message", value: message, onPressEnter: handleEnterBtn, onChange: (e) => setMessage(e.target.value) }),
396
398
  react_1.default.createElement(react_2.InputRightElement, null,
@@ -449,9 +451,9 @@ exports.styleSheet = {
449
451
  justifyContent: 'space-between',
450
452
  alignItems: 'center',
451
453
  '& div': {
452
- display: 'flex',
453
- justifyContent: 'space-evenly',
454
- width: '150px',
454
+ // display: 'flex',
455
+ // justifyContent: 'space-evenly',
456
+ width: '50px',
455
457
  '& svg': {
456
458
  fontSize: '20px',
457
459
  color: '#464646',
@@ -525,14 +527,14 @@ function MsgList({ messageList, currentUser }) {
525
527
  // if (message.author.username == user?.username ) {
526
528
  return (react_1.default.createElement("div", { className: "message-list", key: index },
527
529
  react_1.default.createElement(react_2.Box, { display: "flex", width: "100%" },
528
- react_1.default.createElement(react_2.Avatar, { width: "40px", height: "40px", backgroundColor: "grey", borderRadius: "50%", marginRight: "15px", onClick: onOpen }),
530
+ react_1.default.createElement(react_2.Avatar, { width: "40px", height: "40px", backgroundColor: "grey", borderRadius: "50%", src: (element === null || element === void 0 ? void 0 : element.imageUrl) ? element === null || element === void 0 ? void 0 : element.imageUrl : '', marginRight: "15px", onClick: onOpen }),
529
531
  react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, motionPreset: "slideInBottom" },
530
532
  react_1.default.createElement(react_2.ModalOverlay, null),
531
533
  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)" },
532
534
  react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", borderBottom: "1px solid rgb(221, 221, 221)", paddingBottom: "15px", paddingTop: "15px" },
533
535
  react_1.default.createElement(react_2.ModalCloseButton, { as: "a", width: "30px", marginLeft: "10px", color: "black", _hover: { color: 'black' } })),
534
536
  react_1.default.createElement(react_2.ModalBody, null,
535
- 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 })))),
537
+ 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, image: element.imageUrl ? element.imageUrl : '' })))),
536
538
  react_1.default.createElement(react_2.Box, { width: "100%" },
537
539
  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),
538
540
  react_1.default.createElement(react_2.Box, { d: "flex", justifyContent: "space-between" },
@@ -677,31 +679,31 @@ const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
677
679
  const react_1 = __webpack_require__(/*! @chakra-ui/react */ "@chakra-ui/react");
678
680
  const style_1 = __webpack_require__(/*! ./style */ "./src/components/InboxMessage/UserModalContent/style.ts");
679
681
  const all_1 = __webpack_require__(/*! react-icons/all */ "react-icons/all");
680
- function UserModalContent({ username }) {
682
+ function UserModalContent({ username, imageUrl }) {
681
683
  const { css } = react_fela_1.useFela();
682
684
  return (React.createElement("div", { className: css(style_1.styleSheet.UserContentStyles) },
683
685
  React.createElement("div", { className: "user-info" },
684
686
  React.createElement("div", { className: "avatar" },
685
- React.createElement(react_1.Avatar, { size: "large", backgroundColor: "grey", width: "200px", height: "200px", borderRadius: "50%", marginBottom: '10px' }),
687
+ React.createElement(react_1.Avatar, { size: "large", src: imageUrl !== '' ? imageUrl : '', backgroundColor: "grey", width: "200px", height: "200px", borderRadius: "50%", marginBottom: "10px" }),
686
688
  React.createElement("a", { href: "#" }, "Update photo")),
687
689
  React.createElement(all_1.AiOutlineSecurityScan, { style: { width: '24px', height: '24px', color: 'black' } }),
688
690
  React.createElement("div", { className: "identify" },
689
691
  React.createElement("h3", null, "Identity verification"),
690
- React.createElement(react_1.Text, { as: 'p', color: 'black' }, "Show others you\u2019re really you with the identity verification badge."),
691
- React.createElement(react_1.Button, { className: "get-badge-btn", color: "black", bg: 'transparent' }, "Get the badge")),
692
+ React.createElement(react_1.Text, { as: "p", color: "black" }, "Show others you\u2019re really you with the identity verification badge."),
693
+ React.createElement(react_1.Button, { className: "get-badge-btn", color: "black", bg: "transparent" }, "Get the badge")),
692
694
  React.createElement("div", { className: "user-conformation" },
693
695
  React.createElement("h3", null,
694
696
  username,
695
697
  " confirmed "),
696
698
  React.createElement("div", { className: "email-address" },
697
699
  React.createElement(all_1.FiCheck, { color: "black" }),
698
- React.createElement(react_1.Text, { as: 'p', color: 'black' }, "Email address")))),
700
+ React.createElement(react_1.Text, { as: "p", color: "black" }, "Email address")))),
699
701
  React.createElement("div", { className: "user-details" },
700
702
  React.createElement("div", { className: "user" },
701
703
  React.createElement("h2", null,
702
704
  "Hi, I'm ",
703
705
  username),
704
- React.createElement(react_1.Text, { as: 'p' }, "Joined in 2021"),
706
+ React.createElement(react_1.Text, { as: "p" }, "Joined in 2021"),
705
707
  React.createElement("a", null, "Edit profile"),
706
708
  React.createElement("h3", null,
707
709
  React.createElement(all_1.BsFillStarFill, { color: "black" }),
@@ -918,13 +920,14 @@ function InboxMessage() {
918
920
  }
919
921
  });
920
922
  }
921
- console.log(fChannel);
922
923
  setChannel([
923
924
  ...channelData === null || channelData === void 0 ? void 0 : channelData.data.channelsByUser.filter((chl) => chl.type === 'DIRECT' && (chl === null || chl === void 0 ? void 0 : chl.displayName) !== 'admin (you)' && (chl === null || chl === void 0 ? void 0 : chl.displayName) !== 'surveybot'),
924
925
  ...fChannel.filter((chl) => chl.type === 'DIRECT'),
925
926
  ]);
926
927
  }
927
928
  }, [loading, channelData, currentUserId]);
929
+ // console.log(allChannels)
930
+ console.log(channel);
928
931
  const handleSelectMessgae = (item) => {
929
932
  setShowMessageSide(true);
930
933
  setId(item === null || item === void 0 ? void 0 : item.id);
@@ -945,7 +948,7 @@ function InboxMessage() {
945
948
  tempOpt.push({
946
949
  value: { username: `${i.username}`, uid: `${i.id}` },
947
950
  label: (react_1.default.createElement("div", { style: { cursor: 'pointer' } },
948
- react_1.default.createElement(react_2.Avatar, { width: "40px", backgroundColor: 'grey', size: "42", borderRadius: "50%" }),
951
+ react_1.default.createElement(react_2.Avatar, { width: "40px", backgroundColor: "grey", size: "42", borderRadius: "50%" }),
949
952
  react_1.default.createElement(react_2.Text, { color: "black" }, i.username))),
950
953
  });
951
954
  }
@@ -957,6 +960,7 @@ function InboxMessage() {
957
960
  });
958
961
  }
959
962
  }, [usersRes.loading, usersRes.data]);
963
+ console.log(user);
960
964
  react_1.useEffect(() => {
961
965
  if (!loading) {
962
966
  setMessageList(data.messages.data);
@@ -1028,9 +1032,10 @@ function InboxMessage() {
1028
1032
  react_1.default.createElement("div", { className: "header-section" },
1029
1033
  react_1.default.createElement("div", { className: "allmessage-header" },
1030
1034
  react_1.default.createElement("h3", null, "Messages"),
1031
- react_1.default.createElement(react_2.Button, { as: "a", onClick: () => {
1035
+ react_1.default.createElement(react_2.Button, { as: "a", borderRadius: "50%", width: "30px", height: "30px", _hover: { backgroundColor: 'rgb(221, 221, 221)' }, onClick: () => {
1032
1036
  setShowPopover(!showPopover);
1033
- }, rightIcon: react_1.default.createElement(all_1.AiOutlineMenu, { style: { fontSize: '20px', color: 'black' } }) }),
1037
+ } },
1038
+ react_1.default.createElement(all_1.AiOutlineMenu, { style: { fontSize: '20px', color: 'black' } })),
1034
1039
  showPopover ? react_1.default.createElement(Popover_1.default, { toggleDrawer: toggleDrawer }) : '')),
1035
1040
  react_1.default.createElement(InboxSidebar_1.default, { userId: userId, user: channel, handleSelectMessgae: handleSelectMessgae, currentUser: currentUser, messageList: messageList })),
1036
1041
  react_1.default.createElement("div", { className: "add-conversations" },
@@ -1057,7 +1062,7 @@ function InboxMessage() {
1057
1062
  react_1.default.createElement("p", null,
1058
1063
  "Use \u2191\u2193 to browse, \u21B5 to select.",
1059
1064
  react_1.default.createElement("span", null, " ")))))))),
1060
- 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"))),
1065
+ 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"))),
1061
1066
  react_1.default.createElement("div", { className: `msg-container${toggleDrawer ? '-active' : ''}` },
1062
1067
  react_1.default.createElement("div", { className: "border" }),
1063
1068
  showMessageSide == true ? (react_1.default.createElement(Messages_1.default, { id: id, user: user, userId: userId, currentUser: currentUser })) : ('')),