@capillarytech/creatives-library 7.12.120 → 7.13.5

package/v2Containers/TemplatesV2/index.js

@@ -19,7 +19,6 @@ 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';
@@ -140,9 +139,6 @@ 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) {
@@ -260,6 +256,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           handlePeviewTemplate={this.props.handlePeviewTemplate}
           messageStrategy={this.props.messageStrategy}
           smsRegister={smsRegister}
+          hideTestAndPreviewBtnJourney={this.props.hideTestAndPreviewBtnJourney}
     />);
     }
   }
@@ -354,7 +351,6 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    templateActions: bindActionCreators(templateActions, dispatch),
   };
 }
 

package/v2Containers/Viber/index.js

@@ -53,12 +53,9 @@ 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,
@@ -81,7 +78,7 @@ const Viber = (props) => {
   const { formatMessage } = intl;
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isImage, updateImageStatus] = useState(false);
-  const [imageSrc, setImageSrc] = useState();
+  const [imageSrc, updateImageSrc] = useState();
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
   const [messageContent, updateTextMessageContent] = useState('');
   const [buttonText, updateButtonText] = useState('');
@@ -95,12 +92,6 @@ 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;
 `;
@@ -750,4 +741,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});

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

@@ -32,8 +32,6 @@ 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);
@@ -480,7 +478,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: getCdnUrl({url: contentData.imageUrl, channelName: 'WECHAT'}),
+        image_url: contentData.imageUrl,
       };
       mediaList.push(filteredContent);
     });

package/v2Containers/Whatsapp/index.js

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

package/utils/cdnTransformation.js

@@ -1,419 +0,0 @@
-import cloneDeep from "lodash/cloneDeep";
-import isEmpty from "lodash/isEmpty";
-import forOwn from "lodash/forOwn";
-import isNumber from "lodash/isNumber";
-import Bugsnag from '@bugsnag/js';
-
-/* eslint-disable no-unused-expressions */
-import { parse } from "node-html-parser";
-import { EMAIL } from '../v2Containers/CreativesContainer/constants';
-
-// example cdn url
-// https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=100,height=100,quality=75,format=auto/intouch_creative_assets/005710a7-6412-44fe-a19f-e72456b1.jpg
-
-/**
- * regex tests presence of intouch_creative_assets in the url.
- * We are not testing for extensions such as jpg/png because some channels like LINE - IMAGEMAP url doesn't contain extension.
- */
-const SPECIFIED = "specified";
-const FORMAT_TYPES = { AUTO: "auto" };
-const QUALITY_TYPE = {
-  DECREASE: "decrease",
-  PRESERVE: "preserve",
-};
-const CREATIVES_CDN_BASE_URL_KEY = 'CREATIVES_CDN_BASE_URL';
-const CREATIVES_S3_BUCKET_PATH_KEY = 'CREATIVES_S3_BUCKET_PATH';
-const CREATIVES_CDN_QUALITY_CONFIG_KEY = 'CREATIVES_CDN_QUALITY_CONFIG';
-const CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY = 'CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX';
-
-const HTTPS_STR = "https://"
-const ALLOWED_EXTENSIONS_STR = ".*(?:jpg|png|jpeg|gif)$"
-const ANY_STR = ".*"
-
-/**
- * CHANNEL_CONFIGS maintains the transformation details for each channel (and optionally subchannel ex. FACEBOOK/LINE)
- * In case of SUBCHANNELS, they are nested inside CHANNEL.
- */
-const CHANNEL_CONFIGS = {
-  EMAIL: {
-    transformations: {
-      width: SPECIFIED,
-      height: SPECIFIED,
-      format: FORMAT_TYPES.AUTO,
-      quality: QUALITY_TYPE.DECREASE,
-    },
-  },
-  RCS: {
-    transformations: {
-      width: 1440,
-      height: 720,
-      quality: QUALITY_TYPE.DECREASE,
-    },
-  },
-  VIBER: {
-    transformations: {
-      width: 300,
-      height: 400,
-      quality: QUALITY_TYPE.DECREASE,
-    },
-  },
-  WHATSAPP: {
-    transformations: {
-      quality: QUALITY_TYPE.DECREASE, //TODO whatsapp itself might reduce quality. To be checked
-    },
-  },
-  MOBILE_PUSH: {
-    transformations: {
-      quality: QUALITY_TYPE.DECREASE,
-    },
-  },
-  FACEBOOK: {
-    IMAGE: {
-      transformations: {
-        width: 1080,
-        height: 1080,
-        quality: QUALITY_TYPE.DECREASE,
-      },
-    }
-  },
-  LINE: {
-    IMAGE: {
-      transformations: {
-        width: 300,
-        height: 400,
-        quality: QUALITY_TYPE.DECREASE,
-      },
-    },
-    CARD: {
-      transformations: {
-        width: 1024,
-        height: 1024,
-        quality: QUALITY_TYPE.DECREASE,
-      },
-    },
-    RICH_MESSAGE: {
-      //Rich Message in Line has Square and Custom templates. 
-      //Width (1040px) is same in both whereas height varies. Hence including width only.
-      transformations: {
-        width: 1040,
-        quality: QUALITY_TYPE.DECREASE,
-      },
-    }
-  },
-  WECHAT: {
-    transformations: {
-      quality: QUALITY_TYPE.DECREASE,
-    }
-  }
-};
-
-/**
- * 
- * @param {string} url : required 
- * @param {number} height : optional | required when height needs to be manually specified for channels such as email.
- * @param {number} width : optional | required when width needs to be manually specified for channels such as email.
- * @param {string} channelName : required 
- * @param {string} channelSubType : optional | required when channel has multiple subtypes
- * 
- * @returns 
- * getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
- * Step 1. Basic validations:
- *  a) If data type of cdn items stored in local storage is incorrect(maybe as a result of manual modification), the received url in param is returned.
- *  b) If cdn local storage items are emtpy then received url in param is returned.
- *  c) If url doesn't match with regex.
- *  d) Channel/Subchannel not present in CHANNEL_CONFIGS
- *  e) No quality and default quality mentioned in CHANNEL_CONFIGS for given channel.
- *  f) If channels quality is non numeric(maybe as a result of manual modification) then quality=100 is returned.
- * 
- * Step 2. The CHANNEL_CONFIGS determine the applicableTransformations.
- * Step 3. If applicable transformations are present `CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX` is appended to cdn url and transformation properties are added.
- * Step 4. The original s3 file name is appened at the end of the url to get complete cdn url and value is returned.
- * 
- * Error handling:
- * In case of any unknown exception, url received in param is returned.
- */
-export const getCdnUrl = ({
-  url,
-  height,
-  width,
-  channelName: receivedChannelName,
-  channelSubType: receivedChannelSubType,
-}) => {
-  try{
-    const channelName = receivedChannelName?.toUpperCase();
-    const channelSubType = receivedChannelSubType?.toUpperCase();
-  
-    const CREATIVES_CDN_BASE_URL = getLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
-    const CREATIVES_CDN_QUALITY_CONFIG = getLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY, true);
-    const CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX = getLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
-    let CREATIVES_S3_BUCKET_PATH = getLocalStorageItem(CREATIVES_S3_BUCKET_PATH_KEY);
-    
-    //remove all leading and trailing forward slash with empty string, if leading/trailing forward slash is present in node env by mistake then url will not be correct hence removing them.
-    CREATIVES_S3_BUCKET_PATH = CREATIVES_S3_BUCKET_PATH?.replace(/^\/|\/$/g, '');
-
-    //Basic validations on data stored in local storage.
-    if (
-      typeof CREATIVES_CDN_QUALITY_CONFIG !== "object" ||
-      Array.isArray(CREATIVES_CDN_QUALITY_CONFIG) ||
-      CREATIVES_CDN_QUALITY_CONFIG === null ||
-      typeof CREATIVES_CDN_BASE_URL !== "string" || 
-      typeof CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX !== "string" || 
-      typeof CREATIVES_S3_BUCKET_PATH !== 'string'
-    )
-      return url;
-  
-    const QUALITY = CREATIVES_CDN_QUALITY_CONFIG?.[channelName] || CREATIVES_CDN_QUALITY_CONFIG?.DEFAULT;
-  
-    const regexWithExtension = new RegExp(HTTPS_STR + ANY_STR + CREATIVES_S3_BUCKET_PATH + ANY_STR + ALLOWED_EXTENSIONS_STR)
-    const regexWithoutExtension = new RegExp(HTTPS_STR + ANY_STR + CREATIVES_S3_BUCKET_PATH + ANY_STR);
-
-    let skipTransformations = true;
-
-    if (
-      !regexWithoutExtension.test(url) ||
-      !CHANNEL_CONFIGS?.[channelName] ||
-      (channelSubType && !CHANNEL_CONFIGS?.[channelName]?.[channelSubType]) ||
-      !CREATIVES_CDN_BASE_URL ||
-      !CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX ||
-      !QUALITY
-    )
-      return url;
-
-    //Skip transformations if extensions are not proper. Else consider transformations if available.
-    if(regexWithExtension.test(url)){
-      skipTransformations = false;
-    }
-
-    const [, assetKey] = url.split(CREATIVES_S3_BUCKET_PATH);
-  
-    let newUrl = `${CREATIVES_CDN_BASE_URL}`;
-  
-    let applicableTransformations;
-  
-    if (channelSubType) {
-      applicableTransformations =
-        CHANNEL_CONFIGS?.[channelName]?.[channelSubType]?.transformations;
-    } else {
-      applicableTransformations = CHANNEL_CONFIGS?.[channelName]?.transformations;
-    }
-  
-    if (!isEmpty(applicableTransformations) && !skipTransformations) {
-  
-      newUrl += `/${CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX}/`;
-  
-      // Object.keys(applicableTransformations)?.forEach((transformationParam) => {
-      forOwn(applicableTransformations, (transformationParamVal, transformationParam)=>{
-        try {
-          switch (transformationParam) {
-            case "height":
-              if (transformationParamVal === SPECIFIED && height) {
-                newUrl += `${transformationParam}=${height},`;
-              } else if(transformationParamVal !== SPECIFIED && isNumber(transformationParamVal)) {
-                newUrl += `${transformationParam}=${transformationParamVal},`;
-              }
-              break;
-            case "width":
-              if (transformationParamVal === SPECIFIED && width) {
-                newUrl += `${transformationParam}=${width},`;
-              } else if(transformationParamVal !== SPECIFIED && isNumber(transformationParamVal)) {
-                newUrl += `${transformationParam}=${transformationParamVal},`;
-              }
-              break;
-            case "format":
-              if(transformationParamVal){
-                newUrl += `${transformationParam}=${transformationParamVal},`;
-              }
-              break;
-            case "quality":
-              if (transformationParamVal === QUALITY_TYPE?.DECREASE && QUALITY && typeof QUALITY === "number") {
-                newUrl += `${transformationParam}=${QUALITY},`;
-              } else {
-                newUrl += `${transformationParam}=100,`;
-              }
-              break;
-            default:
-              break;
-          }
-        } catch (e) {
-          Bugsnag.leaveBreadcrumb("some error occured while applying transformation")
-          Bugsnag.notify(e, (event) => {
-            event.severity = "error";
-          });
-        }
-      })
-    }
-    newUrl += `/${CREATIVES_S3_BUCKET_PATH}${assetKey}`;
-    return newUrl;
-
-  }catch(e){
-    Bugsnag.leaveBreadcrumb("Some exception occurred in getCdnUrl");
-    Bugsnag.notify(e, (event) => {
-      event.severity = "error";
-    });
-    return url;
-  }
-};
-
-/**
- *
- * @param {string} htmlContents accepts htmlContents - strigified.
- * @returns htmlContents with updated urls in image tag
- */
-export const updateImagesInHtml = (htmlContents) => {
-  if(!htmlContents || typeof htmlContents !== "string"){
-    return htmlContents;
-  } 
-  const copiedHtmlContents = htmlContents;
-  try {
-    const root = parse(htmlContents);
-    root?.querySelectorAll("img")?.forEach((element) => {
-      const imageSrc = element.getAttribute("src");
-      const height = element.getAttribute("height");
-      const width = element.getAttribute("width");
-      const newUrl = getCdnUrl({
-        url: imageSrc,
-        height,
-        width,
-        channelName: EMAIL,
-      });
-      element.setAttribute("src", newUrl);
-    });
-    return root.toString();
-  } catch (e) {
-    Bugsnag.leaveBreadcrumb("An error occured while updating images in html")
-    Bugsnag.notify(e, (event) => {
-      event.severity = "error";
-    });
-    return copiedHtmlContents; //return received input directly in case an exception is thrown
-  }
-};
-
-/**
- *
- * @param {*} contents
- * @returns
- * Transforms the email template's html by images replacing the s3 url / cdn url with cdn url.
- */
-export const transformEmailTemplates = (contents) => {
-  const contentsCopy = cloneDeep(contents);
-  try {
-    const base = contentsCopy?.versions?.base;
-    const languages = base?.selectedLanguages;
-    languages?.forEach((lang) => {
-      const htmlContents = base?.[lang]?.["template-content"];
-      const newHtmlContents = updateImagesInHtml(htmlContents);
-      base[lang]["template-content"] = newHtmlContents;
-    });
-    return contentsCopy;
-  } catch (e) {
-    Bugsnag.leaveBreadcrumb(
-      "Some error has occured while transforming email templates"
-    );
-    Bugsnag.notify(e, (event) => {
-      event.severity = "error";
-    });
-    return contents; //return received input directly in case an exception is thrown
-  }
-};
-
-
-/**
- * 
- * @param {*} key 
- * @param {*} parse 
- * @returns Localstorage item with mentioned key. Parses the value if second param `parse` is true.
- */
-export function getLocalStorageItem(key, parse = false){
-  const val = localStorage.getItem(key);
-  if(parse){
-    return JSON.parse(val);
-  }
-  return val;
-}
-
-/**
- * Removes specified key from local storage.
- */
-export function removeLocalStorageItem(key) {
-  localStorage.removeItem(key);
-  return;
-}
-
-/**
- * Util function. Removes all cdn related local storage items.
- */
-export function removeAllCdnLocalStorageItems() {
-  try{
-    removeLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
-    removeLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY);
-    removeLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
-    removeLocalStorageItem(CREATIVES_S3_BUCKET_PATH_KEY);
-  }catch(e){
-    Bugsnag.leaveBreadcrumb("some error occured while deleting all keys for cdn");
-    Bugsnag.notify(e, (event) => {
-      event.severity = "error";
-    });
-  }
-}
-
-/**
- * 
- * @param {*} configsResponse 
- * This util function saves the getCdnConfigs response into the local storage.
- * The following response items are mapped into the following keys in local storage:
- * hostname -> CREATIVES_CDN_BASE_URL
- * qualityCfg ->CREATIVES_CDN_QUALITY_CONFIG
- * transformationUrlSuffix -> CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX
- * 
- * 1. If configsReponse is empty. All above mentioned keys are deleted from localstorage.
- * 2. If any one of the above keys is missing. The respective keys are deleted from localstorage.
- * 3. Else it is saved into the localstorage.
- */
-export function saveCdnConfigs(configsResponse) {
-  try {
-    //If no response from api, then remove localStorage items if they were set previously
-    if (isEmpty(configsResponse)) {
-      removeAllCdnLocalStorageItems();
-      return;
-    }
-
-    if (configsResponse?.hostname) {
-      localStorage.setItem(
-        CREATIVES_CDN_BASE_URL_KEY,
-        configsResponse?.hostname
-      );
-    } else {
-      removeLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
-    }
-
-    if (configsResponse?.bucketPath) {
-      localStorage.setItem(
-        CREATIVES_S3_BUCKET_PATH_KEY,
-        configsResponse?.bucketPath
-      );
-    } else {
-      removeLocalStorageItem(CREATIVES_S3_BUCKET_PATH_KEY);
-    }
-
-    if (!isEmpty(configsResponse?.qualityCfg)) {
-      const qualityString = JSON.stringify(configsResponse?.qualityCfg);
-      localStorage.setItem(CREATIVES_CDN_QUALITY_CONFIG_KEY, qualityString);
-    } else {
-      removeLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY);
-    }
-
-    if (configsResponse?.transformationUrlSuffix) {
-      localStorage.setItem(
-        CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY,
-        configsResponse?.transformationUrlSuffix
-      );
-    } else {
-      removeLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
-    }
-  } catch (e) {
-    Bugsnag.leaveBreadcrumb("some error while setting localstorage cdn configs");
-    Bugsnag.notify(e, (event) => {
-      event.severity = "error";
-    });
-  }
-}