From ae56e93cbb7ee86e4a012a5efd8914651b56b2be Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Sun, 19 Mar 2023 18:50:05 +0330
Subject: [PATCH 01/15] refactor(ui-kit/button): use button content property

---
 ui/ui-kit/src/button/button.ts | 71 ++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 17 deletions(-)

diff --git a/ui/ui-kit/src/button/button.ts b/ui/ui-kit/src/button/button.ts
index db45f5d71..64697fc63 100644
--- a/ui/ui-kit/src/button/button.ts
+++ b/ui/ui-kit/src/button/button.ts
@@ -1,10 +1,11 @@
-import {css, customElement, html, property} from '@alwatr/element';
+import {PropertyValues, css, customElement, html, nothing, property} from '@alwatr/element';
+import {message} from '@alwatr/i18n';
 import '@alwatr/icon';
 import {eventTrigger} from '@alwatr/signal';
 
 import {AlwatrSurface} from '../card/surface.js';
 
-import type {ClickSignalType, Stringifyable} from '@alwatr/type';
+import type {ClickSignalType, Stringifyable, StringifyableRecord} from '@alwatr/type';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -12,6 +13,35 @@ declare global {
   }
 }
 
+export interface ButtonContent extends StringifyableRecord {
+  /**
+   * Label i18n key.
+   */
+  labelKey?: string;
+
+  /**
+   * Icon name.
+   */
+  icon?: string;
+
+  /**
+   * Flip icon on rtl
+   */
+  flipRtl?: true;
+
+  /**
+   * Unique name for identify click event over signal.
+   */
+  clickSignalId?: string;
+
+  /**
+   * Dispatched signal with ClickSignalType and this detail.
+   */
+  clickDetail?: Stringifyable;
+
+  disabled?: boolean;
+}
+
 /**
  * Alwatr outlined text field.
  *
@@ -51,13 +81,7 @@ export class AlwatrButton extends AlwatrSurface {
   ];
 
   @property()
-    icon?: string;
-
-  @property({attribute: 'click-signal-id'})
-    clickSignalId?: string;
-
-  @property({attribute: false})
-    detail?: Stringifyable;
+    content?: ButtonContent;
 
   override connectedCallback(): void {
     super.connectedCallback();
@@ -70,29 +94,42 @@ export class AlwatrButton extends AlwatrSurface {
     this.removeEventListener('click', this._click);
   }
 
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
+    if (this.content?.clickSignalId != null && changedProperties.has('content')) {
+      this.setAttribute('click-signal-id', this.content?.clickSignalId);
+    }
+  }
+
   override render(): unknown {
     this._logger.logMethod('render');
-    if (this.icon) {
+
+    if (this.content == null) return nothing;
+    if (this.content.icon) {
       return html`
-        <alwatr-icon .name=${this.icon} ?flip-rtl=${this.hasAttribute('flip-rtl')}></alwatr-icon>
-        <slot>button</slot>
+        <alwatr-icon
+          .name=${this.content.icon}
+          ?flip-rtl=${this.hasAttribute('flip-rtl') || this.content.flipRtl}
+        ></alwatr-icon>
+        <slot>${message(this.content.labelKey)}</slot>
       `;
     }
     else {
-      return html`<slot>button</slot>`;
+      return html`<slot>${message(this.content.labelKey)}</slot>`;
     }
   }
 
   protected _click(event: MouseEvent): void {
-    this._logger.logMethodArgs('click', {clickSignalId: this.clickSignalId});
-    if (this.clickSignalId) {
-      eventTrigger.dispatch<ClickSignalType>(this.clickSignalId, {
+    if (this.content == null) return;
+    this._logger.logMethodArgs('click', {clickSignalId: this.content.clickSignalId});
+    if (this.content.clickSignalId) {
+      eventTrigger.dispatch<ClickSignalType>(this.content.clickSignalId, {
         x: event.clientX,
         y: event.clientY,
         altKey: event.altKey,
         ctrlKey: event.ctrlKey,
         metaKey: event.metaKey,
-        detail: this.detail,
+        detail: this.content.clickDetail,
       });
     }
   }

From a3f3872c16e2bf5ad99c90cd03563007271fc530 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Sun, 19 Mar 2023 18:51:02 +0330
Subject: [PATCH 02/15] feat: use button content

---
 ui/ui-kit/src/snackbar/element.ts                | 6 +++++-
 uniquely/com-pwa/src/ui/page/order-list.ts       | 7 +------
 uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts | 9 ++-------
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/ui/ui-kit/src/snackbar/element.ts b/ui/ui-kit/src/snackbar/element.ts
index 95fd88396..662480722 100644
--- a/ui/ui-kit/src/snackbar/element.ts
+++ b/ui/ui-kit/src/snackbar/element.ts
@@ -121,7 +121,11 @@ export class AlwatrSnackbar extends AlwatrSurface {
     this._logger.logMethod('render');
     return html`<span class="message">${this.message}</span>${when(
         this.actionLabel,
-        () => html`<alwatr-button @click=${this._actionButtonClick}>${this.actionLabel}</alwatr-button>`,
+        () =>
+          html`<alwatr-button
+            .content=${{labelKey: this.actionLabel}}
+            @click=${this._actionButtonClick}
+          ></alwatr-button>`,
     )}`;
   }
 
diff --git a/uniquely/com-pwa/src/ui/page/order-list.ts b/uniquely/com-pwa/src/ui/page/order-list.ts
index 5cb90588b..6081b37cd 100644
--- a/uniquely/com-pwa/src/ui/page/order-list.ts
+++ b/uniquely/com-pwa/src/ui/page/order-list.ts
@@ -112,12 +112,7 @@ export class AlwatrPageOrderList extends ScheduleUpdateToFrameMixin(
         };
         return html`
           <alwatr-icon-box .content=${content}></alwatr-icon-box>
-          <alwatr-button
-            .icon=${buttons.reloadOrderStorage.icon}
-            .clickSignalId=${buttons.reloadOrderStorage.clickSignalId}
-          >
-            ${message('retry')}
-          </alwatr-button>
+          <alwatr-button .content=${buttons.retry}></alwatr-button>
         `;
       },
 
diff --git a/uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts b/uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts
index 2eaface3e..c51f94a45 100644
--- a/uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts
+++ b/uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts
@@ -151,13 +151,8 @@ export class AlwatrLotteryForm extends LocalizeMixin(SignalMixin(AlwatrBaseEleme
   protected partButtonTemplate(): unknown {
     return html`
       <div class="button-container">
-        <alwatr-button
-          .icon=${'checkmark-done-outline'}
-          @click=${this.submit}
-          outlined
-        >${message('submit_form')}
-        </alwatr-button>
-        <alwatr-button .icon=${'close-outline'} @click=${this.cancel}>${message('cancel')}</alwatr-button>
+        <alwatr-button .content=${{labelKey: 'submit_form'}} @click=${this.submit} outlined></alwatr-button>
+        <alwatr-button .content=${{labelKey: 'cancel'}} @click=${this.cancel}></alwatr-button>
       </div>
     `;
   }

From 1ed534bcaca563ea50901b8f92438f08916c957b Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Wed, 22 Mar 2023 16:47:11 +0330
Subject: [PATCH 03/15] refactor(ui/button): render template and reflect
 attribs

---
 ui/ui-kit/src/button/button.ts | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/ui/ui-kit/src/button/button.ts b/ui/ui-kit/src/button/button.ts
index 64697fc63..ce9b53d90 100644
--- a/ui/ui-kit/src/button/button.ts
+++ b/ui/ui-kit/src/button/button.ts
@@ -85,7 +85,6 @@ export class AlwatrButton extends AlwatrSurface {
 
   override connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('stated', '');
     this.addEventListener('click', this._click);
   }
 
@@ -96,27 +95,28 @@ export class AlwatrButton extends AlwatrSurface {
 
   protected override update(changedProperties: PropertyValues<this>): void {
     super.update(changedProperties);
-    if (this.content?.clickSignalId != null && changedProperties.has('content')) {
-      this.setAttribute('click-signal-id', this.content?.clickSignalId);
+
+    const disabled = Boolean(this.content?.disabled);
+    if (this.hasAttribute('disabled') !== disabled) {
+      this.toggleAttribute('disabled', disabled);
     }
   }
 
   override render(): unknown {
     this._logger.logMethod('render');
+    const content = this.content || {};
+
+    return [
+      content.icon
+        ? html`<alwatr-icon .name=${content.icon} ?flip-rtl=${content.flipRtl}></alwatr-icon>`
+        : nothing,
+      html`<slot>${message(content.labelKey)}</slot>`,
+    ];
+  }
 
-    if (this.content == null) return nothing;
-    if (this.content.icon) {
-      return html`
-        <alwatr-icon
-          .name=${this.content.icon}
-          ?flip-rtl=${this.hasAttribute('flip-rtl') || this.content.flipRtl}
-        ></alwatr-icon>
-        <slot>${message(this.content.labelKey)}</slot>
-      `;
-    }
-    else {
-      return html`<slot>${message(this.content.labelKey)}</slot>`;
-    }
+  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(_changedProperties);
+    this.setAttribute('stated', '');
   }
 
   protected _click(event: MouseEvent): void {

From dc1abcc238be892ebb889873800ab7a349f8f895 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Wed, 22 Mar 2023 17:06:28 +0330
Subject: [PATCH 04/15] refactor(ui-kit/button): check click signal id on click
 handler

---
 ui/ui-kit/src/button/button.ts | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/ui/ui-kit/src/button/button.ts b/ui/ui-kit/src/button/button.ts
index ce9b53d90..8f29bc593 100644
--- a/ui/ui-kit/src/button/button.ts
+++ b/ui/ui-kit/src/button/button.ts
@@ -80,9 +80,14 @@ export class AlwatrButton extends AlwatrSurface {
     `,
   ];
 
-  @property()
+  @property({type: Object})
     content?: ButtonContent;
 
+  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(_changedProperties);
+    this.setAttribute('stated', '');
+  }
+
   override connectedCallback(): void {
     super.connectedCallback();
     this.addEventListener('click', this._click);
@@ -114,23 +119,16 @@ export class AlwatrButton extends AlwatrSurface {
     ];
   }
 
-  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
-    super.firstUpdated(_changedProperties);
-    this.setAttribute('stated', '');
-  }
-
   protected _click(event: MouseEvent): void {
-    if (this.content == null) return;
+    if (this.content?.clickSignalId == null) return;
     this._logger.logMethodArgs('click', {clickSignalId: this.content.clickSignalId});
-    if (this.content.clickSignalId) {
-      eventTrigger.dispatch<ClickSignalType>(this.content.clickSignalId, {
-        x: event.clientX,
-        y: event.clientY,
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        detail: this.content.clickDetail,
-      });
-    }
+    eventTrigger.dispatch<ClickSignalType>(this.content.clickSignalId, {
+      x: event.clientX,
+      y: event.clientY,
+      altKey: event.altKey,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      detail: this.content.clickDetail,
+    });
   }
 }

From 24bbcd7b435fe9f78b64c54a935fbdf16c5d0616 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Wed, 22 Mar 2023 17:08:35 +0330
Subject: [PATCH 05/15] refactor(ui-kit/icon-button): render template and
 reflect attributes

---
 ui/ui-kit/src/button/icon-button.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/ui/ui-kit/src/button/icon-button.ts b/ui/ui-kit/src/button/icon-button.ts
index 384be9d5e..c1503b9e6 100644
--- a/ui/ui-kit/src/button/icon-button.ts
+++ b/ui/ui-kit/src/button/icon-button.ts
@@ -76,12 +76,16 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
     `,
   ];
 
-  @property({type: Object, attribute: false})
+  @property({type: Object})
     content?: IconButtonContent;
 
+  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(_changedProperties);
+    this.setAttribute('stated', '');
+  }
+
   override connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('stated', '');
     this.addEventListener('click', this._click);
   }
 
@@ -90,20 +94,20 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
     this.removeEventListener('click', this._click);
   }
 
-  protected override shouldUpdate(changedProperties: PropertyValues<this>): boolean {
-    return super.shouldUpdate(changedProperties) && this.content != null;
-  }
-
-  override render(): unknown {
-    this._logger.logMethod('render');
-    if (this.content == null) return;
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
 
-    const disabled = Boolean(this.content.disabled);
+    const disabled = Boolean(this.content?.disabled);
     if (this.hasAttribute('disabled') !== disabled) {
       this.toggleAttribute('disabled', disabled);
     }
+  }
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+    const content = this.content || {};
 
-    return html`<alwatr-icon .name=${this.content.icon} ?flip-rtl=${this.content.flipRtl}></alwatr-icon>`;
+    return html`<alwatr-icon .name=${content.icon} ?flip-rtl=${content.flipRtl}></alwatr-icon>`;
   }
 
   protected _click(event: MouseEvent): void {

From bff107d6c531937bef5fadc203fef1a96fd64ade Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Wed, 22 Mar 2023 17:17:14 +0330
Subject: [PATCH 06/15] refactor(com-pwa/order-detail): move button to manager

---
 uniquely/com-pwa/src/manager/buttons.ts      | 12 +++++++++-
 uniquely/com-pwa/src/ui/page/order-detail.ts | 23 +++++---------------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/uniquely/com-pwa/src/manager/buttons.ts b/uniquely/com-pwa/src/manager/buttons.ts
index b74b31b10..a0d44decf 100644
--- a/uniquely/com-pwa/src/manager/buttons.ts
+++ b/uniquely/com-pwa/src/manager/buttons.ts
@@ -18,6 +18,7 @@ export const buttons = {
 
   reloadOrderStorage: {
     icon: 'reload-outline',
+    flipRtl: true,
     clickSignalId: 'reload_order_storage',
   },
 
@@ -28,6 +29,11 @@ export const buttons = {
   showOrderDetail: {
     clickSignalId: 'show_order_detail_click_event',
   },
+  backToOrderList: {
+    icon: 'arrow-back-outline',
+    flipRtl: true,
+    clickSignalId: 'back_to_order_list_event',
+  },
 } as const;
 
 eventListener.subscribe('new_order_click_event', () => {
@@ -36,6 +42,10 @@ eventListener.subscribe('new_order_click_event', () => {
   });
 });
 
-eventListener.subscribe('show_order_detail_click_event', (event: ClickSignalType<Order>): void => {
+eventListener.subscribe(buttons.showOrderDetail.clickSignalId, (event: ClickSignalType<Order>): void => {
   redirect({sectionList: ['order-detail', event.detail.id]});
 });
+
+eventListener.subscribe(buttons.backToOrderList.clickSignalId, (): void => {
+  redirect({sectionList: ['order-list']});
+});
diff --git a/uniquely/com-pwa/src/ui/page/order-detail.ts b/uniquely/com-pwa/src/ui/page/order-detail.ts
index 74457f3b6..0f1afbc4e 100644
--- a/uniquely/com-pwa/src/ui/page/order-detail.ts
+++ b/uniquely/com-pwa/src/ui/page/order-detail.ts
@@ -2,8 +2,8 @@ import {customElement, html, property, state, UnresolvedMixin} from '@alwatr/ele
 import {finiteStateMachineConsumer} from '@alwatr/fsm';
 import {message} from '@alwatr/i18n';
 import {topAppBarContextProvider} from '@alwatr/pwa-helper/context.js';
-import {redirect} from '@alwatr/router';
 
+import {buttons} from '../../manager/buttons.js';
 import {OrderDetailFsm} from '../../manager/controller/order-detail.js';
 import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';
 
@@ -15,19 +15,6 @@ declare global {
   }
 }
 
-const buttons = {
-  backToOrderList: {
-    icon: 'arrow-back-outline',
-    flipRtl: true,
-    clickSignalId: 'order_detail_back_to_order_list_event',
-  },
-  reload: {
-    icon: 'reload-outline',
-    flipRtl: true,
-    clickSignalId: 'order_detail_reload_event',
-  },
-} as const;
-
 /**
  * Alwatr Customer Order Management Order Detail Page.
  */
