File
Metadata
| selector |
cx-coupon-card |
| templateUrl |
./coupon-card.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
couponSubscriptionLoading$
|
Type : Observable<boolean>
|
|
|
Methods
|
findProducts
|
findProducts()
|
|
|
|
|
|
onSubscriptionChange
|
onSubscriptionChange()
|
|
|
|
|
|
couponSubscriptionLoading$
|
Type : Observable<boolean>
|
Decorators :
@Input()
|
|
|
|
notificationChanged
|
Default value : new EventEmitter<{
couponId: string;
notification: boolean;
}>()
|
Decorators :
@Output()
|
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {
ModalRef,
ModalService,
} from '../../../../shared/components/modal/index';
import { CouponDialogComponent } from './coupon-dialog/coupon-dialog.component';
import { CustomerCoupon } from '@spartacus/core';
import { MyCouponsComponentService } from '../my-coupons.component.service';
import { Observable } from 'rxjs';
@Component({
selector: 'cx-coupon-card',
templateUrl: './coupon-card.component.html',
})
export class CouponCardComponent {
@Input() coupon: CustomerCoupon;
@Input() couponSubscriptionLoading$: Observable<boolean>;
modalRef: ModalRef;
@Output()
notificationChanged = new EventEmitter<{
couponId: string;
notification: boolean;
}>();
constructor(
protected modalService: ModalService,
protected myCouponsComponentService: MyCouponsComponentService
) {}
onSubscriptionChange(): void {
this.notificationChanged.emit({
couponId: this.coupon.couponId,
notification: !this.coupon.notificationOn,
});
}
readMore() {
let modalInstance: any;
this.modalRef = this.modalService.open(CouponDialogComponent, {
centered: true,
size: 'lg',
});
modalInstance = this.modalRef.componentInstance;
modalInstance.coupon = this.coupon;
}
findProducts(): void {
this.myCouponsComponentService.launchSearchPage(this.coupon);
}
}
<div class="card">
<div class="card-body cx-card-body">
<div class="cx-coupon-data">
<div class="cx-coupon-card-row top">
<div class="cx-coupon-card-head">
<span class="card-label-bold cx-coupon-card-id">{{
coupon?.couponId
}}</span>
<span>: {{ coupon?.name }}</span>
</div>
<div class="cx-coupon-status {{ coupon?.status | lowercase }}">
{{ 'myCoupons.' + coupon?.status | cxTranslate }}
</div>
</div>
<div class="cx-coupon-card-date">
<p>{{ 'myCoupons.effectiveTitle' | cxTranslate }}</p>
<div class="cx-coupon-date">
<div class="cx-coupon-date-start">
{{ coupon?.startDate | cxDate: 'medium' }} -
</div>
<div class="cx-coupon-date-end">
{{ coupon?.endDate | cxDate: 'medium' }}
</div>
</div>
</div>
<a (click)="readMore()" class="cx-card-read-more">{{
'myCoupons.readMore' | cxTranslate
}}</a>
<div class="cx-coupon-card-row bottom">
<div class="cx-coupon-notification form-check">
<label>
<input
type="checkbox"
class="form-check-input"
[checked]="coupon?.notificationOn"
[class.disabled]="couponSubscriptionLoading$ | async"
[disabled]="couponSubscriptionLoading$ | async"
(change)="onSubscriptionChange()"
/>
<span class="form-check-label">
{{ 'myCoupons.notification' | cxTranslate }}
</span>
</label>
</div>
<div class="cx-coupon-find-product col-lg-6 col-md-12 col-sm-6">
<button class="btn btn-block btn-action" (click)="findProducts()">
{{ 'myCoupons.findProducts' | cxTranslate }}
</button>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive