@adlfe/campaign-management-library 2.10.6 → 2.11.3

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 (37) hide show
  1. package/adlfe-campaign-management-library.d.ts +12 -9
  2. package/adlfe-campaign-management-library.metadata.json +1 -1
  3. package/bundles/adlfe-campaign-management-library.umd.js +178 -110
  4. package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
  5. package/bundles/adlfe-campaign-management-library.umd.min.js +1 -1
  6. package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
  7. package/esm2015/adlfe-campaign-management-library.js +13 -10
  8. package/esm2015/environments/environment.js +3 -3
  9. package/esm2015/lib/campaign-management/models/general-information-wa-req.model.js +11 -2
  10. package/esm2015/lib/campaign-management/modules/campaign-index/component/filter-in-list-of-campaign/filter-in-list-of-campaign.component.js +1 -1
  11. package/esm2015/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +43 -43
  12. package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +54 -5
  13. package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
  14. package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +49 -42
  15. package/esm2015/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +1 -2
  16. package/esm2015/lib/core/const/constants.const.js +6 -6
  17. package/esm2015/public-api.js +1 -6
  18. package/esm5/adlfe-campaign-management-library.js +13 -10
  19. package/esm5/environments/environment.js +3 -3
  20. package/esm5/lib/campaign-management/models/general-information-wa-req.model.js +11 -2
  21. package/esm5/lib/campaign-management/modules/campaign-index/component/filter-in-list-of-campaign/filter-in-list-of-campaign.component.js +1 -1
  22. package/esm5/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +42 -40
  23. package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +58 -5
  24. package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
  25. package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +49 -42
  26. package/esm5/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +1 -2
  27. package/esm5/lib/core/const/constants.const.js +6 -6
  28. package/esm5/public-api.js +1 -6
  29. package/fesm2015/adlfe-campaign-management-library.js +164 -100
  30. package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
  31. package/fesm5/adlfe-campaign-management-library.js +167 -97
  32. package/fesm5/adlfe-campaign-management-library.js.map +1 -1
  33. package/lib/campaign-management/models/general-information-wa-req.model.d.ts +2 -0
  34. package/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.d.ts +7 -0
  35. package/package.json +1 -1
  36. package/public-api.d.ts +0 -5
  37. package/types.d.ts +1 -0
package/fesm5/adlfe-campaign-management-library.js CHANGED
@@ -671,11 +671,11 @@ else if (origin.includes('dashboard-qa')) {
671
671
  }
672
672
  // 4. Cek Demo Dev secara spesifik
673
673
  else if (origin.includes('demo-dev')) {
674
- API_CONST = 'https://api-staging.neuapix.com';
674
+ API_CONST = 'https://apibsp-dev.adlsandbox.net';
675
675
  }
676
676
  // 5. Default (Localhost atau lainnya)
677
677
  else {
678
- API_CONST = 'https://api-staging.neuapix.com';
678
+ API_CONST = 'https://apibsp-dev.adlsandbox.net';
679
679
  }
680
680
  var environment = {
681
681
  production: false,
@@ -1090,6 +1090,10 @@ var MsgTypeWAOptionConst = [
1090
1090
  name: 'Template',
1091
1091
  code: 'TEMPLATE',
1092
1092
  },
1093
+ {
1094
+ name: 'Text - Utility',
1095
+ code: 'utility',
1096
+ },
1093
1097
  ];
