@capillarytech/creatives-library 7.12.80 → 7.12.81

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.
@@ -13,7 +13,7 @@ import React from 'react';
13
13
  import _ from 'lodash';
14
14
  // import messages from './messages';
15
15
  const loadScript = require('load-script');
16
- const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.14.1/ckeditor.js";
16
+ const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.19.0/ckeditor.js";
17
17
  const user = localStorage.getItem('user');
18
18
  let locale = 'en';
19
19
  if (user && JSON.parse(user).lang) {
package/config/app.js CHANGED
@@ -16,7 +16,6 @@ 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',
20
19
  api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
21
20
  campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
22
21
  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.80",
4
+ "version": "7.12.81",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
@@ -24,7 +24,6 @@
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",
28
27
  "normalizr": "^3.2.3",
29
28
  "papaparse": "^5.3.1",
30
29
  "pre-push": "^0.1.2",
@@ -13,7 +13,7 @@ import React from 'react';
13
13
  import _ from 'lodash';
14
14
  // import messages from './messages';
15
15
  const loadScript = require('load-script');
16
- const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.14.1/ckeditor.js";
16
+ const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.19.0/ckeditor.js";
17
17
  const user = localStorage.getItem('user');
18
18
  let locale = 'en';
19
19
  if (user && JSON.parse(user).lang) {
@@ -33,7 +33,6 @@ 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';
37
36
 
38
37
  const classPrefix = 'add-creatives-section';
39
38
  const CREATIVES_CONTAINER = 'creativesContainer';
@@ -370,15 +369,15 @@ export class Creatives extends React.Component {
370
369
  const {
371
370
  messageBody = '',
372
371
  templateConfigs: {
373
- id,
374
372
  name,
375
373
  template,
376
374
  varMapped,
377
- language,
378
375
  category,
379
- mediaType,
376
+ language,
380
377
  buttonType = 'NONE',
381
378
  buttons = [],
379
+ mediaType = 'TEXT',
380
+ whatsappMedia: { url: imageUrl = '' } = {},
382
381
  } = {},
383
382
  } = templateData;
384
383
  const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -389,9 +388,13 @@ export class Creatives extends React.Component {
389
388
  }
390
389
  return btn;
391
390
  });
391
+ for (const key in varMapped) {
392
+ if (key.includes('_unsubscribe')) {
393
+ delete varMapped[key];
394
+ }
395
+ }
392
396
  const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
393
397
  creativesTemplateData = {
394
- _id: id,
395
398
  type: constants.WHATSAPP,
396
399
  edit: true,
397
400
  name,
@@ -403,6 +406,7 @@ export class Creatives extends React.Component {
403
406
  category,
404
407
  varMapped,
405
408
  mediaType,
409
+ imageUrl,
406
410
  buttonType,
407
411
  buttons: modifiedButtons,
408
412
  languages: [
@@ -452,8 +456,7 @@ export class Creatives extends React.Component {
452
456
  return templateData || null;
453
457
  }
454
458
 
455
- getCreativesData = (channel, template, templateRecords) => {
456
- //from creatives to consumers
459
+ getCreativesData = (channel, template, templateRecords) => { //from creatives to consumers
457
460
  let templateData = { channel };
458
461
  switch (channel) {
459
462
  case constants.SMS:
@@ -492,8 +495,7 @@ export class Creatives extends React.Component {
492
495
  if (!html_content) {
493
496
  emailBase = templateRecords.base;
494
497
  }
495
- const newHtmlContent = updateImagesInHtml(html_content);
496
- templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
498
+ templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
497
499
  delete templateData.html_content;
498
500
  delete templateData.subject;
499
501
  }
@@ -585,43 +587,63 @@ export class Creatives extends React.Component {
585
587
  case constants.WHATSAPP:
586
588
  if (template.value) {
587
589
  const { Templates, templateData: templateDataProps } = this.props;
588
- const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
589
590
  const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
591
+ const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
590
592
  const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
591
593
  const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
592
594
  const { versions } = template.value;
593
595
  const {
594
596
  languages = [{}],
595
- mediaType,
596
- category,
597
- templateEditor,
598
- varMapped,
597
+ mediaType = 'TEXT',
598
+ category = '',
599
+ templateEditor = '',
600
+ varMapped = {},
599
601
  buttonType = 'NONE',
600
602
  buttons = [],
603
+ imageUrl = '',
601
604
  } = cloneDeep(versions.base.content.whatsapp);
605
+
602
606
  const modifiedButtons = cloneDeep(buttons).map((btn) => {
603
607
  if (btn.type === 'PHONE_NUMBER') {
604
608
  btn.phoneNumber = btn.phone_number;
605
609
  delete btn.phone_number;
606
- return btn;
610
+ } else if (btn.type === 'DYNAMIC_URL') {
611
+ const dynamicUrlPayload = btn.url.match(/{{(.*?)}}/g);
612
+ btn.dynamicUrlPayload = dynamicUrlPayload.length === 1 ? dynamicUrlPayload[0] : '';
607
613
  }
608
614
  return btn;
609
615
  });
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
+
610
629
  templateData = {
611
630
  channel,
612
631
  accountId,
613
632
  accountName: accountDetails?.name || '',
614
633
  messageBody: languages[0].content,
615
634
  templateConfigs: {
616
- id: template._id,
635
+ id: template?.value?.name,
617
636
  name: template?.value?.name,
618
637
  template: templateEditor,
619
638
  varMapped,
620
639
  category,
621
640
  language: languages[0].language,
622
- mediaType,
623
641
  buttonType,
624
- buttons : modifiedButtons,
642
+ buttons: modifiedButtons,
643
+ mediaType,
644
+ whatsappMedia: {
645
+ url: imageUrl,
646
+ },
625
647
  },
626
648
  };
627
649
  }
@@ -35,8 +35,6 @@ 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
-
40
38
  export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
41
39
  constructor(props) {
42
40
  super(props);
@@ -2439,8 +2437,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2439
2437
  });
2440
2438
 
2441
2439
  // if (saveCount === 0) {
2442
- const newEmail = transformEmailTemplates(obj);
2443
- this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
2440
+
2441
+ this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
2444
2442
  // } else {
2445
2443
  // this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
2446
2444
  // _.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
- import { getCdnUrl } from '../../../utils/cdnTransformation';
10
+
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: getCdnUrl({url: obj.imgSrc}),
200
+ imageSrc: obj.imgSrc,
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 = getCdnUrl({url: obj.imageData.imageSrc});
339
+ data.imgSrc = obj.imageData.imageSrc;
340
340
  } else {
341
341
  const {
342
342
  videoSrc,
@@ -15,7 +15,6 @@ 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';
19
18
 
20
19
  import messages from './messages';
21
20
  import {
@@ -74,7 +73,7 @@ export const LineImage = ({
74
73
  if (imageSrc && (isFullMode ? messageTitle: true) && imagePreview) {
75
74
  updateMessageState({
76
75
  isError: !imageSrc || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
77
- originalContentUrl: getCdnUrl({url: imageSrc}),
76
+ originalContentUrl: imageSrc,
78
77
  previewImageUrl: imagePreview,
79
78
  messageTitle,
80
79
  index,
@@ -113,7 +112,7 @@ export const LineImage = ({
113
112
 
114
113
  updateMessageState({
115
114
  isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
116
- originalContentUrl: getCdnUrl({url: imgSrc}),
115
+ originalContentUrl: imgSrc,
117
116
  previewImageUrl: imgPreview,
118
117
  messageTitle,
119
118
  index,
@@ -156,7 +155,7 @@ export const LineImage = ({
156
155
  }
157
156
  updateMessageState({
158
157
  isError: !imageSrc || !(isFullMode ? value : true) || isImageError || !value,
159
- originalContentUrl: getCdnUrl({url: imageSrc}),
158
+ originalContentUrl: imageSrc,
160
159
  previewImageUrl: imagePreview,
161
160
  messageTitle: value,
162
161
  index,
@@ -413,7 +412,7 @@ export const LineImage = ({
413
412
  updateImagePreview(imagePreview);
414
413
  updateMessageState({
415
414
  isError: !image || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
416
- originalContentUrl: getCdnUrl({url: image}),
415
+ originalContentUrl: image,
417
416
  previewImageUrl: imagePreview,
418
417
  messageTitle,
419
418
  index,
@@ -15,7 +15,6 @@ import LineDrawer from '../Drawer';
15
15
  import style from './style';
16
16
  import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE, CAP_SPACE_24, CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
17
17
  import withStyles from '../../../../hoc/withStyles';
18
- import { getCdnUrl } from '../../../../utils/cdnTransformation';
19
18
 
20
19
  import LineImageCarouselContent from './Content';
21
20
 
@@ -104,7 +103,7 @@ export const LineImageCarousel = (props) => {
104
103
  } = content || {};
105
104
  validCarouselImages.push({
106
105
  activeIndex: index,
107
- originalContentUrl: getCdnUrl({url: url}),
106
+ originalContentUrl: url,
108
107
  aspectRatio,
109
108
  selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
110
109
  actionContent: text || uri,
@@ -128,7 +127,7 @@ export const LineImageCarousel = (props) => {
128
127
 
129
128
  validCarouselImages.push({
130
129
  activeIndex: index,
131
- originalContentUrl: getCdnUrl({url: imageUrl}),
130
+ originalContentUrl: imageUrl,
132
131
  selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
133
132
  actionContent: text || uri,
134
133
  actionLabel: label,
@@ -161,7 +160,7 @@ export const LineImageCarousel = (props) => {
161
160
  ? isErrorIndex
162
161
  : ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
163
162
  columns.push({
164
- imageUrl: getCdnUrl({url: originalContentUrl}),
163
+ imageUrl: originalContentUrl,
165
164
  aspectRatio,
166
165
  action: {
167
166
  type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
@@ -456,7 +455,7 @@ export const LineImageCarousel = (props) => {
456
455
  } = content || {};
457
456
  validCarouselImages.push({
458
457
  activeIndex: index,
459
- originalContentUrl: getCdnUrl({url: url}),
458
+ originalContentUrl: url,
460
459
  aspectRatio,
461
460
  selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
462
461
  actionContent: text || uri,
@@ -481,7 +480,7 @@ export const LineImageCarousel = (props) => {
481
480
 
482
481
  validCarouselImages.push({
483
482
  activeIndex: index,
484
- originalContentUrl: getCdnUrl({url: imageUrl}),
483
+ originalContentUrl: imageUrl,
485
484
  selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
486
485
  actionContent: text || uri,
487
486
  actionLabel: label,
@@ -39,7 +39,6 @@ import {
39
39
  } from '../constants';
40
40
 
41
41
  const { CapIconAvatar } = CapIcon;
42
- import { getCdnUrl } from '../../../../utils/cdnTransformation';
43
42
 
44
43
  export const LineImageMap = ({
45
44
  className,
@@ -115,7 +114,7 @@ export const LineImageMap = ({
115
114
  if (imageSrc && (isFullMode ? messageTitle: true) && imageMapTemplate && actionLinks) {
116
115
  updateMessageState({
117
116
  isError: !imageSrc || !(isFullMode ? messageTitle : true) || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
118
- baseUrl: getCdnUrl({url: imageSrc}),
117
+ baseUrl: imageSrc,
119
118
  messageTitle,
120
119
  index,
121
120
  type: IMAGE_MAP,
@@ -27,8 +27,6 @@ import {
27
27
  MAX_ACTION_LABEL_LENGTH,
28
28
  } from './constants';
29
29
 
30
- import { getCdnUrl } from '../../../../utils/cdnTransformation';
31
-
32
30
  export const LineVideo = ({
33
31
  className,
34
32
  id,
@@ -60,7 +58,7 @@ export const LineVideo = ({
60
58
  const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
61
59
  const [selectedTemplate, updateSelectedTemplate] = useState();
62
60
 
63
- const [videoSrc, setVideoSrc] = useState('');
61
+ const [videoSrc, updateVideoSrc] = useState('');
64
62
  const [videoName, updateVideoName] = useState('');
65
63
  const [isVideo, updateVideoStatus] = useState(false);
66
64
  const [isVideoError, updateVideoErrorMessage] = useState(false);
@@ -77,10 +75,6 @@ export const LineVideo = ({
77
75
  const [videoWidth, updateVideoWidth] = useState();
78
76
  const [isPlaying, updateIsPlaying] = useState(false);
79
77
 
80
- const updateVideoSrc = React.useCallback((url)=>{
81
- const newUrl = getCdnUrl({url, transformationEnabled: false, reduceQuality: false});
82
- setVideoSrc(newUrl)
83
- },[]);
84
78
 
85
79
  useEffect(() => {
86
80
  const {
@@ -31,7 +31,6 @@ import { GA } from '@capillarytech/cap-ui-utils';
31
31
  import { CREATE, TRACK_CREATE_MPUSH } from '../../App/constants';
32
32
  import { MOBILE_PUSH } from '../../CreativesContainer/constants';
33
33
  import { getContent } from '../commonMethods';
34
- import { getCdnUrl } from '../../../utils/cdnTransformation'
35
34
 
36
35
  const PrefixWrapper = styled.div`
37
36
  margin-right: 16px;
@@ -465,7 +464,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
465
464
  const secondaryCta2 = !!android['cta-deeplink-secondary-cta-1-select'] || !!android['secondary-cta-1-label'];
466
465
  const imageLink = android.image;
467
466
  if (imageLink) {
468
- obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink});
467
+ obj.versions.base.ANDROID.expandableDetails.image = imageLink;
469
468
  obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
470
469
  }
471
470
  if (secondaryCta1 || secondaryCta2 ) {
@@ -539,7 +538,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
539
538
  const imageLinkIos = ios.image;
540
539
  const secondaryCtaIos = !!ios['cta-deeplink-secondary-cta-1-select'] || !!ios['secondary-cta-1-label'];
541
540
  if (imageLinkIos) {
542
- obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos});
541
+ obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
543
542
  obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
544
543
  }
545
544
  if (secondaryCtaIos) {
@@ -33,7 +33,6 @@ import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getConten
33
33
  import { GA } from '@capillarytech/cap-ui-utils';
34
34
  import { EDIT, TRACK_EDIT_MPUSH } from '../../App/constants';
35
35
  import { MOBILE_PUSH } from '../../CreativesContainer/constants';
36
- import { getCdnUrl } from '../../../utils/cdnTransformation';
37
36
 
38
37
  const PrefixWrapper = styled.div`
39
38
  margin-right: 16px;
@@ -422,7 +421,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
422
421
  }
423
422
  const imageLink = android.image;
424
423
  if (imageLink) {
425
- obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink});
424
+ obj.versions.base.ANDROID.expandableDetails.image = imageLink;
426
425
  obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
427
426
  }
428
427
  if (obj.versions.base.ANDROID && obj.versions.base.ANDROID.cta) {
@@ -493,7 +492,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
493
492
  }
494
493
  const imageLinkIos = ios.image;
495
494
  if (imageLinkIos) {
496
- obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos});
495
+ obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
497
496
  obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
498
497
  }
499
498
  if (obj.versions.base.IOS && obj.versions.base.IOS.cta) {
@@ -81,9 +81,6 @@ import Templates from '../Templates';
81
81
  import SmsTraiEdit from '../SmsTrai/Edit';
82
82
  import TagList from '../TagList';
83
83
  import { validateTags } from '../../utils/tagValidations';
84
-
85
- import { getCdnUrl } from '../../utils/cdnTransformation';
86
-
87
84
  const { Group: CapCheckboxGroup } = CapCheckbox;
88
85
  export const Rcs = (props) => {
89
86
  const {
@@ -903,7 +900,7 @@ export const Rcs = (props) => {
903
900
  ...(suggestions.length > 0 && { suggestions }),
904
901
  ...(!isMediaTypeNone && {
905
902
  media: {
906
- mediaUrl: getCdnUrl({url: rcsImageSrc}),
903
+ mediaUrl: rcsImageSrc,
907
904
  height: MEDIUM,
908
905
  },
909
906
  }),
@@ -53,12 +53,9 @@ import { GA } from '@capillarytech/cap-ui-utils';
53
53
  import { CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER } from '../App/constants';
54
54
  import { gtmPush } from '../../utils/gtmTrackers';
55
55
  import { VIBER } from '../CreativesContainer/constants';
56
- import { getCdnUrl } from '../../utils/cdnTransformation';
57
-
58
56
  const { CapHeadingSpan } = CapHeading;
59
57
  const { TextArea } = CapInput;
60
58
 
61
-
62
59
  const Viber = (props) => {
63
60
  const {
64
61
  intl,
@@ -81,7 +78,7 @@ const Viber = (props) => {
81
78
  const { formatMessage } = intl;
82
79
  const [isImageError, updateImageErrorMessage] = useState(false);
83
80
  const [isImage, updateImageStatus] = useState(false);
84
- const [imageSrc, setImageSrc] = useState();
81
+ const [imageSrc, updateImageSrc] = useState();
85
82
  const [isDrawerRequired, updateDrawerRequirement] = useState(false);
86
83
  const [messageContent, updateTextMessageContent] = useState('');
87
84
  const [buttonText, updateButtonText] = useState('');
@@ -95,12 +92,6 @@ const Viber = (props) => {
95
92
  const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
96
93
  const [accountName, updateAccountName] = useState("");
97
94
 
98
-
99
- const updateImageSrc = React.useCallback((url)=>{
100
- const newUrl = getCdnUrl({url});
101
- setImageSrc(newUrl);
102
- },[]);
103
-
104
95
  const StyledHeader = styled(CapHeader)`
105
96
  margin-bottom: 14px;
106
97
  `;
@@ -74,8 +74,6 @@ import {
74
74
  PHONE_NUMBER,
75
75
  WEBSITE,
76
76
  } from '../../v2Components/CapWhatsappCTA/constants';
77
- import { getCdnUrl } from '../../utils/cdnTransformation';
78
-
79
77
  let varMap = {};
80
78
  let editContent = {};
81
79
  let tagValidationResponse = {};
@@ -857,7 +855,7 @@ export const Whatsapp = (props) => {
857
855
  }),
858
856
  mediaType: templateMediaType,
859
857
  ...(isMediaTypeImage && {
860
- imageUrl: getCdnUrl({url: whatsappImageSrc}),
858
+ imageUrl: whatsappImageSrc,
861
859
  karixFileHandle,
862
860
  }),
863
861
  varMapped: !isFullMode ? varMap : {},
@@ -1,155 +0,0 @@
1
- import cloneDeep from 'lodash/cloneDeep';
2
- /* eslint-disable no-unused-expressions */
3
- import { parse } from 'node-html-parser';
4
-
5
- // 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
6
-
7
- const CDN_BASE_URL = `https://storage.crm.n.content-cdn.io`;
8
- const CDN_TRANSFORMATION_URL_SUFFIX = `/cdn-cgi/image/`;
9
- const QUALITY = 75;
10
- // const regex = /https:\/\/.*intouch_creative_assets.*(?:jpg|png|jpeg|gif)$/;
11
- const regex = /https:\/\/.*intouch_creative_assets.*$/;
12
- const INTOUCH_CREATIVE_ASSETS = 'intouch_creative_assets';
13
-
14
- /**
15
- * getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
16
- */
17
- export const getCdnUrl = ({url, height, width, transformationEnabled = false, reduceQuality = true}) => {
18
- if (!url.includes(INTOUCH_CREATIVE_ASSETS)) return url;
19
-
20
- const [, assetKey] = url.split(INTOUCH_CREATIVE_ASSETS);
21
- let newUrl = `${CDN_BASE_URL}`;
22
- if (transformationEnabled || reduceQuality) {
23
- newUrl += CDN_TRANSFORMATION_URL_SUFFIX;
24
- if (height) {
25
- newUrl += `height=${height},`;
26
- }
27
- if (width) {
28
- newUrl += `width=${width},`;
29
- }
30
- newUrl += `quality=${QUALITY}`;
31
- }
32
- newUrl += `/intouch_creative_assets${assetKey}`;
33
- return newUrl;
34
- };
35
-
36
- /**
37
- *
38
- * @param {*} htmlContents
39
- * @returns htmlContents with updated urls in image tag
40
- */
41
- export const updateImagesInHtml = (htmlContents) => {
42
- const copiedHtmlContents = htmlContents;
43
- try {
44
- const root = parse(htmlContents);
45
- root.querySelectorAll('img').forEach((element) => {
46
- const imageSrc = element.getAttribute('src');
47
- const isAsset = regex.test(imageSrc);
48
- if (isAsset) {
49
- const height = element.getAttribute('height');
50
- const width = element.getAttribute('width');
51
- const newUrl = getCdnUrl({url: imageSrc, height, width, transformationEnabled: true, reduceQuality: true});
52
- element.setAttribute('src', newUrl);
53
- }
54
- });
55
- return root.toString();
56
- } catch (e) {
57
- console.log('An error occured while updating images in html', e);
58
- return copiedHtmlContents; //return received input directly in case an exception is thrown
59
- }
60
- };
61
-
62
- /**
63
- *
64
- * @param {*} contents
65
- * @returns
66
- */
67
- export const transformEmailTemplates = (contents) => {
68
- const contentsCopy = cloneDeep(contents);
69
- try {
70
- const base = contentsCopy?.versions?.base;
71
- const languages = base?.selectedLanguages;
72
- languages?.forEach((lang) => {
73
- const htmlContents = base?.[lang]?.['template-content'];
74
- const newHtmlContents = updateImagesInHtml(htmlContents);
75
- base[lang]['template-content'] = newHtmlContents;
76
- });
77
- return contentsCopy;
78
- } catch (e) {
79
- console.log('Some error has occured while transforming email templates', e);
80
- return contents; //return received input directly in case an exception is thrown
81
- }
82
- };
83
-
84
- // export const transformRcsTemplates = (contents) => {
85
- // const contentsCopy = cloneDeep(contents);
86
- // }
87
-
88
-
89
- // {
90
- // "name": "test 1",
91
- // "versions": {
92
- // "base": {
93
- // "content": {
94
- // "RCS": {
95
- // "cardContent": [
96
- // {
97
- // "title": "asdf",
98
- // "description": "asdf",
99
- // "mediaType": "NONE"
100
- // }
101
- // ],
102
- // "cardSettings": {
103
- // "cardOrientation": "VERTICAL"
104
- // },
105
- // "cardType": "STANDALONE",
106
- // "contentType": "RICHCARD",
107
- // "smsFallBackContent": {
108
- // "message": ""
109
- // }
110
- // }
111
- // }
112
- // }
113
- // },
114
- // "type": "RCS"
115
- // }
116
-
117
-
118
- // {
119
- // "name": "test 2",
120
- // "versions": {
121
- // "base": {
122
- // "content": {
123
- // "RCS": {
124
- // "cardContent": [
125
- // {
126
- // "title": "asdfasdf",
127
- // "description": "asdfadsf",
128
- // "mediaType": "IMAGE",
129
- // "suggestions": [
130
- // {
131
- // "type": "CTA",
132
- // "text": "fasdf",
133
- // "url": "https://www.google.com"
134
- // }
135
- // ],
136
- // "media": {
137
- // "mediaUrl": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/820a9ff9-ad5b-410e-b471-75c2e1a9.jpg",
138
- // "height": "MEDIUM"
139
- // }
140
- // }
141
- // ],
142
- // "cardSettings": {
143
- // "cardOrientation": "VERTICAL"
144
- // },
145
- // "cardType": "STANDALONE",
146
- // "contentType": "RICHCARD",
147
- // "smsFallBackContent": {
148
- // "message": "asdf"
149
- // }
150
- // }
151
- // }
152
- // }
153
- // },
154
- // "type": "RCS"
155
- // }