@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/bundles/adlfe-campaign-management-library.umd.js CHANGED
@@ -2724,23 +2724,39 @@
2724
2724
  };
2725
2725
  }
2726
2726
  if (source.template) {
2727
+ var qrIndex_1 = 0;
2728
+ var finalButtons = (_g = (_f = source.paramButton) === null || _f === void 0 ? void 0 : _f.reduce(function (result, each, idx) {
2729
+ var _a, _b, _c, _d, _e;
2730
+ var btnDef = (_b = (_a = source.template) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b[idx];
2731
+ if (((_c = btnDef) === null || _c === void 0 ? void 0 : _c.type) === 'QUICK_REPLY') {
2732
+ var qrParam = source.buttonParams && source.buttonParams[qrIndex_1]
2733
+ ? source.buttonParams[qrIndex_1]
2734
+ : null;
2735
+ qrIndex_1++;
2736
+ result.push(qrParam ? [qrParam.payload ? qrParam.payload : qrParam.label] : []);
2737
+ }
2738
+ else {
2739
+ result.push((_e = (_d = each.name) === null || _d === void 0 ? void 0 : _d.map(function (t) { return t.name; }), (_e !== null && _e !== void 0 ? _e : [])));
2740
+ }
2741
+ return result;
2742
+ }, []), (_g !== null && _g !== void 0 ? _g : []));
2727
2743
  this.template = {
2728
2744
  id: source.template.ID,
2729
2745
  name: source.template.name,
2730
2746
  lang: source.template.lang,
2731
2747
  headerUrl: source.targetURL,
2732
- header: (_g = (_f = source.paramHeader) === null || _f === void 0 ? void 0 : _f.map(function (t) { return t.name; }), (_g !== null && _g !== void 0 ? _g : [])),
2733
- data: ((_h = source.variables) === null || _h === void 0 ? void 0 : _h.length) ? source.variables.map(function (v) { return v.paramName; })
2734
- : (_k = (_j = source.paramBody) === null || _j === void 0 ? void 0 : _j.map(function (t) { return t.name; }), (_k !== null && _k !== void 0 ? _k : [])),
2735
- button: source.buttonParams && source.buttonParams.length > 0
2736
- ? source.buttonParams.map(function (btn) { return [
2737
- btn.payload ? btn.payload : btn.label,
2738
- ]; })
2739
- : (_m = (_l = source.paramButton) === null || _l === void 0 ? void 0 : _l.reduce(function (result, each) {
2740
- var _a;
2741
- result.push((_a = each.name.map(function (t) { return t.name; }), (_a !== null && _a !== void 0 ? _a : [])));
2742
- return result;
2743
- }, []), (_m !== null && _m !== void 0 ? _m : [])),
2748
+ header: (_j = (_h = source.paramHeader) === null || _h === void 0 ? void 0 : _h.map(function (t) { return t.name; }), (_j !== null && _j !== void 0 ? _j : [])),
2749
+ data: ((_k = source.variables) === null || _k === void 0 ? void 0 : _k.length) ? source.variables.map(function (v) { return v.paramName; })
2750
+ : (_m = (_l = source.paramBody) === null || _l === void 0 ? void 0 : _l.map(function (t) { return t.name; }), (_m !== null && _m !== void 0 ? _m : [])),
2751
+ button: finalButtons,
2752
+ buttonParams: source.buttonParams
2753
+ ? source.buttonParams.map(function (btn) {
2754
+ return {
2755
+ label: btn.label,
2756
+ payload: btn.payload ? btn.payload : btn.label,
2757
+ };
2758
+ })
2759
+ : [],
2744
2760
  };
2745
2761
  if (source.template.category === 'AUTHENTICATION')
2746
2762
  this.template = {
@@ -2749,6 +2765,7 @@
2749
2765
  header: null,
2750
2766
  data: [source.otpValue],
2751
2767
  button: [[source.otpValue]],
2768
+ buttonParams: [],
2752
2769
  };
2753
2770
  if (source.template.ID)
2754
2771
  this.template.id = source.template.ID;
@@ -2768,6 +2785,7 @@
2768
2785
  header: null,
2769
2786
  button: null,
2770
2787
  data: mappedVariables,
2788
+ buttonParams: [],
2771
2789
  };
2772
2790
  }
2773
2791
  this.isNeedSave = source.isNeedSave;
@@ -3075,6 +3093,9 @@
3075
3093
  withoutKeyData: true,
3076
3094
  },
3077
3095
  ];
