@adlfe/campaign-management-library 2.15.0 → 2.15.2
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.
- package/bundles/adlfe-campaign-management-library.umd.js +75 -63
- package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js +2 -2
- package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
- package/esm2015/lib/campaign-management/models/general-information-wa-req.model.js +8 -5
- package/esm2015/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +17 -15
- package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +51 -44
- package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
- package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +2 -1
- package/esm5/lib/campaign-management/models/general-information-wa-req.model.js +8 -5
- package/esm5/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +17 -15
- package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +50 -44
- package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
- package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +2 -1
- package/fesm2015/adlfe-campaign-management-library.js +76 -63
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +75 -63
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/package.json +1 -1
|
@@ -2007,7 +2007,7 @@
|
|
|
2007
2007
|
var subs = this.apiAdapterService
|
|
2008
2008
|
.executeApiRequest([], "/campaign/" + ((_d = (_c = this.getCampaignStorage) === null || _c === void 0 ? void 0 : _c.generalInformation) === null || _d === void 0 ? void 0 : _d.id), 'GET')
|
|
2009
2009
|
.subscribe(function (resp) {
|
|
2010
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75;
|
|
2010
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76;
|
|
2011
2011
|
if (!resp)
|
|
2012
2012
|
return;
|
|
2013
2013
|
var generalInformation = {
|
|
@@ -2044,6 +2044,7 @@
|
|
|
2044
2044
|
buttonParams: (card.button || []).map(function (btnGroup) {
|
|
2045
2045
|
return (btnGroup || []).map(function (val) { return ({
|
|
2046
2046
|
paramName: val,
|
|
2047
|
+
payload: val,
|
|
2047
2048
|
}); });
|
|
2048
2049
|
}),
|
|
2049
2050
|
};
|
|
@@ -2069,28 +2070,29 @@
|
|
|
2069
2070
|
ClientId: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.clientId,
|
|
2070
2071
|
ClientName: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.clientName,
|
|
2071
2072
|
},
|
|
2072
|
-
|
|
2073
|
-
|
|
2073
|
+
isDownloadVariableXLS: ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.fileId) !== '',
|
|
2074
|
+
isUpload: ((_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileId) !== '',
|
|
2075
|
+
fileId: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.fileId,
|
|
2074
2076
|
};
|
|
2075
2077
|
localStorage.setItem('telin.campaign', JSON.stringify(__assign(__assign({}, _this.getCampaignStorage), {
|
|
2076
2078
|
generalInformation: {
|
|
2077
|
-
id: (
|
|
2079
|
+
id: (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.id,
|
|
2078
2080
|
form: generalInformation,
|
|
2079
2081
|
},
|
|
2080
|
-
failover: (
|
|
2081
|
-
targetAudience: (
|
|
2082
|
+
failover: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.failover,
|
|
2083
|
+
targetAudience: (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.targets,
|
|
2082
2084
|
targetAudienceFile: {
|
|
2083
|
-
name: (
|
|
2084
|
-
targetURL: (
|
|
2085
|
+
name: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.fileName,
|
|
2086
|
+
targetURL: (_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.targetURL,
|
|
2085
2087
|
},
|
|
2086
2088
|
scheduler: {
|
|
2087
|
-
schedulerType: ((
|
|
2089
|
+
schedulerType: ((_69 = resp.data) === null || _69 === void 0 ? void 0 : _69.scheduleType) === 'MULTI'
|
|
2088
2090
|
? 'ONE_TIME'
|
|
2089
|
-
: (
|
|
2090
|
-
startDate: (
|
|
2091
|
-
startTime: (
|
|
2092
|
-
isRepeat: ((
|
|
2093
|
-
delivery: (
|
|
2091
|
+
: (_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.scheduleType,
|
|
2092
|
+
startDate: (_72 = (_71 = resp.data) === null || _71 === void 0 ? void 0 : _71.startTime) === null || _72 === void 0 ? void 0 : _72.split(' ')[0],
|
|
2093
|
+
startTime: (_74 = (_73 = resp.data) === null || _73 === void 0 ? void 0 : _73.startTime) === null || _74 === void 0 ? void 0 : _74.split(' ')[1],
|
|
2094
|
+
isRepeat: ((_75 = resp.data) === null || _75 === void 0 ? void 0 : _75.scheduleType) === 'MULTI',
|
|
2095
|
+
delivery: (_76 = resp.data) === null || _76 === void 0 ? void 0 : _76.repeat,
|
|
2094
2096
|
},
|
|
2095
2097
|
})));
|
|
2096
2098
|
_this.isLoading = false;
|
|
@@ -2761,11 +2763,14 @@
|
|
|
2761
2763
|
var carouselPayload = undefined;
|
|
2762
2764
|
if (source.paramCarousel && source.paramCarousel.length > 0) {
|
|
2763
2765
|
carouselPayload = source.paramCarousel.map(function (card) {
|
|
2764
|
-
|
|
2765
|
-
var mappedBody = (card.bodyParams || []).map(function (b) { return b.paramName; });
|
|
2766
|
-
// Map Button Card -> Array of Arrays: [ ["sku-a"], ["info-a"] ]
|
|
2766
|
+
var mappedBody = (card.bodyParams || []).map(function (b) { return b.paramName || ''; });
|
|
2767
2767
|
var mappedButtons = (card.buttonParams || []).map(function (btnGroup) {
|
|
2768
|
-
return (btnGroup || []).map(function (btn) {
|
|
2768
|
+
return (btnGroup || []).map(function (btn) {
|
|
2769
|
+
if (btn.payload !== undefined && btn.payload !== null) {
|
|
2770
|
+
return btn.payload;
|
|
2771
|
+
}
|
|
2772
|
+
return btn.paramName || '';
|
|
2773
|
+
});
|
|
2769
2774
|
});
|
|
2770
2775
|
return {
|
|
2771
2776
|
headerURL: card.headerURL || '',
|
|
@@ -2985,6 +2990,7 @@
|
|
|
2985
2990
|
buttonParams: (card.button || []).map(function (btnGroup) {
|
|
2986
2991
|
return (btnGroup || []).map(function (val) { return ({
|
|
2987
2992
|
paramName: val,
|
|
2993
|
+
payload: val,
|
|
2988
2994
|
}); });
|
|
2989
2995
|
}),
|
|
2990
2996
|
};
|
|
@@ -4879,7 +4885,7 @@
|
|
|
4879
4885
|
});
|
|
4880
4886
|
GeneralInformationWAComponent.prototype.updateTemplate = function (template) {
|
|
4881
4887
|
var _this = this;
|
|
4882
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45;
|
|
4888
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47;
|
|
4883
4889
|
this.isShowParameter = false;
|
|
4884
4890
|
if (!template)
|
|
4885
4891
|
return;
|
|
@@ -4915,40 +4921,41 @@
|
|
|
4915
4921
|
this.isHaveTemplateParam =
|
|
4916
4922
|
(_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 ||
|
|
4917
4923
|
(_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 ||
|
|
4918
|
-
(_k = (_j = template.buttons) === null || _j === void 0 ? void 0 : _j.length, (_k !== null && _k !== void 0 ? _k : 0)) > 0
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
(
|
|
4922
|
-
this.
|
|
4923
|
-
|
|
4924
|
-
|
|
4925
|
-
|
|
4926
|
-
|
|
4927
|
-
|
|
4928
|
-
|
|
4929
|
-
|
|
4924
|
+
(_k = (_j = template.buttons) === null || _j === void 0 ? void 0 : _j.length, (_k !== null && _k !== void 0 ? _k : 0)) > 0 ||
|
|
4925
|
+
(_m = (_l = template.carousel) === null || _l === void 0 ? void 0 : _l.length, (_m !== null && _m !== void 0 ? _m : 0)) > 0;
|
|
4926
|
+
if (['image', 'video', 'document'].includes((_q = (_p = (_o = template) === null || _o === void 0 ? void 0 : _o.header) === null || _p === void 0 ? void 0 : _p.type) === null || _q === void 0 ? void 0 : _q.toLowerCase())) {
|
|
4927
|
+
(_r = this.getControl('fileName')) === null || _r === void 0 ? void 0 : _r.setValue((_x = (_u = (_t = (_s = this.getCampaignStorage) === null || _s === void 0 ? void 0 : _s.generalInformation) === null || _t === void 0 ? void 0 : _t.form.fileName, (_u !== null && _u !== void 0 ? _u : (_w = (_v = this.getCampaignStorage) === null || _v === void 0 ? void 0 : _v.generalInformation) === null || _w === void 0 ? void 0 : _w.form.targetURL)), (_x !== null && _x !== void 0 ? _x : template.header.url)));
|
|
4928
|
+
(_y = this.getControl('targetURL')) === null || _y === void 0 ? void 0 : _y.setValue((_1 = (_0 = (_z = this.getCampaignStorage) === null || _z === void 0 ? void 0 : _z.generalInformation) === null || _0 === void 0 ? void 0 : _0.form.targetURL, (_1 !== null && _1 !== void 0 ? _1 : template.header.url)));
|
|
4929
|
+
this.fileTypeChange((_4 = (_3 = (_2 = template) === null || _2 === void 0 ? void 0 : _2.header) === null || _3 === void 0 ? void 0 : _3.type) === null || _4 === void 0 ? void 0 : _4.toLowerCase());
|
|
4930
|
+
}
|
|
4931
|
+
(_6 = (_5 = template.header.examples) === null || _5 === void 0 ? void 0 : _5.length, (_6 !== null && _6 !== void 0 ? _6 : 0)) > 0
|
|
4932
|
+
? (_7 = this.getControl('paramHeader')) === null || _7 === void 0 ? void 0 : _7.setValidators(forms.Validators.required) : (_8 = this.getControl('paramHeader')) === null || _8 === void 0 ? void 0 : _8.clearValidators();
|
|
4933
|
+
(_10 = (_9 = template.body.examples) === null || _9 === void 0 ? void 0 : _9.length, (_10 !== null && _10 !== void 0 ? _10 : 0)) > 0
|
|
4934
|
+
? (_11 = this.getControl('paramBody')) === null || _11 === void 0 ? void 0 : _11.setValidators(forms.Validators.required) : (_12 = this.getControl('paramBody')) === null || _12 === void 0 ? void 0 : _12.clearValidators();
|
|
4935
|
+
(_14 = (_13 = template.buttons) === null || _13 === void 0 ? void 0 : _13.length, (_14 !== null && _14 !== void 0 ? _14 : 0)) > 0
|
|
4936
|
+
? (_15 = this.getControl('paramButton')) === null || _15 === void 0 ? void 0 : _15.setValidators(forms.Validators.required) : (_16 = this.getControl('paramButton')) === null || _16 === void 0 ? void 0 : _16.clearValidators();
|
|
4930
4937
|
this.form.get('paramHeader').controls = [];
|
|
4931
4938
|
this.form.get('paramHeader').reset();
|
|
4932
|
-
(
|
|
4939
|
+
(_17 = this.getControl('paramHeader')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
|
|
4933
4940
|
this.form.get('paramBody').controls = [];
|
|
4934
4941
|
this.form.get('paramBody').reset();
|
|
4935
|
-
(
|
|
4942
|
+
(_18 = this.getControl('paramBody')) === null || _18 === void 0 ? void 0 : _18.updateValueAndValidity();
|
|
4936
4943
|
this.form.get('paramButton').controls = [];
|
|
4937
4944
|
this.form.get('paramButton').reset();
|
|
4938
|
-
(
|
|
4939
|
-
(
|
|
4940
|
-
(
|
|
4941
|
-
(
|
|
4945
|
+
(_19 = this.getControl('paramButton')) === null || _19 === void 0 ? void 0 : _19.updateValueAndValidity();
|
|
4946
|
+
(_20 = this.getControl('otpValue')) === null || _20 === void 0 ? void 0 : _20.setValue('');
|
|
4947
|
+
(_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.clearValidators();
|
|
4948
|
+
(_22 = this.getControl('otpValue')) === null || _22 === void 0 ? void 0 : _22.updateValueAndValidity();
|
|
4942
4949
|
if (template.category === 'AUTHENTICATION') {
|
|
4943
|
-
(
|
|
4944
|
-
(
|
|
4945
|
-
(
|
|
4950
|
+
(_23 = this.getControl('otpValue')) === null || _23 === void 0 ? void 0 : _23.setValue((_31 = (_25 = (_24 = formStorage) === null || _24 === void 0 ? void 0 : _24.otpValue, (_25 !== null && _25 !== void 0 ? _25 : (_30 = __spread((_29 = (_28 = (_27 = (_26 = formStorage) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.body) === null || _28 === void 0 ? void 0 : _28.examples, (_29 !== null && _29 !== void 0 ? _29 : [])))) === null || _30 === void 0 ? void 0 : _30.pop())), (_31 !== null && _31 !== void 0 ? _31 : '')));
|
|
4951
|
+
(_32 = this.getControl('otpValue')) === null || _32 === void 0 ? void 0 : _32.setValidators(forms.Validators.required);
|
|
4952
|
+
(_33 = this.getControl('otpValue')) === null || _33 === void 0 ? void 0 : _33.updateValueAndValidity();
|
|
4946
4953
|
}
|
|
4947
|
-
(
|
|
4954
|
+
(_34 = template.header.examples) === null || _34 === void 0 ? void 0 : _34.forEach(function (each, index) {
|
|
4948
4955
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4949
4956
|
_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 : '')));
|
|
4950
4957
|
});
|
|
4951
|
-
(
|
|
4958
|
+
(_35 = template.body.examples) === null || _35 === void 0 ? void 0 : _35.forEach(function (each, index) {
|
|
4952
4959
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4953
4960
|
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 : ''));
|
|
4954
4961
|
if (['$UnsubscribeAccount'].includes(each))
|
|
@@ -4959,8 +4966,8 @@
|
|
|
4959
4966
|
// TAMBAHAN: Generate Variable Dinamis dari template.body.examples
|
|
4960
4967
|
// ==========================================================
|
|
4961
4968
|
this.variables.clear();
|
|
4962
|
-
if (((
|
|
4963
|
-
var isSavedTemplateMatches_1 = ((
|
|
4969
|
+
if (((_36 = template.body) === null || _36 === void 0 ? void 0 : _36.examples) && template.body.examples.length > 0) {
|
|
4970
|
+
var isSavedTemplateMatches_1 = ((_38 = (_37 = formStorage) === null || _37 === void 0 ? void 0 : _37.template) === null || _38 === void 0 ? void 0 : _38.name) === template.name;
|
|
4964
4971
|
template.body.examples.forEach(function (exampleValue, index) {
|
|
4965
4972
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4966
4973
|
var savedVariable = '';
|
|
@@ -4976,9 +4983,9 @@
|
|
|
4976
4983
|
}));
|
|
4977
4984
|
});
|
|
4978
4985
|
}
|
|
4979
|
-
if ((
|
|
4980
|
-
(
|
|
4981
|
-
(
|
|
4986
|
+
if ((_39 = template.body) === null || _39 === void 0 ? void 0 : _39.text) {
|
|
4987
|
+
(_40 = this.getControl('text')) === null || _40 === void 0 ? void 0 : _40.setValue(template.body.text);
|
|
4988
|
+
(_41 = this.getControl('text')) === null || _41 === void 0 ? void 0 : _41.updateValueAndValidity();
|
|
4982
4989
|
}
|
|
4983
4990
|
// ==========================================================
|
|
4984
4991
|
// ==========================================================
|
|
@@ -4986,12 +4993,12 @@
|
|
|
4986
4993
|
// ==========================================================
|
|
4987
4994
|
var carouselArray = this.form.get('paramCarousel');
|
|
4988
4995
|
carouselArray.clear();
|
|
4989
|
-
var isUsingUpload = (
|
|
4996
|
+
var isUsingUpload = (_42 = this.getControl('isUpload')) === null || _42 === void 0 ? void 0 : _42.value;
|
|
4990
4997
|
var dynamicValidator = isUsingUpload ? null : forms.Validators.required;
|
|
4991
4998
|
if (template.carousel && template.carousel.length > 0) {
|
|
4992
|
-
var isSavedTemplateMatches = ((
|
|
4999
|
+
var isSavedTemplateMatches = ((_44 = (_43 = formStorage) === null || _43 === void 0 ? void 0 : _43.template) === null || _44 === void 0 ? void 0 : _44.name) === template.name;
|
|
4993
5000
|
// BUKAN formStorage?.template?.carousel, TAPI formStorage?.paramCarousel (tempat lu ngetik)
|
|
4994
|
-
var savedUserInputs_1 = isSavedTemplateMatches ? (
|
|
5001
|
+
var savedUserInputs_1 = isSavedTemplateMatches ? (_45 = formStorage) === null || _45 === void 0 ? void 0 : _45.paramCarousel : null;
|
|
4995
5002
|
template.carousel.forEach(function (card, cardIdx) {
|
|
4996
5003
|
var _a, _b, _c, _d, _e;
|
|
4997
5004
|
var cardGroup = new forms.FormGroup({
|
|
@@ -5010,31 +5017,36 @@
|
|
|
5010
5017
|
}));
|
|
5011
5018
|
});
|
|
5012
5019
|
}
|
|
5013
|
-
// 2. Setup Button Params
|
|
5014
5020
|
if (((_e = card.buttons) === null || _e === void 0 ? void 0 : _e.length) > 0) {
|
|
5015
5021
|
card.buttons.forEach(function (btn, btnIdx) {
|
|
5016
|
-
var _a;
|
|
5022
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
5017
5023
|
var btnParamArray = new forms.FormArray([]);
|
|
5024
|
+
// SKENARIO 1: Button dengan variabel (contoh URL / Phone dengan {{1}})
|
|
5018
5025
|
if (((_a = btn.examples) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
5019
5026
|
btn.examples.forEach(function (_, paramIdx) {
|
|
5020
5027
|
var _a, _b, _c, _d, _e, _f;
|
|
5021
|
-
// AMBIL VALUE DARI INPUTAN SEBELUMNYA
|
|
5022
5028
|
var savedBtnVal = (_f = (_e = (_d = (_c = (_b = (_a = savedUserInputs_1) === null || _a === void 0 ? void 0 : _a[cardIdx]) === null || _b === void 0 ? void 0 : _b.buttonParams) === null || _c === void 0 ? void 0 : _c[btnIdx]) === null || _d === void 0 ? void 0 : _d[paramIdx]) === null || _e === void 0 ? void 0 : _e.paramName, (_f !== null && _f !== void 0 ? _f : ''));
|
|
5023
5029
|
btnParamArray.push(new forms.FormGroup({
|
|
5024
|
-
paramName: new forms.FormControl({
|
|
5025
|
-
value: savedBtnVal,
|
|
5026
|
-
disabled: _this.isReadOnlyMode,
|
|
5027
|
-
}, dynamicValidator),
|
|
5030
|
+
paramName: new forms.FormControl({ value: savedBtnVal, disabled: _this.isReadOnlyMode }, dynamicValidator),
|
|
5028
5031
|
}));
|
|
5029
5032
|
});
|
|
5030
5033
|
}
|
|
5034
|
+
// SKENARIO 2: Button bertipe QUICK_REPLY (Butuh input Payload statis)
|
|
5035
|
+
else if (btn.type === 'QUICK_REPLY') {
|
|
5036
|
+
var savedPayloadVal = (_g = (_f = (_e = (_d = (_c = (_b = savedUserInputs_1) === null || _b === void 0 ? void 0 : _b[cardIdx]) === null || _c === void 0 ? void 0 : _c.buttonParams) === null || _d === void 0 ? void 0 : _d[btnIdx]) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.payload, (_g !== null && _g !== void 0 ? _g : ''));
|
|
5037
|
+
btnParamArray.push(new forms.FormGroup({
|
|
5038
|
+
payload: new forms.FormControl({ value: savedPayloadVal, disabled: _this.isReadOnlyMode }, __spread([
|
|
5039
|
+
forms.Validators.maxLength(256)
|
|
5040
|
+
], (isUsingUpload ? [] : [forms.Validators.required]))),
|
|
5041
|
+
}));
|
|
5042
|
+
}
|
|
5031
5043
|
cardGroup.get('buttonParams').push(btnParamArray);
|
|
5032
5044
|
});
|
|
5033
5045
|
}
|
|
5034
5046
|
carouselArray.push(cardGroup);
|
|
5035
5047
|
});
|
|
5036
5048
|
}
|
|
5037
|
-
(
|
|
5049
|
+
(_46 = template.buttons) === null || _46 === void 0 ? void 0 : _46.forEach(function (each, index) {
|
|
5038
5050
|
var _a, _b, _c, _d;
|
|
5039
5051
|
_this.addParamButton();
|
|
5040
5052
|
var button = _this.getButton;
|
|
@@ -5066,7 +5078,7 @@
|
|
|
5066
5078
|
(_b = ctrl.get('name')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
5067
5079
|
});
|
|
5068
5080
|
paramBodyArray.updateValueAndValidity();
|
|
5069
|
-
this.toggleExcelValidation((
|
|
5081
|
+
this.toggleExcelValidation((_47 = this.form.get('isUpload')) === null || _47 === void 0 ? void 0 : _47.value);
|
|
5070
5082
|
};
|
|
5071
5083
|
GeneralInformationWAComponent.prototype.updateMediaType = function (_mediaType) {
|
|
5072
5084
|
if (_mediaType === EnumData.MEDIA_TYPE_LOCATION)
|
|
@@ -5321,8 +5333,8 @@
|
|
|
5321
5333
|
GeneralInformationWAComponent = __decorate([
|
|
5322
5334
|
core.Component({
|
|
5323
5335
|
selector: 'lib-general-information-wa',
|
|
5324
|
-
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 <!-- ========================================== -->\r\n <!-- CAROUSEL DYNAMIC VARIABLES -->\r\n <!-- ========================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"!form.get('isUpload')?.value && getCarouselControls.length > 0\"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Carousel Configuration</p>\r\n <div formArrayName=\"paramCarousel\">\r\n <div\r\n *ngFor=\"let card of getCarouselControls; let cIndex = index\"\r\n [formGroupName]=\"cIndex\"\r\n class=\"card-container mb-4 p-3\"\r\n style=\"border: 1px solid #e0e0e0; border-radius: 8px\"\r\n >\r\n <div class=\"font-bold font-14px mb-3\">Card {{ cIndex + 1 }}</div>\r\n <div *ngIf=\"getCarouselBodyParams(cIndex).controls.length > 0\" class=\"mb-3\">\r\n <div class=\"font-bold font-12px mb-2\">Body Variables</div>\r\n <div formArrayName=\"bodyParams\">\r\n <div\r\n *ngFor=\"\r\n let bParam of getCarouselBodyParams(cIndex).controls;\r\n let bIndex = index\r\n \"\r\n [formGroupName]=\"bIndex\"\r\n class=\"form-group mb-3\"\r\n >\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\r\n >Body {{ '{' + '{' + (bIndex + 1) + '}' + '}' }}</mat-label\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <div formArrayName=\"buttonParams\">\r\n <div *ngFor=\"let btn of getCarouselButtons(cIndex); let btnIndex = index\">\r\n <div\r\n *ngIf=\"getCarouselBtnParams(cIndex, btnIndex).controls.length > 0\"\r\n [formGroupName]=\"btnIndex\"\r\n class=\"mt-2\"\r\n >\r\n <div class=\"font-bold font-12px mb-2\">Button: {{ btn.text }}</div>\r\n <div\r\n *ngFor=\"\r\n let pBtn of getCarouselBtnParams(cIndex, btnIndex).controls;\r\n let pBtnIdx = index\r\n \"\r\n [formGroupName]=\"pBtnIdx\"\r\n class=\"form-group mb-3\"\r\n >\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>Param {{ pBtnIdx + 1 }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 </ng-container>\r\n\r\n <!-- VARIABLES START -->\r\n <ng-container *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isUseExistingTemplate')?.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\r\n </p>\r\n\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 <!-- ====================================================== -->\r\n <!-- VIEW 2: USE EXISTING TEMPLATE (UI Clean, cuma input) -->\r\n <!-- ====================================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"form.get('isUseExistingTemplate')?.value && variables.controls.length > 0\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n <!-- Looping array yang sama persis, tapi tanpa ornamen -->\r\n <div formArrayName=\"variables\">\r\n <div\r\n class=\"form-group mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\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 <!-- Label dinamis: {{1}}, {{2}}, dst -->\r\n <mat-label>{{ '{' + '{' + (i + 1) + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n\r\n <!-- Validasi Error -->\r\n <ng-container *ngFor=\"let validation of validationMessages?.paramName\">\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 </div>\r\n </div>\r\n </ng-container>\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 <!--VARIABLES END -->\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 </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",
|
|
5325
|
-
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 .
|
|
5336
|
+
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 <!-- ========================================== -->\r\n <!-- CAROUSEL DYNAMIC VARIABLES -->\r\n <!-- ========================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"!form.get('isUpload')?.value && getCarouselControls.length > 0\"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Carousel Configuration</p>\r\n <div formArrayName=\"paramCarousel\">\r\n <div\r\n *ngFor=\"let card of getCarouselControls; let cIndex = index\"\r\n [formGroupName]=\"cIndex\"\r\n class=\"card-container mb-4 p-3\"\r\n style=\"border: 1px solid #e0e0e0; border-radius: 8px\"\r\n >\r\n <div class=\"font-bold font-14px mb-3\">Card {{ cIndex + 1 }}</div>\r\n <div *ngIf=\"getCarouselBodyParams(cIndex).controls.length > 0\" class=\"mb-3\">\r\n <div class=\"font-bold font-12px mb-2\">Body Variables</div>\r\n <div formArrayName=\"bodyParams\">\r\n <div\r\n *ngFor=\"\r\n let bParam of getCarouselBodyParams(cIndex).controls;\r\n let bIndex = index\r\n \"\r\n [formGroupName]=\"bIndex\"\r\n class=\"form-group mb-3\"\r\n >\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\r\n >Body {{ '{' + '{' + (bIndex + 1) + '}' + '}' }}</mat-label\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <div formArrayName=\"buttonParams\">\r\n <div *ngFor=\"let btn of getCarouselButtons(cIndex); let btnIndex = index\">\r\n <div\r\n *ngIf=\"getCarouselBtnParams(cIndex, btnIndex).controls.length > 0\"\r\n [formGroupName]=\"btnIndex\"\r\n class=\"mt-2\"\r\n >\r\n <div class=\"font-bold font-12px mb-2\">Button: {{ btn.text }}</div>\r\n <div\r\n *ngFor=\"\r\n let pBtn of getCarouselBtnParams(cIndex, btnIndex).controls;\r\n let pBtnIdx = index\r\n \"\r\n [formGroupName]=\"pBtnIdx\"\r\n class=\"form-group mb-3\"\r\n >\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 <!-- Label dinamis: Kalau Quick Reply jadi 'Payload', kalau nggak jadi 'Param 1' -->\r\n <mat-label>{{\r\n btn.type === 'QUICK_REPLY'\r\n ? 'Payload'\r\n : 'Param ' + (pBtnIdx + 1)\r\n }}</mat-label>\r\n\r\n <!-- Input khusus untuk QUICK_REPLY (binding ke formControlName=\"payload\") -->\r\n <input\r\n *ngIf=\"btn.type === 'QUICK_REPLY'\"\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n placeholder=\"Input payload value...\"\r\n />\r\n\r\n <!-- Input khusus untuk Variable Biasa / URL (binding ke formControlName=\"paramName\") -->\r\n <input\r\n *ngIf=\"btn.type !== 'QUICK_REPLY'\"\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 </ng-container>\r\n\r\n <!-- VARIABLES START -->\r\n <ng-container *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isUseExistingTemplate')?.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\r\n </p>\r\n\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 floatLabel=\"always\"\r\n class=\"w-100 bg-white-field\"\r\n >\r\n <mat-label>Variable {{ i + 1 }}</mat-label>\r\n <!-- Tambahin label biar cakep -->\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 <!-- ====================================================== -->\r\n <!-- VIEW 2: USE EXISTING TEMPLATE (UI Clean, cuma input) -->\r\n <!-- ====================================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"form.get('isUseExistingTemplate')?.value && variables.controls.length > 0\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n <!-- Looping array yang sama persis, tapi tanpa ornamen -->\r\n <div formArrayName=\"variables\">\r\n <div\r\n class=\"form-group mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\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 <!-- Label dinamis: {{1}}, {{2}}, dst -->\r\n <mat-label>{{ '{' + '{' + (i + 1) + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n\r\n <!-- Validasi Error -->\r\n <ng-container *ngFor=\"let validation of validationMessages?.paramName\">\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 </div>\r\n </div>\r\n </ng-container>\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 <!--VARIABLES END -->\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 </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",
|
|
5337
|
+
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 .bg-white-field ::ng-deep .mat-form-field-flex{background-color:#fff;border-radius:4px}.template-container .body-content-wrapper .bg-white-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin-bottom:0!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:58px;display:flex;align-items:center;justify-content:center;margin-top:0}.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:0;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}"]
|
|
5326
5338
|
})
|
|
5327
5339
|
], GeneralInformationWAComponent);
|
|
5328
5340
|
return GeneralInformationWAComponent;
|
|
@@ -5907,8 +5919,8 @@
|
|
|
5907
5919
|
GeneralInformationComponent = __decorate([
|
|
5908
5920
|
core.Component({
|
|
5909
5921
|
selector: 'lib-new-campaign-general-information',
|
|
5910
|
-
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\"\r\n style=\"\r\n width: 100%;\r\n padding-right: 16px;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"chat\"\r\n style=\"\r\n min-width: 220px;\r\n flex-shrink: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n background: #ffffff;\r\n border-radius: 8px;\r\n border: 1px solid #d1d7db;\r\n display: flex;\r\n flex-direction: column;\r\n \"\r\n >\r\n <img\r\n *ngIf=\"card.header?.url || card.headerURL\"\r\n style=\"width: 100%; height: 110px; object-fit: cover\"\r\n [src]=\"card.header?.url || card.headerURL\"\r\n alt=\"Carousel Header Image\"\r\n />\r\n <div style=\"padding: 8px 12px; flex-grow: 1\">\r\n <p\r\n *ngIf=\"card.body?.text\"\r\n class=\"mb-1\"\r\n style=\"\r\n white-space: pre-wrap;\r\n font-size: 13px;\r\n color: #111b21;\r\n \"\r\n >\r\n {{ card.body?.text }}\r\n </p>\r\n </div>\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n style=\"width: 100%\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"pointer\"\r\n style=\"\r\n border-top: 1px solid #e0e0e0;\r\n width: 100%;\r\n padding: 10px 0;\r\n background: #ffffff;\r\n \"\r\n >\r\n <p\r\n class=\"mb-0 text-center\"\r\n style=\"\r\n color: #00a5f4;\r\n font-size: 14px;\r\n font-weight: 500;\r\n \"\r\n >\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5911
|
-
styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:75%}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:70%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}.wa-carousel-scroll
|
|
5922
|
+
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"wa-carousel-container\"\r\n >\r\n <div class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\">\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"wa-carousel-card\"\r\n >\r\n <img\r\n *ngIf=\"card.header?.url || card.headerURL\"\r\n class=\"card-header-image\"\r\n [src]=\"card.header?.url || card.headerURL\"\r\n alt=\"Carousel Header Image\"\r\n />\r\n\r\n <div class=\"card-body-content\">\r\n <p\r\n *ngIf=\"card.body?.text || card.bodyText\"\r\n class=\"card-text\"\r\n >\r\n {{ card.body?.text || card.bodyText }}\r\n </p>\r\n </div>\r\n\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n class=\"card-buttons-wrapper\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"card-button\"\r\n >\r\n <!-- Kondisi Dinamis untuk Icon Button -->\r\n <ng-container\r\n [ngSwitch]=\"\r\n btn?.type || btn?.actionType || 'QUICK_REPLY'\r\n \"\r\n >\r\n <!-- ICON: QUICK REPLY (Panah Melengkung) -->\r\n <svg\r\n *ngSwitchCase=\"'QUICK_REPLY'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n\r\n <!-- ICON: URL (External Link) -->\r\n <svg\r\n *ngSwitchCase=\"'URL'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path\r\n d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\r\n ></path>\r\n <polyline points=\"15 3 21 3 21 9\"></polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\r\n </svg>\r\n\r\n <!-- ICON: DEFAULT (Fallback ke Quick Reply) -->\r\n <svg\r\n *ngSwitchDefault\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n </ng-container>\r\n\r\n <p class=\"text-center btn-text\">\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n\r\n <!-- Dot Indicators -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 1\"\r\n class=\"wa-carousel-indicators\"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel; let i = index\"\r\n class=\"dot\"\r\n [style.background-color]=\"i === 0 ? '#8696a0' : '#d1d7db'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5923
|
+
styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:75%}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:70%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}.wa-carousel-container{width:100%}.wa-carousel-container .wa-carousel-scroll{width:100%;padding-right:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}.wa-carousel-container .wa-carousel-scroll::-webkit-scrollbar{display:none}.wa-carousel-container .wa-carousel-card{min-width:220px;flex-shrink:0;padding:0;overflow:hidden;background:#fff;border-radius:12px;border:1px solid #d1d7db;display:flex;flex-direction:column;scroll-snap-align:start}.wa-carousel-container .wa-carousel-card .card-header-image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;background:#e0e0e0}.wa-carousel-container .wa-carousel-card .card-body-content{padding:12px;flex-grow:1}.wa-carousel-container .wa-carousel-card .card-body-content .card-text{white-space:pre-wrap;font-size:12px;color:#111b21;margin:0}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper{width:100%}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper .card-button{border-top:1px solid #f0f2f5;width:100%;padding:8px 0;background:#fff;display:flex;justify-content:center;align-items:center;gap:8px;cursor:pointer}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper .card-button .btn-text{color:#00a884;font-size:12px;font-weight:500;margin-bottom:0}.wa-carousel-container .wa-carousel-indicators{display:flex;justify-content:center;gap:6px;padding:10px 0}.wa-carousel-container .wa-carousel-indicators .dot{width:6px;height:6px;border-radius:50%;transition:background-color .3s}"]
|
|
5912
5924
|
})
|
|
5913
5925
|
], GeneralInformationComponent);
|
|
5914
5926
|
return GeneralInformationComponent;
|