File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-applied-coupons |
| templateUrl |
./applied-coupons.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
cartIsLoading
|
Type : boolean
|
Default value : false
|
|
|
|
isReadOnly
|
Type : boolean
|
Default value : false
|
|
|
|
vouchers
|
Type : Voucher[]
|
|
|
Methods
|
removeVoucher
|
removeVoucher(voucherId: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| voucherId |
string
|
No
|
|
|
cartIsLoading
|
Default value : false
|
Decorators :
@Input()
|
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
isReadOnly
|
Default value : false
|
Decorators :
@Input()
|
|
|
|
vouchers
|
Type : Voucher[]
|
Decorators :
@Input()
|
|
|
Accessors
|
sortedVouchers
|
getsortedVouchers()
|
|
|
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Voucher, CartVoucherService } from '@spartacus/core';
import { ICON_TYPE } from '../../../../cms-components/misc/icon/icon.model';
@Component({
selector: 'cx-applied-coupons',
templateUrl: './applied-coupons.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppliedCouponsComponent {
@Input()
vouchers: Voucher[];
@Input()
cartIsLoading = false;
@Input()
isReadOnly = false;
iconTypes = ICON_TYPE;
constructor(protected cartVoucherService: CartVoucherService) {}
public get sortedVouchers(): Voucher[] {
this.vouchers = this.vouchers || [];
return this.vouchers.slice().sort((a, b) => {
return a.code.localeCompare(b.code);
});
}
removeVoucher(voucherId: string) {
this.cartVoucherService.removeVoucher(voucherId);
}
}
<div *ngIf="isReadOnly; else editableCoupons">
<div *ngIf="sortedVouchers.length > 0">
<div class="cx-applied-coupon-title">
{{ 'voucher.vouchersApplied' | cxTranslate }}
</div>
</div>
<div
*ngFor="let voucher of sortedVouchers"
class="coupon-summary cx-coupon-card textonly"
role="filter"
>
<span class="cx-applied-coupon-code">{{ voucher.voucherCode }}</span>
</div>
</div>
<ng-template #editableCoupons>
<div class="row">
<div
*ngFor="let voucher of sortedVouchers"
class="col-sm-12 col-md-6 col-lg-12 cx-coupon-card-grid"
role="filter"
>
<div class="cx-coupon-apply cx-coupon-card cx-coupon-list-wrap">
<span class="cx-cart-coupon-code">{{ voucher.voucherCode }}</span>
<button
type="button"
class="close"
[attr.aria-label]="'common.close' | cxTranslate"
(click)="removeVoucher(voucher.voucherCode)"
[disabled]="cartIsLoading"
[class.disabled]="cartIsLoading"
>
<span aria-hidden="true">
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</span>
</button>
</div>
</div>
</div>
</ng-template>
Legend
Html element with directive