@social-mail/social-mail-client 1.8.286 → 1.8.288

package/src/web/page/mails/ConversationPage.tsx

@@ -35,7 +35,9 @@ import WebHookListPage from "./web-hooks/WebHookListPage";
 
 import "./styles/conversation-page.local.css";
 import AtomPopover from "@web-atoms/web-controls/dist/basic/elements/AtomPopover";
-import ReportEmailCommand from "./commands/ReportEmailCommand";
+import { ReportPhishingCommand, ReportSpamCommand } from "./commands/ReportEmailCommand";
+import { ReportConversationPhishing, ReportConversationSpam } from "./commands/ReportConversationCommand";
+import NewConversationRequest from "./commands/NewConversationRequest";
 
 const itemCss = "conversation-page-item-css";
 
@@ -61,6 +63,8 @@ export default class ConversationPage extends ContentPage {
 
     public keep = true;
 
+    public mailsRepeater: AtomRepeater;
+
     @InjectProperty
     private conversationService: ConversationService;
 
@@ -70,8 +74,6 @@ export default class ConversationPage extends ContentPage {
 
     private tags: ISearchItem[] = [];
 
-    private mailsRepeater: AtomRepeater;
-
     async init() {
 
         this.element.className = css;
@@ -356,17 +358,7 @@ export default class ConversationPage extends ContentPage {
     showComposeButton(email = null) {
 
         if (this.parameters.newRequest || this.parameters.folderTagID === SocialMailApp.newFolderTagID) {
-            this.footerRenderer = () => <div>
-                <div data-layout="vertical-flex-center-items">
-                    <h5>This sender does not exist in your contacts, and this sender's emails will be restricted in future
-                        unless you approve the sender.
-                    </h5>
-                    <AddIconTextButton
-                        data-click-event="approve-sender"
-                        text="Approve Sender"
-                        />
-                </div>
-            </div>;
+            this.footerRenderer = () => <NewConversationRequest/>;
             return;
         }
 
@@ -528,8 +520,8 @@ export default class ConversationPage extends ContentPage {
                     icon="fa-regular fa-clock-rotate-left"
                     label="Delete Draft"
                     />}
-                <ReportEmailCommand
-                    />
+                <ReportSpamCommand/>
+                <ReportPhishingCommand/>
         </div>);
     }
 

package/src/web/page/mails/commands/NewConversationRequest.local.css

@@ -0,0 +1,18 @@
+.new-conversation-request {
+    & > div {
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 10px;
+        border-radius: 10px;
+
+        & h4, & h5, & h6 {
+            margin: 0;
+        }
+        & button[data-layout=reject-icon-button] {
+            background-color: white;
+            color: red;
+        }
+    }
+}

package/src/web/page/mails/commands/NewConversationRequest.tsx

@@ -0,0 +1,30 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AddIconTextButton, DeleteIconTextButton } from "../../../../common/controls/buttons/IconButton";
+import { ReportConversationSpam, ReportConversationPhishing } from "./ReportConversationCommand";
+
+import "./NewConversationRequest.local.css";
+
+export default function NewConversationRequest() {
+    return <div class="new-conversation-request">
+        <div>
+            <h5>This sender does not exist in your contacts, and this sender's emails will be restricted in future
+                unless you approve the sender.
+            </h5>
+            <div data-layout="flex-center">
+                <AddIconTextButton
+                    data-click-event="approve-sender"
+                    text="Approve Sender"
+                />
+                <DeleteIconTextButton
+                    data-click-event="block-sender"
+                    text="Block Sender"
+                    />
+            </div>
+            <h6>If you believe this message contains spam or any harmful activity, we encourage you to please report them.</h6>
+            <div data-layout="flex-center">
+                <ReportConversationSpam/>
+                <ReportConversationPhishing/>
+            </div>
+        </div>
+    </div>;
+}

package/src/web/page/mails/commands/ReportConversationCommand.tsx

@@ -0,0 +1,43 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import UICommand from "../../../../common/ui-commands/UICommand";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import MiniComposePage from "../mini-compose/MiniComposePage";
+import { Mailto } from "../../../../common/Mailto";
+import { DeleteIconTextButton } from "../../../../common/controls/buttons/IconButton";
+import type ConversationPage from "../ConversationPage";
+
+UICommand.on<ConversationPage>("report-spam", async ({ control }) => {
+    PageNavigator.pushPage(MiniComposePage, {
+        mailto: Mailto.create({ to: "report@esocialmail.com", subject: "Spam Report", body: "Attached email contains #Spam." }),
+        thread: control.mailsRepeater.items[0],
+        asAttachment: true
+    });
+});
+
+
+UICommand.on<ConversationPage>("report-phishing", async ({ control }) => {
+    PageNavigator.pushPage(MiniComposePage, {
+        mailto: Mailto.create({ to: "report@esocialmail.com", subject: "Phishing Report", body: "Attached email contains #Phishing." }),
+        thread: control.mailsRepeater.items[0],
+        asAttachment: true
+    });
+});
+
+export function ReportConversationPhishing() {
+    return <DeleteIconTextButton
+        data-click-event="report-conversation-phishing"
+        icon="fad fa-shield-quartered"
+        data-color="red"
+        text="Report Phishing"
+        />;
+}
+
+
+export function ReportConversationSpam() {
+    return <DeleteIconTextButton
+        data-click-event="report-conversation-spam"
+        icon="fad fa-shield-quartered"
+        data-color="red"
+        text="Report Spam"
+        />;
+}

package/src/web/page/mails/commands/ReportEmailCommand.tsx

@@ -4,20 +4,40 @@ import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
 import MiniComposePage from "../mini-compose/MiniComposePage";
 import { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import { Mailto } from "../../../../common/Mailto";
 
-UICommand.on<AtomRepeater>("report-email", async ({ data, control }) => {
+UICommand.on<AtomRepeater>("report-spam", async ({ data, control }) => {
     PageNavigator.pushPage(MiniComposePage, {
-        mailto: "mailto:report@esocialmail.com",
+        mailto: Mailto.create({ to: "report@esocialmail.com", subject: "Spam Report", body: "Attached email contains #Spam." }),
         thread: data,
         asAttachment: true
     });
 });
 
-export default function ReportEmailCommand() {
+
+UICommand.on<AtomRepeater>("report-phishing", async ({ data, control }) => {
+    PageNavigator.pushPage(MiniComposePage, {
+        mailto: Mailto.create({ to: "report@esocialmail.com", subject: "Phishing Report", body: "Attached email contains #Phishing." }),
+        thread: data,
+        asAttachment: true
+    });
+});
+
+export function ReportPhishingCommand() {
+    return <MenuItem
+        data-click-event="report-phishing"
+        icon="fad fa-shield-quartered"
+        data-color="red"
+        label="Report Phishing"
+        />;
+}
+
+
+export function ReportSpamCommand() {
     return <MenuItem
-        data-click-event="report-email"
+        data-click-event="report-spam"
         icon="fad fa-shield-quartered"
         data-color="red"
-        label="Report"
+        label="Report Spam"
         />;
 }

package/src/web/page/mails/contacts/MailboxContacts.tsx

@@ -244,12 +244,17 @@ export default class MailsPage extends MasterDetailPage {
         }
         if (!this.selectedThread) {
             this.selectedThread = this.mails[0];
-            return;
+            if (this.selectedThread) {
+                return this.mailSelected();
+            }
         }
         const st = this.mails.find((x) => x.mailboxID === this.selectedThread.mailboxID && x.emailAddressID === this.selectedThread.emailAddressID);
-        if (st !== this.selectedThread) {
+        if (st && st !== this.selectedThread) {
             this.selectedThread = st;
+        } else {
+            this.selectedThread = this.mails[0];
         }
+        return this.mailSelected();
     }
 
     @Action({ onEvent: "mail-selected", defer: 100 })