@social-mail/social-mail-client 1.2.708 → 1.2.710

package/src/common/controls/drawer/BaseDrawer.tsx

@@ -0,0 +1,35 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { Drawer } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+
+const css = styled.css `
+    width: 300px;
+
+    background-color: var(--accent-color);
+
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    & > .header, & > header {
+        grid-row: 1;
+        padding: 10px;
+        font-size: large;
+        color: white;
+    }
+    & > .menus, & > section {
+        grid-row: 2;
+        background-color: canvas;
+        padding: var(--spacing);
+        margin: var(--spacing);
+        border-radius: 10px;
+        overflow: auto;
+    }
+
+`.installGlobal("drawer-menu");
+
+export default class BaseDrawer extends Drawer {
+
+    constructor(app, e = document.createElement("drawer-menu")) {
+        super(app, e);
+    }
+
+}

package/src/common/controls/menu/MenuRepeater.tsx

@@ -0,0 +1,22 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+
+    styled.css `
+    &[data-element][data-element][data-element] {
+        padding: 0;
+        margin: 0;
+        border: none;
+        padding-left: 0;
+        margin-left: 25px;
+        border-left: solid 1px lightgray;
+        & > * {
+            padding-left: 20px;
+        }
+    }
+    `.installGlobal("menu-repeater");
+
+export default class MenuRepeater extends AtomRepeater {
+    constructor(app, e = document.createElement("menu-repeater")) {
+        super(app, e);
+    }
+}

package/src/model/model.ts

@@ -1232,6 +1232,7 @@ export interface IStoreItemPrice extends IClrEntity {
 	endDate?: DateTime | null;
 	currency?: string;
 	amount?: number;
+	taxes?: number;
 	maxAmount?: number | null;
 	taxIncluded?: boolean;
 	readonly taxAmount?: number;

package/src/public/store/pages/StoreOrderPage.tsx

@@ -3,8 +3,13 @@ import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import EntityService from "../../../services/EntityService";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import Loader from "../../../common/controls/Loader";
-import { IStoreJournal, StoreJournal } from "../../../model/model";
+import { IStoreJournal, IStoreJournalCoupon, StoreJournal, StoreJournalCoupon } from "../../../model/model";
 import { DateFormats } from "../../../common/date/DateFormats";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { AddIconTextButton } from "../../../common/controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
 
 export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>> {
 
@@ -13,6 +18,9 @@ export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>>
 
     model: IStoreJournal = null;
 
+    newCoupon: IStoreJournalCoupon = StoreJournalCoupon.create({
+    });
+
     async init() {
 
         this.renderer = <div>
@@ -21,7 +29,10 @@ export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>>
 
         const order = this.model = await this.load();
 
+        this.newCoupon.orderID = order.journalID;
+
         order.paymentAttempts ??= [];
+        order.orderCoupons ??= [];
         order.paymentAttempts = order.paymentAttempts.orderByDescending((x) => x.success);
 
         this.renderer = <div>
@@ -39,12 +50,21 @@ export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>>
                     <td>{ DateFormats.withWeekDayAndTime(order.dateUpdated)}</td>
                 </tr>
             </table>
-            <table>
-                { ... order.lineItems.map((item) => <tr>
-                    <td>{item.item.name}</td>
-                    <td>{item.quantity}</td>
-                    <td>{item.itemPrice.amount}</td>
-                </tr>)}
+            <table style-width="300px">
+                <thead>
+                    <th>Item</th>
+                    <th>Qty</th>
+                    <th>Amount</th>
+                    <th>Taxes</th>
+                </thead>
+                <tbody>
+                    { ... order.lineItems.map((item) => <tr>
+                        <td>{item.item.name}</td>
+                        <td>{item.quantity}</td>
+                        <td>{item.itemPrice.amount}</td>
+                        <td>{item.itemPrice.taxes ?? "0"}</td>
+                    </tr>)}
+                </tbody>
             </table>
             <table>
                 <tr>
@@ -54,6 +74,37 @@ export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>>
             </table>
 
             <br/>
+
+            <div>
+                <AtomRepeater
+                    for="table"
+                    header={true}
+                    headerRenderer={(x) => <thead>
+                        <th>Coupons</th>
+                    </thead>}
+                    itemRenderer={(x: IStoreJournalCoupon) => <tbody>
+                        <tr>
+                            <td colSpan={2}>
+                                <label text={x.couponCode}/>
+                                <i
+                                    data-click-event="delete-coupon"
+                                    class="fas fa-times-circle"/>
+                            </td>
+                        </tr>
+                    </tbody>}
+                    items={this.model.orderCoupons}
+                    footer={Bind.oneWay(() => this.newCoupon)}
+                    footerRenderer={() => <tfoot>
+                        <th><input value={Bind.twoWaysImmediate(() => this.newCoupon.couponCode)}/></th>
+                        <th>
+                            <AddIconTextButton
+                                data-click-event="add-coupon"
+                                />
+                        </th>
+                    </tfoot>}
+                    />
+            </div>
+
             <br/>
 
             <table>
@@ -80,9 +131,34 @@ export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>>
                 x.paymentAttempts,
                 x.buyer,
                 x.buyerBillingAddress,
+                x.orderCoupons,
                 x.lineItems.forEach((l) => [l.itemPrice, l.item])])
             .firstOrDefault();
         return order;
     }
 
