urnovl-web-components 0.0.190 → 0.0.192

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 (32) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/ur-notification.cjs.entry.js +32 -1
  3. package/dist/cjs/ur-page-profile.cjs.entry.js +42 -4
  4. package/dist/cjs/urnovl-web-components.cjs.js +1 -1
  5. package/dist/collection/components/ur-notification/ur-notification.js +33 -2
  6. package/dist/collection/components/ur-page-profile/ur-page-profile.js +82 -18
  7. package/dist/collection/stories/UrNotification.stories.js +80 -1
  8. package/dist/components/ur-notification.js +32 -1
  9. package/dist/components/ur-page-profile.js +44 -5
  10. package/dist/esm/loader.js +1 -1
  11. package/dist/esm/ur-notification.entry.js +32 -1
  12. package/dist/esm/ur-page-profile.entry.js +42 -4
  13. package/dist/esm/urnovl-web-components.js +1 -1
  14. package/dist/types/components/ur-notification/ur-notification.d.ts +5 -0
  15. package/dist/types/components/ur-notification/ur-notification.types.d.ts +18 -2
  16. package/dist/types/components/ur-page-profile/ur-page-profile.d.ts +5 -2
  17. package/dist/types/components.d.ts +6 -4
  18. package/dist/types/models/page.d.ts +4 -0
  19. package/dist/types/stories/UrNotification.stories.d.ts +388 -38
  20. package/dist/urnovl-web-components/p-2a22e081.entry.js +1 -0
  21. package/dist/urnovl-web-components/p-d8629e8f.entry.js +1 -0
  22. package/dist/urnovl-web-components/urnovl-web-components.esm.js +1 -1
  23. package/package.json +1 -1
  24. package/www/build/p-2a22e081.entry.js +1 -0
  25. package/www/build/p-d8629e8f.entry.js +1 -0
  26. package/www/build/p-fd2814dc.js +1 -0
  27. package/www/build/urnovl-web-components.esm.js +1 -1
  28. package/dist/urnovl-web-components/p-618f9aee.entry.js +0 -1
  29. package/dist/urnovl-web-components/p-6ec5837d.entry.js +0 -1
  30. package/www/build/p-5c5f4fa6.js +0 -1
  31. package/www/build/p-618f9aee.entry.js +0 -1
  32. package/www/build/p-6ec5837d.entry.js +0 -1
@@ -19,6 +19,12 @@ export class UrNotification {
19
19
  notification: this.notification,
20
20
  });
21
21
  }
22
+ handleAcceptMembershipRequest() {
23
+ this.emitEvent('mrequest_accept');
24
+ }
25
+ handleRejectMembershipRequest() {
26
+ this.emitEvent('mrequest_reject');
27
+ }
22
28
  renderFollowNotification() {
23
29
  if (this.notification.event !== 'followed')
24
30
  return null;
@@ -28,22 +34,47 @@ export class UrNotification {
28
34
  !this.isFollowing && (h("ur-button", { class: "action followb", variant: "filled", onClick: () => this.emitEvent('follow_back') }, "Follow back"))
29
35
  ];
30
36
  }
37
+ renderPageFollowNotification() {
38
+ if (this.notification.event !== 'pfollowed')
39
+ return null;
40
+ const { creator, page } = this.notification;
41
+ return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('profile_click') }, h("div", { class: "message" }, creator.displayName, " has followed your page ", h("b", null, page.name), "."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt })))));
42
+ }
31
43
  renderCommentNotification() {
32
44
  if (this.notification.event !== 'commented')
33
45
  return null;
34
46
  const { creator, novl, chapter } = this.notification;
35
47
  return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('comment_click') }, h("div", { class: "message" }, creator.displayName, " has commented in chapter ", chapter.number, " of novl ", h("b", null, novl.title), "."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt })))));
36
48
  }
