@adlfe/campaign-management-library 2.9.21 → 2.10.0

package/fesm2015/{campaign-management-library.js → adlfe-campaign-management-library.js}

@@ -622,6 +622,8 @@ else if (location.origin.includes('dashboard-staging.neuapix'))
     API_CONST = 'https://api-staging.neuapix.com';
 else if (location.origin.includes('dashboard-qa.adlsandbox'))
     API_CONST = 'https://apibsp-qa.adlsandbox.net';
+else if (location.origin.includes('demo-dev.adlsandbox.net'))
+    API_CONST = 'https://apibsp-dev.adlsandbox.net';
 else
     API_CONST = 'https://apibsp-dev.adlsandbox.net';
 const environment = {
@@ -640,11 +642,9 @@ let ApiAdapterServiceService = class ApiAdapterServiceService {
         let bodyData;
         let parameter;
         let formData = new FormData();
-        (_a = parameterList) === null || _a === void 0 ? void 0 : _a.filter(rt => rt.in !== 'header').forEach(requestType => {
-            parameter = parameterList.find(parameter => parameter.name === requestType.name);
-            if (!parameter &&
-                requestType.required &&
-                requestType.in !== 'header') {
+        (_a = parameterList) === null || _a === void 0 ? void 0 : _a.filter((rt) => rt.in !== 'header').forEach((requestType) => {
+            parameter = parameterList.find((parameter) => parameter.name === requestType.name);
+            if (!parameter && requestType.required && requestType.in !== 'header') {
                 window.alert(`Parameter "${requestType.name}" is required!, Try again with "${requestType.name}"`);
             }
             else if (!parameter && !requestType.required) {
@@ -677,8 +677,7 @@ let ApiAdapterServiceService = class ApiAdapterServiceService {
         });
         this.queryCount = 0;
         url = `${environment.api}${url}`;
-        const appRequest = Object.assign({}, (((_c = (_b = parameterList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.withoutKeyData) ? bodyData
-            : { data: bodyData }));
+        const appRequest = Object.assign({}, (((_c = (_b = parameterList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.withoutKeyData) ? bodyData : { data: bodyData }));
         const headers = new HttpHeaders()
             .set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
             .set('Access-Control-Allow-Origin', '*');
@@ -706,11 +705,14 @@ let ApiAdapterServiceService = class ApiAdapterServiceService {
             return of(err.error);
         }));
     }
+    uploadFileToS3(s3Url, file) {
+        // Kita kirim raw binary/file dengan header Content-Type yang sesuai
+        return this.httpClient.put(s3Url, file, {
+            headers: { 'Content-Type': file.type },
+        });
+    }
     setQuery(name, value, url) {
-        url =
-            this.queryCount === 0
-                ? `${url}?${name}=${value}`
-                : `${url}&${name}=${value}`;
+        url = this.queryCount === 0 ? `${url}?${name}=${value}` : `${url}&${name}=${value}`;
         this.queryCount++;
         return url;
     }
@@ -1495,7 +1497,7 @@ FilterInListOfCampaignComponent = __decorate([
     Component({
         selector: 'lib-filter-in-list-of-campaign',
         template: "<p class=\"font-16px font-bold\">Filter</p>\r\n\r\n<form [formGroup]=\"form\"\r\n\tclass=\"contact-filter\">\r\n\t<div class=\"row\">\r\n\t\t<div class=\"col-md-12 col-12\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-70\">\r\n\t\t\t\t\t<mat-label>Business Name</mat-label>\r\n\r\n\t\t\t\t\t<mat-select placeholder=\"Select Business Name\"\r\n\t\t\t\t\t\tformControlName=\"businessName\">\r\n\t\t\t\t\t\t<mat-option value=\"\"> --- select none --- </mat-option>\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of businessNameOption\"\r\n\t\t\t\t\t\t\t[value]=\"option.id\">\r\n\t\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-12 col-12\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-70\">\r\n\t\t\t\t\t<mat-label>Channel</mat-label>\r\n\r\n\t\t\t\t\t<mat-select placeholder=\"Select the Channel\"\r\n\t\t\t\t\t\tformControlName=\"medium\">\r\n\t\t\t\t\t\t<mat-option value=\"\"> --- select none --- </mat-option>\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of channelOption\"\r\n\t\t\t\t\t\t\t[value]=\"option.value\"\r\n\t\t\t\t\t\t\t(click)=\"getTemplateOptionService()\">\r\n\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-12 col-12\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">Template Name</mat-label>\r\n\r\n\t\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\t\tformControlName=\"templateName\"\r\n\t\t\t\t\t\tplaceholder=\"Select template\"\r\n\t\t\t\t\t\t[complete]=\"isHaveNextTemplateOption === false\"\r\n\t\t\t\t\t\t[compareWith]=\"templateSelectedDisplay\"\r\n\t\t\t\t\t\t(infiniteScroll)=\"getNextTemplateBatch()\">\r\n\t\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t\t[currentValue]=\"form?.get('templateName').value?.name\"\r\n\t\t\t\t\t\t\t\t(searchRes)=\"templateSearch($event)\"></lib-search>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of templateOption\"\r\n\t\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t<mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-12 col-12\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-70\">\r\n\t\t\t\t\t<mat-label>Status</mat-label>\r\n\r\n\t\t\t\t\t<mat-select placeholder=\"Select the Status\"\r\n\t\t\t\t\t\tformControlName=\"status\">\r\n\t\t\t\t\t\t<mat-option value=\"\"> --- select none --- </mat-option>\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of statusOption\"\r\n\t\t\t\t\t\t\t[value]=\"option.value\">\r\n\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-12 col-12\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label> Start Date </mat-label>\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t[matDatepicker]=\"startDatePicker\"\r\n\t\t\t\t\t\tformControlName=\"startDate\"\r\n\t\t\t\t\t\tclass=\"mat-datepicker-input\"\r\n\t\t\t\t\t\t(dateChange)=\"validateBackDate()\" />\r\n\r\n\t\t\t\t\t<mat-datepicker-toggle matSuffix\r\n\t\t\t\t\t\t[for]=\"startDatePicker\"> </mat-datepicker-toggle>\r\n\t\t\t\t\t<mat-icon *ngIf=\"form.get('startDate').value\"\r\n\t\t\t\t\t\tmatDatepickerToggleIcon\r\n\t\t\t\t\t\t(click)=\"clearDate()\">clear</mat-icon>\r\n\t\t\t\t\t<mat-datepicker #startDatePicker></mat-datepicker>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-12 col-12\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label> End Date </mat-label>\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t[min]=\"form.get('startDate').value\"\r\n\t\t\t\t\t\t[matDatepicker]=\"endDatePicker\"\r\n\t\t\t\t\t\tformControlName=\"endDate\"\r\n\t\t\t\t\t\tclass=\"mat-datepicker-input\"\r\n\t\t\t\t\t\t(dateChange)=\"validateBackDate()\" />\r\n\r\n\t\t\t\t\t<mat-datepicker-toggle matSuffix\r\n\t\t\t\t\t\t[for]=\"endDatePicker\"> </mat-datepicker-toggle>\r\n\t\t\t\t\t<mat-icon *ngIf=\"form.get('endDate').value\"\r\n\t\t\t\t\t\tmatDatepickerToggleIcon\r\n\t\t\t\t\t\t(click)=\"clearDate()\">clear</mat-icon>\r\n\t\t\t\t\t<mat-datepicker #endDatePicker></mat-datepicker>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div style=\"display: flex; flex: 1; width: 100%\">\r\n\t\t\t<button mat-stroked-button\r\n\t\t\t\tcolor=\"primary-telin\"\r\n\t\t\t\tclass=\"telin-font-color w-48\"\r\n\t\t\t\tstyle=\"width: 100%; margin-bottom: 10px\"\r\n\t\t\t\t(click)=\"onReset()\">\r\n\t\t\t\tReset\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<div class=\"d-flex justify-content-between\">\r\n\t\t\t<button mat-stroked-button\r\n\t\t\t\tcolor=\"secondary-telin\"\r\n\t\t\t\tclass=\"w-48\"\r\n\t\t\t\t(click)=\"onCancel()\">\r\n\t\t\t\tCancel\r\n\t\t\t</button>\r\n\r\n\t\t\t<button mat-flat-button\r\n\t\t\t\tcolor=\"primary-telin-blue2\"\r\n\t\t\t\tclass=\"w-48\"\r\n\t\t\t\t(click)=\"onApply()\">\r\n\t\t\t\tApply\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</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)}"]
+        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)}"]
     }),
     Injectable({
         providedIn: 'root',
@@ -2252,7 +2254,6 @@ class GeneralInformationWAReqModel {
                 id: source.template.ID,
                 name: source.template.name,
                 lang: source.template.lang,
-                type: source.type,
                 headerUrl: source.targetURL,
                 header: (_g = (_f = source.paramHeader) === null || _f === void 0 ? void 0 : _f.map((t) => t.name), (_g !== null && _g !== void 0 ? _g : [])),
                 data: (_j = (_h = source.paramBody) === null || _h === void 0 ? void 0 : _h.map((t) => t.name), (_j !== null && _j !== void 0 ? _j : [])),
@@ -2267,7 +2268,6 @@ class GeneralInformationWAReqModel {
                     name: source.template.name,
                     lang: source.template.lang,
                     header: null,
-                    type: source.type,
                     data: [source.otpValue],
                     button: [[source.otpValue]],
                 };
@@ -2532,9 +2532,6 @@ let NewCampaignComponent = class NewCampaignComponent {
             return;
         }
         const bodyReq = new GeneralInformationWAReqModel().clone(Object.assign({}, this.generalInformationData));
-        if (bodyReq.type === 'template' && this.generalInformationData.from.platform === 'WA') {
-            bodyReq.template.type = this.generalInformationData.template.category;
-        }
         const parameterList = [
             {
                 name: 'data',
@@ -3872,9 +3869,6 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
         const form = this.initParameter(false, value);
         this.form.get('paramHeader').push(form);
     }
-    closeCard() {
-        this.isHiddencard = true;
-    }
     get getParamBody() {
         return this.form.get('paramBody').controls;
     }
@@ -3985,15 +3979,6 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
         this.isShowParameter = false;
         if (!template)
             return;
-        this.categorytemplate = template.category;
-        this.previousCategorytemplate = template.previousCategory;
-        this.nametemplate = template.name;
-        if (this.previousCategorytemplate && this.categorytemplate) {
-            this.isshowcard = true;
-        }
-        else if (this.previousCategorytemplate === 'undefined' || this.previousCategorytemplate === '') {
-            this.isshowcard = false;
-        }
         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 ||
@@ -4179,8 +4164,8 @@ __decorate([
 GeneralInformationWAComponent = __decorate([
     Component({
         selector: 'lib-general-information-wa',
-        template: "<form autocomplete=\"off\"\r\n\t[formGroup]=\"form\">\r\n\t<div class=\"form-group\">\r\n\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\tfloatLabel=\"always\"\r\n\t\t\tclass=\"w-100\">\r\n\t\t\t<mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n\t\t\t<mat-select placeholder=\"Select message type\"\r\n\t\t\t\tformControlName=\"channel\">\r\n\t\t\t\t<mat-option *ngFor=\"let option of msgTypeWAOption\"\r\n\t\t\t\t\t[value]=\"option.code\"\r\n\t\t\t\t\t(click)=\"formReset()\">\r\n\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t</mat-option>\r\n\t\t\t</mat-select>\r\n\t\t</mat-form-field>\r\n\r\n\t\t<mat-error align=\"end\"\r\n\t\t\t*ngFor=\"let validation of validationMessages.channel\">\r\n\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t*ngIf=\"form.get('channel').touched \r\n\t\t\t\t\t&& form.get('channel').hasError(validation.type)\">\r\n\t\t\t\t{{ validation.message }}\r\n\t\t\t</p>\r\n\t\t</mat-error>\r\n\r\n\t\t<div *ngIf=\"!getIsTemplate\"\r\n\t\t\trole=\"alert\"\r\n\t\t\tclass=\"alert alert-warning d-flex align-items-center\"\r\n\t\t\tstyle=\"margin-top: 16px;border:1px solid rgb(243, 124, 44)\">\r\n\t\t\t<mat-icon style=\"margin-right: 10px !important;\">error_outline</mat-icon>\r\n\t\t\t<div>\r\n\t\t\t\tIf you select this channel, keep in mind that the message might not be delivered to\r\n\t\t\t\tall selected customers. This is because the customer must have had a conversation\r\n\t\t\t\tpreviously with BSP.\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container *ngIf=\"getIsText\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n\t\t\t\t<textarea matInput\r\n\t\t\t\t\trows=\"6\"\r\n\t\t\t\t\tcols=\"50\"\r\n\t\t\t\t\tcdkTextareaAutosize\r\n\t\t\t\t\tcdkAutosizeMinRows=\"2\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"15\"\r\n\t\t\t\t\tformControlName=\"text\"\r\n\t\t\t\t\tplaceholder=\"Enter text\"\r\n\t\t\t\t\t#autosize=\"cdkTextareaAutosize\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.text\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('text').touched \r\n\t\t\t\t\t\t&& form.get('text').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsMedia\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n\t\t\t\t<mat-select placeholder=\"Select media type\"\r\n\t\t\t\t\tformControlName=\"media\"\r\n\t\t\t\t\t(selectionChange)=\"updateMediaType($event.value)\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of mediaTypeOption\"\r\n\t\t\t\t\t\t[value]=\"option.code\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.media\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('media').touched \r\n\t\t\t\t\t\t&& form.get('media').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\"\r\n\t\t\t\t\t\tformControlName=\"fileName\">\r\n\r\n\t\t\t\t\t<button mat-button\r\n\t\t\t\t\t\tmatSuffix\r\n\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\taria-label=\"Choose File\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\t\t\t\t<mat-icon>attach_file</mat-icon>\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t<input #filePicker\r\n\t\t\t\t\t\thidden\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t[accept]=\"extFileAccepted\"\r\n\t\t\t\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t*ngFor=\"let validation of validationMessages.fileName\">\r\n\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t*ngIf=\"form.get('fileName').touched \r\n\t\t\t\t\t\t\t&& form.get('fileName').hasError(validation.type)\">\r\n\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n\t\t\t<div class=\"w-100\">\r\n\t\t\t\t<h4 class=\"asterix--after\">Location</h4>\r\n\r\n\t\t\t\t<div class=\"w-100\">\r\n\t\t\t\t\t<agm-map style=\"width:100%; height:400px;\"\r\n\t\t\t\t\t\t[latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t[disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n\t\t\t\t\t\t[zoom]=\"maps.zoom\">\r\n\t\t\t\t\t\t<agm-marker [latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t[markerDraggable]=\"maps.isDraggable\"\r\n\t\t\t\t\t\t\t(dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n\t\t\t\t\t</agm-map>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Location</mat-label>\r\n\r\n\t\t\t\t\t\t<input #mapSearch\r\n\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tmaxlength=\"100\"\r\n\t\t\t\t\t\t\tplaceholder=\"Enter location here\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsTemplate\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\"\r\n\t\t\t\t\t(selectionChange)=\"getTemplateOptionService($event.value)\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"template\"\r\n\t\t\t\t\tplaceholder=\"Select template\"\r\n\t\t\t\t\t[complete]=\"isHaveNextTemplateOption === false\"\r\n\t\t\t\t\t[compareWith]=\"templateSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextTemplateBatch()\"\r\n\t\t\t\t\t(selectionChange)=\"updateTemplate($event.value)\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('template').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearch($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of templateOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.template\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('template').touched \r\n\t\t\t\t\t\t&& form.get('template').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\r\n\t\t<div *ngIf=\"isHaveTemplateParam\"\r\n\t\t\tclass=\"d-flex justify-content-end\">\r\n\t\t\t<mat-checkbox labelPosition=\"before\"\r\n\t\t\t\tformControlName=\"isUpload\"\r\n\t\t\t\t(change)=\"updateDownloadCSV($event.checked)\">\r\n\t\t\t\tUsing Download XLSX\r\n\t\t\t</mat-checkbox>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"isHaveTemplateParam && isshowcard\" [class.hidden]=\"isHiddencard\">\r\n\t\t\t<div class=\"info-box\">\r\n\t\t\t\t<img src=\"../../../../assets/svg/info-blue.svg\" class=\"info-icon\" alt=\"info icon\">\r\n\t\t\t\t<span class=\"info-text\">\r\n\t\t\t\t\tThis <span class=\"bold\">{{nametemplate}}</span> templates category has been changed by META from  <span class=\"bold\"> {{previousCategorytemplate}} </span> into <span class=\"bold\"> {{categorytemplate}} </span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\r\n\t\t<ng-container *ngIf=\"!form.get('isUpload').value\">\r\n\t\t\t<div *ngIf=\"form.get('template').value?.category === 'AUTHENTICATION'\"\r\n\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label> OTP Value </mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tformControlName=\"otpValue\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\r\n\t\t\t<ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n\t\t\t\t<div *ngFor=\"\r\n\t\t\t\t\tlet param of getParamHeader;\r\n\t\t\t\t\tlet paramHeaderIndex = index\r\n\t\t\t\t\"\r\n\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<ng-container *ngIf=\"getParamBody?.length > 0\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n\t\t\t\t<div *ngFor=\"\r\n\t\t\t\t\t\tlet param of getParamBody;\r\n\t\t\t\t\t\tlet paramBodyIndex = index\r\n\t\t\t\t\t\"\r\n\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<ng-container *ngIf=\"isShowParameter\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n\t\t\t\t<ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n\t\t\t\t\t<ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n\t\t\t\t\t\t<p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n\t\t\t\t\t\t<div *ngFor=\"let param of getParamButton(buttonIndex); let paramIndex = index\"\r\n\t\t\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t\t<mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n\t\t\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"['image','video','document'].includes(form.get('template').value?.header?.type?.toLowerCase())\">\r\n\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\"\r\n\t\t\t\t\t\tformControlName=\"fileName\">\r\n\r\n\t\t\t\t\t<button mat-button\r\n\t\t\t\t\t\tmatSuffix\r\n\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\taria-label=\"Choose File\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\t\t\t\t<mat-icon>attach_file</mat-icon>\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t<input #filePicker\r\n\t\t\t\t\t\thidden\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t[accept]=\"extFileAccepted\"\r\n\t\t\t\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsCatalogue\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n\t\t\t\t<mat-select formControlName=\"category\"\r\n\t\t\t\t\tplaceholder=\"Select category\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of categoryOption\"\r\n\t\t\t\t\t\t[value]=\"option.value\">\r\n\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.category\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('category').touched \r\n\t\t\t\t\t\t&& form.get('category').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n\t\t\t\t<mat-select formControlName=\"catalogue\"\r\n\t\t\t\t\tplaceholder=\"Select catalog\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.catalogue\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('catalogue').touched \r\n\t\t\t\t\t\t&& form.get('catalogue').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"form.get('category').value === 'product'\"\r\n\t\t\tstyle=\"padding: 8px;border-radius: 8px;border: 1px solid #6177c4;\">\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n\t\t\t\t\t<mat-select formControlName=\"product\"\r\n\t\t\t\t\t\tplaceholder=\"Select product\">\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t*ngFor=\"let validation of validationMessages.product\">\r\n\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t*ngIf=\"form.get('product').touched \r\n\t\t\t\t\t\t\t&& form.get('product').hasError(validation.type)\">\r\n\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label>Body</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tmaxlength=\"100\"\r\n\t\t\t\t\t\tformControlName=\"body\"\r\n\t\t\t\t\t\tplaceholder=\"Enter body\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</form>\r\n",
-        styles: [".asterix--after:after{content:\"*\";color:red}.info-box{display:flex;align-items:center;justify-content:space-between;border:2px solid #3b82f6;background-color:#e0ecff;color:#2563eb;padding:10px;border-radius:6px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-family:Arial,sans-serif;font-size:14px;position:relative;margin-bottom:10px;margin-top:10px}.info-icon{margin-right:8px;width:24px;height:auto}.info-text a{text-decoration:none;color:#2563eb;font-weight:700}.info-text a:hover{text-decoration:underline}.bold{font-weight:700}.close-btn{background:0 0;border:none;font-size:16px;font-weight:700;color:#2563eb;cursor:pointer;position:absolute;top:5px;right:0}.close-btn:hover{background:red;color:#fff}.hidden{opacity:0;transform:scale(.9);pointer-events:none}"]
+        template: "<form autocomplete=\"off\"\r\n\t[formGroup]=\"form\">\r\n\t<div class=\"form-group\">\r\n\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\tfloatLabel=\"always\"\r\n\t\t\tclass=\"w-100\">\r\n\t\t\t<mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n\t\t\t<mat-select placeholder=\"Select message type\"\r\n\t\t\t\tformControlName=\"channel\">\r\n\t\t\t\t<mat-option *ngFor=\"let option of msgTypeWAOption\"\r\n\t\t\t\t\t[value]=\"option.code\"\r\n\t\t\t\t\t(click)=\"formReset()\">\r\n\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t</mat-option>\r\n\t\t\t</mat-select>\r\n\t\t</mat-form-field>\r\n\r\n\t\t<mat-error align=\"end\"\r\n\t\t\t*ngFor=\"let validation of validationMessages.channel\">\r\n\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t*ngIf=\"form.get('channel').touched \r\n\t\t\t\t\t&& form.get('channel').hasError(validation.type)\">\r\n\t\t\t\t{{ validation.message }}\r\n\t\t\t</p>\r\n\t\t</mat-error>\r\n\r\n\t\t<div *ngIf=\"!getIsTemplate\"\r\n\t\t\trole=\"alert\"\r\n\t\t\tclass=\"alert alert-warning d-flex align-items-center\"\r\n\t\t\tstyle=\"margin-top: 16px;border:1px solid rgb(243, 124, 44)\">\r\n\t\t\t<mat-icon style=\"margin-right: 10px !important;\">error_outline</mat-icon>\r\n\t\t\t<div>\r\n\t\t\t\tIf you select this channel, keep in mind that the message might not be delivered to\r\n\t\t\t\tall selected customers. This is because the customer must have had a conversation\r\n\t\t\t\tpreviously with BSP.\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container *ngIf=\"getIsText\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n\t\t\t\t<textarea matInput\r\n\t\t\t\t\trows=\"6\"\r\n\t\t\t\t\tcols=\"50\"\r\n\t\t\t\t\tcdkTextareaAutosize\r\n\t\t\t\t\tcdkAutosizeMinRows=\"2\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"15\"\r\n\t\t\t\t\tformControlName=\"text\"\r\n\t\t\t\t\tplaceholder=\"Enter text\"\r\n\t\t\t\t\t#autosize=\"cdkTextareaAutosize\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.text\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('text').touched \r\n\t\t\t\t\t\t&& form.get('text').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsMedia\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n\t\t\t\t<mat-select placeholder=\"Select media type\"\r\n\t\t\t\t\tformControlName=\"media\"\r\n\t\t\t\t\t(selectionChange)=\"updateMediaType($event.value)\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of mediaTypeOption\"\r\n\t\t\t\t\t\t[value]=\"option.code\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.media\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('media').touched \r\n\t\t\t\t\t\t&& form.get('media').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\"\r\n\t\t\t\t\t\tformControlName=\"fileName\">\r\n\r\n\t\t\t\t\t<button mat-button\r\n\t\t\t\t\t\tmatSuffix\r\n\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\taria-label=\"Choose File\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\t\t\t\t<mat-icon>attach_file</mat-icon>\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t<input #filePicker\r\n\t\t\t\t\t\thidden\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t[accept]=\"extFileAccepted\"\r\n\t\t\t\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t*ngFor=\"let validation of validationMessages.fileName\">\r\n\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t*ngIf=\"form.get('fileName').touched \r\n\t\t\t\t\t\t\t&& form.get('fileName').hasError(validation.type)\">\r\n\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n\t\t\t<div class=\"w-100\">\r\n\t\t\t\t<h4 class=\"asterix--after\">Location</h4>\r\n\r\n\t\t\t\t<div class=\"w-100\">\r\n\t\t\t\t\t<agm-map style=\"width:100%; height:400px;\"\r\n\t\t\t\t\t\t[latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t[disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n\t\t\t\t\t\t[zoom]=\"maps.zoom\">\r\n\t\t\t\t\t\t<agm-marker [latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t[markerDraggable]=\"maps.isDraggable\"\r\n\t\t\t\t\t\t\t(dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n\t\t\t\t\t</agm-map>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Location</mat-label>\r\n\r\n\t\t\t\t\t\t<input #mapSearch\r\n\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tmaxlength=\"100\"\r\n\t\t\t\t\t\t\tplaceholder=\"Enter location here\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsTemplate\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\"\r\n\t\t\t\t\t(selectionChange)=\"getTemplateOptionService($event.value)\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"template\"\r\n\t\t\t\t\tplaceholder=\"Select template\"\r\n\t\t\t\t\t[complete]=\"isHaveNextTemplateOption === false\"\r\n\t\t\t\t\t[compareWith]=\"templateSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextTemplateBatch()\"\r\n\t\t\t\t\t(selectionChange)=\"updateTemplate($event.value)\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('template').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearch($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of templateOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.template\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('template').touched \r\n\t\t\t\t\t\t&& form.get('template').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"isHaveTemplateParam\"\r\n\t\t\tclass=\"d-flex justify-content-end\">\r\n\t\t\t<mat-checkbox labelPosition=\"before\"\r\n\t\t\t\tformControlName=\"isUpload\"\r\n\t\t\t\t(change)=\"updateDownloadCSV($event.checked)\">\r\n\t\t\t\tUsing Download XLSX\r\n\t\t\t</mat-checkbox>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"!form.get('isUpload').value\">\r\n\t\t\t<div *ngIf=\"form.get('template').value?.category === 'AUTHENTICATION'\"\r\n\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label> OTP Value </mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tformControlName=\"otpValue\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\r\n\t\t\t<ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n\t\t\t\t<div *ngFor=\"\r\n\t\t\t\t\tlet param of getParamHeader;\r\n\t\t\t\t\tlet paramHeaderIndex = index\r\n\t\t\t\t\"\r\n\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<ng-container *ngIf=\"getParamBody?.length > 0\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n\t\t\t\t<div *ngFor=\"\r\n\t\t\t\t\t\tlet param of getParamBody;\r\n\t\t\t\t\t\tlet paramBodyIndex = index\r\n\t\t\t\t\t\"\r\n\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<ng-container *ngIf=\"isShowParameter\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n\t\t\t\t<ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n\t\t\t\t\t<ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n\t\t\t\t\t\t<p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n\t\t\t\t\t\t<div *ngFor=\"let param of getParamButton(buttonIndex); let paramIndex = index\"\r\n\t\t\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t\t<mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n\t\t\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"['image','video','document'].includes(form.get('template').value?.header?.type?.toLowerCase())\">\r\n\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\"\r\n\t\t\t\t\t\tformControlName=\"fileName\">\r\n\r\n\t\t\t\t\t<button mat-button\r\n\t\t\t\t\t\tmatSuffix\r\n\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\taria-label=\"Choose File\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\t\t\t\t<mat-icon>attach_file</mat-icon>\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t<input #filePicker\r\n\t\t\t\t\t\thidden\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t[accept]=\"extFileAccepted\"\r\n\t\t\t\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsCatalogue\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n\t\t\t\t<mat-select formControlName=\"category\"\r\n\t\t\t\t\tplaceholder=\"Select category\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of categoryOption\"\r\n\t\t\t\t\t\t[value]=\"option.value\">\r\n\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.category\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('category').touched \r\n\t\t\t\t\t\t&& form.get('category').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n\t\t\t\t<mat-select formControlName=\"catalogue\"\r\n\t\t\t\t\tplaceholder=\"Select catalog\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.catalogue\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('catalogue').touched \r\n\t\t\t\t\t\t&& form.get('catalogue').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"form.get('category').value === 'product'\"\r\n\t\t\tstyle=\"padding: 8px;border-radius: 8px;border: 1px solid #6177c4;\">\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n\t\t\t\t\t<mat-select formControlName=\"product\"\r\n\t\t\t\t\t\tplaceholder=\"Select product\">\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t*ngFor=\"let validation of validationMessages.product\">\r\n\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t*ngIf=\"form.get('product').touched \r\n\t\t\t\t\t\t\t&& form.get('product').hasError(validation.type)\">\r\n\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label>Body</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tmaxlength=\"100\"\r\n\t\t\t\t\t\tformControlName=\"body\"\r\n\t\t\t\t\t\tplaceholder=\"Enter body\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</form>\r\n",
+        styles: [".asterix--after:after{content:\"*\";color:red}"]
     })
 ], GeneralInformationWAComponent);
 
@@ -4704,7 +4689,7 @@ GeneralInformationComponent = __decorate([
     Component({
         selector: 'lib-new-campaign-general-information',
         template: "<form autocomplete=\"off\"\r\n\t[formGroup]=\"form\">\r\n\t<div class=\"campaign-info\">\r\n\t\t<div class=\"campaign-info-child\">\r\n\t\t\t<mat-card>\r\n\t\t\t\t<mat-card-content>\r\n\t\t\t\t\t<h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t<mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n\t\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\tformControlName=\"campaignName\"\r\n\t\t\t\t\t\t\t\tplaceholder=\"Enter Broadcast name\">\r\n\r\n\t\t\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t\t\t<div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\t\t\t\t\t\t\t<mat-hint align=\"start\">\r\n\t\t\t\t\t\t\t\t{{form.get('campaignName').value?.length || 0}}/100\r\n\t\t\t\t\t\t\t</mat-hint>\r\n\r\n\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let validation of validationMessages.campaignName\">\r\n\t\t\t\t\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"form.get('campaignName').touched\r\n\t\t\t\t\t\t\t\t\t\t&& form.get('campaignName').hasError(validation.type)\">\r\n\t\t\t\t\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t</mat-error>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t<mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n\t\t\t\t\t\t\t<mat-select placeholder=\"Select channel\"\r\n\t\t\t\t\t\t\t\tformControlName=\"medium\">\r\n\t\t\t\t\t\t\t\t<mat-option *ngFor=\"let option of channelOption\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"option.value\">\r\n\t\t\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t\t\t*ngFor=\"let validation of validationMessages.medium\">\r\n\t\t\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t\t\t*ngIf=\"form.get('medium').touched\r\n\t\t\t\t\t\t\t\t\t\t&& form.get('medium').hasError(validation.type)\">\r\n\t\t\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</mat-error>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n\t\t\t\t\t\t<lib-general-information-wa [isTouchedForm]=\"isTouchedWAForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-wa>\r\n\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n\t\t\t\t\t\t<lib-general-information-line [isTouchedForm]=\"isTouchedSMSForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-line>\r\n\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n\t\t\t\t\t\t<lib-general-information-sms [isTouchedForm]=\"isTouchedSMSForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-sms>\r\n\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n\t\t\t\t\t\t<lib-general-information-email [isTouchedForm]=\"isTouchedEmailForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-email>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</mat-card-content>\r\n\t\t\t</mat-card>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"campaign-info-child pl-20px\">\r\n\t\t\t<h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n\t\t\t<div\r\n\t\t\t\t[ngClass]=\"form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL' ? 'campaign-border-preview' : 'campaign-preview'\">\r\n\t\t\t\t<section *ngIf=\"form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\">\r\n\t\t\t\t\t<p *ngIf=\"getBody\"\r\n\t\t\t\t\t\tclass=\"body my-2\"\r\n\t\t\t\t\t\tstyle=\"max-width: 500px;word-wrap: break-word;\"\r\n\t\t\t\t\t\t[innerHTML]=\"getBody\"></p>\r\n\t\t\t\t</section>\r\n\r\n\t\t\t\t<section *ngIf=\"form.get('medium').value === 'WA'\"\r\n\t\t\t\t\tclass=\"campaign-preview__wa\">\r\n\t\t\t\t\t<div class=\"header-preview\">\r\n\t\t\t\t\t\t<div class=\"heading\">\r\n\t\t\t\t\t\t\t{{ getHeader }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"body-preview\">\r\n\t\t\t\t\t\t<section *ngIf=\"getBody || getMedia || displayFile\">\r\n\t\t\t\t\t\t\t<div class=\"chat\"\r\n\t\t\t\t\t\t\t\t[ngClass]=\"{'no-bottom-border': getTemplate?.buttons?.length > 0}\">\r\n\t\t\t\t\t\t\t\t<img *ngIf=\"(getMedia === 'IMAGE' || getTemplate?.header?.type?.toLowerCase() === 'image') && displayFile\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"max-width: 100%;\"\r\n\t\t\t\t\t\t\t\t\talt=\"image\"\r\n\t\t\t\t\t\t\t\t\t[src]=\"displayFile\" />\r\n\r\n\t\t\t\t\t\t\t\t<video\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"(getMedia === 'VIDEO' || getTemplate?.header?.type?.toLowerCase() === 'video') && displayFile\"\r\n\t\t\t\t\t\t\t\t\tid=\"video\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"width: 100%;\"\r\n\t\t\t\t\t\t\t\t\t[src]=\"displayFile\"\r\n\t\t\t\t\t\t\t\t\tcontrols></video>\r\n\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"getMedia === 'DOCUMENT'\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"display: flex;\">\r\n\t\t\t\t\t\t\t\t\t<img style=\"width: 13px; height: 18px;\"\r\n\t\t\t\t\t\t\t\t\t\talt=\"document\"\r\n\t\t\t\t\t\t\t\t\t\tsrc=\"../../../../../assets/images/icon-file.png\">\r\n\r\n\t\t\t\t\t\t\t\t\t<span style=\"margin-left: 10px;\">Document</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n\t\t\t\t\t\t\t\t\t<agm-map style=\"width:100%;height:200px;\"\r\n\t\t\t\t\t\t\t\t\t\t[disableDefaultUI]=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t[latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t\t\t\t[zoom]=\"maps.zoom\">\r\n\t\t\t\t\t\t\t\t\t\t<agm-marker [latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t\t\t\t\t[markerDraggable]=\"false\"></agm-marker>\r\n\t\t\t\t\t\t\t\t\t</agm-map>\r\n\t\t\t\t\t\t\t\t\t<a\r\n\t\t\t\t\t\t\t\t\t\t[href]=\"'https://www.google.com/maps/search/?api=1&query='+ maps.latitude + ',' + maps.longitude\">\r\n\t\t\t\t\t\t\t\t\t\thttps://www.google.com/maps/search/?api=1&query={{maps.latitude}},{{maps.longitude}}\r\n\t\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<p *ngIf=\"getBody\"\r\n\t\t\t\t\t\t\t\t\tclass=\"body my-2\"\r\n\t\t\t\t\t\t\t\t\t[innerHTML]=\"getBody\"></p>\r\n\r\n\t\t\t\t\t\t\t\t<p *ngIf=\"getTemplate?.footer\"\r\n\t\t\t\t\t\t\t\t\tclass=\"mb-2\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"color: rgb(160, 160, 160);\">\r\n\t\t\t\t\t\t\t\t\t{{ getTemplate.footer }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t<section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let button of getTemplateButton\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t{{ button?.text || button?.type }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<div *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn pb-0 pointer\"\r\n\t\t\t\t\t\t\t\t(click)=\"isShowMore = !isShowMore\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon>list</mat-icon> See all options\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</section>\r\n\r\n\t\t\t\t<section *ngIf=\"form.get('medium').value === 'LINE'\"\r\n\t\t\t\t\tclass=\"campaign-preview__line\">\r\n\t\t\t\t\t<div class=\"header-preview\">\r\n\t\t\t\t\t\t<div class=\"heading\">\r\n\t\t\t\t\t\t\t{{ getHeader }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"body-preview\">\r\n\t\t\t\t\t\t<!-- Template Line Text -->\r\n\t\t\t\t\t\t<section *ngIf=\"isText || !isJSON\"\r\n\t\t\t\t\t\t\tclass=\"chat\">\r\n\t\t\t\t\t\t\t<p class=\"body my-2\"\r\n\t\t\t\t\t\t\t\t[innerHTML]=\"getBody\"></p>\r\n\t\t\t\t\t\t</section>\r\n\r\n\t\t\t\t\t\t<!-- Template Line Button | Confirmation -->\r\n\t\t\t\t\t\t<section *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n\t\t\t\t\t\t\tclass=\"chat\"\r\n\t\t\t\t\t\t\t[ngClass]=\"{'no-bottom-border': getTemplateLine?.actions?.length > 0}\">\r\n\t\t\t\t\t\t\t<img *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n\t\t\t\t\t\t\t\tstyle=\"max-width: 100%;\"\r\n\t\t\t\t\t\t\t\tclass=\"mb-1\"\r\n\t\t\t\t\t\t\t\t[src]=\"getTemplateLine?.thumbnailImageUrl\" />\r\n\r\n\t\t\t\t\t\t\t<p *ngIf=\"getTemplateLine?.title\"\r\n\t\t\t\t\t\t\t\tclass=\"font-PoppinsBold mb-1\"\r\n\t\t\t\t\t\t\t\t[innerHTML]=\"getTemplateLine?.title\"> </p>\r\n\r\n\t\t\t\t\t\t\t<p *ngIf=\"getTemplateLine?.text\"\r\n\t\t\t\t\t\t\t\tclass=\"mb-0\"\r\n\t\t\t\t\t\t\t\t[innerHTML]=\"getTemplateLine?.text\"> </p>\r\n\t\t\t\t\t\t</section>\r\n\r\n\t\t\t\t\t\t<!-- Template Line Carousel -->\r\n\t\t\t\t\t\t<div *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n\t\t\t\t\t\t\tclass=\"d-flex gap-2 overflow-auto\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let column of getTemplateLine?.columns\">\r\n\t\t\t\t\t\t\t\t<section class=\"chat w-100\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"{'no-bottom-border': column?.actions?.length > 0}\">\r\n\t\t\t\t\t\t\t\t\t<img *ngIf=\"column.thumbnailImageUrl\"\r\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 100%;\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-1\"\r\n\t\t\t\t\t\t\t\t\t\t[src]=\"column.thumbnailImageUrl\" />\r\n\r\n\t\t\t\t\t\t\t\t\t<p *ngIf=\"column.title\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"font-PoppinsBold mb-1\"\r\n\t\t\t\t\t\t\t\t\t\t[innerHTML]=\"column.title\"> </p>\r\n\r\n\t\t\t\t\t\t\t\t\t<p *ngIf=\"column.text\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-0\"\r\n\t\t\t\t\t\t\t\t\t\t[innerHTML]=\"column.text\"> </p>\r\n\t\t\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t\t\t<section *ngIf=\"column?.actions?.length > 0\">\r\n\t\t\t\t\t\t\t\t\t<div *ngFor=\"let button of column?.actions\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"params-btn mw-100 pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ button?.text }}\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<!-- Template Line Image Carousel -->\r\n\t\t\t\t\t\t<div *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n\t\t\t\t\t\t\tclass=\"d-flex gap-2 overflow-auto\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let column of getTemplateLine?.columns\">\r\n\t\t\t\t\t\t\t\t<div class=\"image-container\">\r\n\t\t\t\t\t\t\t\t\t<img [src]=\"column.imageUrl\"\r\n\t\t\t\t\t\t\t\t\t\talt=\"image\">\r\n\r\n\t\t\t\t\t\t\t\t\t<div class=\"d-flex justify-content-center\">\r\n\t\t\t\t\t\t\t\t\t\t<p class=\"font-13px overlay-text\">{{ column.action.label }}</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<!-- Button Line -->\r\n\t\t\t\t\t\t<section *ngIf=\"getTemplateLine?.type !== 'confirm' && getTemplateLine?.actions?.length > 0\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let button of getTemplateLine?.actions\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t{{ button?.text }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t<section *ngIf=\"getTemplateLine?.type === 'confirm' && getTemplateLine?.actions?.length > 0\"\r\n\t\t\t\t\t\t\tclass=\"d-flex justify-content-around mw-70 bg-white\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let button of getTemplateLine?.actions\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn flex pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t{{ button?.text }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t<!-- ./ Button Line -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</section>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"d-flex\"\r\n\t\t\t\tstyle=\"flex-direction: column;\">\r\n\t\t\t\t<span *ngIf=\"form.get('medium').value === 'SMS'\"\r\n\t\t\t\t\tstyle=\"text-align: right;width: 100%;\">\r\n\t\t\t\t\t{{ twilioResultCounter.fulltext }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span style=\"text-align: right;width: 100%;color: red\"\r\n\t\t\t\t\t*ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\">\r\n\t\t\t\t\tMaximum Segment is 10\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n\t<div class=\"text-center my-auto\">\r\n\t\t<img src=\"../../../../../assets/images/spinner.svg\">\r\n\t</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);
 
@@ -4930,51 +4915,56 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
     }
     onFileSelected(event) {
         const file = event.target.files;
-        const MAXIMUM_SIZE = 10 * 1024 * 1024; // In MegaBytes
-        console.log(MAXIMUM_SIZE);
+        const MAXIMUM_SIZE = 30 * 1024 * 1024;
         if (file.length === 0)
             return;
         if (file[0].size > MAXIMUM_SIZE) {
-            this.toastr.error('Upload media failed, max size 10mb');
+            this.toastr.error('Upload media failed, max size 30mb');
             return;
         }
-        this.uploadMediaService(file[0]);
+        // this.uploadMediaService(file[0]);
+        this.getPresignedUrlService(file[0]);
     }
-    uploadMediaService(file) {
+    getPresignedUrlService(file) {
         this.isUpload = true;
         const parameterList = [
-            {
-                name: 'file',
-                value: file,
-                in: 'formData',
-                type: 'object',
-            },
+            { name: 'fileName', value: file.name, in: 'query', type: 'string' },
+            { name: 'fileType', value: file.type, in: 'query', type: 'string' },
         ];
         const subs = this.apiAdapterService
-            .executeApiRequest(parameterList, '/message/media', 'POST')
+            .executeApiRequest(parameterList, '/campaign/upload/pre-signed-url', 'GET')
             .subscribe((resp) => {
-            if (!resp)
-                return;
-            this.setFileService(resp.data);
+            if (resp && resp.data) {
+                this.uploadToS3Service(file, resp.data.url, resp.data.fileName);
+            }
         }, () => (this.isUpload = false));
         this.subscribers.push(subs);
     }
-    setFileService(media) {
+    uploadToS3Service(file, s3Url, fileNameS3) {
+        this.apiAdapterService.uploadFileToS3(s3Url, file).subscribe(() => {
+            this.finalizeTargetFileService(fileNameS3);
+        }, (err) => {
+            this.toastr.error('Failed uploading to S3 storage');
+            this.isUpload = false;
+            console.error('S3 Upload Error:', err);
+        });
+    }
+    finalizeTargetFileService(fileNameS3) {
         var _a, _b;
+        const campaignId = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.id;
         const parameterList = [
             {
-                name: 'fileId',
-                value: {
-                    fileId: media.id,
-                },
+                name: 'body',
+                value: { fileName: fileNameS3 },
                 in: 'body',
                 type: 'object',
                 withoutKeyData: true,
             },
         ];
         const subs = this.apiAdapterService
-            .executeApiRequest(parameterList, `/campaign/${(_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.id}/targetfile`, 'POST')
+            .executeApiRequest(parameterList, `/campaign/${campaignId}/targetfile`, 'POST')
             .subscribe((resp) => {
+            var _a;
             if (!resp)
                 return;
             this.toastr.info('Upload XLSX has been uploaded successfully');
@@ -4984,8 +4974,8 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
                 numberCount: this.categorySelected.reduce((sum, x) => sum + x.totalMembers, 0),
                 isUpload: true,
                 file: {
-                    name: media.fileName,
-                    targetURL: media.targetURL,
+                    name: fileNameS3,
+                    targetURL: ((_a = resp.data) === null || _a === void 0 ? void 0 : _a.targetURL) || '',
                 },
             });
         }, () => (this.isUpload = false));
@@ -5272,4 +5262,4 @@ ConfirmationModule = __decorate([
  */
 
 export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardModule, SearchModule, WizardComponent as ɵa, NewCampaignComponent as ɵb, GeneralInformationComponent as ɵc, SchedulerComponent as ɵd, SummaryComponent as ɵe, NewNumberBasesComponent as ɵf, GeneralInformationLineComponent as ɵg, GeneralInformationWAComponent as ɵh, GeneralInformationSMSComponent as ɵi, GeneralInformationEmailComponent as ɵj, PendingApprovalDialogViewComponent as ɵk, FailoverMechanismComponent as ɵl, DashboardComponent as ɵm, ApiAdapterServiceService as ɵn, SearchComponent as ɵo, ViewingListOfCampaignTableComponent as ɵp, FilterInListOfCampaignComponent as ɵq, CampaignIndexComponent as ɵr, ApiAdapterServiceService as ɵs, MatSelectInfiniteScrollDirective as ɵt, CustomPaginator as ɵu, ConfirmationComponent as ɵv, ConfirmationModel as ɵw, SharedServicesService as ɵx };
-//# sourceMappingURL=campaign-management-library.js.map
+//# sourceMappingURL=adlfe-campaign-management-library.js.map