@social-mail/social-mail-client 1.2.643 → 1.2.645

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

@@ -0,0 +1,344 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { apiPath } from "../../../common/apiPath";
+import InfiniteRepeater from "../../../common/controls/repeater/InfiniteRepeater";
+import { formatPrice } from "../../../common/currency";
+import { Sql } from "../../../common/Sql";
+import { IStoreItem, IStoreTag, StoreTag, StoreMediaFile, StoreItem } from "../../../model/model";
+import EntityService from "../../../services/EntityService";
+import styled from "@web-atoms/core/dist/style/styled";
+import StoreCommands from "../commands/StoreCommands";
+
+    styled.css`
+
+    display:grid;
+    grid-template-rows: auto 1fr auto;
+    background-color: var(--hover-color);
+
+    & > header {
+    grid-row:1;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    & > .search {
+        width: 100%;
+        text-indent: 15px;
+        height: 42px;
+        font-weight: 400;
+        font-size: var(--font-xs);
+        border: 1px solid var(--border-color, #d3d3d3);
+        outline: none;
+        background-color: var(--accent-text-color);
+
+    }             
+
+    & > .tags {
+        display: flex;
+        flex-wrap: wrap;
+        flex-wrap: wrap;
+        gap: 12px; 
+        padding: 10px; 
+        justify-content: start; 
+        & > * {
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            padding: 8px 16px;
+            border-radius: 25px;
+            border: 1px solid transparent;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            background-color: var(--accent-text-color);
+            &:hover {
+                transform: translateY(-3px);
+            }
+        }
+    }
+    }
+
+    & > section {
+    grid-row: 2;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+
+    & .store-item {
+        display: inline-grid;
+        padding: 8px 12px;
+        border-radius: 5px;
+        background-color: var(--accent-text-color);
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto 1fr auto auto;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        gap: 10px;
+        & > .name {
+            grid-column: 1 / span 2;
+            grid-row: 1;
+            max-width:200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: var(--accent-color);
+            text-decoration: none;
+        }
+        & > img {
+            grid-column: 1 / span 2;
+            grid-row: 2;
+            object-fit: contain;
+            width: 200px;
+            height: 200px;
+        }
+        & > .description {
+            grid-column: 1 / span 2;
+            grid-row: 3;
+            max-width: 200px;
+            height: 3ch;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+        & > .buy {
+            grid-column: 1 / span 2;
+            grid-row: 5;
+            display: inline-flex;
+            -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-pack: center;
+            justify-content: center;
+            position: relative;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            cursor: pointer;
+            user-select: none;
+            vertical-align: middle;
+            appearance: none;
+            line-height: 1.75;
+            text-transform: uppercase;
+            min-width: 64px;
+            width: 100%;
+            font-weight: bold;
+            font-size: 14px;
+            font-family: Mulish, sans-serif;
+            background-color: var(--button-background);
+            color: var(--button-text);
+            outline: 0px;
+            border-width: 0px;
+            border-style: initial;
+            border-color: initial;
+            border-image: initial;
+            margin: 0px;
+            text-decoration: none;
+            padding: 6px 16px;
+            border-radius: 4px;
+            transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+        
+        }
+        & > .price {
+            grid-column: 1/ span 2;
+            grid-row: 4;
+            text-align: center;
+            font-weight: 700;
+            font-size: var(--font-xs);
+            text-align: center;
+            
+        }
+    }
+
+    }
+
+    & > footer {
+    grid-row: 3;
+    }
+
+    `.installGlobal("[data-shopping-cart-list=shopping-cart-list]");
+
+export default class StoreProductListPage extends ContentPage {
+
+    search = "";
+
+    items: IStoreItem[] = [];
+
+    tags: IStoreTag[] = [];
+
+    version = 0;
+
+    @InjectProperty
+    entityService: EntityService;
+
+    constructor(app, e) {
+        super(app, e);
+        this.element.setAttribute("data-shopping-cart-list", "shopping-cart-list");
+    }
+
+    async init() {
+
+        this.render(<div data-shopping-cart-list="shopping-cart-list">
+            <header>
+                <AtomRepeater
+                    class="search-tags"
+                    items={this.tags}
+                    itemRenderer={(x) => <div data-layout="row"> <label text={`${x.tag.label} (${x.count})`}/> <i data-click-event="remove-tag" class="fas fa-times-circle"/> </div>}
+                    />
+                <input type="search" class="search" value={Bind.twoWaysImmediate(() => this.search)}/>
+                <AtomRepeater
+                    class="tags"
+                    items={Bind.oneWayAsync((c, e, cancelToken) => this.searchTags(this.search, cancelToken, this.version), { default: [] })}
+                    itemRenderer={(x: IStoreTag) => <label text={`${x.tag.label} (${x.count})`}/>}
+                    data-click-event="select-tag"
+                    />
+            </header>
+            <AtomRepeater
+                for="section"
+                items={this.items}
+                { ... InfiniteRepeater.pagedItems((start) =>
+                    (c, e, cancelToken) =>
+                        this.searchItems({
+                            start,
+                            search: this.search,
+                            version: this.version,
+                            cancelToken
+                        })
+                )}
+                itemRenderer={(item: IStoreItem) => <div class="store-item">
+                    <a
+                        class="name"
+                        title={item.name || item.variantFor?.name || item.name}
+                        text={item.name || item.variantFor?.name || item.name}
+                        href={StoreCommands.productDetail.displayRoute(item)}/>
+                    <label
+                        class="description"
+                        title={item.description || item.variantFor?.description || item.description}
+                        text={item.description || item.variantFor?.description || item.description}
+                        />
+                    <img
+                        src={Bind.oneTimeAsync(() => this.downloadImage(item))}
+                        />
+                    <a
+                        title={item.name || item.variantFor?.name || item.name}
+                        href={StoreCommands.productDetail.displayRoute(item)}><button
+                        class="buy"
+                        text="Buy"/></a>
+                    <div class="price">
+                        <label text={ formatPrice(item.storeItemPrices?.[0] ?? item.variantFor?.storeItemPrices?.[0] )}/>
+                    </div>
+                </div>}
+                />
+            <footer>
+            </footer>
+        </div>);
+
+    }
+
+    @Action({ onEvent: "remove-tag"})
+    removeTag(tag: IStoreTag) {
+        this.tags.remove(tag);
+        this.version++;
+    }
+
+    @Action({ onEvent: "select-tag"})
+    selectTag(tag: IStoreTag) {
+        if(this.tags.find((t) => t.tagID === tag.tagID)) {
+            return;
+        }
+        this.tags.add(tag);
+        this.version++;
+    }
+
+    async searchTags(search: string, cancelToken, v): Promise<any> {
+        let q = this.entityService.query(StoreTag, "storeQuery");
+        if (search) {
+            search = search.trim().toLocaleLowerCase() + "%";
+            q = q.where({ search }, (p) => (x) =>
+                (Sql.text.like(x.tag.lowerCaseName, p.search)
+                || Sql.text.like(x.tag.parent.lowerCaseName, p.search))
+                && x.count > 0
+            );
+        }
+        if (this.tags.length) {
+            const ids = this.tags.map((t) => t.tagID);
+            q = q.where({ ids }, (p) => (x) => ! Sql.in(x.tagID, p.ids));
+        }
+        const tags = await q
+            .orderByDescending((x) => x.count)
+            .include((x) => x.tag)
+            .toPagedList({
+                size: 10,
+                cancelToken
+            });
+        return tags.items;
+    }
+
+    async downloadImage(item: IStoreItem) {
+        const file = await this.entityService.query(StoreMediaFile, "storeQuery", item.storeItemID, item.signed)
+            .where((x) => x.isPreview === true)
+            .orderBy((x) => x.sortOrder)
+            .firstOrDefault();
+        if (!file) {
+            return;
+        }
+        return apiPath(`/api/signed/webp(700)/${file.appFileID}/${file.fileContentID}/${file.signed}/file.webp`);
+    }
+
+
+    async searchItems({
+        start,
+        search = "",
+        size = 50,
+        version = 0,
+        cancelToken
+    }) {
+
+        let q = this.entityService.query(StoreItem, "storeQuery")
+            .where((x) =>
+                x.itemType in [ "product", "service", "resource", "variant", "e-product"]
+                && x.sizeForID === null
+            );
+        if (search) {
+            search = search + "%";
+            const lowerSearch = search.trim().toLocaleLowerCase();
+            q = q.where({ search, lowerSearch }, (p) => (x) =>
+                (Sql.text.iLike(x.name, p.search)
+                || Sql.text.iLike(x.description, p.search)
+                || x.sizes.some((s) => Sql.text.iLike(s.name, p.search) || Sql.text.iLike(s.description, p.search))
+                || x.variants.some((s) => Sql.text.iLike(s.name, p.search) || Sql.text.iLike(s.description, p.search))
+                || x.storeItemTags.some((t) => Sql.text.like(t.tag.lowerCaseName, p.lowerSearch)
+                    || Sql.text.like(t.tag.parent.lowerCaseName, p.lowerSearch)))
+            );
+        }
+        if (this.tags.length) {
+            const ids = this.tags.map((t) => t.tagID);
+            q = q.where({ ids}, (p) => (x) => x.storeItemTags.some((st) => Sql.in(st.tagID, p.ids)));
+        }
+        const items = await q.orderByDescending((x) => x.storeItemID)
+            .include((x) => [
+                x.storeItemPrices,
+                x.storeItemTags.forEach((t) => t.tag),
+                x.variantFor
+            ])
+            // .trace()
+            .toPagedList({
+                start,
+                size,
+                cancelToken
+            });
+
+        const tasks = [];
+
+        for (const item of items.items) {
+            item.storeItemTags?.sort((a, b) => a.sortOrder - b.sortOrder);
+        }
+        return items;
+    }
+}

