Skip to content

Commit

Permalink
feat: implement recurring order detail information
Browse files Browse the repository at this point in the history
  • Loading branch information
@suschneider
suschneider committed Sep 3, 2024
1 parent 77a171a commit 6bfd560
Show file tree
Hide file tree
Showing 8 changed files with 214 additions and 13 deletions.
19 changes: 17 additions & 2 deletions ...p/services/requisition-management-breadcrumb/requisition-management-breadcrumb.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { TranslateService } from '@ngx-translate/core';
import { EMPTY, Observable, of } from 'rxjs';
import { map, switchMap, withLatestFrom } from 'rxjs/operators';

import { AccountFacade } from 'ish-core/facades/account.facade';
import { AppFacade } from 'ish-core/facades/app.facade';
import { BreadcrumbItem } from 'ish-core/models/breadcrumb-item/breadcrumb-item.interface';
import { selectRouteParam } from 'ish-core/store/core/router';
import { log } from 'ish-core/utils/dev/operators';
import { whenFalsy, whenTruthy } from 'ish-core/utils/operators';

import { RequisitionManagementFacade } from '../../facades/requisition-management.facade';
Expand All @@ -18,14 +18,14 @@ export class RequisitionManagementBreadcrumbService {
private appFacade: AppFacade,
private store: Store,
private requisitionManagementFacade: RequisitionManagementFacade,
private accountFacade: AccountFacade,
private translateService: TranslateService
) {}

breadcrumb$(prefix: string): Observable<BreadcrumbItem[]> {
return this.appFacade.routingInProgress$.pipe(
whenFalsy(),
withLatestFrom(this.appFacade.path$.pipe(whenTruthy())),
log('path'),
switchMap(([, path]) => {
if (path.endsWith('/buyer')) {
return of([{ key: 'account.requisitions.requisitions' }]);
Expand Down Expand Up @@ -66,6 +66,21 @@ export class RequisitionManagementBreadcrumbService {
)
);
}
if (path.includes('/recurring-orders/')) {
return this.accountFacade.selectedRecurringOrder$.pipe(
whenTruthy(),
withLatestFrom(this.translateService.get('account.recurring_order.details.breadcrumb')),
map(([recurringOrder, translation]) => [
{
key: 'account.recurring_orders.breadcrumb',
link: [`/account/recurring-orders`],
},
{
text: `${translation} - ${recurringOrder.number}`,
},
])
);
}
return EMPTY;
})
);
Expand Down
7 changes: 6 additions & 1 deletion src/app/core/models/recurring-order/recurring-order.interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { AddressData } from 'ish-core/models/address/address.interface';
import { Link } from 'ish-core/models/link/link.model';
import { OrderLineItem } from 'ish-core/models/order/order.model';
import { PriceData } from 'ish-core/models/price/price.interface';
import { ShippingMethod } from 'ish-core/models/shipping-method/shipping-method.model';
import { UserData } from 'ish-core/models/user/user.interface';

export interface RecurringOrderData extends Omit<RecurringOrderLinkData, 'type' | 'link' | 'totalNet' | 'totalGross'> {
Expand All @@ -11,7 +13,7 @@ export interface RecurringOrderData extends Omit<RecurringOrderLinkData, 'type'
totals: RecurringOrderTotalsData;

invoiceToAddress?: AddressData;
shippingBuckets?: undefined;

payments?: undefined;
}