@@ -60,8 +47,8 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
         receivePrevious: 'NextCycle',
       },
       {
-        signalId: buttons.backToOrderList.clickSignalId,
-        callback: (): void => redirect({sectionList: ['order-list']}),
+        signalId: buttons.reloadOrderStorage.clickSignalId,
+        transition: 'context_request_complete', // FIXME: set correct transition for reloading
       },
     ]));
   }
@@ -74,7 +61,7 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
         topAppBarContextProvider.setValue({
           headlineKey: 'page_order_list_headline',
           startIcon: buttons.backToOrderList,
-          endIconList: [buttons.reload],
+          endIconList: [buttons.reloadOrderStorage],
         });
 
         const content: IconBoxContent = {
@@ -89,7 +76,7 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
         topAppBarContextProvider.setValue({
           headlineKey: 'page_order_list_headline',
           startIcon: buttons.backToOrderList,
-          endIconList: [buttons.reload],
+          endIconList: [buttons.reloadOrderStorage],
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const order = this.fsm.getContext().orderStorage!.data[this.fsm.getContext().orderId!];

From 24d646710176a6fe7bef6e3539951780958153e1 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Wed, 22 Mar 2023 18:00:58 +0330
Subject: [PATCH 07/15] refactor(com-pwa/new-ordr): move button to manager

---
 uniquely/com-pwa/src/manager/buttons.ts   |  43 +++++++-
 uniquely/com-pwa/src/ui/page/new-order.ts | 114 +++-------------------
 2 files changed, 54 insertions(+), 103 deletions(-)

diff --git a/uniquely/com-pwa/src/manager/buttons.ts b/uniquely/com-pwa/src/manager/buttons.ts
index a0d44decf..50bd53bd6 100644
--- a/uniquely/com-pwa/src/manager/buttons.ts
+++ b/uniquely/com-pwa/src/manager/buttons.ts
@@ -34,12 +34,47 @@ export const buttons = {
     flipRtl: true,
     clickSignalId: 'back_to_order_list_event',
   },
+
+  editItems: {
+    icon: 'create-outline',
+    clickSignalId: 'page_new_order_edit_items_click_event',
+  },
+  submit: {
+    icon: 'checkmark-outline',
+    clickSignalId: 'page_new_order_submit_click_event',
+  },
+  editOrder: {
+    icon: 'create-outline',
+    clickSignalId: 'page_new_order_edit_click_event',
+  },
+  submitFinal: {
+    icon: 'checkmark-outline',
+    clickSignalId: 'page_new_order_submit_final_click_event',
+  },
+  submitShippingForm: {
+    icon: 'checkmark-outline',
+    clickSignalId: 'page_new_order_submit_shipping_form_click_event',
+  },
+  editShippingForm: {
+    icon: 'checkmark-outline',
+    clickSignalId: 'page_new_order_edit_shipping_form_click_event',
+  },
+  showRegisteredOrderDetail: {
+    icon: 'information-outline',
+    clickSignalId: 'page_new_order_detail_click_event',
+  },
+  showRegisteredOrderTracking: {
+    icon: 'chatbox-outline',
+    clickSignalId: 'page_new_order_tracking_click_event',
+  },
+  retry: {
+    icon: 'reload-outline',
+    clickSignalId: 'page_new_order_retry_click_event',
+  },
 } as const;
 
-eventListener.subscribe('new_order_click_event', () => {
-  redirect({
-    sectionList: ['new-order'],
-  });
+eventListener.subscribe(buttons.newOrder.clickSignalId, () => {
+  redirect({sectionList: ['new-order']});
 });
 
 eventListener.subscribe(buttons.showOrderDetail.clickSignalId, (event: ClickSignalType<Order>): void => {
diff --git a/uniquely/com-pwa/src/ui/page/new-order.ts b/uniquely/com-pwa/src/ui/page/new-order.ts
index d058dcb71..86c74ddba 100644
--- a/uniquely/com-pwa/src/ui/page/new-order.ts
+++ b/uniquely/com-pwa/src/ui/page/new-order.ts
@@ -5,7 +5,8 @@ import {redirect} from '@alwatr/router';
 import '@alwatr/ui-kit/card/icon-box.js';
 
 
-import {scrollToTopCommand, topAppBarContextProvider} from '../../manager/context.js';
+import {buttons} from '../../manager/buttons.js';
+import {topAppBarContextProvider} from '../../manager/context.js';
 import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';
 import '../stuff/select-product.js';
 
@@ -13,76 +14,12 @@ import type {NewOrderFsm} from '../../manager/controller/new-order.js';
 import type {Order, OrderShippingInfo} from '@alwatr/type/customer-order-management.js';
 import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
 
-
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-page-new-order': AlwatrPageNewOrder;
   }
 }
 
-const buttons = {
-  back: {
-    icon: 'arrow-back-outline',
-    flipRtl: true,
-    clickSignalId: 'page_new_order_back_click_event',
-  },
-  backToHome: {
-    icon: 'arrow-back-outline',
-    flipRtl: true,
-    clickSignalId: 'back_to_home_click_event',
-  },
-  editItems: {
-    icon: 'create-outline',
-    clickSignalId: 'page_new_order_edit_items_click_event',
-  },
-  submit: {
-    icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_submit_click_event',
-  },
-  edit: {
-    icon: 'create-outline',
-    clickSignalId: 'page_new_order_edit_click_event',
-  },
-  submitFinal: {
-    icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_submit_final_click_event',
-  },
-  submitShippingForm: {
-    icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_submit_shipping_form_click_event',
-  },
-  editShippingForm: {
-    icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_edit_shipping_form_click_event',
-  },
-  newOrder: {
-    icon: 'add-outline',
-    clickSignalId: 'page_new_order_new_order_click_event',
-  },
-  detail: {
-    icon: 'information-outline',
-    clickSignalId: 'page_new_order_detail_click_event',
-  },
-  tracking: {
-    icon: 'chatbox-outline',
-    clickSignalId: 'page_new_order_tracking_click_event',
-  },
-  reload: {
-    icon: 'reload-outline',
-    // flipRtl: true,
-    clickSignalId: 'order_list_reload_click_event',
-  },
-  retry: {
-    icon: 'reload-outline',
-    clickSignalId: 'page_new_order_retry_click_event',
-  },
-  backToOrderList: {
-    icon: 'arrow-back-outline',
-    flipRtl: true,
-    clickSignalId: 'order_detail_back_to_order_list_event',
-  },
-} as const;
-
 /**
  * Alwatr Customer Order Management Order Form Page
  */
@@ -223,18 +160,13 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_item_list(order.itemList ?? [], this.fsm.getContext().productStorage, true),
           html`
             <div class="btn-container">
-              <alwatr-button .icon=${buttons.editItems.icon} .clickSignalId=${buttons.editItems.clickSignalId}>
-                ${message('page_new_order_edit_items')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.editItems}>${message('page_new_order_edit_items')}</alwatr-button>
             </div>
           `,
           this.render_part_shipping_info(order.shippingInfo),
           html`
             <div class="btn-container">
-              <alwatr-button
-                .icon=${buttons.editShippingForm.icon}
-                .clickSignalId=${buttons.editShippingForm.clickSignalId}
-              >
+              <alwatr-button .content=${buttons.editShippingForm}>
                 ${message('page_new_order_shipping_edit')}
               </alwatr-button>
             </div>
@@ -242,11 +174,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_summary(order),
           html`
             <div class="submit-container">
-              <alwatr-button
-                .icon=${buttons.submit.icon}
-                .clickSignalId=${buttons.submit.clickSignalId}
-              >${message('page_new_order_submit')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.submit}>${message('page_new_order_submit')}</alwatr-button>
             </div>
           `,
         ];
@@ -287,11 +215,8 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           ></alwatr-select-product>`,
           html`
             <div class="btn-container">
-              <alwatr-button
-                elevated
-                .icon=${buttons.submit.icon}
-                .clickSignalId=${buttons.submit.clickSignalId}
-                >${message('select_product_submit_button')}
+              <alwatr-button .content=${buttons.submit} elevated>
+                ${message('select_product_submit_button')}
               </alwatr-button>
             </div>
           `,
@@ -305,10 +230,9 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_shipping_form(order.shippingInfo as Partial<OrderShippingInfo>),
           html`
             <div class="btn-container">
-              <alwatr-button
-                .icon=${buttons.submitShippingForm.icon}
-                .clickSignalId=${buttons.submitShippingForm.clickSignalId}
-              >${message('page_new_order_shipping_submit')}</alwatr-button>
+              <alwatr-button .content=${buttons.submitShippingForm}>
+                ${message('page_new_order_shipping_submit')}
+              </alwatr-button>
             </div>
           `,
         ];
@@ -323,12 +247,8 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_summary(order),
           html`
             <div class="submit-container">
-              <alwatr-button .icon=${buttons.edit.icon} .clickSignalId=${buttons.edit.clickSignalId}>
-                ${message('page_new_order_edit')}
-              </alwatr-button>
-              <alwatr-button .icon=${buttons.submitFinal.icon} .clickSignalId=${buttons.submitFinal.clickSignalId}>
-                ${message('page_new_order_submit_final')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.editOrder}>${message('page_new_order_edit')}</alwatr-button>
+              <alwatr-button .content=${buttons.submitFinal}>${message('page_new_order_submit_final')}</alwatr-button>
             </div>
           `,
         ];
@@ -353,12 +273,10 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`,
           html`
             <div class="submit-container">
-              <alwatr-button .icon=${buttons.detail.icon} .clickSignalId=${buttons.detail.clickSignalId}>
+              <alwatr-button .content=${buttons.showOrderDetail}>
                 ${message('page_new_order_detail_button')}
               </alwatr-button>
-              <alwatr-button .icon=${buttons.newOrder.icon} .clickSignalId=${buttons.newOrder.clickSignalId}>
-                ${message('page_new_order_headline')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.newOrder}>${message('page_new_order_headline')}</alwatr-button>
             </div>
           `,
         ];
@@ -374,9 +292,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`,
           html`
             <div class="submit-container">
-              <alwatr-button .icon=${buttons.retry.icon} .clickSignalId=${buttons.retry.clickSignalId}>
-                ${message('page_new_order_retry_button')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.retry}>${message('page_new_order_retry_button')}</alwatr-button>
             </div>
           `,
         ];

From 8213869b8446fd20f77a6b6264204fa079ff7ea5 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Thu, 23 Mar 2023 19:55:38 +0330
Subject: [PATCH 08/15] fix(com-pwa/buttons): detail label key

---
 uniquely/com-pwa/src/manager/buttons.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/uniquely/com-pwa/src/manager/buttons.ts b/uniquely/com-pwa/src/manager/buttons.ts
index 50bd53bd6..cb003fd0f 100644
--- a/uniquely/com-pwa/src/manager/buttons.ts
+++ b/uniquely/com-pwa/src/manager/buttons.ts
@@ -60,6 +60,7 @@ export const buttons = {
     clickSignalId: 'page_new_order_edit_shipping_form_click_event',
   },
   showRegisteredOrderDetail: {
+    labelKey: 'page_new_order_detail_button',
     icon: 'information-outline',
     clickSignalId: 'page_new_order_detail_click_event',
   },

From dc3fda042ec296a91e43e867a1893d3dad160c2f Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Thu, 23 Mar 2023 20:29:44 +0330
Subject: [PATCH 09/15] fix(com-pwa): reload button

---
 uniquely/com-pwa/src/manager/buttons.ts   | 4 ++++
 uniquely/com-pwa/src/ui/page/new-order.ts | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/uniquely/com-pwa/src/manager/buttons.ts b/uniquely/com-pwa/src/manager/buttons.ts
index cb003fd0f..42dc034d1 100644
--- a/uniquely/com-pwa/src/manager/buttons.ts
+++ b/uniquely/com-pwa/src/manager/buttons.ts
@@ -16,6 +16,10 @@ export const buttons = {
     clickSignalId: 'browser_back_click_event',
   },
 
+  reload: {
+    icon: 'reload-outline',
+  },
+
   reloadOrderStorage: {
     icon: 'reload-outline',
     flipRtl: true,
diff --git a/uniquely/com-pwa/src/ui/page/new-order.ts b/uniquely/com-pwa/src/ui/page/new-order.ts
index 86c74ddba..0666c609a 100644
--- a/uniquely/com-pwa/src/ui/page/new-order.ts
+++ b/uniquely/com-pwa/src/ui/page/new-order.ts
@@ -62,7 +62,11 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
         transition: 'submit',
       },
       {
-        signalId: buttons.edit.clickSignalId,
+        signalId: buttons.selectProductSubmit.clickSignalId,
+        transition: 'submit',
+      },
+      {
+        signalId: buttons.editOrder.clickSignalId,
         transition: 'back',
       },
       {
@@ -82,7 +86,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
         transition: 'edit_shipping',
       },
       {
-        signalId: buttons.detail.clickSignalId,
+        signalId: buttons.showRegisteredOrderDetail.clickSignalId,
         callback: (): void => {
           redirect({sectionList: ['order-detail', this.fsm.getContext().orderId ?? '']});
         },

From ea11f80423fc62900d929e5b15e70c956fa2cafb Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Wed, 22 Mar 2023 18:33:46 +0330
Subject: [PATCH 10/15] refactor(com-pwa/new-order): set label Key on button
 content

---
 uniquely/com-pwa/src/manager/buttons.ts   | 34 ++++++++++++++++-------
 uniquely/com-pwa/src/ui/page/new-order.ts | 28 +++++++------------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/uniquely/com-pwa/src/manager/buttons.ts b/uniquely/com-pwa/src/manager/buttons.ts
index 42dc034d1..46bb1e3e7 100644
--- a/uniquely/com-pwa/src/manager/buttons.ts
+++ b/uniquely/com-pwa/src/manager/buttons.ts
@@ -31,6 +31,8 @@ export const buttons = {
     clickSignalId: 'new_order_click_event',
   },
   showOrderDetail: {
+    labelKey: 'page_new_order_detail_button',
+    icon: 'information-outline',
     clickSignalId: 'show_order_detail_click_event',
   },
   backToOrderList: {
@@ -40,41 +42,53 @@ export const buttons = {
   },
 
   editItems: {
+    labelKey: 'page_new_order_edit_items',
     icon: 'create-outline',
-    clickSignalId: 'page_new_order_edit_items_click_event',
+    clickSignalId: 'edit_items_click_event',
   },
   submit: {
+    labelKey: 'page_new_order_submit',
+    icon: 'checkmark-outline',
+    clickSignalId: 'submit_click_event',
+  },
+  selectProductSubmit: {
+    labelKey: 'select_product_submit_button',
     icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_submit_click_event',
+    clickSignalId: 'select_product_submit_click_event',
   },
   editOrder: {
+    labelKey: 'page_new_order_edit',
     icon: 'create-outline',
-    clickSignalId: 'page_new_order_edit_click_event',
+    clickSignalId: 'edit_order_click_event',
   },
   submitFinal: {
+    labelKey: 'page_new_order_submit_final',
     icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_submit_final_click_event',
+    clickSignalId: 'submit_final_click_event',
   },
   submitShippingForm: {
+    labelKey: 'page_new_order_shipping_submit',
     icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_submit_shipping_form_click_event',
+    clickSignalId: 'submit_shipping_form_click_event',
   },
   editShippingForm: {
-    icon: 'checkmark-outline',
-    clickSignalId: 'page_new_order_edit_shipping_form_click_event',
+    labelKey: 'page_new_order_shipping_edit',
+    icon: 'create-outline',
+    clickSignalId: 'edit_shipping_form_click_event',
   },
   showRegisteredOrderDetail: {
     labelKey: 'page_new_order_detail_button',
     icon: 'information-outline',
-    clickSignalId: 'page_new_order_detail_click_event',
+    clickSignalId: 'show_registered_order_detail_click_event',
   },
   showRegisteredOrderTracking: {
     icon: 'chatbox-outline',
-    clickSignalId: 'page_new_order_tracking_click_event',
+    clickSignalId: 'show_registered_order_tracking_click_event',
   },
   retry: {
+    labelKey: 'page_new_order_retry_button',
     icon: 'reload-outline',
-    clickSignalId: 'page_new_order_retry_click_event',
+    clickSignalId: 'retry_click_event',
   },
 } as const;
 
diff --git a/uniquely/com-pwa/src/ui/page/new-order.ts b/uniquely/com-pwa/src/ui/page/new-order.ts
index 0666c609a..9d10f94df 100644
--- a/uniquely/com-pwa/src/ui/page/new-order.ts
+++ b/uniquely/com-pwa/src/ui/page/new-order.ts
@@ -6,7 +6,7 @@ import '@alwatr/ui-kit/card/icon-box.js';
 
 
 import {buttons} from '../../manager/buttons.js';
-import {topAppBarContextProvider} from '../../manager/context.js';
+import {scrollToTopCommand, topAppBarContextProvider} from '../../manager/context.js';
 import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';
 import '../stuff/select-product.js';
 
@@ -164,21 +164,19 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_item_list(order.itemList ?? [], this.fsm.getContext().productStorage, true),
           html`
             <div class="btn-container">
-              <alwatr-button .content=${buttons.editItems}>${message('page_new_order_edit_items')}</alwatr-button>
+              <alwatr-button .content=${buttons.editItems}></alwatr-button>
             </div>
           `,
           this.render_part_shipping_info(order.shippingInfo),
           html`
             <div class="btn-container">
-              <alwatr-button .content=${buttons.editShippingForm}>
-                ${message('page_new_order_shipping_edit')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.editShippingForm}></alwatr-button>
             </div>
           `,
           this.render_part_summary(order),
           html`
             <div class="submit-container">
-              <alwatr-button .content=${buttons.submit}>${message('page_new_order_submit')}</alwatr-button>
+              <alwatr-button .content=${buttons.submit}></alwatr-button>
             </div>
           `,
         ];
@@ -219,9 +217,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           ></alwatr-select-product>`,
           html`
             <div class="btn-container">
-              <alwatr-button .content=${buttons.submit} elevated>
-                ${message('select_product_submit_button')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.selectProductSubmit} elevated></alwatr-button>
             </div>
           `,
         ];
@@ -234,9 +230,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_shipping_form(order.shippingInfo as Partial<OrderShippingInfo>),
           html`
             <div class="btn-container">
-              <alwatr-button .content=${buttons.submitShippingForm}>
-                ${message('page_new_order_shipping_submit')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.submitShippingForm}></alwatr-button>
             </div>
           `,
         ];
@@ -251,8 +245,8 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           this.render_part_summary(order),
           html`
             <div class="submit-container">
-              <alwatr-button .content=${buttons.editOrder}>${message('page_new_order_edit')}</alwatr-button>
-              <alwatr-button .content=${buttons.submitFinal}>${message('page_new_order_submit_final')}</alwatr-button>
+              <alwatr-button .content=${buttons.editOrder}></alwatr-button>
+              <alwatr-button .content=${buttons.submitFinal}></alwatr-button>
             </div>
           `,
         ];
@@ -277,9 +271,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`,
           html`
             <div class="submit-container">
-              <alwatr-button .content=${buttons.showOrderDetail}>
-                ${message('page_new_order_detail_button')}
-              </alwatr-button>
+              <alwatr-button .content=${buttons.showRegisteredOrderDetail}></alwatr-button>
               <alwatr-button .content=${buttons.newOrder}>${message('page_new_order_headline')}</alwatr-button>
             </div>
           `,
@@ -296,7 +288,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
           html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`,
           html`
             <div class="submit-container">
-              <alwatr-button .content=${buttons.retry}>${message('page_new_order_retry_button')}</alwatr-button>
+              <alwatr-button .content=${buttons.retry}></alwatr-button>
             </div>
           `,
         ];

From 4303620c26a34999db2ad7098c417e1c8f00414b Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Thu, 23 Mar 2023 20:29:44 +0330
Subject: [PATCH 11/15] fix(ui/icon-button): default content value

---
 ui/ui-kit/src/button/icon-button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/ui-kit/src/button/icon-button.ts b/ui/ui-kit/src/button/icon-button.ts
index c1503b9e6..f78a63245 100644
--- a/ui/ui-kit/src/button/icon-button.ts
+++ b/ui/ui-kit/src/button/icon-button.ts
@@ -105,7 +105,7 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
 
   override render(): unknown {
     this._logger.logMethod('render');
-    const content = this.content || {};
+    const content = this.content || {icon: ''};
 
     return html`<alwatr-icon .name=${content.icon} ?flip-rtl=${content.flipRtl}></alwatr-icon>`;
   }

From 6237fc544bbbd23f6305465e8a2fccf336e0355e Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Mon, 27 Mar 2023 19:51:12 +0330
Subject: [PATCH 12/15] feat(com-pwa/buttons): print button

---
 uniquely/com-pwa/src/manager/buttons.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/uniquely/com-pwa/src/manager/buttons.ts b/uniquely/com-pwa/src/manager/buttons.ts
index 46bb1e3e7..7e4904d4a 100644
--- a/uniquely/com-pwa/src/manager/buttons.ts
+++ b/uniquely/com-pwa/src/manager/buttons.ts
@@ -15,6 +15,10 @@ export const buttons = {
     flipRtl: true,
     clickSignalId: 'browser_back_click_event',
   },
+  print: {
+    icon: 'print-outline',
+    clickSignalId: 'order_detail_print',
+  },
 
   reload: {
     icon: 'reload-outline',
@@ -96,6 +100,10 @@ eventListener.subscribe(buttons.newOrder.clickSignalId, () => {
   redirect({sectionList: ['new-order']});
 });
 
+eventListener.subscribe(buttons.print.clickSignalId, () => {
+  window.print();
+});
+
 eventListener.subscribe(buttons.showOrderDetail.clickSignalId, (event: ClickSignalType<Order>): void => {
   redirect({sectionList: ['order-detail', event.detail.id]});
 });

From 9ea55f69ec6360769098d77c686da661d9703cd6 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Mon, 27 Mar 2023 19:51:39 +0330
Subject: [PATCH 13/15] feat(com-pwa/order): use print button in order detail
 top-app-bar

---
 uniquely/com-pwa/src/ui/page/new-order.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uniquely/com-pwa/src/ui/page/new-order.ts b/uniquely/com-pwa/src/ui/page/new-order.ts
index 9d10f94df..9fcff30d2 100644
--- a/uniquely/com-pwa/src/ui/page/new-order.ts
+++ b/uniquely/com-pwa/src/ui/page/new-order.ts
@@ -143,7 +143,7 @@ export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
         topAppBarContextProvider.setValue({
           headlineKey: 'page_order_list_headline',
           startIcon: buttons.backToOrderList,
-          endIconList: [buttons.reload],
+          endIconList: [buttons.print, buttons.reload],
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const order = this.fsm.getContext().orderStorage!.data[this.fsm.getContext().orderId];

From df010a8ccb49759e5638eb5992898549ce3f55b0 Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Fri, 31 Mar 2023 15:35:57 +0330
Subject: [PATCH 14/15] feat(ui/button): label on content

---
 ui/ui-kit/src/button/button.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/ui-kit/src/button/button.ts b/ui/ui-kit/src/button/button.ts
index 8f29bc593..2f8c8cc68 100644
--- a/ui/ui-kit/src/button/button.ts
+++ b/ui/ui-kit/src/button/button.ts
@@ -14,6 +14,11 @@ declare global {
 }
 
 export interface ButtonContent extends StringifyableRecord {
+  /**
+   * Label.
+   */
+  label?: string
+
   /**
    * Label i18n key.
    */
@@ -115,7 +120,7 @@ export class AlwatrButton extends AlwatrSurface {
       content.icon
         ? html`<alwatr-icon .name=${content.icon} ?flip-rtl=${content.flipRtl}></alwatr-icon>`
         : nothing,
-      html`<slot>${message(content.labelKey)}</slot>`,
+      html`<slot>${content.label ?? message(content.labelKey)}</slot>`,
     ];
   }
 

From 68beefa82532159225dbf5468255dff3adaba43a Mon Sep 17 00:00:00 2001
From: "S. Amir Mohammad Najafi" <njfamirm@gmail.com>
Date: Fri, 31 Mar 2023 15:36:24 +0330
Subject: [PATCH 15/15] fix(ui/snackbar): use label for action button content

---
 ui/ui-kit/src/snackbar/element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/ui-kit/src/snackbar/element.ts b/ui/ui-kit/src/snackbar/element.ts
index 662480722..5261a856a 100644
--- a/ui/ui-kit/src/snackbar/element.ts
+++ b/ui/ui-kit/src/snackbar/element.ts
@@ -123,7 +123,7 @@ export class AlwatrSnackbar extends AlwatrSurface {
         this.actionLabel,
         () =>
           html`<alwatr-button
-            .content=${{labelKey: this.actionLabel}}
+            .content=${{label: this.actionLabel}}
             @click=${this._actionButtonClick}
           ></alwatr-button>`,
     )}`;