@capillarytech/creatives-library 7.12.108 → 7.12.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/package.json +4 -2
  2. package/routes.js +1 -0
  3. package/services/api.js +6 -1
  4. package/utils/cdnTransformation.js +316 -0
  5. package/utils/tests/__snapshots__/cdnTransformation.test.js.snap +298 -0
  6. package/utils/tests/cdnTransformation.mockdata.js +301 -0
  7. package/utils/tests/cdnTransformation.test.js +245 -0
  8. package/v2Containers/Cap/actions.js +0 -1
  9. package/v2Containers/Cap/constants.js +0 -1
  10. package/v2Containers/Cap/sagas.js +3 -0
  11. package/v2Containers/CreativesContainer/actions.js +2 -1
  12. package/v2Containers/CreativesContainer/constants.js +1 -1
  13. package/v2Containers/CreativesContainer/index.js +6 -1
  14. package/v2Containers/CreativesContainer/tests/index.test.js +4 -0
  15. package/v2Containers/Email/index.js +4 -1
  16. package/v2Containers/Facebook/Advertisement/index.js +4 -4
  17. package/v2Containers/Line/Container/Image/index.js +5 -4
  18. package/v2Containers/Line/Container/ImageCarousel/index.js +6 -5
  19. package/v2Containers/Line/Container/ImageMap/index.js +2 -1
  20. package/v2Containers/MobilePush/Create/index.js +5 -7
  21. package/v2Containers/MobilePush/Edit/index.js +4 -3
  22. package/v2Containers/Rcs/index.js +2 -1
  23. package/v2Containers/Templates/actions.js +6 -0
  24. package/v2Containers/Templates/constants.js +4 -0
  25. package/v2Containers/Templates/sagas.js +23 -0
  26. package/v2Containers/TemplatesV2/index.js +5 -0
  27. package/v2Containers/Viber/index.js +11 -2
  28. package/v2Containers/WeChat/RichmediaTemplates/Create/index.js +3 -1
  29. package/v2Containers/Whatsapp/index.js +4 -2
  30. package/tests/integration/CreateTemplate/CreateTemplate.integration.test.js +0 -18
