@capillarytech/creatives-library 7.12.93 → 7.12.95

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.
@@ -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
+ }
@@ -0,0 +1,105 @@
1
+ import * as cdnUtils from '../cdnTransformation';
2
+ import * as mockdata from './cdnTransformation.mockdata';
3
+
4
+ describe('cdnTransformationTests',()=>{
5
+ beforeAll(()=>{
6
+ var localStorageMock = (function() {
7
+ var store = {
8
+ CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
9
+ CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
10
+ CREATIVES_CDN_QUALITY_CONFIG: '{"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
+
31
+ describe('getCdnUrl()',()=>{
32
+ it('should return s3 url if bucket subfolder doesn\'t contain intouch_creative_assets',()=>{
33
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/test/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
34
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'EMAIL'});
35
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
36
+ })
37
+
38
+ it('should return s3 if channelName is not defined',()=>{
39
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
40
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL});
41
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
42
+ })
43
+
44
+ it('should return s3 if specified channelSubType doesn\'t exist',()=>{
45
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
46
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'LINE', channelSubType: 'ABC'});
47
+ expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
48
+ })
49
+
50
+ it('Should replace s3 url with cdn url for email when h/w are not provided',()=>{
51
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
52
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'EMAIL'})
53
+ 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`
54
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
55
+ })
56
+
57
+ it('Should replace s3 url with cdn url for email when h/w are provided',()=>{
58
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
59
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'EMAIL', height: 100, width: 200})
60
+ 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`
61
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
62
+ })
63
+
64
+ it('should replace cdn url with new cdn url for email incase h/w etc changed', ()=>{
65
+ 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`
66
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'EMAIL', height: 400, width: 500})
67
+ 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`
68
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
69
+ })
70
+
71
+ it('should replace cdn url with new cdn url incase channelName is LINE and channelSubType is RICH_MESSAGE ',()=>{
72
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8`;
73
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'LINE', channelSubType: 'RICH_MESSAGE'})
74
+ 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`
75
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
76
+ })
77
+
78
+ it('should replace cdn url with new cdn url for channels which has predefined h/w for channel', ()=>{
79
+ const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
80
+ const GENERATED_CDN_URL = cdnUtils.getCdnUrl({url: TEST_S3_URL, channelName: 'RCS'})
81
+ 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`
82
+ expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
83
+ })
84
+ })
85
+
86
+
87
+ describe('updateImagesInHtml()',()=>{
88
+ it('should update images in html',()=>{
89
+ const htmlContentsInput = mockdata.emailRawInput;
90
+ const htmlContentsOutput = cdnUtils.updateImagesInHtml(htmlContentsInput);
91
+ const expected = mockdata.emailRawTransformed;
92
+ expect(htmlContentsOutput).toEqual(expected);
93
+ })
94
+ })
95
+
96
+
97
+ describe('transformEmailTemplate()',()=>{
98
+ it('should transform email template',()=>{
99
+ const emailTemplateInput = mockdata.emailTemplateRaw;
100
+ const emailTemplateOutput = cdnUtils.transformEmailTemplates(emailTemplateInput);
101
+ expect(emailTemplateOutput).toMatchSnapshot();
102
+ })
103
+ })
104
+ })
105
+
@@ -74,3 +74,8 @@ export function clearTopbarMenuData() {
74
74
  };
75
75
  }
76
76
 
77
+ export function getCdnTransformationConfig() {
78
+ return {
79
+ type: types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
80
+ }
81
+ }
@@ -38,3 +38,6 @@ export const LOYALTY_HELP_URL = 'https://docs.capillarytech.com/docs/loyalty-ove
38
38
  export const ORG_REFRESH_SEC = 10;
39
39
  export const ORG_CHANGED = 'ORG_CHANGED';
40
40
 
41
+ export const GET_CDN_TRANSFORMATION_CONFIG_REQUEST = 'creatives/GET_CDN_TRANSFORMATION_CONFIG_REQUEST/V2';
42
+ export const GET_CDN_TRANSFORMATION_CONFIG_SUCCESS = 'creatives/GET_CDN_TRANSFORMATION_CONFIG_SUCCESS/V2';
43
+ export const GET_CDN_TRANSFORMATION_CONFIG_FAILURE = 'creatives/GET_CDN_TRANSFORMATION_CONFIG_FAILURE/V2';
@@ -119,6 +119,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
119
119
  );
120
120
  window.addEventListener('pageshow', this.tabOnloadEventHandler, false);
121
121
  window.addEventListener('pagehide', tabBeforeUnloadEventHandler, false);
122
+ this.props.actions.getCdnTransformationConfig();
122
123
  }
123
124
 
124
125
  componentWillReceiveProps(nextProps) {
@@ -13,6 +13,8 @@ import {
13
13
  } from '../../v2Containers/App/constants';
14
14
  // import {makeSelectOrgId} from './selectors';
15
15
 
16
+ import { saveCdnConfigs } from '../../utils/cdnTransformation';
17
+
16
18
  function* authorize(user) {
17
19
  try {
18
20
  const res = yield call(Api.authorize, user);
@@ -41,6 +43,19 @@ function* switchOrg({orgID}) {
41
43
  }
42
44
  }
43
45
 
46
+ function* getCdnTransformationConfig() {
47
+ try {
48
+ const res = yield call(Api.getCdnTransformationConfig);
49
+
50
+ if(res?.success && res?.status?.code === 200){
51
+ const cdnConfigs = res?.response;
52
+ saveCdnConfigs(cdnConfigs);
53
+ }
54
+ } catch (error) {
55
+ console.log('some error occured during getCdnTransformationConfig call')
56
+ }
57
+ }
58
+
44
59
  function* loginFlow() {
45
60
  const condition = true;
46
61
  while (condition) {
@@ -175,6 +190,11 @@ function* watchGetTopbarMenuData() {
175
190
  yield takeLatest(types.GET_TOPBAR_MENU_DATA_REQUEST, getTopbarMenuData);
176
191
  }
177
192
 
193
+
194
+ function* watchGetCdnTransformationConfig() {
195
+ yield takeLatest(types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST, getCdnTransformationConfig);
196
+ }
197
+
178
198
  export default [
179
199
  loginFlow,
180
200
  watchForOrgChange,
@@ -182,5 +202,6 @@ export default [
182
202
  watchForFetchUserInfo,
183
203
  watchFetchSchemaForEntity,
184
204
  watchGetTopbarMenuData,
205
+ watchGetCdnTransformationConfig,
185
206
  ];
186
207
 
@@ -41,6 +41,7 @@ exports[`<Cap /> should render correct component 1`] = `
41
41
  "clearMetaEntities": [Function],
42
42
  "clearTopbarMenuData": [Function],
43
43
  "fetchSchemaForEntity": [Function],
44
+ "getCdnTransformationConfig": [Function],
44
45
  "getTopbarMenuData": [Function],
45
46
  "getUserData": [Function],
46
47
  "logout": [Function],
@@ -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';
@@ -495,7 +496,8 @@ export class Creatives extends React.Component {
495
496
  if (!html_content) {
496
497
  emailBase = templateRecords.base;
497
498
  }
498
- templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
499
+ const newHtmlContent = updateImagesInHtml(html_content);
500
+ templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
499
501
  delete templateData.html_content;
500
502
  delete templateData.subject;
501
503
  }
@@ -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);
@@ -2438,7 +2440,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2438
2440
 
2439
2441
  // if (saveCount === 0) {
2440
2442
 
2441
- this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
2443
+ const newEmail = transformEmailTemplates(obj);
2444
+ this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
2442
2445
  // } else {
2443
2446
  // this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
2444
2447
  // _.forEach(data.selectedLanguages, (language, langIndex) => {
@@ -7,7 +7,7 @@ import isEmpty from 'lodash/isEmpty';
7
7
  import { connect } from "react-redux";
8
8
  import { createStructuredSelector } from "reselect";
9
9
  import { selectCurrentOrgDetails } from "../../Cap/selectors";
10
-
10
+ import { getCdnUrl } from '../../../utils/cdnTransformation';
11
11
  import {
12
12
  CapInput,
13
13
  CapRadioCard,
@@ -197,7 +197,7 @@ export const Advertisement = (props) => {
197
197
  };
198
198
  if (obj.subType === IMAGE) {
199
199
  data.imageData = {
200
- imageSrc: obj.imgSrc,
200
+ imageSrc: getCdnUrl({url: obj.imgSrc, channelName: 'FACEBOOK', channelSubType: 'IMAGE'}),
201
201
  };
202
202
  }
203
203
  if (obj.subType === VIDEO) {
@@ -336,7 +336,7 @@ export const Advertisement = (props) => {
336
336
  };
337
337
  }
338
338
  if (obj.subType === IMAGE) {
339
- data.imgSrc = obj.imageData.imageSrc;
339
+ data.imgSrc = getCdnUrl({url: obj.imageData.imageSrc, channelName: 'FACEBOOK', channelSubType: 'IMAGE'});
340
340
  } else {
341
341
  const {
342
342
  videoSrc,
@@ -1033,4 +1033,4 @@ const mapStateToProps = (state, props) =>
1033
1033
  : selectCurrentOrgDetails(),
1034
1034
  });
1035
1035
 
1036
- export default connect(mapStateToProps, null)(injectIntl(Advertisement));
1036
+ export default connect(mapStateToProps, null)(injectIntl(Advertisement));
@@ -15,6 +15,7 @@ import Gallery from '../../../Assets/Gallery';
15
15
  import style from './style';
16
16
  import { CAP_G06, CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
17
17
  import withStyles from '../../../../hoc/withStyles';
18
+ import { getCdnUrl } from '../../../../utils/cdnTransformation';
18
19
 
19
20
  import messages from './messages';
20
21
  import {
@@ -73,7 +74,7 @@ export const LineImage = ({
73
74
  if (imageSrc && (isFullMode ? messageTitle: true) && imagePreview) {
74
75
  updateMessageState({
75
76
  isError: !imageSrc || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
76
- originalContentUrl: imageSrc,
77
+ originalContentUrl: getCdnUrl({url: imageSrc, channelName: 'LINE', channelSubType: 'IMAGE'}),
77
78
  previewImageUrl: imagePreview,
78
79
  messageTitle,
79
80
  index,
@@ -112,7 +113,7 @@ export const LineImage = ({
112
113
 
113
114
  updateMessageState({
114
115
  isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
115
- originalContentUrl: imgSrc,
116
+ originalContentUrl: getCdnUrl({url: imgSrc, channelName: 'LINE', channelSubType: 'IMAGE'}),
116
117
  previewImageUrl: imgPreview,
117
118
  messageTitle,
118
119
  index,
@@ -155,7 +156,7 @@ export const LineImage = ({
155
156
  }
156
157
  updateMessageState({
157
158
  isError: !imageSrc || !(isFullMode ? value : true) || isImageError || !value,
158
- originalContentUrl: imageSrc,
159
+ originalContentUrl: getCdnUrl({url: imageSrc, channelName: 'LINE', channelSubType: 'IMAGE'}),
159
160
  previewImageUrl: imagePreview,
160
161
  messageTitle: value,
161
162
  index,
@@ -412,7 +413,7 @@ export const LineImage = ({
412
413
  updateImagePreview(imagePreview);
413
414
  updateMessageState({
414
415
  isError: !image || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
415
- originalContentUrl: image,
416
+ originalContentUrl: getCdnUrl({url: image, channelName: 'LINE', channelSubType: 'IMAGE'}),
416
417
  previewImageUrl: imagePreview,
417
418
  messageTitle,
418
419
  index,