@capillarytech/creatives-library 7.12.79 → 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.
- package/components/Ckeditor/index.js +1 -1
- package/config/app.js +0 -1
- package/package.json +1 -2
- package/v2Components/Ckeditor/index.js +1 -1
- package/v2Containers/CreativesContainer/index.js +40 -18
- package/v2Containers/Email/index.js +2 -4
- package/v2Containers/Line/Container/Image/index.js +4 -5
- package/v2Containers/Line/Container/ImageCarousel/index.js +5 -6
- package/v2Containers/Line/Container/ImageMap/index.js +1 -2
- package/v2Containers/Line/Container/Video/index.js +1 -7
- package/v2Containers/MobilePush/Create/index.js +2 -3
- package/v2Containers/MobilePush/Edit/index.js +2 -3
- package/v2Containers/Rcs/index.js +1 -4
- package/v2Containers/Whatsapp/index.js +1 -3
- package/utils/cdnTransformation.js +0 -155
|
@@ -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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
2443
|
-
this.props.actions.createTemplate(
|
|
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) => {
|
|
@@ -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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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,
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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:
|
|
903
|
+
mediaUrl: rcsImageSrc,
|
|
907
904
|
height: MEDIUM,
|
|
908
905
|
},
|
|
909
906
|
}),
|
|
@@ -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:
|
|
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
|
-
// }
|