package/utils/tests/cdnTransformation.mockdata.js ADDED
@@ -0,0 +1,301 @@
1
+ export const emailRawInput = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
3
+ <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]-->
4
+ <title></title>
5
+ <!--[if !mso]><!--<![endif]-->
6
+ <style type="text/css">body {
7
+ margin: 0;
8
+ padding: 0; }
9
+
10
+ table,
11
+ td,
12
+ tr {
13
+ vertical-align: top;
14
+ border-collapse: collapse; }
15
+
16
+ * {
17
+ line-height: inherit; }
18
+
19
+ a[x-apple-data-detectors=true] {
20
+ color: inherit !important;
21
+ text-decoration: none !important; }
22
+ </style>
23
+ <style id="media-query" type="text/css">@media (max-width: 520px) {
24
+ .block-grid,
25
+ .col {
26
+ min-width: 320px !important;
27
+ max-width: 100% !important;
28
+ display: block !important;
29
+ }
30
+
31
+ .block-grid {
32
+ width: 100% !important;
33
+ }
34
+
35
+ .col {
36
+ width: 100% !important;
37
+ }
38
+
39
+ .col > div {
40
+ margin: 0 auto;
41
+ }
42
+
43
+ img.fullwidth,
44
+ img.fullwidthOnMobile {
45
+ max-width: 100% !important;
46
+ }
47
+
48
+ .no-stack .col {
49
+ min-width: 0 !important;
50
+ display: table-cell !important;
51
+ }
52
+
53
+ .no-stack.two-up .col {
54
+ width: 50% !important;
55
+ }
56
+
57
+ .no-stack .col.num4 {
58
+ width: 33% !important;
59
+ }
60
+
61
+ .no-stack .col.num8 {
62
+ width: 66% !important;
63
+ }
64
+
65
+ .no-stack .col.num4 {
66
+ width: 33% !important;
67
+ }
68
+
69
+ .no-stack .col.num3 {
70
+ width: 25% !important;
71
+ }
72
+
73
+ .no-stack .col.num6 {
74
+ width: 50% !important;
75
+ }
76
+
77
+ .no-stack .col.num9 {
78
+ width: 75% !important;
79
+ }
80
+
81
+ .video-block {
82
+ max-width: none !important;
83
+ }
84
+
85
+ .mobile_hide {
86
+ min-height: 0px;
87
+ max-height: 0px;
88
+ max-width: 0px;
89
+ display: none;
90
+ overflow: hidden;
91
+ font-size: 0px;
92
+ }
93
+
94
+ .desktop_hide {
95
+ display: block !important;
96
+ max-height: none !important;
97
+ }
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;">
102
+ <p><img alt="Capillary Image" height="184" src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/d5679e9b-1ff4-4e7c-8f77-30160048.png" width="328" /></p>
103
+ <!--[if IE]><div class="ie-browser"><![endif]-->
104
+
105
+ <p>Hello world</p>
106
+
107
+ <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">
108
+ <tbody>
109
+ <tr style="vertical-align:top" valign="top">
110
+ <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]-->
111
+ <div style="background-color:transparent">
112
+ <div class="block-grid" style="background-color:transparent; margin-bottom:0; margin-left:auto; margin-right:auto; margin-top:0; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word">
113
+ <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]-->
114
+ <div class="col num12" style="display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px">
115
+ <div style="width:100% !important"><!--[if (!mso)&(!IE)]><div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"><!--<![endif]--><!--[if (!mso)&(!IE)]></div><!--<![endif]--></div>
116
+ </div>
117
+ <!--[if (mso)|(IE)]></td></tr></table><![endif]--><!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]--></div>
118
+ </div>
119
+ </div>
120
+ <!--[if (mso)|(IE)]></td></tr></table><![endif]--></td>
121
+ </tr>
122
+ </tbody>
123
+ </table>
124
+ <!--[if (IE)]></div><![endif]--></body>
125
+ </html>
126
+ `;
127
+
128
+ export const emailRawTransformed = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
129
+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
130
+ <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
131
+ <title></title>
132
+
133
+ <style type="text/css">body {
134
+ margin: 0;
135
+ padding: 0; }
136
+
137
+ table,
138
+ td,
139
+ tr {
140
+ vertical-align: top;
141
+ border-collapse: collapse; }
142
+
143
+ * {
144
+ line-height: inherit; }
145
+
146
+ a[x-apple-data-detectors=true] {
147
+ color: inherit !important;
148
+ text-decoration: none !important; }
149
+ </style>
150
+ <style id="media-query" type="text/css">@media (max-width: 520px) {
151
+ .block-grid,
152
+ .col {
153
+ min-width: 320px !important;
154
+ max-width: 100% !important;
155
+ display: block !important;
156
+ }
157
+
158
+ .block-grid {
159
+ width: 100% !important;
160
+ }
161
+
162
+ .col {
163
+ width: 100% !important;
164
+ }
165
+
166
+ .col > div {
167
+ margin: 0 auto;
168
+ }
169
+
170
+ img.fullwidth,
171
+ img.fullwidthOnMobile {
172
+ max-width: 100% !important;
173
+ }
174
+
175
+ .no-stack .col {
176
+ min-width: 0 !important;
177
+ display: table-cell !important;
178
+ }
179
+
180
+ .no-stack.two-up .col {
181
+ width: 50% !important;
182
+ }
183
+
184
+ .no-stack .col.num4 {
185
+ width: 33% !important;
186
+ }
187
+
188
+ .no-stack .col.num8 {
189
+ width: 66% !important;
190
+ }
191
+
192
+ .no-stack .col.num4 {
193
+ width: 33% !important;
194
+ }
195
+
196
+ .no-stack .col.num3 {
197
+ width: 25% !important;
198
+ }
199
+
200
+ .no-stack .col.num6 {
201
+ width: 50% !important;
202
+ }
203
+
204
+ .no-stack .col.num9 {
205
+ width: 75% !important;
206
+ }
207
+
208
+ .video-block {
209
+ max-width: none !important;
210
+ }
211
+
212
+ .mobile_hide {
213
+ min-height: 0px;
214
+ max-height: 0px;
215
+ max-width: 0px;
216
+ display: none;
217
+ overflow: hidden;
218
+ font-size: 0px;
219
+ }
220
+
221
+ .desktop_hide {
222
+ display: block !important;
223
+ max-height: none !important;
224
+ }
225
+ }
226
+ </style>
227
+ </head>
228
+ <body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;">
229
+ <p><img alt="Capillary Image" height="184" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=328,height=184,format=auto,quality=75,/intouch_creative_assets/d5679e9b-1ff4-4e7c-8f77-30160048.png" width="328"></p>
230
+
231
+
232
+ <p>Hello world</p>
233
+
234
+ <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">
235
+ <tbody>
236
+ <tr style="vertical-align:top" valign="top">
237
+ <td style="vertical-align:top; word-break:break-word">
238
+ <div style="background-color:transparent">
239
+ <div class="block-grid" style="background-color:transparent; margin-bottom:0; margin-left:auto; margin-right:auto; margin-top:0; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word">
240
+ <div style="background-color:transparent; border-collapse:collapse; display:table; width:100%">
241
+ <div class="col num12" style="display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px">
242
+ <div style="width:100% !important"></div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </td>
248
+ </tr>
249
+ </tbody>
250
+ </table>
251
+ </body>
252
+ </html>
253
+ `;
254
+
255
+
256
+ export const emailTemplateRaw = {
257
+ "versions": {
258
+ "base": {
259
+ "activeTab": "en",
260
+ "en": {
261
+ "is_drag_drop": false,
262
+ "lang_id": 69,
263
+ "iso_code": "en",
264
+ "language": "English",
265
+ "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;\">\n<p><!--[if IE]><div class=\"ie-browser\"><![endif]-->hello world</p>\n\n<p><img alt=\"Capillary Image\" height=\"171\" src=\"https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\" width=\"257\" /></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:0; margin-left:auto; margin-right:auto; margin-top:0; 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)]><div style=\"border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;\"><!--<![endif]--><!--[if (!mso)&(!IE)]></div><!--<![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",
266
+ "drag_drop_id": "",
267
+ "tabKey": "6",
268
+ "id": "5f7b61605f09ebe595ff404e"
269
+ },
270
+ "selectedLanguages": [
271
+ "en"
272
+ ],
273
+ "base": true,
274
+ "tabKey": "6",
275
+ "subject": "hello subject"
276
+ },
277
+ "history": [
278
+ {
279
+ "activeTab": "en",
280
+ "en": {
281
+ "is_drag_drop": false,
282
+ "lang_id": 69,
283
+ "iso_code": "en",
284
+ "language": "English",
285
+ "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;\">\n<p><!--[if IE]><div class=\"ie-browser\"><![endif]-->hello world</p>\n\n<p><img alt=\"Capillary Image\" height=\"171\" src=\"https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\" width=\"257\" /></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:0; margin-left:auto; margin-right:auto; margin-top:0; 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)]><div style=\"border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;\"><!--<![endif]--><!--[if (!mso)&(!IE)]></div><!--<![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",
286
+ "drag_drop_id": "",
287
+ "tabKey": "6",
288
+ "id": "5f7b61605f09ebe595ff404e"
289
+ },
290
+ "selectedLanguages": [
291
+ "en"
292
+ ],
293
+ "base": true,
294
+ "tabKey": "6",
295
+ "subject": "hello subject"
296
+ }
297
+ ]
298
+ },
299
+ "type": "EMAIL",
300
+ "name": "test template1"
301
+ }
package/utils/tests/cdnTransformation.test.js ADDED
@@ -0,0 +1,245 @@
1
+ import * as cdnUtils from "../cdnTransformation";
2
+ import * as mockdata from "./cdnTransformation.mockdata";
3
+
4
+ beforeEach(() => {
5
+ var localStorageMock = (function () {
6
+ var store = {
7
+ CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
8
+ CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
9
+ CREATIVES_CDN_QUALITY_CONFIG:
10
+ '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}',
11
+ };
12
+ return {
13
+ getItem: function (key) {
14
+ return store[key];
15
+ },
16
+ setItem: function (key, value) {
17
+ store[key] = value.toString();
18
+ },
19
+ clear: function () {
20
+ store = {};
21
+ },
22
+ removeItem: function (key) {
23
+ delete store[key];
24
+ },
25
+ };
26
+ })();
27
+ Object.defineProperty(window, "localStorage", { value: localStorageMock });
28
+ });
29
+
30
+ afterEach(() => {
31
+ localStorage.setItem(
32
+ "CREATIVES_CDN_QUALITY_CONFIG",
33
+ '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
34
+ );
35
+ });
36
+
37
+ describe("cdnTransformationTests", () => {
38
+ describe("getCdnUrl()", () => {
39
+ it("should return s3 url if bucket subfolder doesn't contain intouch_creative_assets", () => {
40
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/test/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
41
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
42
+ url: TEST_S3_URL,
43
+ channelName: "EMAIL",
44
+ });
45
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
46
+ });
47
+
48
+ it("should return s3 if channelName is not defined", () => {
49
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
50
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({ url: TEST_S3_URL });
51
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
52
+ });
53
+
54
+ it("should return s3 if specified channelSubType doesn't exist", () => {
55
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
56
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
57
+ url: TEST_S3_URL,
58
+ channelName: "LINE",
59
+ channelSubType: "ABC",
60
+ });
61
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
62
+ });
63
+
64
+ it("Should replace s3 url with cdn url for email when h/w are not provided", () => {
65
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
66
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
67
+ url: TEST_S3_URL,
68
+ channelName: "EMAIL",
69
+ });
70
+ const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
71
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
72
+ });
73
+
74
+ it("Should replace s3 url with cdn url for email when h/w are provided", () => {
75
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
76
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
77
+ url: TEST_S3_URL,
78
+ channelName: "EMAIL",
79
+ height: 100,
80
+ width: 200,
81
+ });
82
+ const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
83
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
84
+ });
85
+
86
+ it("should replace cdn url with new cdn url for email incase h/w etc changed", () => {
87
+ const TEST_S3_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
88
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
89
+ url: TEST_S3_URL,
90
+ channelName: "EMAIL",
91
+ height: 400,
92
+ width: 500,
93
+ });
94
+ const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=500,height=400,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
95
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
96
+ });
97
+
98
+ it("should replace cdn url with new cdn url incase channelName is LINE and channelSubType is RICH_MESSAGE ", () => {
99
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8`;
100
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
101
+ url: TEST_S3_URL,
102
+ channelName: "LINE",
103
+ channelSubType: "RICH_MESSAGE",
104
+ });
105
+ const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=1040,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8`;
106
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
107
+ });
108
+
109
+ it("should replace cdn url with new cdn url for channels which has predefined h/w for channel", () => {
110
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
111
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
112
+ url: TEST_S3_URL,
113
+ channelName: "RCS",
114
+ });
115
+ const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=1440,height=720,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
116
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
117
+ });
118
+
119
+ it("should return url directly if typeof CREATIVES_CDN_QUALITY_CONFIG is not object", () => {
120
+ localStorage.setItem("CREATIVES_CDN_QUALITY_CONFIG", "a");
121
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
122
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
123
+ url: TEST_S3_URL,
124
+ channelName: "EMAIL",
125
+ });
126
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
127
+ });
128
+
129
+ it("should return cdn url with full quality if quality is not number", () => {
130
+ localStorage.setItem(
131
+ "CREATIVES_CDN_QUALITY_CONFIG",
132
+ '{"EMAIL":"a","RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
133
+ );
134
+
135
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
136
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
137
+ url: TEST_S3_URL,
138
+ channelName: "EMAIL",
139
+ height: 100,
140
+ width: 200,
141
+ });
142
+ const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=100,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
143
+
144
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
145
+ });
146
+ });
147
+
148
+ describe("updateImagesInHtml()", () => {
149
+ it("should update images in html", () => {
150
+ const htmlContentsInput = mockdata.emailRawInput;
151
+ const htmlContentsOutput = cdnUtils.updateImagesInHtml(htmlContentsInput);
152
+ const expected = mockdata.emailRawTransformed;
153
+ expect(htmlContentsOutput).toEqual(expected);
154
+ });
155
+ });
156
+
157
+ describe("transformEmailTemplate()", () => {
158
+ it("should transform email template", () => {
159
+ const emailTemplateInput = mockdata.emailTemplateRaw;
160
+ const emailTemplateOutput =
161
+ cdnUtils.transformEmailTemplates(emailTemplateInput);
162
+ expect(emailTemplateOutput).toMatchSnapshot();
163
+ });
164
+ });
165
+
166
+ describe("saveCdnConfigs()", () => {
167
+ it("should set received input values in localStorage", () => {
168
+ const cdnConfigs = {
169
+ transformationUrlSuffix: "cdn-cgi/image",
170
+ hostname: "https://storage.crm.n.content-cdn.io",
171
+ qualityCfg: {
172
+ EMAIL: 75,
173
+ RCS: 75,
174
+ VIBER: 75,
175
+ WHATSAPP: 75,
176
+ MOBILE_PUSH: 75,
177
+ FACEBOOK: 75,
178
+ LINE: 75,
179
+ DEFAULT: 75,
180
+ },
181
+ };
182
+
183
+ const expected = {
184
+ CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
185
+ CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
186
+ CREATIVES_CDN_QUALITY_CONFIG:
187
+ '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}',
188
+ };
189
+ cdnUtils.saveCdnConfigs(cdnConfigs);
190
+
191
+ expect(
192
+ localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")
193
+ ).toBe(expected.CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX);
194
+ expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe(
195
+ expected.CREATIVES_CDN_BASE_URL
196
+ );
197
+ expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe(
198
+ expected.CREATIVES_CDN_QUALITY_CONFIG
199
+ );
200
+ });
201
+
202
+ it("should clear items from localStorage if input does not contain hostname or transformationUrlSuffix", () => {
203
+ const cdnConfigs = {
204
+ qualityCfg: {
205
+ EMAIL: 75,
206
+ RCS: 75,
207
+ VIBER: 75,
208
+ WHATSAPP: 75,
209
+ MOBILE_PUSH: 75,
210
+ FACEBOOK: 75,
211
+ LINE: 75,
212
+ DEFAULT: 75,
213
+ },
214
+ };
215
+
216
+ const expected = {
217
+ CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
218
+ CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
219
+ CREATIVES_CDN_QUALITY_CONFIG:
220
+ '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}',
221
+ };
222
+ cdnUtils.saveCdnConfigs(cdnConfigs);
223
+
224
+ expect(
225
+ localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")
226
+ ).toBe(undefined);
227
+ expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe(undefined);
228
+ expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe(
229
+ expected.CREATIVES_CDN_QUALITY_CONFIG
230
+ );
231
+ });
232
+
233
+ it("should clear items from localStorage if input is null or empty object", () => {
234
+ const cdnConfigs = {};
235
+
236
+ cdnUtils.saveCdnConfigs(cdnConfigs);
237
+
238
+ expect(
239
+ localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")
240
+ ).toBe(undefined);
241
+ expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe(undefined);
242
+ expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe(undefined);
243
+ });
244
+ });
245
+ });
package/v2Containers/Cap/actions.js CHANGED
@@ -73,4 +73,3 @@ export function clearTopbarMenuData() {
73
73
  type: types.CLEAR_TOPBAR_MENU_DATA,
74
74
  };
