Skip to content

Commit

Permalink
feat(com-pwa): page new-order element
Browse files Browse the repository at this point in the history
  • Loading branch information
AliMD committed Mar 6, 2023
1 parent 586af7b commit ae821e6
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 34 deletions.
30 changes: 20 additions & 10 deletions uniquely/com-pwa/src/manager/controller/new-order.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const pageNewOrderStateMachine = new FiniteStateMachine({
on: {
SELECT_PRODUCT: 'productList',
EDIT_SHIPPING: 'shippingForm',
SUBMIT: 'review',
SUBMIT: 'shippingForm',
},
},
productList: {
Expand All @@ -60,11 +60,12 @@ export const pageNewOrderStateMachine = new FiniteStateMachine({
},
shippingForm: {
on: {
SUBMIT: 'edit',
SUBMIT: 'review',
},
},
review: {
on: {
BACK: 'edit',
SUBMIT: 'submitting',
},
},
Expand Down Expand Up @@ -147,12 +148,21 @@ pageNewOrderStateMachine.signal.subscribe(async (state) => {
pageNewOrderStateMachine.signal.subscribe(async (state) => {
localStorage.setItem('draft-order-x1', JSON.stringify(pageNewOrderStateMachine.context.order));

switch (state.to) {
case 'edit': {
if (!pageNewOrderStateMachine.context.order?.itemList?.length && state.from != 'productList') {
pageNewOrderStateMachine.transition('SELECT_PRODUCT');
}
break;
if (
state.to === 'edit' &&
state.from != 'productList' &&
!pageNewOrderStateMachine.context.order?.itemList?.length
) {
pageNewOrderStateMachine.transition('SELECT_PRODUCT');
}

else if (state.to === 'edit' || state.to === 'review') {
const order = pageNewOrderStateMachine.context.order;
order.totalPrice = 0;
order.finalPrice = order.shippingPrice ?? 0;
for (const item of order.itemList ?? []) {
order.totalPrice += item.price;
order.finalPrice += item.finalPrice;
}
}
});
Expand All @@ -163,8 +173,8 @@ productStorageContextConsumer.subscribe((productStorage) => {
priceStorageContextConsumer.subscribe((priceStorage) => {
pageNewOrderStateMachine.transition('PARTIAL_LOAD', {priceStorage});
});
finalPriceStorageContextConsumer.subscribe((priceStorage) => {
pageNewOrderStateMachine.transition('PARTIAL_LOAD', {priceStorage});
finalPriceStorageContextConsumer.subscribe((finalPriceStorage) => {
pageNewOrderStateMachine.transition('PARTIAL_LOAD', {finalPriceStorage});
});

eventListener.subscribe<ClickSignalType>(buttons.submit.clickSignalId, () => {
Expand Down
87 changes: 87 additions & 0 deletions uniquely/com-pwa/src/ui/page/new-order.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import {
customElement,
html,
nothing,
StateMachineMixin,
UnresolvedMixin,
} from '@alwatr/element';

import {pageNewOrderStateMachine} from '../../manager/controller/new-order.js';
import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';

declare global {
interface HTMLElementTagNameMap {
'alwatr-page-new-order': AlwatrPageNewOrder;
}
}

/**
* Alwatr Customer Order Management Order Form Page
*/
@customElement('alwatr-page-new-order')
export class AlwatrPageNewOrder extends StateMachineMixin(
pageNewOrderStateMachine,
UnresolvedMixin(AlwatrOrderDetailBase),
) {
protected override render(): unknown {
this._logger.logMethod('render');
return this[`render_state_${this.stateMachine.state.to}`]?.();
}

protected render_state_loading(): unknown {
this._logger.logMethod('render_state_loading');
return this.render_part_message('loading');
}

protected render_state_edit(): unknown {
this._logger.logMethod('render_state_detail');
const order = this.stateMachine.context.order;
return [
this.render_part_status(order),
this.render_part_item_list(order.itemList ?? [], this.stateMachine.context.productStorage, true),
order.shippingInfo ? this.render_part_shipping_info(order.shippingInfo) : nothing,
order.itemList?.length ? this.render_part_summary(order) : nothing,
];
}

protected render_state_review(): unknown {
this._logger.logMethod('render_state_review');
const order = this.stateMachine.context.order;
if (!(order.itemList?.length && order.shippingInfo)) {
this.stateMachine.transition('BACK');
return;
}
// else
return [
this.render_part_status(order),
this.render_part_item_list(order.itemList, this.stateMachine.context.productStorage),
this.render_part_shipping_info(order.shippingInfo),
this.render_part_summary(order),
];
}

protected render_state_productList(): unknown {
this._logger.logMethod('render_state_productList');
return html`render_state_productList`;
}

protected render_state_shippingForm(): unknown {
this._logger.logMethod('render_state_shippingForm');
return html`render_state_shippingForm`;
}

protected render_state_submitting(): unknown {
this._logger.logMethod('render_state_submitting');
return html`render_state_submitting`;
}

protected render_state_submitSuccess(): unknown {
this._logger.logMethod('render_state_submitSuccess');
return html`render_state_submitSuccess`;
}

protected render_state_submitFailed(): unknown {
this._logger.logMethod('render_state_submitFailed');
return html`render_state_submitFailed`;
}
}
2 changes: 1 addition & 1 deletion uniquely/com-pwa/src/ui/page/order-detail.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export class AlwatrPageOrderDetail extends StateMachineMixin(
return [
this.render_part_status(order),
this.render_part_item_list(order.itemList, this.stateMachine.context.productStorage),
this.render_part_delivery(order.delivery),
this.render_part_shipping_info(order.shippingInfo),
this.render_part_summary(order),
];
}
Expand Down
61 changes: 38 additions & 23 deletions uniquely/com-pwa/src/ui/stuff/order-detail-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import {message, number, replaceNumber} from '@alwatr/i18n';
import '@alwatr/icon';
import {calcDiscount} from '@alwatr/math';
import '@alwatr/ui-kit/card/surface.js';
import '@alwatr/ui-kit/radio-group/radio-group.js';
import '@alwatr/ui-kit/text-field/text-field.js';

import './order-status-box.js';
import {config} from '../../config.js';

import type {AlwatrDocumentStorage} from '@alwatr/type';
import type {Order, OrderDelivery, OrderItem, Product} from '@alwatr/type/customer-order-management.js';
import type {Order, OrderShippingInfo, OrderDraft, OrderItem, Product} from '@alwatr/type/customer-order-management.js';

export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseElement)) {
static override styles = css`
Expand Down Expand Up @@ -52,6 +52,14 @@ export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseE
justify-content: space-between;
align-items: center;
}
alwatr-text-field {
/* width: 5em; */
/* padding: 0 var(--sys-spacing-track); */
/* border-radius: 0; */
/* border: none; */
/* border-bottom: 1px solid var(--sys-color-outline); */
}
`;

protected render_part_message(key: string): unknown {
Expand All @@ -60,14 +68,15 @@ export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseE
return html`<div class="message">${message(key)}</div>`;
}

protected render_part_status(order: Order): unknown {
protected render_part_status(order: Order | OrderDraft): unknown {
this._logger.logMethod('render_part_status');
return html`<alwatr-order-status-box .content=${order}></alwatr-order-status-box>`;
}

protected render_part_item_list(
itemList: Array<OrderItem>,
productStorage: AlwatrDocumentStorage<Product> | null,
editable = false,
): unknown {
this._logger.logMethod('render_part_item_list');
return mapIterable(this, itemList, (item) => {
Expand All @@ -76,6 +85,11 @@ export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseE
this._logger.error('itemDetailTemplate', 'product_not_found', {productId: item.productId});
return html`<alwatr-surface elevated>${message('product_not_exist')}</alwatr-surface>`;
}

const itemQtyTemplate = editable
? html`<alwatr-text-field .type=${'number'} .value=${(item.qty ?? 0) + ''}></alwatr-text-field>`
: html`<span><b>${number(item.qty)}</b></span>`;

return html`<alwatr-surface elevated>
<img src="${config.cdn + product.image.id}" />
<div class="detail-container">
Expand All @@ -96,7 +110,7 @@ export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseE
</div>
<div>
<span>${message('order_item_qty')}:</span>
<span><b>${number(item.qty)}</b></span>
${itemQtyTemplate}
</div>
<div>
<span>${message('order_item_final_total_price')}:</span>
Expand Down Expand Up @@ -124,80 +138,81 @@ export class AlwatrOrderDetailBase extends LocalizeMixin(SignalMixin(AlwatrBaseE
});
}

protected render_part_delivery(delivery: OrderDelivery): unknown {
this._logger.logMethod('render_part_delivery');
protected render_part_shipping_info(shippingInfo: OrderShippingInfo): unknown {
this._logger.logMethod('render_part_shipping_info');
return html`<alwatr-surface elevated>
<div class="detail-container">
<div>
<span>${message('order_shipping_recipient_name')}:</span>
<span>
<b>${delivery.recipientName}</b>
<b>${shippingInfo.recipientName}</b>
</span>
</div>
<div>
<span>${message('order_shipping_recipient_national_code')}:</span>
<span>
<b>${replaceNumber(delivery.recipientNationalCode)}</b>
<b>${replaceNumber(shippingInfo.recipientNationalCode)}</b>
</span>
</div>
<div>
<span>${message('order_shipping_address')}:</span>
<span><b>${replaceNumber(delivery.address)}</b></span>
<span><b>${replaceNumber(shippingInfo.address)}</b></span>
</div>
<div>
<span>${message('order_shipping_car_type_title')}:</span>
<span>
<b>${delivery.carType}</b>
<b>${shippingInfo.carType}</b>
</span>
</div>
<div>
<span>${message('order_shipping_shipment_type_title')}:</span>
<span>
<b>${delivery.shipmentType}</b>
<b>${shippingInfo.shipmentType}</b>
</span>
</div>
<div>
<span>${message('order_shipping_time_period_title')}:</span>
<span>
<b>${message('time_period_' + delivery.timePeriod.replace('-', '_'))}</b>
<b>${message('time_period_' + shippingInfo.timePeriod)}</b>
</span>
</div>
</div>
</alwatr-surface>`;
}

protected render_part_summary(order: Order): unknown {
protected render_part_summary(order: Order | OrderDraft): unknown {
this._logger.logMethod('render_part_summary');

const totalPrice = order.totalPrice ?? 0;
const finalPrice = order.finalPrice ?? 0;
const shippingPriceTemplate = order.shippingPrice
? html`<b>${number(order.shippingPrice)}</b><alwatr-icon .name=${'toman'}></alwatr-icon>`
: message('no_shipping_price_yet');

return html`<alwatr-surface elevated>
<div class="detail-container">
<div>
<span>${message('order_total_price')}:</span>
<span>
<b>${number(order.totalPrice)}</b>
<b>${number(totalPrice)}</b>
<alwatr-icon .name=${'toman'}></alwatr-icon>
</span>
</div>
<div>
<span>${message('order_discount')}:</span>
<span>
<b>
(${number(calcDiscount(order.totalPrice, order.finalPrice))}%)
${number(order.totalPrice - order.finalPrice)}
</b>
<b> (${number(calcDiscount(totalPrice, finalPrice))}%) ${number(totalPrice - finalPrice)} </b>
<alwatr-icon .name=${'toman'}></alwatr-icon>
</span>
</div>
<div>
<span>${message('order_shipping_price')}:</span>
<span>
<b>${number(order.shippingPrice)}</b>
<alwatr-icon .name=${'toman'}></alwatr-icon>
</span>
<span>${shippingPriceTemplate}</span>
</div>
<div>
<span>${message('order_final_total_price')}:</span>
<span>
<b>${number(order.finalPrice)}</b>
<b>${number(finalPrice)}</b>
<alwatr-icon .name=${'toman'}></alwatr-icon>
</span>
</div>
Expand Down

0 comments on commit ae821e6

Please sign in to comment.