+    @Action({ onEvent: "add-coupon"})
+    async addCoupon() {
+        const coupon = { ... this.newCoupon };
+        (this.model.orderCoupons ??= []).add(coupon);
+        try {
+            this.model.dateUpdated = DateTime.now;
+            await this.entityService.save(this.model, (c) => c.include((x) => x.orderCoupons));
+        } catch (error) {
+            this.model.orderCoupons.remove(coupon);
+            throw error;
+        }
+        location.reload();
+    }
+
+    @Action({
+        onEvent: "delete-coupon",
+        confirm: "Are you sure you want to delete this coupon?"
+    })
+    async deleteCoupon(coupon: IStoreJournalCoupon) {
+        coupon.$deleted = true;
+        this.model.dateUpdated = DateTime.now;
+        await this.entityService.save(this.model, (c) => c.include((x) => x.orderCoupons));
+        this.model.orderCoupons.remove(coupon);
+    }
 }

package/src/site-editor-app/drawer/SiteEditorDrawer.tsx

@@ -8,47 +8,53 @@ import { IWebSiteFolder } from "../../model/model";
 import SiteEditorCommands from "../commands/SiteEditorCommands";
 import { ExpanderMenu } from "@web-atoms/web-controls/dist/basic/Expander";
 import MenuItem from "../../common/controls/menu/MenuItem";
+import BaseDrawer from "../../common/controls/drawer/BaseDrawer";
 
