@social-mail/social-mail-client 1.2.642 → 1.2.644

package/src/public/store/StoreApp.tsx

@@ -2,13 +2,43 @@ import MobileDesktopApp from "@web-atoms/web-controls/dist/desktop-app/MobileDes
 import "../../style/GlobalStyle";
 import Pack from "@web-atoms/core/dist/Pack";
 import "./styles/common";
+import Command from "@web-atoms/core/dist/core/Command";
+import StoreCommands from "./commands/StoreCommands";
+import styled from "@web-atoms/core/dist/style/styled";
+import Route from "@web-atoms/core/dist/core/Route";
 
+    styled.css `
+    & [data-base-page] {
+        & > [data-page-element=action-bar], & > [data-page-element=icon-button], & > [data-page-element=title] {
+            display: none;
+        }
+    }
+    `.installGlobal("[store-app]");
 
 @Pack
 export default class StoreApp extends MobileDesktopApp {
 
     async init() {
+
+        StoreCommands.install(this);
+
+        this.element.setAttribute("store-app","store-app");
+
+        if(!Command.invokeRoute()) {
+
+            // check if we are configured...
+            StoreCommands.productList.dispatch();
+        }
     }
 
 }
 
+Route.encodeUrl = (url) => {
+    if (url.startsWith("#")) {
+        return url;
+    }
+    if (/\d+\./.test(location.hostname)) {
+        return "#!" + url;
+    }
+    return url;
+};

package/src/public/store/StoreItemDetailView.tsx

@@ -14,7 +14,6 @@ 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";
 
 let storeID;
 let itemID;
