@adlfe/campaign-management-library 2.12.0 → 2.13.2

package/bundles/adlfe-campaign-management-library.umd.js

@@ -446,13 +446,19 @@
         __decorate([
             core.Input()
         ], InputNumericComponent.prototype, "maxLength", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "suffix", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "hint", void 0);
         __decorate([
             core.ContentChild('suffix')
         ], InputNumericComponent.prototype, "suffixTmpl", void 0);
         InputNumericComponent = InputNumericComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
@@ -1613,6 +1619,7 @@
         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' }],
@@ -1906,7 +1913,7 @@
             core.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}"]
             }),
             core.Injectable({
                 providedIn: 'root',
@@ -2679,14 +2686,12 @@
         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;
             }
@@ -2718,6 +2723,12 @@
                     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,
@@ -2725,12 +2736,21 @@
                     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 = {
@@ -2739,6 +2759,7 @@
                         header: null,
                         data: [source.otpValue],
                         button: [[source.otpValue]],
+                        buttonParams: [],
                     };
                 if (source.template.ID)
                     this.template.id = source.template.ID;
@@ -2746,11 +2767,25 @@
             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;
@@ -3022,14 +3057,23 @@
             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;
@@ -4253,7 +4297,6 @@
                 { label: 'Create New', value: false },
                 { label: 'Use existing template', value: true },
             ];
-            this.isUtility = true;
             this.isCheckUtility = false;
             this.updateGeneralInformationForm = new core.EventEmitter();
         }
@@ -4289,14 +4332,12 @@
             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
@@ -4328,6 +4369,10 @@
                 isUseExistingTemplate: new forms.FormControl(false),
                 isNeedSave: new forms.FormControl(false),
                 ttl: new forms.FormControl(null),