49
+ renderMembershipRequestNotification() {
50
+ if (this.notification.event !== 'mrequest')
51
+ return null;
52
+ const { creator } = this.notification;
53
+ return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('profile_click') }, h("div", { class: "message" }, creator.displayName, " has requested to become a member."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt }))), h("ur-button", { class: "action accept", variant: "filled", onClick: () => this.handleAcceptMembershipRequest() }, "Accept"), h("ur-button", { class: "action reject", variant: "outlined", onClick: () => this.handleRejectMembershipRequest() }, "Reject")));
54
+ }
55
+ renderMembershipDecisionNotification() {
56
+ if (this.notification.event !== 'mrequestaccepted' && this.notification.event !== 'mrequestrejected')
57
+ return null;
58
+ const { creator } = this.notification;
59
+ return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('profile_click') }, h("div", { class: "message" }, creator.displayName, " has ", this.notification.event === 'mrequestaccepted' ? 'accepted' : 'rejected', " your membership request."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt })))));
60
+ }
37
61
  render() {
38
- return (h(Host, { key: 'f79e5df8df8c344d893bb196e08d3ba159d0ade2', class: {
62
+ return (h(Host, { key: 'f0f29669220b7adf5e7cf2a30ef9d109b1eba711', class: {
39
63
  'notification': true,
40
64
  'notification--read': this.isRead,
41
65
  } }, (() => {
42
66
  switch (this.notification.event) {
43
67
  case 'followed':
44
68
  return this.renderFollowNotification();
69
+ case 'pfollowed':
70
+ return this.renderPageFollowNotification();
45
71
  case 'commented':
46
72
  return this.renderCommentNotification();
73
+ case 'mrequest':
74
+ return this.renderMembershipRequestNotification();
75
+ case 'mrequestaccepted':
76
+ case 'mrequestrejected':
77
+ return this.renderMembershipDecisionNotification();
47
78
  default:
48
79
  return h("div", { class: "unsupported" }, "Unsupported notification type: ", this.notification.event);
49
80
  }
@@ -68,7 +99,7 @@ export class UrNotification {
68
99
  "mutable": false,
69
100
  "complexType": {
70
101
  "original": "NotificationType",
71
- "resolved": "CommentNotification | FollowNotification",
102
+ "resolved": "CommentNotification | FollowNotification | MembershipAcceptNotification | MembershipRejectNotification | MembershipRequestNotification | PageFollowNotification",
72
103
  "references": {
73
104
  "NotificationType": {
74
105
  "location": "import",
@@ -47,10 +47,48 @@ export class UrPageProfile {
47
47
  this.donateText = 'Donate';
48
48
  this.sendMessageText = 'Message';
49
49
  this.followed = false;
50
+ this.memberRequestStatus = 'idle';
50
51
  }
51
52
  componentWillLoad() {
52
53
  this.updateFollowText();
53
54
  }
55
+ handleBecomeMemberClicked() {
56
+ if (this.memberRequestStatus !== 'idle') {
57
+ return;
58
+ }
59
+ this.memberRequestStatus = 'pending';
60
+ this.pageMemberClicked.emit({
61
+ pageId: this.pageId,
62
+ status: this.memberRequestStatus,
63
+ });
64
+ }
65
+ // private handleAcceptMembershipRequest() {
66
+ // this.memberRequestStatus = 'accepted';
67
+ // this.pageMemberClicked.emit({
68
+ // pageId: this.pageId,
69
+ // status: this.memberRequestStatus,
70
+ // });
71
+ // }
72
+ //
73
+ // private handleRejectMembershipRequest() {
74
+ // this.memberRequestStatus = 'rejected';
75
+ // this.pageMemberClicked.emit({
76
+ // pageId: this.pageId,
77
+ // status: this.memberRequestStatus,
78
+ // });
79
+ // }
80
+ getBecomeMemberButtonText() {
81
+ switch (this.memberRequestStatus) {
82
+ case 'pending':
83
+ return 'Request Pending...';
84
+ case 'accepted':
85
+ return 'You\'re a Member';
86
+ case 'rejected':
87
+ return this.becomeMemberText;
88
+ default:
89
+ return this.becomeMemberText;
90
+ }
91
+ }
54
92
  updateFollowText() {
55
93
  this.followText = this.followed ? 'Unfollow' : 'Follow';
56
94
  }
@@ -69,14 +107,14 @@ export class UrPageProfile {
69
107
  'profile-mobile-main': this.platform === 'mobile-main',
70
108
  'profile-mobile-secondary': this.platform === 'mobile-secondary',
71
109
  };
72
- return (h(Host, { key: '06d7715e8b6c2124331892ca403feaebbb849524', class: classes }, h("div", { key: '301fd71f62cc2c6db0abcef2ad17d0caea14b820', class: classes }, this.platform === 'desktop' && (h("div", { key: '42fe94efe814cb20bfe12128b24d08fdc369786b', class: "desktop-content" }, h("div", { key: 'aa0352a56ea0312d6b511cf93a43caabea1961cc', class: "avatar" }, h("ur-avatar", { key: '6ccc20b7de2fcb0561fb7717fe97f0b8cbd6481a', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: 'ca505a2ff41605900745ab6a2e64c705cb4961e1', class: "info" }, h("div", { key: 'eab7cd39928c8018972f922ded682d0a498c2576', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: 'ef22cd740ece239fe934e281d7e15fa37f477cd2', class: "about" }, this.about), this.renderLocation(), this.renderSocialLinks(), this.renderWebsite()), this.renderActions())), this.platform === 'desktop' && [
110
+ return (h(Host, { key: 'f5075f0f41d5f7ae92692bd6e1a229e9dc80dfc4', class: classes }, h("div", { key: '852cbfdc002a700114d864a6a6a351e4e74ce6df', class: classes }, this.platform === 'desktop' && (h("div", { key: 'fc7a52b7f982e73098a34435d805dee83258a448', class: "desktop-content" }, h("div", { key: '73db35d104d31f0e0ce9e360d2a4e2f1b09744a5', class: "avatar" }, h("ur-avatar", { key: 'db3bbb136f6b208fcbdcfb33e5471881de0f8f9e', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: '540fb9017c7195d4938dd48fb375e2b63fba696f', class: "info" }, h("div", { key: 'acca66315a7a8f354fdee43d2fce3ce4c2447516', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: 'eb99c913d94f1b7a11a768a60f5a09a8b17a796c', class: "about" }, this.about), this.renderLocation(), this.renderSocialLinks(), this.renderWebsite()), this.renderActions())), this.platform === 'desktop' && [
73
111
  this.renderStats(),
74
112
  this.renderLanguages(),
75
113
  this.renderGenres(),
76
114
  this.renderLiteratureTypes(),
77
115
  this.renderPageCreator(),
78
116
  this.renderPageCreationDate(),
79
- ], this.platform === 'mobile-main' && (h("div", { key: 'd8b8185615a0cb8162956c87bdcb34f6cad72979', class: "mobile-main-content" }, h("div", { key: '7be62ade7ca54a5f19d018d80ea587744c95490d', class: "avatar" }, h("ur-avatar", { key: '68cb3d8130a0f00f3c1aee591bc4ac020cdf9f97', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: '62396e514cda7203edf16009154e14500949b6cf', class: "info" }, h("div", { key: 'e281007cd85e4388d1c2b4f1141376ea6802b94d', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: '450e4a9cdd777e033fd3b7cc1961569e249b1a27', class: "about" }, this.about)), this.renderActions())), this.platform === 'mobile-secondary' && [
117
+ ], this.platform === 'mobile-main' && (h("div", { key: '7e2cffef0dfe918ea2d66fd6a5491c20fad01bad', class: "mobile-main-content" }, h("div", { key: 'f8af7a18c89eea69d1de4d7b94d68dd9d4e17457', class: "avatar" }, h("ur-avatar", { key: '4d753252fc4b6828c6c5a3cc72e4b1d43e8d3477', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: '13bfb9d36e50d79fcdea5f682a7db73621af8c52', class: "info" }, h("div", { key: '7bf6e43432ee10aa1440f61942da1b8f3044121d', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: '3c56ffa13000343a6f90fa972ab5a8a9883892c3', class: "about" }, this.about)), this.renderActions())), this.platform === 'mobile-secondary' && [
80
118
  this.renderLocation(),
81
119
  this.renderSocialLinks(),
82
120
  this.renderWebsite(),
@@ -110,7 +148,7 @@ export class UrPageProfile {
110
148
  return (h("a", { class: "website", onClick: () => this.websiteClick.emit(), title: "website" }, h("span", { class: "icon", innerHTML: Icons.website }), this.websiteText));
111
149
  }
112
150
  renderActions() {
113
- return (h("div", { class: `actions ${this.platform === 'mobile-main' ? 'actions--mobile-main' : ''}` }, this.showFollow && (h("ur-button", { class: "follow", onClick: () => this.handleFollowClicked() }, this.followText)), this.showBecomeMember && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.member.emit() }, this.becomeMemberText)), this.showDonate && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.donate.emit() }, this.donateText)), this.showSendMessage && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.sendMessage.emit() }, this.sendMessageText)), this.isPageOwner && (h("ur-button", { class: "invite-members", variant: "outlined", onClick: () => this.inviteMembers.emit() }, this.inviteMembersText))));
151
+ return (h("div", { class: `actions ${this.platform === 'mobile-main' ? 'actions--mobile-main' : ''}` }, this.showFollow && (h("ur-button", { class: "follow", onClick: () => this.handleFollowClicked() }, this.followText)), this.showBecomeMember && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", disabled: this.memberRequestStatus !== 'idle', onClick: () => this.handleBecomeMemberClicked() }, this.getBecomeMemberButtonText())), this.showDonate && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.donate.emit() }, this.donateText)), this.showSendMessage && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.sendMessage.emit() }, this.sendMessageText)), this.isPageOwner && (h("ur-button", { class: "invite-members", variant: "outlined", onClick: () => this.inviteMembers.emit() }, this.inviteMembersText))));
114
152
  }
115
153
  renderStats() {
116
154
  return (h("div", { class: "stats" }, (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.storiesText), h("div", { class: "value" }, this.stories)))), (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.viewsText), h("div", { class: "value" }, this.views)))), (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.followersText), h("div", { class: "value clickable", onClick: () => this.followersClick.emit() }, this.followers)))), (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.membersText), h("div", { class: "value clickable", onClick: () => this.membersClick.emit() }, this.members))))));
@@ -1050,26 +1088,31 @@ export class UrPageProfile {
1050
1088
  "attribute": "followed",
1051
1089
  "reflect": false,
1052
1090
  "defaultValue": "false"
1091
+ },
1092
+ "memberRequestStatus": {
1093
+ "type": "string",
1094
+ "mutable": false,
1095
+ "complexType": {
1096
+ "original": "'idle' | 'pending' | 'accepted' | 'rejected'",
1097
+ "resolved": "\"accepted\" | \"idle\" | \"pending\" | \"rejected\"",
1098
+ "references": {}
1099
+ },
1100
+ "required": false,
1101
+ "optional": false,
1102
+ "docs": {
1103
+ "tags": [],
1104
+ "text": ""
1105
+ },
1106
+ "getter": false,
1107
+ "setter": false,
1108
+ "attribute": "member-request-status",
1109
+ "reflect": false,
1110
+ "defaultValue": "'idle'"
1053
1111
  }
1054
1112
  };
1055
1113
  }
1056
1114
  static get events() {
1057
1115
  return [{
1058
- "method": "member",
1059
- "name": "member",
1060
- "bubbles": true,
1061
- "cancelable": true,
1062
- "composed": true,
1063
- "docs": {
1064
- "tags": [],
1065
- "text": ""
1066
- },
1067
- "complexType": {
1068
- "original": "any",
1069
- "resolved": "any",
1070
- "references": {}
1071
- }
1072
- }, {
1073
1116
  "method": "donate",
1074
1117
  "name": "donate",
1075
1118
  "bubbles": true,
@@ -1270,6 +1313,27 @@ export class UrPageProfile {
1270
1313
  }
1271
1314
  }
1272
1315
  }
1316
+ }, {
1317
+ "method": "pageMemberClicked",
1318
+ "name": "pageMemberClicked",
1319
+ "bubbles": true,
1320
+ "cancelable": true,
1321
+ "composed": true,
1322
+ "docs": {
1323
+ "tags": [],
1324
+ "text": ""
1325
+ },
1326
+ "complexType": {
1327
+ "original": "PageMemberEvent",
1328
+ "resolved": "{ pageId: string; status: \"idle\" | \"pending\" | \"accepted\" | \"rejected\"; }",
1329
+ "references": {
1330
+ "PageMemberEvent": {
1331
+ "location": "import",
1332
+ "path": "../../models/page",
1333
+ "id": "src/models/page.ts::PageMemberEvent"
1334
+ }
1335
+ }
1336
+ }
1273
1337
  }];
1274
1338
  }
1275
1339
  }
@@ -58,6 +58,34 @@ export const AlreadyFollowingNotification = {
58
58
  locale: 'en',
59
59
  },
60
60
  };
61
+ // Page Follow Notification
62
+ export const PageFollowNotification = {
63
+ args: {
64
+ notification: {
65
+ _id: '7',
66
+ event: 'pfollowed',
67
+ creator: {
68
+ _id: 'user123',
69
+ displayName: 'John Doe',
70
+ profileImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces',
71
+ followed: false,
72
+ },
73
+ page: {
74
+ name: 'My Page',
75
+ },
76
+ read: false,
77
+ updatedAt: new Date().toISOString(),
78
+ },
79
+ locale: 'en',
80
+ },
81
+ };
82
+ // Read Page Follow Notification
83
+ export const ReadPageFollowNotification = {
84
+ args: {
85
+ notification: Object.assign(Object.assign({}, PageFollowNotification.args.notification), { read: true }),
86
+ locale: 'en',
87
+ },
88
+ };
61
89
  // No Profile Image
62
90
  export const NoProfileImageNotification = {
63
91
  args: {
@@ -100,11 +128,62 @@ export const CommentNotification = {
100
128
  locale: 'en',
101
129
  },
102
130
  };
131
+ // Membership Request Notification
132
+ export const MembershipRequestNotification = {
133
+ args: {
134
+ notification: {
135
+ _id: '3',
136
+ event: 'mrequest',
137
+ creator: {
138
+ _id: 'user123',
139
+ displayName: 'John Doe',
140
+ profileImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces',
141
+ },
142
+ read: false,
143
+ updatedAt: new Date().toISOString(),
144
+ },
145
+ locale: 'en',
146
+ },
147
+ };
148
+ // Membership Acceptance Notification
149
+ export const MembershipAcceptNotification = {
150
+ args: {
151
+ notification: {
152
+ _id: '4',
153
+ event: 'mrequestaccepted',
154
+ creator: {
155
+ _id: 'user123',
156
+ displayName: 'John Doe',
157
+ profileImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces',
158
+ },
159
+ read: false,
160
+ updatedAt: new Date().toISOString(),
161
+ },
162
+ locale: 'en',
163
+ },
164
+ };
165
+ // Membership Rejection Notification
166
+ export const MembershipRejectNotification = {
167
+ args: {
168
+ notification: {
169
+ _id: '5',
170
+ event: 'mrequestrejected',
171
+ creator: {
172
+ _id: 'user123',
173
+ displayName: 'John Doe',
174
+ profileImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces',
175
+ },
176
+ read: false,
177
+ updatedAt: new Date().toISOString(),
178
+ },
179
+ locale: 'en',
180
+ },
181
+ };
103
182
  // Unsupported Notification Type
104
183
  export const UnsupportedNotification = {
105
184
  args: {
106
185
  notification: {
107
- _id: '1',
186
+ _id: '6',
108
187
  event: 'unsupported_type',
109
188
  creator: {
110
189
  _id: 'user123',
@@ -32,6 +32,12 @@ const UrNotification$1 = /*@__PURE__*/ proxyCustomElement(class UrNotification e
32
32
  notification: this.notification,
33
33
  });
34
34
  }
35
+ handleAcceptMembershipRequest() {
36
+ this.emitEvent('mrequest_accept');
37
+ }
38
+ handleRejectMembershipRequest() {
39
+ this.emitEvent('mrequest_reject');
40
+ }
35
41
  renderFollowNotification() {
36
42
  if (this.notification.event !== 'followed')
37
43
  return null;
@@ -41,22 +47,47 @@ const UrNotification$1 = /*@__PURE__*/ proxyCustomElement(class UrNotification e
41
47
  !this.isFollowing && (h("ur-button", { class: "action followb", variant: "filled", onClick: () => this.emitEvent('follow_back') }, "Follow back"))
42
48
  ];
43
49
  }
50
+ renderPageFollowNotification() {
51
+ if (this.notification.event !== 'pfollowed')
52
+ return null;
53
+ const { creator, page } = this.notification;
54
+ return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('profile_click') }, h("div", { class: "message" }, creator.displayName, " has followed your page ", h("b", null, page.name), "."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt })))));
55
+ }
44
56
  renderCommentNotification() {
45
57
  if (this.notification.event !== 'commented')
46
58
  return null;
47
59
  const { creator, novl, chapter } = this.notification;
48
60
  return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('comment_click') }, h("div", { class: "message" }, creator.displayName, " has commented in chapter ", chapter.number, " of novl ", h("b", null, novl.title), "."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt })))));
