@capillarytech/creatives-library 7.13.30 → 7.13.32-alpha.1

package/config/app.js

@@ -16,7 +16,8 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
+    // api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.13.30",
+  "version": "7.13.32-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -489,4 +489,9 @@ export const getSenderDetails = (channel, orgUnitId) => {
 export const getCdnTransformationConfig = () => {
   const url = `${API_ENDPOINT}/common/getCdnTransformationConfig`;
   return request(url, getAPICallObject('GET'));
+}
+
+export const getS3UrlFileSizes = (data) => {
+  const url = `${API_ENDPOINT}/assets/files/metadata`;
+  return request(url, getAPICallObject('POST', data));
 }

package/utils/cdnTransformation.js

@@ -3,7 +3,7 @@ import isEmpty from "lodash/isEmpty";
 import forOwn from "lodash/forOwn";
 import isNumber from "lodash/isNumber";
 import Bugsnag from '@bugsnag/js';
-
+import * as Api from '../services/api';
 /* eslint-disable no-unused-expressions */
 import { parse } from "node-html-parser";
 import { EMAIL } from '../v2Containers/CreativesContainer/constants';
@@ -266,16 +266,21 @@ export const getCdnUrl = ({
 /**
  *
  * @param {string} htmlContents accepts htmlContents - strigified.
- * @returns htmlContents with updated urls in image tag
+ * @returns {Promise} htmlContents with updated urls in image tag
  */
-export const updateImagesInHtml = (htmlContents) => {
+export const updateImagesInHtml = async (htmlContents) => {
   if(!htmlContents || typeof htmlContents !== "string"){
     return htmlContents;
   } 
   const copiedHtmlContents = htmlContents;
   try {
     const root = parse(htmlContents);
-    const isEmailQualityOverridden = getLocalStorageItem(CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_KEY)
+    const isEmailQualityOverridden = getLocalStorageItem(CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_KEY);
+    let urlQualityMappings;
+    if(isEmailQualityOverridden){
+      const urlList = root?.querySelectorAll("img")?.map(element=>element.getAttribute("src"));
+      urlQualityMappings = await getUrlsToQualityMapping(urlList);
+    }
     root?.querySelectorAll("img")?.forEach((element) => {
       const imageSrc = element.getAttribute("src");
       const height = element.getAttribute("height");
@@ -283,8 +288,8 @@ export const updateImagesInHtml = (htmlContents) => {
 
       let emailOverrideQuality = null;
       if (isEmailQualityOverridden) {
-        const tempQuality = overrideEmailQuality(imageSrc);
-        if (tempQuality !== -1) {
+        const tempQuality = urlQualityMappings?.[imageSrc];
+        if (tempQuality && tempQuality !== -1) {
           emailOverrideQuality = tempQuality;
         }
       }
@@ -314,17 +319,21 @@ export const updateImagesInHtml = (htmlContents) => {
  * @returns
  * Transforms the email template's html by images replacing the s3 url / cdn url with cdn url.
  */
-export const transformEmailTemplates = (contents) => {
+export function transformEmailTemplates(contents){
   const contentsCopy = cloneDeep(contents);
   try {
     const base = contentsCopy?.versions?.base;
     const languages = base?.selectedLanguages;
+    let promises = [];
     languages?.forEach((lang) => {
       const htmlContents = base?.[lang]?.["template-content"];
-      const newHtmlContents = updateImagesInHtml(htmlContents);
-      base[lang]["template-content"] = newHtmlContents;
+      promises.push(
+        updateImagesInHtml(htmlContents).then(newHtmlContents=>{
+          base[lang]["template-content"] = newHtmlContents;
+        })
+      )
     });
-    return contentsCopy;
+    return Promise.all(promises).then(_=>contentsCopy);
   } catch (e) {
     Bugsnag.leaveBreadcrumb(
       "Some error has occured while transforming email templates"
@@ -508,11 +517,12 @@ export function checkValidUrl(url){
 
   const isValidUrl = regexWithExtension.test(url);
   const isCdnUrl = url.includes(CREATIVES_CDN_BASE_URL);
-
+  const isS3Url = isValidUrl && !isCdnUrl;
 
   return {
     isValidUrl,
     isCdnUrl,
+    isS3Url,
   }
 }
 
@@ -548,23 +558,24 @@ export function getCdnEmailImageQuality(url) {
  * 1. If it is s3 url, it returns quality inversly proportional to its filesize.
  * 2. If it is cdn url, it extracts quality from url and returns the same.
  */
-export function overrideEmailQuality(url){
+export function getS3EmailImageQuality(url){
   if(!url || typeof url !== "string") return -1;
 
-  const {isValidUrl, isCdnUrl} = checkValidUrl(url);
-
-  if(!isValidUrl) return -1;
-
-  if(isCdnUrl){
-    return getCdnEmailImageQuality(url);
-  }
-
   const fileSize = getFizeSizeFromUrl(url);
 
-  if(!fileSize) return -1;
+  if(!fileSize) return;
 
   return getEmailImageOverrideQuality(fileSize);
+}
+
+export function getS3EmailImageQualityMapping(urlToFileSizeMapping){
+  if(typeof urlToFileSizeMapping !== "object" || !urlToFileSizeMapping) return {};
 
+  const urlToImageQualityMapping = {};
+  for (let url of Object.keys(urlToFileSizeMapping)) {
+    urlToImageQualityMapping[url] = getEmailImageOverrideQuality(urlToFileSizeMapping[url]);
+  }
+  return urlToImageQualityMapping;
 }
 
 /**
@@ -615,4 +626,65 @@ export function getEmailImageOverrideQuality(fileSize) {
   } catch (e) {
     return -1;
   }
+}
+
+/**
+ * 
+ * @param {array} urlList ex ['1.jpg','2.jpg'] // these can be any urls (s3, cdn or others)
+ * 
+ */
+export async function getUrlsToQualityMapping(urlList){
+  if(!urlList?.length) return {};
+
+  const urlQualityMapping = {};
+
+  const nonSelectedS3Urls = []; //we do not know file sizes of these s3 urls yet.
+
+  urlList?.forEach(url=>{
+    const {isS3Url, isCdnUrl} = checkValidUrl(url);
+
+    if (isCdnUrl){
+      urlQualityMapping[url] = getCdnEmailImageQuality(url);
+      return;
+    }
+    if(isS3Url){
+      const s3FileQuality = getS3EmailImageQuality(url);
+      if(s3FileQuality){
+        urlQualityMapping[url] = s3FileQuality;
+        return;
+      }
+      if(!s3FileQuality){
+        nonSelectedS3Urls.push(url)
+      }
+    }
+  })
+
+  if(nonSelectedS3Urls?.length){
+    let nonSelectedS3UrlMapping = await getS3FileSizesFromUrl(nonSelectedS3Urls)
+    const nonSelectedS3UrlQualityMapping = getS3EmailImageQualityMapping(nonSelectedS3UrlMapping)
+    let x = {...urlQualityMapping,...nonSelectedS3UrlQualityMapping};
+    return x;
+  }
+  return urlQualityMapping;
+}
+
+export async function getS3FileSizesFromUrl(urlList) {
+  if(!urlList?.length){
+    return {}
+  }
+  try{
+    let data = await Api.getS3UrlFileSizes({ keys: urlList });
+    if (data?.status?.code === 200 && data?.success && data?.response) {
+      const result = data?.response;
+      const urlMapping = {};
+      for (let url of Object.keys(result)) {
+        urlMapping[url] = result[url];
+      }
+      return urlMapping;
+    } else {
+      return {};
+    }
+  }catch(e){
+    return {};
+  }
 }

package/utils/tagValidations.js

@@ -29,6 +29,7 @@ export const validateTags = ({
     valid: true,
     missingTags: [],
     unsupportedTags: [],
+    isBraceError: false,
   };
   if(tags && tags.length) {
     lodashForEach(tags, ({
@@ -78,6 +79,10 @@ export const validateTags = ({
       }
     }
   }
+  response.isBraceError = !validateIfTagClosed(content);
+  // response should not be valid if there is unbalanced bracket error, as
+  // validations (eg button) are handled on valid property coming from the response.
+  response.isBraceError ? response.valid = false : response.valid = true;
   return response;
 }
 

package/v2Containers/CreativesContainer/index.js

@@ -460,7 +460,7 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
-  getCreativesData = (channel, template, templateRecords) => { //from creatives to consumers
+  getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
       case constants.SMS:
@@ -499,7 +499,7 @@ export class Creatives extends React.Component {
           if (!html_content) {
             emailBase = templateRecords.base;
           }
-          const newHtmlContent = updateImagesInHtml(html_content);
+          const newHtmlContent = await updateImagesInHtml(html_content);
           templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
           delete templateData.html_content;
           delete templateData.subject;
@@ -821,11 +821,16 @@ export class Creatives extends React.Component {
           isGetFormData: false,
         },
         () => {
+          console.log("hello getFormData")
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
+          // this.props.actions.showCreativesContainerLoader();
           const creativesData = this.getCreativesData(channel, template, templateData );// convers data to consumer understandable format
-          this.logGTMEvent(channel, creativesData);
-          this.props.getCreativesData(creativesData);// send data to consumer
+          creativesData.then(data=>{
+            this.logGTMEvent(channel, data);
+            this.props.getCreativesData(data);// send data to consumer
+            // this.props.actions.hideCreativesContanerLoader();
+          })
         },
       );
     }

package/v2Containers/Email/actions.js

@@ -85,3 +85,11 @@ export function resetCmsData() {
     type: types.RESET_CMS_EDITOR_DATA,
   };
 }
+
+export function transformEmailTemplate(template, callback) {
+  return {
+    type: types.TRANSFORM_EMAIL_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}

package/v2Containers/Email/constants.js

@@ -36,3 +36,4 @@ export const DUPLICATE_TEMPLATE_REQUEST = 'app/v2Containers/Email/DUPLICATE_TEMP
 export const DUPLICATE_TEMPLATE_SUCCESS = 'app/v2Containers/Email/DUPLICATE_TEMPLATE_SUCCESS';
 export const DUPLICATE_TEMPLATE_FAILURE = 'app/v2Containers/Email/DUPLICATE_TEMPLATE_FAILURE';
 
+export const TRANSFORM_EMAIL_TEMPLATE_REQUEST = 'app/v2Containers/Email/TRANSFORM_EMAIL_TEMPLATE_REQUEST';

package/v2Containers/Email/index.js

@@ -2403,8 +2403,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     // if (saveCount === 0) {
 
-    const newEmail = transformEmailTemplates(obj);
-    this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
+    // const newEmail = transformEmailTemplates(obj);
+    this.props.actions.transformEmailTemplate(obj, (newEmail)=>{
+      this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
+    });
     // } else {
     //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
     //     _.forEach(data.selectedLanguages, (language, langIndex) => {

package/v2Containers/Email/reducer.js

@@ -140,6 +140,8 @@ function emailReducer(state = initialState, action) {
         .set('fetchingCmsData', false)
         .set('duplicateResponse', fromJS({}))
         .set('cmsData', '');
+    case types.TRANSFORM_EMAIL_TEMPLATE_REQUEST:
+      return state.set("createTemplateInProgress", true);
     default:
       return state;
   }

package/v2Containers/Email/sagas.js

@@ -2,7 +2,7 @@ import { take, cancel, call, put, takeLatest, takeEvery } from 'redux-saga/effec
 import { LOCATION_CHANGE } from 'react-router-redux';
 import * as Api from '../../services/api';
 import * as types from './constants';
-import { storeS3FileSizeDetails } from '../../utils/cdnTransformation';
+import { transformEmailTemplates, storeS3FileSizeDetails } from '../../utils/cdnTransformation';
 
 export function* createTemplate(template) {
   let errorMsg;
@@ -20,6 +20,15 @@ export function* createTemplate(template) {
   }
 }
 
+export function* transformEmailTemplate({template, callback}) {
+  try {
+    const result = yield call(transformEmailTemplates, template);
+    yield callback(result);
+  } catch (error) {
+    yield callback(template);    
+  }
+}
+
 export function* duplicateTemplate(id, channel) {
   let errorMsg;
   try {
@@ -89,6 +98,13 @@ function* watchCreateTemplate() {
   yield cancel(watcher);
 }
 
+function* watchTransformEmailTemplate() {
+  const watcher = yield takeLatest(types.TRANSFORM_EMAIL_TEMPLATE_REQUEST, transformEmailTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+
 function* watchGetTemplateDetails() {
   const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
   yield take(LOCATION_CHANGE);
@@ -128,6 +144,7 @@ function* watchDuplicateTemplate() {
 // All sagas to be loaded
 export default [
   watchCreateTemplate,
+  watchTransformEmailTemplate,
   watchGetTemplateDetails,
   watchGetAllAssets,
   watchGetCmsSetting,

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

@@ -15,7 +15,7 @@ import messages from './messages';
 import style from './style';
 import withStyles from '../../../../hoc/withStyles';
 import globalMessages from '../../../Cap/messages';
-import { validateIfTagClosed, validateTags } from '../../../../utils/tagValidations';
+import { validateTags } from '../../../../utils/tagValidations';
 
 const { TextArea } = CapInput;
 const {CapCustomCardList} = CapCustomCard;
@@ -118,7 +118,7 @@ export const LineText = ({
 
     const updateTextContentError = (value) => {
         let errorMessage = false;
-        const { valid } = validateTags({
+        const { valid, isBraceError } = validateTags({
             content: value,
             tagsParam: tags,
             injectedTagsParams: injectedTags,
@@ -129,12 +129,11 @@ export const LineText = ({
             errorMessage = formatMessage(messages.emptyTitleErrorMessage);
         } else if (value.length > charLimit) {
             errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
+        } else if (isBraceError) {
+            errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
         } else if (!valid && !isFullMode) {
             errorMessage = formatMessage(messages.invalidTagError);
         }
-        else if (!validateIfTagClosed(value)) {
-            errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
-        }
         updateErrorMessageTextArea(errorMessage);
     }
 

package/v2Containers/Rcs/index.js

@@ -80,7 +80,7 @@ import addCreativesIcon from '../Assets/images/addCreativesIllustration.svg';
 import Templates from '../Templates';
 import SmsTraiEdit from '../SmsTrai/Edit';
 import TagList from '../TagList';
-import { validateTags, validateIfTagClosed } from '../../utils/tagValidations';
+import { validateTags } from '../../utils/tagValidations';
 import { getCdnUrl } from '../../utils/cdnTransformation';
 const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
@@ -416,7 +416,7 @@ export const Rcs = (props) => {
 
   const templateDescErrorHandler = (value) => {
     let errorMessage = false;
-    const { unsupportedTags } =
+    const { unsupportedTags, isBraceError } =
       validateTags({
         content: value,
         tagsParam: tags,
@@ -435,8 +435,8 @@ export const Rcs = (props) => {
           unsupportedTags,
         },
       );
-    }
-    if (!validateIfTagClosed(value)){
+    } 
+    if (isBraceError){
       errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
     return errorMessage;

package/v2Containers/Viber/index.js

@@ -23,7 +23,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import { makeSelectViber, makeSelectCreateViber } from './selectors';
 import * as viberActions from './actions';
-import { validateIfTagClosed, validateTags } from '../../utils/tagValidations';
+import { validateTags } from '../../utils/tagValidations';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import {
   CAP_G09,
@@ -213,7 +213,7 @@ const Viber = (props) => {
 // validation on Text area and tags validation
   const updateTextContentError = (value) => {
     let errorMessage = false;
-    const { valid } = validateTags({
+    const { valid, isBraceError } = validateTags({
       content: value,
       tagsParam: tags,
       injectedTagsParams: injectedTags,
@@ -224,12 +224,12 @@ const Viber = (props) => {
       errorMessage = formatMessage(messages.emptyContentErrorMessage);
     } else if (value.length > charLimit) {
       errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
+    } else if (isBraceError){
+      errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
     } else if (!valid) {
       errorMessage = formatMessage(messages.invalidTagError);
     }
-    if (!validateIfTagClosed(value)){
-      errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
-    }
+    
     updateErrorMessageTextArea(errorMessage);
   };
 

package/v2Containers/Whatsapp/index.js

@@ -67,7 +67,7 @@ import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import CapImageUpload from '../../v2Components/CapImageUpload';
 import TagList from '../TagList';
-import { validateTags, validateIfTagClosed } from '../../utils/tagValidations';
+import { validateTags } from '../../utils/tagValidations';
 import { capitalizeString } from '../../utils/Formatter';
 import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
 import {
@@ -1227,14 +1227,14 @@ export const Whatsapp = (props) => {
   };
 
   const tagValidationErrorMessage = () => {
-    const { unsupportedTags = [] } = tagValidationResponse;
+    const { unsupportedTags = [] , isBraceError} = tagValidationResponse;
     let tagError = '';
     if (unsupportedTags.length > 0) {
       tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
         unsupportedTags,
       });
     }
-    if (!validateIfTagClosed(value)){
+    if (isBraceError){
       tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
     return <CapError>{tagError}</CapError>;

package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap

@@ -310724,12 +310724,6 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                 "id": "creatives.containersV2.Whatsapp.btnDisabledTooltip",
               },
             ],
-            Array [
-              Object {
-                "defaultMessage": "Invalid label, please close all curly braces",
-                "id": "creatives.componentsV2.unbalanacedCurlyBraces",
-              },
-            ],
             Array [
               Object {
                 "defaultMessage": "Select",
@@ -312515,10 +312509,6 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
               "type": "return",
               "value": undefined,
             },
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
           ],
         },
       }
@@ -317503,6 +317493,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                           size="large"
                           suffix={
                             <CapButton
+                              disabled={false}
                               isAddBtn={true}
                               onClick={[Function]}
                               type="flat"
@@ -318285,6 +318276,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                 </CapHeading>
                               </div>
                               <CapButton
+                                disabled={false}
                                 isAddBtn={true}
                                 onClick={[Function]}
                                 type="flat"
@@ -318292,6 +318284,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                 <Button
                                   block={false}
                                   className="cap-button-v2 flat-btn add-btn has-icon"
+                                  disabled={false}
                                   ghost={false}
                                   htmlType="button"
                                   loading={false}
@@ -318301,6 +318294,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                   <Wave>
                                     <button
                                       className="ant-btn cap-button-v2 flat-btn add-btn has-icon ant-btn-flat"
+                                      disabled={false}
                                       onClick={[Function]}
                                       type="button"
                                     >
@@ -318380,6 +318374,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                     "minRows": 3,
                                   }
                                 }
+                                errorMessage={false}
                                 id="whatsapp-create-template-message-input"
                                 key=".0"
                                 labelPosition="top"
@@ -318388,6 +318383,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                               >
                                 <ComponentWithLabelHOC__CapComponentStyled
                                   className="component-with-label"
+                                  errorMessage={false}
                                   labelPosition="top"
                                 >
                                   <div
@@ -318406,6 +318402,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                               "minRows": 3,
                                             }
                                           }
+                                          errorMessage={false}
                                           id="whatsapp-create-template-message-input"
                                           onChange={[Function]}
                                           size="large"
@@ -318426,6 +318423,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                                 }
                                               }
                                               cols={35}
+                                              errorMessage={false}
                                               id="whatsapp-create-template-message-input"
                                               onChange={[Function]}
                                               onKeyDown={[Function]}
@@ -318442,6 +318440,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                                 }
                                                 className="TextArea__StyledTextArea-sc-177dfyt-2 bSaDoB"
                                                 cols={35}
+                                                errorMessage={false}
                                                 id="whatsapp-create-template-message-input"
                                                 onChange={[Function]}
                                                 onKeyDown={[Function]}
@@ -318456,6 +318455,7 @@ exports[`Creatives Whatsapp test1/> template message 8`] = `
                                                   <textarea
                                                     className="ant-input TextArea__StyledTextArea-sc-177dfyt-2 bSaDoB"
                                                     cols={35}
+                                                    errorMessage={false}
                                                     id="whatsapp-create-template-message-input"
                                                     onChange={[Function]}
                                                     onKeyDown={[Function]}