+                isDownloadVariableXLS: new forms.FormControl(false),
+                variables: new forms.FormArray([]),
+                useXlsx: new forms.FormControl(false),
+                buttonParams: new forms.FormArray([]),
             });
             this.form.valueChanges.subscribe(function () {
                 setTimeout(function () {
@@ -4342,133 +4387,152 @@
             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 forms.FormGroup({
+                        paramName: new forms.FormControl({ value: item.paramName || '', disabled: _this.isReadOnlyMode }, forms.Validators.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(forms.Validators.required);
+            (_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.setValidators(forms.Validators.required);
             if (this.getIsText) {
-                this.form.get('from').setValidators(forms.Validators.required);
-                this.form.get('text').setValidators(forms.Validators.required);
-                this.form.get('from').updateValueAndValidity();
-                this.form.get('text').updateValueAndValidity();
+                (_b = this.getControl('from')) === null || _b === void 0 ? void 0 : _b.setValidators(forms.Validators.required);
+                (_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.setValidators(forms.Validators.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(forms.Validators.required);
-                this.form.get('from').setValidators(forms.Validators.required);
-                this.form.get('fileName').setValidators(forms.Validators.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(forms.Validators.required);
+                (_g = this.getControl('from')) === null || _g === void 0 ? void 0 : _g.setValidators(forms.Validators.required);
+                (_h = this.getControl('fileName')) === null || _h === void 0 ? void 0 : _h.setValidators(forms.Validators.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(forms.Validators.required);
-                this.form.get('template').setValidators(forms.Validators.required);
-                this.form.get('paramHeader').setValidators(forms.Validators.required);
-                this.form.get('paramBody').setValidators(forms.Validators.required);
-                this.form.get('paramButton').setValidators(forms.Validators.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(forms.Validators.required);
+                (_o = this.getControl('template')) === null || _o === void 0 ? void 0 : _o.setValidators(forms.Validators.required);
+                (_p = this.getControl('paramHeader')) === null || _p === void 0 ? void 0 : _p.setValidators(forms.Validators.required);
+                (_q = this.getControl('paramBody')) === null || _q === void 0 ? void 0 : _q.setValidators(forms.Validators.required);
+                (_r = this.getControl('paramButton')) === null || _r === void 0 ? void 0 : _r.setValidators(forms.Validators.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(forms.Validators.required);
-                this.form.get('category').setValidators(forms.Validators.required);
-                this.form.get('catalogue').setValidators(forms.Validators.required);
-                this.form.get('product').setValidators(forms.Validators.required);
-                this.form.get('body').setValidators(forms.Validators.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(forms.Validators.required);
+                (_y = this.getControl('category')) === null || _y === void 0 ? void 0 : _y.setValidators(forms.Validators.required);
+                (_z = this.getControl('catalogue')) === null || _z === void 0 ? void 0 : _z.setValidators(forms.Validators.required);
+                (_0 = this.getControl('product')) === null || _0 === void 0 ? void 0 : _0.setValidators(forms.Validators.required);
+                (_1 = this.getControl('body')) === null || _1 === void 0 ? void 0 : _1.setValidators(forms.Validators.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(forms.Validators.required);
-                this.form.get('text').setValidators([forms.Validators.required, forms.Validators.maxLength(1024)]);
-                this.form
-                    .get('ttl')
-                    .setValidators([
+                (_7 = this.getControl('from')) === null || _7 === void 0 ? void 0 : _7.setValidators(forms.Validators.required);
+                (_8 = this.getControl('text')) === null || _8 === void 0 ? void 0 : _8.setValidators([
+                    forms.Validators.required,
+                    forms.Validators.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(forms.Validators.required);
-                this.form.get('text').setValidators(forms.Validators.required);
-                this.form.get('from').updateValueAndValidity();
-                this.form.get('text').updateValueAndValidity();
+                (_14 = this.getControl('from')) === null || _14 === void 0 ? void 0 : _14.setValidators(forms.Validators.required);
+                (_15 = this.getControl('text')) === null || _15 === void 0 ? void 0 : _15.setValidators(forms.Validators.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,
@@ -4492,58 +4556,21 @@
             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(operators.debounceTime(1000), operators.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 http.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'),
@@ -4551,30 +4578,31 @@
                 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);
         };
@@ -4634,45 +4662,45 @@
         };
         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
@@ -4700,6 +4728,7 @@
                 : '';
         };
         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];
@@ -4715,21 +4744,22 @@
                 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(forms.Validators.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(forms.Validators.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',
                 },
@@ -4737,75 +4767,93 @@
             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 forms.FormGroup({
+                        label: new forms.FormControl(btn.text),
+                        payload: new forms.FormControl('', [forms.Validators.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(forms.Validators.required)
-                : this.form.get('paramHeader').clearValidators();
-            ((_v = template.body.examples) === null || _v === void 0 ? void 0 : _v.length) > 0
-                ? this.form.get('paramBody').setValidators(forms.Validators.required)
-                : this.form.get('paramBody').clearValidators();
-            ((_w = template.buttons) === null || _w === void 0 ? void 0 : _w.length) > 0
-                ? this.form.get('paramButton').setValidators(forms.Validators.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(forms.Validators.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(forms.Validators.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(forms.Validators.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(forms.Validators.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(forms.Validators.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) {
@@ -4823,8 +4871,9 @@
                     });
                 }
                 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();
                 }
             });
         };
@@ -4859,13 +4908,14 @@
                 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);
                     });
                 });
             });
@@ -4874,69 +4924,139 @@
             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(forms.Validators.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(forms.Validators.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 forms.FormGroup({
+                    paramName: new forms.FormControl('', forms.Validators.required),
+                }));
+                this.variables.push(new forms.FormGroup({
+                    paramName: new forms.FormControl('', forms.Validators.required),
+                }));
             }
             else {
-                this.form.get('template').reset();
-                this.form.get('template').clearValidators();
-                this.form.get('text').setValidators([forms.Validators.required, forms.Validators.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([forms.Validators.required, forms.Validators.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 forms.FormGroup({
+                paramName: new forms.FormControl('', forms.Validators.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(forms.Validators.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(); });
@@ -4963,8 +5083,8 @@
         GeneralInformationWAComponent = __decorate([
             core.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;
@@ -5394,10 +5514,7 @@
             var _this = this;
             this.form = new forms.FormGroup({
                 id: new forms.FormControl(null),
-                campaignName: new forms.FormControl(null, [
-                    forms.Validators.required,
-                    forms.Validators.maxLength(100),
-                ]),
+                campaignName: new forms.FormControl(null, [forms.Validators.required, forms.Validators.maxLength(100)]),
                 medium: new forms.FormControl(null, [forms.Validators.required]),
             });
             this.form.valueChanges.subscribe(function () {
@@ -5421,12 +5538,8 @@
             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) {
@@ -5435,6 +5548,7 @@
             this.form.disable();
         };
         GeneralInformationComponent.prototype.updateGeneralInformationForm = function (form) {
+            console.log(form, 'form');
             this.generalInformationForm = form;
             this.isShowMore = false;
             this.generalInformation.emit({
@@ -5557,7 +5671,7 @@
             core.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;
@@ -5600,20 +5714,12 @@
             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 () {
@@ -5626,15 +5732,16 @@
         });
         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);
@@ -5661,31 +5768,14 @@
                 .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();
@@ -5820,13 +5910,31 @@
             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) {
@@ -5923,7 +6031,7 @@
         NewNumberBasesComponent = __decorate([
             core.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);
@@ -6196,13 +6304,18 @@
 
     exports.AdlCampaignManagementLibraryInternalComponent = AdlCampaignManagementLibraryInternalComponent;
     exports.AdlCampaignManagementLibraryInternalModule = AdlCampaignManagementLibraryInternalModule;
+    exports.CampaignIndexComponent = CampaignIndexComponent;
     exports.CampaignIndexModule = CampaignIndexModule;
     exports.CampaignManagementComponent = CampaignManagementComponent;
     exports.CampaignManagementModule = CampaignManagementModule;
     exports.ConfirmationComponent = ConfirmationComponent;
     exports.ConfirmationModule = ConfirmationModule;
+    exports.DashboardComponent = DashboardComponent;
     exports.DashboardModule = DashboardModule;
+    exports.MatSelectInfiniteScrollDirective = MatSelectInfiniteScrollDirective;
+    exports.SearchComponent = SearchComponent;
     exports.SearchModule = SearchModule;
+    exports.SummaryComponent = SummaryComponent;
     exports.ɵa = WizardComponent;
     exports.ɵb = NewCampaignComponent;
     exports.ɵc = GeneralInformationComponent;
@@ -6215,20 +6328,17 @@
     exports.ɵj = GeneralInformationEmailComponent;
     exports.ɵk = PendingApprovalDialogViewComponent;
     exports.ɵl = FailoverMechanismComponent;
-    exports.ɵm = DashboardComponent;
-    exports.ɵn = ApiAdapterServiceService;
-    exports.ɵo = SearchComponent;
-    exports.ɵp = ViewingListOfCampaignTableComponent;
-    exports.ɵq = FilterInListOfCampaignComponent;
-    exports.ɵr = CampaignIndexComponent;
-    exports.ɵs = ApiAdapterServiceService;
-    exports.ɵt = MatSelectInfiniteScrollDirective;
-    exports.ɵu = InputNumericModule;
-    exports.ɵv = InputNumericComponent;
-    exports.ɵw = CustomPaginator;
-    exports.ɵx = ConfirmationComponent;
-    exports.ɵy = ConfirmationModel;
-    exports.ɵz = SharedServicesService;
+    exports.ɵm = ApiAdapterServiceService;
+    exports.ɵn = ViewingListOfCampaignTableComponent;
+    exports.ɵo = FilterInListOfCampaignComponent;
+    exports.ɵp = ApiAdapterServiceService;
+    exports.ɵq = MatSelectInfiniteScrollDirective;
+    exports.ɵr = InputNumericModule;
+    exports.ɵs = InputNumericComponent;
+    exports.ɵt = CustomPaginator;
+    exports.ɵu = ConfirmationComponent;
+    exports.ɵv = ConfirmationModel;
+    exports.ɵw = SharedServicesService;
 
     Object.defineProperty(exports, '__esModule', { value: true });