3096
+ if (payloadValue.template && payloadValue.template.buttonParams) {
3097
+ delete payloadValue.template.buttonParams;
3098
+ }
3078
3099
  var subs = this.apiAdapterService
3079
3100
  .executeApiRequest(parameterList, this.generalInformationData.id
3080
3101
  ? "/campaign/" + this.generalInformationData.id
@@ -4384,7 +4405,6 @@
4384
4405
  ((_c = formValues) === null || _c === void 0 ? void 0 : _c.medium) !== 'WA') {
4385
4406
  return;
4386
4407
  }
4387
- console.log(formValues, 'formValues');
4388
4408
  (_d = this.getControl('channel')) === null || _d === void 0 ? void 0 : _d.setValue((_e = formValues) === null || _e === void 0 ? void 0 : _e.channel);
4389
4409
  (_f = this.getControl('media')) === null || _f === void 0 ? void 0 : _f.setValue((_g = formValues) === null || _g === void 0 ? void 0 : _g.media);
4390
4410
  (_h = this.getControl('from')) === null || _h === void 0 ? void 0 : _h.setValue((_j = formValues) === null || _j === void 0 ? void 0 : _j.from);
@@ -4784,72 +4804,83 @@
4784
4804
  });
4785
4805
  GeneralInformationWAComponent.prototype.updateTemplate = function (template) {
4786
4806
  var _this = this;
4787
- 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;
4807
+ 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;
4788
4808
  this.isShowParameter = false;
4789
4809
  if (!template)
4790
4810
  return;
4791
4811
  var formStorage = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
4792
- var savedButtonParams = ((_c = formStorage) === null || _c === void 0 ? void 0 : _c.buttonParams) || [];
4793
4812
  var buttonParamsArray = this.form.get('buttonParams');
4794
4813
  buttonParamsArray.clear();
4795
4814
  if (template && template.buttons && template.buttons.length > 0) {
4796
- var quickReplyButtons = template.buttons.filter(function (btn) { return btn.type === 'QUICK_REPLY'; });
4797
- quickReplyButtons.forEach(function (btn, index) {
4798
- var _a;
4799
- var existingPayload = ((_a = savedButtonParams[index]) === null || _a === void 0 ? void 0 : _a.payload) || '';
4800
- buttonParamsArray.push(new forms.FormGroup({
4801
- label: new forms.FormControl(btn.text),
4802
- payload: new forms.FormControl({
4803
- value: existingPayload,
4804
- disabled: _this.isReadOnlyMode,
4805
- }, [forms.Validators.maxLength(256)]),
4806
- }));
4815
+ var qrIndexLocal_1 = 0;
4816
+ template.buttons.forEach(function (btn, index) {
4817
+ var _a, _b, _c;
4818
+ if (btn.type === 'QUICK_REPLY') {
4819
+ var existingPayload = '';
4820
+ // SKENARIO 1: Data dari Local State
4821
+ if (((_a = formStorage) === null || _a === void 0 ? void 0 : _a.buttonParams) && formStorage.buttonParams.length > 0) {
4822
+ existingPayload = ((_b = formStorage.buttonParams[qrIndexLocal_1]) === null || _b === void 0 ? void 0 : _b.payload) || '';
4823
+ qrIndexLocal_1++;
4824
+ }
4825
+ // SKENARIO 2: Data dari BE
4826
+ else if (((_c = formStorage) === null || _c === void 0 ? void 0 : _c.paramButton) &&
4827
+ Array.isArray(formStorage.paramButton[index])) {
4828
+ existingPayload = formStorage.paramButton[index][0] || '';
4829
+ }
4830
+ buttonParamsArray.push(new forms.FormGroup({
4831
+ label: new forms.FormControl(btn.text),
4832
+ payload: new forms.FormControl({
4833
+ value: existingPayload,
4834
+ disabled: _this.isReadOnlyMode,
4835
+ }, [forms.Validators.maxLength(256)]),
4836
+ }));
4837
+ }
4807
4838
  });
4808
4839
  }
4809
4840
  this.isHaveTemplateParam =
4810
- (_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 ||
4811
- (_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 ||
4812
- (_l = (_k = template.buttons) === null || _k === void 0 ? void 0 : _k.length, (_l !== null && _l !== void 0 ? _l : 0)) > 0;
4813
- 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())) {
4814
- (_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)));
4815
- (_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)));
4816
- 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());
4817
- }
4818
- (_5 = (_4 = template.header.examples) === null || _4 === void 0 ? void 0 : _4.length, (_5 !== null && _5 !== void 0 ? _5 : 0)) > 0
4819
- ? (_6 = this.getControl('paramHeader')) === null || _6 === void 0 ? void 0 : _6.setValidators(forms.Validators.required) : (_7 = this.getControl('paramHeader')) === null || _7 === void 0 ? void 0 : _7.clearValidators();
4820
- (_9 = (_8 = template.body.examples) === null || _8 === void 0 ? void 0 : _8.length, (_9 !== null && _9 !== void 0 ? _9 : 0)) > 0
4821
- ? (_10 = this.getControl('paramBody')) === null || _10 === void 0 ? void 0 : _10.setValidators(forms.Validators.required) : (_11 = this.getControl('paramBody')) === null || _11 === void 0 ? void 0 : _11.clearValidators();
4822
- (_13 = (_12 = template.buttons) === null || _12 === void 0 ? void 0 : _12.length, (_13 !== null && _13 !== void 0 ? _13 : 0)) > 0
4823
- ? (_14 = this.getControl('paramButton')) === null || _14 === void 0 ? void 0 : _14.setValidators(forms.Validators.required) : (_15 = this.getControl('paramButton')) === null || _15 === void 0 ? void 0 : _15.clearValidators();
4841
+ (_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 ||
4842
+ (_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 ||
4843
+ (_k = (_j = template.buttons) === null || _j === void 0 ? void 0 : _j.length, (_k !== null && _k !== void 0 ? _k : 0)) > 0;
4844
+ 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())) {
4845
+ (_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)));
4846
+ (_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)));
4847
+ 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());
4848
+ }
4849
+ (_4 = (_3 = template.header.examples) === null || _3 === void 0 ? void 0 : _3.length, (_4 !== null && _4 !== void 0 ? _4 : 0)) > 0
4850
+ ? (_5 = this.getControl('paramHeader')) === null || _5 === void 0 ? void 0 : _5.setValidators(forms.Validators.required) : (_6 = this.getControl('paramHeader')) === null || _6 === void 0 ? void 0 : _6.clearValidators();
4851
+ (_8 = (_7 = template.body.examples) === null || _7 === void 0 ? void 0 : _7.length, (_8 !== null && _8 !== void 0 ? _8 : 0)) > 0
4852
+ ? (_9 = this.getControl('paramBody')) === null || _9 === void 0 ? void 0 : _9.setValidators(forms.Validators.required) : (_10 = this.getControl('paramBody')) === null || _10 === void 0 ? void 0 : _10.clearValidators();
4853
+ (_12 = (_11 = template.buttons) === null || _11 === void 0 ? void 0 : _11.length, (_12 !== null && _12 !== void 0 ? _12 : 0)) > 0
4854
+ ? (_13 = this.getControl('paramButton')) === null || _13 === void 0 ? void 0 : _13.setValidators(forms.Validators.required) : (_14 = this.getControl('paramButton')) === null || _14 === void 0 ? void 0 : _14.clearValidators();
4824
4855
  this.form.get('paramHeader').controls = [];
