@capillarytech/creatives-library 7.12.104 → 7.12.105

package/v2Containers/Line/Container/ImageCarousel/index.js

@@ -15,6 +15,7 @@ import LineDrawer from '../Drawer';
 import style from './style';
 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';
 import withStyles from '../../../../hoc/withStyles';
+import { getCdnUrl } from '../../../../utils/cdnTransformation';
 
 import LineImageCarouselContent from './Content';
 
@@ -103,7 +104,7 @@ export const LineImageCarousel = (props) => {
 							} = content || {};
 							validCarouselImages.push({
 								activeIndex: index,
-								originalContentUrl: url,
+								originalContentUrl: getCdnUrl({url: url, channelName: 'LINE', channelSubType: 'CARD'}),
 								aspectRatio,
 								selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
@@ -127,7 +128,7 @@ export const LineImageCarousel = (props) => {
 
 							validCarouselImages.push({
 								activeIndex: index,
-								originalContentUrl: imageUrl,
+								originalContentUrl: getCdnUrl({url: imageUrl, channelName: 'LINE', channelSubType: 'CARD'}),
 								selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
 								actionLabel: label,
@@ -160,7 +161,7 @@ export const LineImageCarousel = (props) => {
 				? isErrorIndex
 				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
 			columns.push({
-				imageUrl: originalContentUrl,
+				imageUrl: getCdnUrl({url: originalContentUrl, channelName: 'LINE', channelSubType: 'CARD'}),
 				aspectRatio,
 				action: {
 					type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
@@ -455,7 +456,7 @@ export const LineImageCarousel = (props) => {
 					} = content || {};
 					validCarouselImages.push({
 						activeIndex: index,
-						originalContentUrl: url,
+						originalContentUrl: getCdnUrl({url: url, channelName: 'LINE', channelSubType: 'CARD'}),
 						aspectRatio,
 						selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
@@ -480,7 +481,7 @@ export const LineImageCarousel = (props) => {
 
 					validCarouselImages.push({
 						activeIndex: index,
-						originalContentUrl: imageUrl,
+						originalContentUrl: getCdnUrl({url: imageUrl, channelName: 'LINE', channelSubType: 'CARD'}),
 						selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
 						actionLabel: label,

package/v2Containers/Line/Container/ImageMap/index.js

@@ -39,6 +39,7 @@ import {
 } from '../constants';
 
 const { CapIconAvatar } = CapIcon;
+import { getCdnUrl } from '../../../../utils/cdnTransformation';
 
 export const LineImageMap = ({
     className,
@@ -114,7 +115,7 @@ export const LineImageMap = ({
         if (imageSrc && (isFullMode ? messageTitle: true) && imageMapTemplate && actionLinks) {
                 updateMessageState({
                     isError: !imageSrc || !(isFullMode ? messageTitle : true)  || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
-                    baseUrl: imageSrc,
+                    baseUrl: getCdnUrl({url: imageSrc, channelName: 'LINE', channelSubType: 'RICH_MESSAGE'}),
                     messageTitle,
                     index,
                     type: IMAGE_MAP,

package/v2Containers/MobilePush/Create/index.js

@@ -31,6 +31,7 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { CREATE, TRACK_CREATE_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
 import { getContent } from '../commonMethods';
+import { getCdnUrl } from '../../../utils/cdnTransformation'
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -464,7 +465,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const secondaryCta2 = !!android['cta-deeplink-secondary-cta-1-select'] || !!android['secondary-cta-1-label'];
       const imageLink = android.image;
       if (imageLink) {
-        obj.versions.base.ANDROID.expandableDetails.image = imageLink;
+        obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink, channelName: 'MOBILE_PUSH'});
         obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
       }
       if (secondaryCta1 || secondaryCta2 ) {
@@ -538,7 +539,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const imageLinkIos = ios.image;
       const secondaryCtaIos = !!ios['cta-deeplink-secondary-cta-1-select'] || !!ios['secondary-cta-1-label'];
       if (imageLinkIos) {
-        obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
+        obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos, channelName: 'MOBILE_PUSH'});
         obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
       }
       if (secondaryCtaIos) {
@@ -1320,10 +1321,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         duration: 2,
       });
     } else {
-      const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
-      this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
+      this.props.actions.uploadAsset(data.file, data.type, data.fileParams);
     }
   };
   selectCtaIos = (selectedConfig) => {
@@ -1852,4 +1850,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: false,
-});
+});

package/v2Containers/MobilePush/Edit/index.js

@@ -33,6 +33,7 @@ import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getConten
 import { GA } from '@capillarytech/cap-ui-utils';
 import { EDIT, TRACK_EDIT_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
+import { getCdnUrl } from '../../../utils/cdnTransformation';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -421,7 +422,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const imageLink = android.image;
     if (imageLink) {
-      obj.versions.base.ANDROID.expandableDetails.image = imageLink;
+      obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink, channelName: 'MOBILE_PUSH'});
       obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
     }
     if (obj.versions.base.ANDROID && obj.versions.base.ANDROID.cta) {
@@ -492,7 +493,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const imageLinkIos = ios.image;
     if (imageLinkIos) {
-      obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
+      obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos, channelName: 'MOBILE_PUSH'});
       obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
     }
     if (obj.versions.base.IOS && obj.versions.base.IOS.cta) {
@@ -1940,4 +1941,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: false,
-});
+});

package/v2Containers/Rcs/index.js

@@ -81,6 +81,7 @@ import Templates from '../Templates';
 import SmsTraiEdit from '../SmsTrai/Edit';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
+import { getCdnUrl } from '../../utils/cdnTransformation';
 const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
   const {
@@ -900,7 +901,7 @@ export const Rcs = (props) => {
                   ...(suggestions.length > 0 && { suggestions }),
                   ...(!isMediaTypeNone && {
                     media: {
-                      mediaUrl: rcsImageSrc,
+                      mediaUrl: getCdnUrl({url: rcsImageSrc, channelName: 'RCS'}),
                       height: MEDIUM,
                     },
                   }),

package/v2Containers/Viber/index.js

@@ -53,9 +53,12 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER } from '../App/constants';
 import { gtmPush } from '../../utils/gtmTrackers';
 import { VIBER } from '../CreativesContainer/constants';
+import { getCdnUrl } from '../../utils/cdnTransformation';
+
 const { CapHeadingSpan } = CapHeading;
 const { TextArea } = CapInput;
 
+
 const Viber = (props) => {
   const {
     intl,
@@ -78,7 +81,7 @@ const Viber = (props) => {
   const { formatMessage } = intl;
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isImage, updateImageStatus] = useState(false);
-  const [imageSrc, updateImageSrc] = useState();
+  const [imageSrc, setImageSrc] = useState();
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
   const [messageContent, updateTextMessageContent] = useState('');
   const [buttonText, updateButtonText] = useState('');
@@ -92,6 +95,12 @@ const Viber = (props) => {
   const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
   const [accountName, updateAccountName] = useState("");
 
+
+  const updateImageSrc = React.useCallback((url)=>{
+    const newUrl = getCdnUrl({url, channelName: 'VIBER'});
+    setImageSrc(newUrl);
+  },[]);
+
   const StyledHeader = styled(CapHeader)`
   margin-bottom: 14px;
 `;
@@ -741,4 +750,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -32,6 +32,8 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { CREATE, EDIT, TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../../App/constants';
 import { gtmPush } from '../../../../utils/gtmTrackers';
 import { WECHAT } from '../../../CreativesContainer/constants';
+import { getCdnUrl } from '../../../../utils/cdnTransformation';
+
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -478,7 +480,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         need_open_comment: postCommentsData.need_open_comment,
         only_fans_can_comment: postCommentsData.only_fans_can_comment,
         thumb_media_id: contentData.mediaId,
-        image_url: contentData.imageUrl,
+        image_url: getCdnUrl({url: contentData.imageUrl, channelName: 'WECHAT'}),
       };
       mediaList.push(filteredContent);
     });

package/v2Containers/Whatsapp/index.js

@@ -74,6 +74,8 @@ import {
   PHONE_NUMBER,
   WEBSITE,
 } from '../../v2Components/CapWhatsappCTA/constants';
+import { getCdnUrl } from '../../utils/cdnTransformation';
+
 let varMap = {};
 let editContent = {};
 let tagValidationResponse = {};
@@ -855,7 +857,7 @@ export const Whatsapp = (props) => {
             }),
             mediaType: templateMediaType,
             ...(isMediaTypeImage && {
-              imageUrl: whatsappImageSrc,
+              imageUrl: getCdnUrl({url: whatsappImageSrc, channelName: 'WHATSAPP',}),
               karixFileHandle,
             }),
             varMapped: !isFullMode ? varMap : {},
@@ -1439,4 +1441,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});