File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-order-confirmation-thank-you-message |
| templateUrl |
./order-confirmation-thank-you-message.component.html |
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
isGuestCustomer
|
Default value : false
|
|
|
|
isReplenishmentOrderType$
|
Type : Observable<boolean>
|
|
|
|
order$
|
Type : Observable<any>
|
|
|
import {
ChangeDetectionStrategy,
Component,
OnDestroy,
OnInit,
} from '@angular/core';
import { CheckoutFacade } from '@spartacus/checkout/root';
import { ORDER_TYPE } from '@spartacus/core';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
@Component({
selector: 'cx-order-confirmation-thank-you-message',
templateUrl: './order-confirmation-thank-you-message.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrderConfirmationThankYouMessageComponent
implements OnInit, OnDestroy
{
order$: Observable<any>;
isReplenishmentOrderType$: Observable<boolean>;
isGuestCustomer = false;
orderGuid: string;
constructor(protected checkoutService: CheckoutFacade) {}
ngOnInit() {
this.order$ = this.checkoutService.getOrderDetails().pipe(
tap((order) => {
this.isGuestCustomer =
'guestCustomer' in order ? order.guestCustomer ?? false : false;
this.orderGuid = order.guid as string;
})
);
this.isReplenishmentOrderType$ = this.checkoutService
.getCurrentOrderType()
.pipe(
map(
(orderType) => ORDER_TYPE.SCHEDULE_REPLENISHMENT_ORDER === orderType
)
);
}
ngOnDestroy() {
this.checkoutService.clearCheckoutData();
}
}
<ng-container *ngIf="order$ | async as order">
<div class="cx-page-header">
<h1 class="cx-page-title">
{{ 'checkoutOrderConfirmation.confirmationOfOrder' | cxTranslate }}
{{
(isReplenishmentOrderType$ | async)
? order.replenishmentOrderCode
: order.code
}}
</h1>
</div>
<div class="cx-order-confirmation-message">
<h2>{{ 'checkoutOrderConfirmation.thankYou' | cxTranslate }}</h2>
<p>
{{ 'checkoutOrderConfirmation.invoiceHasBeenSentByEmail' | cxTranslate }}
</p>
</div>
<div *ngIf="isGuestCustomer">
<cx-guest-register-form
[guid]="orderGuid"
[email]="order.paymentInfo.billingAddress.email"
></cx-guest-register-form>
</div>
<cx-add-to-home-screen-banner></cx-add-to-home-screen-banner>
</ng-container>
Legend
Html element with directive