@social-mail/social-mail-client 1.2.649 → 1.2.650

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.649",
+  "version": "1.2.650",
   "description": "",
   "main": "index.js",
   "scripts": {

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

@@ -8,6 +8,12 @@ export default class StoreCommands extends Commands {
         openPage: () => import("../pages/StoreOrdersPage")
     });
 
+    static order = Command.create({
+        route: "/store/order/{journalID}",
+        routeOrder: 10,
+        openPage: () => import("../pages/StoreOrderPage")
+    });
+
     static productDetail = Command.create({
         route: "/store/{storeItemID}",
         routeOrder: 100,

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

@@ -0,0 +1,88 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+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 { DateFormats } from "../../../common/date/DateFormats";
+
+export default class StoreOrderPage extends ContentPage<Partial<IStoreJournal>> {
+
+    @InjectProperty
+    entityService: EntityService;
+
+    model: IStoreJournal = null;
+
+    async init() {
+
+        this.renderer = <div>
+            <Loader/>
+        </div>;
+
+        const order = this.model = await this.load();
+
+        order.paymentAttempts ??= [];
+        order.paymentAttempts = order.paymentAttempts.orderByDescending((x) => x.success);
+
+        this.renderer = <div>
+            <table>
+                <tr>
+                    <td>OrderID</td>
+                    <td>{order.journalID}</td>
+                </tr>
+                <tr>
+                    <td>Created At</td>
+                    <td>{ DateFormats.withWeekDayAndTime(order.dateCreated)}</td>
+                </tr>
+                <tr>
+                    <td>Updated At</td>
+                    <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>
+            <table>
+                <tr>
+                    <td>Total</td>
+                    <td>{order.total}</td>
+                </tr>
+            </table>
+
+            <br/>
+            <br/>
+
+            <table>
+                <thead>
+                    <caption>
+                        Payments
+                    </caption>
+                </thead>
+                { ... order.paymentAttempts.map((a) => <tr>
+                    <td>{DateFormats.relative.short(a.dateCreated)}</td>
+                    <td>{a.success ? "Paid" : "-"}</td>
+                </tr> )}
+            </table>
+
+        </div>;
+
+    }
+
+    async load() {
+        const orderID = this.parameters.journalID;
+        const order = await this.entityService.query(StoreJournal)
+            .where({ orderID }, (p) => (x) => x.journalID === p.orderID)
+            .include((x) => [
+                x.paymentAttempts,
+                x.buyer,
+                x.buyerBillingAddress,
+                x.lineItems.forEach((l) => [l.itemPrice, l.item])])
+            .firstOrDefault();
+        return order;
+    }
+
+}

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

@@ -8,6 +8,7 @@ import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import InfiniteRepeater from "../../../common/controls/repeater/InfiniteRepeater";
 import WebSiteUserService from "../../user/WebSiteUserService";
 import { DateFormats } from "../../../common/date/DateFormats";
+import StoreCommands from "../commands/StoreCommands";
 
 export default class StoreOrderPage extends ContentPage {
 
@@ -38,11 +39,16 @@ export default class StoreOrderPage extends ContentPage {
                     <label text={ DateFormats.relative.short(item.dateCreated)}/>
                     <label text={item.status}/>
                     <br/>
-                    <a href={`/store/checkout/${item.journalID}`}>
-                        <button data-click-event="pay">
-                            <i class="fas fa-pay"/>
-                        </button>
-                    </a>
+                    <a href={StoreCommands.order.displayRoute(item)}><button text="Details"/></a>
+                    { item.status !== "paid"
+                        ? <a href={`/store/checkout/${item.journalID}`}>
+                            <button data-click-event="pay">
+                                <i class="fas fa-pay"/>
+                                Pay
+                            </button>
+                        </a>
+                        : <label text="Paid"/>
+                    }
                 </div>}
                 />
         </div>;