feat(com-pwa/order-detail-base): use alwatr-icon-box for render_part_…

…message
Alwatr · Mar 7, 2023 · d793b31 · d793b31
1 parent 058381b
commit d793b31
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 27 deletions.
diff --git a/uniquely/com-pwa/src/content/l18e-fa.json b/uniquely/com-pwa/src/content/l18e-fa.json
@@ -30,7 +30,7 @@
     "page_new_order_submit_success_message": "سفارش با موفقیت ثبت شد.",
     "page_new_order_detail_button": "مشاهده اطلاعات سفارش",
     "page_new_order_tracking_button": "پیگیری سفارش",
-    "page_new_order_submit_failed_message": "ثبت سفارش با خطا روبرو شد!",
+    "page_new_order_submit_failed_message": "خطا در اتصال به اینترنت! لطفا مجدد تلاش کنید.",
     "page_new_order_retry_button": "تلاش مجدد",
     "page_new_order_shipping_info_not_valid_message": "لطفا اطلاعات بارگیری را تکمیل کنید.",
     "page_new_order_order_not_valid_message": "لطفا مقادیر سفارش رو بازبینی و اصلاح کنید.",

diff --git a/uniquely/com-pwa/src/ui/page/new-order.ts b/uniquely/com-pwa/src/ui/page/new-order.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  StateMachineMixin,
-  UnresolvedMixin,
-} from '@alwatr/element';
+import {customElement, html, StateMachineMixin, UnresolvedMixin} from '@alwatr/element';
 import {message} from '@alwatr/i18n';
-import {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
 
 import {buttons, pageNewOrderStateMachine} from '../../manager/controller/new-order.js';
 import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';
@@ -32,7 +26,7 @@ export class AlwatrPageNewOrder extends StateMachineMixin(
 
   protected render_state_loading(): unknown {
     this._logger.logMethod('render_state_loading');
-    return this.render_part_message('loading');
+    return this.render_part_message('loading', 'ellipsis-horizontal');
   }
 
   protected render_state_edit(): unknown {
@@ -84,31 +78,21 @@ export class AlwatrPageNewOrder extends StateMachineMixin(
 
   protected render_state_submitting(): unknown {
     this._logger.logMethod('render_state_submitting');
-    return this.render_part_message('page_new_order_submitting_message');
+    return this.render_part_message('page_new_order_submitting_message', 'cloud-upload');
   }
 
   protected render_state_submitSuccess(): unknown {
     this._logger.logMethod('render_state_submitSuccess');
-    const content: IconBoxContent = {
-      headline: message('page_new_order_submit_success_message'),
-      icon: 'checkmark-done',
-      elevated: 1,
-    };
     return [
-      html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`,
+      this.render_part_message('page_new_order_submit_success_message', 'checkmark-done'),
       this.render_part_btn_submit_success(),
     ];
   }
 
   protected render_state_submitFailed(): unknown {
     this._logger.logMethod('render_state_submitFailed');
-    const content: IconBoxContent = {
-      headline: message('page_new_order_submit_failed_message'),
-      icon: 'close',
-      elevated: 1,
-    };
     return [
-      html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`,
+      this.render_part_message('page_new_order_submit_failed_message', 'cloud-offline'),
       this.render_part_btn_submit_failed(),
     ];
   }

diff --git a/uniquely/com-pwa/src/ui/page/order-detail.ts b/uniquely/com-pwa/src/ui/page/order-detail.ts
@@ -28,12 +28,12 @@ export class AlwatrPageOrderDetail extends StateMachineMixin(
 
   protected render_state_loading(): unknown {
     this._logger.logMethod('render_state_loading');
-    return this.render_part_message('loading');
+    return this.render_part_message('loading', 'ellipsis-horizontal');
   }
 
   protected render_state_notFound(): unknown {
     this._logger.logMethod('render_state_notFound');
-    return this.render_part_message('page_order_detail_not_found');
+    return this.render_part_message('page_order_detail_not_found', 'close');
   }
 
   protected render_state_reloading(): unknown {

diff --git a/uniquely/com-pwa/src/ui/stuff/order-detail-base.ts b/uniquely/com-pwa/src/ui/stuff/order-detail-base.ts
@@ -23,6 +23,7 @@ import {qtyUpdate} from '../../manager/controller/new-order.js';
 import type {AlwatrDocumentStorage} from '@alwatr/type';
 import type {Order, OrderShippingInfo, OrderDraft, OrderItem, Product} from '@alwatr/type/customer-order-management.js';
 import type {IconButtonContent} from '@alwatr/ui-kit/button/icon-button.js';
+import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
 import type {AlwatrTextField} from '@alwatr/ui-kit/text-field/text-field.js';
 
 export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseElement)) {
@@ -129,10 +130,15 @@ export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseE
     }
   `;
 
-  protected render_part_message(key: string): unknown {
+  protected render_part_message(key: string, icon: string): unknown {
     this._logger.logMethod('render_part_message');
-    // TODO: add icon
-    return html`<div class="message">${message(key)}</div>`;
+    const content: IconBoxContent = {
+      headline: message(key),
+      icon: icon,
+      tinted: 1,
+    };
+
+    return html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`;
   }
 
   protected render_part_status(order: Order | OrderDraft): unknown {