@capillarytech/creatives-library 7.12.71 → 7.12.73
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/config/app.js
CHANGED
|
@@ -16,6 +16,7 @@ const config = {
|
|
|
16
16
|
accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
|
|
17
17
|
},
|
|
18
18
|
development: {
|
|
19
|
+
// api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
|
|
19
20
|
api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
|
|
20
21
|
campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
|
|
21
22
|
campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillarytech/creatives-library",
|
|
3
3
|
"author": "meharaj",
|
|
4
|
-
"version": "7.12.
|
|
4
|
+
"version": "7.12.73",
|
|
5
5
|
"description": "Capillary creatives ui",
|
|
6
6
|
"main": "./index.js",
|
|
7
7
|
"module": "./index.es.js",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"jest-date-mock": "^1.0.8",
|
|
25
25
|
"jquery": "^3.3.1",
|
|
26
26
|
"load-script": "^1.0.0",
|
|
27
|
+
"node-html-parser": "^5.3.3",
|
|
27
28
|
"normalizr": "^3.2.3",
|
|
28
29
|
"papaparse": "^5.3.1",
|
|
29
30
|
"pre-push": "^0.1.2",
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { parse } from 'node-html-parser';
|
|
2
|
+
|
|
3
|
+
// const sample = {
|
|
4
|
+
// versions: {
|
|
5
|
+
// base: {
|
|
6
|
+
// activeTab: "en",
|
|
7
|
+
// en: {
|
|
8
|
+
// "lang_id": 69,
|
|
9
|
+
// "iso_code": "en",
|
|
10
|
+
// "language": "English",
|
|
11
|
+
// "template-content": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n<head><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><!--[if !mso]><!--><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]-->\n\t<title></title>\n\t<!--[if !mso]><!--><!--<![endif]-->\n\t<style type=\"text/css\">body {\n margin: 0;\n padding: 0; }\n\ntable,\ntd,\ntr {\n vertical-align: top;\n border-collapse: collapse; }\n\n* {\n line-height: inherit; }\n\na[x-apple-data-detectors=true] {\n color: inherit !important;\n text-decoration: none !important; }\n\t</style>\n\t<style id=\"media-query\" type=\"text/css\">@media (max-width: 520px) {\n .block-grid,\n.col {\n min-width: 320px !important;\n max-width: 100% !important;\n display: block !important;\n }\n\n .block-grid {\n width: 100% !important;\n }\n\n .col {\n width: 100% !important;\n }\n\n .col > div {\n margin: 0 auto;\n }\n\n img.fullwidth,\nimg.fullwidthOnMobile {\n max-width: 100% !important;\n }\n\n .no-stack .col {\n min-width: 0 !important;\n display: table-cell !important;\n }\n\n .no-stack.two-up .col {\n width: 50% !important;\n }\n\n .no-stack .col.num4 {\n width: 33% !important;\n }\n\n .no-stack .col.num8 {\n width: 66% !important;\n }\n\n .no-stack .col.num4 {\n width: 33% !important;\n }\n\n .no-stack .col.num3 {\n width: 25% !important;\n }\n\n .no-stack .col.num6 {\n width: 50% !important;\n }\n\n .no-stack .col.num9 {\n width: 75% !important;\n }\n\n .video-block {\n max-width: none !important;\n }\n\n .mobile_hide {\n min-height: 0px;\n max-height: 0px;\n max-width: 0px;\n display: none;\n overflow: hidden;\n font-size: 0px;\n }\n\n .desktop_hide {\n display: block !important;\n max-height: none !important;\n }\n}\n\t</style>\n</head>\n<body class=\"clean-body\" style=\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\"><!--[if IE]><div class=\"ie-browser\"><![endif]-->\n<p>asdf</p>\n\n<table bgcolor=\"#FFFFFF\" cellpadding=\"0\" cellspacing=\"0\" class=\"nl-container\" role=\"presentation\" style=\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\" valign=\"top\">\n\t<tbody>\n\t\t<tr style=\"vertical-align:top\" valign=\"top\">\n\t\t\t<td style=\"vertical-align:top; word-break:break-word\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n\t\t\t<div style=\"background-color:transparent\">\n\t\t\t<div class=\"block-grid\" style=\"background-color:transparent; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\">\n\t\t\t<div style=\"background-color:transparent; border-collapse:collapse; display:table; width:100%\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]--><!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\n\t\t\t<div class=\"col num12\" style=\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\">\n\t\t\t<div style=\"width:100% !important\"><!--[if (!mso)&(!IE)]><!-->\n\t\t\t<div style=\"border-bottom:0px solid transparent; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; padding-bottom:5px; padding-left:0px; padding-right:0px; padding-top:5px\"><!--<![endif]--><!--[if (!mso)&(!IE)]><!--></div>\n\t\t\t<!--<![endif]--></div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--><!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]--></div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--></td>\n\t\t</tr>\n\t</tbody>\n</table>\n<!--[if (IE)]></div><![endif]--></body>\n</html>\n",
|
|
12
|
+
// "drag_drop_id": "",
|
|
13
|
+
// "tabKey": "5",
|
|
14
|
+
// },
|
|
15
|
+
// selectedLanguages: [
|
|
16
|
+
// "en",
|
|
17
|
+
// ],
|
|
18
|
+
// base: true,
|
|
19
|
+
// tabKey: "5",
|
|
20
|
+
// subject: "asdf",
|
|
21
|
+
// },
|
|
22
|
+
// history: [
|
|
23
|
+
// {
|
|
24
|
+
// activeTab: "en",
|
|
25
|
+
// en: {
|
|
26
|
+
// "lang_id": 69,
|
|
27
|
+
// "iso_code": "en",
|
|
28
|
+
// "language": "English",
|
|
29
|
+
// "template-content": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n<head><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><!--[if !mso]><!--><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]-->\n\t<title></title>\n\t<!--[if !mso]><!--><!--<![endif]-->\n\t<style type=\"text/css\">body {\n margin: 0;\n padding: 0; }\n\ntable,\ntd,\ntr {\n vertical-align: top;\n border-collapse: collapse; }\n\n* {\n line-height: inherit; }\n\na[x-apple-data-detectors=true] {\n color: inherit !important;\n text-decoration: none !important; }\n\t</style>\n\t<style id=\"media-query\" type=\"text/css\">@media (max-width: 520px) {\n .block-grid,\n.col {\n min-width: 320px !important;\n max-width: 100% !important;\n display: block !important;\n }\n\n .block-grid {\n width: 100% !important;\n }\n\n .col {\n width: 100% !important;\n }\n\n .col > div {\n margin: 0 auto;\n }\n\n img.fullwidth,\nimg.fullwidthOnMobile {\n max-width: 100% !important;\n }\n\n .no-stack .col {\n min-width: 0 !important;\n display: table-cell !important;\n }\n\n .no-stack.two-up .col {\n width: 50% !important;\n }\n\n .no-stack .col.num4 {\n width: 33% !important;\n }\n\n .no-stack .col.num8 {\n width: 66% !important;\n }\n\n .no-stack .col.num4 {\n width: 33% !important;\n }\n\n .no-stack .col.num3 {\n width: 25% !important;\n }\n\n .no-stack .col.num6 {\n width: 50% !important;\n }\n\n .no-stack .col.num9 {\n width: 75% !important;\n }\n\n .video-block {\n max-width: none !important;\n }\n\n .mobile_hide {\n min-height: 0px;\n max-height: 0px;\n max-width: 0px;\n display: none;\n overflow: hidden;\n font-size: 0px;\n }\n\n .desktop_hide {\n display: block !important;\n max-height: none !important;\n }\n}\n\t</style>\n</head>\n<body class=\"clean-body\" style=\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\"><!--[if IE]><div class=\"ie-browser\"><![endif]-->\n<p>asdf</p>\n\n<table bgcolor=\"#FFFFFF\" cellpadding=\"0\" cellspacing=\"0\" class=\"nl-container\" role=\"presentation\" style=\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\" valign=\"top\">\n\t<tbody>\n\t\t<tr style=\"vertical-align:top\" valign=\"top\">\n\t\t\t<td style=\"vertical-align:top; word-break:break-word\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n\t\t\t<div style=\"background-color:transparent\">\n\t\t\t<div class=\"block-grid\" style=\"background-color:transparent; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\">\n\t\t\t<div style=\"background-color:transparent; border-collapse:collapse; display:table; width:100%\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]--><!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\n\t\t\t<div class=\"col num12\" style=\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\">\n\t\t\t<div style=\"width:100% !important\"><!--[if (!mso)&(!IE)]><!-->\n\t\t\t<div style=\"border-bottom:0px solid transparent; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; padding-bottom:5px; padding-left:0px; padding-right:0px; padding-top:5px\"><!--<![endif]--><!--[if (!mso)&(!IE)]><!--></div>\n\t\t\t<!--<![endif]--></div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--><!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]--></div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--></td>\n\t\t</tr>\n\t</tbody>\n</table>\n<!--[if (IE)]></div><![endif]--></body>\n</html>\n",
|
|
30
|
+
// "drag_drop_id": "",
|
|
31
|
+
// "tabKey": "5",
|
|
32
|
+
// },
|
|
33
|
+
// selectedLanguages: [
|
|
34
|
+
// "en",
|
|
35
|
+
// ],
|
|
36
|
+
// base: true,
|
|
37
|
+
// tabKey: "5",
|
|
38
|
+
// subject: "asdf",
|
|
39
|
+
// },
|
|
40
|
+
// ],
|
|
41
|
+
// },
|
|
42
|
+
// type: "EMAIL",
|
|
43
|
+
// name: "asdf",
|
|
44
|
+
// };
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
// https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=100,height=100,quality=75,fit=cover,g=top,format=auto/intouch_creative_assets/005710a7-6412-44fe-a19f-e72456b1.jpg
|
|
48
|
+
|
|
49
|
+
const CDN_BASE_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image`;
|
|
50
|
+
const QUALITY = 75;
|
|
51
|
+
const regex = /intouch_creative_assets/;
|
|
52
|
+
|
|
53
|
+
export const updateImagesInHtml = (htmlContents) => {
|
|
54
|
+
const root = parse(htmlContents);
|
|
55
|
+
root.querySelectorAll('img').forEach((element) => {
|
|
56
|
+
const imageSrc = element.getAttribute('src');
|
|
57
|
+
const isAsset = regex.test(imageSrc);
|
|
58
|
+
if (isAsset) {
|
|
59
|
+
const height = element.getAttribute('height');
|
|
60
|
+
const width = element.getAttribute('width');
|
|
61
|
+
const [, assetKey] = imageSrc.split(regex);
|
|
62
|
+
|
|
63
|
+
let newUrl = `${CDN_BASE_URL}/`;
|
|
64
|
+
if (height) {
|
|
65
|
+
newUrl += `height=${height},`;
|
|
66
|
+
}
|
|
67
|
+
if (width) {
|
|
68
|
+
newUrl += `width=${width},`;
|
|
69
|
+
}
|
|
70
|
+
newUrl += `quality=${QUALITY}`;
|
|
71
|
+
newUrl += `/intouch_creative_assets${assetKey}`;
|
|
72
|
+
element.setAttribute('src', newUrl);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
return root.toString();
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export const transformEmailTemplates = (contents) => {
|
|
79
|
+
console.log('hello contents', contents);
|
|
80
|
+
console.log('hello history', contents?.versions?.base);
|
|
81
|
+
const base = contents?.versions?.base;
|
|
82
|
+
const languages = base?.selectedLanguages;
|
|
83
|
+
console.log('hello lang', languages);
|
|
84
|
+
languages?.forEach((lang) => {
|
|
85
|
+
const htmlContents = base?.[lang]?.['template-content'];
|
|
86
|
+
const newHtmlContents = updateImagesInHtml(htmlContents);
|
|
87
|
+
base[lang]['template-content'] = newHtmlContents;
|
|
88
|
+
console.log('hello template contents', base?.[lang]?.['template-content']);
|
|
89
|
+
});
|
|
90
|
+
return contents;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
// export const updateUrlInTemplate = (channel, templateData) => {
|
|
95
|
+
// let newTemplateData;
|
|
96
|
+
// switch(channel){
|
|
97
|
+
// case 'EMAIL':
|
|
98
|
+
// newTemplateData = transformEmailTemplates(templateData);
|
|
99
|
+
// break;
|
|
100
|
+
// default:
|
|
101
|
+
// break;
|
|
102
|
+
// }
|
|
103
|
+
// return newTemplateData;
|
|
104
|
+
// }
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
// {
|
|
108
|
+
// "message_content_id_1": {
|
|
109
|
+
// "emailBody": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<title></title>\n\t<style type=\"text/css\">body {\n margin: 0;\n padding: 0; }\n\ntable,\ntd,\ntr {\n vertical-align: top;\n border-collapse: collapse; }\n\n* {\n line-height: inherit; }\n\na[x-apple-data-detectors=true] {\n color: inherit !important;\n text-decoration: none !important; }\n\t</style>\n\t<style id=\"media-query\" type=\"text/css\">@media (max-width: 520px) {\n .block-grid,\n.col {\n min-width: 320px !important;\n max-width: 100% !important;\n display: block !important;\n }\n\n .block-grid {\n width: 100% !important;\n }\n\n .col {\n width: 100% !important;\n }\n\n .col > div {\n margin: 0 auto;\n }\n\n img.fullwidth,\nimg.fullwidthOnMobile {\n max-width: 100% !important;\n }\n\n .no-stack .col {\n min-width: 0 !important;\n display: table-cell !important;\n }\n\n .no-stack.two-up .col {\n width: 50% !important;\n }\n\n .no-stack .col.num4 {\n width: 33% !important;\n }\n\n .no-stack .col.num8 {\n width: 66% !important;\n }\n\n .no-stack .col.num4 {\n width: 33% !important;\n }\n\n .no-stack .col.num3 {\n width: 25% !important;\n }\n\n .no-stack .col.num6 {\n width: 50% !important;\n }\n\n .no-stack .col.num9 {\n width: 75% !important;\n }\n\n .video-block {\n max-width: none !important;\n }\n\n .mobile_hide {\n min-height: 0px;\n max-height: 0px;\n max-width: 0px;\n display: none;\n overflow: hidden;\n font-size: 0px;\n }\n\n .desktop_hide {\n display: block !important;\n max-height: none !important;\n }\n}\n\t</style>\n</head>\n<body class=\"clean-body\" style=\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\">\n<p><img alt=\"Capillary Image\" height=\"389\" src=\"https://storage.crm.n.content-cdn.io/cdn-cgi/image/height=389,width=583,quality=75/intouch_creative_assets/f98ce0c0-53f8-4fbd-b4e3-05953dda.jpg\" width=\"583\" /></p>\n\n<p>Hello World <a href=\"{{unsubscribe}}\">unsubscribe</a></p>\n\n<table bgcolor=\"#FFFFFF\" cellpadding=\"0\" cellspacing=\"0\" class=\"nl-container\" role=\"presentation\" style=\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\" valign=\"top\">\n\t<tbody>\n\t\t<tr style=\"vertical-align:top\" valign=\"top\">\n\t\t\t<td style=\"vertical-align:top; word-break:break-word\">\n\t\t\t<div style=\"background-color:transparent\">\n\t\t\t<div class=\"block-grid\" style=\"background-color:transparent; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\">\n\t\t\t<div style=\"background-color:transparent; border-collapse:collapse; display:table; width:100%\">\n\t\t\t<div class=\"col num12\" style=\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\">\n\t\t\t<div style=\"width:100% !important\">\n\t\t\t<div style=\"border-bottom:0px solid transparent; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; padding-bottom:5px; padding-left:0px; padding-right:0px; padding-top:5px\"> </div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t</td>\n\t\t</tr>\n\t</tbody>\n</table>\n</body>\n</html>\n",
|
|
110
|
+
// "emailSubject": "test email sub",
|
|
111
|
+
// "channel": "EMAIL",
|
|
112
|
+
// "offers": []
|
|
113
|
+
// }
|
|
114
|
+
// }
|
|
@@ -33,6 +33,7 @@ import { CREATIVE } from '../Facebook/constants';
|
|
|
33
33
|
import { LOYALTY } from '../App/constants';
|
|
34
34
|
import { WHATSAPP_STATUSES } from '../Whatsapp/constants';
|
|
35
35
|
|
|
36
|
+
import {updateImagesInHtml} from '../../utils/cdnTransformation';
|
|
36
37
|
|
|
37
38
|
const classPrefix = 'add-creatives-section';
|
|
38
39
|
const CREATIVES_CONTAINER = 'creativesContainer';
|
|
@@ -369,15 +370,15 @@ export class Creatives extends React.Component {
|
|
|
369
370
|
const {
|
|
370
371
|
messageBody = '',
|
|
371
372
|
templateConfigs: {
|
|
373
|
+
id,
|
|
372
374
|
name,
|
|
373
375
|
template,
|
|
374
376
|
varMapped,
|
|
375
|
-
category,
|
|
376
377
|
language,
|
|
378
|
+
category,
|
|
379
|
+
mediaType,
|
|
377
380
|
buttonType = 'NONE',
|
|
378
381
|
buttons = [],
|
|
379
|
-
mediaType = 'TEXT',
|
|
380
|
-
whatsappMedia: { url: imageUrl = '' } = {},
|
|
381
382
|
} = {},
|
|
382
383
|
} = templateData;
|
|
383
384
|
const modifiedButtons = cloneDeep(buttons).map((btn) => {
|
|
@@ -388,13 +389,9 @@ export class Creatives extends React.Component {
|
|
|
388
389
|
}
|
|
389
390
|
return btn;
|
|
390
391
|
});
|
|
391
|
-
for (const key in varMapped) {
|
|
392
|
-
if (key.includes('_unsubscribe')) {
|
|
393
|
-
delete varMapped[key];
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
392
|
const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
|
|
397
393
|
creativesTemplateData = {
|
|
394
|
+
_id: id,
|
|
398
395
|
type: constants.WHATSAPP,
|
|
399
396
|
edit: true,
|
|
400
397
|
name,
|
|
@@ -406,7 +403,6 @@ export class Creatives extends React.Component {
|
|
|
406
403
|
category,
|
|
407
404
|
varMapped,
|
|
408
405
|
mediaType,
|
|
409
|
-
imageUrl,
|
|
410
406
|
buttonType,
|
|
411
407
|
buttons: modifiedButtons,
|
|
412
408
|
languages: [
|
|
@@ -456,7 +452,11 @@ export class Creatives extends React.Component {
|
|
|
456
452
|
return templateData || null;
|
|
457
453
|
}
|
|
458
454
|
|
|
459
|
-
getCreativesData = (channel, template, templateRecords) => {
|
|
455
|
+
getCreativesData = (channel, template, templateRecords) => {
|
|
456
|
+
//from creatives to consumers
|
|
457
|
+
console.log('hello channel', channel)
|
|
458
|
+
console.log('hello template', template)
|
|
459
|
+
console.log('hello templateRecords', templateRecords)
|
|
460
460
|
let templateData = { channel };
|
|
461
461
|
switch (channel) {
|
|
462
462
|
case constants.SMS:
|
|
@@ -495,10 +495,12 @@ export class Creatives extends React.Component {
|
|
|
495
495
|
if (!html_content) {
|
|
496
496
|
emailBase = templateRecords.base;
|
|
497
497
|
}
|
|
498
|
-
|
|
498
|
+
const newHtmlContent = updateImagesInHtml(html_content);
|
|
499
|
+
templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
|
|
499
500
|
delete templateData.html_content;
|
|
500
501
|
delete templateData.subject;
|
|
501
502
|
}
|
|
503
|
+
console.log('final template data: ', templateData)
|
|
502
504
|
break;
|
|
503
505
|
case constants.MOBILE_PUSH:
|
|
504
506
|
if (get(template, "value.versions.base")) {
|
|
@@ -587,63 +589,43 @@ export class Creatives extends React.Component {
|
|
|
587
589
|
case constants.WHATSAPP:
|
|
588
590
|
if (template.value) {
|
|
589
591
|
const { Templates, templateData: templateDataProps } = this.props;
|
|
590
|
-
const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
|
|
591
592
|
const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
|
|
593
|
+
const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
|
|
592
594
|
const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
|
|
593
595
|
const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
|
|
594
596
|
const { versions } = template.value;
|
|
595
597
|
const {
|
|
596
598
|
languages = [{}],
|
|
597
|
-
mediaType
|
|
598
|
-
category
|
|
599
|
-
templateEditor
|
|
600
|
-
varMapped
|
|
599
|
+
mediaType,
|
|
600
|
+
category,
|
|
601
|
+
templateEditor,
|
|
602
|
+
varMapped,
|
|
601
603
|
buttonType = 'NONE',
|
|
602
604
|
buttons = [],
|
|
603
|
-
imageUrl = '',
|
|
604
605
|
} = cloneDeep(versions.base.content.whatsapp);
|
|
605
|
-
|
|
606
606
|
const modifiedButtons = cloneDeep(buttons).map((btn) => {
|
|
607
607
|
if (btn.type === 'PHONE_NUMBER') {
|
|
608
608
|
btn.phoneNumber = btn.phone_number;
|
|
609
609
|
delete btn.phone_number;
|
|
610
|
-
|
|
611
|
-
const dynamicUrlPayload = btn.url.match(/{{(.*?)}}/g);
|
|
612
|
-
btn.dynamicUrlPayload = dynamicUrlPayload.length === 1 ? dynamicUrlPayload[0] : '';
|
|
610
|
+
return btn;
|
|
613
611
|
}
|
|
614
612
|
return btn;
|
|
615
613
|
});
|
|
616
|
-
|
|
617
|
-
//to send {{unsubscribe}} to backend inside varMapped
|
|
618
|
-
const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
|
|
619
|
-
if (
|
|
620
|
-
languages[0].content?.match(unsubscribeRegex)?.length > 0 &&
|
|
621
|
-
Object.keys(varMapped)?.every(
|
|
622
|
-
(key) => !key?.includes("_unsubscribe")
|
|
623
|
-
)
|
|
624
|
-
) {
|
|
625
|
-
varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
|
|
626
|
-
"{{unsubscribe}}";
|
|
627
|
-
}
|
|
628
|
-
|
|
629
614
|
templateData = {
|
|
630
615
|
channel,
|
|
631
616
|
accountId,
|
|
632
617
|
accountName: accountDetails?.name || '',
|
|
633
618
|
messageBody: languages[0].content,
|
|
634
619
|
templateConfigs: {
|
|
635
|
-
id: template
|
|
620
|
+
id: template._id,
|
|
636
621
|
name: template?.value?.name,
|
|
637
622
|
template: templateEditor,
|
|
638
623
|
varMapped,
|
|
639
624
|
category,
|
|
640
625
|
language: languages[0].language,
|
|
641
|
-
buttonType,
|
|
642
|
-
buttons: modifiedButtons,
|
|
643
626
|
mediaType,
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
},
|
|
627
|
+
buttonType,
|
|
628
|
+
buttons : modifiedButtons,
|
|
647
629
|
},
|
|
648
630
|
};
|
|
649
631
|
}
|
|
@@ -724,6 +706,7 @@ export class Creatives extends React.Component {
|
|
|
724
706
|
default:
|
|
725
707
|
break;
|
|
726
708
|
}
|
|
709
|
+
const newTemplateData = updateUrlInTemplate(channel, templateData);
|
|
727
710
|
return templateData;
|
|
728
711
|
};
|
|
729
712
|
getSlideBoxContent({mode, templateData, isFullMode}) {
|
|
@@ -35,6 +35,8 @@ import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT } from '
|
|
|
35
35
|
import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
|
|
36
36
|
import { gtmPush } from '../../utils/gtmTrackers';
|
|
37
37
|
const {CapCustomCardList} = CapCustomCard;
|
|
38
|
+
import {transformEmailTemplates} from '../../utils/cdnTransformation';
|
|
39
|
+
|
|
38
40
|
export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
39
41
|
constructor(props) {
|
|
40
42
|
super(props);
|
|
@@ -2437,8 +2439,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2437
2439
|
});
|
|
2438
2440
|
|
|
2439
2441
|
// if (saveCount === 0) {
|
|
2440
|
-
|
|
2441
|
-
this.props.actions.createTemplate(
|
|
2442
|
+
const newEmail = transformEmailTemplates(obj);
|
|
2443
|
+
this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
|
|
2442
2444
|
// } else {
|
|
2443
2445
|
// this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
|
|
2444
2446
|
// _.forEach(data.selectedLanguages, (language, langIndex) => {
|