@@ -344,8 +343,6 @@ export default class StoreItemDetailView extends AtomControl {
 
     @Action({ onEvent: "buy-now"})
     async buyNow() {
-        const userService = this.resolve(WebSiteUserService);
-        const user = await userService.getUser();
     }
 
     async getItem() {

package/src/public/store/commands/StoreCommands.ts

@@ -1,5 +1,17 @@
-import { Commands } from "@web-atoms/core/dist/core/Command";
+import Command, { Commands } from "@web-atoms/core/dist/core/Command";
 
 export default class StoreCommands extends Commands {
 
+    static productDetail = Command.create({
+        route: "/store/{storeItemID}",
+        routeOrder: 100,
+        openPage: () => import("../pages/StoreProductDetailPage")
+    });
+
+    static productList = Command.create({
+        route: "/store/",
+        routeOrder: 100,
+        openPage: () => import("../pages/StoreProductListPage")
+    });
+
 }

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

@@ -0,0 +1,354 @@
+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 FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import styled from "@web-atoms/core/dist/style/styled";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import ZoomView from "@web-atoms/web-controls/dist/basic/ZoomView";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { formatPrice } from "../../../common/currency";
+import { signedUrl, signedImageUrl } from "../../../common/fileUrl";
+import { IStoreItem, IStoreMediaFile, StoreItem } from "../../../model/model";
+import EntityService from "../../../services/EntityService";
+import WebSiteUserService from "../../user/WebSiteUserService";
+import { Base36 } from "../../../common/toBase36";
+
+const css = styled.css `
+    margin: 10px;
+    display: flex;
+    gap: 10px;
+    position: relative;
+    flex-wrap: wrap;
+
+    [data-button-bar=button-bar] {
+        border-radius: 5px;
+       // border-color: var(--button-background);
+        display: flex;
+        gap: 8px; /* Space between the buttons */
+        flex-wrap: wrap; /* Wraps the buttons if they overflow */
+        margin: 10px 0;
+        border-color: none;
+        border-width: 0;
+    }
+
+    [data-button-bar=button-bar] > [data-item-type=toggle-button][data-selected-item=true] {
+        background-color: var(--button-background);
+        color: var(--button-text);
+        border-color: var(--button-background);;
+    }
+    [data-button-bar=button-bar] > [data-item-type=toggle-button] {
+        padding: 10px 20px;
+        background-color: var(--toogle-button-background);
+       // border:1px solid;
+        border: 1px solid var(--toogle-button-border);
+        border-radius: 4px;
+        font-size: 14px;
+        cursor: pointer;
+        text-align: center;
+        transition: background-color 0.3s ease, border-color 0.3s ease;
+        min-width: 50px;
+        border-radius: 5px;
+    }
+    [data-button-bar=button-bar] > [data-item-type=toggle-button]:first-child {
+        padding-left: 10px;
+        border-radius:5px
+    }
+    [data-button-bar=button-bar] > [data-item-type=toggle-button]:last-child {
+        padding-left: 10px;
+        border-radius:5px
+    }
+    
+     
+     
+    
+
+    & > h2 {
+        flex: 1 1 100%;
+    }
+
+    & .title {
+        padding-left: 5px;
+    }
+
+    & > .product {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 4fr 1fr;
+        grid-template-rows: auto;
+
+        & > .photos {
+
+            grid-row: 1;
+            grid-column: 1;
+            margin: 10px;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px 2px gray;
+            display: inline-grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: 1fr;
+            overflow: hidden;
+
+            min-height: 50vh;
+
+            & > .thumbnails {
+                grid-row: 1;
+                grid-column: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
+                max-height: 500px;
+                max-width: 200px;
+                & > img {
+                    cursor: pointer;
+                    margin: 5px;
+                    border-radius: 10px;
+                    &:hover {
+                        box-shadow: 0 0 5px 1px #0000ff7f;
+                    }
+                }
+            }
+            & > .preview {
+                grid-row: 1;
+                grid-column: 2;
+                height: 100%;
+                min-width: 50%;
+                & img {
+                    -webkit-user-drag: none;
+                }
+            }
+
+        }
+
+        & > .offers {
+            grid-row: 1;
+            grid-column: 2;
+            box-shadow: 0 0 10px 2px gray;
+            border-radius: 5px;
+            margin: 10px;
+            padding: 10px;
+
+            .price {
+                text-align: center;
+                font-weight: 700;
+                font-size: var(--font-xs);
+                text-align: center;
+            }
+            & > .buy {
+                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;
+                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);
+                border: 1px solid var(--toogle-button-border);
+                color: var(--button-text);
+                margin: 0px;
+                padding: 6px 16px;
+                border-radius: 4px;
+            }
+            
+           
+
+        }
+        
+    }
+
+    
+
+    @media (max-width: 800px) {
+        
+        & > .product {
+            display: flex;
+            flex-direction: column;
+            justify-content: stretch;
+            justify-items: stretch;
+            & > .photos {
+                display: grid;
+                grid-template-columns: 1fr;
+                grid-template-rows: 1fr auto;
+                & > .thumbnails {
+                    grid-row: 2;
+                    grid-column: 1;
+                    height: 25vh;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: start;
+                    justify-items: start;
+                    overflow: auto;
+                }
+                & > .preview {
+                    grid-row: 1;
+                    grid-column: 1;
+                    height: 50vh;
+                }
+            }
+        }
+    }
+
+    & img {
+        max-width: 90%;
+    }
+`.installLocal();
+
+export default class StoreProductDetailPage extends ContentPage<{ storeItemID }> {
+    @InjectProperty
+    entityService: EntityService;
+
+    model: IStoreItem;
+
+    selectedVariant: IStoreItem = null;
+
+    selectedSize: IStoreItem = null;
+
+    selectedFile: IStoreMediaFile = null;
+
+    images: IStoreMediaFile[] = [];
+
+    itemID;
+
+    constructor(app, e) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    getFiles(item: IStoreItem, variant: IStoreItem, size: IStoreItem) {
+        const variantFiles = variant?.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));
+        }
+        this.selectedFile = files[0];
+        return files;
+    }
+
+    async init() {
+
+        this.itemID = this.parameters.storeItemID;
+
+        this.renderer = <div>
+            <label text="..."/>
+        </div>;
+
+        this.model = await this.getItem();
+
+        const offer = this.model.mediaFiles?.find((x) => x.title === "offer.html");
+        const specifications = this.model.mediaFiles?.find((x) => x.title === "specs.html");
+
+        const price = this.model.storeItemPrices?.[0];
+
+        const [offerHtml, specHtml] = await Promise.all([
+            offer ? FetchBuilder.get(signedUrl(offer)).responseAsText() : Promise.resolve(""),
+            specifications ? FetchBuilder.get(signedUrl(specifications)).responseAsText() : Promise.resolve("")
+        ]);
+
+        this.selectedSize = this.model.sizes?.[0] ?? null;
+        this.selectedVariant = this.model.variants?.[0] ?? null;
+
+        this.renderer = <div
+            class={css}
+            images={Bind.oneWay(() => this.getFiles(this.model, this.selectedVariant, this.selectedSize))}>
+            <h2 class="title">{this.model.name}</h2>
+
+            <section class="product">
+
+                <section class="photos">
+                    <AtomRepeater
+                        selectOnClick={true}
+                        items={Bind.oneWay(() => this.images)}
+                        selectedItem={Bind.twoWaysImmediate(() => this.selectedFile)}
+                        itemRenderer={(x) => <img
+                            class="thumbnail"
+                            data-click-event="change-image"
+                            data-id={x.appFileID}
+                            src={signedImageUrl(x, 150)} />}
+                        class="thumbnails"/>
+                    <ZoomView
+                        class="preview"
+                        source={Bind.oneWay(() => signedImageUrl(this.selectedFile, 720))}
+                        />
+                </section>
+
+                <section class="offers" data-layout="vertical-flex">
+
+                    { /* Display Offers */ }
+                    {
+                        offerHtml && <section innerHTML={offerHtml}>
+                        </section>
+                    }
+
+                    <p>
+                        {this.model.description}
+                    </p>
+                    <p class="price">
+                        <label text={ formatPrice(price) }/>
+                    </p>
+                    <button data-click-event="buy-now" class="buy">Buy</button>
+
+                    { this.model.sizes?.length && <ToggleButtonBar
+                        items={this.model.sizes}
+                        selectedItem={Bind.twoWaysImmediate(() => this.selectedSize)}
+                        itemRenderer={(x: IStoreItem) => <div data-item-type="toggle-button">
+                            <span text={x.name}/>
+                        </div>}
+                        />}
+                    { this.model.variants?.length && <ToggleButtonBar
+                        items={this.model.variants}
+                        selectedItem={Bind.twoWaysImmediate(() => this.selectedVariant)}
+                        itemRenderer={(x: IStoreItem) => <div data-item-type="toggle-button">
+                            <span text={x.name}/>
+                        </div>}
+                        />}
+
+                </section>
+            </section>
+            {/* This should be html */}
+            <section data-flex="stretch-full">
+                <section innerHTML={specHtml}></section>
+            </section>
+
+        </div>;
+    }
+
+    @Action({ onEvent: "change-image"})
+    changeImage( { id }) {
+        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() {
+        const itemID = this.itemID;
+        return this.entityService
+            .query(StoreItem, "storeQuery")
+            .where({ itemID }, (p) => (x) => x.storeItemID === p.itemID)
+            .include((x) => [
+                x.storeItemPrices,
+                x.storeItemTags.forEach((t) => t.tag),
+                x.variants.forEach((t) => [ t.mediaFiles, t.storeItemPrices]),
+                x.sizes.forEach((t) => [ t.mediaFiles, t.storeItemPrices]),
+                x.mediaFiles,
+            ])
+            .firstOrDefault();
+    }
+
+}