npm - @adlfe/campaign-management-library - Versions diffs - 2.9.21 → 2.10.0 - Mend

@adlfe/campaign-management-library 2.9.21 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/bundles/{campaign-management-library.umd.js → adlfe-campaign-management-library.umd.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@agm/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/material/card'), require('@angular/material/paginator'), require('ngx-echarts'), require('ngx-toastr'), require('@angular/cdk/drag-drop'), require('@angular/forms'), require('@angular/material/autocomplete'), require('@angular/material/badge'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/datepicker'), require('@angular/material/dialog'), require('@angular/material/divider'), require('@angular/material/form-field'), require('@angular/material/grid-list'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/list'), require('@angular/material/progress-spinner'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slide-toggle'), require('@angular/material/sort'), require('@angular/material/table'), require('@angular/material/tabs'), require('@ctrl/ngx-emoji-mart'), require('@kolkov/angular-editor'), require('@ng-bootstrap/ng-bootstrap'), require('echarts'), require('rxjs'), require('rxjs/operators'), require('@angular/material/chips'), require('@angular/material/core'), require('@angular/material/toolbar'), require('@angular/material/tooltip'), require('rxjs/internal/operators/catchError'), require('@angular/material/button-toggle'), require('sms-segments-calculator'), require('@angular/platform-browser'), require('@angular/cdk/collections')) :
-    typeof define === 'function' && define.amd ? define('campaign-management-library', ['exports', '@angular/core', '@agm/core', '@angular/common', '@angular/common/http', '@angular/material/card', '@angular/material/paginator', 'ngx-echarts', 'ngx-toastr', '@angular/cdk/drag-drop', '@angular/forms', '@angular/material/autocomplete', '@angular/material/badge', '@angular/material/button', '@angular/material/checkbox', '@angular/material/datepicker', '@angular/material/dialog', '@angular/material/divider', '@angular/material/form-field', '@angular/material/grid-list', '@angular/material/icon', '@angular/material/input', '@angular/material/list', '@angular/material/progress-spinner', '@angular/material/radio', '@angular/material/select', '@angular/material/slide-toggle', '@angular/material/sort', '@angular/material/table', '@angular/material/tabs', '@ctrl/ngx-emoji-mart', '@kolkov/angular-editor', '@ng-bootstrap/ng-bootstrap', 'echarts', 'rxjs', 'rxjs/operators', '@angular/material/chips', '@angular/material/core', '@angular/material/toolbar', '@angular/material/tooltip', 'rxjs/internal/operators/catchError', '@angular/material/button-toggle', 'sms-segments-calculator', '@angular/platform-browser', '@angular/cdk/collections'], factory) :
-    (global = global || self, factory(global['campaign-management-library'] = {}, global.ng.core, global.core$1, global.ng.common, global.ng.common.http, global.ng.material.card, global.ng.material.paginator, global.ngxEcharts, global.ngxToastr, global.ng.cdk.dragDrop, global.ng.forms, global.ng.material.autocomplete, global.ng.material.badge, global.ng.material.button, global.ng.material.checkbox, global.ng.material.datepicker, global.ng.material.dialog, global.ng.material.divider, global.ng.material.formField, global.ng.material.gridList, global.ng.material.icon, global.ng.material.input, global.ng.material.list, global.ng.material.progressSpinner, global.ng.material.radio, global.ng.material.select, global.ng.material.slideToggle, global.ng.material.sort, global.ng.material.table, global.ng.material.tabs, global.ngxEmojiMart, global.angularEditor, global.ngBootstrap, global.echarts, global.rxjs, global.rxjs.operators, global.ng.material.chips, global.ng.material.core, global.ng.material.toolbar, global.ng.material.tooltip, global.rxjs['internal/operators/catchError'], global.ng.material.buttonToggle, global.smsSegmentsCalculator, global.ng.platformBrowser, global.ng.cdk.collections));
+    typeof define === 'function' && define.amd ? define('@adlfe/campaign-management-library', ['exports', '@angular/core', '@agm/core', '@angular/common', '@angular/common/http', '@angular/material/card', '@angular/material/paginator', 'ngx-echarts', 'ngx-toastr', '@angular/cdk/drag-drop', '@angular/forms', '@angular/material/autocomplete', '@angular/material/badge', '@angular/material/button', '@angular/material/checkbox', '@angular/material/datepicker', '@angular/material/dialog', '@angular/material/divider', '@angular/material/form-field', '@angular/material/grid-list', '@angular/material/icon', '@angular/material/input', '@angular/material/list', '@angular/material/progress-spinner', '@angular/material/radio', '@angular/material/select', '@angular/material/slide-toggle', '@angular/material/sort', '@angular/material/table', '@angular/material/tabs', '@ctrl/ngx-emoji-mart', '@kolkov/angular-editor', '@ng-bootstrap/ng-bootstrap', 'echarts', 'rxjs', 'rxjs/operators', '@angular/material/chips', '@angular/material/core', '@angular/material/toolbar', '@angular/material/tooltip', 'rxjs/internal/operators/catchError', '@angular/material/button-toggle', 'sms-segments-calculator', '@angular/platform-browser', '@angular/cdk/collections'], factory) :
+    (global = global || self, factory((global.adlfe = global.adlfe || {}, global.adlfe['campaign-management-library'] = {}), global.ng.core, global.core$1, global.ng.common, global.ng.common.http, global.ng.material.card, global.ng.material.paginator, global.ngxEcharts, global.ngxToastr, global.ng.cdk.dragDrop, global.ng.forms, global.ng.material.autocomplete, global.ng.material.badge, global.ng.material.button, global.ng.material.checkbox, global.ng.material.datepicker, global.ng.material.dialog, global.ng.material.divider, global.ng.material.formField, global.ng.material.gridList, global.ng.material.icon, global.ng.material.input, global.ng.material.list, global.ng.material.progressSpinner, global.ng.material.radio, global.ng.material.select, global.ng.material.slideToggle, global.ng.material.sort, global.ng.material.table, global.ng.material.tabs, global.ngxEmojiMart, global.angularEditor, global.ngBootstrap, global.echarts, global.rxjs, global.rxjs.operators, global.ng.material.chips, global.ng.material.core, global.ng.material.toolbar, global.ng.material.tooltip, global.rxjs['internal/operators/catchError'], global.ng.material.buttonToggle, global.smsSegmentsCalculator, global.ng.platformBrowser, global.ng.cdk.collections));
 }(this, (function (exports, core, core$1, common, http, card, paginator, ngxEcharts, ngxToastr, dragDrop, forms, autocomplete, badge, button, checkbox, datepicker, dialog, divider, formField, gridList, icon, input, list, progressSpinner, radio, select, slideToggle, sort, table, tabs, ngxEmojiMart, angularEditor, ngBootstrap, echarts, rxjs, operators, chips, core$2, toolbar, tooltip, catchError, buttonToggle, smsSegmentsCalculator, platformBrowser, collections) { 'use strict';
     /*! *****************************************************************************
@@ -827,6 +827,8 @@
         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';
     var environment = {
@@ -849,9 +851,7 @@
             var formData = new FormData();
             (_a = parameterList) === null || _a === void 0 ? void 0 : _a.filter(function (rt) { return rt.in !== 'header'; }).forEach(function (requestType) {
                 parameter = parameterList.find(function (parameter) { return parameter.name === requestType.name; });
-                if (!parameter &&
-                    requestType.required &&
-                    requestType.in !== 'header') {
+                if (!parameter && requestType.required && requestType.in !== 'header') {
                     window.alert("Parameter \"" + requestType.name + "\" is required!, Try again with \"" + requestType.name + "\"");
                 }
                 else if (!parameter && !requestType.required) {
@@ -884,8 +884,7 @@
             });
             this.queryCount = 0;
             url = "" + environment.api + url;
-            var appRequest = __assign({}, (((_c = (_b = parameterList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.withoutKeyData) ? bodyData
-                : { data: bodyData }));
+            var appRequest = __assign({}, (((_c = (_b = parameterList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.withoutKeyData) ? bodyData : { data: bodyData }));
             var headers = new http.HttpHeaders()
                 .set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
                 .set('Access-Control-Allow-Origin', '*');
@@ -913,11 +912,14 @@
                 return rxjs.of(err.error);
             }));
         };
+        ApiAdapterServiceService.prototype.uploadFileToS3 = function (s3Url, file) {
+            // Kita kirim raw binary/file dengan header Content-Type yang sesuai
+            return this.httpClient.put(s3Url, file, {
+                headers: { 'Content-Type': file.type },
+            });
+        };
         ApiAdapterServiceService.prototype.setQuery = function (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;
         };
@@ -1716,7 +1718,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\"\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)}"]
             }),
             core.Injectable({
                 providedIn: 'root',
@@ -2529,7 +2531,6 @@
                     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(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 : [])),
@@ -2544,7 +2545,6 @@
                         name: source.template.name,
                         lang: source.template.lang,
                         header: null,
-                        type: source.type,
                         data: [source.otpValue],
                         button: [[source.otpValue]],
                     };
@@ -2822,9 +2822,6 @@
                 return;
             }
             var bodyReq = new GeneralInformationWAReqModel().clone(__assign({}, this.generalInformationData));
-            if (bodyReq.type === 'template' && this.generalInformationData.from.platform === 'WA') {
-                bodyReq.template.type = this.generalInformationData.template.category;
-            }
             var parameterList = [
                 {
                     name: 'data',
@@ -4279,9 +4276,6 @@
             var form = this.initParameter(false, value);
             this.form.get('paramHeader').push(form);
         };
-        GeneralInformationWAComponent.prototype.closeCard = function () {
-            this.isHiddencard = true;
-        };
         Object.defineProperty(GeneralInformationWAComponent.prototype, "getParamBody", {
             get: function () {
                 return this.form.get('paramBody').controls;
@@ -4419,15 +4413,6 @@
             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 ||
@@ -4614,8 +4599,8 @@
         GeneralInformationWAComponent = __decorate([
             core.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);
         return GeneralInformationWAComponent;
@@ -5208,7 +5193,7 @@
             core.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);
         return GeneralInformationComponent;
@@ -5462,53 +5447,59 @@
         };
         NewNumberBasesComponent.prototype.onFileSelected = function (event) {
             var file = event.target.files;
-            var MAXIMUM_SIZE = 10 * 1024 * 1024; // In MegaBytes
-            console.log(MAXIMUM_SIZE);
+            var 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]);
         };
-        NewNumberBasesComponent.prototype.uploadMediaService = function (file) {
+        NewNumberBasesComponent.prototype.getPresignedUrlService = function (file) {
             var _this = this;
             this.isUpload = true;
             var 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' },
             ];
             var subs = this.apiAdapterService
-                .executeApiRequest(parameterList, '/message/media', 'POST')
+                .executeApiRequest(parameterList, '/campaign/upload/pre-signed-url', 'GET')
                 .subscribe(function (resp) {
-                if (!resp)
-                    return;
-                _this.setFileService(resp.data);
+                if (resp && resp.data) {
+                    _this.uploadToS3Service(file, resp.data.url, resp.data.fileName);
+                }
             }, function () { return (_this.isUpload = false); });
             this.subscribers.push(subs);
         };
-        NewNumberBasesComponent.prototype.setFileService = function (media) {
+        NewNumberBasesComponent.prototype.uploadToS3Service = function (file, s3Url, fileNameS3) {
+            var _this = this;
+            this.apiAdapterService.uploadFileToS3(s3Url, file).subscribe(function () {
+                _this.finalizeTargetFileService(fileNameS3);
+            }, function (err) {
+                _this.toastr.error('Failed uploading to S3 storage');
+                _this.isUpload = false;
+                console.error('S3 Upload Error:', err);
+            });
+        };
+        NewNumberBasesComponent.prototype.finalizeTargetFileService = function (fileNameS3) {
             var _this = this;
             var _a, _b;
+            var campaignId = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.id;
             var parameterList = [
                 {
-                    name: 'fileId',
-                    value: {
-                        fileId: media.id,
-                    },
+                    name: 'body',
+                    value: { fileName: fileNameS3 },
                     in: 'body',
                     type: 'object',
                     withoutKeyData: true,
                 },
             ];
             var 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(function (resp) {
+                var _a;
                 if (!resp)
                     return;
                 _this.toastr.info('Upload XLSX has been uploaded successfully');
@@ -5518,8 +5509,8 @@
                     numberCount: _this.categorySelected.reduce(function (sum, x) { return 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) || '',
                     },
                 });
             }, function () { return (_this.isUpload = false); });
@@ -5851,4 +5842,4 @@
     Object.defineProperty(exports, '__esModule', { value: true });
 })));
-//# sourceMappingURL=campaign-management-library.umd.js.map
+//# sourceMappingURL=adlfe-campaign-management-library.umd.js.map