feat(com-pwa): item detail template

Alwatr · Mar 6, 2023 · 93fbdc0 · 93fbdc0
1 parent 1ee533d
commit 93fbdc0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/uniquely/com-pwa/src/l18r/fa.json b/uniquely/com-pwa/src/l18r/fa.json
@@ -45,6 +45,11 @@
     "order_shipping_invalid": "اطلاعات فرم صحیح نمی‌باشد!",
     "order_shipping_submit_success": "سفارش با موفقیت ثبت شد.",
 
+    "order_detail_product_id": "کد محصول",
+    "order_detail_qty": "تعداد",
+    "order_detail_price": "قیمت",
+    "order_detail_final_price": "قیمت نهایی",
+
     "cancel": "لغو",
 
     "submit_order_success": "سفارش شما با موفقیت ثبت شد.",

diff --git a/uniquely/com-pwa/src/page-order/page-order-detail.ts b/uniquely/com-pwa/src/page-order/page-order-detail.ts
@@ -7,6 +7,7 @@ import {
   SignalMixin,
   property,
   PropertyValues,
+  nothing,
 } from '@alwatr/element';
 import {message} from '@alwatr/i18n';
 import '@alwatr/ui-kit/button/button.js';
@@ -16,7 +17,7 @@ import '@alwatr/ui-kit/text-field/text-field.js';
 
 import {topAppBarContextProvider} from '../context.js';
 
-import type {Order, OrderDraft} from '@alwatr/type/customer-order-management.js';
+import type {Order, OrderDraft, OrderItem} from '@alwatr/type/customer-order-management.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -38,6 +39,17 @@ export class AlwatrPageOrderDetail extends LocalizeMixin(SignalMixin(AlwatrBaseE
       box-sizing: border-box;
       min-height: 100%;
     }
+
+    alwatr-surface {
+      margin-bottom: var(--sys-spacing-track);
+    }
+
+    alwatr-surface > div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
   `;
 
   @property({attribute: false})
@@ -61,7 +73,7 @@ export class AlwatrPageOrderDetail extends LocalizeMixin(SignalMixin(AlwatrBaseE
   override render(): unknown {
     this._logger.logMethod('render');
     return html`
-      <pre dir="ltr">${JSON.stringify(this.order, undefined, 4)}</pre>
+      ${this.order?.itemList?.map((item) => this._itemDetailTemplate(item)) ?? nothing}
       <button @click=${this._addNewItem}>Add new product</button>
     `;
   }
@@ -70,4 +82,27 @@ export class AlwatrPageOrderDetail extends LocalizeMixin(SignalMixin(AlwatrBaseE
     this._logger.logMethod('_addNewItem');
     this.dispatchEvent(new CustomEvent('request-redirect', {detail: {page: 'product'}}));
   }
+
+  protected _itemDetailTemplate(item: OrderItem): unknown {
+    return html`
+      <alwatr-surface elevated>
+        <div>
+          <span>${message('order_detail_product_id')}:</span>
+          <span><b>${item.productId}</b></span>
+        </div>
+        <div>
+          <span>${message('order_detail_qty')}:</span>
+          <span><b>${item.qty}</b></span>
+        </div>
+        <div>
+          <span>${message('order_detail_price')}:</span>
+          <span><b>${item.price}</b></span>
+        </div>
+        <div>
+          <span>${message('order_detail_final_price')}:</span>
+          <span><b>${item.finalPrice}</b></span>
+        </div>
+      </alwatr-surface>
+    `;
+  }
 }