Expand All @@ -31,6 +33,9 @@ export interface RecurringOrderLinkData {
lastOrderDate?: number;
nextOrderDate?: number;

invoiceToAddress?: AddressData;
shippingBuckets?: [{ shipToAddress: AddressData; shippingMethod: ShippingMethod; lineItems: OrderLineItem[] }];

buyer: UserData;
itemCount: number;
totalNet: PriceData;
Expand Down
8 changes: 7 additions & 1 deletion src/app/core/models/recurring-order/recurring-order.mapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,13 @@ export class RecurringOrderMapper {
nextOrderDate: data.nextOrderDate,
orderCount: detailData ? data.orderCount : undefined,

buyer: UserMapper.fromData(data.buyer),
invoiceToAddress: data.invoiceToAddress,
commonShipToAddress: data.shippingBuckets?.[0]?.shipToAddress,
commonShippingMethod: data.shippingBuckets?.[0]?.shippingMethod,

user: UserMapper.fromData(data.buyer),

lineItems: data.shippingBuckets?.[0]?.lineItems,

totals: {

Check warning on line 54 in src/app/core/models/recurring-order/recurring-order.mapper.ts

View workflow job for this annotation

GitHub Actions / Powershell 

Type assertion on object literals is forbidden, use a type annotation instead

Check warning on line 54 in src/app/core/models/recurring-order/recurring-order.mapper.ts

View workflow job for this annotation

GitHub Actions / GitBash 

Type assertion on object literals is forbidden, use a type annotation instead

Check warning on line 54 in src/app/core/models/recurring-order/recurring-order.mapper.ts

View workflow job for this annotation

GitHub Actions / CommandLine 

Type assertion on object literals is forbidden, use a type annotation instead
total: detailData
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/models/recurring-order/recurring-order.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export interface RecurringOrder extends OrderBasket {
nextOrderDate?: number;
orderCount?: number;

buyer: User;
user: User;

totals: BasketTotal;
}
144 changes: 143 additions & 1 deletion src/app/pages/account-recurring-order/account-recurring-order-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,145 @@
<h1>Recurring Order Details</h1>
<h1>{{ 'account.recurring_order.heading' | translate }}</h1>

<p>
{{ 'account.recurring_order.subtitle' | translate }}
</p>

<div *ngIf="recurringOrder$ | async as recurringOrder" class="section" data-testing-id="rec-order-summary-info">
<!-- Order Summary Info-->
<div class="row">
<div class="col-12 col-sm-6">
<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.order_number.label' | translate }}</dt>
<dd class="col-6" data-testing-id="rec-order-number">{{ recurringOrder.number }}</dd>
</dl>

<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.requisition_number.label' | translate }}</dt>
<dd class="col-6">{{ recurringOrder.number }}</dd>
</dl>

<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.creation_date.label' | translate }}</dt>
<dd class="col-6">{{ recurringOrder.creationDate | ishDate }}</dd>
</dl>

<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.last_order_date.label' | translate }}</dt>
<dd class="col-6">
{{ recurringOrder.lastOrderDate ? (recurringOrder.lastOrderDate | ishDate) : '-' }}
</dd>
</dl>

<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.next_order_date.label' | translate }}</dt>
<dd class="col-6">
{{ recurringOrder.nextOrderDate ? (recurringOrder.nextOrderDate | ishDate) : '-' }}
</dd>
</dl>

<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.status.label' | translate }}</dt>
<dd class="col-6">
<span *ngIf="recurringOrder.expired; else switch">{{ 'account.recurring_order.details.expired.text' }}</span>
<ng-template #switch
><ish-switch
id="{{ recurringOrder.id }}"
[active]="recurringOrder.active"
(switchActiveStatus)="switchActiveStatus($event)"
/></ng-template>
</dd>
</dl>
</div>
<div class="col-12 col-sm-6">
<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.order_count.label' | translate }}</dt>
<dd class="col-6">{{ recurringOrder.orderCount }}</dd>
</dl>

<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.last_placed_orders.label' | translate }}</dt>
<dd class="col-6"></dd>
</dl>
</div>
</div>

<div class="row d-flex">
<!-- Buyer-->
<ish-info-box heading="account.recurring_order.details.buyer_info.heading" class="infobox-wrapper col-md-6">
<ish-basket-buyer [object]="recurringOrder" />
</ish-info-box>
<!-- Additional Information -->
<ish-info-box heading="account.recurring_order.details.additional_info.heading" class="infobox-wrapper col-md-6">
<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.cost_center.label' | translate }}</dt>
<dd class="col-6">{{ recurringOrder.costCenter }}</dd>
</dl>
<dl class="row dl-horizontal dl-separator mb-0">
<dt class="col-6">{{ 'account.recurring_order.details.project_number.label' | translate }}</dt>
<dd class="col-6"></dd>
</dl>
<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.basket_number.label' | translate }}</dt>
<dd class="col-6"></dd>
</dl>
<dl class="row dl-horizontal dl-separator mb-0">
<dt class="col-6">{{ 'account.recurring_order.details.order_frequency.label' | translate }}</dt>
<dd class="col-6">{{ recurringOrder.recurrence.interval | ishFrequency }}</dd>
</dl>
<dl class="row dl-horizontal dl-separator mb-0">
<dt class="col-6">{{ 'account.recurring_order.details.start_date.label' | translate }}</dt>
<dd class="col-6">
{{ recurringOrder.recurrence.startDate }}
</dd>
</dl>
<dl class="row dl-horizontal dl-separator">
<dt class="col-6">{{ 'account.recurring_order.details.end_date.label' | translate }}</dt>
<dd class="col-6">{{ recurringOrder.lastOrderDate ? (recurringOrder.lastOrderDate | ishDate) : '-' }}</dd>
</dl>
</ish-info-box>
</div>

<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box heading="account.recurring_order.details.billing_address.heading" class="infobox-wrapper col-md-6">
<ish-address [address]="recurringOrder.invoiceToAddress" />
</ish-info-box>
<!-- Shipping Address -->
<ish-info-box heading="account.recurring_order.details.shipping_address.heading" class="infobox-wrapper col-md-6">
<ish-address [address]="recurringOrder.commonShipToAddress" />
</ish-info-box>
</div>

<div class="row d-flex">
<!-- Shipping Method -->
<ish-info-box heading="account.recurring_order.details.shipping_method.heading" class="infobox-wrapper col-md-6">
<ish-basket-shipping-method [data]="recurringOrder" />
</ish-info-box>
<!-- Payment -->
<ish-info-box heading="account.recurring_order.details.payment_method.heading" class="infobox-wrapper col-md-6">
<ng-container *ngIf="recurringOrder.payment">
<div class="float-right">
<p class="badge badge-info">{{ recurringOrder.payment.status }}</p>
</div>
<p>
{{ recurringOrder.payment.displayName }}<br />{{ recurringOrder.payment.paymentInstrument.accountIdentifier }}
<ng-container
*ngIf="!recurringOrder.payment.displayName && !recurringOrder.payment.paymentInstrument.accountIdentifier"
>
{{ recurringOrder.payment.paymentInstrument }}
</ng-container>
</p>
</ng-container>
</ish-info-box>
</div>

<!-- Line Items
<ish-line-item-list
*ngIf="recurringOrder.lineItems?.length > 0"
[lineItems]="recurringOrder.lineItems"
[editable]="false"
lineItemViewType="simple"
/>-->
</div>

<pre *ngIf="recurringOrder$ | async as recurringOrder">{{ recurringOrder | json }}</pre>
4 changes: 4 additions & 0 deletions src/app/pages/account-recurring-order/account-recurring-order-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,8 @@ export class AccountRecurringOrderPageComponent implements OnInit {
ngOnInit() {
this.recurringOrder$ = this.accountFacade.selectedRecurringOrder$;
}

switchActiveStatus(recurringOrder: { id: string; active: boolean }) {
this.accountFacade.switchActiveStatusRecurringOrder(recurringOrder.id, recurringOrder.active);
}
}
16 changes: 10 additions & 6 deletions ...p/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
*cdkCellDef="let recurringOrder"
[attr.data-label]="'account.recurring_orders.table.next_order_date' | translate"
>
{{ recurringOrder.nextOrderDate | ishDate }}
{{ recurringOrder.nextOrderDate ? (recurringOrder.nextOrderDate | ishDate) : '-' }}
</td>
</ng-container>

Expand All @@ -99,11 +99,15 @@
<ng-container cdkColumnDef="actions">
<th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-actions"></th>
<td cdk-cell *cdkCellDef="let recurringOrder" class="column-price text-nowrap">
<ish-switch
id="{{ recurringOrder.id }}"
[active]="recurringOrder.active"
(switchActiveStatus)="switchActiveStatus($event)"
/>
<span *ngIf="recurringOrder.expired; else switch">{{
'account.recurring_orders.expired.text' | translate
}}</span>
<ng-template #switch>
<ish-switch
id="{{ recurringOrder.id }}"
[active]="recurringOrder.active"
(switchActiveStatus)="switchActiveStatus($event)"
/></ng-template>
</td>
</ng-container>

Expand Down
27 changes: 26 additions & 1 deletion src/assets/i18n/en_US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,32 @@
"account.quotes.widget.responded.label": "Responded quotes",
"account.quotes.widget.submitted.label": "Sent requests",
"account.quotes.widget.view_all_quotes.link": "View all quotes",
"account.recurring_orders.breadcrumb": "Recurring orders",
"account.recurring_order.details.additional_info.heading": "Additional information",
"account.recurring_order.details.basket_number.label": "Basket number",
"account.recurring_order.details.billing_address.heading": "Invoice address",
"account.recurring_order.details.breadcrumb": "Recurring order",
"account.recurring_order.details.buyer_info.heading": "Buyer",
"account.recurring_order.details.cost_center.label": "Cost center",
"account.recurring_order.details.creation_date.label": "Creation date",
"account.recurring_order.details.end_date.label": "Until",
"account.recurring_order.details.expired.text": "Ended",
"account.recurring_order.details.last_order_date.label": "Last order date",
"account.recurring_order.details.last_placed_orders.label": "Last placed orders",
"account.recurring_order.details.next_order_date.label": "Next order date",
"account.recurring_order.details.order_count.label": "Order count",
"account.recurring_order.details.order_frequency.label": "Recur every",
"account.recurring_order.details.order_number.label": "Recurring order no.",
"account.recurring_order.details.payment_method.heading": "Payment method",
"account.recurring_order.details.project_number.label": "Project number",
"account.recurring_order.details.requisition_number.label": "Requisition no.",
"account.recurring_order.details.shipping_address.heading": "Shipping address",
"account.recurring_order.details.shipping_method.heading": "Shipping method",
"account.recurring_order.details.start_date.label": "Start from",
"account.recurring_order.details.status.label": "Status",
"account.recurring_order.heading": "Recurring Order Details",
"account.recurring_order.subtitle": "Below are details about the item(s) in your recurring order. If you ordered more than one item, please note that some items may display a different shipping method and/or status because they are shipped in a separate package.",
"account.recurring_orders.breadcrumb": "Recurring Order",
"account.recurring_orders.expired.text": "Ended",
"account.recurring_orders.heading": "Recurring orders",
"account.recurring_orders.navigation.link": "Recurring orders",
"account.recurring_orders.no_placed_orders_message": "You have not placed a recurring order yet.",
Expand Down

0 comments on commit 6bfd560

Please sign in to comment.