1094
1098
  var MsgTypeEmailOptionConst = [
1095
1099
  {
@@ -1171,11 +1175,7 @@ var CampaignPerformanceChartConfig = {
1171
1175
  { type: 'bar', color: '#35CDF3' },
1172
1176
  ],
1173
1177
  };
1174
- var ɵ0 = [
1175
- 'Delivery Rate of Campaigns',
1176
- 'Total Number of Campaigns',
1177
- 'Cost Distribution',
1178
- ], ɵ1 = [], ɵ2 = [], ɵ3 = [], ɵ4 = [];
1178
+ var ɵ0 = ['Delivery Rate of Campaigns', 'Total Number of Campaigns', 'Cost Distribution'], ɵ1 = [], ɵ2 = [], ɵ3 = [], ɵ4 = [];
1179
1179
  var ConversationInsightsChartConfig = {
1180
1180
  tooltip: {
1181
1181
  trigger: 'axis',
@@ -1588,7 +1588,7 @@ var FilterInListOfCampaignComponent = /** @class */ (function () {
1588
1588
  Component({
1589
1589
  selector: 'lib-filter-in-list-of-campaign',
1590
1590
  template: "<p class=\"font-16px font-bold\">Filter</p>\r\n\r\n<form [formGroup]=\"form\" class=\"contact-filter\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-12\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n <mat-label>Business Name</mat-label>\r\n <mat-select placeholder=\"Select Business Name\" formControlName=\"businessName\">\r\n <div class=\"select-search\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n (searchRes)=\"businessNameSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option value=\"\"> --- select none --- </mat-option>\r\n <mat-option\r\n *ngFor=\"let option of filteredBusinessNameOption\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"!filteredBusinessNameOption.length\" disabled>\r\n No data found\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-12\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n <mat-label>Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select the Channel\" formControlName=\"medium\">\r\n <mat-option value=\"\"> --- select none --- </mat-option>\r\n <mat-option\r\n *ngFor=\"let option of filteredChannelOption\"\r\n [value]=\"option.value\"\r\n (click)=\"getTemplateOptionService()\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n <mat-option *ngIf=\"!filteredChannelOption.length\" disabled>\r\n No data found\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-12\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template Name</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"templateName\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('templateName').value?.name\"\r\n (searchRes)=\"templateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-12\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n <mat-label>Status</mat-label>\r\n\r\n <mat-select placeholder=\"Select the Status\" formControlName=\"status\">\r\n <div class=\"select-search\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n (searchRes)=\"statusSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option value=\"\"> --- select none --- </mat-option>\r\n <mat-option\r\n *ngFor=\"let option of filteredStatusOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n <mat-option *ngIf=\"!filteredStatusOption.length\" disabled>\r\n No data found\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-12\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> Start Date </mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"startDatePicker\"\r\n formControlName=\"startDate\"\r\n class=\"mat-datepicker-input\"\r\n (dateChange)=\"validateBackDate()\"\r\n />\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"startDatePicker\">\r\n </mat-datepicker-toggle>\r\n <mat-icon\r\n *ngIf=\"form.get('startDate').value\"\r\n matDatepickerToggleIcon\r\n (click)=\"clearDate()\"\r\n >clear</mat-icon\r\n >\r\n <mat-datepicker #startDatePicker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-12\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> End Date </mat-label>\r\n <input\r\n matInput\r\n [min]=\"form.get('startDate').value\"\r\n [matDatepicker]=\"endDatePicker\"\r\n formControlName=\"endDate\"\r\n class=\"mat-datepicker-input\"\r\n (dateChange)=\"validateBackDate()\"\r\n />\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"endDatePicker\"> </mat-datepicker-toggle>\r\n <mat-icon\r\n *ngIf=\"form.get('endDate').value\"\r\n matDatepickerToggleIcon\r\n (click)=\"clearDate()\"\r\n >clear</mat-icon\r\n >\r\n <mat-datepicker #endDatePicker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div style=\"display: flex; flex: 1; width: 100%\">\r\n <button\r\n mat-stroked-button\r\n color=\"primary-telin\"\r\n class=\"telin-font-color w-48\"\r\n style=\"width: 100%; margin-bottom: 10px\"\r\n (click)=\"onReset()\"\r\n >\r\n Reset\r\n </button>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <button mat-stroked-button color=\"secondary-telin\" class=\"w-48\" (click)=\"onCancel()\">\r\n Cancel\r\n </button>\r\n\r\n <button mat-flat-button color=\"primary-telin-blue2\" class=\"w-48\" (click)=\"onApply()\">\r\n Apply\r\n </button>\r\n </div>\r\n </div>\r\n</form>\r\n",
1591
- styles: [".contact-filter .platform{display:grid;grid-gap:5px;grid-template-columns:auto 1fr auto}.button-row{margin:8px 8px 8px 0}.mat-datepicker-input{width:85%}.mat-icon{position:relative;float:right;top:-7px;cursor:pointer;color:rgba(0,0,0,.54)}.select-search{margin:20px}"]
1591
+ styles: [".contact-filter .platform{display:-ms-grid;display:grid;grid-gap:5px;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.button-row{margin:8px 8px 8px 0}.mat-datepicker-input{width:85%}.mat-icon{position:relative;float:right;top:-7px;cursor:pointer;color:rgba(0,0,0,.54)}.select-search{margin:20px}"]
1592
1592
  }),
1593
1593
  Injectable({
1594
1594
  providedIn: 'root',
@@ -1682,7 +1682,7 @@ var PendingApprovalDialogViewComponent = /** @class */ (function () {
1682
1682
  var subs = this.apiAdapterService
1683
1683
  .executeApiRequest([], "/campaign/" + ((_d = (_c = this.getCampaignStorage) === null || _c === void 0 ? void 0 : _c.generalInformation) === null || _d === void 0 ? void 0 : _d.id), 'GET')
1684
1684
  .subscribe(function (resp) {
1685
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60;
1685
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63;
1686
1686
  if (!resp)
1687
1687
  return;
1688
1688
  var generalInformation = {
@@ -1690,61 +1690,63 @@ var PendingApprovalDialogViewComponent = /** @class */ (function () {
1690
1690
  medium: (_b = resp.data) === null || _b === void 0 ? void 0 : _b.platform,
1691
1691
  channel: ['image', 'video', 'document'].includes((_c = resp.data) === null || _c === void 0 ? void 0 : _c.type)
1692
1692
  ? 'MEDIA'
1693
- : (_e = (_d = resp.data) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toUpperCase(),
1694
- media: (_g = (_f = resp.data) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.toUpperCase(),
1693
+ : ((_d = resp.data) === null || _d === void 0 ? void 0 : _d.isDirectSend) ? 'utility'
1694
+ : (_f = (_e = resp.data) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.toUpperCase(),
1695
+ media: (_h = (_g = resp.data) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.toUpperCase(),
1696
+ isPrevTemplate: (_k = (_j = resp) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.isPrevTemplate,
1695
1697
  from: {
1696
- id: (_h = resp.data) === null || _h === void 0 ? void 0 : _h.accountId,
1697
- name: (_j = resp.data) === null || _j === void 0 ? void 0 : _j.accountName,
1698
- platform: (_k = resp.data) === null || _k === void 0 ? void 0 : _k.platform,
1699
- clientId: (_l = resp.data) === null || _l === void 0 ? void 0 : _l.clientId,
1700
- clientName: (_m = resp.data) === null || _m === void 0 ? void 0 : _m.clientName,
1701
- accountNo: (_o = resp.data) === null || _o === void 0 ? void 0 : _o.accountNo,
1702
- wabaId: (_q = (_p = resp.data) === null || _p === void 0 ? void 0 : _p.wabaId, (_q !== null && _q !== void 0 ? _q : '')),
1698
+ id: (_l = resp.data) === null || _l === void 0 ? void 0 : _l.accountId,
1699
+ name: (_m = resp.data) === null || _m === void 0 ? void 0 : _m.accountName,
1700
+ platform: (_o = resp.data) === null || _o === void 0 ? void 0 : _o.platform,
1701
+ clientId: (_p = resp.data) === null || _p === void 0 ? void 0 : _p.clientId,
1702
+ clientName: (_q = resp.data) === null || _q === void 0 ? void 0 : _q.clientName,
1703
+ accountNo: (_r = resp.data) === null || _r === void 0 ? void 0 : _r.accountNo,
1704
+ wabaId: (_t = (_s = resp.data) === null || _s === void 0 ? void 0 : _s.wabaId, (_t !== null && _t !== void 0 ? _t : '')),
1703
1705
  },
1704
- text: (_s = (_r = resp.data) === null || _r === void 0 ? void 0 : _r.details) === null || _s === void 0 ? void 0 : _s.text,
1705
- targetURL: (_4 = (_0 = (_w = (_v = (_u = (_t = resp.data) === null || _t === void 0 ? void 0 : _t.details) === null || _u === void 0 ? void 0 : _u.image) === null || _v === void 0 ? void 0 : _v.url, (_w !== null && _w !== void 0 ? _w : (_z = (_y = (_x = resp.data) === null || _x === void 0 ? void 0 : _x.details) === null || _y === void 0 ? void 0 : _y.document) === null || _z === void 0 ? void 0 : _z.url)), (_0 !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = resp.data) === null || _1 === void 0 ? void 0 : _1.details) === null || _2 === void 0 ? void 0 : _2.video) === null || _3 === void 0 ? void 0 : _3.url)), (_4 !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = resp.data) === null || _5 === void 0 ? void 0 : _5.details) === null || _6 === void 0 ? void 0 : _6.template) === null || _7 === void 0 ? void 0 : _7.headerURL)),
1706
- paramHeader: (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.template) === null || _10 === void 0 ? void 0 : _10.header,
1707
- paramBody: (_13 = (_12 = (_11 = resp.data) === null || _11 === void 0 ? void 0 : _11.details) === null || _12 === void 0 ? void 0 : _12.template) === null || _13 === void 0 ? void 0 : _13.data,
1708
- paramButton: (_16 = (_15 = (_14 = resp.data) === null || _14 === void 0 ? void 0 : _14.details) === null || _15 === void 0 ? void 0 : _15.template) === null || _16 === void 0 ? void 0 : _16.button,
1709
- otpValue: (_21 = __spread((_20 = (_19 = (_18 = (_17 = resp.data) === null || _17 === void 0 ? void 0 : _17.details) === null || _18 === void 0 ? void 0 : _18.template) === null || _19 === void 0 ? void 0 : _19.data, (_20 !== null && _20 !== void 0 ? _20 : [])))) === null || _21 === void 0 ? void 0 : _21.pop(),
1706
+ text: (_v = (_u = resp.data) === null || _u === void 0 ? void 0 : _u.details) === null || _v === void 0 ? void 0 : _v.text,
1707
+ targetURL: (_7 = (_3 = (_z = (_y = (_x = (_w = resp.data) === null || _w === void 0 ? void 0 : _w.details) === null || _x === void 0 ? void 0 : _x.image) === null || _y === void 0 ? void 0 : _y.url, (_z !== null && _z !== void 0 ? _z : (_2 = (_1 = (_0 = resp.data) === null || _0 === void 0 ? void 0 : _0.details) === null || _1 === void 0 ? void 0 : _1.document) === null || _2 === void 0 ? void 0 : _2.url)), (_3 !== null && _3 !== void 0 ? _3 : (_6 = (_5 = (_4 = resp.data) === null || _4 === void 0 ? void 0 : _4.details) === null || _5 === void 0 ? void 0 : _5.video) === null || _6 === void 0 ? void 0 : _6.url)), (_7 !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.template) === null || _10 === void 0 ? void 0 : _10.headerURL)),
1708
+ paramHeader: (_13 = (_12 = (_11 = resp.data) === null || _11 === void 0 ? void 0 : _11.details) === null || _12 === void 0 ? void 0 : _12.template) === null || _13 === void 0 ? void 0 : _13.header,
1709
+ paramBody: (_16 = (_15 = (_14 = resp.data) === null || _14 === void 0 ? void 0 : _14.details) === null || _15 === void 0 ? void 0 : _15.template) === null || _16 === void 0 ? void 0 : _16.data,
1710
+ paramButton: (_19 = (_18 = (_17 = resp.data) === null || _17 === void 0 ? void 0 : _17.details) === null || _18 === void 0 ? void 0 : _18.template) === null || _19 === void 0 ? void 0 : _19.button,
1711
+ otpValue: (_24 = __spread((_23 = (_22 = (_21 = (_20 = resp.data) === null || _20 === void 0 ? void 0 : _20.details) === null || _21 === void 0 ? void 0 : _21.template) === null || _22 === void 0 ? void 0 : _22.data, (_23 !== null && _23 !== void 0 ? _23 : [])))) === null || _24 === void 0 ? void 0 : _24.pop(),
1710
1712
  template: {
1711
- ID: (_24 = (_23 = (_22 = resp.data) === null || _22 === void 0 ? void 0 : _22.details) === null || _23 === void 0 ? void 0 : _23.template) === null || _24 === void 0 ? void 0 : _24.id,
1712
- name: (_27 = (_26 = (_25 = resp.data) === null || _25 === void 0 ? void 0 : _25.details) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.name,
1713
- lang: (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.lang,
1714
- platform: (_31 = resp.data) === null || _31 === void 0 ? void 0 : _31.platform,
1715
- headerURL: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.headerURL,
1713
+ ID: (_27 = (_26 = (_25 = resp.data) === null || _25 === void 0 ? void 0 : _25.details) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.id,
1714
+ name: (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.name,
1715
+ lang: (_33 = (_32 = (_31 = resp.data) === null || _31 === void 0 ? void 0 : _31.details) === null || _32 === void 0 ? void 0 : _32.template) === null || _33 === void 0 ? void 0 : _33.lang,
1716
+ platform: (_34 = resp.data) === null || _34 === void 0 ? void 0 : _34.platform,
1717
+ headerURL: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.headerURL,
1716
1718
  header: {
1717
- examples: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.header,
1719
+ examples: (_40 = (_39 = (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.details) === null || _39 === void 0 ? void 0 : _39.template) === null || _40 === void 0 ? void 0 : _40.header,
1718
1720
  },
1719
1721
  body: {
1720
- examples: (_40 = (_39 = (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.details) === null || _39 === void 0 ? void 0 : _39.template) === null || _40 === void 0 ? void 0 : _40.data,
1722
+ examples: (_43 = (_42 = (_41 = resp.data) === null || _41 === void 0 ? void 0 : _41.details) === null || _42 === void 0 ? void 0 : _42.template) === null || _43 === void 0 ? void 0 : _43.data,
1721
1723
  },
1722
- buttons: (_43 = (_42 = (_41 = resp.data) === null || _41 === void 0 ? void 0 : _41.details) === null || _42 === void 0 ? void 0 : _42.template) === null || _43 === void 0 ? void 0 : _43.button,
1723
- ClientId: (_44 = resp.data) === null || _44 === void 0 ? void 0 : _44.clientId,
1724
- ClientName: (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.clientName,
1724
+ buttons: (_46 = (_45 = (_44 = resp.data) === null || _44 === void 0 ? void 0 : _44.details) === null || _45 === void 0 ? void 0 : _45.template) === null || _46 === void 0 ? void 0 : _46.button,
1725
+ ClientId: (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.clientId,
1726
+ ClientName: (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.clientName,
1725
1727
  },
1726
- isUpload: ((_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.fileId) !== '',
1727
- fileId: (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.fileId,
1728
+ isUpload: ((_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.fileId) !== '',
1729
+ fileId: (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.fileId,
1728
1730
  };
1729
1731
  localStorage.setItem('telin.campaign', JSON.stringify(__assign(__assign({}, _this.getCampaignStorage), {
1730
1732
  generalInformation: {
1731
- id: (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.id,
1733
+ id: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.id,
1732
1734
  form: generalInformation,
1733
1735
  },
1734
- failover: (_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.failover,
1735
- targetAudience: (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.targets,
1736
+ failover: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.failover,
1737
+ targetAudience: (_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.targets,
1736
1738
  targetAudienceFile: {
1737
- name: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.fileName,
1738
- targetURL: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.targetURL,
1739
+ name: (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.fileName,
1740
+ targetURL: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.targetURL,
1739
1741
  },
1740
1742
  scheduler: {
1741
- schedulerType: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.scheduleType) === 'MULTI'
1743
+ schedulerType: ((_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.scheduleType) === 'MULTI'
1742
1744
  ? 'ONE_TIME'
1743
- : (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.scheduleType,
1744
- startDate: (_56 = (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.startTime) === null || _56 === void 0 ? void 0 : _56.split(' ')[0],
1745
- startTime: (_58 = (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.startTime) === null || _58 === void 0 ? void 0 : _58.split(' ')[1],
1746
- isRepeat: ((_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.scheduleType) === 'MULTI',
1747
- delivery: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.repeat,
1745
+ : (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.scheduleType,
1746
+ startDate: (_59 = (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.startTime) === null || _59 === void 0 ? void 0 : _59.split(' ')[0],
1747
+ startTime: (_61 = (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.startTime) === null || _61 === void 0 ? void 0 : _61.split(' ')[1],
1748
+ isRepeat: ((_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.scheduleType) === 'MULTI',
1749
+ delivery: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.repeat,
1748
1750
  },
1749
1751
  })));
1750
1752
  _this.isLoading = false;
@@ -2357,7 +2359,7 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
2357
2359
  function GeneralInformationWAReqModel() {
2358
2360
  }
2359
2361
  GeneralInformationWAReqModel.prototype.clone = function (source) {
2360
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
2362
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
2361
2363
  /* Source Mapping */
2362
2364
  if (((_a = source) === null || _a === void 0 ? void 0 : _a.media) === 'IMAGE' ||
2363
2365
  ((_b = source) === null || _b === void 0 ? void 0 : _b.media) === 'VIDEO' ||
@@ -2421,6 +2423,15 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
2421
2423
  if (source.template.ID)
2422
2424
  this.template.id = source.template.ID;
2423
2425
  }
2426
+ if (this.type === 'utility') {
2427
+ this.type = 'template';
2428
+ this.category = 'utility';
2429
+ this.template = ((_l = source) === null || _l === void 0 ? void 0 : _l.isUseExistingTemplate) ? (_m = source) === null || _m === void 0 ? void 0 : _m.template : { name: '', lang: 'id', header: null, button: null, data: [] };
2430
+ this.isNeedSave = source.isNeedSave;
2431
+ if ((_o = source) === null || _o === void 0 ? void 0 : _o.isUseExistingTemplate) {
2432
+ this.text = (_r = (_q = (_p = source) === null || _p === void 0 ? void 0 : _p.template) === null || _q === void 0 ? void 0 : _q.body) === null || _r === void 0 ? void 0 : _r.text;
2433
+ }
2434
+ }
2424
2435
  return this;
2425
2436
  };
2426
2437
  GeneralInformationWAReqModel.prototype.convert = function () {
@@ -2546,7 +2557,7 @@ var NewCampaignComponent = /** @class */ (function () {
2546
2557
  var subs = this.apiAdapterService
2547
2558
  .executeApiRequest([], "/campaign/" + this.campaignID, 'GET')
2548
2559
  .subscribe(function (resp) {
2549
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61;
2560
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64;
2550
2561
  if (!resp)
2551
2562
  return;
2552
2563
  var generalInformation = {
@@ -2554,64 +2565,66 @@ var NewCampaignComponent = /** @class */ (function () {
2554
2565
  medium: (_b = resp.data) === null || _b === void 0 ? void 0 : _b.platform,
2555
2566
  channel: ['image', 'video', 'document'].includes((_c = resp.data) === null || _c === void 0 ? void 0 : _c.type)
2556
2567
  ? 'MEDIA'
2557
- : (_e = (_d = resp.data) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toUpperCase(),
2558
- media: (_g = (_f = resp.data) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.toUpperCase(),
2568
+ : ((_d = resp.data) === null || _d === void 0 ? void 0 : _d.isDirectSend) ? 'utility'
2569
+ : (_f = (_e = resp.data) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.toUpperCase(),
2570
+ media: (_h = (_g = resp.data) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.toUpperCase(),
2571
+ isPrevTemplate: (_k = (_j = resp) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.isPrevTemplate,
2559
2572
  from: {
2560
- id: (_h = resp.data) === null || _h === void 0 ? void 0 : _h.accountId,
2561
- name: (_j = resp.data) === null || _j === void 0 ? void 0 : _j.accountName,
2562
- platform: (_k = resp.data) === null || _k === void 0 ? void 0 : _k.platform,
2563
- clientId: (_l = resp.data) === null || _l === void 0 ? void 0 : _l.clientId,
2564
- clientName: (_m = resp.data) === null || _m === void 0 ? void 0 : _m.clientName,
2565
- accountNo: (_o = resp.data) === null || _o === void 0 ? void 0 : _o.accountNo,
2566
- wabaId: (_q = (_p = resp.data) === null || _p === void 0 ? void 0 : _p.wabaId, (_q !== null && _q !== void 0 ? _q : '')),
2573
+ id: (_l = resp.data) === null || _l === void 0 ? void 0 : _l.accountId,
2574
+ name: (_m = resp.data) === null || _m === void 0 ? void 0 : _m.accountName,
2575
+ platform: (_o = resp.data) === null || _o === void 0 ? void 0 : _o.platform,
2576
+ clientId: (_p = resp.data) === null || _p === void 0 ? void 0 : _p.clientId,
2577
+ clientName: (_q = resp.data) === null || _q === void 0 ? void 0 : _q.clientName,
2578
+ accountNo: (_r = resp.data) === null || _r === void 0 ? void 0 : _r.accountNo,
2579
+ wabaId: (_t = (_s = resp.data) === null || _s === void 0 ? void 0 : _s.wabaId, (_t !== null && _t !== void 0 ? _t : '')),
2567
2580
  },
2568
- text: (_s = (_r = resp.data) === null || _r === void 0 ? void 0 : _r.details) === null || _s === void 0 ? void 0 : _s.text,
2569
- targetURL: (_4 = (_0 = (_w = (_v = (_u = (_t = resp.data) === null || _t === void 0 ? void 0 : _t.details) === null || _u === void 0 ? void 0 : _u.image) === null || _v === void 0 ? void 0 : _v.url, (_w !== null && _w !== void 0 ? _w : (_z = (_y = (_x = resp.data) === null || _x === void 0 ? void 0 : _x.details) === null || _y === void 0 ? void 0 : _y.document) === null || _z === void 0 ? void 0 : _z.url)), (_0 !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = resp.data) === null || _1 === void 0 ? void 0 : _1.details) === null || _2 === void 0 ? void 0 : _2.video) === null || _3 === void 0 ? void 0 : _3.url)), (_4 !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = resp.data) === null || _5 === void 0 ? void 0 : _5.details) === null || _6 === void 0 ? void 0 : _6.template) === null || _7 === void 0 ? void 0 : _7.headerURL)),
2570
- paramHeader: (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.template) === null || _10 === void 0 ? void 0 : _10.header,
2571
- paramBody: (_13 = (_12 = (_11 = resp.data) === null || _11 === void 0 ? void 0 : _11.details) === null || _12 === void 0 ? void 0 : _12.template) === null || _13 === void 0 ? void 0 : _13.data,
2572
- paramButton: (_16 = (_15 = (_14 = resp.data) === null || _14 === void 0 ? void 0 : _14.details) === null || _15 === void 0 ? void 0 : _15.template) === null || _16 === void 0 ? void 0 : _16.button,
2573
- otpValue: (_21 = __spread((_20 = (_19 = (_18 = (_17 = resp.data) === null || _17 === void 0 ? void 0 : _17.details) === null || _18 === void 0 ? void 0 : _18.template) === null || _19 === void 0 ? void 0 : _19.data, (_20 !== null && _20 !== void 0 ? _20 : [])))) === null || _21 === void 0 ? void 0 : _21.pop(),
2581
+ text: (_v = (_u = resp.data) === null || _u === void 0 ? void 0 : _u.details) === null || _v === void 0 ? void 0 : _v.text,
2582
+ targetURL: (_7 = (_3 = (_z = (_y = (_x = (_w = resp.data) === null || _w === void 0 ? void 0 : _w.details) === null || _x === void 0 ? void 0 : _x.image) === null || _y === void 0 ? void 0 : _y.url, (_z !== null && _z !== void 0 ? _z : (_2 = (_1 = (_0 = resp.data) === null || _0 === void 0 ? void 0 : _0.details) === null || _1 === void 0 ? void 0 : _1.document) === null || _2 === void 0 ? void 0 : _2.url)), (_3 !== null && _3 !== void 0 ? _3 : (_6 = (_5 = (_4 = resp.data) === null || _4 === void 0 ? void 0 : _4.details) === null || _5 === void 0 ? void 0 : _5.video) === null || _6 === void 0 ? void 0 : _6.url)), (_7 !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.template) === null || _10 === void 0 ? void 0 : _10.headerURL)),
2583
+ paramHeader: (_13 = (_12 = (_11 = resp.data) === null || _11 === void 0 ? void 0 : _11.details) === null || _12 === void 0 ? void 0 : _12.template) === null || _13 === void 0 ? void 0 : _13.header,
2584
+ paramBody: (_16 = (_15 = (_14 = resp.data) === null || _14 === void 0 ? void 0 : _14.details) === null || _15 === void 0 ? void 0 : _15.template) === null || _16 === void 0 ? void 0 : _16.data,
2585
+ paramButton: (_19 = (_18 = (_17 = resp.data) === null || _17 === void 0 ? void 0 : _17.details) === null || _18 === void 0 ? void 0 : _18.template) === null || _19 === void 0 ? void 0 : _19.button,
2586
+ otpValue: (_24 = __spread((_23 = (_22 = (_21 = (_20 = resp.data) === null || _20 === void 0 ? void 0 : _20.details) === null || _21 === void 0 ? void 0 : _21.template) === null || _22 === void 0 ? void 0 : _22.data, (_23 !== null && _23 !== void 0 ? _23 : [])))) === null || _24 === void 0 ? void 0 : _24.pop(),
2574
2587
  template: {
2575
- ID: (_24 = (_23 = (_22 = resp.data) === null || _22 === void 0 ? void 0 : _22.details) === null || _23 === void 0 ? void 0 : _23.template) === null || _24 === void 0 ? void 0 : _24.id,
2576
- name: (_27 = (_26 = (_25 = resp.data) === null || _25 === void 0 ? void 0 : _25.details) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.name,
2577
- lang: (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.lang,
2578
- platform: (_31 = resp.data) === null || _31 === void 0 ? void 0 : _31.platform,
2579
- headerURL: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.headerURL,
2588
+ ID: (_27 = (_26 = (_25 = resp.data) === null || _25 === void 0 ? void 0 : _25.details) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.id,
2589
+ name: (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.name,
2590
+ lang: (_33 = (_32 = (_31 = resp.data) === null || _31 === void 0 ? void 0 : _31.details) === null || _32 === void 0 ? void 0 : _32.template) === null || _33 === void 0 ? void 0 : _33.lang,
2591
+ platform: (_34 = resp.data) === null || _34 === void 0 ? void 0 : _34.platform,
2592
+ headerURL: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.headerURL,
2580
2593
  header: {
2581
- examples: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.header,
2594
+ examples: (_40 = (_39 = (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.details) === null || _39 === void 0 ? void 0 : _39.template) === null || _40 === void 0 ? void 0 : _40.header,
2582
2595
  },
2583
2596
  body: {
2584
- examples: (_40 = (_39 = (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.details) === null || _39 === void 0 ? void 0 : _39.template) === null || _40 === void 0 ? void 0 : _40.data,
2597
+ examples: (_43 = (_42 = (_41 = resp.data) === null || _41 === void 0 ? void 0 : _41.details) === null || _42 === void 0 ? void 0 : _42.template) === null || _43 === void 0 ? void 0 : _43.data,
2585
2598
  },
2586
- buttons: (_43 = (_42 = (_41 = resp.data) === null || _41 === void 0 ? void 0 : _41.details) === null || _42 === void 0 ? void 0 : _42.template) === null || _43 === void 0 ? void 0 : _43.button,
2587
- ClientId: (_44 = resp.data) === null || _44 === void 0 ? void 0 : _44.clientId,
2588
- ClientName: (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.clientName,
2599
+ buttons: (_46 = (_45 = (_44 = resp.data) === null || _44 === void 0 ? void 0 : _44.details) === null || _45 === void 0 ? void 0 : _45.template) === null || _46 === void 0 ? void 0 : _46.button,
2600
+ ClientId: (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.clientId,
2601
+ ClientName: (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.clientName,
2589
2602
  },
2590
- isUpload: ((_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.fileId) !== '',
2591
- fileId: (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.fileId,
2603
+ isUpload: ((_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.fileId) !== '',
2604
+ fileId: (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.fileId,
2592
2605
  };
2593
2606
  localStorage.setItem('telin.campaign', JSON.stringify(__assign(__assign({}, _this.getCampaignStorage), {
2594
2607
  generalInformation: {
2595
- id: (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.id,
2608
+ id: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.id,
2596
2609
  form: generalInformation,
2597
2610
  },
2598
- failover: (_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.failover,
2599
- targetAudience: (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.targets,
2611
+ failover: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.failover,
2612
+ targetAudience: (_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.targets,
2600
2613
  targetAudienceFile: {
2601
- name: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.fileName,
2602
- targetURL: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.targetURL,
2614
+ name: (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.fileName,
2615
+ targetURL: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.targetURL,
2603
2616
  },
2604
2617
  scheduler: {
2605
- schedulerType: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.scheduleType) === 'MULTI'
2618
+ schedulerType: ((_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.scheduleType) === 'MULTI'
2606
2619
  ? 'ONE_TIME'
2607
- : (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.scheduleType,
2608
- startDate: (_56 = (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.startTime) === null || _56 === void 0 ? void 0 : _56.split(' ')[0],
2609
- startTime: (_58 = (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.startTime) === null || _58 === void 0 ? void 0 : _58.split(' ')[1],
2610
- isRepeat: ((_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.scheduleType) === 'MULTI',
2611
- delivery: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.repeat,
2620
+ : (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.scheduleType,
2621
+ startDate: (_59 = (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.startTime) === null || _59 === void 0 ? void 0 : _59.split(' ')[0],
2622
+ startTime: (_61 = (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.startTime) === null || _61 === void 0 ? void 0 : _61.split(' ')[1],
2623
+ isRepeat: ((_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.scheduleType) === 'MULTI',
2624
+ delivery: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.repeat,
2612
2625
  },
2613
2626
  })));
2614
- _this.isLine = ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.platform) === 'LINE';
2627
+ _this.isLine = ((_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.platform) === 'LINE';
2615
2628
  _this.isLoading = false;
2616
2629
  _this.initWizard();
2617
2630
  }, function () {
@@ -2692,10 +2705,15 @@ var NewCampaignComponent = /** @class */ (function () {
2692
2705
  return;
2693
2706
  }
2694
2707
  var bodyReq = new GeneralInformationWAReqModel().clone(__assign({}, this.generalInformationData));
2708
+ var payloadValue = bodyReq.convert();
2709
+ if (payloadValue.template && this.generalInformationData.template) {
2710
+ payloadValue.template.type =
2711
+ payloadValue.template.type || this.generalInformationData.template.category;
2712
+ }
2695
2713
  var parameterList = [
2696
2714
  {
2697
2715
  name: 'data',
2698
- value: bodyReq.convert(),
2716
+ value: payloadValue,
2699
2717
  in: 'body',
2700
2718
  type: 'object',
2701
2719
  withoutKeyData: true,
@@ -3862,6 +3880,10 @@ var GeneralInformationWAComponent = /** @class */ (function () {
3862
3880
  this.pageNoAccountOption = 1;
3863
3881
  this.pageNoTemplateOption = 1;
3864
3882
  this.subscribers = [];
3883
+ this.templates = [
3884
+ { label: 'Create New', value: false },
3885
+ { label: 'Use existing template', value: true },
3886
+ ];
3865
3887
  this.updateGeneralInformationForm = new EventEmitter();
3866
3888
  }
3867
3889
  Object.defineProperty(GeneralInformationWAComponent.prototype, "isTouchedForm", {
@@ -3931,6 +3953,8 @@ var GeneralInformationWAComponent = /** @class */ (function () {
3931
3953
  product: new FormControl(null),
3932
3954
  catalogue: new FormControl(null),
3933
3955
  body: new FormControl(null),
3956
+ isUseExistingTemplate: new FormControl(false),
3957
+ isNeedSave: new FormControl(false),
3934
3958
  });
3935
3959
  this.form.valueChanges.subscribe(function () {
3936
3960
  setTimeout(function () {
@@ -3945,7 +3969,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
3945
3969
  this.form.disable();
3946
3970
  };
3947
3971
  GeneralInformationWAComponent.prototype.initEdit = function () {
3948
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
3972
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
3949
3973
  if (Object.entries(this.getCampaignStorage).length === 0 ||
3950
3974
  ((_c = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form) === null || _c === void 0 ? void 0 : _c.medium) !== 'WA')
3951
3975
  return;
@@ -3971,8 +3995,14 @@ var GeneralInformationWAComponent = /** @class */ (function () {
3971
3995
  this.form
3972
3996
  .get('otpValue')
3973
3997
  .setValue((_z = (_y = this.getCampaignStorage) === null || _y === void 0 ? void 0 : _y.generalInformation) === null || _z === void 0 ? void 0 : _z.form.otpValue);
3998
+ this.form
3999
+ .get('isUseExistingTemplate')
4000
+ .setValue(!!((_2 = (_1 = (_0 = this.getCampaignStorage) === null || _0 === void 0 ? void 0 : _0.generalInformation) === null || _1 === void 0 ? void 0 : _1.form) === null || _2 === void 0 ? void 0 : _2.isPrevTemplate));
4001
+ this.form
4002
+ .get('isNeedSave')
4003
+ .setValue(!!((_5 = (_4 = (_3 = this.getCampaignStorage) === null || _3 === void 0 ? void 0 : _3.generalInformation) === null || _4 === void 0 ? void 0 : _4.form) === null || _5 === void 0 ? void 0 : _5.isNeedSave));
3974
4004
  this.isHaveTemplateParam = this.form.get('isUpload').value;
3975
- this.getTemplateOptionService(null, (_0 = this.form.get('template').value) === null || _0 === void 0 ? void 0 : _0.name);
4005
+ this.getTemplateOptionService(null, (_6 = this.form.get('template').value) === null || _6 === void 0 ? void 0 : _6.name);
3976
4006
  };
3977
4007
  GeneralInformationWAComponent.prototype.initValidation = function () {
3978
4008
  for (var key in this.form.controls) {
@@ -4018,6 +4048,12 @@ var GeneralInformationWAComponent = /** @class */ (function () {
4018
4048
  this.form.get('product').updateValueAndValidity();
4019
4049
  this.form.get('body').updateValueAndValidity();
4020
4050
  }
4051
+ else if (this.getIsUtility) {
4052
+ this.form.get('from').setValidators(Validators.required);
4053
+ this.form.get('text').setValidators(Validators.required);
4054
+ this.form.get('from').updateValueAndValidity();
4055
+ this.form.get('text').updateValueAndValidity();
4056
+ }
4021
4057
  else {
4022
4058
  this.form.get('from').setValidators(Validators.required);
4023
4059
  this.form.get('text').setValidators(Validators.required);
@@ -4088,7 +4124,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
4088
4124
  if (event === void 0) { event = null; }
4089
4125
  if (filter === void 0) { filter = ''; }
4090
4126
  if (isInfinite === void 0) { isInfinite = false; }
4091
- var _a, _b, _c;
4127
+ var _a, _b, _c, _d;
4092
4128
  this.isLoadingTemplateOption = true;
4093
4129
  var parameterList = [
4094
4130
  this.initParam('pageNo', this.pageNoTemplateOption, 'number'),
@@ -4101,6 +4137,10 @@ var GeneralInformationWAComponent = /** @class */ (function () {
4101
4137
  ];
4102
4138
  if (this.isReadOnlyMode)
4103
4139
  parameterList.push(this.initParam('summary', true, 'string'));
4140
+ var messageType = (_d = this.form.value) === null || _d === void 0 ? void 0 : _d.channel;
4141
+ if (messageType === 'utility') {
4142
+ parameterList.push(this.initParam('isDirectSend', true, 'string'));
4143
+ }
4104
4144
  var subs = this.apiAdapterService
4105
4145
  .executeApiRequest(parameterList, '/message/template', 'GET')
4106
4146
  .subscribe(function (resp) {
@@ -4209,6 +4249,15 @@ var GeneralInformationWAComponent = /** @class */ (function () {
4209
4249
  enumerable: true,
4210
4250
  configurable: true
4211
4251
  });
4252
+ Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsUtility", {
4253
+ get: function () {
4254
+ var _a;
4255
+ return (this.form.get('channel').value &&
4256
+ ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'utility');
4257
+ },
4258
+ enumerable: true,
4259
+ configurable: true
4260
+ });
4212
4261
  GeneralInformationWAComponent.prototype.getNextAccountBatch = function () {
4213
4262
  if (!this.isHaveNextAccountOption)
4214
4263
  return;
@@ -4445,6 +4494,28 @@ var GeneralInformationWAComponent = /** @class */ (function () {
4445
4494
  }
4446
4495
  this.updateTemplate(this.form.get('template').value);
4447
4496
  };
4497
+ GeneralInformationWAComponent.prototype.handleChangeTemplate = function (useExisting) {
4498
+ if (useExisting) {
4499
+ this.form.get('template').setValidators(Validators.required);
4500
+ this.form.get('text').reset();
4501
+ this.form.get('text').clearValidators();
4502
+ this.form.get('text').updateValueAndValidity();
4503
+ this.form.get('template').updateValueAndValidity();
4504
+ }
4505
+ else {
4506
+ this.form.get('template').reset();
4507
+ this.form.get('template').clearValidators();
4508
+ this.form.get('text').setValidators(Validators.required);
4509
+ this.form.get('text').updateValueAndValidity();
4510
+ this.form.get('template').updateValueAndValidity();
4511
+ }
4512
+ };
4513
+ GeneralInformationWAComponent.prototype.handleChangeFrom = function (value) {
4514
+ var isUseExistingTemplate = this.form.value.isUseExistingTemplate;
4515
+ if (!isUseExistingTemplate)
4516
+ return;
4517
+ this.getTemplateOptionService(value);
4518
+ };
4448
4519
  GeneralInformationWAComponent.prototype.ngOnDestroy = function () {
4449
4520
  this.subscribers.forEach(function (each) { return each.unsubscribe(); });
4450
4521
  };
@@ -4469,7 +4540,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
4469
4540
  GeneralInformationWAComponent = __decorate([
4470
4541
  Component({
4471
4542
  selector: 'lib-general-information-wa',
4472
- 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",
4543
+ template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isUpload\"\r\n (change)=\"updateDownloadCSV($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n <div\r\n *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> OTP Value </mat-label>\r\n\r\n <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning\r\n before permanent revocation.\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #existingTmpl>\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n",
4473
4544
  styles: [".asterix--after:after{content:\"*\";color:red}"]
4474
4545
  })
4475
4546
  ], GeneralInformationWAComponent);
@@ -5062,8 +5133,8 @@ var GeneralInformationComponent = /** @class */ (function () {
5062
5133
  GeneralInformationComponent = __decorate([
5063
5134
  Component({
5064
5135
  selector: 'lib-new-campaign-general-information',
5065
- 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",
5066
- 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}"]
5136
+ template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <!-- Template Line Text -->\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <!-- Template Line Button | Confirmation -->\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n\r\n <!-- Template Line Carousel -->\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n\r\n <!-- Template Line Image Carousel -->\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Button Line -->\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <!-- ./ Button Line -->\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
5137
+ 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}"]
5067
5138
  })
5068
5139
  ], GeneralInformationComponent);
5069
5140
  return GeneralInformationComponent;
@@ -5324,7 +5395,6 @@ var NewNumberBasesComponent = /** @class */ (function () {
5324
5395
  this.toastr.error('Upload media failed, max size 30mb');
5325
5396
  return;
5326
5397
  }
5327
- // this.uploadMediaService(file[0]);
5328
5398
  this.getPresignedUrlService(file[0]);
5329
5399
  };
5330
5400
  NewNumberBasesComponent.prototype.getPresignedUrlService = function (file) {
@@ -5683,5 +5753,5 @@ var ConfirmationModule = /** @class */ (function () {
5683
5753
  * Generated bundle index. Do not edit.
5684
5754
  */
5685
5755
 
5686
- export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexComponent, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardComponent, DashboardModule, MatSelectInfiniteScrollDirective, SearchComponent, SearchModule, SummaryComponent, WizardComponent as ɵa, NewCampaignComponent as ɵb, GeneralInformationComponent as ɵc, SchedulerComponent as ɵd, SummaryComponent as ɵe, NewNumberBasesComponent as ɵf, GeneralInformationLineComponent as ɵg, GeneralInformationWAComponent as ɵh, GeneralInformationSMSComponent as ɵi, GeneralInformationEmailComponent as ɵj, PendingApprovalDialogViewComponent as ɵk, FailoverMechanismComponent as ɵl, ApiAdapterServiceService as ɵm, ViewingListOfCampaignTableComponent as ɵn, FilterInListOfCampaignComponent as ɵo, ApiAdapterServiceService as ɵp, MatSelectInfiniteScrollDirective as ɵq, CustomPaginator as ɵr, ConfirmationComponent as ɵs, ConfirmationModel as ɵt, SharedServicesService as ɵu };
5756
+ 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 };
5687
5757
  //# sourceMappingURL=adlfe-campaign-management-library.js.map