@social-mail/social-mail-client 1.2.252 → 1.2.253

package/src/model/model.ts

@@ -221,6 +221,7 @@ export interface IContact extends IClrEntity {
 	items?: ICollection<IContactItem>;
 	domains?: ICollection<IContactDomain>;
 	sellerStores?: ICollection<IStore>;
+	vendorItems?: ICollection<IStoreItem>;
 	ledgers?: ICollection<IStoreLedger>;
 	soldInvoices?: ICollection<IStoreJournal>;
 	boughtInvoices?: ICollection<IStoreJournal>;
@@ -231,7 +232,7 @@ export const Contact: IModel<IContact> = new Model<IContact>(
 "Contact",
 ["contactID"],
 { name: "",type: "",dateCreated: new DefaultFactory(() => new DateTime()),dateUpdated: new DefaultFactory(() => new DateTime()) },
-{"name":"contacts","keys":[{"name":"contactID","type":"number","generated":"identity"}],"properties":[{"name":"externalID","type":"string","default":["externalID","\"\""]},{"name":"userID","type":"number"},{"name":"mailboxID","type":"number"},{"name":"domainID","type":"number"},{"name":"name","type":"string","default":["name","\"\""]},{"name":"description","type":"string","default":["description","\"\""]},{"name":"companyID","type":"string","default":["companyID","\"\""]},{"name":"salesTaxID","type":"string","default":["salesTaxID","\"\""]},{"name":"gstTaxID","type":"string","default":["gstTaxID","\"\""]},{"name":"vatTaxID","type":"string","default":["vatTaxID","\"\""]},{"name":"incomeTaxID","type":"string","default":["incomeTaxID","\"\""]},{"name":"type","type":"string","default":["type","\"\""]},{"name":"synchronization","type":"string","default":["synchronization","\"\""]},{"name":"dateCreated","type":"DateTime","default":["dateCreated","new DefaultFactory(() => new DateTime())"]},{"name":"dateUpdated","type":"DateTime","default":["dateUpdated","new DefaultFactory(() => new DateTime())"]},{"name":"previewID","type":"number"},{"name":"billingAddressID","type":"number"},{"name":"shippingAddressID","type":"number"}],"relations":[{"name":"user","fkMap":[{"fk":"userID","relatedKey":"userID"}],"relatedName":"User"},{"name":"mailbox","fkMap":[{"fk":"mailboxID","relatedKey":"mailboxID"}],"relatedName":"Mailbox"},{"name":"domain","fkMap":[{"fk":"domainID","relatedKey":"domainID"}],"relatedName":"HostedDomain"},{"name":"preview","fkMap":[{"fk":"previewID","relatedKey":"appFileID"}],"relatedName":"AppFile"},{"name":"billingAddress","fkMap":[{"fk":"billingAddressID","relatedKey":"addressID"}],"relatedName":"ContactAddress"},{"name":"addresses","isCollection":true,"isInverse":true,"relatedName":"ContactAddress"},{"name":"shippingAddress","fkMap":[{"fk":"shippingAddressID","relatedKey":"addressID"}],"relatedName":"ContactAddress"},{"name":"emails","isCollection":true,"isInverse":true,"relatedName":"ContactEmail"},{"name":"phones","isCollection":true,"isInverse":true,"relatedName":"ContactPhone"},{"name":"items","isCollection":true,"isInverse":true,"relatedName":"ContactItem"},{"name":"domains","isCollection":true,"isInverse":true,"relatedName":"ContactDomain"},{"name":"sellerStores","isCollection":true,"isInverse":true,"relatedName":"Store"},{"name":"ledgers","isCollection":true,"isInverse":true,"relatedName":"StoreLedger"},{"name":"soldInvoices","isCollection":true,"isInverse":true,"relatedName":"StoreJournal"},{"name":"boughtInvoices","isCollection":true,"isInverse":true,"relatedName":"StoreJournal"},{"name":"soldItems","isCollection":true,"isInverse":true,"relatedName":"StoreJournalLineItem"}]}
+{"name":"contacts","keys":[{"name":"contactID","type":"number","generated":"identity"}],"properties":[{"name":"externalID","type":"string","default":["externalID","\"\""]},{"name":"userID","type":"number"},{"name":"mailboxID","type":"number"},{"name":"domainID","type":"number"},{"name":"name","type":"string","default":["name","\"\""]},{"name":"description","type":"string","default":["description","\"\""]},{"name":"companyID","type":"string","default":["companyID","\"\""]},{"name":"salesTaxID","type":"string","default":["salesTaxID","\"\""]},{"name":"gstTaxID","type":"string","default":["gstTaxID","\"\""]},{"name":"vatTaxID","type":"string","default":["vatTaxID","\"\""]},{"name":"incomeTaxID","type":"string","default":["incomeTaxID","\"\""]},{"name":"type","type":"string","default":["type","\"\""]},{"name":"synchronization","type":"string","default":["synchronization","\"\""]},{"name":"dateCreated","type":"DateTime","default":["dateCreated","new DefaultFactory(() => new DateTime())"]},{"name":"dateUpdated","type":"DateTime","default":["dateUpdated","new DefaultFactory(() => new DateTime())"]},{"name":"previewID","type":"number"},{"name":"billingAddressID","type":"number"},{"name":"shippingAddressID","type":"number"}],"relations":[{"name":"user","fkMap":[{"fk":"userID","relatedKey":"userID"}],"relatedName":"User"},{"name":"mailbox","fkMap":[{"fk":"mailboxID","relatedKey":"mailboxID"}],"relatedName":"Mailbox"},{"name":"domain","fkMap":[{"fk":"domainID","relatedKey":"domainID"}],"relatedName":"HostedDomain"},{"name":"preview","fkMap":[{"fk":"previewID","relatedKey":"appFileID"}],"relatedName":"AppFile"},{"name":"billingAddress","fkMap":[{"fk":"billingAddressID","relatedKey":"addressID"}],"relatedName":"ContactAddress"},{"name":"addresses","isCollection":true,"isInverse":true,"relatedName":"ContactAddress"},{"name":"shippingAddress","fkMap":[{"fk":"shippingAddressID","relatedKey":"addressID"}],"relatedName":"ContactAddress"},{"name":"emails","isCollection":true,"isInverse":true,"relatedName":"ContactEmail"},{"name":"phones","isCollection":true,"isInverse":true,"relatedName":"ContactPhone"},{"name":"items","isCollection":true,"isInverse":true,"relatedName":"ContactItem"},{"name":"domains","isCollection":true,"isInverse":true,"relatedName":"ContactDomain"},{"name":"sellerStores","isCollection":true,"isInverse":true,"relatedName":"Store"},{"name":"vendorItems","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"ledgers","isCollection":true,"isInverse":true,"relatedName":"StoreLedger"},{"name":"soldInvoices","isCollection":true,"isInverse":true,"relatedName":"StoreJournal"},{"name":"boughtInvoices","isCollection":true,"isInverse":true,"relatedName":"StoreJournal"},{"name":"soldItems","isCollection":true,"isInverse":true,"relatedName":"StoreJournalLineItem"}]}
 );
 modelEntitySchemas["Contact"] = Contact;
 
@@ -938,6 +939,10 @@ export interface IStoreItem extends IClrEntity {
 	folderID?: number | null;
 	sizeForID?: number | null;
 	variantForID?: number | null;
+	dateCreated?: DateTime;
+	dateUpdated?: DateTime;
+	vendorID?: number | null;
+	signed?: string;
 	store?: IStore;
 	itemFolder?: IStoreItemFolder;
 	fileFolder?: IAppFile;
@@ -945,7 +950,9 @@ export interface IStoreItem extends IClrEntity {
 	sizes?: ICollection<IStoreItem>;
 	variantFor?: IStoreItem;
 	variants?: ICollection<IStoreItem>;
+	vendor?: IContact;
 	storeItemPrices?: ICollection<IStoreItemPrice>;
+	priceAddOns?: ICollection<IStorePriceAddOn>;
 	mediaFiles?: ICollection<IStoreMediaFile>;
 	insights?: ICollection<IStoreInsight>;
 	ledgers?: ICollection<IStoreLedger>;
@@ -958,8 +965,8 @@ export const StoreItemItemTypeArray = [{"label":"product","value":"product"},{"l
 export const StoreItem: IModel<IStoreItem> = new Model<IStoreItem>(
 "StoreItem",
 ["storeItemID"],
-{ name: "",active: false,itemType: "product" },
-{"name":"store_items","keys":[{"name":"storeItemID","type":"number","generated":"identity"}],"properties":[{"name":"storeID","type":"number"},{"name":"itemFolderID","type":"number"},{"name":"name","type":"string","default":["name","\"\""]},{"name":"active","type":"boolean","default":["active","false"]},{"name":"internalNotes","type":"string","default":["internalNotes","\"\""]},{"name":"description","type":"string","default":["description","\"\""]},{"name":"itemType","type":"string","default":["itemType","\"product\""]},{"name":"folderID","type":"number"},{"name":"sizeForID","type":"number"},{"name":"variantForID","type":"number"}],"relations":[{"name":"store","fkMap":[{"fk":"storeID","relatedKey":"storeID"}],"relatedName":"Store"},{"name":"itemFolder","fkMap":[{"fk":"itemFolderID","relatedKey":"itemFolderID"}],"relatedName":"StoreItemFolder"},{"name":"fileFolder","fkMap":[{"fk":"folderID","relatedKey":"appFileID"}],"relatedName":"AppFile"},{"name":"sizeFor","fkMap":[{"fk":"sizeForID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"sizes","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"variantFor","fkMap":[{"fk":"variantForID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"variants","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"storeItemPrices","isCollection":true,"isInverse":true,"relatedName":"StoreItemPrice"},{"name":"mediaFiles","isCollection":true,"isInverse":true,"relatedName":"StoreMediaFile"},{"name":"insights","isCollection":true,"isInverse":true,"relatedName":"StoreInsight"},{"name":"ledgers","isCollection":true,"isInverse":true,"relatedName":"StoreLedger"},{"name":"lineItems","isCollection":true,"isInverse":true,"relatedName":"StoreJournalLineItem"},{"name":"storeItemTags","isCollection":true,"isInverse":true,"relatedName":"StoreItemTag"}]}
+{ name: "",active: false,itemType: "product",dateCreated: new DefaultFactory(() => new DateTime()),dateUpdated: new DefaultFactory(() => new DateTime()) },
+{"name":"store_items","keys":[{"name":"storeItemID","type":"number","generated":"identity"}],"properties":[{"name":"storeID","type":"number"},{"name":"itemFolderID","type":"number"},{"name":"name","type":"string","default":["name","\"\""]},{"name":"active","type":"boolean","default":["active","false"]},{"name":"internalNotes","type":"string","default":["internalNotes","\"\""]},{"name":"description","type":"string","default":["description","\"\""]},{"name":"itemType","type":"string","default":["itemType","\"product\""]},{"name":"folderID","type":"number"},{"name":"sizeForID","type":"number"},{"name":"variantForID","type":"number"},{"name":"dateCreated","type":"DateTime","default":["dateCreated","new DefaultFactory(() => new DateTime())"]},{"name":"dateUpdated","type":"DateTime","default":["dateUpdated","new DefaultFactory(() => new DateTime())"]},{"name":"vendorID","type":"number"}],"relations":[{"name":"store","fkMap":[{"fk":"storeID","relatedKey":"storeID"}],"relatedName":"Store"},{"name":"itemFolder","fkMap":[{"fk":"itemFolderID","relatedKey":"itemFolderID"}],"relatedName":"StoreItemFolder"},{"name":"fileFolder","fkMap":[{"fk":"folderID","relatedKey":"appFileID"}],"relatedName":"AppFile"},{"name":"sizeFor","fkMap":[{"fk":"sizeForID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"sizes","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"variantFor","fkMap":[{"fk":"variantForID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"variants","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"vendor","fkMap":[{"fk":"vendorID","relatedKey":"contactID"}],"relatedName":"Contact"},{"name":"storeItemPrices","isCollection":true,"isInverse":true,"relatedName":"StoreItemPrice"},{"name":"priceAddOns","isCollection":true,"isInverse":true,"relatedName":"StorePriceAddOn"},{"name":"mediaFiles","isCollection":true,"isInverse":true,"relatedName":"StoreMediaFile"},{"name":"insights","isCollection":true,"isInverse":true,"relatedName":"StoreInsight"},{"name":"ledgers","isCollection":true,"isInverse":true,"relatedName":"StoreLedger"},{"name":"lineItems","isCollection":true,"isInverse":true,"relatedName":"StoreJournalLineItem"},{"name":"storeItemTags","isCollection":true,"isInverse":true,"relatedName":"StoreItemTag"}]}
 );
 modelEntitySchemas["StoreItem"] = StoreItem;
 
@@ -994,6 +1001,7 @@ export interface IStoreItemPrice extends IClrEntity {
 	maxAmount?: number | null;
 	active?: boolean;
 	storeItem?: IStoreItem;
+	addons?: ICollection<IStorePriceAddOn>;
 	lineItems?: ICollection<IStoreJournalLineItem>;
 }
 
@@ -1001,20 +1009,39 @@ export const StoreItemPrice: IModel<IStoreItemPrice> = new Model<IStoreItemPrice
 "StoreItemPrice",
 ["priceID"],
 { startDate: new DefaultFactory(() => new DateTime()),currency: "",amount: 0,active: false },
-{"name":"store_item_prices","keys":[{"name":"priceID","type":"number","generated":"identity"}],"properties":[{"name":"storeItemID","type":"number"},{"name":"startDate","type":"DateTime","default":["startDate","new DefaultFactory(() => new DateTime())"]},{"name":"endDate","type":"DateTime","default":["endDate","new DefaultFactory(() => new DateTime())"]},{"name":"currency","type":"string","default":["currency","\"\""]},{"name":"amount","type":"number","default":["amount","0"]},{"name":"maxAmount","type":"number","default":["maxAmount","0"]},{"name":"active","type":"boolean","default":["active","false"]}],"relations":[{"name":"storeItem","fkMap":[{"fk":"storeItemID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"lineItems","isCollection":true,"isInverse":true,"relatedName":"StoreJournalLineItem"}]}
+{"name":"store_item_prices","keys":[{"name":"priceID","type":"number","generated":"identity"}],"properties":[{"name":"storeItemID","type":"number"},{"name":"startDate","type":"DateTime","default":["startDate","new DefaultFactory(() => new DateTime())"]},{"name":"endDate","type":"DateTime","default":["endDate","new DefaultFactory(() => new DateTime())"]},{"name":"currency","type":"string","default":["currency","\"\""]},{"name":"amount","type":"number","default":["amount","0"]},{"name":"maxAmount","type":"number","default":["maxAmount","0"]},{"name":"active","type":"boolean","default":["active","false"]}],"relations":[{"name":"storeItem","fkMap":[{"fk":"storeItemID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"addons","isCollection":true,"isInverse":true,"relatedName":"StorePriceAddOn"},{"name":"lineItems","isCollection":true,"isInverse":true,"relatedName":"StoreJournalLineItem"}]}
 );
 modelEntitySchemas["StoreItemPrice"] = StoreItemPrice;
 
+export interface IStorePriceAddOn extends IClrEntity {
+	priceID?: number;
+	addOnItemID?: number;
+	inclusive?: boolean;
+	print?: boolean;
+	price?: IStoreItemPrice;
+	addOnItem?: IStoreItem;
+}
+
+export const StorePriceAddOn: IModel<IStorePriceAddOn> = new Model<IStorePriceAddOn>(
+"StorePriceAddOn",
+["priceID","addOnItemID"],
+{ inclusive: false,print: false },
+{"name":"store_price_add_ons","keys":[{"name":"priceID","type":"number"},{"name":"addOnItemID","type":"number"}],"properties":[{"name":"inclusive","type":"boolean","default":["inclusive","false"]},{"name":"print","type":"boolean","default":["print","false"]}],"relations":[{"name":"price","fkMap":[{"fk":"priceID","relatedKey":"priceID"}],"relatedName":"StoreItemPrice"},{"name":"addOnItem","fkMap":[{"fk":"addOnItemID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"}]}
+);
+modelEntitySchemas["StorePriceAddOn"] = StorePriceAddOn;
+
 export interface IStoreMediaFile extends IClrEntity {
 	storeItemID?: number;
 	appFileID?: number;
+	fileContentID?: number | null;
 	sortOrder?: number;
 	title?: string;
 	description?: string | null;
+	isPreview?: boolean;
+	isDeleted?: boolean;
 	fileHtmlView?: string | null;
 	fileLink?: string | null;
-	signature?: string | null;
-	signatureExpiry?: string | null;
+	signed?: string;
 	storeItem?: IStoreItem;
 	appFile?: IAppFile;
 }
@@ -1022,8 +1049,8 @@ export interface IStoreMediaFile extends IClrEntity {
 export const StoreMediaFile: IModel<IStoreMediaFile> = new Model<IStoreMediaFile>(
 "StoreMediaFile",
 ["storeItemID","appFileID"],
-{ sortOrder: 0,title: "" },
-{"name":"store_media_files","keys":[{"name":"storeItemID","type":"number"},{"name":"appFileID","type":"number"}],"properties":[{"name":"sortOrder","type":"number","default":["sortOrder","0"]},{"name":"title","type":"string","default":["title","\"\""]},{"name":"description","type":"string","default":["description","\"\""]},{"name":"fileHtmlView","type":"string","default":["fileHtmlView","\"\""]},{"name":"fileLink","type":"string","default":["fileLink","\"\""]},{"name":"signature","type":"string","default":["signature","\"\""]},{"name":"signatureExpiry","type":"string","default":["signatureExpiry","\"\""]}],"relations":[{"name":"storeItem","fkMap":[{"fk":"storeItemID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"appFile","fkMap":[{"fk":"appFileID","relatedKey":"appFileID"}],"relatedName":"AppFile"}]}
+{ sortOrder: 0,title: "",isPreview: false,isDeleted: false },
+{"name":"store_media_files","keys":[{"name":"storeItemID","type":"number"},{"name":"appFileID","type":"number"}],"properties":[{"name":"fileContentID","type":"number","default":["fileContentID","0"]},{"name":"sortOrder","type":"number","default":["sortOrder","0"]},{"name":"title","type":"string","default":["title","\"\""]},{"name":"description","type":"string","default":["description","\"\""]},{"name":"isPreview","type":"boolean","default":["isPreview","false"]},{"name":"isDeleted","type":"boolean","default":["isDeleted","false"]},{"name":"fileHtmlView","type":"string","default":["fileHtmlView","\"\""]},{"name":"fileLink","type":"string","default":["fileLink","\"\""]}],"relations":[{"name":"storeItem","fkMap":[{"fk":"storeItemID","relatedKey":"storeItemID"}],"relatedName":"StoreItem"},{"name":"appFile","fkMap":[{"fk":"appFileID","relatedKey":"appFileID"}],"relatedName":"AppFile"}]}
 );
 modelEntitySchemas["StoreMediaFile"] = StoreMediaFile;
 

package/src/public/store/StoreApp.tsx

@@ -1,6 +1,7 @@
 import MobileDesktopApp from "@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp";
 import "../../style/GlobalStyle";
 import Pack from "@web-atoms/core/dist/Pack";
+import "./styles/common";
 
 
 @Pack

package/src/public/store/StoreItemDetailView.tsx

@@ -1,17 +1,174 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import EntityService from "../../services/EntityService";
+import { IStoreItem, IStoreMediaFile, StoreItem } from "../../model/model";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import PinchZoomView from "@web-atoms/web-controls/dist/basic/PinchZoomView";
+import { signedImageUrl, signedUrl } from "../../common/fileUrl";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import styled from "@web-atoms/core/dist/style/styled";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import { formatCurrency } from "../../common/currency";
 
 const url = (window as any).pageUrl as URL;
 
 
-let {1: storeID = "1", 2: itemID = "2a" } = /^\/channels\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
+let {1: storeID = "1", 2: itemID = "5" } = /^\/store\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
 
 storeID = parseInt(storeID, 36);
 itemID = parseInt(itemID, 36);
 
+const css = styled.css `
 
-export default class StoreItemDetailView extends ContentPage {
+    margin: 10px;
 
-    
+    display: flex;
+    gap: 10px;
+    position: relative;
+    flex-wrap: wrap;
+
+    & > h2 {
+        flex: 1 1 100%;
+    }
+
+    & > .photos {
+
+        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;
+
+        & > .thumbnails {
+            grid-row: 1;
+            grid-column: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            & > img {
+                cursor: pointer;
+                margin: 5px;
+                border-radius: 10px;
+                &:hover {
+                    box-shadow: 0 0 5px 1px #0000ff7f;
+                }
+            }
+        }
+        & > .preview {
+            grid-row: 1;
+            grid-column: 2;
+            height: 60vh;
+            min-width: 50vw;
+            & img {
+                -webkit-user-drag: none;
+            }
+        }
+    }
+`.installLocal();
+
+
+export default class StoreItemDetailView extends AtomControl {
+
+    @InjectProperty
+    entityService: EntityService;
+
+    model: IStoreItem;
+
+    selectedFile: IStoreMediaFile = null;
+
+    constructor(app, e) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    async init() {
+
+        this.renderer = <div>
+            <label text="..."/>
+        </div>;
+
+        this.model = await this.getItem();
+
+        const images = this.model.mediaFiles.where((x) => x.isPreview);
+        this.selectedFile = images[0];
+
+        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 sellPrice = price.amount;
+        const maxPrice = price.maxAmount ? price.maxAmount : ( Math.ceil(price.amount * 1.1));
+
+        const [offerHtml, specHtml] = await Promise.all([
+            offer ? FetchBuilder.get(signedUrl(offer)).responseAsText() : Promise.resolve(""),
+            specifications ? FetchBuilder.get(signedUrl(specifications)).responseAsText() : Promise.resolve("")
+        ]);
+
+        this.renderer = <div class={css}>
+            <h2>{this.model.name}</h2>
+
+            <section class="photos">
+                <div class="thumbnails">
+                    { ... images.map((x) =>
+                        <img
+                            class="thumbnail"
+                            data-click-event="change-image"
+                            data-id={x.appFileID}
+                            src={signedImageUrl(x, 150)} />)}
+                </div>
+                <PinchZoomView
+                    class="preview"
+                    source={Bind.oneWay(() => signedImageUrl(this.selectedFile, 720))}
+                    />
+            </section>
+
+            <section>
+
+                { /* Display Offers */ }
+                {
+                    offerHtml && <section innerHTML={offerHtml}>
+                    </section>
+                }
+
+                <p>
+                    {this.model.description}
+                </p>
+                <p>
+                    <label text={ formatCurrency(sellPrice, price.currency) }/>
+                </p>
+                <button>Buy</button>
+            </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);
+    }
+
+    async getItem() {
+        return this.entityService
+            .query(StoreItem, "storeQuery")
+            .where({ storeID, itemID }, (p) => (x) => x.storeID === p.storeID && x.storeItemID === p.itemID)
+            .include((x) => [
+                x.storeItemPrices,
+                x.storeItemTags.forEach((t) => t.tag),
+                x.mediaFiles,
+            ])
+            .firstOrDefault();
+    }
 
 }

package/src/public/store/StoreItemListView.tsx

@@ -6,7 +6,7 @@ import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import InfiniteRepeater from "../../common/controls/repeater/InfiniteRepeater";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import EntityService from "../../services/EntityService";
-import { AppFile, IStoreItem, StoreItem } from "../../model/model";
+import { AppFile, IStoreItem, StoreItem, StoreMediaFile } from "../../model/model";
 import { Sql } from "../../common/Sql";
 import { apiPath } from "../../common/apiPath";
 import SocialMailApp from "../../common/SocialMailApp";
@@ -74,7 +74,7 @@ import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
     `.installGlobal("[data-shopping-cart-list=shopping-cart-list]");
 
 
-export default class StoreItemListView extends ContentPage {
+export default class StoreItemListView extends AtomControl {
 
     search = "";
 
@@ -91,7 +91,7 @@ export default class StoreItemListView extends ContentPage {
 
     async init() {
 
-        this.render(<div>
+        this.render(<div data-shopping-cart-list="shopping-cart-list">
             <header>
                 <input type="search" value={Bind.twoWaysImmediate(() => this.search)}/>
             </header>
@@ -134,10 +134,10 @@ export default class StoreItemListView extends ContentPage {
     }
 
     async downloadImage(item: IStoreItem) {
-        const file = await this.entityService.query(AppFile, "storeItemFiles", item.folderID)
-            .where((x) => Sql.text.like(x.contentType, "image/%"))
+        const file = await this.entityService.query(StoreMediaFile, "storeQuery", item.storeItemID, item.signed)
+            .orderBy((x) => x.sortOrder)
             .firstOrDefault();
-        return apiPath(`/api/store/file/webp(700)/${item.folderID}/${file.appFileID}/${file.fileContentID}/${file.name}.webp`);
+        return apiPath(`/api/signed/webp(700)/${file.appFileID}/${file.fileContentID}/${file.signed}/file.webp`);
     }
 
 

package/src/public/store/styles/common.ts

@@ -0,0 +1,7 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+* {
+    box-sizing: border-box;
+}
+`.installGlobal();

package/src/services/store/StoreItemService.ts

@@ -1,9 +1,11 @@
 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 } from "../../model/model";
+import { AppFile, IStoreItem, Store, StoreItem, StoreMediaFile } from "../../model/model";
 import { Sql } from "../../common/Sql";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
+import MimeTypeService from "../files/MimeTypeService";
+import CloudFileService from "../../web/page/files/service/CloudFileService";
 
 @DISingleton()
 export default class StoreItemService {
@@ -11,10 +13,23 @@ export default class StoreItemService {
     @Inject
     entityService: EntityService;
 
+    @Inject
+    mimeTypeService: MimeTypeService;
+
+    @Inject
+    cloudFileService: CloudFileService;
+
     async get(id: any) {
         const items = await this.entityService.query(StoreItem)
             .where({ id }, (p) => (x) => x.storeItemID === p.id || x.variantForID === p.id || x.sizeForID === p.id)
-            .include((x) => [ x.itemFolder, x.fileFolder, x.storeItemPrices, x.storeItemTags.forEach((t) => t.tag)])
+            .include((x) => [
+                x.store.folder,
+                x.itemFolder,
+                x.fileFolder,
+                x.storeItemPrices.forEach((i) => i.addons.forEach((a) => a.addOnItem.storeItemPrices)),
+                x.mediaFiles,
+                x.storeItemTags.forEach((t) => t.tag)
+            ])
             .toArray();
         const item = items.find((x) => x.storeItemID === id);
         if (!item.folderID) {
@@ -69,10 +84,61 @@ export default class StoreItemService {
     async save(storeItem: IStoreItem) {
         await this.entityService.save(storeItem, (c) =>
             c.include((x) => x.storeItemPrices)
+                .thenInclude((x) => x.addons)
             .include((x) => x.storeItemTags)
                 .thenInclude((x) => x.tag)
+            .include((x) => x.mediaFiles)
         );
         return storeItem;
     }
 
+    async getOrCreateMediaFile(model: IStoreItem, name: string, template: () => string) {
+        const { folderID } = model;
+        let file = await this.entityService
+            .query(AppFile)
+            .where({ folderID, name }, (p) => (x) => x.parentID === p.folderID
+                && x.name === p.name
+            ).firstOrDefault();
+        if (!file) {
+
+            file = AppFile.create({
+                parentID: folderID,
+                isFolder: false,
+                contentType: await this.mimeTypeService.getMimeType(name),
+                name
+            });
+            await this.entityService.save(file);
+            if (template) {
+                const { fileContentID, url } = await this.cloudFileService.saveFile({
+                    appFileID: file.appFileID,
+                    content: new File([template()], name, { type: "text/html"})
+                });
+                file.url = url;
+                file.fileContentID = fileContentID;
+                file.downloadUrl = url;
+            }
+        }
+
+        let mediaFile = model.mediaFiles?.find((x) => x.title === name);
+        if (!mediaFile) {
+            mediaFile = StoreMediaFile.create({
+                storeItemID: model.storeItemID,
+                appFileID: file.appFileID,
+                fileContentID: file.fileContentID,
+                isPreview: false,
+                title: name
+            });
+            await this.entityService.save(mediaFile);
+            (model.mediaFiles ??= []).add(mediaFile);
+        } else {
+            if(mediaFile.fileContentID !== file.fileContentID) {
+                mediaFile.appFileID = file.appFileID;
+                mediaFile.fileContentID = file.fileContentID;
+                await this.entityService.save(mediaFile, (c) => c);
+            }
+        }
+        mediaFile.appFile = file;
+        return mediaFile;
+    }
+
 }

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

@@ -183,6 +183,7 @@ export default class HtmlPageEditor extends AtomControl {
 
     public originalBaseUrl: string;
     public lastCommittedHtml: string;
+    public lastCommittedBody: string;
 
     // public get htmlPageUrl() {
     //     return this.htmlDocument.baseURI.toString();
@@ -609,6 +610,7 @@ export default class HtmlPageEditor extends AtomControl {
             }
         }
         this.lastCommittedHtml = clone.outerHTML;
+        this.lastCommittedBody = body.innerHTML;
         this.element.dispatchEvent(new CustomEvent("htmlPageChanged", { detail: clone.outerHTML, bubbles: true }));
         AtomBinder.refreshValue(this, "htmlPage");
         setTimeout(() => {

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

@@ -39,7 +39,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
     async openVariables() {
         let file = await this.cloudFileService.children(this.folder.appFileID, "styles/vars.css").firstOrDefault();
         let content = await FetchBuilder.get(file.downloadUrl).responseAsText();
-        const modifiedContent = await PageNavigator.pushPageForResult(CodeEditorPage, { file, content } );
+        const modifiedContent = await PageNavigator.pushPageForResult(CodeEditorPage, { fileName: file.name, content } );
         if (modifiedContent !== content) {
             // save ...
             content = modifiedContent;

package/src/web/page/files/media/ChooseMediaPage.tsx

@@ -61,11 +61,15 @@ const css = styled.css `
                 left: 0;
                 top: 5px;
                 width: 100%;
+                max-width: 200px;
             }
 
             & > .file-preview {
                 grid-row: 2;
                 grid-column: 1 / span 2;
+                max-width: 200px;
+                height: 200px;
+                object-fit: contain;
             }
 
 
@@ -129,7 +133,6 @@ export default class ChooseMediaPage extends PopupWindowPage<
         this.renderer = <div class={css}>
             <FolderTreeView
                 class="folder-tree"
-                accept={accept}
                 folderId={this.parameters.folder.appFileID}
                 selectedItem={Bind.twoWaysImmediate(() => this.selectedFolder)}
                 />
@@ -168,6 +171,7 @@ export default class ChooseMediaPage extends PopupWindowPage<
                             folder: this.selectedFolder,
                             version: this.version,
                             showFolder: false,
+                            includeFilesInFolder: false,
                             accept,
                             cancelToken
                         })

package/src/web/page/files/service/CloudFileService.ts

@@ -188,7 +188,8 @@ export default class CloudFileService {
         cancelToken,
         showDeleted = false,
         showSnapShot = false,
-        showFolder = true
+        showFolder = true,
+        includeFilesInFolder = true
     }: {
         search: string,
         accept?: string,
@@ -197,7 +198,8 @@ export default class CloudFileService {
         version?: any,
         showDeleted?: boolean,
         showFolder?: boolean,
-        showSnapShot?: boolean
+        showSnapShot?: boolean,
+        includeFilesInFolder?: boolean
     }) {
         const parentID = folder?.appFileID;
 
@@ -243,7 +245,9 @@ export default class CloudFileService {
                 if (accept && iterator.parentID === folder.appFileID) {
                     const children = (folder.children ??= []);
                     if (!children.some((f) => f.appFileID === iterator.appFileID)) {
-                        children.add(iterator);
+                        if (includeFilesInFolder || iterator.isFolder) {
+                            children.add(iterator);
+                        }
                     }
                 }
                 results.push(iterator);