49
61
  }
62
+ renderMembershipRequestNotification() {
63
+ if (this.notification.event !== 'mrequest')
64
+ return null;
65
+ const { creator } = this.notification;
66
+ return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('profile_click') }, h("div", { class: "message" }, creator.displayName, " has requested to become a member."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt }))), h("ur-button", { class: "action accept", variant: "filled", onClick: () => this.handleAcceptMembershipRequest() }, "Accept"), h("ur-button", { class: "action reject", variant: "outlined", onClick: () => this.handleRejectMembershipRequest() }, "Reject")));
67
+ }
68
+ renderMembershipDecisionNotification() {
69
+ if (this.notification.event !== 'mrequestaccepted' && this.notification.event !== 'mrequestrejected')
70
+ return null;
71
+ const { creator } = this.notification;
72
+ return (h("section", { class: "vert" }, h("ur-avatar", { class: "profile", onClick: () => this.emitEvent('profile_click'), src: creator.profileImage, name: creator.displayName, size: "40px" }), h("section", { class: "content", onClick: () => this.emitEvent('profile_click') }, h("div", { class: "message" }, creator.displayName, " has ", this.notification.event === 'mrequestaccepted' ? 'accepted' : 'rejected', " your membership request."), h("div", { class: "ago" }, h("ur-time-ago", { date: this.notification.updatedAt })))));
73
+ }
50
74
  render() {
51
- return (h(Host, { key: 'f79e5df8df8c344d893bb196e08d3ba159d0ade2', class: {
75
+ return (h(Host, { key: 'f0f29669220b7adf5e7cf2a30ef9d109b1eba711', class: {
52
76
  'notification': true,
53
77
  'notification--read': this.isRead,
54
78
  } }, (() => {
55
79
  switch (this.notification.event) {
56
80
  case 'followed':
57
81
  return this.renderFollowNotification();
82
+ case 'pfollowed':
83
+ return this.renderPageFollowNotification();
58
84
  case 'commented':
59
85
  return this.renderCommentNotification();
86
+ case 'mrequest':
87
+ return this.renderMembershipRequestNotification();
88
+ case 'mrequestaccepted':
89
+ case 'mrequestrejected':
90
+ return this.renderMembershipDecisionNotification();
60
91
  default:
61
92
  return h("div", { class: "unsupported" }, "Unsupported notification type: ", this.notification.event);
62
93
  }
@@ -74,7 +74,6 @@ const UrPageProfile$1 = /*@__PURE__*/ proxyCustomElement(class UrPageProfile ext
74
74
  super();
75
75
  this.__registerHost();
76
76
  this.__attachShadow();
77
- this.member = createEvent(this, "member", 7);
78
77
  this.donate = createEvent(this, "donate", 7);
79
78
  this.sendMessage = createEvent(this, "sendMessage", 7);
80
79
  this.followersClick = createEvent(this, "followersClick", 7);
@@ -88,6 +87,7 @@ const UrPageProfile$1 = /*@__PURE__*/ proxyCustomElement(class UrPageProfile ext
88
87
  this.pageCreatorClick = createEvent(this, "pageCreatorClick", 7);
89
88
  this.inviteMembers = createEvent(this, "inviteMembers", 7);
90
89
  this.pageFollowClicked = createEvent(this, "pageFollowClicked", 7);
90
+ this.pageMemberClicked = createEvent(this, "pageMemberClicked", 7);
91
91
  this.platform = 'desktop';
92
92
  this.about = null;
93
93
  this.location = null;
@@ -130,10 +130,48 @@ const UrPageProfile$1 = /*@__PURE__*/ proxyCustomElement(class UrPageProfile ext
130
130
  this.donateText = 'Donate';
131
131
  this.sendMessageText = 'Message';
132
132
  this.followed = false;
133
+ this.memberRequestStatus = 'idle';
133
134
  }
134
135
  componentWillLoad() {
135
136
  this.updateFollowText();
136
137
  }
138
+ handleBecomeMemberClicked() {
139
+ if (this.memberRequestStatus !== 'idle') {
140
+ return;
141
+ }
142
+ this.memberRequestStatus = 'pending';
143
+ this.pageMemberClicked.emit({
144
+ pageId: this.pageId,
145
+ status: this.memberRequestStatus,
146
+ });
147
+ }
148
+ // private handleAcceptMembershipRequest() {
149
+ // this.memberRequestStatus = 'accepted';
150
+ // this.pageMemberClicked.emit({
151
+ // pageId: this.pageId,
152
+ // status: this.memberRequestStatus,
153
+ // });
154
+ // }
155
+ //
156
+ // private handleRejectMembershipRequest() {
157
+ // this.memberRequestStatus = 'rejected';
158
+ // this.pageMemberClicked.emit({
159
+ // pageId: this.pageId,
160
+ // status: this.memberRequestStatus,
161
+ // });
162
+ // }
163
+ getBecomeMemberButtonText() {
164
+ switch (this.memberRequestStatus) {
165
+ case 'pending':
166
+ return 'Request Pending...';
167
+ case 'accepted':
168
+ return 'You\'re a Member';
169
+ case 'rejected':
170
+ return this.becomeMemberText;
171
+ default:
172
+ return this.becomeMemberText;
173
+ }
174
+ }
137
175
  updateFollowText() {
138
176
  this.followText = this.followed ? 'Unfollow' : 'Follow';
139
177
  }
@@ -152,14 +190,14 @@ const UrPageProfile$1 = /*@__PURE__*/ proxyCustomElement(class UrPageProfile ext
152
190
  'profile-mobile-main': this.platform === 'mobile-main',
153
191
  'profile-mobile-secondary': this.platform === 'mobile-secondary',
154
192
  };
155
- return (h(Host, { key: '06d7715e8b6c2124331892ca403feaebbb849524', class: classes }, h("div", { key: '301fd71f62cc2c6db0abcef2ad17d0caea14b820', class: classes }, this.platform === 'desktop' && (h("div", { key: '42fe94efe814cb20bfe12128b24d08fdc369786b', class: "desktop-content" }, h("div", { key: 'aa0352a56ea0312d6b511cf93a43caabea1961cc', class: "avatar" }, h("ur-avatar", { key: '6ccc20b7de2fcb0561fb7717fe97f0b8cbd6481a', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: 'ca505a2ff41605900745ab6a2e64c705cb4961e1', class: "info" }, h("div", { key: 'eab7cd39928c8018972f922ded682d0a498c2576', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: 'ef22cd740ece239fe934e281d7e15fa37f477cd2', class: "about" }, this.about), this.renderLocation(), this.renderSocialLinks(), this.renderWebsite()), this.renderActions())), this.platform === 'desktop' && [
193
+ return (h(Host, { key: 'f5075f0f41d5f7ae92692bd6e1a229e9dc80dfc4', class: classes }, h("div", { key: '852cbfdc002a700114d864a6a6a351e4e74ce6df', class: classes }, this.platform === 'desktop' && (h("div", { key: 'fc7a52b7f982e73098a34435d805dee83258a448', class: "desktop-content" }, h("div", { key: '73db35d104d31f0e0ce9e360d2a4e2f1b09744a5', class: "avatar" }, h("ur-avatar", { key: 'db3bbb136f6b208fcbdcfb33e5471881de0f8f9e', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: '540fb9017c7195d4938dd48fb375e2b63fba696f', class: "info" }, h("div", { key: 'acca66315a7a8f354fdee43d2fce3ce4c2447516', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: 'eb99c913d94f1b7a11a768a60f5a09a8b17a796c', class: "about" }, this.about), this.renderLocation(), this.renderSocialLinks(), this.renderWebsite()), this.renderActions())), this.platform === 'desktop' && [
156
194
  this.renderStats(),
157
195
  this.renderLanguages(),
158
196
  this.renderGenres(),
159
197
  this.renderLiteratureTypes(),
160
198
  this.renderPageCreator(),
161
199
  this.renderPageCreationDate(),
162
- ], this.platform === 'mobile-main' && (h("div", { key: 'd8b8185615a0cb8162956c87bdcb34f6cad72979', class: "mobile-main-content" }, h("div", { key: '7be62ade7ca54a5f19d018d80ea587744c95490d', class: "avatar" }, h("ur-avatar", { key: '68cb3d8130a0f00f3c1aee591bc4ac020cdf9f97', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: '62396e514cda7203edf16009154e14500949b6cf', class: "info" }, h("div", { key: 'e281007cd85e4388d1c2b4f1141376ea6802b94d', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: '450e4a9cdd777e033fd3b7cc1961569e249b1a27', class: "about" }, this.about)), this.renderActions())), this.platform === 'mobile-secondary' && [
200
+ ], this.platform === 'mobile-main' && (h("div", { key: '7e2cffef0dfe918ea2d66fd6a5491c20fad01bad', class: "mobile-main-content" }, h("div", { key: 'f8af7a18c89eea69d1de4d7b94d68dd9d4e17457', class: "avatar" }, h("ur-avatar", { key: '4d753252fc4b6828c6c5a3cc72e4b1d43e8d3477', border: "4px", radius: "25px", size: "96px", src: this.avatar, name: this.name })), h("div", { key: '13bfb9d36e50d79fcdea5f682a7db73621af8c52', class: "info" }, h("div", { key: '7bf6e43432ee10aa1440f61942da1b8f3044121d', class: "name" }, this.name), this.renderPageType(), this.about && h("div", { key: '3c56ffa13000343a6f90fa972ab5a8a9883892c3', class: "about" }, this.about)), this.renderActions())), this.platform === 'mobile-secondary' && [
163
201
  this.renderLocation(),
164
202
  this.renderSocialLinks(),
165
203
  this.renderWebsite(),
@@ -193,7 +231,7 @@ const UrPageProfile$1 = /*@__PURE__*/ proxyCustomElement(class UrPageProfile ext
193
231
  return (h("a", { class: "website", onClick: () => this.websiteClick.emit(), title: "website" }, h("span", { class: "icon", innerHTML: Icons.website }), this.websiteText));
194
232
  }
195
233
  renderActions() {
196
- return (h("div", { class: `actions ${this.platform === 'mobile-main' ? 'actions--mobile-main' : ''}` }, this.showFollow && (h("ur-button", { class: "follow", onClick: () => this.handleFollowClicked() }, this.followText)), this.showBecomeMember && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.member.emit() }, this.becomeMemberText)), this.showDonate && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.donate.emit() }, this.donateText)), this.showSendMessage && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.sendMessage.emit() }, this.sendMessageText)), this.isPageOwner && (h("ur-button", { class: "invite-members", variant: "outlined", onClick: () => this.inviteMembers.emit() }, this.inviteMembersText))));
234
+ return (h("div", { class: `actions ${this.platform === 'mobile-main' ? 'actions--mobile-main' : ''}` }, this.showFollow && (h("ur-button", { class: "follow", onClick: () => this.handleFollowClicked() }, this.followText)), this.showBecomeMember && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", disabled: this.memberRequestStatus !== 'idle', onClick: () => this.handleBecomeMemberClicked() }, this.getBecomeMemberButtonText())), this.showDonate && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.donate.emit() }, this.donateText)), this.showSendMessage && !this.isPageOwner && (h("ur-button", { class: "follow", variant: "outlined", onClick: () => this.sendMessage.emit() }, this.sendMessageText)), this.isPageOwner && (h("ur-button", { class: "invite-members", variant: "outlined", onClick: () => this.inviteMembers.emit() }, this.inviteMembersText))));
197
235
  }
198
236
  renderStats() {
199
237
  return (h("div", { class: "stats" }, (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.storiesText), h("div", { class: "value" }, this.stories)))), (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.viewsText), h("div", { class: "value" }, this.views)))), (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.followersText), h("div", { class: "value clickable", onClick: () => this.followersClick.emit() }, this.followers)))), (h("div", null, h("div", { class: "stat" }, h("div", { class: "key" }, this.membersText), h("div", { class: "value clickable", onClick: () => this.membersClick.emit() }, this.members))))));
@@ -269,7 +307,8 @@ const UrPageProfile$1 = /*@__PURE__*/ proxyCustomElement(class UrPageProfile ext
269
307
  "inviteMembersText": [1, "invite-members-text"],
270
308
  "donateText": [1, "donate-text"],
271
309
  "sendMessageText": [1, "send-message-text"],
272
- "followed": [4]
310
+ "followed": [4],
311
+ "memberRequestStatus": [1, "member-request-status"]
273
312
  }]);
274
313
  function defineCustomElement$1() {
275
314
  if (typeof customElements === "undefined") {