File
projects/congarevenuecloud/elements/src/lib/constraint-rule/constraint-rule-alert/constraint-rule-alert.component.ts
Description
Constraint rule alert component is used to show a bootstrap style alert banner for the active constraint rules based on the user's cart.
Preview
Constraint rule error Alert
Constraint rule warning Alert
Usage
Example :import { ConstraintRuleModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [ConstraintRuleModule, ...]
})
export class AppModule {}// Basic Usage.
Example :<apt-constraint-rule-alert></apt-constraint-rule-alert>// To Show product Level Constraint Rules in a Component.
Example :<apt-constraint-rule-alert>
</apt-constraint-rule-alert>
Implements
OnInit
Metadata
| encapsulation | ViewEncapsulation.None |
| selector | apt-constraint-rule-alert |
| styleUrls | ./constraint-rule-alert.component.scss |
| templateUrl | ./constraint-rule-alert.component.html |
Constructor
constructor(modalService: BsModalService, constraintRuleMessageService: ConstraintRuleMessageService, productConfigurationService: ProductConfigurationService)
|
||||||||||||
|
Parameters :
|
<ng-container *ngIf="showRules$ | async">
<ng-container *ngIf="ruleGroups$ | async as ruleGroups">
<alert *ngIf="ruleGroups.errors?.length" class="constraintRuleAlert" type="danger">
<i class="fas fa-minus-circle text-danger mr-2"></i>
<!-- Errors -->
<ng-container *ngIf="ruleGroups.errors.length === 1; else multipleErrors">
<ng-container [ngSwitch]="ruleGroups.errors[0]?.actionType">
<!-- Inclusion -->
<ng-container *ngSwitchCase="'Inclusion'">
<ng-container *ngIf="ruleGroups.errors[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.errors[0].messageHtml"></span>
</ng-container>
<ng-container *ngIf="ruleGroups.errors[0].actionItems.length === 1">
<ng-container *ngIf="!loading.error; else spinner">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action"
(click)="handleAddToCart(ruleGroups.errors[0], ruleGroups.errors[0].actionItems[0].product, 'error')">{{
"COMMON.ADD_TO_CART" | translate }}</button>
</ng-container>
</ng-container>
<ng-container *ngIf="ruleGroups.errors[0].actionItems.length > 1">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" |
translate }}</button>
</ng-container>
</ng-container>
<!-- Exclusion -->
<ng-container *ngSwitchCase="'Exclusion'">
<ng-container *ngIf="ruleGroups.errors[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.errors[0].messageHtml"></span>
</ng-container>
<ng-container *ngIf="ruleGroups.errors[0].actionItems.length === 1">
<ng-container *ngIf="!loading.error; else spinner">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action"
(click)="handleDeleteFromCart(ruleGroups.errors[0], ruleGroups.errors[0]?.actionItems[0]?.product, 'error')">{{
"CONSTRAINT_SIDE_MENU.REMOVE_FROM_CART" | translate }}</button>
</ng-container>
</ng-container>
<ng-container *ngIf="ruleGroups.errors[0].actionItems.length > 1">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" |
translate }}</button>
</ng-container>
</ng-container>
<!-- Validation -->
<ng-container *ngSwitchCase="'Validation'">
<ng-container *ngIf="ruleGroups.errors[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.errors[0].messageHtml"></span>
</ng-container>
</ng-container>
<!-- Recommendation -->
<ng-container *ngSwitchCase="'Recommendation'">
<ng-container *ngIf="ruleGroups.errors[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.errors[0].messageHtml"></span>
</ng-container>
<ng-container *ngIf="ruleGroups.errors[0].actionItems.length === 1">
<ng-container *ngIf="!loading.error; else spinner">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action"
(click)="handleAddToCart(ruleGroups.errors[0], ruleGroups.errors[0].actionItems[0].product, 'error')">{{
"COMMON.ADD_TO_CART" | translate }}</button>
</ng-container>
</ng-container>
<ng-container *ngIf="ruleGroups.errors[0].actionItems.length > 1">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" |
translate }}</button>
</ng-container>
</ng-container>
<!-- Replacement -->
<ng-container *ngSwitchCase="'Replacement'">
<ng-container *ngIf="ruleGroups.errors[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1" [innerHtml]="ruleGroups.errors[0].messageHtml"></span>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<ng-template #multipleErrors>
<span>{{ "CONSTRAINT_ALERT.NUM_OF_ERRORS" | translate: {amount: ruleGroups.errors.length} }}
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" | translate
}}</button></span>
</ng-template>
</alert>
<!-- Warnings -->
<alert *ngIf="ruleGroups.warnings?.length" type="warning" [dismissible]="true">
<i class="fas fa-exclamation-triangle text-warning mr-2"></i>
<ng-container *ngIf="ruleGroups.warnings.length === 1; else multipleWarnings">
<ng-container [ngSwitch]="ruleGroups.warnings[0]?.actionType">
<!-- Inclusion -->
<ng-container *ngSwitchCase="'Inclusion'">
<ng-container *ngIf="ruleGroups.warnings[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.warnings[0].messageHtml"></span>
</ng-container>
<ng-container *ngIf="ruleGroups.warnings[0].actionItems.length === 1">
<ng-container *ngIf="!loading.warning; else spinner">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action"
(click)="handleAddToCart(ruleGroups.warnings[0], ruleGroups.warnings[0].actionItems[0].product, 'warning')">{{
"COMMON.ADD_TO_CART" | translate }}</button>
</ng-container>
</ng-container>
<ng-container *ngIf="ruleGroups.warnings[0].actionItems.length > 1">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" |
translate }}</button>
</ng-container>
</ng-container>
<!-- Exclusion -->
<ng-container *ngSwitchCase="'Exclusion'">
<ng-container *ngIf="ruleGroups.warnings[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.warnings[0].messageHtml"></span>
</ng-container>
<ng-container *ngIf="ruleGroups.warnings[0].actionItems.length === 1">
<ng-container *ngIf="!loading.warning; else spinner">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action"
(click)="handleDeleteFromCart(ruleGroups.warnings[0], ruleGroups.warnings[0]?.actionItems[0]?.product, 'warning')">{{
"CONSTRAINT_SIDE_MENU.REMOVE_FROM_CART" | translate }}</button>
</ng-container>
</ng-container>
<ng-container *ngIf="ruleGroups.warnings[0].actionItems.length > 1">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" |
translate }}</button>
</ng-container>
</ng-container>
<!-- Validation -->
<ng-container *ngSwitchCase="'Validation'">
<ng-container *ngIf="ruleGroups.warnings[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1" [innerHtml]="ruleGroups.warnings[0].messageHtml"></span>
</ng-container>
</ng-container>
<!-- Recommendation -->
<ng-container *ngSwitchCase="'Recommendation'">
<ng-container *ngIf="ruleGroups.warnings[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.warnings[0].messageHtml"></span>
</ng-container>
<ng-container *ngIf="ruleGroups.warnings[0].actionItems.length === 1">
<ng-container *ngIf="!loading.warning; else spinner">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action"
(click)="handleAddToCart(ruleGroups.warnings[0], ruleGroups.warnings[0].actionItems[0].product, 'warning')">{{
"COMMON.ADD_TO_CART" | translate }}</button>
</ng-container>
</ng-container>
<ng-container *ngIf="ruleGroups.warnings[0].actionItems.length > 1">
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" |
translate }}</button>
</ng-container>
</ng-container>
<!-- Replacement -->
<ng-container *ngSwitchCase="'Replacement'">
<ng-container *ngIf="ruleGroups.warnings[0].messageHtml !== null">
<span class="d-lg-inline-block d-inline py-1 text-dark"
[innerHtml]="ruleGroups.warnings[0].messageHtml"></span>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<ng-template #multipleWarnings>
<span>{{ "CONSTRAINT_ALERT.NUM_OF_ERRORS" | translate: {amount: ruleGroups.warnings.length} }}
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" | translate
}}</button></span>
</ng-template>
</alert>
<!-- Info Messages -->
<!-- TO DO:-->
<!-- <alert *ngIf="ruleGroups.info?.length" type="info" [dismissible]="true">
<i class="fas fa-info-circle mr-2"></i>
<ng-container *ngIf="ruleGroups.info.length === 1; else multipleMessages">
<a href="javascript:void(0)">{{ data.infoMessages[0].product.name }}</a> product must include <strong>{{data.infoMessages[0].includedProduct.name }}</strong> product. <a href="javascript:void(0)">Add to Cart</a>
</ng-container>
<ng-template #multipleMessages>
<span>{{ ruleGroups.info.length }} information messages found. <a href="javascript:void(0)" (click)="handleViewDetails()">View details</a></span>
</ng-template>
</alert> -->
<!-- Success Messages -->
<alert *ngIf="ruleGroups.success?.length" type="success" [dismissible]="true">
<i class="fas fa-info-circle mr-2"></i>
<ng-container *ngIf="ruleGroups.success.length === 1; else multipleMessages">
<span *ngIf="ruleGroups.success[0].message !== null" [innerHtml]="ruleGroups.success[0].message"></span>
</ng-container>
<ng-template #multipleMessages>
<span>{{ "CONSTRAINT_ALERT.NUM_OF_INFO_MESSAGES" | translate: {amount: ruleGroups.success.length} }}
<button class="ml-3 px-1 py-0 btn text-dark btn-link constraint-action" (click)="handleViewDetails()">{{
"CONSTRAINT_ALERT.VIEW_DETAILS" | translate
}}</button></span>
</ng-template>
</alert>
</ng-container>
</ng-container>
<ng-template #spinner>
<apt-spinner class="ml-4" [large]="false"></apt-spinner>
</ng-template>
./constraint-rule-alert.component.scss
Legend
Html element
Component
Html element with directive