@adlfe/campaign-management-library 2.11.8 → 2.11.10

package/fesm5/adlfe-campaign-management-library.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends, __assign, __spread, __param, __values } from 'tslib';
+import { __decorate, __extends, __assign, __spread, __param, __values, __awaiter, __generator } from 'tslib';
 import { Component, EventEmitter, Output, Input, NgModule, ContentChild, forwardRef, NgZone, Directive, ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, ViewChild } from '@angular/core';
 import { MapsAPILoader, AgmCoreModule } from '@agm/core';
 import { CommonModule, DatePipe } from '@angular/common';
@@ -33,7 +33,7 @@ import { AngularEditorModule } from '@kolkov/angular-editor';
 import { NgbPaginationModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import * as echarts from 'echarts';
 import { Subject, fromEvent, of } from 'rxjs';
-import { debounceTime, takeUntil, tap, distinctUntilChanged } from 'rxjs/operators';
+import { debounceTime, takeUntil, tap, map, catchError as catchError$1 } from 'rxjs/operators';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -267,13 +267,19 @@ var InputNumericComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], InputNumericComponent.prototype, "maxLength", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "suffix", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "hint", void 0);
     __decorate([
         ContentChild('suffix')
     ], InputNumericComponent.prototype, "suffixTmpl", void 0);
     InputNumericComponent = InputNumericComponent_1 = __decorate([
         Component({
             selector: 'app-input[type=numeric]',
-            template: "<div class=\"grid\">\r\n    <mat-form-field class=\"w-full\" appearance=\"outline\" floatLabel=\"always\">\r\n        <mat-label *ngIf=\"label\">\r\n            <span>{{ label }}</span>\r\n        </mat-label>\r\n        <input\r\n            type=\"text\"\r\n            [id]=\"identifier\"\r\n            [attr.data-testid]=\"identifier\"\r\n            matInput\r\n            [placeholder]=\"placeholder\"\r\n            [formControl]=\"formControl\"\r\n            (input)=\"handleInput($event)\"\r\n            [attr.maxlength]=\"maxLength\"\r\n        />\r\n        <span *ngIf=\"suffixTmpl\" matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixTmpl\"></ng-container>\r\n        </span>\r\n    </mat-form-field>\r\n    <mat-error align=\"end\" class=\"leading-zero\" *ngIf=\"isInvalid\">\r\n        <small class=\"text-xs\">\r\n            {{ errors?.message }}\r\n        </small>\r\n    </mat-error>\r\n</div>\r\n",
+            template: "<div class=\"grid\">\r\n    <mat-form-field class=\"w-full\" appearance=\"outline\" floatLabel=\"always\">\r\n        <mat-label *ngIf=\"label\">\r\n            <span>{{ label }}</span>\r\n        </mat-label>\r\n        <input\r\n            type=\"text\"\r\n            [id]=\"identifier\"\r\n            [attr.data-testid]=\"identifier\"\r\n            matInput\r\n            [placeholder]=\"placeholder\"\r\n            [formControl]=\"formControl\"\r\n            (input)=\"handleInput($event)\"\r\n            [attr.maxlength]=\"maxLength\"\r\n        />\r\n        <span *ngIf=\"suffixTmpl\" matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixTmpl\"></ng-container>\r\n        </span>\r\n\r\n        <span *ngIf=\"suffix\" matSuffix>\r\n            {{ suffix }}\r\n        </span>\r\n    </mat-form-field>\r\n    <mat-hint *ngIf=\"hint\">\r\n        {{ hint }}\r\n    </mat-hint>\r\n\r\n    <mat-error align=\"end\" class=\"leading-zero\" *ngIf=\"isInvalid\">\r\n        <small class=\"text-xs\">\r\n            {{ errors?.message }}\r\n        </small>\r\n    </mat-error>\r\n</div>\r\n",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -2843,14 +2849,67 @@ var NewCampaignComponent = /** @class */ (function () {
         configurable: true
     });
     NewCampaignComponent.prototype.saveGeneralInformationService = function () {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var bodyReq, payloadValue, isDirectSendEnable, headers, isUtility, confirmation;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!this.onCheckTwilioCounterValid()) {
+                            this.toastr.error('Segment cannot more than 10');
+                            this.isSubmit = false;
+                            return [2 /*return*/];
+                        }
+                        bodyReq = new GeneralInformationWAReqModel().clone(__assign({}, this.generalInformationData));
+                        payloadValue = bodyReq.convert();
+                        isDirectSendEnable = (_b = (_a = this.generalInformationData) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.directSendEnabled;
+                        if (!isDirectSendEnable) {
+                            this.saveGeneralInformation(payloadValue);
+                            return [2 /*return*/];
+                        }
+                        headers = new HttpHeaders()
+                            .set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
+                            .set('Access-Control-Allow-Origin', '*');
+                        return [4 /*yield*/, this.httpClient
+                                .post(environment.api + "/message/direct-send/" + bodyReq.accountId, {
+                                type: 'text',
+                                text: { body: bodyReq.text },
+                            }, { headers: headers })
+                                .pipe(map(function (response) { var _a; return ((_a = response) === null || _a === void 0 ? void 0 : _a.category) === 'UTILITY'; }), catchError$1(function () { return of(true); }))
+                                .toPromise()];
+                    case 1:
+                        isUtility = _c.sent();
+                        if (isUtility) {
+                            this.saveGeneralInformation(payloadValue);
+                            return [2 /*return*/];
+                        }
+                        confirmation = new ConfirmationModel();
+                        confirmation.title = 'Not Utility Content';
+                        confirmation.content = 'Content mismatch. This content is not Utility content';
+                        confirmation.btnSubmitRed = 'Continue';
+                        confirmation.btnCancel = 'Cancel';
+                        this.dialog
+                            .open(ConfirmationComponent, {
+                            autoFocus: false,
+                            backdropClass: 'overlay-backdrop-dialog',
+                            data: confirmation,
+                        })
+                            .afterClosed()
+                            .subscribe(function (isContinue) {
+                            if (isContinue) {
+                                _this.saveGeneralInformation(payloadValue);
+                                return;
+                            }
+                            _this.isSubmit = false;
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    NewCampaignComponent.prototype.saveGeneralInformation = function (payloadValue) {
         var _this = this;
-        if (!this.onCheckTwilioCounterValid()) {
-            this.toastr.error('Segment cannot more than 10');
-            this.isSubmit = false;
-            return;
-        }
-        var bodyReq = new GeneralInformationWAReqModel().clone(__assign({}, this.generalInformationData));
-        var payloadValue = bodyReq.convert();
         if (payloadValue.template && this.generalInformationData.template) {
             payloadValue.template.type =
                 payloadValue.template.type || this.generalInformationData.template.category;
@@ -4074,7 +4133,6 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             { label: 'Create New', value: false },
             { label: 'Use existing template', value: true },
         ];
-        this.isUtility = true;
         this.isCheckUtility = false;
         this.updateGeneralInformationForm = new EventEmitter();
     }
@@ -4110,7 +4168,6 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         this.initValidation();
         this.getAccountOptionService(((_c = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form) === null || _c === void 0 ? void 0 : _c.medium) === 'WA'
             ? (_g = (_f = (_e = (_d = this.getCampaignStorage) === null || _d === void 0 ? void 0 : _d.generalInformation) === null || _e === void 0 ? void 0 : _e.form) === null || _f === void 0 ? void 0 : _f.from) === null || _g === void 0 ? void 0 : _g.name : '');
-        this.listenBodyChange();
         /* this.setCurrentLocation(); */
     };
     Object.defineProperty(GeneralInformationWAComponent.prototype, "getCampaignStorage", {
@@ -4321,44 +4378,6 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         });
         this.subscribers.push(subs);
     };
-    GeneralInformationWAComponent.prototype.listenBodyChange = function () {
-        var _this = this;
-        var _a;
-        (_a = this.form
-            .get('text')) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(function () {
-            if (!_this.getIsUtility)
-                return;
-            _this.validateText();
-        });
-    };
-    GeneralInformationWAComponent.prototype.validateText = function (account) {
-        var _this = this;
-        var _a, _b;
-        this.isCheckUtility = true;
-        var _c = this.form.value, from = _c.from, text = _c.text;
-        if (!text || !from)
-            return;
-        if (!((_a = from) === null || _a === void 0 ? void 0 : _a.directSendEnabled))
-            return;
-        var headers = new HttpHeaders()
-            .set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
-            .set('Access-Control-Allow-Origin', '*');
-        this.httpClient
-            .post(environment.api + "/message/direct-send/" + ((_b = (from || account)) === null || _b === void 0 ? void 0 : _b.id), {
-            type: 'text',
-            text: { body: text },
-        }, { headers: headers })
-            .subscribe({
-            next: function (response) {
-                var _a;
-                _this.isUtility = ((_a = response) === null || _a === void 0 ? void 0 : _a.category) === 'UTILITY';
-                _this.isCheckUtility = false;
-            },
-            error: function () {
-                _this.isCheckUtility = false;
-            },
-        });
-    };
     GeneralInformationWAComponent.prototype.getTemplateOptionService = function (event, filter, isInfinite) {
         var _this = this;
         if (event === void 0) { event = null; }
@@ -4752,12 +4771,9 @@ var GeneralInformationWAComponent = /** @class */ (function () {
     };
     GeneralInformationWAComponent.prototype.handleChangeFrom = function (value) {
         var isUseExistingTemplate = this.form.value.isUseExistingTemplate;
-        if (isUseExistingTemplate) {
-            this.getTemplateOptionService(value);
-        }
-        else {
-            this.validateText(value);
-        }
+        if (!isUseExistingTemplate)
+            return;
+        this.getTemplateOptionService(value);
     };
     GeneralInformationWAComponent.prototype.ngOnDestroy = function () {
         this.subscribers.forEach(function (each) { return each.unsubscribe(); });
@@ -4784,7 +4800,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
     GeneralInformationWAComponent = __decorate([
         Component({
             selector: 'lib-general-information-wa',
-            template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"form-group\">\r\n        <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n            <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n            <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n                <mat-option\r\n                    *ngFor=\"let option of msgTypeWAOption\"\r\n                    [value]=\"option.code\"\r\n                    (click)=\"formReset()\"\r\n                >\r\n                    {{ option.name }}\r\n                </mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n            <p\r\n                class=\"font-12px mb-0\"\r\n                *ngIf=\"\r\n                    form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n                \"\r\n            >\r\n                {{ validation.message }}\r\n            </p>\r\n        </mat-error>\r\n\r\n        <div\r\n            *ngIf=\"!getIsTemplate\"\r\n            role=\"alert\"\r\n            class=\"alert alert-warning d-flex align-items-center\"\r\n            style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n        >\r\n            <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n            <div *ngIf=\"!getIsUtility\">\r\n                If you select this channel, keep in mind that the message might not be delivered to\r\n                all selected customers. This is because the customer must have had a conversation\r\n                previously with BSP.\r\n            </div>\r\n\r\n            <div *ngIf=\"getIsUtility\">\r\n                You can send directly a utility message. You can choose between existing utility\r\n                templates or creating a new one. If you create a new template, the system may check\r\n                whether the content already exists as a template.\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"getIsText\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n                <textarea\r\n                    matInput\r\n                    rows=\"6\"\r\n                    cols=\"50\"\r\n                    cdkTextareaAutosize\r\n                    cdkAutosizeMinRows=\"2\"\r\n                    cdkAutosizeMaxRows=\"15\"\r\n                    formControlName=\"text\"\r\n                    placeholder=\"Enter text\"\r\n                    #autosize=\"cdkTextareaAutosize\"\r\n                ></textarea>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsMedia\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n                <mat-select\r\n                    placeholder=\"Select media type\"\r\n                    formControlName=\"media\"\r\n                    (selectionChange)=\"updateMediaType($event.value)\"\r\n                >\r\n                    <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        autocomplete=\"off\"\r\n                        (click)=\"filePicker.click()\"\r\n                        formControlName=\"fileName\"\r\n                    />\r\n\r\n                    <button\r\n                        mat-button\r\n                        matSuffix\r\n                        mat-icon-button\r\n                        aria-label=\"Choose File\"\r\n                        (click)=\"filePicker.click()\"\r\n                    >\r\n                        <mat-icon>attach_file</mat-icon>\r\n                    </button>\r\n\r\n                    <input\r\n                        #filePicker\r\n                        hidden\r\n                        type=\"file\"\r\n                        [accept]=\"extFileAccepted\"\r\n                        (change)=\"onFileSelected($event)\"\r\n                    />\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('fileName').touched &&\r\n                            form.get('fileName').hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n            <div class=\"w-100\">\r\n                <h4 class=\"asterix--after\">Location</h4>\r\n\r\n                <div class=\"w-100\">\r\n                    <agm-map\r\n                        style=\"width: 100%; height: 400px\"\r\n                        [latitude]=\"maps.latitude\"\r\n                        [longitude]=\"maps.longitude\"\r\n                        [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n                        [zoom]=\"maps.zoom\"\r\n                    >\r\n                        <agm-marker\r\n                            [latitude]=\"maps.latitude\"\r\n                            [longitude]=\"maps.longitude\"\r\n                            [markerDraggable]=\"maps.isDraggable\"\r\n                            (dragEnd)=\"markerDragEnd($event)\"\r\n                        ></agm-marker>\r\n                    </agm-map>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Location</mat-label>\r\n\r\n                        <input\r\n                            #mapSearch\r\n                            matInput\r\n                            type=\"text\"\r\n                            maxlength=\"100\"\r\n                            placeholder=\"Enter location here\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsTemplate\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                    (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"template\"\r\n                    placeholder=\"Select template\"\r\n                    [complete]=\"isHaveNextTemplateOption === false\"\r\n                    [compareWith]=\"templateSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                    (selectionChange)=\"updateTemplate($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('template').value?.name\"\r\n                            (searchRes)=\"updateSearch($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('template')?.touched &&\r\n                        form.get('template')?.hasError(validation.type)\r\n                    \"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n            <mat-checkbox\r\n                labelPosition=\"before\"\r\n                formControlName=\"isUpload\"\r\n                (change)=\"updateDownloadCSV($event.checked)\"\r\n            >\r\n                Using Download XLSX\r\n            </mat-checkbox>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n            <div\r\n                *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n                class=\"form-group\"\r\n            >\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> OTP Value </mat-label>\r\n\r\n                    <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n                <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n                <div\r\n                    *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n                            [formControl]=\"param.get('name')\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n                <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n                <div\r\n                    *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n                            [formControl]=\"param.get('name')\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"isShowParameter\">\r\n                <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n                <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n                    <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n                        <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n                        <div\r\n                            *ngFor=\"\r\n                                let param of getParamButton(buttonIndex);\r\n                                let paramIndex = index\r\n                            \"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                                <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n                                <input\r\n                                    matInput\r\n                                    type=\"text\"\r\n                                    [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n                                    [formControl]=\"param.get('name')\"\r\n                                />\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n            *ngIf=\"\r\n                ['image', 'video', 'document'].includes(\r\n                    form.get('template')?.value?.header?.type?.toLowerCase()\r\n                )\r\n            \"\r\n        >\r\n            <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        autocomplete=\"off\"\r\n                        (click)=\"filePicker.click()\"\r\n                        formControlName=\"fileName\"\r\n                    />\r\n\r\n                    <button\r\n                        mat-button\r\n                        matSuffix\r\n                        mat-icon-button\r\n                        aria-label=\"Choose File\"\r\n                        (click)=\"filePicker.click()\"\r\n                    >\r\n                        <mat-icon>attach_file</mat-icon>\r\n                    </button>\r\n\r\n                    <input\r\n                        #filePicker\r\n                        hidden\r\n                        type=\"file\"\r\n                        [accept]=\"extFileAccepted\"\r\n                        (change)=\"onFileSelected($event)\"\r\n                    />\r\n                </mat-form-field>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsCatalogue\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n                <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n                    <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('category')?.touched &&\r\n                        form.get('category')?.hasError(validation.type)\r\n                    \"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n                <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('catalogue')?.touched &&\r\n                        form.get('catalogue')?.hasError(validation.type)\r\n                    \"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"form.get('category')?.value === 'product'\"\r\n            style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n        >\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n                    <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n                        <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('product')?.touched &&\r\n                            form.get('product')?.hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label>Body</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        maxlength=\"100\"\r\n                        formControlName=\"body\"\r\n                        placeholder=\"Enter body\"\r\n                    />\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsUtility\">\r\n        <div style=\"display: grid; gap: 0.5rem\">\r\n            <mat-label class=\"asterix--after\">Template</mat-label>\r\n            <mat-radio-group\r\n                style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n                formControlName=\"isUseExistingTemplate\"\r\n                (change)=\"handleChangeTemplate($event.value)\"\r\n            >\r\n                <mat-radio-button\r\n                    [value]=\"option.value\"\r\n                    *ngFor=\"let option of templates\"\r\n                    color=\"primary\"\r\n                >\r\n                    {{ option.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                    (selectionChange)=\"handleChangeFrom($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n            <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n                    <textarea\r\n                        matInput\r\n                        rows=\"6\"\r\n                        cols=\"50\"\r\n                        cdkTextareaAutosize\r\n                        cdkAutosizeMinRows=\"2\"\r\n                        cdkAutosizeMaxRows=\"15\"\r\n                        formControlName=\"text\"\r\n                        placeholder=\"Enter text\"\r\n                        #autosize=\"cdkTextareaAutosize\"\r\n                    ></textarea>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('text').touched && form.get('text').hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <app-input\r\n                    type=\"numeric\"\r\n                    formControlName=\"ttl\"\r\n                    label=\"TTL\"\r\n                    placeholder=\"Enter ttl\"\r\n                    [trimLeadingZeros]=\"true\"\r\n                ></app-input>\r\n            </div>\r\n\r\n            <div *ngIf=\"!isReadOnlyMode\">\r\n                <mat-checkbox formControlName=\"isNeedSave\">\r\n                    Save this message as future template\r\n                </mat-checkbox>\r\n            </div>\r\n\r\n            <div\r\n                role=\"alert\"\r\n                class=\"alert alert-warning d-flex align-items-center\"\r\n                style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n                *ngIf=\"!isUtility\"\r\n            >\r\n                <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n                <div>\r\n                    Copy mismatch. This copy is not Utility content. Please revise to proceed.\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #existingTmpl>\r\n            <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n                    <mat-select\r\n                        matSelectInfiniteScroll\r\n                        formControlName=\"template\"\r\n                        placeholder=\"Select template\"\r\n                        [complete]=\"isHaveNextTemplateOption === false\"\r\n                        [compareWith]=\"templateSelectedDisplay\"\r\n                        (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                        (selectionChange)=\"updateTemplate($event.value)\"\r\n                    >\r\n                        <div style=\"margin: 20px\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                [currentValue]=\"form?.get('template').value?.name\"\r\n                                (searchRes)=\"updateSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('template')?.touched &&\r\n                            form.get('template')?.hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <app-input\r\n                    type=\"numeric\"\r\n                    formControlName=\"ttl\"\r\n                    label=\"TTL\"\r\n                    placeholder=\"Enter ttl\"\r\n                    [trimLeadingZeros]=\"true\"\r\n                ></app-input>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n    <div\r\n        role=\"alert\"\r\n        class=\"alert alert-warning d-flex align-items-center\"\r\n        style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n        *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n    >\r\n        <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n            Direct Send misuse detected. Please review your messaging practices.\r\n        </div>\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n            Direct Send access restricted for 7 days due to continued misuse.\r\n        </div>\r\n\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n            Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n            permanent revocation.\r\n        </div>\r\n\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n            Direct Send access has been permanently revoked.\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n",
+            template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"form-group\">\r\n        <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n            <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n            <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n                <mat-option\r\n                    *ngFor=\"let option of msgTypeWAOption\"\r\n                    [value]=\"option.code\"\r\n                    (click)=\"formReset()\"\r\n                >\r\n                    {{ option.name }}\r\n                </mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n            <p\r\n                class=\"font-12px mb-0\"\r\n                *ngIf=\"\r\n                    form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n                \"\r\n            >\r\n                {{ validation.message }}\r\n            </p>\r\n        </mat-error>\r\n\r\n        <div\r\n            *ngIf=\"!getIsTemplate\"\r\n            role=\"alert\"\r\n            class=\"alert alert-warning d-flex align-items-center\"\r\n            style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n        >\r\n            <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n            <div *ngIf=\"!getIsUtility\">\r\n                If you select this channel, keep in mind that the message might not be delivered to\r\n                all selected customers. This is because the customer must have had a conversation\r\n                previously with BSP.\r\n            </div>\r\n\r\n            <div *ngIf=\"getIsUtility\">\r\n                You can send directly a utility message. You can choose between existing utility\r\n                templates or creating a new one. If you create a new template, the system may check\r\n                whether the content already exists as a template.\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"getIsText\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n                <textarea\r\n                    matInput\r\n                    rows=\"6\"\r\n                    cols=\"50\"\r\n                    cdkTextareaAutosize\r\n                    cdkAutosizeMinRows=\"2\"\r\n                    cdkAutosizeMaxRows=\"15\"\r\n                    formControlName=\"text\"\r\n                    placeholder=\"Enter text\"\r\n                    #autosize=\"cdkTextareaAutosize\"\r\n                ></textarea>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsMedia\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n                <mat-select\r\n                    placeholder=\"Select media type\"\r\n                    formControlName=\"media\"\r\n                    (selectionChange)=\"updateMediaType($event.value)\"\r\n                >\r\n                    <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        autocomplete=\"off\"\r\n                        (click)=\"filePicker.click()\"\r\n                        formControlName=\"fileName\"\r\n                    />\r\n\r\n                    <button\r\n                        mat-button\r\n                        matSuffix\r\n                        mat-icon-button\r\n                        aria-label=\"Choose File\"\r\n                        (click)=\"filePicker.click()\"\r\n                    >\r\n                        <mat-icon>attach_file</mat-icon>\r\n                    </button>\r\n\r\n                    <input\r\n                        #filePicker\r\n                        hidden\r\n                        type=\"file\"\r\n                        [accept]=\"extFileAccepted\"\r\n                        (change)=\"onFileSelected($event)\"\r\n                    />\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('fileName').touched &&\r\n                            form.get('fileName').hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n            <div class=\"w-100\">\r\n                <h4 class=\"asterix--after\">Location</h4>\r\n\r\n                <div class=\"w-100\">\r\n                    <agm-map\r\n                        style=\"width: 100%; height: 400px\"\r\n                        [latitude]=\"maps.latitude\"\r\n                        [longitude]=\"maps.longitude\"\r\n                        [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n                        [zoom]=\"maps.zoom\"\r\n                    >\r\n                        <agm-marker\r\n                            [latitude]=\"maps.latitude\"\r\n                            [longitude]=\"maps.longitude\"\r\n                            [markerDraggable]=\"maps.isDraggable\"\r\n                            (dragEnd)=\"markerDragEnd($event)\"\r\n                        ></agm-marker>\r\n                    </agm-map>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Location</mat-label>\r\n\r\n                        <input\r\n                            #mapSearch\r\n                            matInput\r\n                            type=\"text\"\r\n                            maxlength=\"100\"\r\n                            placeholder=\"Enter location here\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsTemplate\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                    (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"template\"\r\n                    placeholder=\"Select template\"\r\n                    [complete]=\"isHaveNextTemplateOption === false\"\r\n                    [compareWith]=\"templateSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                    (selectionChange)=\"updateTemplate($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('template').value?.name\"\r\n                            (searchRes)=\"updateSearch($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('template')?.touched &&\r\n                        form.get('template')?.hasError(validation.type)\r\n                    \"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n            <mat-checkbox\r\n                labelPosition=\"before\"\r\n                formControlName=\"isUpload\"\r\n                (change)=\"updateDownloadCSV($event.checked)\"\r\n            >\r\n                Using Download XLSX\r\n            </mat-checkbox>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n            <div\r\n                *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n                class=\"form-group\"\r\n            >\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> OTP Value </mat-label>\r\n\r\n                    <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n                <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n                <div\r\n                    *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n                            [formControl]=\"param.get('name')\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n                <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n                <div\r\n                    *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n                            [formControl]=\"param.get('name')\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"isShowParameter\">\r\n                <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n                <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n                    <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n                        <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n                        <div\r\n                            *ngFor=\"\r\n                                let param of getParamButton(buttonIndex);\r\n                                let paramIndex = index\r\n                            \"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                                <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n                                <input\r\n                                    matInput\r\n                                    type=\"text\"\r\n                                    [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n                                    [formControl]=\"param.get('name')\"\r\n                                />\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n            *ngIf=\"\r\n                ['image', 'video', 'document'].includes(\r\n                    form.get('template')?.value?.header?.type?.toLowerCase()\r\n                )\r\n            \"\r\n        >\r\n            <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        autocomplete=\"off\"\r\n                        (click)=\"filePicker.click()\"\r\n                        formControlName=\"fileName\"\r\n                    />\r\n\r\n                    <button\r\n                        mat-button\r\n                        matSuffix\r\n                        mat-icon-button\r\n                        aria-label=\"Choose File\"\r\n                        (click)=\"filePicker.click()\"\r\n                    >\r\n                        <mat-icon>attach_file</mat-icon>\r\n                    </button>\r\n\r\n                    <input\r\n                        #filePicker\r\n                        hidden\r\n                        type=\"file\"\r\n                        [accept]=\"extFileAccepted\"\r\n                        (change)=\"onFileSelected($event)\"\r\n                    />\r\n                </mat-form-field>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsCatalogue\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n                <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n                    <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('category')?.touched &&\r\n                        form.get('category')?.hasError(validation.type)\r\n                    \"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n                <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('catalogue')?.touched &&\r\n                        form.get('catalogue')?.hasError(validation.type)\r\n                    \"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"form.get('category')?.value === 'product'\"\r\n            style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n        >\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n                    <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n                        <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('product')?.touched &&\r\n                            form.get('product')?.hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label>Body</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        maxlength=\"100\"\r\n                        formControlName=\"body\"\r\n                        placeholder=\"Enter body\"\r\n                    />\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsUtility\">\r\n        <div style=\"display: grid; gap: 0.5rem\">\r\n            <mat-label class=\"asterix--after\">Template</mat-label>\r\n            <mat-radio-group\r\n                style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n                formControlName=\"isUseExistingTemplate\"\r\n                (change)=\"handleChangeTemplate($event.value)\"\r\n            >\r\n                <mat-radio-button\r\n                    [value]=\"option.value\"\r\n                    *ngFor=\"let option of templates\"\r\n                    color=\"primary\"\r\n                >\r\n                    {{ option.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                    (selectionChange)=\"handleChangeFrom($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n            <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n                    <textarea\r\n                        matInput\r\n                        rows=\"6\"\r\n                        cols=\"50\"\r\n                        cdkTextareaAutosize\r\n                        cdkAutosizeMinRows=\"2\"\r\n                        cdkAutosizeMaxRows=\"15\"\r\n                        formControlName=\"text\"\r\n                        placeholder=\"Enter text\"\r\n                        #autosize=\"cdkTextareaAutosize\"\r\n                    ></textarea>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('text').touched && form.get('text').hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <app-input\r\n                    type=\"numeric\"\r\n                    formControlName=\"ttl\"\r\n                    label=\"TTL\"\r\n                    placeholder=\"Enter ttl\"\r\n                    [trimLeadingZeros]=\"true\"\r\n                    suffix=\"seconds\"\r\n                    hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n                ></app-input>\r\n            </div>\r\n\r\n            <div *ngIf=\"!isReadOnlyMode\">\r\n                <mat-checkbox formControlName=\"isNeedSave\">\r\n                    Save this message as future template\r\n                </mat-checkbox>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #existingTmpl>\r\n            <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n                    <mat-select\r\n                        matSelectInfiniteScroll\r\n                        formControlName=\"template\"\r\n                        placeholder=\"Select template\"\r\n                        [complete]=\"isHaveNextTemplateOption === false\"\r\n                        [compareWith]=\"templateSelectedDisplay\"\r\n                        (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                        (selectionChange)=\"updateTemplate($event.value)\"\r\n                    >\r\n                        <div style=\"margin: 20px\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                [currentValue]=\"form?.get('template').value?.name\"\r\n                                (searchRes)=\"updateSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('template')?.touched &&\r\n                            form.get('template')?.hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <app-input\r\n                    type=\"numeric\"\r\n                    formControlName=\"ttl\"\r\n                    label=\"TTL\"\r\n                    placeholder=\"Enter ttl\"\r\n                    [trimLeadingZeros]=\"true\"\r\n                    suffix=\"Seconds\"\r\n                    hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n                ></app-input>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n    <div\r\n        role=\"alert\"\r\n        class=\"alert alert-warning d-flex align-items-center\"\r\n        style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n        *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n    >\r\n        <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n            Direct Send misuse detected. Please review your messaging practices.\r\n        </div>\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n            Direct Send access restricted for 7 days due to continued misuse.\r\n        </div>\r\n\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n            Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n            permanent revocation.\r\n        </div>\r\n\r\n        <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n            Direct Send access has been permanently revoked.\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n",
             styles: [".asterix--after:after{content:\"*\";color:red}"]
         })
     ], GeneralInformationWAComponent);