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

package/src/public/store/StoreItemDetailView.tsx

@@ -13,11 +13,18 @@ import styled from "@web-atoms/core/dist/style/styled";
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import { formatCurrency, formatPrice } from "../../common/currency";
 import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import { StoreUrlService } from "./StoreUrlService";
+import WebSiteUserService from "../user/WebSiteUserService";
 
-const url = (window as any).pageUrl as URL;
+let storeID;
+let itemID;
 
+const { detail } = StoreUrlService.getParameters();
 
-let {1: storeID = "2", 2: itemID = "4w" } = /^\/store\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
+if (detail) {
+    storeID = detail.storeID;
+    itemID = detail.productID;
+}
 
 storeID = parseInt(storeID, 36);
 itemID = parseInt(itemID, 36);
@@ -236,7 +243,7 @@ export default class StoreItemDetailView extends AtomControl {
 
     getFiles(item: IStoreItem, variant: IStoreItem, size: IStoreItem) {
         const variantFiles = variant?.mediaFiles?.filter((x) => x.isPreview);
-        const files = variantFiles ?? item.mediaFiles.filter((x) => x.isPreview);
+        const files = variantFiles ?? item.mediaFiles?.filter((x) => x.isPreview) ?? [];
         if (size?.mediaFiles) {
             files.push(... size.mediaFiles.filter((x) => x.isPreview));
         }
@@ -303,7 +310,7 @@ export default class StoreItemDetailView extends AtomControl {
                     <p class="price">
                         <label text={ formatPrice(price) }/>
                     </p>
-                    <button class="buy">Buy</button>
+                    <button data-click-event="buy-now" class="buy">Buy</button>
 
                     { this.model.sizes?.length && <ToggleButtonBar
                         items={this.model.sizes}
@@ -335,6 +342,12 @@ export default class StoreItemDetailView extends AtomControl {
         this.selectedFile = this.model.mediaFiles.find((x) => x.appFileID === id);
     }
 
+    @Action({ onEvent: "buy-now"})
+    async buyNow() {
+        const userService = this.resolve(WebSiteUserService);
+        const user = await userService.getUser();
+    }
+
     async getItem() {
         return this.entityService
             .query(StoreItem, "storeQuery")

package/src/public/store/StoreItemListView.tsx

@@ -231,9 +231,11 @@ export default class StoreItemListView extends AtomControl {
                     <img
                         src={Bind.oneTimeAsync(() => this.downloadImage(item))}
                         />
-                    <button
+                    <a
+                        title={item.name || item.variantFor?.name || item.name}
+                        href={StoreUrlService.productUrl(item)}><button
                         class="buy"
-                        text="Buy"/>
+                        text="Buy"/></a>
                     <div class="price">
                         <label text={ formatPrice(item.storeItemPrices?.[0] ?? item.variantFor?.storeItemPrices?.[0] )}/>
                     </div>

package/src/public/store/StoreUrlService.ts

@@ -3,21 +3,28 @@ import { toBase36 } from "../../common/toBase36";
 import { IStoreItem } from "../../model/model";
 
 export type IStorePageParameters = {
-    page: "buy",
-    productID: any,
-    currency: string
-} | {
-    page: "detail",
-    productID: any,
-    currency: any,
-} | {
-    page: "order",
-    orderID: any,
-} | {
-    page: "orders"
-} |  {
-    page: "checkout",
-    orderID: any
+    login?: {
+        storeID: any;
+    },
+    buy?: {
+        productID: any,
+        currency: string
+    },
+    detail?: {
+        storeID: any,
+        productID: any,
+        currency: any,
+    },
+    order?: {
+        storeID: any;
+        orderID: any;
+    }
+    orders?: {
+        storeID: any,
+    },
+    checkout?: {
+        orderID: any;
+    }
 };
 
 export const StoreUrlService = {
@@ -26,7 +33,7 @@ export const StoreUrlService = {
         const storeID = toBase36(p.storeID);
         const productID = toBase36(p.variantForID ?? p.storeItemID);
         if (AppLocation.isLocalTesting) {
-            return `?detail=${storeID}/${productID}`;
+            return `?detail=store/${storeID}/${productID}`;
         }
         return `/store/${storeID}/${productID}/${encodeURIComponent(p.name)}`;
     },
@@ -42,29 +49,57 @@ export const StoreUrlService = {
         }
 
         const {
-            1: route,
-            2: p1,
-            3: p2
+            1: root,
+            2: route,
+            3: p1,
+            4: p2
         } = /^\/([^\/]+)\/([^\/]+)\/?([^\/]+)?\/?/.exec(pathname) ?? [];
 
+        if (root !== "store") {
+            return {};
+        }
+
         switch(route) {
+            case "login":
+                return {
+                    login: {
+                        storeID: p1
+                    }
+                };
+            case "orders":
+                return {
+                    orders: {
+                        storeID: p1
+                    }
+                };
+            case "orders":
+                return {
+                    order: {
+                        storeID: p1,
+                        orderID: p2
+                    }
+                };
             case "buy":
                 return {
-                    page: "buy",
-                    productID: p1,
-                    currency: p2 || "INR"
+                    buy: {
+                        productID: p1,
+                        currency: p2 || "INR"
+                    }
                 };
             case "checkout":
                 return {
-                    page: "checkout",
-                    orderID: p1
+                    checkout: {
+                        orderID: p1
+                    }
                 };
         }
 
         return {
-            page: "detail",
-            productID: p1,
-            currency: p2 || "INR"
+            detail: {
+                storeID: route,
+                productID: p1,
+                currency: p2 || "INR"
+            }
         };
 
     }

package/src/public/user/SiteLogin.tsx

@@ -0,0 +1,239 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import PhoneEditor from "../../common/controls/phone-editor/PhoneEditor";
+import { EmailIconButton, EmailIconTextButton, SaveIconTextButton, UploadIconButton } from "../../common/controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../services/EntityService";
+import { IVerificationToken, VerificationToken, VerificationTokenAddress } from "../../model/model";
+import Loader from "../../common/controls/Loader";
+import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList";
+import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
+import QRCodeControl from "../../common/controls/qrcode/QRCode";
+
+    styled.css `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100vh;
+
+        background-color: canvas;
+
+        display: grid;
+        align-items: center;
+        justify-items: center;
+
+    `.installGlobal("site-login");
+
+    styled.css `
+    & [styler-layout=component] {
+        position: relative;
+    }
+    `.installGlobal("body");
+
+
+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 SiteLogin extends AtomControl {
+
+    @InjectProperty
+    entityService: EntityService;
+
+    model: IUserModel = { emailAddress: "", phoneNumber: "", name: "" };
+
+    verifyMode: string = "email";
+
+    constructor(app, e = document.createElement("site-login")) {
+        super(app, e);
+        this.element.setAttribute("site-login", "true");
+        this.pushInit();
+    }
+
+    async init() {
+
+        this.renderer = <div><Loader/></div>;
+
+        await this.verifyCaptcha();
+    }
+
+    async verifyCaptcha() {
+
+        const captcha = await this.entityService.save(VerificationToken.create({
+            type: "captcha"
+        }));
+
+        const { verificationID: id, accessCode } = captcha;
+
+        this.model.captcha = {
+            id,
+            accessCode,
+            code: ""
+        };
+
+        this.renderer = <div>
+            <Form>
+                <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>
+                    <UploadIconButton data-submit-event="verify-captcha"/>
+                </div>
+            </Form>
+        </div>;
+
+        await this.waitForEvents("verify-captcha");
+
+        const v = await this.entityService.invoke(VerificationToken, "verifyCode", captcha, id, accessCode, this.model.captcha.code);
+        if (!v.verified) {
+            alert("Verification failed, try again");
+            await this.verifyCaptcha();
+            return;
+        }
+
+        await this.displayCheckUserExists();
+
+    }
+
+
+    async displayCheckUserExists() {
+        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 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>
+                <div>
+                    <EmailIconTextButton
+                        data-submit-event="proceed-verification"
+                        />
+                </div>
+            </Form>
+        </div>;
+
+        await this.waitForEvents("proceed-verification");
+
+        const isEmail = this.verifyMode === "email";
+
+        const type = isEmail ? "email" : "sms";
+
+        const address = isEmail ? this.model.emailAddress : this.model.phoneNumber;
+
+        const ve = VerificationToken.create({
+            type: "email",
+            verifyAddresses: address
+        });
+
+        await this.entityService.save(ve, (c) => c.include((x) => x.addresses));
+
+        if (!isEmail) {
+            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;
+                    break;
+                }
+            }
+
+            if (!ve.verified) {
+                await this.displayCheckUserExists();
+                return;
+            }
+        }
+
+    }
+
+    @Action({ onEvent: "verify-email"})
+    async verifyEmail() {
+
+        const address = this.model.emailAddress;
+
+        const ve = VerificationToken.create({
+            type: "email",
+            verifyAddresses: [address]
+        });
+        await this.entityService.save(ve, (c) => c);
+
+        this.renderer = <div>
+             <Form>
+                <FormField label="Code">
+                    
+                </FormField>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "verify-phone"})
+    async verifyPhone() {
+        const address = this.model.emailAddress;
+
+        const ve = VerificationToken.create({
+            type: "email",
+            verifyAddresses: address
+        });
+        await this.entityService.save(ve, (c) => c);
+
+        this.renderer = <div>
+             <Form>
+                <FormField label="Code">
+                    
+                </FormField>
+            </Form>
+        </div>;
+    }
+
+    private waitForEvents<T = any>( ... names: string[]): Promise<CustomEvent<T>> {
+        return new Promise((resolve, reject) => {
+
+            const d = new AtomDisposableList();
+            for (const n of names) {
+                const name = StringHelper.fromHyphenToCamel(n);
+                d.add(this.bindEvent(this.element, name, (ce: CustomEvent) => {
+                    d.dispose();
+                    resolve(ce);
+                } ));
+            }
+        });
+    }
+}

package/src/public/user/WebSiteUserService.ts

@@ -0,0 +1,39 @@
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import { IUser, LoginSession } from "../../model/model";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import EntityService from "../../services/EntityService";
+import SocialMailApp from "../../common/SocialMailApp";
+import SiteLogin from "./SiteLogin";
+import { App } from "@web-atoms/core/dist/App";
+
+@DISingleton()
+export default class WebSiteUserService {
+
+    @Inject
+    entityService: EntityService;
+
+    @Inject
+    app: App;
+
+    user: IUser = null;
+
+    public async getUser() {
+        this.user ??= (await this.entityService.query(LoginSession, "currentUser").firstOrDefault())?.user;
+        SocialMailApp.user = this.user;
+        if (this.user?.userID) {
+            // let start syncing...
+            // this.app.resolve(LocalDbService).syncAll(this.user.userID).catch(console.error);
+            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);
+
+        return this.user;
+    }
+
+}

package/src/services/store/StoreItemService.ts

@@ -1,7 +1,7 @@
 import DISingleton from "@web-atoms/core/dist/di/DISingleton";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../EntityService";
-import { AppFile, IStoreItem, Store, StoreItem, StoreMediaFile } from "../../model/model";
+import { AppFile, IStoreItem, StoreItem, StoreMediaFile, WebSiteFolder } from "../../model/model";
 import { Sql } from "../../common/Sql";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
 import MimeTypeService from "../files/MimeTypeService";
@@ -20,8 +20,9 @@ export default class StoreItemService {
     cloudFileService: CloudFileService;
 
     getStore(storeID: any) {
-        return this.entityService.query(Store)
-            .where({ storeID }, (p) => (x) => x.storeID === p.storeID)
+        return this.entityService.query(WebSiteFolder)
+            .where({ storeID }, (p) => (x) => x.folderID === p.storeID)
+            .include((x) => x.folder)
             .firstOrDefault();
     }
 
@@ -43,7 +44,8 @@ export default class StoreItemService {
         const item = items.find((x) => x.storeItemID === id);
         if (!item.folderID) {
             // lets create one...
-            const store = await this.entityService.query(Store).where({ storeID: item.storeID}, (p) => (x) => x.storeID === p.storeID)
+            const store = await this.entityService.query(WebSiteFolder).where({ storeID: item.storeID}, (p) => (x) => x.folderID === p.storeID)
+                .include((x) => x.folder)
                 .firstOrDefault();
             const { folderID: parentID} = store;
             const now = DateTime.now;

package/src/services/store/StoreService.ts

@@ -1,7 +1,7 @@
 import DISingleton from "@web-atoms/core/dist/di/DISingleton";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../EntityService";
-import { IStore, Store } from "../../model/model";
+import { IWebSiteFolder, WebSiteFolder } from "../../model/model";
 import { Sql } from "../../common/Sql";
 
 @DISingleton()
@@ -11,12 +11,11 @@ export default class StoreService {
     private entityService: EntityService;
 
     async get(storeID) {
-        return this.entityService.query(Store)
-            .where({ storeID }, (p) => (x) => x.storeID === p.storeID)
-            .include((x) => [
-                x.storeUsers.forEach((u) => u.user),
-                x.storeWebsites.forEach((w) => w.website.folder)
-            ])
+        return this.entityService.query(WebSiteFolder)
+            .where({ storeID }, (p) => (x) => x.folderID === p.storeID)
+            .include((x) =>
+                x.folder.accessList
+            )
             .firstOrDefault();
     }
 
@@ -31,13 +30,14 @@ export default class StoreService {
         size = 100,
         cancelToken
     }) {
-        let q = this.entityService.query(Store);
+        let q = this.entityService.query(WebSiteFolder);
         if (search) {
             search = search + "%";
-            q = q.where({ search }, (p) => (x) => Sql.text.like(x.name, p.search));
+            q = q.where({ search }, (p) => (x) => Sql.text.like(x.folder.name, p.search));
         }
         return q
-            .orderByDescending((x) => x.storeID)
+            .orderByDescending((x) => x.folderID)
+            .include((x) => x.folder)
             .toPagedList({
                 start,
                 size,
@@ -45,7 +45,7 @@ export default class StoreService {
             });
     }
 
-    async save(store: IStore) {
+    async save(store: IWebSiteFolder) {
         await this.entityService.save(store, (x) => x);
     }
 

package/src/web/drawer/AppDrawer.tsx

@@ -136,8 +136,8 @@ export default class AppDrawer extends Drawer {
                         commandLink={null}
                         />
                     { ... stores.map((s) => <MenuItem
-                        label={s.name}
-                        commandLink={AppCommands.editStore.displayRoute({ id: s.storeID})}
+                        label={s.folder.name}
+                        commandLink={AppCommands.editStore.displayRoute({ id: s.folderID})}
                         />)}
                 </ExpanderMenu>}
                 { mailboxes.length && <MenuItem

package/dist/admin/pages/stores/AdminStoreDetailPage.d.ts

@@ -1,11 +0,0 @@
-import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
-import { IStore, IStoreUser, IWebSiteStore } from "../../../model/model";
-export default class AdminStoreDetailPage extends ContentPage<IStore> {
-    model: IStore;
-    private storeService;
-    init(): Promise<void>;
-    chooseUser(): Promise<IStoreUser>;
-    chooseWebSite(): Promise<IWebSiteStore>;
-    saveStore(): Promise<void>;
-}
-//# sourceMappingURL=AdminStoreDetailPage.d.ts.map

package/dist/admin/pages/stores/AdminStoreDetailPage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminStoreDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/admin/pages/stores/AdminStoreDetailPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAA0C,MAAM,sBAAsB,CAAC;AAiBjH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAE1D,KAAK,EAAE,MAAM,CAAC;IAGrB,OAAO,CAAC,YAAY,CAAe;IAE7B,IAAI;IAkDJ,UAAU;IAQV,aAAa;IAcb,SAAS;CAIlB"}