@capillarytech/creatives-library 7.12.71 → 7.12.72

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 (4) hide show
  1. package/config/app.js +1 -0
  2. package/package.json +2 -1
  3. package/utils/cdnTransformation.js +91 -0
  4. package/v2Containers/Email/index.js +4 -2
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.71",
4
+ "version": "7.12.72",
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",
package/utils/cdnTransformation.js ADDED
@@ -0,0 +1,91 @@
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
+ 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?.history);
81
+ const history = contents?.versions?.history;
82
+ const languages = history?.[0]?.selectedLanguages;
83
+ console.log('hello languages', languages);
84
+ languages?.forEach((lang) => {
85
+ const htmlContents = history?.[0]?.[lang]?.['template-content'];
86
+ const newHtmlContents = updateImagesInHtml(htmlContents);
87
+ history[0][lang]['template-content'] = newHtmlContents;
88
+ console.log('hello template contents', history?.[0]?.[lang]?.['template-content']);
89
+ });
90
+ return contents;
91
+ };
package/v2Containers/Email/index.js CHANGED
@@ -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(obj, this.onUpdateTemplateComplete);
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) => {