@adlfe/campaign-management-library 2.14.1 → 2.14.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 (18) hide show
  1. package/bundles/adlfe-campaign-management-library.umd.js +87 -59
  2. package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
  3. package/bundles/adlfe-campaign-management-library.umd.min.js +2 -2
  4. package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
  5. package/esm2015/lib/campaign-management/models/general-information-wa-req.model.js +31 -13
  6. package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +52 -42
  7. package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +4 -1
  8. package/esm2015/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +4 -7
  9. package/esm5/lib/campaign-management/models/general-information-wa-req.model.js +31 -13
  10. package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +52 -42
  11. package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +4 -1
  12. package/esm5/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +4 -7
  13. package/fesm2015/adlfe-campaign-management-library.js +87 -59
  14. package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
  15. package/fesm5/adlfe-campaign-management-library.js +87 -59
  16. package/fesm5/adlfe-campaign-management-library.js.map +1 -1
  17. package/lib/campaign-management/models/general-information-wa-req.model.d.ts +1 -0
  18. package/package.json +1 -1
package/fesm2015/adlfe-campaign-management-library.js CHANGED
@@ -2422,23 +2422,39 @@ class GeneralInformationWAReqModel {
2422
2422
  };
2423
2423
  }
2424
2424
  if (source.template) {
2425
+ let qrIndex = 0;
2426
+ const finalButtons = (_g = (_f = source.paramButton) === null || _f === void 0 ? void 0 : _f.reduce((result, each, idx) => {
2427
+ var _a, _b, _c, _d, _e;
2428
+ const btnDef = (_b = (_a = source.template) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b[idx];
2429
+ if (((_c = btnDef) === null || _c === void 0 ? void 0 : _c.type) === 'QUICK_REPLY') {
2430
+ const qrParam = source.buttonParams && source.buttonParams[qrIndex]
2431
+ ? source.buttonParams[qrIndex]
2432
+ : null;
2433
+ qrIndex++;
2434
+ result.push(qrParam ? [qrParam.payload ? qrParam.payload : qrParam.label] : []);
2435
+ }
2436
+ else {
2437
+ result.push((_e = (_d = each.name) === null || _d === void 0 ? void 0 : _d.map((t) => t.name), (_e !== null && _e !== void 0 ? _e : [])));
2438
+ }
2439
+ return result;
2440
+ }, []), (_g !== null && _g !== void 0 ? _g : []));
2425
2441
  this.template = {
2426
2442
  id: source.template.ID,
2427
2443
  name: source.template.name,
2428
2444
  lang: source.template.lang,
2429
2445
  headerUrl: source.targetURL,
2430
- header: (_g = (_f = source.paramHeader) === null || _f === void 0 ? void 0 : _f.map((t) => t.name), (_g !== null && _g !== void 0 ? _g : [])),
2431
- data: ((_h = source.variables) === null || _h === void 0 ? void 0 : _h.length) ? source.variables.map((v) => v.paramName)
2432
- : (_k = (_j = source.paramBody) === null || _j === void 0 ? void 0 : _j.map((t) => t.name), (_k !== null && _k !== void 0 ? _k : [])),
2433
- button: source.buttonParams && source.buttonParams.length > 0
2434
- ? source.buttonParams.map((btn) => [
2435
- btn.payload ? btn.payload : btn.label,
2436
- ])
2437
- : (_m = (_l = source.paramButton) === null || _l === void 0 ? void 0 : _l.reduce((result, each) => {
2438
- var _a;
2439
- result.push((_a = each.name.map((t) => t.name), (_a !== null && _a !== void 0 ? _a : [])));
2440
- return result;
2441
- }, []), (_m !== null && _m !== void 0 ? _m : [])),
2446
+ header: (_j = (_h = source.paramHeader) === null || _h === void 0 ? void 0 : _h.map((t) => t.name), (_j !== null && _j !== void 0 ? _j : [])),
2447
+ data: ((_k = source.variables) === null || _k === void 0 ? void 0 : _k.length) ? source.variables.map((v) => v.paramName)
2448
+ : (_m = (_l = source.paramBody) === null || _l === void 0 ? void 0 : _l.map((t) => t.name), (_m !== null && _m !== void 0 ? _m : [])),
2449
+ button: finalButtons,
2450
+ buttonParams: source.buttonParams
2451
+ ? source.buttonParams.map((btn) => {
2452
+ return {
2453
+ label: btn.label,
2454
+ payload: btn.payload ? btn.payload : btn.label,
2455
+ };
2456
+ })
2457
+ : [],
2442
2458
  };
2443
2459
  if (source.template.category === 'AUTHENTICATION')
2444
2460
  this.template = {
@@ -2447,6 +2463,7 @@ class GeneralInformationWAReqModel {
2447
2463
  header: null,
2448
2464
  data: [source.otpValue],
2449
2465
  button: [[source.otpValue]],
2466
+ buttonParams: [],
2450
2467
  };
2451
2468
  if (source.template.ID)
2452
2469
  this.template.id = source.template.ID;
@@ -2466,6 +2483,7 @@ class GeneralInformationWAReqModel {
2466
2483
  header: null,
2467
2484
  button: null,
2468
2485
  data: mappedVariables,
2486
+ buttonParams: [],
2469
2487
  };
2470
2488
  }
2471
2489
  this.isNeedSave = source.isNeedSave;
@@ -2756,6 +2774,9 @@ let NewCampaignComponent = class NewCampaignComponent {
2756
2774
  withoutKeyData: true,
2757
2775
  },
2758
2776
  ];
2777
+ if (payloadValue.template && payloadValue.template.buttonParams) {
2778
+ delete payloadValue.template.buttonParams;
2779
+ }
2759
2780
  const subs = this.apiAdapterService
2760
2781
  .executeApiRequest(parameterList, this.generalInformationData.id
2761
2782
  ? `/campaign/${this.generalInformationData.id}`
@@ -3961,7 +3982,6 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
3961
3982
  ((_c = formValues) === null || _c === void 0 ? void 0 : _c.medium) !== 'WA') {
3962
3983
  return;
3963
3984
  }
3964
- console.log(formValues, 'formValues');
3965
3985
  (_d = this.getControl('channel')) === null || _d === void 0 ? void 0 : _d.setValue((_e = formValues) === null || _e === void 0 ? void 0 : _e.channel);
3966
3986
  (_f = this.getControl('media')) === null || _f === void 0 ? void 0 : _f.setValue((_g = formValues) === null || _g === void 0 ? void 0 : _g.media);
3967
3987
  (_h = this.getControl('from')) === null || _h === void 0 ? void 0 : _h.setValue((_j = formValues) === null || _j === void 0 ? void 0 : _j.from);
@@ -4307,72 +4327,83 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4307
4327
  return ((_a = this.getControl('isUpload')) === null || _a === void 0 ? void 0 : _a.value) || false;
4308
4328
  }
