@capillarytech/creatives-library 7.12.72 → 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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/utils/cdnTransformation.js +31 -8
  3. package/v2Containers/CreativesContainer/index.js +23 -40
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.12.72",
4
+ "version": "7.12.73",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/utils/cdnTransformation.js CHANGED
@@ -50,7 +50,7 @@ const CDN_BASE_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image`;
50
50
  const QUALITY = 75;
51
51
  const regex = /intouch_creative_assets/;
52
52
 
53
- const updateImagesInHtml = (htmlContents) => {
53
+ export const updateImagesInHtml = (htmlContents) => {
54
54
  const root = parse(htmlContents);
55
55
  root.querySelectorAll('img').forEach((element) => {
56
56
  const imageSrc = element.getAttribute('src');
@@ -77,15 +77,38 @@ const updateImagesInHtml = (htmlContents) => {
77
77
 
78
78
  export const transformEmailTemplates = (contents) => {
79
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);
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
84
  languages?.forEach((lang) => {
85
- const htmlContents = history?.[0]?.[lang]?.['template-content'];
85
+ const htmlContents = base?.[lang]?.['template-content'];
86
86
  const newHtmlContents = updateImagesInHtml(htmlContents);
87
- history[0][lang]['template-content'] = newHtmlContents;
88
- console.log('hello template contents', history?.[0]?.[lang]?.['template-content']);
87
+ base[lang]['template-content'] = newHtmlContents;
88
+ console.log('hello template contents', base?.[lang]?.['template-content']);
89
89
  });
90
90
  return contents;
91
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&nbsp;<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\">&nbsp;</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
+ // }
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';
@@ -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) => { //from creatives to consumers
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
- templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
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 = 'TEXT',
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
- } else if (btn.type === 'DYNAMIC_URL') {
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?.value?.name,
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
- whatsappMedia: {
645
- url: imageUrl,
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}) {