-export default class SiteEditorDrawer extends Drawer {
+export default class SiteEditorDrawer extends BaseDrawer {
 
     @InjectProperty
     menuService: MenuService;
 
     async init() {
         this.renderer = <div>
-            <AtomRepeater
-                items={Bind.oneWay(() => this.menuService.websites)}
-                itemRenderer={(x: IWebSiteFolder) => <ExpanderMenu isExpanded={true}>
-                    <MenuItem
-                        icon="fas fa-hard-drive"
-                        label={x.folder.name}
-                        commandLink={null}
-                        />
-                    <MenuItem
-                        label="Site Editor"
-                        commandLink={SiteEditorCommands.editWebSite.displayRoute({ id: x.folderID })}/>
-                    <MenuItem
-                        label="Site Files"
-                        commandLink={SiteEditorCommands.openFiles.displayRoute({ id: x.folderID })}/>
-                    {x.storeEnabled && <MenuItem
-                        label="Products"
-                        commandLink={SiteEditorCommands.productList.displayRoute({ storeID: x.folderID })}/>}
-                    {x.storeEnabled && <MenuItem
-                        label="Orders"
-                        commandLink={SiteEditorCommands.orderList.displayRoute({ id: x.folderID })}/>}
-                    {x.storeEnabled && <MenuItem
-                        label="Coupons"
-                        commandLink={SiteEditorCommands.couponList.displayRoute({ storeID: x.folderID })}/>}
-                    {x.storeEnabled && <MenuItem
-                        label="Payment Gateways"
-                        commandLink={SiteEditorCommands.paymentGatewayList.displayRoute({ storeID: x.folderID })}/>}
-                </ExpanderMenu>}
-                />
-            <MenuItem
-                icon="fas fa-hard-drive"
-                label="All Websites"
-                commandLink={SiteEditorCommands.websiteList.displayRoute({})}
-                />
+            <header>
+                Social Websites
+            </header>
+            <section>
+                <AtomRepeater
+                    items={Bind.oneWay(() => this.menuService.websites)}
+                    itemRenderer={(x: IWebSiteFolder) => <ExpanderMenu isExpanded={true}>
+                        <MenuItem
+                            icon="fas fa-hard-drive"
+                            label={x.folder.name}
+                            commandLink={null}
+                            />
+                        <MenuItem
+                            label="Site Editor"
+                            commandLink={SiteEditorCommands.editWebSite.displayRoute({ id: x.folderID })}/>
+                        <MenuItem
+                            label="Site Files"
+                            commandLink={SiteEditorCommands.openFiles.displayRoute({ id: x.folderID })}/>
+                        {x.storeEnabled && <MenuItem
+                            label="Products"
+                            commandLink={SiteEditorCommands.productList.displayRoute({ storeID: x.folderID })}/>}
+                        {x.storeEnabled && <MenuItem
+                            label="Orders"
+                            commandLink={SiteEditorCommands.orderList.displayRoute({ id: x.folderID })}/>}
+                        {x.storeEnabled && <MenuItem
+                            label="Coupons"
+                            commandLink={SiteEditorCommands.couponList.displayRoute({ storeID: x.folderID })}/>}
+                        {x.storeEnabled && <MenuItem
+                            label="Payment Gateways"
+                            commandLink={SiteEditorCommands.paymentGatewayList.displayRoute({ storeID: x.folderID })}/>}
+                    </ExpanderMenu>}
+                    />
+                <MenuItem
+                    icon="fas fa-hard-drive"
+                    label="All Websites"
+                    commandLink={SiteEditorCommands.websiteList.displayRoute({})}
+                    />
+            </section>
         </div>;
     }
 

package/src/site-editor-app/pages/store/coupons/StoreCouponsPage.tsx

@@ -23,7 +23,11 @@ export default class StoreCouponsPage extends ContentPage<{storeID }> {
 
     search = "";
 
-    newItem = StoreCoupon.create({ type: "subtract" });
+    newItem = StoreCoupon.create({
+        type: "subtract",
+        active: true,
+        hidden: false
+    });
 
     async init() {
 
@@ -93,6 +97,8 @@ export default class StoreCouponsPage extends ContentPage<{storeID }> {
     @Action({ onEvent: "add-item" })
     async addItem() {
         const item = { ... this.newItem };
+        this.newItem.code = "";
+        item.storeID = this.parameters.storeID;
         if (!item.amount) {
             throw new Error("amount cannot be empty");
         }

package/src/web/drawer/AppDrawer.tsx

@@ -2,7 +2,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import { Drawer } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import SocialMailApp from "../../common/SocialMailApp";
 import MenuItem from "../../common/controls/menu/MenuItem";
-import { IUser } from "../../model/model";
+import { IAppFile, IMailbox, IUser, IWebSiteFolder } from "../../model/model";
 import styled from "@web-atoms/core/dist/style/styled";
 import AppCommands from "../commands/AppCommands";
 import { ExpanderMenu } from "@web-atoms/web-controls/dist/basic/Expander";
@@ -13,54 +13,32 @@ import CommonCommands from "../../common/commands/CommonCommands";
 import LoginService from "../../services/LoginService";
 import { AppUrlService } from "../../common/AppUrlService";
 import CloudFileService from "../../common/pages/files/service/CloudFileService";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import MenuService from "../../common/MenuService";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import MenuRepeater from "../../common/controls/menu/MenuRepeater";
+import BaseDrawer from "../../common/controls/drawer/BaseDrawer";
+import Bind from "@web-atoms/core/dist/core/Bind";
 
-const css = styled.css `
-    min-width: 300px;
-
-    background-color: var(--accent-color);
-
-    display: grid;
-    grid-template-rows: auto 1fr;
-
-    & > .header {
-        grid-row: 1;
-    }
-    & > .menus {
-        grid-row: 2;
-        background-color: canvas;
-        padding: var(--spacing);
-        margin: var(--spacing);
-        border-radius: 10px;
-        overflow: auto;
-    }
-
-`.installLocal();
 
 declare let BigInt: any;
 
-export default class AppDrawer extends Drawer {
+export default class AppDrawer extends BaseDrawer {
+
+    @InjectProperty
+    menuService: MenuService;
 
     private user: IUser;
 
     private selected: HTMLElement;
 
     async init() {
-        this.element.className = css;
 
         this.user = SocialMailApp.user;
 
-        const { mailboxes, channels, drives, websites } = await this.getItems();
-
         this.renderer = <div>
-            <div
-                class="header"
-                data-padding="large"
-                data-font-size="large"
-                data-color="white"
-                text={SocialMailApp.config.name}/>
-            <div
-                class="menus"
-                >
+            <header>{SocialMailApp.config.name}</header>
+            <section>
                 <MenuItem
                     icon="fas fa-home"
                     label="Home"
@@ -72,93 +50,78 @@ export default class AppDrawer extends Drawer {
                         label="Mailboxes"
                         commandLink={null}
                         />
-                    { ... mailboxes.map((mb) => <MenuItem
-                        commandLink={AppCommands.openMailbox.displayRoute({ id: mb.mailboxID })}
-                        label={mb.emailAddress.name}
-                        description={mb.emailAddress.emailAddress}
-                        title={mb.emailAddress.emailAddress}
-                        />)}
+                    <MenuRepeater
+                        items={this.menuService.mailboxes}
+                        itemRenderer={(mb: IMailbox) => <MenuItem
+                            commandLink={AppCommands.openMailbox.displayRoute({ id: mb.mailboxID })}
+                            label={mb.emailAddress.name}
+                            description={mb.emailAddress.emailAddress}
+                            title={mb.emailAddress.emailAddress}
+                            />}
+                        />
                     <MenuItem
                         label="All"
                         commandLink={AppCommands.openMailboxList.displayRoute({})}
                     />
                 </ExpanderMenu> }
-                { channels.length && <ExpanderMenu isExpanded={true}>
+                <ExpanderMenu
+                    style-display={Bind.oneWay(() => this.menuService.channels.length > 0)}
+                    isExpanded={true}>
                     <MenuItem
                         icon="fas fa-hard-drive"
                         label="Channels"
                         commandLink={null}
                         />
-                    { ... channels.map((mb) => <MenuItem
-                        commandLink={AppCommands.openChannel.displayRoute({ id: mb.mailboxID })}
-                        label={mb.emailAddress.name}
-                        description={mb.emailAddress.emailAddress}
-                        title={mb.emailAddress.emailAddress}
-                        />)}
-                </ExpanderMenu> }
-                { drives.length && <ExpanderMenu isExpanded={true}>
+                    <MenuRepeater
+                        items={this.menuService.channels}
+                        itemRenderer={(mb: IMailbox) => <MenuItem
+                            commandLink={AppCommands.openChannel.displayRoute({ id: mb.mailboxID })}
+                            label={mb.emailAddress.name}
+                            description={mb.emailAddress.emailAddress}
+                            title={mb.emailAddress.emailAddress}
+                            />}
+                        />
+                </ExpanderMenu>
+                <ExpanderMenu
+                    style-display={Bind.oneWay(() => this.menuService.drives.length > 0)}
+                    isExpanded={true}>
                     <MenuItem
                         icon="fas fa-hard-drive"
                         label="Drives"
                         commandLink={null}
                         />
-                    { ... drives.map((d) => <MenuItem
-                        commandLink={AppCommands.openFiles.displayRoute({ id: d.appFileID })}
-                        label={d.name}
-                        description={`${d.creator?.displayName} ${ BigInt(d.fileSize) > BigInt(0) ? "(" + toFileSize(d.fileSize) + ")" : ""}`}
-                        />)}
+                    <MenuRepeater
+                        items={this.menuService.drives}
+                        itemRenderer={(d: IAppFile) => <MenuItem
+                            commandLink={AppCommands.openFiles.displayRoute({ id: d.appFileID })}
+                            label={d.name}
+                            description={`${d.creator?.displayName} ${ BigInt(d.fileSize) > BigInt(0) ? "(" + toFileSize(d.fileSize) + ")" : ""}`}
+                            />}/>
                     <MenuItem
                         label="All"
                         commandLink={AppCommands.openDrives.displayRoute({})}
                     />
-                </ExpanderMenu> }
-                { websites.length && <ExpanderMenu isExpanded={true}>
+                </ExpanderMenu>
+                <ExpanderMenu
+                    style-display={Bind.oneWay(() => this.menuService.websites.length > 0)}
+                    isExpanded={true}>
                     <MenuItem
                         icon="fas fa-hard-drive"
                         label="Web Sites"
                         commandLink={null}
                         />
-                    { ... websites.map((d) => <MenuItem
-                        href={AppUrlService.editWebSite(d)}
-                        label={d.folder.name}
-                        description={toFileSize(Number(d.folder.fileSize) + Number(d.snapshotStorage))}
-                        />)}
+                    <MenuRepeater
+                        items={this.menuService.websites}
+                        itemRenderer={(d: IWebSiteFolder) => <MenuItem
+                            href={AppUrlService.editWebSite(d)}
+                            label={d.folder.name}
+                            description={toFileSize(Number(d.folder.fileSize) + Number(d.snapshotStorage))}
+                            />}/>
                     <MenuItem
                         label="All"
                         commandLink={AppCommands.openWebSiteList.displayRoute({})}
                     />
-                </ExpanderMenu> }
-                {/* {stores.length && <ExpanderMenu isExpanded={false}>
-                    <MenuItem
-                        icon="fas fa-dollar"
-                        label="Stores"
-                        commandLink={null}
-                        />
-                    { ... stores.map((s) => <MenuItem
-                        label={s.folder.name}
-                        commandLink={AppCommands.editStore.displayRoute({ id: s.folderID})}
-                        />)}
-                </ExpanderMenu>} */}
-                { mailboxes.length && <MenuItem
-                    icon="fas fa-money-check-pen"
-                    label="Templates"
-                    commandLink={AppCommands.openTemplates.displayRoute({ templates: true })}
-                    /> }
-                { mailboxes.length && <MenuItem
-                    icon="fas fa-envelopes-bulk"
-                    label="All Mailboxes"
-                    commandLink={AppCommands.openMailboxList.displayRoute({})}
-                    /> }
-                {/* <MenuItem
-                    icon="fas fa-envelopes-bulk"
-                    label="All Mailboxes"
-                    commandLink={AppCommands.openMailboxList.displayRoute({})}
-                    />
-                {/* <MenuItem
-                    icon="fas fa-folder"
-                    label="Files"
-                    commandLink={AppCommands.openFiles.displayRoute({})}
-                    /> */}
+                </ExpanderMenu>
                 <ExpanderMenu isExpanded={false}>
                     <MenuItem
                         icon="fas fa-gears"
@@ -187,23 +150,23 @@ export default class AppDrawer extends Drawer {
                         data-click-event="user-logout"
                         />
                 </ExpanderMenu>
-            </div>
+            </section>
         </div>;
 
     }
 
-    async getItems() {
-        const ms = this.resolve(MailboxService);
-        const fs = this.resolve(CloudFileService);
-        // const ss = this.resolve(StoreService);
-        const [mailboxes, channels, drives, websites] = await Promise.all([
-            ms.top(),
-            ms.top({ isChannel: true }),
-            fs.top(),
-            fs.topSites()
-        ]);
-        return { mailboxes, channels, drives, websites };
-    }
+    // async getItems() {
+    //     const ms = this.resolve(MailboxService);
+    //     const fs = this.resolve(CloudFileService);
+    //     // const ss = this.resolve(StoreService);
+    //     const [mailboxes, channels, drives, websites] = await Promise.all([
+    //         ms.top(),
+    //         ms.top({ isChannel: true }),
+    //         fs.top(),
+    //         fs.topSites()
+    //     ]);
+    //     return { mailboxes, channels, drives, websites };
+    // }
 
     @Action({ onEvent: "user-logout"})
     async userLogout() {

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

@@ -28,6 +28,7 @@ import { toKMBString } from "../../../common/NumberFormats";
 import { MailAppEvents } from "../../commands/MailAppEvents";
 import EntityService from "../../../services/EntityService";
 import { toSentenceCase } from "../../../common/StringFormat";
+import MenuService from "../../../common/MenuService";
 
 const css = styled.css `
 
@@ -189,6 +190,9 @@ export default class MailsPage extends MasterDetailPage {
     @InjectProperty
     private mailService: MailService;
 
+    @InjectProperty
+    private menuService: MenuService;
+
     private folders: IMailboxFolder[] = [];
 
     private currentMailbox: IMailbox;
@@ -214,6 +218,9 @@ export default class MailsPage extends MasterDetailPage {
 
         const mailboxID = this.parameters.id;
         const mailbox = this.currentMailbox = await this.mailService.mailbox(mailboxID);
+
+        this.menuService.addMailbox(this, mailbox);
+
         this.folder = mailbox.folders[0];
         if (mailbox.isExternal) {
             const es = this.resolve(EntityService);