@capillarytech/creatives-library 7.12.108 → 7.12.110

package/v2Containers/Templates/sagas.js

@@ -3,6 +3,7 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';
+import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
@@ -85,6 +86,20 @@ export function* getOrgLevelCampaignSettings() {
   }
 }
 
+function* getCdnTransformationConfig() {
+  try {
+    const res = yield call(Api.getCdnTransformationConfig);
+
+    if (res?.success && res?.status?.code === 200) {
+      const cdnConfigs = res?.response;
+      saveCdnConfigs(cdnConfigs);
+    }
+  } catch (error) {
+    console.log("some error occured during getCdnTransformationConfig call");
+    removeAllCdnLocalStorageItems();
+  }
+}
+
 export function* watchGetOrgLevelCampaignSettings() {
   const watcher = yield takeLatest(
     types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST,
@@ -222,6 +237,13 @@ function* watchGetSenderDetails() {
   yield cancel(watcher);
 }
 
+function* watchGetCdnTransformationConfig() {
+  yield takeLatest(
+    types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
+    getCdnTransformationConfig
+  );
+}
+
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
@@ -233,4 +255,5 @@ export default [
   watchGetTemplateDetails,
   watchGetOrgLevelCampaignSettings,
   watchGetSenderDetails,
+  watchGetCdnTransformationConfig
 ];

package/v2Containers/TemplatesV2/index.js

@@ -19,6 +19,7 @@ import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
 import * as actions from './actions';
+import * as templateActions from '../Templates/actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
@@ -139,6 +140,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     if (queryItems.channel === WHATSAPP) {
       this.channelChange(WHATSAPP);
     }
+    if(this.props?.isFullMode){
+      this.props.templateActions.getCdnTransformationConfig();
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -350,6 +354,7 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
+    templateActions: bindActionCreators(templateActions, dispatch),
   };
 }
 

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,
-});
+});

package/tests/integration/CreateTemplate/CreateTemplate.integration.test.js

@@ -1,18 +0,0 @@
-/**
- * This is not an integration test rather it's created to run the integration test script for now.
- * The tests case and file name will be re-written as per the requirement in future.
- */
-
-describe('Create Templates ', () => {
-  it('Should pass the test case for truthy values', async () => {
-    expect(true).toBeTruthy();
-  });
-
-  it('Should pass the test case for falsy values', async () => {
-    expect(false).toBeFalsy();
-  });
-
-  it('Should pass the test case for falsy values', async () => {
-    expect({}).toEqual({});
-  });
-});