@capillarytech/creatives-library 7.12.91 → 7.12.93
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/package.json +1 -2
- package/v2Containers/CreativesContainer/index.js +1 -3
- package/v2Containers/Email/index.js +1 -4
- package/v2Containers/Facebook/Advertisement/index.js +4 -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/MobilePush/Create/index.js +7 -5
- package/v2Containers/MobilePush/Edit/index.js +3 -4
- package/v2Containers/Rcs/index.js +1 -2
- package/v2Containers/Viber/index.js +2 -11
- package/v2Containers/Whatsapp/index.js +2 -4
- package/utils/cdnTransformation.js +0 -221
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.93",
|
|
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.4.2-0",
|
|
28
27
|
"normalizr": "^3.2.3",
|
|
29
28
|
"papaparse": "^5.3.1",
|
|
30
29
|
"pre-push": "^0.1.2",
|
|
@@ -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';
|
|
@@ -496,8 +495,7 @@ export class Creatives extends React.Component {
|
|
|
496
495
|
if (!html_content) {
|
|
497
496
|
emailBase = templateRecords.base;
|
|
498
497
|
}
|
|
499
|
-
|
|
500
|
-
templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
|
|
498
|
+
templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
|
|
501
499
|
delete templateData.html_content;
|
|
502
500
|
delete templateData.subject;
|
|
503
501
|
}
|
|
@@ -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);
|
|
@@ -2440,8 +2438,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2440
2438
|
|
|
2441
2439
|
// if (saveCount === 0) {
|
|
2442
2440
|
|
|
2443
|
-
|
|
2444
|
-
this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
|
|
2441
|
+
this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
|
|
2445
2442
|
// } else {
|
|
2446
2443
|
// this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
|
|
2447
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
|
-
|
|
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:
|
|
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 =
|
|
339
|
+
data.imgSrc = obj.imageData.imageSrc;
|
|
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,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,
|
|
@@ -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) {
|
|
@@ -1321,7 +1320,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
|
|
|
1321
1320
|
duration: 2,
|
|
1322
1321
|
});
|
|
1323
1322
|
} else {
|
|
1324
|
-
|
|
1323
|
+
const name = data.file.name.split('.');
|
|
1324
|
+
const blob = data.file.slice(0, -1, 'image');
|
|
1325
|
+
const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
|
|
1326
|
+
this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
|
|
1325
1327
|
}
|
|
1326
1328
|
};
|
|
1327
1329
|
selectCtaIos = (selectedConfig) => {
|
|
@@ -1850,4 +1852,4 @@ export default withCreatives({
|
|
|
1850
1852
|
mapStateToProps,
|
|
1851
1853
|
mapDispatchToProps,
|
|
1852
1854
|
userAuth: false,
|
|
1853
|
-
});
|
|
1855
|
+
});
|
|
@@ -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) {
|
|
@@ -1941,4 +1940,4 @@ export default withCreatives({
|
|
|
1941
1940
|
mapStateToProps,
|
|
1942
1941
|
mapDispatchToProps,
|
|
1943
1942
|
userAuth: false,
|
|
1944
|
-
});
|
|
1943
|
+
});
|
|
@@ -81,7 +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
|
-
import { getCdnUrl } from '../../utils/cdnTransformation';
|
|
85
84
|
const { Group: CapCheckboxGroup } = CapCheckbox;
|
|
86
85
|
export const Rcs = (props) => {
|
|
87
86
|
const {
|
|
@@ -901,7 +900,7 @@ export const Rcs = (props) => {
|
|
|
901
900
|
...(suggestions.length > 0 && { suggestions }),
|
|
902
901
|
...(!isMediaTypeNone && {
|
|
903
902
|
media: {
|
|
904
|
-
mediaUrl:
|
|
903
|
+
mediaUrl: rcsImageSrc,
|
|
905
904
|
height: MEDIUM,
|
|
906
905
|
},
|
|
907
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,
|
|
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, channelName: 'VIBER'});
|
|
101
|
-
setImageSrc(newUrl);
|
|
102
|
-
},[]);
|
|
103
|
-
|
|
104
95
|
const StyledHeader = styled(CapHeader)`
|
|
105
96
|
margin-bottom: 14px;
|
|
106
97
|
`;
|
|
@@ -750,4 +741,4 @@ export default withCreatives({
|
|
|
750
741
|
mapStateToProps,
|
|
751
742
|
mapDispatchToProps,
|
|
752
743
|
userAuth: true,
|
|
753
|
-
});
|
|
744
|
+
});
|
|
@@ -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 : {},
|
|
@@ -1441,4 +1439,4 @@ export default withCreatives({
|
|
|
1441
1439
|
mapStateToProps,
|
|
1442
1440
|
mapDispatchToProps,
|
|
1443
1441
|
userAuth: true,
|
|
1444
|
-
});
|
|
1442
|
+
});
|
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
import cloneDeep from "lodash/cloneDeep";
|
|
2
|
-
import isEmpty from "lodash/isEmpty";
|
|
3
|
-
import isNumber from "lodash/isNumber";
|
|
4
|
-
/* eslint-disable no-unused-expressions */
|
|
5
|
-
import { parse } from "node-html-parser";
|
|
6
|
-
|
|
7
|
-
// 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
|
|
8
|
-
|
|
9
|
-
const CDN_BASE_URL = `https://storage.crm.n.content-cdn.io`;
|
|
10
|
-
const CDN_TRANSFORMATION_URL_SUFFIX = `/cdn-cgi/image/`;
|
|
11
|
-
const QUALITY = 75;
|
|
12
|
-
// const regex = /https:\/\/.*intouch_creative_assets.*(?:jpg|png|jpeg|gif)$/;
|
|
13
|
-
const regex = /https:\/\/.*intouch_creative_assets.*$/;
|
|
14
|
-
const INTOUCH_CREATIVE_ASSETS = "intouch_creative_assets";
|
|
15
|
-
const SPECIFIED = "specified";
|
|
16
|
-
const FORMAT_TYPES = { AUTO: "auto" };
|
|
17
|
-
const QUALITY_TYPE = {
|
|
18
|
-
DECREASE: "decrease",
|
|
19
|
-
PRESERVE: "preserve",
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const CHANNEL_CONFIGS = {
|
|
23
|
-
EMAIL: {
|
|
24
|
-
transformations: {
|
|
25
|
-
width: SPECIFIED,
|
|
26
|
-
height: SPECIFIED,
|
|
27
|
-
format: FORMAT_TYPES.AUTO,
|
|
28
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
RCS: {
|
|
32
|
-
transformations: {
|
|
33
|
-
width: 1440,
|
|
34
|
-
height: 720,
|
|
35
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
VIBER: {
|
|
39
|
-
transformations: {
|
|
40
|
-
width: 300,
|
|
41
|
-
height: 400,
|
|
42
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
WHATSAPP: {
|
|
46
|
-
transformations: {
|
|
47
|
-
quality: QUALITY_TYPE.DECREASE, //TODO whatsapp itself might reduce quality. To be checked
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
MOBILE_PUSH: {
|
|
51
|
-
transformations: {
|
|
52
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
FACEBOOK: {
|
|
56
|
-
IMAGE: {
|
|
57
|
-
transformations: {
|
|
58
|
-
width: 1080,
|
|
59
|
-
height: 1080,
|
|
60
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
61
|
-
},
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
LINE: {
|
|
65
|
-
IMAGE: {
|
|
66
|
-
transformations: {
|
|
67
|
-
width: 300,
|
|
68
|
-
height: 400,
|
|
69
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
CARD: {
|
|
73
|
-
transformations: {
|
|
74
|
-
width: 1024,
|
|
75
|
-
height: 1024,
|
|
76
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
77
|
-
},
|
|
78
|
-
},
|
|
79
|
-
RICH_MESSAGE: {
|
|
80
|
-
//Rich Message in Line has Square and Custom templates.
|
|
81
|
-
//Width (1040px) is same in both whereas height varies. Hence including width only.
|
|
82
|
-
transformations: {
|
|
83
|
-
width: 1040,
|
|
84
|
-
quality: QUALITY_TYPE.DECREASE,
|
|
85
|
-
},
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
|
|
92
|
-
*/
|
|
93
|
-
export const getCdnUrl = ({
|
|
94
|
-
url,
|
|
95
|
-
height,
|
|
96
|
-
width,
|
|
97
|
-
channelName: receivedChannelName,
|
|
98
|
-
channelSubType: receivedChannelSubType,
|
|
99
|
-
}) => {
|
|
100
|
-
const channelName = receivedChannelName?.toUpperCase();
|
|
101
|
-
const channelSubType = receivedChannelSubType?.toUpperCase();
|
|
102
|
-
|
|
103
|
-
if (
|
|
104
|
-
!regex.test(url) ||
|
|
105
|
-
!CHANNEL_CONFIGS?.[channelName] ||
|
|
106
|
-
(channelSubType && !CHANNEL_CONFIGS?.[channelName]?.[channelSubType])
|
|
107
|
-
)
|
|
108
|
-
return url;
|
|
109
|
-
|
|
110
|
-
const [, assetKey] = url.split(INTOUCH_CREATIVE_ASSETS);
|
|
111
|
-
|
|
112
|
-
let newUrl = `${CDN_BASE_URL}`;
|
|
113
|
-
|
|
114
|
-
let applicableTransformations;
|
|
115
|
-
|
|
116
|
-
if (channelSubType) {
|
|
117
|
-
applicableTransformations =
|
|
118
|
-
CHANNEL_CONFIGS?.[channelName]?.[channelSubType]?.transformations;
|
|
119
|
-
} else {
|
|
120
|
-
applicableTransformations = CHANNEL_CONFIGS?.[channelName]?.transformations;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
if (!isEmpty(applicableTransformations)) {
|
|
124
|
-
|
|
125
|
-
newUrl += CDN_TRANSFORMATION_URL_SUFFIX;
|
|
126
|
-
|
|
127
|
-
Object.keys(applicableTransformations)?.forEach((transformationParam) => {
|
|
128
|
-
const transformationParamVal =
|
|
129
|
-
applicableTransformations?.[transformationParam];
|
|
130
|
-
|
|
131
|
-
try {
|
|
132
|
-
switch (transformationParam) {
|
|
133
|
-
case "height":
|
|
134
|
-
if (transformationParamVal === SPECIFIED && isNumber(height)) {
|
|
135
|
-
newUrl += `${transformationParam}=${height},`;
|
|
136
|
-
} else if(isNumber(transformationParamVal)) {
|
|
137
|
-
newUrl += `${transformationParam}=${transformationParamVal},`;
|
|
138
|
-
}
|
|
139
|
-
break;
|
|
140
|
-
case "width":
|
|
141
|
-
if (transformationParamVal === SPECIFIED && isNumber(width)) {
|
|
142
|
-
newUrl += `${transformationParam}=${width},`;
|
|
143
|
-
} else if(isNumber(transformationParamVal)) {
|
|
144
|
-
newUrl += `${transformationParam}=${transformationParamVal},`;
|
|
145
|
-
}
|
|
146
|
-
break;
|
|
147
|
-
case "format":
|
|
148
|
-
if(transformationParamVal){
|
|
149
|
-
newUrl += `${transformationParam}=${transformationParamVal},`;
|
|
150
|
-
}
|
|
151
|
-
break;
|
|
152
|
-
case "quality":
|
|
153
|
-
if (transformationParamVal === QUALITY_TYPE?.DECREASE && isNumber(QUALITY)) {
|
|
154
|
-
newUrl += `${transformationParam}=${QUALITY},`;
|
|
155
|
-
}
|
|
156
|
-
break;
|
|
157
|
-
default:
|
|
158
|
-
break;
|
|
159
|
-
}
|
|
160
|
-
} catch (e) {
|
|
161
|
-
console.log("some error occured while applying transformation",e);
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
newUrl += `/intouch_creative_assets${assetKey}`;
|
|
167
|
-
return newUrl;
|
|
168
|
-
};
|
|
169
|
-
|
|
170
|
-
/**
|
|
171
|
-
*
|
|
172
|
-
* @param {*} htmlContents
|
|
173
|
-
* @returns htmlContents with updated urls in image tag
|
|
174
|
-
*/
|
|
175
|
-
export const updateImagesInHtml = (htmlContents) => {
|
|
176
|
-
const copiedHtmlContents = htmlContents;
|
|
177
|
-
try {
|
|
178
|
-
const root = parse(htmlContents);
|
|
179
|
-
root.querySelectorAll("img").forEach((element) => {
|
|
180
|
-
const imageSrc = element.getAttribute("src");
|
|
181
|
-
const isAsset = regex.test(imageSrc);
|
|
182
|
-
if (isAsset) {
|
|
183
|
-
const height = element.getAttribute("height");
|
|
184
|
-
const width = element.getAttribute("width");
|
|
185
|
-
const newUrl = getCdnUrl({
|
|
186
|
-
url: imageSrc,
|
|
187
|
-
height,
|
|
188
|
-
width,
|
|
189
|
-
channelName: "EMAIL",
|
|
190
|
-
});
|
|
191
|
-
element.setAttribute("src", newUrl);
|
|
192
|
-
}
|
|
193
|
-
});
|
|
194
|
-
return root.toString();
|
|
195
|
-
} catch (e) {
|
|
196
|
-
console.log("An error occured while updating images in html", e);
|
|
197
|
-
return copiedHtmlContents; //return received input directly in case an exception is thrown
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
*
|
|
203
|
-
* @param {*} contents
|
|
204
|
-
* @returns
|
|
205
|
-
*/
|
|
206
|
-
export const transformEmailTemplates = (contents) => {
|
|
207
|
-
const contentsCopy = cloneDeep(contents);
|
|
208
|
-
try {
|
|
209
|
-
const base = contentsCopy?.versions?.base;
|
|
210
|
-
const languages = base?.selectedLanguages;
|
|
211
|
-
languages?.forEach((lang) => {
|
|
212
|
-
const htmlContents = base?.[lang]?.["template-content"];
|
|
213
|
-
const newHtmlContents = updateImagesInHtml(htmlContents);
|
|
214
|
-
base[lang]["template-content"] = newHtmlContents;
|
|
215
|
-
});
|
|
216
|
-
return contentsCopy;
|
|
217
|
-
} catch (e) {
|
|
218
|
-
console.log("Some error has occured while transforming email templates", e);
|
|
219
|
-
return contents; //return received input directly in case an exception is thrown
|
|
220
|
-
}
|
|
221
|
-
};
|