@social-mail/social-mail-client 1.8.268 → 1.8.270

package/src/public/channel/controls/channel-post/ChannelPost.global.css

@@ -9,6 +9,38 @@ channel-post {
     padding: 10px;
     border-radius: 10px;
 
+    &[enable-buy] {
+        > post-highlight {
+            display: flex;
+        }
+        & footer button[data-element=buy-now] {
+            display: flex;
+        }
+    }
+
+    & > post-highlight {
+        display: none;
+        flex-direction: column;
+        gap: 5px;
+        border-radius: 10px;
+        padding: 10px;
+        border: solid 1px lightgray;
+        & [data-element=buy-now] {
+            border-radius: 9999px;
+            background-color: var(--primary-action-color, green);
+            color: var(--primary-action-text-color, white);
+            display: none;
+            flex-direction: row;
+            align-items: center;
+            border-color: transparent;
+            gap: 10px;
+            padding: 2px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+
+
     & > channel-name {
         grid-row: 1;
         grid-column: 1;
@@ -72,6 +104,20 @@ channel-post {
             cursor: pointer;
         }
 
+        & > [data-element=buy-now] {
+            border-radius: 9999px;
+            background-color: var(--primary-action-color, green);
+            color: var(--primary-action-text-color, white);
+            display: none;
+            flex-direction: row;
+            align-items: center;
+            border-color: transparent;
+            gap: 10px;
+            padding: 2px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
         & > [data-element=engage] {
             border-radius: 9999px;
             background-color: var(--accent-color);

package/src/public/channel/controls/channel-post/ChannelPost.tsx

@@ -20,6 +20,8 @@ declare global {
             "post-date": any;
             "post-description": any;
             "emoji-span": any;
+            "post-highlight": any;
+            "product-price": any;
         }
     }
 }
@@ -52,20 +54,35 @@ export default function ChannelPost(email: IChannelEmail) {
     const full = email[showFullDetails];
 
     return <channel-post has-attachments={email.email.attachments?.length > 0}>
-        <channel-name>{email.mailbox.emailAddress.name}</channel-name>
-        {full
-            ? <post-title>{email.email.subject}</post-title>
-            : <a href={UrlService.toBlogUrl(email)}><post-title>{email.email.subject}</post-title></a>
-        }
+        <header>
+            <channel-name>{email.mailbox.emailAddress.name}</channel-name>
+            {full
+                ? <post-title>{email.email.subject}</post-title>
+                : <a href={UrlService.toBlogUrl(email)}><post-title>{email.email.subject}</post-title></a>
+            }
+
+            <post-date title={DateFormats.withWeekDayAndTime(email.datePublished)}>{ DateFormats.relative.short(email.datePublished)}</post-date>
+        </header>
 
-        <post-date title={DateFormats.withWeekDayAndTime(email.datePublished)}>{ DateFormats.relative.short(email.datePublished)}</post-date>
         <MediaCarousel email={email.email}/>
+
+        <post-highlight>
+            <div>Buy now, for only <product-price></product-price>, </div>
+            <div><button data-element="buy-now">Buy Now</button></div>
+        </post-highlight>
+
         { full
             ?   <post-description data-element="description" { ... renderMailPromise({ email: email.email })}/>
             :   <LimitedText data-element="description">
                     <post-description  { ... renderMailPromise({ email: email.email })}/>
                 </LimitedText>
         }
+
+        <post-highlight>
+            <div>Buy now, for only <product-price></product-price>, </div>
+            <div><button data-element="buy-now">Buy Now</button></div>
+        </post-highlight>
+
         <footer>
             { ... engagements.map((x: IEmailEngagement, index) =>
                 <span
@@ -109,6 +126,11 @@ export default function ChannelPost(email: IChannelEmail) {
                     />
                 Reply
             </button>
+
+            { !email.email.parentID && <button
+                data-click-event="buy-now"
+                data-element="buy-now">Buy Now</button>}
+
             <share-button
                 title={email.email.subject}
                 href={location.href}><i class="fas fa-share"/> Share</share-button>

package/src/public/channel/pages/posts/ChannelPage.tsx

@@ -176,6 +176,12 @@ export default class ChannelPage extends ContentPage {
         this.reactAction(email, emoji);
     }
 
+    @Action({ onEvent: "buy-now"})
+    buyNowClick({ email }) {
+        location.href = "/social-mail/channel-store/buy/" + email.emailID;
+    }
+
+
     reactAction(email: IEmail, emoji) {
         const { headerMessageID } = email;
         const { channel: { emailAddress: { emailAddress }} } = this;

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

@@ -325,6 +325,12 @@ export default class ConversationPage extends ContentPage {
                         icon="fas fa-ban"
                         label="Block Sender"/>
                 }
+                {/* <MenuItem
+                    data-click-event="report-threads"
+                    icon="fad fa-shield-quartered"
+                    data-color="red"
+                    label="Report"
+                    /> */}
             </div>
         </PopupActionButton>;
 

package/src/web/page/mails/mini-compose/MiniComposeBox.tsx

@@ -41,6 +41,7 @@ import MailboxDropDown from "../../../../common/controls/mailboxes/MailboxDropDo
 import { fileUrl } from "../../../../common/fileUrl";
 
 import "./styles/mini-compose.local.css";
+import { FilesDragDrop } from "../../../../common/controls/drag-drop/FilesDragDrop";
 
 const css = "mini-compose-page";
 
@@ -51,6 +52,11 @@ const defaultEmailBody = `<section style="${defaultMessageBodyStyle}">
 <footer data-social-mail-commands="emoji-bar"></footer>
 </section>`;
 
+const maxSize = 25*1024*1024;
+const stream = true;
+const maxStreamSize = 100*1024*1024;
+
+
 const addRecipient = (e: IEmail, a: IEmailRecipient[], type: "from" | "to" | "cc" | "bcc") => {
     if (!a) {
         return;
@@ -133,6 +139,7 @@ export default class MiniComposeBox extends AtomControl {
         this.to ??= [];
         this.cc ??= [];
         this.bcc ??= [];
+        this.draft.attachments ??= [];
         if (this.draft.recipients) {
             for (const iterator of this.draft.recipients) {
                 if (iterator.type === "to") {
@@ -161,7 +168,14 @@ export default class MiniComposeBox extends AtomControl {
             ? this.draft.htmlBody
             : defaultEmailBody;
 
-        this.renderer = <div>
+        this.renderer = <div
+            { ... FilesDragDrop({
+                extra: JSON.stringify({
+                    insert: true,
+                    stream,
+                })
+            })}
+            >
             <div data-layout="vertical-flex-stretch-items" style-width="100%">
                 { this.showSender && <div data-layout="row">
                     From: <MailboxDropDown

package/src/web/page/mails/service/ConversationService.tsx

@@ -132,13 +132,21 @@ export const renderMailPromise = AtomControl.registerProperty<{ thread?: IMailbo
     msg.setAttribute("msg", "msg");
     container.appendChild(msg);
 
-    const root = AncestorEnumerator.find(e, (x) => x.tagName === "CHANNEL-POST" || x.hasAttribute("data-msg-container"));
+    const root = AncestorEnumerator.find(e, (x) => x.tagName === "CHANNEL-POST" || x.hasAttribute("data-msg-container")) ?? e;
 
+    for (const a of Array.from(msg.querySelectorAll(`a[hash-tag]`))) {
+        const tag = a.getAttribute("hash-tag");
+        const tokens = tag.toLowerCase().split("/");
+        if (tokens[0] !== "#price") {
+            continue;
+        }
+        root.setAttribute("enable-buy", "true");
+    }
 
     // detect if first element is an image or video
     // without any text...
     if (/img|video/i.test(firstVisibleElement?.tagName)) {
-        (root ?? e).setAttribute("has-poster", "true");
+        root.setAttribute("has-poster", "true");
     }
 
     const included = email.attachments?.every((x) => (x as any).included);