@adlfe/campaign-management-library 2.12.0 → 2.13.2

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 } 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,
@@ -1434,6 +1440,7 @@ var GeneralInformationWAMessageValidationConst = {
     catalogue: [{ type: 'required', message: 'Catalog is required' }],
     product: [{ type: 'required', message: 'Product is required' }],
     body: [{ type: 'maxlength', message: 'Maximum character 100' }],
+    paramName: [{ type: 'required', message: 'Variable Name is required' }],
 };
 var GeneralInformationEmailMessageValidationConst = {
     channel: [{ type: 'required', message: 'Message Type is required' }],
@@ -1727,7 +1734,7 @@ var FilterInListOfCampaignComponent = /** @class */ (function () {
         Component({
             selector: 'lib-filter-in-list-of-campaign',
             template: "<p class=\"font-16px font-bold\">Filter</p>\r\n\r\n<form [formGroup]=\"form\" class=\"contact-filter\">\r\n    <div class=\"row\">\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n                    <mat-label>Business Name</mat-label>\r\n                    <mat-select placeholder=\"Select Business Name\" formControlName=\"businessName\">\r\n                        <div class=\"select-search\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                (searchRes)=\"businessNameSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option value=\"\"> --- select none --- </mat-option>\r\n                        <mat-option\r\n                            *ngFor=\"let option of filteredBusinessNameOption\"\r\n                            [value]=\"option.id\"\r\n                        >\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"!filteredBusinessNameOption.length\" disabled>\r\n                            No data found\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n                    <mat-label>Channel</mat-label>\r\n\r\n                    <mat-select placeholder=\"Select the Channel\" formControlName=\"medium\">\r\n                        <mat-option value=\"\"> --- select none --- </mat-option>\r\n                        <mat-option\r\n                            *ngFor=\"let option of filteredChannelOption\"\r\n                            [value]=\"option.value\"\r\n                            (click)=\"getTemplateOptionService()\"\r\n                        >\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"!filteredChannelOption.length\" disabled>\r\n                            No data found\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\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 Name</mat-label>\r\n\r\n                    <mat-select\r\n                        matSelectInfiniteScroll\r\n                        formControlName=\"templateName\"\r\n                        placeholder=\"Select template\"\r\n                        [complete]=\"isHaveNextTemplateOption === false\"\r\n                        [compareWith]=\"templateSelectedDisplay\"\r\n                        (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                    >\r\n                        <div style=\"margin: 20px\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                [currentValue]=\"form?.get('templateName').value?.name\"\r\n                                (searchRes)=\"templateSearch($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            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n                    <mat-label>Status</mat-label>\r\n\r\n                    <mat-select placeholder=\"Select the Status\" formControlName=\"status\">\r\n                        <div class=\"select-search\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                (searchRes)=\"statusSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option value=\"\"> --- select none --- </mat-option>\r\n                        <mat-option\r\n                            *ngFor=\"let option of filteredStatusOption\"\r\n                            [value]=\"option.value\"\r\n                        >\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"!filteredStatusOption.length\" disabled>\r\n                            No data found\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> Start Date </mat-label>\r\n                    <input\r\n                        matInput\r\n                        [matDatepicker]=\"startDatePicker\"\r\n                        formControlName=\"startDate\"\r\n                        class=\"mat-datepicker-input\"\r\n                        (dateChange)=\"validateBackDate()\"\r\n                    />\r\n\r\n                    <mat-datepicker-toggle matSuffix [for]=\"startDatePicker\">\r\n                    </mat-datepicker-toggle>\r\n                    <mat-icon\r\n                        *ngIf=\"form.get('startDate').value\"\r\n                        matDatepickerToggleIcon\r\n                        (click)=\"clearDate()\"\r\n                        >clear</mat-icon\r\n                    >\r\n                    <mat-datepicker #startDatePicker></mat-datepicker>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> End Date </mat-label>\r\n                    <input\r\n                        matInput\r\n                        [min]=\"form.get('startDate').value\"\r\n                        [matDatepicker]=\"endDatePicker\"\r\n                        formControlName=\"endDate\"\r\n                        class=\"mat-datepicker-input\"\r\n                        (dateChange)=\"validateBackDate()\"\r\n                    />\r\n\r\n                    <mat-datepicker-toggle matSuffix [for]=\"endDatePicker\"> </mat-datepicker-toggle>\r\n                    <mat-icon\r\n                        *ngIf=\"form.get('endDate').value\"\r\n                        matDatepickerToggleIcon\r\n                        (click)=\"clearDate()\"\r\n                        >clear</mat-icon\r\n                    >\r\n                    <mat-datepicker #endDatePicker></mat-datepicker>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div style=\"display: flex; flex: 1; width: 100%\">\r\n            <button\r\n                mat-stroked-button\r\n                color=\"primary-telin\"\r\n                class=\"telin-font-color w-48\"\r\n                style=\"width: 100%; margin-bottom: 10px\"\r\n                (click)=\"onReset()\"\r\n            >\r\n                Reset\r\n            </button>\r\n        </div>\r\n        <div class=\"d-flex justify-content-between\">\r\n            <button mat-stroked-button color=\"secondary-telin\" class=\"w-48\" (click)=\"onCancel()\">\r\n                Cancel\r\n            </button>\r\n\r\n            <button mat-flat-button color=\"primary-telin-blue2\" class=\"w-48\" (click)=\"onApply()\">\r\n                Apply\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n",
-            styles: [".contact-filter .platform{display:-ms-grid;display:grid;grid-gap:5px;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.button-row{margin:8px 8px 8px 0}.mat-datepicker-input{width:85%}.mat-icon{position:relative;float:right;top:-7px;cursor:pointer;color:rgba(0,0,0,.54)}.select-search{margin:20px}"]
+            styles: [".contact-filter .platform{display:grid;grid-gap:5px;grid-template-columns:auto 1fr auto}.button-row{margin:8px 8px 8px 0}.mat-datepicker-input{width:85%}.mat-icon{position:relative;float:right;top:-7px;cursor:pointer;color:rgba(0,0,0,.54)}.select-search{margin:20px}"]
         }),
         Injectable({
             providedIn: 'root',
@@ -2500,14 +2507,12 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
     function GeneralInformationWAReqModel() {
     }
     GeneralInformationWAReqModel.prototype.clone = function (source) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        /* Source Mapping */
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         if (((_a = source) === null || _a === void 0 ? void 0 : _a.media) === 'IMAGE' ||
             ((_b = source) === null || _b === void 0 ? void 0 : _b.media) === 'VIDEO' ||
             ((_c = source) === null || _c === void 0 ? void 0 : _c.media) === 'DOCUMENT') {
             source.channel = source.media;
         }
-        /* ./ Source Mapping */
         if (source.campaignName) {
             this.name = source.campaignName;
         }
@@ -2539,6 +2544,12 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
                 fileName: source.fileName,
             };
         }
+        if (source.buttonParams && Array.isArray(source.buttonParams)) {
+            this.buttonParams = source.buttonParams.map(function (btn) { return ({
+                label: btn.label,
+                payload: btn.payload ? btn.payload : btn.label,
+            }); });
+        }
         if (source.template) {
             this.template = {
                 id: source.template.ID,
@@ -2546,12 +2557,21 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
                 lang: source.template.lang,
                 headerUrl: source.targetURL,
                 header: (_g = (_f = source.paramHeader) === null || _f === void 0 ? void 0 : _f.map(function (t) { return t.name; }), (_g !== null && _g !== void 0 ? _g : [])),
-                data: (_j = (_h = source.paramBody) === null || _h === void 0 ? void 0 : _h.map(function (t) { return t.name; }), (_j !== null && _j !== void 0 ? _j : [])),
-                button: (_k = source.paramButton) === null || _k === void 0 ? void 0 : _k.reduce(function (result, each) {
+                data: ((_h = source.variables) === null || _h === void 0 ? void 0 : _h.length) ? source.variables.map(function (v) { return v.paramName; })
+                    : (_k = (_j = source.paramBody) === null || _j === void 0 ? void 0 : _j.map(function (t) { return t.name; }), (_k !== null && _k !== void 0 ? _k : [])),
+                button: (_l = source.paramButton) === null || _l === void 0 ? void 0 : _l.reduce(function (result, each) {
                     var _a;
                     result.push((_a = each.name.map(function (t) { return t.name; }), (_a !== null && _a !== void 0 ? _a : [])));
                     return result;
                 }, []),
+                buttonParams: source.buttonParams
+                    ? source.buttonParams.map(function (btn) {
+                        return {
+                            label: btn.label,
+                            payload: btn.payload ? btn.payload : btn.label,
+                        };
+                    })
+                    : [],
             };
             if (source.template.category === 'AUTHENTICATION')
                 this.template = {
@@ -2560,6 +2580,7 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
                     header: null,
                     data: [source.otpValue],
                     button: [[source.otpValue]],
+                    buttonParams: [],
                 };
             if (source.template.ID)
                 this.template.id = source.template.ID;
@@ -2567,11 +2588,25 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
         if (this.type === 'utility') {
             this.type = 'template';
             this.category = 'utility';
-            this.template = ((_l = source) === null || _l === void 0 ? void 0 : _l.isUseExistingTemplate) ? (_m = source) === null || _m === void 0 ? void 0 : _m.template : { name: '', lang: 'id', header: null, button: null, data: [] };
+            var mappedVariables = ((_o = (_m = source) === null || _m === void 0 ? void 0 : _m.variables) === null || _o === void 0 ? void 0 : _o.length) ? source.variables.map(function (v) { return v.paramName; })
+                : [];
+            if ((_p = source) === null || _p === void 0 ? void 0 : _p.isUseExistingTemplate) {
+                this.template = __assign(__assign({}, source.template), { data: mappedVariables.length > 0 ? mappedVariables : source.template.data || [] });
+            }
+            else {
+                this.template = {
+                    name: '',
+                    lang: 'id',
+                    header: null,
+                    button: null,
+                    data: mappedVariables,
+                    buttonParams: [],
+                };
+            }
             this.isNeedSave = source.isNeedSave;
             this.ttlSeconds = source.ttl;
-            if ((_o = source) === null || _o === void 0 ? void 0 : _o.isUseExistingTemplate) {
-                this.text = (_r = (_q = (_p = source) === null || _p === void 0 ? void 0 : _p.template) === null || _q === void 0 ? void 0 : _q.body) === null || _r === void 0 ? void 0 : _r.text;
+            if ((_q = source) === null || _q === void 0 ? void 0 : _q.isUseExistingTemplate) {
+                this.text = ((_r = source) === null || _r === void 0 ? void 0 : _r.text) || ((_u = (_t = (_s = source) === null || _s === void 0 ? void 0 : _s.template) === null || _t === void 0 ? void 0 : _t.body) === null || _u === void 0 ? void 0 : _u.text);
             }
         }
         return this;
@@ -2843,14 +2878,23 @@ var NewCampaignComponent = /** @class */ (function () {
         configurable: true
     });
     NewCampaignComponent.prototype.saveGeneralInformationService = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var bodyReq, payloadValue;
+            return __generator(this, function (_a) {
+                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();
+                this.saveGeneralInformation(payloadValue);
+                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 +4118,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,14 +4153,12 @@ 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", {
         get: function () {
-            return localStorage.getItem('telin.campaign')
-                ? JSON.parse(localStorage.getItem('telin.campaign'))
-                : {};
+            var campaignData = localStorage.getItem('telin.campaign');
+            return campaignData ? JSON.parse(campaignData) : {};
         },
         enumerable: true,
         configurable: true
@@ -4149,6 +4190,10 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             isUseExistingTemplate: new FormControl(false),
             isNeedSave: new FormControl(false),
             ttl: new FormControl(null),
+            isDownloadVariableXLS: new FormControl(false),
+            variables: new FormArray([]),
+            useXlsx: new FormControl(false),
+            buttonParams: new FormArray([]),
         });
         this.form.valueChanges.subscribe(function () {
             setTimeout(function () {
@@ -4163,133 +4208,152 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         this.form.disable();
     };
     GeneralInformationWAComponent.prototype.initEdit = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-        if (Object.entries(this.getCampaignStorage).length === 0 ||
-            ((_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')
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+        var storageData = this.getCampaignStorage;
+        var formValues = (_b = (_a = storageData) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
+        if (!storageData ||
+            Object.entries(storageData).length === 0 ||
+            ((_c = formValues) === null || _c === void 0 ? void 0 : _c.medium) !== 'WA') {
             return;
-        this.form
-            .get('channel')
-            .setValue((_e = (_d = this.getCampaignStorage) === null || _d === void 0 ? void 0 : _d.generalInformation) === null || _e === void 0 ? void 0 : _e.form.channel);
-        this.form.get('media').setValue((_g = (_f = this.getCampaignStorage) === null || _f === void 0 ? void 0 : _f.generalInformation) === null || _g === void 0 ? void 0 : _g.form.media);
-        this.form.get('from').setValue((_j = (_h = this.getCampaignStorage) === null || _h === void 0 ? void 0 : _h.generalInformation) === null || _j === void 0 ? void 0 : _j.form.from);
-        this.form.get('text').setValue((_l = (_k = this.getCampaignStorage) === null || _k === void 0 ? void 0 : _k.generalInformation) === null || _l === void 0 ? void 0 : _l.form.text);
-        this.form
-            .get('targetURL')
-            .setValue((_o = (_m = this.getCampaignStorage) === null || _m === void 0 ? void 0 : _m.generalInformation) === null || _o === void 0 ? void 0 : _o.form.targetURL);
-        this.form
-            .get('fileName')
-            .setValue((_r = (_q = (_p = this.getCampaignStorage) === null || _p === void 0 ? void 0 : _p.generalInformation) === null || _q === void 0 ? void 0 : _q.form.fileName, (_r !== null && _r !== void 0 ? _r : this.form.get('targetURL').value)));
-        this.form
-            .get('template')
-            .setValue((_t = (_s = this.getCampaignStorage) === null || _s === void 0 ? void 0 : _s.generalInformation) === null || _t === void 0 ? void 0 : _t.form.template);
-        this.form
-            .get('isUpload')
-            .setValue((_v = (_u = this.getCampaignStorage) === null || _u === void 0 ? void 0 : _u.generalInformation) === null || _v === void 0 ? void 0 : _v.form.isUpload);
-        this.form.get('fileId').setValue((_x = (_w = this.getCampaignStorage) === null || _w === void 0 ? void 0 : _w.generalInformation) === null || _x === void 0 ? void 0 : _x.form.fileId);
-        this.form
-            .get('otpValue')
-            .setValue((_z = (_y = this.getCampaignStorage) === null || _y === void 0 ? void 0 : _y.generalInformation) === null || _z === void 0 ? void 0 : _z.form.otpValue);
-        this.form
-            .get('isUseExistingTemplate')
-            .setValue(!!((_2 = (_1 = (_0 = this.getCampaignStorage) === null || _0 === void 0 ? void 0 : _0.generalInformation) === null || _1 === void 0 ? void 0 : _1.form) === null || _2 === void 0 ? void 0 : _2.templateName));
-        this.form
-            .get('isNeedSave')
-            .setValue(!!((_5 = (_4 = (_3 = this.getCampaignStorage) === null || _3 === void 0 ? void 0 : _3.generalInformation) === null || _4 === void 0 ? void 0 : _4.form) === null || _5 === void 0 ? void 0 : _5.isNeedSave));
-        this.form.get('ttl').setValue((_8 = (_7 = (_6 = this.getCampaignStorage) === null || _6 === void 0 ? void 0 : _6.generalInformation) === null || _7 === void 0 ? void 0 : _7.form) === null || _8 === void 0 ? void 0 : _8.ttl);
-        this.isHaveTemplateParam = this.form.get('isUpload').value;
-        this.getTemplateOptionService(null, (_9 = this.form.get('template').value) === null || _9 === void 0 ? void 0 : _9.name);
+        }
+        (_d = this.getControl('channel')) === null || _d === void 0 ? void 0 : _d.setValue((_e = formValues) === null || _e === void 0 ? void 0 : _e.channel);
+        (_f = this.getControl('media')) === null || _f === void 0 ? void 0 : _f.setValue((_g = formValues) === null || _g === void 0 ? void 0 : _g.media);
+        (_h = this.getControl('from')) === null || _h === void 0 ? void 0 : _h.setValue((_j = formValues) === null || _j === void 0 ? void 0 : _j.from);
+        (_k = this.getControl('text')) === null || _k === void 0 ? void 0 : _k.setValue((_l = formValues) === null || _l === void 0 ? void 0 : _l.text);
+        (_m = this.getControl('targetURL')) === null || _m === void 0 ? void 0 : _m.setValue((_o = formValues) === null || _o === void 0 ? void 0 : _o.targetURL);
+        (_p = this.getControl('fileName')) === null || _p === void 0 ? void 0 : _p.setValue((_r = (_q = formValues) === null || _q === void 0 ? void 0 : _q.fileName, (_r !== null && _r !== void 0 ? _r : (_s = this.getControl('targetURL')) === null || _s === void 0 ? void 0 : _s.value)));
+        (_t = this.getControl('template')) === null || _t === void 0 ? void 0 : _t.setValue((_u = formValues) === null || _u === void 0 ? void 0 : _u.template);
+        (_v = this.getControl('isUpload')) === null || _v === void 0 ? void 0 : _v.setValue((_w = formValues) === null || _w === void 0 ? void 0 : _w.isUpload);
+        (_x = this.getControl('fileId')) === null || _x === void 0 ? void 0 : _x.setValue((_y = formValues) === null || _y === void 0 ? void 0 : _y.fileId);
+        (_z = this.getControl('otpValue')) === null || _z === void 0 ? void 0 : _z.setValue((_0 = formValues) === null || _0 === void 0 ? void 0 : _0.otpValue);
+        (_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(!!((_2 = formValues) === null || _2 === void 0 ? void 0 : _2.templateName));
+        (_3 = this.getControl('isNeedSave')) === null || _3 === void 0 ? void 0 : _3.setValue(!!((_4 = formValues) === null || _4 === void 0 ? void 0 : _4.isNeedSave));
+        (_5 = this.getControl('ttl')) === null || _5 === void 0 ? void 0 : _5.setValue((_6 = formValues) === null || _6 === void 0 ? void 0 : _6.ttl);
+        var savedVariables = (_7 = formValues) === null || _7 === void 0 ? void 0 : _7.variables;
+        if (savedVariables && Array.isArray(savedVariables) && savedVariables.length > 0) {
+            this.variables.clear();
+            savedVariables.forEach(function (item) {
+                _this.variables.push(new FormGroup({
+                    paramName: new FormControl({ value: item.paramName || '', disabled: _this.isReadOnlyMode }, Validators$1.required),
+                }));
+            });
+        }
+        this.isHaveTemplateParam = (_8 = this.getControl('isUpload')) === null || _8 === void 0 ? void 0 : _8.value;
+        this.getTemplateOptionService(null, (_10 = (_9 = this.getControl('template')) === null || _9 === void 0 ? void 0 : _9.value) === null || _10 === void 0 ? void 0 : _10.name);
     };
     GeneralInformationWAComponent.prototype.initValidation = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
+        if (!this.form)
+            return;
         for (var key in this.form.controls) {
-            this.form.controls[key].clearValidators();
-            this.form.controls[key].updateValueAndValidity();
+            if (this.form.controls[key]) {
+                this.form.controls[key].clearValidators();
+                this.form.controls[key].updateValueAndValidity();
+            }
         }
-        this.form.get('channel').setValidators(Validators$1.required);
+        (_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.setValidators(Validators$1.required);
         if (this.getIsText) {
-            this.form.get('from').setValidators(Validators$1.required);
-            this.form.get('text').setValidators(Validators$1.required);
-            this.form.get('from').updateValueAndValidity();
-            this.form.get('text').updateValueAndValidity();
+            (_b = this.getControl('from')) === null || _b === void 0 ? void 0 : _b.setValidators(Validators$1.required);
+            (_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.setValidators(Validators$1.required);
+            (_d = this.getControl('from')) === null || _d === void 0 ? void 0 : _d.updateValueAndValidity();
+            (_e = this.getControl('text')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
         }
         else if (this.getIsMedia) {
-            this.form.get('media').setValidators(Validators$1.required);
-            this.form.get('from').setValidators(Validators$1.required);
-            this.form.get('fileName').setValidators(Validators$1.required);
-            this.form.get('media').updateValueAndValidity();
-            this.form.get('from').updateValueAndValidity();
-            this.form.get('fileName').updateValueAndValidity();
+            (_f = this.getControl('media')) === null || _f === void 0 ? void 0 : _f.setValidators(Validators$1.required);
+            (_g = this.getControl('from')) === null || _g === void 0 ? void 0 : _g.setValidators(Validators$1.required);
+            (_h = this.getControl('fileName')) === null || _h === void 0 ? void 0 : _h.setValidators(Validators$1.required);
+            (_j = this.getControl('media')) === null || _j === void 0 ? void 0 : _j.updateValueAndValidity();
+            (_k = this.getControl('from')) === null || _k === void 0 ? void 0 : _k.updateValueAndValidity();
+            (_l = this.getControl('fileName')) === null || _l === void 0 ? void 0 : _l.updateValueAndValidity();
         }
         else if (this.getIsTemplate) {
-            this.form.get('from').setValidators(Validators$1.required);
-            this.form.get('template').setValidators(Validators$1.required);
-            this.form.get('paramHeader').setValidators(Validators$1.required);
-            this.form.get('paramBody').setValidators(Validators$1.required);
-            this.form.get('paramButton').setValidators(Validators$1.required);
-            this.form.get('from').updateValueAndValidity();
-            this.form.get('template').updateValueAndValidity();
-            this.form.get('paramHeader').updateValueAndValidity();
-            this.form.get('paramBody').updateValueAndValidity();
-            this.form.get('paramButton').updateValueAndValidity();
+            (_m = this.getControl('from')) === null || _m === void 0 ? void 0 : _m.setValidators(Validators$1.required);
+            (_o = this.getControl('template')) === null || _o === void 0 ? void 0 : _o.setValidators(Validators$1.required);
+            (_p = this.getControl('paramHeader')) === null || _p === void 0 ? void 0 : _p.setValidators(Validators$1.required);
+            (_q = this.getControl('paramBody')) === null || _q === void 0 ? void 0 : _q.setValidators(Validators$1.required);
+            (_r = this.getControl('paramButton')) === null || _r === void 0 ? void 0 : _r.setValidators(Validators$1.required);
+            (_s = this.getControl('from')) === null || _s === void 0 ? void 0 : _s.updateValueAndValidity();
+            (_t = this.getControl('template')) === null || _t === void 0 ? void 0 : _t.updateValueAndValidity();
+            (_u = this.getControl('paramHeader')) === null || _u === void 0 ? void 0 : _u.updateValueAndValidity();
+            (_v = this.getControl('paramBody')) === null || _v === void 0 ? void 0 : _v.updateValueAndValidity();
+            (_w = this.getControl('paramButton')) === null || _w === void 0 ? void 0 : _w.updateValueAndValidity();
         }
         else if (this.getIsCatalogue) {
-            this.form.get('from').setValidators(Validators$1.required);
-            this.form.get('category').setValidators(Validators$1.required);
-            this.form.get('catalogue').setValidators(Validators$1.required);
-            this.form.get('product').setValidators(Validators$1.required);
-            this.form.get('body').setValidators(Validators$1.maxLength(100));
-            this.form.get('from').updateValueAndValidity();
-            this.form.get('category').updateValueAndValidity();
-            this.form.get('catalogue').updateValueAndValidity();
-            this.form.get('product').updateValueAndValidity();
-            this.form.get('body').updateValueAndValidity();
+            (_x = this.getControl('from')) === null || _x === void 0 ? void 0 : _x.setValidators(Validators$1.required);
+            (_y = this.getControl('category')) === null || _y === void 0 ? void 0 : _y.setValidators(Validators$1.required);
+            (_z = this.getControl('catalogue')) === null || _z === void 0 ? void 0 : _z.setValidators(Validators$1.required);
+            (_0 = this.getControl('product')) === null || _0 === void 0 ? void 0 : _0.setValidators(Validators$1.required);
+            (_1 = this.getControl('body')) === null || _1 === void 0 ? void 0 : _1.setValidators(Validators$1.maxLength(100));
+            (_2 = this.getControl('from')) === null || _2 === void 0 ? void 0 : _2.updateValueAndValidity();
+            (_3 = this.getControl('category')) === null || _3 === void 0 ? void 0 : _3.updateValueAndValidity();
+            (_4 = this.getControl('catalogue')) === null || _4 === void 0 ? void 0 : _4.updateValueAndValidity();
+            (_5 = this.getControl('product')) === null || _5 === void 0 ? void 0 : _5.updateValueAndValidity();
+            (_6 = this.getControl('body')) === null || _6 === void 0 ? void 0 : _6.updateValueAndValidity();
         }
         else if (this.getIsUtility) {
-            this.form.get('from').setValidators(Validators$1.required);
-            this.form.get('text').setValidators([Validators$1.required, Validators$1.maxLength(1024)]);
-            this.form
-                .get('ttl')
-                .setValidators([
+            (_7 = this.getControl('from')) === null || _7 === void 0 ? void 0 : _7.setValidators(Validators$1.required);
+            (_8 = this.getControl('text')) === null || _8 === void 0 ? void 0 : _8.setValidators([
+                Validators$1.required,
+                Validators$1.maxLength(1024),
+            ]);
+            (_9 = this.getControl('ttl')) === null || _9 === void 0 ? void 0 : _9.setValidators([
                 Validators.min(30, 'Minimum TTL 30'),
                 Validators.max(43200, 'Maximum TTL 43200'),
             ]);
-            this.form.get('from').updateValueAndValidity();
-            this.form.get('text').updateValueAndValidity();
-            this.form.get('ttl').updateValueAndValidity();
+            (_10 = this.getControl('from')) === null || _10 === void 0 ? void 0 : _10.updateValueAndValidity();
+            (_11 = this.getControl('text')) === null || _11 === void 0 ? void 0 : _11.updateValueAndValidity();
+            (_12 = this.getControl('ttl')) === null || _12 === void 0 ? void 0 : _12.updateValueAndValidity();
+            (_13 = this.getControl('variables')) === null || _13 === void 0 ? void 0 : _13.updateValueAndValidity();
         }
         else {
-            this.form.get('from').setValidators(Validators$1.required);
-            this.form.get('text').setValidators(Validators$1.required);
-            this.form.get('from').updateValueAndValidity();
-            this.form.get('text').updateValueAndValidity();
+            (_14 = this.getControl('from')) === null || _14 === void 0 ? void 0 : _14.setValidators(Validators$1.required);
+            (_15 = this.getControl('text')) === null || _15 === void 0 ? void 0 : _15.setValidators(Validators$1.required);
+            (_16 = this.getControl('from')) === null || _16 === void 0 ? void 0 : _16.updateValueAndValidity();
+            (_17 = this.getControl('text')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
         }
     };
     GeneralInformationWAComponent.prototype.formReset = function (_isMediaType) {
         if (_isMediaType === void 0) { _isMediaType = false; }
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         if (!_isMediaType) {
-            this.form.get('media').reset();
-            this.form.get('from').reset();
+            (_a = this.getControl('media')) === null || _a === void 0 ? void 0 : _a.reset();
+            (_b = this.getControl('from')) === null || _b === void 0 ? void 0 : _b.reset();
+        }
+        (_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.reset();
+        (_d = this.getControl('fileName')) === null || _d === void 0 ? void 0 : _d.reset();
+        (_e = this.getControl('targetURL')) === null || _e === void 0 ? void 0 : _e.reset();
+        (_f = this.getControl('fileType')) === null || _f === void 0 ? void 0 : _f.reset();
+        (_g = this.getControl('file')) === null || _g === void 0 ? void 0 : _g.reset();
+        (_h = this.getControl('latitude')) === null || _h === void 0 ? void 0 : _h.reset();
+        (_j = this.getControl('longitude')) === null || _j === void 0 ? void 0 : _j.reset();
+        (_k = this.getControl('template')) === null || _k === void 0 ? void 0 : _k.reset();
+        (_l = this.getControl('category')) === null || _l === void 0 ? void 0 : _l.reset();
+        (_m = this.getControl('product')) === null || _m === void 0 ? void 0 : _m.reset();
+        (_o = this.getControl('catalogue')) === null || _o === void 0 ? void 0 : _o.reset();
+        (_p = this.getControl('body')) === null || _p === void 0 ? void 0 : _p.reset();
+        (_q = this.getControl('otpValue')) === null || _q === void 0 ? void 0 : _q.reset();
+        (_r = this.getControl('variables')) === null || _r === void 0 ? void 0 : _r.reset();
+        var paramHeader = this.getControl('paramHeader');
+        if (paramHeader) {
+            paramHeader.clear();
+            paramHeader.reset();
+        }
+        var paramBody = this.getControl('paramBody');
+        if (paramBody) {
+            paramBody.clear();
+            paramBody.reset();
+        }
+        var paramButton = this.getControl('paramButton');
+        if (paramButton) {
+            paramButton.clear();
+            paramButton.reset();
         }
-        this.form.get('text').reset();
-        this.form.get('fileName').reset();
-        this.form.get('targetURL').reset();
-        this.form.get('fileType').reset();
-        this.form.get('file').reset();
-        this.form.get('latitude').reset();
-        this.form.get('longitude').reset();
-        this.form.get('template').reset();
-        this.form.get('category').reset();
-        this.form.get('product').reset();
-        this.form.get('catalogue').reset();
-        this.form.get('body').reset();
-        this.form.get('otpValue').reset();
-        this.form.get('paramHeader').controls = [];
-        this.form.get('paramHeader').reset();
-        this.form.get('paramBody').controls = [];
-        this.form.get('paramBody').reset();
-        this.form.get('paramButton').controls = [];
-        this.form.get('paramButton').reset();
         this.initValidation();
     };
+    GeneralInformationWAComponent.prototype.getControl = function (controlName) {
+        return this.form ? this.form.get(controlName) : null;
+    };
     GeneralInformationWAComponent.prototype.initParam = function (_name, _value, _type) {
         return {
             name: _name,
@@ -4313,58 +4377,21 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         var subs = this.apiAdapterService
             .executeApiRequest(parameterList, '/admin/account', 'GET')
             .subscribe(function (resp) {
+            var _a;
             if (!resp.data)
                 return;
             _this.accountOption = isInfinite ? __spread(_this.accountOption, resp.data) : resp.data;
-            _this.isHaveNextAccountOption = resp.haveNext;
+            _this.isHaveNextAccountOption = (_a = resp.haveNext, (_a !== null && _a !== void 0 ? _a : true));
             _this.isLoadingAccountOption = false;
         });
         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; }
         if (filter === void 0) { filter = ''; }
         if (isInfinite === void 0) { isInfinite = false; }
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.isLoadingTemplateOption = true;
         var parameterList = [
             this.initParam('pageNo', this.pageNoTemplateOption, 'number'),
@@ -4372,30 +4399,31 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             this.initParam('platform', 'WA', 'string'),
             this.initParam('filter', filter, 'string'),
             this.initParam('status', 'APPROVED', 'string'),
-            this.initParam('clientId', (_a = this.form.get('from').value) === null || _a === void 0 ? void 0 : _a.clientId, 'string'),
-            this.initParam('wabaId', (_c = (_b = this.form.get('from').value) === null || _b === void 0 ? void 0 : _b.wabaId, (_c !== null && _c !== void 0 ? _c : '')), 'string'),
+            this.initParam('clientId', (_c = (_b = (_a = this.getControl('from')) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.clientId, (_c !== null && _c !== void 0 ? _c : '')), 'string'),
+            this.initParam('wabaId', (_f = (_e = (_d = this.getControl('from')) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.wabaId, (_f !== null && _f !== void 0 ? _f : '')), 'string'),
         ];
         if (this.isReadOnlyMode)
             parameterList.push(this.initParam('summary', true, 'string'));
-        var messageType = (_d = this.form.value) === null || _d === void 0 ? void 0 : _d.channel;
+        var messageType = (_g = this.form.value) === null || _g === void 0 ? void 0 : _g.channel;
         if (messageType === 'utility') {
             parameterList.push(this.initParam('isDirectSend', true, 'string'));
         }
         var subs = this.apiAdapterService
             .executeApiRequest(parameterList, '/message/template', 'GET')
             .subscribe(function (resp) {
-            var _a;
-            _this.templateOption = isInfinite
-                ? __spread(_this.templateOption, resp.data) : resp.data;
-            _this.isHaveNextTemplateOption = resp.haveNext;
+            var _a, _b, _c, _d, _e, _f;
+            var currentOptions = _this.templateOption || [];
+            var newData = resp.data || [];
+            _this.templateOption = isInfinite ? __spread(currentOptions, newData) : newData;
+            _this.isHaveNextTemplateOption = (_a = resp.haveNext, (_a !== null && _a !== void 0 ? _a : true));
             _this.isLoadingTemplateOption = false;
-            var template = (_a = _this.templateOption) === null || _a === void 0 ? void 0 : _a.find(function (t) { var _a; return t.ID === ((_a = _this.form.get('template').value) === null || _a === void 0 ? void 0 : _a.ID); });
+            var template = (_b = _this.templateOption) === null || _b === void 0 ? void 0 : _b.find(function (t) { var _a, _b; return t.ID === ((_b = (_a = _this.getControl('template')) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.ID); });
             if (template) {
-                _this.form.get('template').setValue(template);
-                if (_this.form.get('isUpload').value)
-                    return _this.updateDownloadCSV(_this.form.get('isUpload').value);
+                (_c = _this.getControl('template')) === null || _c === void 0 ? void 0 : _c.patchValue(template);
+                if ((_d = _this.getControl('isUpload')) === null || _d === void 0 ? void 0 : _d.value)
+                    return _this.updateDownloadCSV((_e = _this.getControl('isUpload')) === null || _e === void 0 ? void 0 : _e.value);
             }
-            _this.updateTemplate(_this.form.get('template').value);
+            _this.updateTemplate((_f = _this.getControl('template')) === null || _f === void 0 ? void 0 : _f.value);
         });
         this.subscribers.push(subs);
     };
@@ -4455,45 +4483,45 @@ var GeneralInformationWAComponent = /** @class */ (function () {
     };
     Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsText", {
         get: function () {
-            var _a;
-            return (this.form.get('channel').value &&
-                ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'text');
+            var _a, _b, _c;
+            return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'text');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsMedia", {
         get: function () {
-            var _a;
-            return (this.form.get('channel').value &&
-                ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'media');
+            var _a, _b, _c;
+            return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'media');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsTemplate", {
         get: function () {
-            var _a;
-            return (this.form.get('channel').value &&
-                ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'template');
+            var _a, _b, _c;
+            return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'template');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsCatalogue", {
         get: function () {
-            var _a;
-            return (this.form.get('channel').value &&
-                ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'catalogue');
+            var _a, _b, _c;
+            return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'catalogue');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsUtility", {
         get: function () {
-            var _a;
-            return (this.form.get('channel').value &&
-                ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'utility');
+            var _a, _b, _c;
+            return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'utility');
         },
         enumerable: true,
         configurable: true
@@ -4521,6 +4549,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             : '';
     };
     GeneralInformationWAComponent.prototype.onFileSelected = function (event) {
+        var _a, _b, _c, _d, _e, _f;
         var file = event.target.files;
         var accept = this.extFileAccepted.split('/');
         var matchType = accept[0];
@@ -4536,21 +4565,22 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             this.toastr.error('Upload media failed, max size 10mb');
             return;
         }
-        this.form.get('file').setValue(file[0]);
-        this.form.get('fileType').setValue('image');
-        this.form.get('fileName').setValue(file[0].name);
-        this.form.get('targetURL').setValidators(Validators$1.required);
-        this.form.get('targetURL').updateValueAndValidity();
+        (_a = this.getControl('file')) === null || _a === void 0 ? void 0 : _a.setValue(file[0]);
+        (_b = this.getControl('fileType')) === null || _b === void 0 ? void 0 : _b.setValue('image');
+        (_c = this.getControl('fileName')) === null || _c === void 0 ? void 0 : _c.setValue(file[0].name);
+        (_d = this.getControl('targetURL')) === null || _d === void 0 ? void 0 : _d.setValidators(Validators$1.required);
+        (_e = this.getControl('targetURL')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
         if (file[0].type.indexOf('video') > -1)
-            this.form.get('fileType').setValue('video');
+            (_f = this.getControl('fileType')) === null || _f === void 0 ? void 0 : _f.setValue('video');
         this.uploadMediaService();
     };
     GeneralInformationWAComponent.prototype.uploadMediaService = function () {
         var _this = this;
+        var _a;
         var parameterList = [
             {
                 name: 'file',
-                value: this.form.get('file').value,
+                value: (_a = this.getControl('file')) === null || _a === void 0 ? void 0 : _a.value,
                 in: 'formData',
                 type: 'object',
             },
@@ -4558,75 +4588,93 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         var subs = this.apiAdapterService
             .executeApiRequest(parameterList, '/message/media', 'POST')
             .subscribe(function (resp) {
-            _this.form.get('targetURL').clearValidators();
-            _this.form.get('targetURL').updateValueAndValidity();
-            _this.form.get('targetURL').setValue(resp.data.targetURL);
-            _this.form.get('file').reset();
+            var _a, _b, _c, _d;
+            (_a = _this.getControl('targetURL')) === null || _a === void 0 ? void 0 : _a.clearValidators();
+            (_b = _this.getControl('targetURL')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
+            (_c = _this.getControl('targetURL')) === null || _c === void 0 ? void 0 : _c.setValue(resp.data.targetURL);
+            (_d = _this.getControl('file')) === null || _d === void 0 ? void 0 : _d.reset();
             _this.toastr.success('Upload media success');
         });
         this.subscribers.push(subs);
     };
+    Object.defineProperty(GeneralInformationWAComponent.prototype, "buttonParamsControls", {
+        get: function () {
+            return this.form.get('buttonParams').controls;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GeneralInformationWAComponent.prototype, "isUsingExcelBulk", {
+        get: function () {
+            var _a;
+            return ((_a = this.getControl('isUpload')) === null || _a === void 0 ? void 0 : _a.value) || false;
+        },
+        enumerable: true,
+        configurable: true
+    });
     GeneralInformationWAComponent.prototype.updateTemplate = function (template) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34;
         this.isShowParameter = false;
         if (!template)
             return;
+        var buttonParamsArray = this.form.get('buttonParams');
+        buttonParamsArray.clear();
+        if (template && template.buttons && template.buttons.length > 0) {
+            var quickReplyButtons = template.buttons.filter(function (btn) { return btn.type === 'QUICK_REPLY'; });
+            quickReplyButtons.forEach(function (btn) {
+                buttonParamsArray.push(new FormGroup({
+                    label: new FormControl(btn.text),
+                    payload: new FormControl('', [Validators$1.maxLength(256)]),
+                }));
+            });
+        }
         this.isHaveTemplateParam =
-            ((_a = template.header.examples) === null || _a === void 0 ? void 0 : _a.length) > 0 ||
-                ((_b = template.body.examples) === null || _b === void 0 ? void 0 : _b.length) > 0 ||
-                ((_c = template.buttons) === null || _c === void 0 ? void 0 : _c.length) > 0;
-        if (['image', 'video', 'document'].includes((_f = (_e = (_d = template) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.toLowerCase())) {
-            this.form
-                .get('fileName')
-                .setValue((_m = (_j = (_h = (_g = this.getCampaignStorage) === null || _g === void 0 ? void 0 : _g.generalInformation) === null || _h === void 0 ? void 0 : _h.form.fileName, (_j !== null && _j !== void 0 ? _j : (_l = (_k = this.getCampaignStorage) === null || _k === void 0 ? void 0 : _k.generalInformation) === null || _l === void 0 ? void 0 : _l.form.targetURL)), (_m !== null && _m !== void 0 ? _m : template.header.url)));
-            this.form
-                .get('targetURL')
-                .setValue((_q = (_p = (_o = this.getCampaignStorage) === null || _o === void 0 ? void 0 : _o.generalInformation) === null || _p === void 0 ? void 0 : _p.form.targetURL, (_q !== null && _q !== void 0 ? _q : template.header.url)));
-            this.fileTypeChange((_t = (_s = (_r = template) === null || _r === void 0 ? void 0 : _r.header) === null || _s === void 0 ? void 0 : _s.type) === null || _t === void 0 ? void 0 : _t.toLowerCase());
-        }
-        ((_u = template.header.examples) === null || _u === void 0 ? void 0 : _u.length) > 0
-            ? this.form.get('paramHeader').setValidators(Validators$1.required)
-            : this.form.get('paramHeader').clearValidators();
-        ((_v = template.body.examples) === null || _v === void 0 ? void 0 : _v.length) > 0
-            ? this.form.get('paramBody').setValidators(Validators$1.required)
-            : this.form.get('paramBody').clearValidators();
-        ((_w = template.buttons) === null || _w === void 0 ? void 0 : _w.length) > 0
-            ? this.form.get('paramButton').setValidators(Validators$1.required)
-            : this.form.get('paramButton').clearValidators();
+            (_c = (_b = (_a = template.header) === null || _a === void 0 ? void 0 : _a.examples) === null || _b === void 0 ? void 0 : _b.length, (_c !== null && _c !== void 0 ? _c : 0)) > 0 ||
+                (_f = (_e = (_d = template.body) === null || _d === void 0 ? void 0 : _d.examples) === null || _e === void 0 ? void 0 : _e.length, (_f !== null && _f !== void 0 ? _f : 0)) > 0 ||
+                (_h = (_g = template.buttons) === null || _g === void 0 ? void 0 : _g.length, (_h !== null && _h !== void 0 ? _h : 0)) > 0;
+        if (['image', 'video', 'document'].includes((_l = (_k = (_j = template) === null || _j === void 0 ? void 0 : _j.header) === null || _k === void 0 ? void 0 : _k.type) === null || _l === void 0 ? void 0 : _l.toLowerCase())) {
+            (_m = this.getControl('fileName')) === null || _m === void 0 ? void 0 : _m.setValue((_t = (_q = (_p = (_o = this.getCampaignStorage) === null || _o === void 0 ? void 0 : _o.generalInformation) === null || _p === void 0 ? void 0 : _p.form.fileName, (_q !== null && _q !== void 0 ? _q : (_s = (_r = this.getCampaignStorage) === null || _r === void 0 ? void 0 : _r.generalInformation) === null || _s === void 0 ? void 0 : _s.form.targetURL)), (_t !== null && _t !== void 0 ? _t : template.header.url)));
+            (_u = this.getControl('targetURL')) === null || _u === void 0 ? void 0 : _u.setValue((_x = (_w = (_v = this.getCampaignStorage) === null || _v === void 0 ? void 0 : _v.generalInformation) === null || _w === void 0 ? void 0 : _w.form.targetURL, (_x !== null && _x !== void 0 ? _x : template.header.url)));
+            this.fileTypeChange((_0 = (_z = (_y = template) === null || _y === void 0 ? void 0 : _y.header) === null || _z === void 0 ? void 0 : _z.type) === null || _0 === void 0 ? void 0 : _0.toLowerCase());
+        }
+        (_2 = (_1 = template.header.examples) === null || _1 === void 0 ? void 0 : _1.length, (_2 !== null && _2 !== void 0 ? _2 : 0)) > 0
+            ? (_3 = this.getControl('paramHeader')) === null || _3 === void 0 ? void 0 : _3.setValidators(Validators$1.required) : (_4 = this.getControl('paramHeader')) === null || _4 === void 0 ? void 0 : _4.clearValidators();
+        (_6 = (_5 = template.body.examples) === null || _5 === void 0 ? void 0 : _5.length, (_6 !== null && _6 !== void 0 ? _6 : 0)) > 0
+            ? (_7 = this.getControl('paramBody')) === null || _7 === void 0 ? void 0 : _7.setValidators(Validators$1.required) : (_8 = this.getControl('paramBody')) === null || _8 === void 0 ? void 0 : _8.clearValidators();
+        (_10 = (_9 = template.buttons) === null || _9 === void 0 ? void 0 : _9.length, (_10 !== null && _10 !== void 0 ? _10 : 0)) > 0
+            ? (_11 = this.getControl('paramButton')) === null || _11 === void 0 ? void 0 : _11.setValidators(Validators$1.required) : (_12 = this.getControl('paramButton')) === null || _12 === void 0 ? void 0 : _12.clearValidators();
         this.form.get('paramHeader').controls = [];
         this.form.get('paramHeader').reset();
-        this.form.get('paramHeader').updateValueAndValidity();
+        (_13 = this.getControl('paramHeader')) === null || _13 === void 0 ? void 0 : _13.updateValueAndValidity();
         this.form.get('paramBody').controls = [];
         this.form.get('paramBody').reset();
-        this.form.get('paramBody').updateValueAndValidity();
+        (_14 = this.getControl('paramBody')) === null || _14 === void 0 ? void 0 : _14.updateValueAndValidity();
         this.form.get('paramButton').controls = [];
         this.form.get('paramButton').reset();
-        this.form.get('paramButton').updateValueAndValidity();
-        this.form.get('otpValue').setValue('');
-        this.form.get('otpValue').clearValidators();
-        this.form.get('otpValue').updateValueAndValidity();
-        var formStorage = (_y = (_x = this.getCampaignStorage) === null || _x === void 0 ? void 0 : _x.generalInformation) === null || _y === void 0 ? void 0 : _y.form;
+        (_15 = this.getControl('paramButton')) === null || _15 === void 0 ? void 0 : _15.updateValueAndValidity();
+        (_16 = this.getControl('otpValue')) === null || _16 === void 0 ? void 0 : _16.setValue('');
+        (_17 = this.getControl('otpValue')) === null || _17 === void 0 ? void 0 : _17.clearValidators();
+        (_18 = this.getControl('otpValue')) === null || _18 === void 0 ? void 0 : _18.updateValueAndValidity();
+        var formStorage = (_20 = (_19 = this.getCampaignStorage) === null || _19 === void 0 ? void 0 : _19.generalInformation) === null || _20 === void 0 ? void 0 : _20.form;
         if (template.category === 'AUTHENTICATION') {
-            this.form
-                .get('otpValue')
-                .setValue((_6 = (_0 = (_z = formStorage) === null || _z === void 0 ? void 0 : _z.otpValue, (_0 !== null && _0 !== void 0 ? _0 : (_5 = __spread((_4 = (_3 = (_2 = (_1 = formStorage) === null || _1 === void 0 ? void 0 : _1.template) === null || _2 === void 0 ? void 0 : _2.body) === null || _3 === void 0 ? void 0 : _3.examples, (_4 !== null && _4 !== void 0 ? _4 : [])))) === null || _5 === void 0 ? void 0 : _5.pop())), (_6 !== null && _6 !== void 0 ? _6 : '')));
-            this.form.get('otpValue').setValidators(Validators$1.required);
-            this.form.get('otpValue').updateValueAndValidity();
+            (_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.setValue((_29 = (_23 = (_22 = formStorage) === null || _22 === void 0 ? void 0 : _22.otpValue, (_23 !== null && _23 !== void 0 ? _23 : (_28 = __spread((_27 = (_26 = (_25 = (_24 = formStorage) === null || _24 === void 0 ? void 0 : _24.template) === null || _25 === void 0 ? void 0 : _25.body) === null || _26 === void 0 ? void 0 : _26.examples, (_27 !== null && _27 !== void 0 ? _27 : [])))) === null || _28 === void 0 ? void 0 : _28.pop())), (_29 !== null && _29 !== void 0 ? _29 : '')));
+            (_30 = this.getControl('otpValue')) === null || _30 === void 0 ? void 0 : _30.setValidators(Validators$1.required);
+            (_31 = this.getControl('otpValue')) === null || _31 === void 0 ? void 0 : _31.updateValueAndValidity();
         }
-        (_7 = template.header.examples) === null || _7 === void 0 ? void 0 : _7.forEach(function (each, index) {
+        (_32 = template.header.examples) === null || _32 === void 0 ? void 0 : _32.forEach(function (each, index) {
             var _a, _b, _c, _d, _e, _f, _g;
             _this.addParamHeader((_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramHeader) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramHeader) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : '')));
         });
-        (_8 = template.body.examples) === null || _8 === void 0 ? void 0 : _8.forEach(function (each, index) {
+        (_33 = template.body.examples) === null || _33 === void 0 ? void 0 : _33.forEach(function (each, index) {
             var _a, _b, _c, _d, _e, _f, _g;
             var paramValue = (_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramBody) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramBody) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : ''));
             if (['$UnsubscribeAccount'].includes(each))
                 paramValue = each;
             _this.addParamBody(paramValue);
         });
-        (_9 = template.buttons) === null || _9 === void 0 ? void 0 : _9.forEach(function (each, index) {
-            var _a;
+        (_34 = template.buttons) === null || _34 === void 0 ? void 0 : _34.forEach(function (each, index) {
+            var _a, _b, _c, _d;
             _this.addParamButton();
             var button = _this.getButton;
             if (((_a = each.examples) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -4644,8 +4692,9 @@ var GeneralInformationWAComponent = /** @class */ (function () {
                 });
             }
             else {
-                button[button.length - 1].get('name').clearValidators();
-                button[button.length - 1].get('name').updateValueAndValidity();
+                var lastControl = (_b = button[button.length - 1]) === null || _b === void 0 ? void 0 : _b.get('name');
+                (_c = lastControl) === null || _c === void 0 ? void 0 : _c.clearValidators();
+                (_d = lastControl) === null || _d === void 0 ? void 0 : _d.updateValueAndValidity();
             }
         });
     };
@@ -4680,13 +4729,14 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             var autocomplete = new google.maps.places.Autocomplete(_this.mapSearchRef.nativeElement);
             autocomplete.addListener('place_changed', function () {
                 _this.ngZone.run(function () {
+                    var _a, _b;
                     var place = autocomplete.getPlace();
                     if (!place.geometry)
                         return;
                     _this.maps.latitude = place.geometry.location.lat();
                     _this.maps.longitude = place.geometry.location.lng();
-                    _this.form.get('latitude').setValue(_this.maps.latitude);
-                    _this.form.get('longitude').setValue(_this.maps.longitude);
+                    (_a = _this.getControl('latitude')) === null || _a === void 0 ? void 0 : _a.setValue(_this.maps.latitude);
+                    (_b = _this.getControl('longitude')) === null || _b === void 0 ? void 0 : _b.setValue(_this.maps.longitude);
                 });
             });
         });
@@ -4695,69 +4745,139 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         var _this = this;
         if ('geolocation' in navigator) {
             navigator.geolocation.getCurrentPosition(function (position) {
-                if (!_this.form.get('longitude').value && !_this.form.get('latitude').value) {
+                var _a, _b, _c, _d;
+                if (!((_a = _this.getControl('longitude')) === null || _a === void 0 ? void 0 : _a.value) && !((_b = _this.getControl('latitude')) === null || _b === void 0 ? void 0 : _b.value)) {
                     _this.maps.latitude = position.coords.latitude;
                     _this.maps.longitude = position.coords.longitude;
-                    _this.form.get('latitude').setValue(_this.maps.latitude);
-                    _this.form.get('longitude').setValue(_this.maps.longitude);
+                    (_c = _this.getControl('latitude')) === null || _c === void 0 ? void 0 : _c.setValue(_this.maps.latitude);
+                    (_d = _this.getControl('longitude')) === null || _d === void 0 ? void 0 : _d.setValue(_this.maps.longitude);
                 }
             });
         }
     };
     GeneralInformationWAComponent.prototype.markerDragEnd = function (event) {
+        var _a, _b;
         if (event.latLng) {
             this.maps.latitude = event.latLng.lat();
             this.maps.longitude = event.latLng.lng();
-            this.form.get('latitude').setValue(this.maps.latitude);
-            this.form.get('longitude').setValue(this.maps.longitude);
+            (_a = this.getControl('latitude')) === null || _a === void 0 ? void 0 : _a.setValue(this.maps.latitude);
+            (_b = this.getControl('longitude')) === null || _b === void 0 ? void 0 : _b.setValue(this.maps.longitude);
         }
     };
     GeneralInformationWAComponent.prototype.updateDownloadCSV = function (isChecked) {
-        this.form.get('isUpload').setValue(isChecked);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        (_a = this.getControl('isUpload')) === null || _a === void 0 ? void 0 : _a.setValue(isChecked);
         if (isChecked) {
-            this.form.get('paramHeader').controls = [];
-            this.form.get('paramHeader').reset();
-            this.form.get('paramBody').controls = [];
-            this.form.get('paramBody').reset();
-            this.form.get('paramButton').controls = [];
-            this.form.get('paramButton').reset();
-            this.form.get('paramHeader').clearValidators();
-            this.form.get('paramBody').clearValidators();
-            this.form.get('paramButton').clearValidators();
-            this.form.get('paramHeader').updateValueAndValidity();
-            this.form.get('paramBody').updateValueAndValidity();
-            this.form.get('paramButton').updateValueAndValidity();
-            this.form.get('otpValue').reset();
-            this.form.get('otpValue').clearValidators();
-            this.form.get('otpValue').updateValueAndValidity();
+            this.getControl('paramHeader').controls = [];
+            this.getControl('paramHeader').reset();
+            this.getControl('paramBody').controls = [];
+            this.getControl('paramBody').reset();
+            this.getControl('paramButton').controls = [];
+            this.getControl('paramButton').reset();
+            (_b = this.getControl('paramHeader')) === null || _b === void 0 ? void 0 : _b.clearValidators();
+            (_c = this.getControl('paramBody')) === null || _c === void 0 ? void 0 : _c.clearValidators();
+            (_d = this.getControl('paramButton')) === null || _d === void 0 ? void 0 : _d.clearValidators();
+            (_e = this.getControl('paramHeader')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
+            (_f = this.getControl('paramBody')) === null || _f === void 0 ? void 0 : _f.updateValueAndValidity();
+            (_g = this.getControl('paramButton')) === null || _g === void 0 ? void 0 : _g.updateValueAndValidity();
+            (_h = this.getControl('otpValue')) === null || _h === void 0 ? void 0 : _h.reset();
+            (_j = this.getControl('otpValue')) === null || _j === void 0 ? void 0 : _j.clearValidators();
+            (_k = this.getControl('otpValue')) === null || _k === void 0 ? void 0 : _k.updateValueAndValidity();
             return;
         }
-        this.updateTemplate(this.form.get('template').value);
+        this.updateTemplate((_l = this.getControl('template')) === null || _l === void 0 ? void 0 : _l.value);
     };
     GeneralInformationWAComponent.prototype.handleChangeTemplate = function (useExisting) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        (_a = this.getControl('isDownloadVariableXLS')) === null || _a === void 0 ? void 0 : _a.setValue(false);
+        this.variables.clear();
+        this.updateVariableDownloadXLS(false);
         if (useExisting) {
-            this.form.get('template').setValidators(Validators$1.required);
-            this.form.get('text').reset();
-            this.form.get('text').clearValidators();
-            this.form.get('text').updateValueAndValidity();
-            this.form.get('template').updateValueAndValidity();
+            (_b = this.getControl('template')) === null || _b === void 0 ? void 0 : _b.setValidators(Validators$1.required);
+            //this.getControl('text')?.reset();
+            (_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.clearValidators();
+            (_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.setValue('Halo {{1}}, ini adalah kode verifikasi kamu: {{2}}');
+            (_e = this.getControl('text')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
+            (_f = this.getControl('template')) === null || _f === void 0 ? void 0 : _f.updateValueAndValidity();
+            this.variables.push(new FormGroup({
+                paramName: new FormControl('', Validators$1.required),
+            }));
+            this.variables.push(new FormGroup({
+                paramName: new FormControl('', Validators$1.required),
+            }));
         }
         else {
-            this.form.get('template').reset();
-            this.form.get('template').clearValidators();
-            this.form.get('text').setValidators([Validators$1.required, Validators$1.max(1024)]);
-            this.form.get('text').updateValueAndValidity();
-            this.form.get('template').updateValueAndValidity();
+            (_g = this.getControl('template')) === null || _g === void 0 ? void 0 : _g.reset();
+            (_h = this.getControl('template')) === null || _h === void 0 ? void 0 : _h.clearValidators();
+            (_j = this.getControl('text')) === null || _j === void 0 ? void 0 : _j.setValidators([Validators$1.required, Validators$1.max(1024)]);
+            (_k = this.getControl('text')) === null || _k === void 0 ? void 0 : _k.updateValueAndValidity();
+            (_l = this.getControl('template')) === null || _l === void 0 ? void 0 : _l.updateValueAndValidity();
         }
     };
     GeneralInformationWAComponent.prototype.handleChangeFrom = function (value) {
         var isUseExistingTemplate = this.form.value.isUseExistingTemplate;
-        if (isUseExistingTemplate) {
-            this.getTemplateOptionService(value);
+        if (!isUseExistingTemplate)
+            return;
+        this.getTemplateOptionService(value);
+    };
+    Object.defineProperty(GeneralInformationWAComponent.prototype, "variables", {
+        get: function () {
+            return this.getControl('variables');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    GeneralInformationWAComponent.prototype.addVariable = function () {
+        var variableGroup = new FormGroup({
+            paramName: new FormControl('', Validators$1.required),
+        });
+        this.variables.push(variableGroup);
+        var textControl = this.getControl('text');
+        if (textControl) {
+            var currentBody = textControl.value || '';
+            var newSequence = "{{" + this.variables.controls.length + "}}";
+            textControl.setValue((currentBody + " " + newSequence).trim());
+        }
+    };
+    GeneralInformationWAComponent.prototype.removeVariable = function (index) {
+        var _a;
+        this.variables.removeAt(index);
+        if (this.variables.controls.length === 0) {
+            (_a = this.getControl('useXlsx')) === null || _a === void 0 ? void 0 : _a.setValue(false);
+        }
+        var textControl = this.getControl('text');
+        if (textControl && textControl.value) {
+            var targetSequence_1 = index + 1;
+            var currentBody = textControl.value;
+            var removeRegex = new RegExp("\\s*\\{\\{" + targetSequence_1 + "\\}\\}", 'g');
+            currentBody = currentBody.replace(removeRegex, '');
+            currentBody = currentBody.replace(/\{\{(\d+)\}\}/g, function (match, numStr) {
+                var num = parseInt(numStr, 10);
+                if (num > targetSequence_1) {
+                    return "{{" + (num - 1) + "}}";
+                }
+                return match;
+            });
+            textControl.setValue(currentBody.trim());
+        }
+    };
+    GeneralInformationWAComponent.prototype.updateVariableDownloadXLS = function (isChecked) {
+        var variablesArray = this.variables;
+        if (isChecked) {
+            variablesArray.controls.forEach(function (control) {
+                var _a, _b;
+                (_a = control.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
+                (_b = control.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
+            });
         }
         else {
-            this.validateText(value);
+            variablesArray.controls.forEach(function (control) {
+                var _a, _b;
+                (_a = control.get('paramName')) === null || _a === void 0 ? void 0 : _a.setValidators(Validators$1.required);
+                (_b = control.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
+            });
         }
+        this.form.updateValueAndValidity();
     };
     GeneralInformationWAComponent.prototype.ngOnDestroy = function () {
         this.subscribers.forEach(function (each) { return each.unsubscribe(); });
@@ -4784,8 +4904,8 @@ 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",
-            styles: [".asterix--after:after{content:\"*\";color:red}"]
+            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            <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\r\n            class=\"button-parameter-section mt-4\"\r\n            *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n        >\r\n            <h5 class=\"mb-3 font-weight-bold\">Button Parameter</h5>\r\n\r\n            <div formArrayName=\"buttonParams\">\r\n                <div\r\n                    *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n                    [formGroupName]=\"i\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Button {{ i + 1 }}</mat-label>\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            formControlName=\"payload\"\r\n                            [placeholder]=\"'Parameter ' + (i + 1)\"\r\n                            maxlength=\"256\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\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            <div class=\"template-container mt-5\" *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n                <div class=\"add-variable-wrapper\">\r\n                    <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n                        <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"body-content-wrapper\">\r\n                    <h3 class=\"body-content-title\">Body Content</h3>\r\n                    <p class=\"body-content-subtitle\">\r\n                        Input the parameter to show during the preview. You can use predefined\r\n                        variable, drag and drop to text field below\r\n                    </p>\r\n                    <div class=\"predefined-variable-wrapper\">\r\n                        <span class=\"btn-predefined\">\r\n                            <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n                            Unsubscribe Account\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"variables-list\" formArrayName=\"variables\">\r\n                        <div\r\n                            class=\"variable-row d-flex align-items-start mb-3\"\r\n                            *ngFor=\"let variable of variables.controls; let i = index\"\r\n                            [formGroupName]=\"i\"\r\n                        >\r\n                            <div class=\"variable-sequence mr-3\">\r\n                                {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n                            </div>\r\n                            <div class=\"variable-input-wrapper flex-grow-1\">\r\n                                <mat-form-field\r\n                                    appearance=\"outline\"\r\n                                    class=\"w-100 custom-variable-field\"\r\n                                >\r\n                                    <input\r\n                                        matInput\r\n                                        type=\"text\"\r\n                                        formControlName=\"paramName\"\r\n                                        placeholder=\"e.g. Name, Verification code\"\r\n                                    />\r\n                                </mat-form-field>\r\n\r\n                                <ng-container\r\n                                    *ngFor=\"let validation of validationMessages?.paramName\"\r\n                                >\r\n                                    <div\r\n                                        class=\"custom-error-text text-right\"\r\n                                        *ngIf=\"\r\n                                            variable.get('paramName')?.hasError(validation.type) &&\r\n                                            (variable.get('paramName')?.touched ||\r\n                                                variable.get('paramName')?.dirty)\r\n                                        \"\r\n                                    >\r\n                                        <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"btn-delete ml-3\"\r\n                                (click)=\"removeVariable(i)\"\r\n                            >\r\n                                <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-end\">\r\n                <mat-checkbox\r\n                    labelPosition=\"before\"\r\n                    formControlName=\"isDownloadVariableXLS\"\r\n                    (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n                >\r\n                    Using Download XLSX\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            <div\r\n                class=\"template-container mt-5\"\r\n                *ngIf=\"!form.get('isDownloadVariableXLS')?.value\"\r\n                formArrayName=\"variables\"\r\n            >\r\n                <div class=\"font-bold mb-3\">Variables</div>\r\n\r\n                <div class=\"form-group mb-3\" [formGroupName]=\"0\">\r\n                    <mat-form-field\r\n                        appearance=\"outline\"\r\n                        floatLabel=\"always\"\r\n                        class=\"w-100 custom-variable-field\"\r\n                    >\r\n                        <mat-label>{{ '{' + '{' + 1 + '}' + '}' }}</mat-label>\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            formControlName=\"paramName\"\r\n                            placeholder=\"Name\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"form-group mb-3\" [formGroupName]=\"1\">\r\n                    <mat-form-field\r\n                        appearance=\"outline\"\r\n                        floatLabel=\"always\"\r\n                        class=\"w-100 custom-variable-field\"\r\n                    >\r\n                        <mat-label>{{ '{' + '{' + 2 + '}' + '}' }}</mat-label>\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            formControlName=\"paramName\"\r\n                            placeholder=\"Verification code\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-end\">\r\n                <mat-checkbox\r\n                    labelPosition=\"before\"\r\n                    formControlName=\"isDownloadVariableXLS\"\r\n                    (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n                >\r\n                    Using Download XLSX\r\n                </mat-checkbox>\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}.template-container{background-color:#fff;border-radius:.5rem;width:100%;max-width:56rem;box-sizing:border-box}.template-container .variable-wapper{margin-bottom:.5rem;display:flex;align-items:center}.template-container .add-variable-wrapper{display:flex;align-items:center;justify-content:flex-end;margin-bottom:.5rem}.template-container .add-variable-wrapper .btn-add-variable{color:#3b82f6!important}.template-container .body-content-wrapper{background-color:#d1e4fd;border-radius:.5rem;padding:1.5rem;margin-bottom:.5rem}.template-container .body-content-wrapper .body-content-title{color:#1e293b;font-size:1.125rem;font-weight:700;margin:0 0 .5rem}.template-container .body-content-wrapper .body-content-subtitle{color:#6b7280;font-size:.875rem;margin:0 0 1.25rem}.template-container .body-content-wrapper .predefined-variable-wrapper{margin-bottom:1.5rem}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined{display:inline-flex;align-items:center;background-color:#22c55e;color:#fff;font-size:.75rem;font-weight:600;padding:.375rem .75rem;border-radius:9999px;cursor:grab;transition:background-color .2s}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined:hover{background-color:#16a34a}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined .icon-small{font-size:16px;width:16px;height:16px;margin-right:.25rem;line-height:16px}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin-bottom:0!important}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-outline{background-color:#fff!important;border-radius:5px}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-flex{background-color:transparent!important}.template-container .body-content-wrapper .custom-variable-field ::ng-deep input.mat-input-element{margin-top:-8px!important}.template-container .body-content-wrapper .custom-error-text{color:#f44336;margin-top:4px;padding-right:12px}.template-container .body-content-wrapper .variable-sequence{background-color:#fff;border:1px solid #e2e8f0;color:#4b5563;border-radius:5px;font-weight:500;min-width:3.5rem;text-align:center;height:51px;display:flex;align-items:center;justify-content:center;margin-top:4px}.template-container .body-content-wrapper .btn-delete{background:0 0;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;height:51px;margin-top:4px;transition:transform .2s}.template-container .body-content-wrapper .btn-delete:hover{transform:scale(1.1)}.template-container .checkbox-wrapper{display:flex;justify-content:flex-end;margin-top:.5rem}.template-container .checkbox-wrapper .checkbox-xlsx{font-size:.875rem;font-weight:500;color:#374151}"]
         })
     ], GeneralInformationWAComponent);
     return GeneralInformationWAComponent;
@@ -5215,10 +5335,7 @@ var GeneralInformationComponent = /** @class */ (function () {
         var _this = this;
         this.form = new FormGroup({
             id: new FormControl(null),
-            campaignName: new FormControl(null, [
-                Validators$1.required,
-                Validators$1.maxLength(100),
-            ]),
+            campaignName: new FormControl(null, [Validators$1.required, Validators$1.maxLength(100)]),
             medium: new FormControl(null, [Validators$1.required]),
         });
         this.form.valueChanges.subscribe(function () {
@@ -5242,12 +5359,8 @@ var GeneralInformationComponent = /** @class */ (function () {
         if (Object.entries(campaign).length === 0)
             return;
         this.form.get('id').setValue((_b = (_a = campaign) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.id);
-        this.form
-            .get('campaignName')
-            .setValue((_d = (_c = campaign) === null || _c === void 0 ? void 0 : _c.generalInformation) === null || _d === void 0 ? void 0 : _d.form.campaignName);
-        this.form
-            .get('medium')
-            .setValue((_f = (_e = campaign) === null || _e === void 0 ? void 0 : _e.generalInformation) === null || _f === void 0 ? void 0 : _f.form.medium);
+        this.form.get('campaignName').setValue((_d = (_c = campaign) === null || _c === void 0 ? void 0 : _c.generalInformation) === null || _d === void 0 ? void 0 : _d.form.campaignName);
+        this.form.get('medium').setValue((_f = (_e = campaign) === null || _e === void 0 ? void 0 : _e.generalInformation) === null || _f === void 0 ? void 0 : _f.form.medium);
     };
     GeneralInformationComponent.prototype.initDisable = function () {
         if (!this.isReadOnlyMode) {
@@ -5256,6 +5369,7 @@ var GeneralInformationComponent = /** @class */ (function () {
         this.form.disable();
     };
     GeneralInformationComponent.prototype.updateGeneralInformationForm = function (form) {
+        console.log(form, 'form');
         this.generalInformationForm = form;
         this.isShowMore = false;
         this.generalInformation.emit({
@@ -5378,7 +5492,7 @@ var GeneralInformationComponent = /** @class */ (function () {
         Component({
             selector: 'lib-new-campaign-general-information',
             template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"campaign-info\">\r\n        <div class=\"campaign-info-child\">\r\n            <mat-card>\r\n                <mat-card-content>\r\n                    <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\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\">Broadcast Name</mat-label>\r\n\r\n                            <input\r\n                                matInput\r\n                                type=\"text\"\r\n                                formControlName=\"campaignName\"\r\n                                placeholder=\"Enter Broadcast name\"\r\n                            />\r\n                        </mat-form-field>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n                            <mat-hint align=\"start\">\r\n                                {{ form.get('campaignName').value?.length || 0 }}/100\r\n                            </mat-hint>\r\n\r\n                            <div>\r\n                                <mat-error\r\n                                    align=\"end\"\r\n                                    *ngFor=\"let validation of validationMessages.campaignName\"\r\n                                >\r\n                                    <p\r\n                                        class=\"font-12px mb-0\"\r\n                                        *ngIf=\"\r\n                                            form.get('campaignName').touched &&\r\n                                            form.get('campaignName').hasError(validation.type)\r\n                                        \"\r\n                                    >\r\n                                        {{ validation.message }}\r\n                                    </p>\r\n                                </mat-error>\r\n                            </div>\r\n                        </div>\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\">Channel</mat-label>\r\n\r\n                            <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n                                <mat-option\r\n                                    *ngFor=\"let option of channelOption\"\r\n                                    [value]=\"option.value\"\r\n                                >\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.medium\">\r\n                            <p\r\n                                class=\"font-12px mb-0\"\r\n                                *ngIf=\"\r\n                                    form.get('medium').touched &&\r\n                                    form.get('medium').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                    <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n                        <lib-general-information-wa\r\n                            [isTouchedForm]=\"isTouchedWAForm\"\r\n                            [isReadOnlyMode]=\"isReadOnlyMode\"\r\n                            (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n                        ></lib-general-information-wa>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n                        <lib-general-information-line\r\n                            [isTouchedForm]=\"isTouchedSMSForm\"\r\n                            [isReadOnlyMode]=\"isReadOnlyMode\"\r\n                            (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n                        ></lib-general-information-line>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n                        <lib-general-information-sms\r\n                            [isTouchedForm]=\"isTouchedSMSForm\"\r\n                            [isReadOnlyMode]=\"isReadOnlyMode\"\r\n                            (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n                        ></lib-general-information-sms>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n                        <lib-general-information-email\r\n                            [isTouchedForm]=\"isTouchedEmailForm\"\r\n                            [isReadOnlyMode]=\"isReadOnlyMode\"\r\n                            (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n                        ></lib-general-information-email>\r\n                    </ng-container>\r\n                </mat-card-content>\r\n            </mat-card>\r\n        </div>\r\n\r\n        <div class=\"campaign-info-child pl-20px\">\r\n            <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n            <div\r\n                [ngClass]=\"\r\n                    form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n                        ? 'campaign-border-preview'\r\n                        : 'campaign-preview'\r\n                \"\r\n            >\r\n                <section\r\n                    *ngIf=\"\r\n                        form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n                    \"\r\n                >\r\n                    <p\r\n                        *ngIf=\"getBody\"\r\n                        class=\"body my-2\"\r\n                        style=\"max-width: 500px; word-wrap: break-word\"\r\n                        [innerHTML]=\"getBody\"\r\n                    ></p>\r\n                </section>\r\n\r\n                <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n                    <div class=\"header-preview\">\r\n                        <div class=\"heading\">\r\n                            {{ getHeader }}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"body-preview\">\r\n                        <section *ngIf=\"getBody || getMedia || displayFile\">\r\n                            <div\r\n                                class=\"chat\"\r\n                                [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n                            >\r\n                                <img\r\n                                    *ngIf=\"\r\n                                        (getMedia === 'IMAGE' ||\r\n                                            getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n                                        displayFile\r\n                                    \"\r\n                                    style=\"max-width: 100%\"\r\n                                    alt=\"image\"\r\n                                    [src]=\"displayFile\"\r\n                                />\r\n\r\n                                <video\r\n                                    *ngIf=\"\r\n                                        (getMedia === 'VIDEO' ||\r\n                                            getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n                                        displayFile\r\n                                    \"\r\n                                    id=\"video\"\r\n                                    style=\"width: 100%\"\r\n                                    [src]=\"displayFile\"\r\n                                    controls\r\n                                ></video>\r\n\r\n                                <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n                                    <img\r\n                                        style=\"width: 13px; height: 18px\"\r\n                                        alt=\"document\"\r\n                                        src=\"../../../../../assets/images/icon-file.png\"\r\n                                    />\r\n\r\n                                    <span style=\"margin-left: 10px\">Document</span>\r\n                                </div>\r\n\r\n                                <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n                                    <agm-map\r\n                                        style=\"width: 100%; height: 200px\"\r\n                                        [disableDefaultUI]=\"true\"\r\n                                        [latitude]=\"maps.latitude\"\r\n                                        [longitude]=\"maps.longitude\"\r\n                                        [zoom]=\"maps.zoom\"\r\n                                    >\r\n                                        <agm-marker\r\n                                            [latitude]=\"maps.latitude\"\r\n                                            [longitude]=\"maps.longitude\"\r\n                                            [markerDraggable]=\"false\"\r\n                                        ></agm-marker>\r\n                                    </agm-map>\r\n                                    <a\r\n                                        [href]=\"\r\n                                            'https://www.google.com/maps/search/?api=1&query=' +\r\n                                            maps.latitude +\r\n                                            ',' +\r\n                                            maps.longitude\r\n                                        \"\r\n                                    >\r\n                                        https://www.google.com/maps/search/?api=1&query={{\r\n                                            maps.latitude\r\n                                        }},{{ maps.longitude }}\r\n                                    </a>\r\n                                </ng-container>\r\n\r\n                                <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n                                <p\r\n                                    *ngIf=\"getTemplate?.footer\"\r\n                                    class=\"mb-2\"\r\n                                    style=\"color: rgb(160, 160, 160)\"\r\n                                >\r\n                                    {{ getTemplate.footer }}\r\n                                </p>\r\n                            </div>\r\n                        </section>\r\n                        <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n                            <div\r\n                                *ngFor=\"let button of getTemplateButton\"\r\n                                class=\"params-btn pb-0 pointer\"\r\n                            >\r\n                                <p class=\"mb-0\">\r\n                                    {{ button?.text || button?.type }}\r\n                                </p>\r\n                            </div>\r\n\r\n                            <div\r\n                                *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n                                class=\"params-btn pb-0 pointer\"\r\n                                (click)=\"isShowMore = !isShowMore\"\r\n                            >\r\n                                <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n                            </div>\r\n                        </section>\r\n                    </div>\r\n                </section>\r\n\r\n                <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n                    <div class=\"header-preview\">\r\n                        <div class=\"heading\">\r\n                            {{ getHeader }}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"body-preview\">\r\n                        <!-- Template Line Text -->\r\n                        <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n                            <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n                        </section>\r\n\r\n                        <!-- Template Line Button | Confirmation -->\r\n                        <section\r\n                            *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n                            class=\"chat\"\r\n                            [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n                        >\r\n                            <img\r\n                                *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n                                style=\"max-width: 100%\"\r\n                                class=\"mb-1\"\r\n                                [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n                            />\r\n\r\n                            <p\r\n                                *ngIf=\"getTemplateLine?.title\"\r\n                                class=\"font-PoppinsBold mb-1\"\r\n                                [innerHTML]=\"getTemplateLine?.title\"\r\n                            ></p>\r\n\r\n                            <p\r\n                                *ngIf=\"getTemplateLine?.text\"\r\n                                class=\"mb-0\"\r\n                                [innerHTML]=\"getTemplateLine?.text\"\r\n                            ></p>\r\n                        </section>\r\n\r\n                        <!-- Template Line Carousel -->\r\n                        <div\r\n                            *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n                            class=\"d-flex gap-2 overflow-auto\"\r\n                        >\r\n                            <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n                                <section\r\n                                    class=\"chat w-100\"\r\n                                    [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n                                >\r\n                                    <img\r\n                                        *ngIf=\"column.thumbnailImageUrl\"\r\n                                        style=\"max-width: 100%\"\r\n                                        class=\"mb-1\"\r\n                                        [src]=\"column.thumbnailImageUrl\"\r\n                                    />\r\n\r\n                                    <p\r\n                                        *ngIf=\"column.title\"\r\n                                        class=\"font-PoppinsBold mb-1\"\r\n                                        [innerHTML]=\"column.title\"\r\n                                    ></p>\r\n\r\n                                    <p\r\n                                        *ngIf=\"column.text\"\r\n                                        class=\"mb-0\"\r\n                                        [innerHTML]=\"column.text\"\r\n                                    ></p>\r\n                                </section>\r\n                                <section *ngIf=\"column?.actions?.length > 0\">\r\n                                    <div\r\n                                        *ngFor=\"let button of column?.actions\"\r\n                                        class=\"params-btn mw-100 pb-0 pointer\"\r\n                                    >\r\n                                        <p class=\"mb-0\">\r\n                                            {{ button?.text }}\r\n                                        </p>\r\n                                    </div>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Template Line Image Carousel -->\r\n                        <div\r\n                            *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n                            class=\"d-flex gap-2 overflow-auto\"\r\n                        >\r\n                            <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n                                <div class=\"image-container\">\r\n                                    <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n                                    <div class=\"d-flex justify-content-center\">\r\n                                        <p class=\"font-13px overlay-text\">\r\n                                            {{ column.action.label }}\r\n                                        </p>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Button Line -->\r\n                        <section\r\n                            *ngIf=\"\r\n                                getTemplateLine?.type !== 'confirm' &&\r\n                                getTemplateLine?.actions?.length > 0\r\n                            \"\r\n                        >\r\n                            <div\r\n                                *ngFor=\"let button of getTemplateLine?.actions\"\r\n                                class=\"params-btn pb-0 pointer\"\r\n                            >\r\n                                <p class=\"mb-0\">\r\n                                    {{ button?.text }}\r\n                                </p>\r\n                            </div>\r\n                        </section>\r\n                        <section\r\n                            *ngIf=\"\r\n                                getTemplateLine?.type === 'confirm' &&\r\n                                getTemplateLine?.actions?.length > 0\r\n                            \"\r\n                            class=\"d-flex justify-content-around mw-70 bg-white\"\r\n                        >\r\n                            <div\r\n                                *ngFor=\"let button of getTemplateLine?.actions\"\r\n                                class=\"params-btn flex pb-0 pointer\"\r\n                            >\r\n                                <p class=\"mb-0\">\r\n                                    {{ button?.text }}\r\n                                </p>\r\n                            </div>\r\n                        </section>\r\n                        <!-- ./ Button Line -->\r\n                    </div>\r\n                </section>\r\n            </div>\r\n\r\n            <div class=\"d-flex\" style=\"flex-direction: column\">\r\n                <span\r\n                    *ngIf=\"form.get('medium').value === 'SMS'\"\r\n                    style=\"text-align: right; width: 100%\"\r\n                >\r\n                    {{ twilioResultCounter.fulltext }}\r\n                </span>\r\n                <span\r\n                    style=\"text-align: right; width: 100%; color: red\"\r\n                    *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n                >\r\n                    Maximum Segment is 10\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n    <div class=\"text-center my-auto\">\r\n        <img src=\"../../../../../assets/images/spinner.svg\" />\r\n    </div>\r\n</ng-template>\r\n",
-            styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:75%}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:70%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}"]
+            styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:75%}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:70%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}"]
         })
     ], GeneralInformationComponent);
     return GeneralInformationComponent;
@@ -5421,20 +5535,12 @@ var NewNumberBasesComponent = /** @class */ (function () {
         this.table = new TableModel();
         this.table.labels = [
             'select',
-            'Name',
             'Category',
             'No. Of Customer',
             'Created Date',
             'Updated Date',
         ];
-        this.table.columns = [
-            'select',
-            'name',
-            'category',
-            'totalMembers',
-            'createdDate',
-            'updatedDate',
-        ];
+        this.table.columns = ['select', 'name', 'totalMembers', 'createdDate', 'updatedDate'];
     };
     Object.defineProperty(NewNumberBasesComponent.prototype, "getCampaignStorage", {
         get: function () {
@@ -5447,15 +5553,16 @@ var NewNumberBasesComponent = /** @class */ (function () {
     });
     NewNumberBasesComponent.prototype.initEdit = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (Object.entries(this.getCampaignStorage).length === 0)
             return;
-        this.isShowUploadCSV = (_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.isUpload;
+        var genInfoForm = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
+        this.isShowUploadCSV = ((_c = genInfoForm) === null || _c === void 0 ? void 0 : _c.isUpload) || ((_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.isDownloadVariableXLS);
         this.fileSelected = {
-            name: (_e = (_d = this.getCampaignStorage) === null || _d === void 0 ? void 0 : _d.targetAudienceFile) === null || _e === void 0 ? void 0 : _e.name,
-            targetURL: (_g = (_f = this.getCampaignStorage) === null || _f === void 0 ? void 0 : _f.targetAudienceFile) === null || _g === void 0 ? void 0 : _g.targetURL,
+            name: (_f = (_e = this.getCampaignStorage) === null || _e === void 0 ? void 0 : _e.targetAudienceFile) === null || _f === void 0 ? void 0 : _f.name,
+            targetURL: (_h = (_g = this.getCampaignStorage) === null || _g === void 0 ? void 0 : _g.targetAudienceFile) === null || _h === void 0 ? void 0 : _h.targetURL,
         };
-        (_h = this.table.dataSource.data) === null || _h === void 0 ? void 0 : _h.forEach(function (each) {
+        (_j = this.table.dataSource.data) === null || _j === void 0 ? void 0 : _j.forEach(function (each) {
             var _a, _b;
             if ((_b = (_a = _this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.targetAudience) === null || _b === void 0 ? void 0 : _b.includes(each.id))
                 _this.onChecked(true, each);
@@ -5482,31 +5589,14 @@ var NewNumberBasesComponent = /** @class */ (function () {
             .executeApiRequest(parameterList, '/admin/category', 'GET')
             .subscribe(function (resp) {
             var _a;
-            var customerSegments = JSON.parse(localStorage.getItem('csegment') || '[]');
-            var getDate = function (item) {
-                return new Date(item.updatedDate || item.createdDate).getTime();
-            };
-            var data = (((_a = resp) === null || _a === void 0 ? void 0 : _a.data) || []).map(function (item) { return (__assign(__assign({}, item), { category: 'Customer Group' })); });
-            if (_this.categoryParam.pageNo === 1) {
-                customerSegments
-                    .sort(function (a, b) { return getDate(b) - getDate(a); })
-                    .forEach(function (segment) {
-                    var index = data.findIndex(function (group) { return getDate(group) < getDate(segment); });
-                    if (index === -1) {
-                        return;
-                    }
-                    var groupId = data[index].id;
-                    data[index] = __assign(__assign({}, segment), { id: groupId, totalMembers: segment.customerCount, updatedDate: segment.updatedDate || segment.createdDate, category: 'Customer Segment' });
-                });
-            }
             if (_this.isReadOnlyMode) {
-                _this.table.dataSource.data = data.filter(function (each) { var _a, _b; return (_b = (_a = _this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.targetAudience) === null || _b === void 0 ? void 0 : _b.includes(each.id); });
+                _this.table.dataSource.data = (_a = resp.data) === null || _a === void 0 ? void 0 : _a.filter(function (each) { var _a, _b; return (_b = (_a = _this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.targetAudience) === null || _b === void 0 ? void 0 : _b.includes(each.id); });
                 _this.categorySelected = _this.table.dataSource.data;
                 _this.isLoading = false;
                 _this.initEdit();
                 return;
             }
-            _this.table.dataSource.data = data;
+            _this.table.dataSource.data = resp.data;
             _this.table.setNextPage(resp.haveNext);
             _this.isLoading = false;
             _this.initEdit();
@@ -5641,13 +5731,31 @@ var NewNumberBasesComponent = /** @class */ (function () {
         return found ? true : false;
     };
     NewNumberBasesComponent.prototype.onDownloadSampleService = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var genInfoForm = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
+        var isNeedSave = (_c = genInfoForm) === null || _c === void 0 ? void 0 : _c.isNeedSave;
         var parameterList = [
-            this.initParam('platform', (_d = (_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.template) === null || _d === void 0 ? void 0 : _d.platform, 'string'),
-            this.initParam('templateName', (_h = (_g = (_f = (_e = this.getCampaignStorage) === null || _e === void 0 ? void 0 : _e.generalInformation) === null || _f === void 0 ? void 0 : _f.form) === null || _g === void 0 ? void 0 : _g.template) === null || _h === void 0 ? void 0 : _h.name, 'string'),
-            this.initParam('templateLang', (_m = (_l = (_k = (_j = this.getCampaignStorage) === null || _j === void 0 ? void 0 : _j.generalInformation) === null || _k === void 0 ? void 0 : _k.form) === null || _l === void 0 ? void 0 : _l.template) === null || _m === void 0 ? void 0 : _m.lang, 'string'),
-            this.initParam('category', (_p = (_o = this.categorySelected) === null || _o === void 0 ? void 0 : _o.map(function (t) { return t.id; }).join(), (_p !== null && _p !== void 0 ? _p : [])), 'string'),
+            this.initParam('platform', ((_e = (_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.platform) || 'WA', 'string'),
         ];
+        if (isNeedSave) {
+            // SKENARIO 1: USE EXISTING / TEMPLATE SUDAH DISAVE
+            parameterList.push(this.initParam('templateName', (_g = (_f = genInfoForm) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.name, 'string'), this.initParam('templateLang', (_j = (_h = genInfoForm) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.lang, 'string'), this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map(function (t) { return t.id; }).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'));
+        }
+        else {
+            // SKENARIO 2: CREATE NEW (Belum disave, butuh text & examples)
+            var safeBodyText = encodeURIComponent(((_m = genInfoForm) === null || _m === void 0 ? void 0 : _m.text) || '');
+            parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
+            var variables = (_o = genInfoForm) === null || _o === void 0 ? void 0 : _o.variables;
+            if (variables && Array.isArray(variables) && variables.length > 0) {
+                var bodyExamplesString = variables.map(function (v) { return v.paramName; }).join(',');
+                var safeBodyExamples = encodeURIComponent(bodyExamplesString);
+                parameterList.push(this.initParam('bodyExamples', safeBodyExamples, 'string'));
+            }
+            if ((_r = (_q = (_p = genInfoForm) === null || _p === void 0 ? void 0 : _p.template) === null || _q === void 0 ? void 0 : _q.header) === null || _r === void 0 ? void 0 : _r.text) {
+                var safeHeaderText = encodeURIComponent(genInfoForm.template.header.text);
+                parameterList.push(this.initParam('headerText', safeHeaderText, 'string'));
+            }
+        }
         var subs = this.apiAdapterService
             .executeApiRequest(parameterList, '/message/bulkupload/template', 'GET', true)
             .subscribe(function (resp) {
@@ -5744,7 +5852,7 @@ var NewNumberBasesComponent = /** @class */ (function () {
     NewNumberBasesComponent = __decorate([
         Component({
             selector: 'lib-new-number-bases',
-            template: "<h3 class=\"font-20px font-PoppinsBold asterix--after mb-2\" [ngClass]=\"{ 'mb-3': !isReadOnlyMode }\">\r\n    Target Audience\r\n</h3>\r\n<div *ngIf=\"!isReadOnlyMode\" class=\"d-flex justify-content-between\">\r\n    <p>Select your target audience (category)</p>\r\n    <div *ngIf=\"isShowUploadCSV\">\r\n        <button\r\n            mat-stroked-button\r\n            color=\"primary-telin\"\r\n            class=\"telin-font-color mr-2\"\r\n            (click)=\"onDownloadSampleService()\"\r\n        >\r\n            Download Template\r\n        </button>\r\n\r\n        <button\r\n            mat-flat-button\r\n            color=\"primary-telin-blue2\"\r\n            [disabled]=\"isUpload\"\r\n            (click)=\"filePicker.click()\"\r\n        >\r\n            Upload XLSX\r\n        </button>\r\n\r\n        <input\r\n            #filePicker\r\n            hidden\r\n            type=\"file\"\r\n            [accept]=\"extFileAccepted.join()\"\r\n            (change)=\"onFileSelected($event)\"\r\n        />\r\n    </div>\r\n</div>\r\n\r\n<p\r\n    *ngIf=\"\r\n        !isReadOnlyMode &&\r\n        (getCampaignStorage?.targetAudienceFile?.name ||\r\n            getCampaignStorage?.targetAudienceFile?.targetURL)\r\n    \"\r\n    class=\"text-right my-2\"\r\n>\r\n    <span class=\"fw-bold\">Filename:</span>\r\n    {{\r\n        getCampaignStorage?.targetAudienceFile?.name ||\r\n            getCampaignStorage?.targetAudienceFile?.targetURL\r\n    }}\r\n</p>\r\n\r\n<div *ngIf=\"!isReadOnlyMode || !fileSelected?.name\" class=\"row align-items-center mb-3\">\r\n    <div class=\"col-md-4 col-12\">\r\n        <lib-search\r\n            *ngIf=\"!isReadOnlyMode\"\r\n            [placeholder]=\"'Search'\"\r\n            (searchRes)=\"updateSearch($event)\"\r\n        ></lib-search>\r\n    </div>\r\n    <div class=\"col-md-8 col-12\">\r\n        <p class=\"text-right mb-0\">\r\n            Category Selected:\r\n            <span class=\"font-bold\">\r\n                {{ categorySelected?.length || 0 }}\r\n            </span>\r\n        </p>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isReadOnlyMode || !fileSelected?.name; else isShowFile\">\r\n    <table\r\n        *ngIf=\"!isLoading; else isSpinner\"\r\n        mat-table\r\n        matSort\r\n        matSortDisableClear\r\n        class=\"table w-100 mb-2\"\r\n        [dataSource]=\"table.dataSource\"\r\n        (matSortChange)=\"sort()\"\r\n    >\r\n        <ng-container matColumnDef=\"select\">\r\n            <th *matHeaderCellDef>\r\n                <ng-container *ngIf=\"!isReadOnlyMode\">\r\n                    <mat-checkbox\r\n                        [aria-label]=\"checkboxLabel()\"\r\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                        (change)=\"masterToggle($event.checked)\"\r\n                    >\r\n                    </mat-checkbox>\r\n                </ng-container>\r\n            </th>\r\n            <td *matCellDef=\"let row\">\r\n                <ng-container *ngIf=\"!isReadOnlyMode\">\r\n                    <mat-checkbox\r\n                        [aria-label]=\"checkboxLabel(row)\"\r\n                        [checked]=\"isChecked(row)\"\r\n                        (change)=\"onChecked($event.checked, row)\"\r\n                    >\r\n                    </mat-checkbox>\r\n                </ng-container>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let index of [1, 2, 3, 4, 5]\" [matColumnDef]=\"table.columns[index]\">\r\n            <th *matHeaderCellDef [mat-sort-header]=\"table.columns[index]\">\r\n                {{ table.labels[index] }}\r\n            </th>\r\n\r\n            <td *matCellDef=\"let row\">\r\n                <ng-container *ngIf=\"[1, 2, 3].includes(index)\">\r\n                    {{ row[table.columns[index]] }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"[4, 5].includes(index)\">\r\n                    {{ row[table.columns[index]] | date: ' d MMM y' }}\r\n                </ng-container>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"no-content\">\r\n            <th class=\"text-center\" *matHeaderCellDef [colSpan]=\"table.columns.length\">\r\n                Data Not Available\r\n            </th>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"table.columns\"></tr>\r\n\r\n        <tr\r\n            mat-header-row\r\n            class=\"no-content\"\r\n            *matHeaderRowDef=\"['no-content']\"\r\n            [style.display]=\"table.dataSource?.data?.length === 0 ? 'table-row' : 'none'\"\r\n        ></tr>\r\n\r\n        <tr mat-row *matRowDef=\"let row; columns: table.columns\"></tr>\r\n    </table>\r\n\r\n    <mat-paginator\r\n        *ngIf=\"!isReadOnlyMode\"\r\n        class=\"campaign-paginator\"\r\n        [length]=\"table.totalData\"\r\n        [pageSize]=\"table.pageSize\"\r\n        [pageIndex]=\"table.getPageIndex()\"\r\n        [pageSizeOptions]=\"[10, 25, 50, 100, 250]\"\r\n        (page)=\"updatePage($event)\"\r\n    ></mat-paginator>\r\n\r\n    <ng-template #isSpinner>\r\n        <div class=\"text-center my-auto\">\r\n            <img src=\"../../../../../assets/images/spinner.svg\" />\r\n        </div>\r\n    </ng-template>\r\n</ng-container>\r\n\r\n<ng-template #isShowFile>\r\n    <p class=\"font-PoppinsBold font-14px\">\r\n        File: <a [href]=\"fileSelected?.targetURL\" target=\"_blank\">{{ fileSelected?.name }}</a>\r\n    </p>\r\n</ng-template>\r\n",
+            template: "<h3 class=\"font-20px font-PoppinsBold asterix--after mb-2\"\r\n\t[ngClass]=\"{ 'mb-3': !isReadOnlyMode }\">\r\n\tTarget Audience\r\n</h3>\r\n<div *ngIf=\"!isReadOnlyMode\"\r\n\tclass=\"d-flex justify-content-between\">\r\n\t<p>Select your target audience (category)</p>\r\n\t<div *ngIf=\"isShowUploadCSV\">\r\n\t\t<button mat-stroked-button\r\n\t\t\tcolor=\"primary-telin\"\r\n\t\t\tclass=\"telin-font-color mr-2\"\r\n\t\t\t(click)=\"onDownloadSampleService()\">\r\n\t\t\tDownload Template\r\n\t\t</button>\r\n\r\n\t\t<button mat-flat-button\r\n\t\t\tcolor=\"primary-telin-blue2\"\r\n\t\t\t[disabled]=\"isUpload\"\r\n\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\tUpload XLSX\r\n\t\t</button>\r\n\r\n\t\t<input #filePicker\r\n\t\t\thidden\r\n\t\t\ttype=\"file\"\r\n\t\t\t[accept]=\"extFileAccepted.join()\"\r\n\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t</div>\r\n</div>\r\n\r\n<p *ngIf=\"!isReadOnlyMode && (getCampaignStorage?.targetAudienceFile?.name ||\r\ngetCampaignStorage?.targetAudienceFile?.targetURL)\"\r\n\tclass=\"text-right my-2\">\r\n\t<span class=\"fw-bold\">Filename:</span> {{ getCampaignStorage?.targetAudienceFile?.name ||\r\n\tgetCampaignStorage?.targetAudienceFile?.targetURL }}\r\n</p>\r\n\r\n<div *ngIf=\"!isReadOnlyMode || !fileSelected?.name\"\r\n\tclass=\"row align-items-center mb-3\">\r\n\t<div class=\"col-md-4 col-12\">\r\n\t\t<lib-search *ngIf=\"!isReadOnlyMode\"\r\n\t\t\t[placeholder]=\"'Search'\"\r\n\t\t\t(searchRes)=\"updateSearch($event)\"></lib-search>\r\n\t</div>\r\n\t<div class=\"col-md-8 col-12\">\r\n\t\t<p class=\"text-right mb-0\">\r\n\t\t\tCategory Selected:\r\n\t\t\t<span class=\"font-bold\">\r\n\t\t\t\t{{ categorySelected?.length || 0 }}\r\n\t\t\t</span>\r\n\t\t</p>\r\n\t</div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isReadOnlyMode || !fileSelected?.name; else isShowFile\">\r\n\t<table *ngIf=\"!isLoading; else isSpinner\"\r\n\t\tmat-table\r\n\t\tmatSort\r\n\t\tmatSortDisableClear\r\n\t\tclass=\"table w-100 mb-2\"\r\n\t\t[dataSource]=\"table.dataSource\"\r\n\t\t(matSortChange)=\"sort()\">\r\n\t\t<ng-container matColumnDef=\"select\">\r\n\t\t\t<th *matHeaderCellDef>\r\n\t\t\t\t<ng-container *ngIf=\"!isReadOnlyMode\">\r\n\t\t\t\t\t<mat-checkbox [aria-label]=\"checkboxLabel()\"\r\n\t\t\t\t\t\t[checked]=\"selection.hasValue() && isAllSelected()\"\r\n\t\t\t\t\t\t[indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n\t\t\t\t\t\t(change)=\"masterToggle($event.checked)\">\r\n\t\t\t\t\t</mat-checkbox>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</th>\r\n\t\t\t<td *matCellDef=\"let row\">\r\n\t\t\t\t<ng-container *ngIf=\"!isReadOnlyMode\">\r\n\t\t\t\t\t<mat-checkbox [aria-label]=\"checkboxLabel(row)\"\r\n\t\t\t\t\t\t[checked]=\"isChecked(row)\"\r\n\t\t\t\t\t\t(change)=\"onChecked($event.checked, row)\">\r\n\t\t\t\t\t</mat-checkbox>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngFor=\"let index of [1, 2, 3, 4]\"\r\n\t\t\t[matColumnDef]=\"table.columns[index]\">\r\n\t\t\t<th *matHeaderCellDef\r\n\t\t\t\t[mat-sort-header]=\"table.columns[index]\">\r\n\t\t\t\t{{ table.labels[index] }}\r\n\t\t\t</th>\r\n\r\n\t\t\t<td *matCellDef=\"let row\">\r\n\t\t\t\t<ng-container *ngIf=\"[1, 2].includes(index)\">\r\n\t\t\t\t\t{{ row[table.columns[index]] }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"[3, 4].includes(index)\">\r\n\t\t\t\t\t{{ row[table.columns[index]] | date : ' d MMM y' }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container matColumnDef=\"no-content\">\r\n\t\t\t<th class=\"text-center\"\r\n\t\t\t\t*matHeaderCellDef\r\n\t\t\t\t[colSpan]=\"table.columns.length\">\r\n\t\t\t\tData Not Available\r\n\t\t\t</th>\r\n\t\t</ng-container>\r\n\r\n\t\t<tr mat-header-row\r\n\t\t\t*matHeaderRowDef=\"table.columns\"></tr>\r\n\r\n\t\t<tr mat-header-row\r\n\t\t\tclass=\"no-content\"\r\n\t\t\t*matHeaderRowDef=\"['no-content']\"\r\n\t\t\t[style.display]=\"table.dataSource?.data?.length === 0 ? 'table-row' : 'none'\"></tr>\r\n\r\n\t\t<tr mat-row\r\n\t\t\t*matRowDef=\"let row; columns: table.columns\"></tr>\r\n\t</table>\r\n\r\n\t<mat-paginator *ngIf=\"!isReadOnlyMode\"\r\n\t\tclass=\"campaign-paginator\"\r\n\t\t[length]=\"table.totalData\"\r\n\t\t[pageSize]=\"table.pageSize\"\r\n\t\t[pageIndex]=\"table.getPageIndex()\"\r\n\t\t[pageSizeOptions]=\"[10, 25, 50, 100, 250]\"\r\n\t\t(page)=\"updatePage($event)\"></mat-paginator>\r\n\r\n\t<ng-template #isSpinner>\r\n\t\t<div class=\"text-center my-auto\">\r\n\t\t\t<img src=\"../../../../../assets/images/spinner.svg\" />\r\n\t\t</div>\r\n\t</ng-template>\r\n</ng-container>\r\n\r\n<ng-template #isShowFile>\r\n\t<p class=\"font-PoppinsBold font-14px\">\r\n\t\tFile: <a [href]=\"fileSelected?.targetURL\"\r\n\t\t\ttarget=\"_blank\">{{ fileSelected?.name }}</a>\r\n\t</p>\r\n</ng-template>\r\n",
             styles: ["::ng-deep .mat-paginator.campaign-paginator .mat-paginator-container{align-items:normal}::ng-deep .mat-paginator.campaign-paginator .mat-tab-body{background-color:#fff}::ng-deep .mat-paginator.campaign-paginator .mat-form-field-underline{bottom:0}"]
         })
     ], NewNumberBasesComponent);
@@ -6023,5 +6131,5 @@ var ConfirmationModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardModule, SearchModule, WizardComponent as ɵa, NewCampaignComponent as ɵb, GeneralInformationComponent as ɵc, SchedulerComponent as ɵd, SummaryComponent as ɵe, NewNumberBasesComponent as ɵf, GeneralInformationLineComponent as ɵg, GeneralInformationWAComponent as ɵh, GeneralInformationSMSComponent as ɵi, GeneralInformationEmailComponent as ɵj, PendingApprovalDialogViewComponent as ɵk, FailoverMechanismComponent as ɵl, DashboardComponent as ɵm, ApiAdapterServiceService as ɵn, SearchComponent as ɵo, ViewingListOfCampaignTableComponent as ɵp, FilterInListOfCampaignComponent as ɵq, CampaignIndexComponent as ɵr, ApiAdapterServiceService as ɵs, MatSelectInfiniteScrollDirective as ɵt, InputNumericModule as ɵu, InputNumericComponent as ɵv, CustomPaginator as ɵw, ConfirmationComponent as ɵx, ConfirmationModel as ɵy, SharedServicesService as ɵz };
+export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexComponent, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardComponent, DashboardModule, MatSelectInfiniteScrollDirective, SearchComponent, SearchModule, SummaryComponent, WizardComponent as ɵa, NewCampaignComponent as ɵb, GeneralInformationComponent as ɵc, SchedulerComponent as ɵd, SummaryComponent as ɵe, NewNumberBasesComponent as ɵf, GeneralInformationLineComponent as ɵg, GeneralInformationWAComponent as ɵh, GeneralInformationSMSComponent as ɵi, GeneralInformationEmailComponent as ɵj, PendingApprovalDialogViewComponent as ɵk, FailoverMechanismComponent as ɵl, ApiAdapterServiceService as ɵm, ViewingListOfCampaignTableComponent as ɵn, FilterInListOfCampaignComponent as ɵo, ApiAdapterServiceService as ɵp, MatSelectInfiniteScrollDirective as ɵq, InputNumericModule as ɵr, InputNumericComponent as ɵs, CustomPaginator as ɵt, ConfirmationComponent as ɵu, ConfirmationModel as ɵv, SharedServicesService as ɵw };
 //# sourceMappingURL=adlfe-campaign-management-library.js.map