4825
4856
  this.form.get('paramHeader').reset();
4826
- (_16 = this.getControl('paramHeader')) === null || _16 === void 0 ? void 0 : _16.updateValueAndValidity();
4857
+ (_15 = this.getControl('paramHeader')) === null || _15 === void 0 ? void 0 : _15.updateValueAndValidity();
4827
4858
  this.form.get('paramBody').controls = [];
4828
4859
  this.form.get('paramBody').reset();
4829
- (_17 = this.getControl('paramBody')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
4860
+ (_16 = this.getControl('paramBody')) === null || _16 === void 0 ? void 0 : _16.updateValueAndValidity();
4830
4861
  this.form.get('paramButton').controls = [];
4831
4862
  this.form.get('paramButton').reset();
4832
- (_18 = this.getControl('paramButton')) === null || _18 === void 0 ? void 0 : _18.updateValueAndValidity();
4833
- (_19 = this.getControl('otpValue')) === null || _19 === void 0 ? void 0 : _19.setValue('');
4834
- (_20 = this.getControl('otpValue')) === null || _20 === void 0 ? void 0 : _20.clearValidators();
4835
- (_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.updateValueAndValidity();
4863
+ (_17 = this.getControl('paramButton')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
4864
+ (_18 = this.getControl('otpValue')) === null || _18 === void 0 ? void 0 : _18.setValue('');
4865
+ (_19 = this.getControl('otpValue')) === null || _19 === void 0 ? void 0 : _19.clearValidators();
4866
+ (_20 = this.getControl('otpValue')) === null || _20 === void 0 ? void 0 : _20.updateValueAndValidity();
4836
4867
  if (template.category === 'AUTHENTICATION') {
4837
- (_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 = __spread((_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 : '')));
4838
- (_31 = this.getControl('otpValue')) === null || _31 === void 0 ? void 0 : _31.setValidators(forms.Validators.required);
4839
- (_32 = this.getControl('otpValue')) === null || _32 === void 0 ? void 0 : _32.updateValueAndValidity();
4868
+ (_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.setValue((_29 = (_23 = (_22 = formStorage) === null || _22 === void 0 ? void 0 : _22.otpValue, (_23 !== null && _23 !== void 0 ? _23 : (_28 = __spread((_27 = (_26 = (_25 = (_24 = formStorage) === null || _24 === void 0 ? void 0 : _24.template) === null || _25 === void 0 ? void 0 : _25.body) === null || _26 === void 0 ? void 0 : _26.examples, (_27 !== null && _27 !== void 0 ? _27 : [])))) === null || _28 === void 0 ? void 0 : _28.pop())), (_29 !== null && _29 !== void 0 ? _29 : '')));
4869
+ (_30 = this.getControl('otpValue')) === null || _30 === void 0 ? void 0 : _30.setValidators(forms.Validators.required);
4870
+ (_31 = this.getControl('otpValue')) === null || _31 === void 0 ? void 0 : _31.updateValueAndValidity();
4840
4871
  }
4841
- (_33 = template.header.examples) === null || _33 === void 0 ? void 0 : _33.forEach(function (each, index) {
4872
+ (_32 = template.header.examples) === null || _32 === void 0 ? void 0 : _32.forEach(function (each, index) {
4842
4873
  var _a, _b, _c, _d, _e, _f, _g;
4843
4874
  _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 : '')));
4844
4875
  });
4845
- (_34 = template.body.examples) === null || _34 === void 0 ? void 0 : _34.forEach(function (each, index) {
4876
+ (_33 = template.body.examples) === null || _33 === void 0 ? void 0 : _33.forEach(function (each, index) {
4846
4877
  var _a, _b, _c, _d, _e, _f, _g;
4847
4878
  var paramValue = (_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramBody) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramBody) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : ''));
4848
4879
  if (['$UnsubscribeAccount'].includes(each))
4849
4880
  paramValue = each;
4850
4881
  _this.addParamBody(paramValue);
4851
4882
  });
4852
- (_35 = template.buttons) === null || _35 === void 0 ? void 0 : _35.forEach(function (each, index) {
4883
+ (_34 = template.buttons) === null || _34 === void 0 ? void 0 : _34.forEach(function (each, index) {
4853
4884
  var _a, _b, _c, _d;
4854
4885
  _this.addParamButton();
4855
4886
  var button = _this.getButton;
@@ -5080,7 +5111,7 @@
5080
5111
  GeneralInformationWAComponent = __decorate([
5081
5112
  core.Component({
5082
5113
  selector: 'lib-general-information-wa',
5083
- 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",
5114
+ 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",
5084
5115
  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}"]
5085
5116
  })
5086
5117
  ], GeneralInformationWAComponent);
@@ -5913,13 +5944,10 @@
5913
5944
  this.initParam('platform', ((_e = (_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.platform) || 'WA', 'string'),
5914
5945
  this.initParam('templateName', (_g = (_f = genInfoForm) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.name, 'string'),
5915
5946
  this.initParam('templateLang', (_j = (_h = genInfoForm) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.lang, 'string'),
5947
+ this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map(function (t) { return t.id; }).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'),
5916
5948
  ];
5917
- if (isNeedSave) {
5918
- // SKENARIO 1: USE EXISTING / TEMPLATE SUDAH DISAVE
5919
- parameterList.push(this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map(function (t) { return t.id; }).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'));
5920
- }
5921
- else {
5922
- // SKENARIO 2: CREATE NEW (Auto-generated dll)
5949
+ // 2. Parameter Tambahan HANYA JIKA skenario Create New (Belum di-save)
5950
+ if (!isNeedSave) {
5923
5951
  var safeBodyText = encodeURIComponent(((_m = genInfoForm) === null || _m === void 0 ? void 0 : _m.text) || '');
5924
5952
  parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
5925
5953
  var variables = (_o = genInfoForm) === null || _o === void 0 ? void 0 : _o.variables;