package/src/public/user/WebSiteUserService.ts

@@ -5,6 +5,8 @@ import EntityService from "../../services/EntityService";
 import SocialMailApp from "../../common/SocialMailApp";
 import SiteLogin from "./SiteLogin";
 import { App } from "@web-atoms/core/dist/App";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import SiteLoginPage from "./pages/SiteLoginPage";
 
 @DISingleton()
 export default class WebSiteUserService {
@@ -26,12 +28,7 @@ export default class WebSiteUserService {
             return this.user;
         }
 
-
-        // request login..
-        const sl = new SiteLogin(this.app);
-
-        const c = document.body.querySelector(`[styler-layout="component"]`) ?? document.body;
-        c.appendChild(sl.element);
+        await PageNavigator.pushPageForResultOrCancel(SiteLoginPage);
 
         return this.user;
     }

package/src/public/user/pages/SiteLoginPage.tsx

@@ -0,0 +1,202 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+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 Bind from "@web-atoms/core/dist/core/Bind";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import { EmailIconTextButton, UploadIconButton } from "../../../common/controls/buttons/IconButton";
+import { IVerificationToken, VerificationToken } from "../../../model/model";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import PhoneEditor from "../../../common/controls/phone-editor/PhoneEditor";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import QRCodeControl from "../../../common/controls/qrcode/QRCode";
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    & [data-page-element=content] {
+        display: grid;
+        align-items: center;
+        justify-items: center;
+    }
+    `.installGlobal("[site-login-page]");
+
+export interface IVerification {
+    id: any;
+    accessCode: string;
+    code: string;
+}
+
+export interface IUserModel {
+    emailAddress?: string;
+    phoneNumber?: string;
+    name?: string;
+
+    email?: IVerification;
+    phone?: IVerification;
+    captcha?: IVerification;
+}
+
+const verifyModes = [
+    { label: "Email", value: "email" },
+    { label: "Cell Phone", value: "phone" }
+];
+
+export default class SiteLoginPage extends ContentPage {
+
+    @InjectProperty
+    entityService: EntityService;
+
+    model: IUserModel = { emailAddress: "", phoneNumber: "", name: "" };
+
+    verifyMode: string = "email";
+
+    captcha: IVerificationToken = null;
+    verification: IVerificationToken = null;
+
+    async init() {
+
+        this.element.setAttribute("site-login-page", "site-login");
+
+        const captcha = await this.entityService.save(VerificationToken.create({
+            type: "captcha"
+        }));
+
+        this.captcha = captcha;
+
+        const { verificationID: id, accessCode } = captcha;
+
+        this.model.captcha = {
+            id,
+            accessCode,
+            code: ""
+        };
+
+        this.renderer = <div>
+            <Form>
+                <FormField label="Verify">
+                    <ToggleButtonBar items={verifyModes} value={Bind.twoWaysImmediate(() => this.verifyMode)} />
+                </FormField>
+                <FormField label="Email" style-display={Bind.oneWay(() => this.verifyMode === "email")}>
+                    <input autofocus={true} value={Bind.twoWaysImmediate(() => this.model.emailAddress)} />
+                </FormField>
+                <FormField label="Cell Phone" style-display={Bind.oneWay(() => this.verifyMode === "phone")}>
+                    <PhoneEditor value={Bind.twoWaysImmediate(() => this.model.phoneNumber)} />
+                </FormField>
+
+
+                <FormField label="Captcha">
+                    <img src={`/api/users/captcha/${id}/${accessCode}`}/>
+                </FormField>
+                <FormField label="Enter 5 Digit Code">
+                    <input
+                        type="tel"
+                        value={Bind.twoWaysImmediate(() => this.model.captcha.code)}/>
+                </FormField>
+
+                <div>
+                    <EmailIconTextButton
+                        text="Verify"
+                        data-submit-event="proceed-verification"
+                        />
+                </div>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "proceed-verification"})
+    async proceedVerification() {
+        const captcha = this.captcha;
+        const { verificationID: id, accessCode } = captcha;
+        const vt = await this.entityService.invoke(VerificationToken, "verifyCode", captcha, id, accessCode, this.model.captcha.code);
+        if (!vt.verified) {
+            throw new Error("Verification failed, try again");
+        }
+
+        const isEmail = this.verifyMode === "email";
+
+        const type = isEmail ? "email" : "sms";
+
+        const address = isEmail ? this.model.emailAddress : this.model.phoneNumber;
+
+        const ve = VerificationToken.create({
+            type,
+            verifyAddresses: address
+        });
+
+        this.verification = ve;
+
+        await this.entityService.save(ve, (c) => c.include((x) => x.addresses));
+
+        if (!isEmail) {
+            await this.displayPhoneVerification(ve);
+            return;
+        }
+
+        this.model.email = {
+            id: ve.verificationID,
+            accessCode: ve.accessCode,
+            code: ""
+        };
+
+        this.renderer = <div>
+            <Form>
+                <FormField label="Email Verification">
+                    <div>We have sent you the verification code in your email, please enter it again to complete the verification.</div>
+                </FormField>
+                <FormField label="Code">
+                    <input value={Bind.twoWaysImmediate(() => this.model.email.code)}/>
+                </FormField>
+                <div>
+                    <EmailIconTextButton
+                        text="Verify"
+                        data-submit-event="verify-email"
+                        />
+                </div>
+            </Form>
+        </div>;
+
+    }
+
+
+    async displayPhoneVerification(ve: IVerificationToken) {
+        this.renderer = <div>
+            <QRCodeControl
+                smsConfig={ve.smsConfig} />
+        </div>;
+
+        for (let index = 0; index < 5; index++) {
+            const v = await this.entityService.query(VerificationToken, "get", ve.verificationID, ve.accessCode)
+                .firstOrDefault();
+            if (v.verified) {
+                ve.verified = true;
+                if (ve.userID) {
+                    await this.login(ve);
+                    return;
+                }
+                break;
+            }
+        }
+    }
+
+    @Action({ onEvent: "verify-email"})
+    async verifyEmail() {
+        const v = this.verification;
+        const vt = await this.entityService.invoke(VerificationToken, "verifyCode", v, v.verificationID, v.accessCode, this.model.email.code);
+        if (!vt.verified) {
+            throw new Error("Verification failed, try again");
+        }
+        if (vt.userID) {
+            await this.login(vt);
+            return;
+        }
+    }
+
+    @Action({})
+    async login(v: IVerificationToken) {
+        await this.entityService.invoke(VerificationToken, "login", v, v.verificationID, v.accessCode);
+        location.reload();
+    }
+
+}

package/src/services/store/StoreOrderService.ts

@@ -16,9 +16,9 @@ export default class StoreOrderService {
             .where({ orderID }, (p) => (x) => x.journalID === p.orderID)
             .include((x) => [
                 x.lineItems.forEach((oi) => [oi.itemPrice.storeItem.store]),
-                x.entries.forEach((e) => e.ledger),
-                x.buyer.items,
-                x.seller.items
+                x.entries.forEach((e) => e.storeAccount),
+                x.buyer,
+                x.seller
             ])
             .firstOrDefault();
     }

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -963,6 +963,21 @@ export default class HtmlPageEditor extends AtomControl {
                 }
             }
 
+            let wc = clone.querySelector("script[web-components]");
+            if (!wc) {
+                wc = this.htmlDocument.createElement("script");
+                wc.setAttribute("web-components", "social");
+                wc.setAttribute("async", "true");
+                wc.setAttribute("defer", "true");
+                clone.head.appendChild(doc.createTextNode("\n"));
+                clone.head.appendChild(wc);
+                clone.head.appendChild(doc.createTextNode("\n"));
+            }
+            const wcs = `${WebComponents.path}/dist/main.js`;
+            if (wc.getAttribute("src") !== wcs) {
+                wc.setAttribute("src", wcs);
+            }
+
         },10);
     }