File
Implements
Metadata
| selector |
cx-stock-notification-dialog |
| templateUrl |
./stock-notification-dialog.component.html |
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
subscribeSuccess$
|
Type : Observable<boolean>
|
|
|
import { Component, OnDestroy } from '@angular/core';
import { NotificationPreference, UserInterestsService } from '@spartacus/core';
import { Observable } from 'rxjs';
import { ModalService } from '../../../../shared/components/modal/modal.service';
@Component({
selector: 'cx-stock-notification-dialog',
templateUrl: './stock-notification-dialog.component.html',
})
export class StockNotificationDialogComponent implements OnDestroy {
subscribeSuccess$: Observable<boolean>;
enabledPrefs: NotificationPreference[] = [];
constructor(
private modalService: ModalService,
private interestsService: UserInterestsService
) {}
close() {
this.modalService.dismissActiveModal();
}
ngOnDestroy(): void {
if (this.subscribeSuccess$) {
this.subscribeSuccess$
.subscribe((success) => {
if (success) {
this.interestsService.resetAddInterestState();
}
})
.unsubscribe();
}
}
}
<div class="cx-dialog-header modal-header">
<div class="cx-dialog-title modal-title">
{{ 'stockNotification.subscriptionDialog.header' | cxTranslate }}
</div>
<button
type="button"
[attr.aria-label]="'common.close' | cxTranslate"
class="close"
tabindex="-1"
(click)="close()"
>
<span aria-hidden="true">×</span>
</button>
</div>
<ng-container *ngIf="subscribeSuccess$ | async; else loading">
<div class="cx-dialog-body modal-body">
<div class="container">
<p>
{{
'stockNotification.subscriptionDialog.notifiedPrefix' | cxTranslate
}}
</p>
<p *ngFor="let preference of enabledPrefs" class="channels">
<span>{{ preference.channel }}</span
><span *ngIf="preference.value">{{ ': ' + preference.value }}</span>
</p>
<p>
{{
'stockNotification.subscriptionDialog.notifiedSuffix' | cxTranslate
}}
</p>
<p>
{{
'stockNotification.subscriptionDialog.manageChannelsPrefix'
| cxTranslate
}}
<a
(click)="close()"
[routerLink]="['/my-account/notification-preference']"
class="link-prefs"
>
{{
'stockNotification.subscriptionDialog.manageChannelsLink'
| cxTranslate
}}</a
>
{{
'stockNotification.subscriptionDialog.manageChannelsSuffix'
| cxTranslate
}}
</p>
<p>
{{
'stockNotification.subscriptionDialog.manageSubscriptionsPrefix'
| cxTranslate
}}
<a
(click)="close()"
[routerLink]="['/my-account/my-interests']"
class="link-interests"
>
{{
'stockNotification.subscriptionDialog.manageSubscriptionsLink'
| cxTranslate
}}</a
>
{{
'stockNotification.subscriptionDialog.manageSubscriptionsSuffix'
| cxTranslate
}}
</p>
<div class="row">
<div class="cx-dialog-actions col-sm-12 col-md-3 offset-md-9">
<button
class="btn btn-primary btn-block btn-ok"
type="button"
(click)="close()"
>
{{ 'stockNotification.subscriptionDialog.okBtn' | cxTranslate }}
</button>
</div>
</div>
</div>
</div>
</ng-container>
<ng-template #loading>
<div class="cx-dialog-body modal-body">
<p>
{{ 'stockNotification.subscriptionDialog.subscribing' | cxTranslate }}
</p>
<div class="cx-dialog-row">
<div class="col-sm-12">
<cx-spinner></cx-spinner>
</div>
</div>
</div>
</ng-template>
Legend
Html element with directive