4309
4329
  updateTemplate(template) {
4310
- 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;
4330
+ 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;
4311
4331
  this.isShowParameter = false;
4312
4332
  if (!template)
4313
4333
  return;
4314
4334
  const formStorage = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
4315
- const savedButtonParams = ((_c = formStorage) === null || _c === void 0 ? void 0 : _c.buttonParams) || [];
4316
4335
  const buttonParamsArray = this.form.get('buttonParams');
4317
4336
  buttonParamsArray.clear();
4318
4337
  if (template && template.buttons && template.buttons.length > 0) {
4319
- const quickReplyButtons = template.buttons.filter((btn) => btn.type === 'QUICK_REPLY');
4320
- quickReplyButtons.forEach((btn, index) => {
4321
- var _a;
4322
- const existingPayload = ((_a = savedButtonParams[index]) === null || _a === void 0 ? void 0 : _a.payload) || '';
4323
- buttonParamsArray.push(new FormGroup({
4324
- label: new FormControl(btn.text),
4325
- payload: new FormControl({
4326
- value: existingPayload,
4327
- disabled: this.isReadOnlyMode,
4328
- }, [Validators$1.maxLength(256)]),
4329
- }));
4338
+ let qrIndexLocal = 0;
4339
+ template.buttons.forEach((btn, index) => {
4340
+ var _a, _b, _c;
4341
+ if (btn.type === 'QUICK_REPLY') {
4342
+ let existingPayload = '';
4343
+ // SKENARIO 1: Data dari Local State
4344
+ if (((_a = formStorage) === null || _a === void 0 ? void 0 : _a.buttonParams) && formStorage.buttonParams.length > 0) {
4345
+ existingPayload = ((_b = formStorage.buttonParams[qrIndexLocal]) === null || _b === void 0 ? void 0 : _b.payload) || '';
4346
+ qrIndexLocal++;
4347
+ }
4348
+ // SKENARIO 2: Data dari BE
4349
+ else if (((_c = formStorage) === null || _c === void 0 ? void 0 : _c.paramButton) &&
4350
+ Array.isArray(formStorage.paramButton[index])) {
4351
+ existingPayload = formStorage.paramButton[index][0] || '';
4352
+ }
4353
+ buttonParamsArray.push(new FormGroup({
4354
+ label: new FormControl(btn.text),
4355
+ payload: new FormControl({
4356
+ value: existingPayload,
4357
+ disabled: this.isReadOnlyMode,
4358
+ }, [Validators$1.maxLength(256)]),
4359
+ }));
4360
+ }
4330
4361
  });
4331
4362
  }
4332
4363
  this.isHaveTemplateParam =
4333
- (_f = (_e = (_d = template.header) === null || _d === void 0 ? void 0 : _d.examples) === null || _e === void 0 ? void 0 : _e.length, (_f !== null && _f !== void 0 ? _f : 0)) > 0 ||
4334
- (_j = (_h = (_g = template.body) === null || _g === void 0 ? void 0 : _g.examples) === null || _h === void 0 ? void 0 : _h.length, (_j !== null && _j !== void 0 ? _j : 0)) > 0 ||
4335
- (_l = (_k = template.buttons) === null || _k === void 0 ? void 0 : _k.length, (_l !== null && _l !== void 0 ? _l : 0)) > 0;
4336
- if (['image', 'video', 'document'].includes((_p = (_o = (_m = template) === null || _m === void 0 ? void 0 : _m.header) === null || _o === void 0 ? void 0 : _o.type) === null || _p === void 0 ? void 0 : _p.toLowerCase())) {
4337
- (_q = this.getControl('fileName')) === null || _q === void 0 ? void 0 : _q.setValue((_w = (_t = (_s = (_r = this.getCampaignStorage) === null || _r === void 0 ? void 0 : _r.generalInformation) === null || _s === void 0 ? void 0 : _s.form.fileName, (_t !== null && _t !== void 0 ? _t : (_v = (_u = this.getCampaignStorage) === null || _u === void 0 ? void 0 : _u.generalInformation) === null || _v === void 0 ? void 0 : _v.form.targetURL)), (_w !== null && _w !== void 0 ? _w : template.header.url)));
4338
- (_x = this.getControl('targetURL')) === null || _x === void 0 ? void 0 : _x.setValue((_0 = (_z = (_y = this.getCampaignStorage) === null || _y === void 0 ? void 0 : _y.generalInformation) === null || _z === void 0 ? void 0 : _z.form.targetURL, (_0 !== null && _0 !== void 0 ? _0 : template.header.url)));
4339
- this.fileTypeChange((_3 = (_2 = (_1 = template) === null || _1 === void 0 ? void 0 : _1.header) === null || _2 === void 0 ? void 0 : _2.type) === null || _3 === void 0 ? void 0 : _3.toLowerCase());
4340
- }
4341
- (_5 = (_4 = template.header.examples) === null || _4 === void 0 ? void 0 : _4.length, (_5 !== null && _5 !== void 0 ? _5 : 0)) > 0
4342
- ? (_6 = this.getControl('paramHeader')) === null || _6 === void 0 ? void 0 : _6.setValidators(Validators$1.required) : (_7 = this.getControl('paramHeader')) === null || _7 === void 0 ? void 0 : _7.clearValidators();
4343
- (_9 = (_8 = template.body.examples) === null || _8 === void 0 ? void 0 : _8.length, (_9 !== null && _9 !== void 0 ? _9 : 0)) > 0
4344
- ? (_10 = this.getControl('paramBody')) === null || _10 === void 0 ? void 0 : _10.setValidators(Validators$1.required) : (_11 = this.getControl('paramBody')) === null || _11 === void 0 ? void 0 : _11.clearValidators();
4345
- (_13 = (_12 = template.buttons) === null || _12 === void 0 ? void 0 : _12.length, (_13 !== null && _13 !== void 0 ? _13 : 0)) > 0
4346
- ? (_14 = this.getControl('paramButton')) === null || _14 === void 0 ? void 0 : _14.setValidators(Validators$1.required) : (_15 = this.getControl('paramButton')) === null || _15 === void 0 ? void 0 : _15.clearValidators();
4364
+ (_e = (_d = (_c = template.header) === null || _c === void 0 ? void 0 : _c.examples) === null || _d === void 0 ? void 0 : _d.length, (_e !== null && _e !== void 0 ? _e : 0)) > 0 ||
4365
+ (_h = (_g = (_f = template.body) === null || _f === void 0 ? void 0 : _f.examples) === null || _g === void 0 ? void 0 : _g.length, (_h !== null && _h !== void 0 ? _h : 0)) > 0 ||
4366
+ (_k = (_j = template.buttons) === null || _j === void 0 ? void 0 : _j.length, (_k !== null && _k !== void 0 ? _k : 0)) > 0;
4367
+ if (['image', 'video', 'document'].includes((_o = (_m = (_l = template) === null || _l === void 0 ? void 0 : _l.header) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.toLowerCase())) {
4368
+ (_p = this.getControl('fileName')) === null || _p === void 0 ? void 0 : _p.setValue((_v = (_s = (_r = (_q = this.getCampaignStorage) === null || _q === void 0 ? void 0 : _q.generalInformation) === null || _r === void 0 ? void 0 : _r.form.fileName, (_s !== null && _s !== void 0 ? _s : (_u = (_t = this.getCampaignStorage) === null || _t === void 0 ? void 0 : _t.generalInformation) === null || _u === void 0 ? void 0 : _u.form.targetURL)), (_v !== null && _v !== void 0 ? _v : template.header.url)));
4369
+ (_w = this.getControl('targetURL')) === null || _w === void 0 ? void 0 : _w.setValue((_z = (_y = (_x = this.getCampaignStorage) === null || _x === void 0 ? void 0 : _x.generalInformation) === null || _y === void 0 ? void 0 : _y.form.targetURL, (_z !== null && _z !== void 0 ? _z : template.header.url)));
4370
+ this.fileTypeChange((_2 = (_1 = (_0 = template) === null || _0 === void 0 ? void 0 : _0.header) === null || _1 === void 0 ? void 0 : _1.type) === null || _2 === void 0 ? void 0 : _2.toLowerCase());
4371
+ }
4372
+ (_4 = (_3 = template.header.examples) === null || _3 === void 0 ? void 0 : _3.length, (_4 !== null && _4 !== void 0 ? _4 : 0)) > 0
4373
+ ? (_5 = this.getControl('paramHeader')) === null || _5 === void 0 ? void 0 : _5.setValidators(Validators$1.required) : (_6 = this.getControl('paramHeader')) === null || _6 === void 0 ? void 0 : _6.clearValidators();
4374
+ (_8 = (_7 = template.body.examples) === null || _7 === void 0 ? void 0 : _7.length, (_8 !== null && _8 !== void 0 ? _8 : 0)) > 0
4375
+ ? (_9 = this.getControl('paramBody')) === null || _9 === void 0 ? void 0 : _9.setValidators(Validators$1.required) : (_10 = this.getControl('paramBody')) === null || _10 === void 0 ? void 0 : _10.clearValidators();
4376
+ (_12 = (_11 = template.buttons) === null || _11 === void 0 ? void 0 : _11.length, (_12 !== null && _12 !== void 0 ? _12 : 0)) > 0
4377
+ ? (_13 = this.getControl('paramButton')) === null || _13 === void 0 ? void 0 : _13.setValidators(Validators$1.required) : (_14 = this.getControl('paramButton')) === null || _14 === void 0 ? void 0 : _14.clearValidators();
4347
4378
  this.form.get('paramHeader').controls = [];
4348
4379
  this.form.get('paramHeader').reset();
4349
- (_16 = this.getControl('paramHeader')) === null || _16 === void 0 ? void 0 : _16.updateValueAndValidity();
4380
+ (_15 = this.getControl('paramHeader')) === null || _15 === void 0 ? void 0 : _15.updateValueAndValidity();
4350
4381
  this.form.get('paramBody').controls = [];
4351
4382
  this.form.get('paramBody').reset();
4352
- (_17 = this.getControl('paramBody')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
4383
+ (_16 = this.getControl('paramBody')) === null || _16 === void 0 ? void 0 : _16.updateValueAndValidity();
4353
4384
  this.form.get('paramButton').controls = [];
4354
4385
  this.form.get('paramButton').reset();
4355
- (_18 = this.getControl('paramButton')) === null || _18 === void 0 ? void 0 : _18.updateValueAndValidity();
4356
- (_19 = this.getControl('otpValue')) === null || _19 === void 0 ? void 0 : _19.setValue('');
4357
- (_20 = this.getControl('otpValue')) === null || _20 === void 0 ? void 0 : _20.clearValidators();
4358
- (_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.updateValueAndValidity();
4386
+ (_17 = this.getControl('paramButton')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
4387
+ (_18 = this.getControl('otpValue')) === null || _18 === void 0 ? void 0 : _18.setValue('');
4388
+ (_19 = this.getControl('otpValue')) === null || _19 === void 0 ? void 0 : _19.clearValidators();
4389
+ (_20 = this.getControl('otpValue')) === null || _20 === void 0 ? void 0 : _20.updateValueAndValidity();
4359
4390
  if (template.category === 'AUTHENTICATION') {
4360
- (_22 = this.getControl('otpValue')) === null || _22 === void 0 ? void 0 : _22.setValue((_30 = (_24 = (_23 = formStorage) === null || _23 === void 0 ? void 0 : _23.otpValue, (_24 !== null && _24 !== void 0 ? _24 : (_29 = [...(_28 = (_27 = (_26 = (_25 = formStorage) === null || _25 === void 0 ? void 0 : _25.template) === null || _26 === void 0 ? void 0 : _26.body) === null || _27 === void 0 ? void 0 : _27.examples, (_28 !== null && _28 !== void 0 ? _28 : []))]) === null || _29 === void 0 ? void 0 : _29.pop())), (_30 !== null && _30 !== void 0 ? _30 : '')));
4361
- (_31 = this.getControl('otpValue')) === null || _31 === void 0 ? void 0 : _31.setValidators(Validators$1.required);
4362
- (_32 = this.getControl('otpValue')) === null || _32 === void 0 ? void 0 : _32.updateValueAndValidity();
4391
+ (_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.setValue((_29 = (_23 = (_22 = formStorage) === null || _22 === void 0 ? void 0 : _22.otpValue, (_23 !== null && _23 !== void 0 ? _23 : (_28 = [...(_27 = (_26 = (_25 = (_24 = formStorage) === null || _24 === void 0 ? void 0 : _24.template) === null || _25 === void 0 ? void 0 : _25.body) === null || _26 === void 0 ? void 0 : _26.examples, (_27 !== null && _27 !== void 0 ? _27 : []))]) === null || _28 === void 0 ? void 0 : _28.pop())), (_29 !== null && _29 !== void 0 ? _29 : '')));
4392
+ (_30 = this.getControl('otpValue')) === null || _30 === void 0 ? void 0 : _30.setValidators(Validators$1.required);
4393
+ (_31 = this.getControl('otpValue')) === null || _31 === void 0 ? void 0 : _31.updateValueAndValidity();
4363
4394
  }
4364
- (_33 = template.header.examples) === null || _33 === void 0 ? void 0 : _33.forEach((each, index) => {
4395
+ (_32 = template.header.examples) === null || _32 === void 0 ? void 0 : _32.forEach((each, index) => {
4365
4396
  var _a, _b, _c, _d, _e, _f, _g;
4366
4397
  this.addParamHeader((_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramHeader) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramHeader) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : '')));
4367
4398
  });
4368
- (_34 = template.body.examples) === null || _34 === void 0 ? void 0 : _34.forEach((each, index) => {
4399
+ (_33 = template.body.examples) === null || _33 === void 0 ? void 0 : _33.forEach((each, index) => {
4369
4400
  var _a, _b, _c, _d, _e, _f, _g;
4370
4401
  let paramValue = (_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramBody) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramBody) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : ''));
4371
4402
  if (['$UnsubscribeAccount'].includes(each))
4372
4403
  paramValue = each;
4373
4404
  this.addParamBody(paramValue);
4374
4405
  });
4375
- (_35 = template.buttons) === null || _35 === void 0 ? void 0 : _35.forEach((each, index) => {
4406
+ (_34 = template.buttons) === null || _34 === void 0 ? void 0 : _34.forEach((each, index) => {
4376
4407
  var _a, _b, _c, _d;
4377
4408
  this.addParamButton();
4378
4409
  const button = this.getButton;
@@ -4598,7 +4629,7 @@ __decorate([
4598
4629
  GeneralInformationWAComponent = __decorate([
4599
4630
  Component({
4600
4631
  selector: 'lib-general-information-wa',
4601
- template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div *ngIf=\"!getIsUtility\">\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n\r\n <div *ngIf=\"getIsUtility\">\r\n You can send directly a utility message. You can choose between existing utility\r\n templates or creating a new one. If you create a new template, the system may check\r\n whether the content already exists as a template.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n class=\"button-parameter-section mt-4\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <h5 class=\"mb-3 font-weight-bold\">Button Parameter</h5>\r\n\r\n <div formArrayName=\"buttonParams\">\r\n <div\r\n *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n [formGroupName]=\"i\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Button {{ i + 1 }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n [placeholder]=\"'Parameter ' + (i + 1)\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isUpload\"\r\n (change)=\"updateDownloadCSV($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n <div\r\n *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> OTP Value </mat-label>\r\n\r\n <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"add-variable-wrapper\">\r\n <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n </button>\r\n </div>\r\n\r\n <div class=\"body-content-wrapper\">\r\n <h3 class=\"body-content-title\">Body Content</h3>\r\n <p class=\"body-content-subtitle\">\r\n Input the parameter to show during the preview. You can use predefined\r\n variable, drag and drop to text field below\r\n </p>\r\n <div class=\"predefined-variable-wrapper\">\r\n <span class=\"btn-predefined\">\r\n <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n Unsubscribe Account\r\n </span>\r\n </div>\r\n <div class=\"variables-list\" formArrayName=\"variables\">\r\n <div\r\n class=\"variable-row d-flex align-items-start mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <div class=\"variable-sequence mr-3\">\r\n {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n </div>\r\n <div class=\"variable-input-wrapper flex-grow-1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"e.g. Name, Verification code\"\r\n />\r\n </mat-form-field>\r\n\r\n <ng-container\r\n *ngFor=\"let validation of validationMessages?.paramName\"\r\n >\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-delete ml-3\"\r\n (click)=\"removeVariable(i)\"\r\n >\r\n <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #existingTmpl>\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"Seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n <div\r\n class=\"template-container mt-5\"\r\n *ngIf=\"!form.get('isDownloadVariableXLS')?.value\"\r\n formArrayName=\"variables\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"0\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 1 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Name\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 2 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Verification code\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n Direct Send misuse detected. Please review your messaging practices.\r\n </div>\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n Direct Send access restricted for 7 days due to continued misuse.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n permanent revocation.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n Direct Send access has been permanently revoked.\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
4632
+ template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div *ngIf=\"!getIsUtility\">\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n\r\n <div *ngIf=\"getIsUtility\">\r\n You can send directly a utility message. You can choose between existing utility\r\n templates or creating a new one. If you create a new template, the system may check\r\n whether the content already exists as a template.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *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 <!-- rizal -->\r\n <h5\r\n class=\"mb-3 font-weight-bold mt-4\"\r\n *ngIf=\"(!isUsingExcelBulk && buttonParamsControls.length > 0) || isShowParameter\"\r\n >\r\n Button Parameter\r\n </h5>\r\n <div\r\n class=\"button-parameter-section\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <div formArrayName=\"buttonParams\">\r\n <div\r\n *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ i + 1 }}</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter 1</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n placeholder=\"Parameter 1\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- titus -->\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"add-variable-wrapper\">\r\n <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n </button>\r\n </div>\r\n\r\n <div class=\"body-content-wrapper\">\r\n <h3 class=\"body-content-title\">Body Content</h3>\r\n <p class=\"body-content-subtitle\">\r\n Input the parameter to show during the preview. You can use predefined\r\n variable, drag and drop to text field below\r\n </p>\r\n <div class=\"predefined-variable-wrapper\">\r\n <span class=\"btn-predefined\">\r\n <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n Unsubscribe Account\r\n </span>\r\n </div>\r\n <div class=\"variables-list\" formArrayName=\"variables\">\r\n <div\r\n class=\"variable-row d-flex align-items-start mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <div class=\"variable-sequence mr-3\">\r\n {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n </div>\r\n <div class=\"variable-input-wrapper flex-grow-1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"e.g. Name, Verification code\"\r\n />\r\n </mat-form-field>\r\n\r\n <ng-container\r\n *ngFor=\"let validation of validationMessages?.paramName\"\r\n >\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-delete ml-3\"\r\n (click)=\"removeVariable(i)\"\r\n >\r\n <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #existingTmpl>\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"Seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n <div\r\n class=\"template-container mt-5\"\r\n *ngIf=\"!form.get('isDownloadVariableXLS')?.value\"\r\n formArrayName=\"variables\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"0\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 1 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Name\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 2 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Verification code\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n Direct Send misuse detected. Please review your messaging practices.\r\n </div>\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n Direct Send access restricted for 7 days due to continued misuse.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n permanent revocation.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n Direct Send access has been permanently revoked.\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
4602
4633
  styles: [".asterix--after:after{content:\"*\";color:red}.template-container{background-color:#fff;border-radius:.5rem;width:100%;max-width:56rem;box-sizing:border-box}.template-container .variable-wapper{margin-bottom:.5rem;display:flex;align-items:center}.template-container .add-variable-wrapper{display:flex;align-items:center;justify-content:flex-end;margin-bottom:.5rem}.template-container .add-variable-wrapper .btn-add-variable{color:#3b82f6!important}.template-container .body-content-wrapper{background-color:#d1e4fd;border-radius:.5rem;padding:1.5rem;margin-bottom:.5rem}.template-container .body-content-wrapper .body-content-title{color:#1e293b;font-size:1.125rem;font-weight:700;margin:0 0 .5rem}.template-container .body-content-wrapper .body-content-subtitle{color:#6b7280;font-size:.875rem;margin:0 0 1.25rem}.template-container .body-content-wrapper .predefined-variable-wrapper{margin-bottom:1.5rem}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined{display:inline-flex;align-items:center;background-color:#22c55e;color:#fff;font-size:.75rem;font-weight:600;padding:.375rem .75rem;border-radius:9999px;cursor:grab;transition:background-color .2s}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined:hover{background-color:#16a34a}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined .icon-small{font-size:16px;width:16px;height:16px;margin-right:.25rem;line-height:16px}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin-bottom:0!important}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-outline{background-color:#fff!important;border-radius:5px}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-flex{background-color:transparent!important}.template-container .body-content-wrapper .custom-variable-field ::ng-deep input.mat-input-element{margin-top:-8px!important}.template-container .body-content-wrapper .custom-error-text{color:#f44336;margin-top:4px;padding-right:12px}.template-container .body-content-wrapper .variable-sequence{background-color:#fff;border:1px solid #e2e8f0;color:#4b5563;border-radius:5px;font-weight:500;min-width:3.5rem;text-align:center;height:51px;display:flex;align-items:center;justify-content:center;margin-top:4px}.template-container .body-content-wrapper .btn-delete{background:0 0;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;height:51px;margin-top:4px;transition:transform .2s}.template-container .body-content-wrapper .btn-delete:hover{transform:scale(1.1)}.template-container .checkbox-wrapper{display:flex;justify-content:flex-end;margin-top:.5rem}.template-container .checkbox-wrapper .checkbox-xlsx{font-size:.875rem;font-weight:500;color:#374151}"]
4603
4634
  })
4604
4635
  ], GeneralInformationWAComponent);
@@ -5334,13 +5365,10 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
5334
5365
  this.initParam('platform', ((_e = (_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.platform) || 'WA', 'string'),
5335
5366
  this.initParam('templateName', (_g = (_f = genInfoForm) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.name, 'string'),
5336
5367
  this.initParam('templateLang', (_j = (_h = genInfoForm) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.lang, 'string'),
5368
+ this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map((t) => t.id).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'),
5337
5369
  ];
5338
- if (isNeedSave) {
5339
- // SKENARIO 1: USE EXISTING / TEMPLATE SUDAH DISAVE
5340
- parameterList.push(this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map((t) => t.id).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'));
5341
- }
5342
- else {
5343
- // SKENARIO 2: CREATE NEW (Auto-generated dll)
5370
+ // 2. Parameter Tambahan HANYA JIKA skenario Create New (Belum di-save)
5371
+ if (!isNeedSave) {
5344
5372
  const safeBodyText = encodeURIComponent(((_m = genInfoForm) === null || _m === void 0 ? void 0 : _m.text) || '');
5345
5373
  parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
5346
5374
  const variables = (_o = genInfoForm) === null || _o === void 0 ? void 0 : _o.variables;