75
75
  }
76
-
package/v2Containers/Cap/constants.js CHANGED
@@ -37,4 +37,3 @@ export const LOYALTY_HELP_URL = 'https://docs.capillarytech.com/docs/loyalty-ove
37
37
 
38
38
  export const ORG_REFRESH_SEC = 10;
39
39
  export const ORG_CHANGED = 'ORG_CHANGED';
40
-
package/v2Containers/Cap/sagas.js CHANGED
@@ -13,6 +13,7 @@ import {
13
13
  } from '../../v2Containers/App/constants';
14
14
  // import {makeSelectOrgId} from './selectors';
15
15
 
16
+
16
17
  function* authorize(user) {
17
18
  try {
18
19
  const res = yield call(Api.authorize, user);
@@ -41,6 +42,7 @@ function* switchOrg({orgID}) {
41
42
  }
42
43
  }
43
44
 
45
+
44
46
  function* loginFlow() {
45
47
  const condition = true;
46
48
  while (condition) {
@@ -175,6 +177,7 @@ function* watchGetTopbarMenuData() {
175
177
  yield takeLatest(types.GET_TOPBAR_MENU_DATA_REQUEST, getTopbarMenuData);
176
178
  }
177
179
 
180
+
178
181
  export default [
179
182
  loginFlow,
180
183
  watchForOrgChange,
package/v2Containers/CreativesContainer/actions.js CHANGED
@@ -8,6 +8,7 @@ import {
8
8
  DEFAULT_ACTION,
9
9
  HIDE_CONTAINER_LOADER,
10
10
  SHOW_CONTANER_LOADER,
11
+ GET_CDN_TRANSFORMATION_CONFIG_REQUEST
11
12
  } from './constants';
12
13
 
13
14
  export function defaultAction() {
@@ -24,4 +25,4 @@ export function hideCreativesContanerLoader() {
24
25
  return {
25
26
  type: HIDE_CONTAINER_LOADER,
26
27
  };
27
- }
28
+ }
package/v2Containers/CreativesContainer/constants.js CHANGED
@@ -22,4 +22,4 @@ export const RCS = "RCS";
22
22
  export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
23
23
  export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
24
24
 
25
- export const WHATSAPP_HELP_DOC_LINK = "https://support.capillarytech.com/en/support/solutions/articles/4000180620-create-whatsapp-template";
25
+ export const WHATSAPP_HELP_DOC_LINK = "https://support.capillarytech.com/en/support/solutions/articles/4000180620-create-whatsapp-template";
package/v2Containers/CreativesContainer/index.js CHANGED
@@ -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';
@@ -76,6 +77,9 @@ export class Creatives extends React.Component {
76
77
 
77
78
  componentDidMount() {
78
79
  GA.timeTracker.startTimer(CREATIVES_CONTAINER);
80
+ if(!this.props?.isFullMode){
81
+ this.props?.templateActions.getCdnTransformationConfig();
82
+ }
79
83
  }
80
84
 
81
85
  onEnterTemplateName = () => {
@@ -495,7 +499,8 @@ export class Creatives extends React.Component {
495
499
  if (!html_content) {
496
500
  emailBase = templateRecords.base;
497
501
  }
498
- templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
502
+ const newHtmlContent = updateImagesInHtml(html_content);
503
+ templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
499
504
  delete templateData.html_content;
500
505
  delete templateData.subject;
501
506
  }
package/v2Containers/CreativesContainer/tests/index.test.js CHANGED
@@ -26,6 +26,7 @@ jest.mock('../../../v2Components/FormBuilder', () => ({
26
26
  describe('Test SlideBoxContent container', () => {
27
27
  const handleCloseCreatives = jest.fn();
28
28
  const getCreativesData = jest.fn();
29
+ const getCdnTransformationConfig = jest.fn();
29
30
  let renderedComponent;
30
31
 
31
32
  beforeEach(() => {
@@ -41,6 +42,9 @@ describe('Test SlideBoxContent container', () => {
41
42
  templateData={templateData}
42
43
  handleCloseCreatives={handleCloseCreatives}
43
44
  getCreativesData={getCreativesData}
45
+ templateActions={{
46
+ getCdnTransformationConfig
47
+ }}
44
48
  />,
45
49
  );
46
50
  };