@capillarytech/creatives-library 7.16.2 → 7.16.4

package/containers/Assets/Gallery/messages.js

@@ -76,7 +76,7 @@ export default defineMessages({
   },
   assetUploadFailed: {
     id: 'creatives.containers.Assets.Gallery.assetUploadFailed',
-    defaultMessage: 'Image uploaded failed',
+    defaultMessage: 'Image upload failed',
   },
   assetDeleteSuccess: {
     id: 'creatives.containers.Assets.Gallery.assetDeleteSuccess',

package/containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -323,7 +323,7 @@ exports[`<Cap /> should render its children 1`] = `
         "creatives.containers.Assets.Gallery.alphabetically": "Alphabetically",
         "creatives.containers.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
         "creatives.containers.Assets.Gallery.assetDeleteSuccess": "Image deleted successfully.",
-        "creatives.containers.Assets.Gallery.assetUploadFailed": "Image uploaded failed",
+        "creatives.containers.Assets.Gallery.assetUploadFailed": "Image upload failed",
         "creatives.containers.Assets.Gallery.assetUploadSuccess": "Image uploaded successfully",
         "creatives.containers.Assets.Gallery.backToGallery": "Back to image gallery",
         "creatives.containers.Assets.Gallery.delete": "Delete",
@@ -470,7 +470,7 @@ exports[`<Cap /> should render its children 1`] = `
         "creatives.containers.Email.Tags": "Tags",
         "creatives.containers.Email.alphabetically": "Alphabetically",
         "creatives.containers.Email.alphabeticallyOption": "Alphabetically",
-        "creatives.containers.Email.assetUploadFailed": "Image uploaded failed",
+        "creatives.containers.Email.assetUploadFailed": "Image upload failed",
         "creatives.containers.Email.blankTemplate": "Blank template",
         "creatives.containers.Email.cancel": "Cancel",
         "creatives.containers.Email.createHeading": "Create email template",
@@ -875,7 +875,7 @@ exports[`<Cap /> should render its children 1`] = `
         "creatives.containersV2.Assets.Gallery.alphabetically": "Alphabetically",
         "creatives.containersV2.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
         "creatives.containersV2.Assets.Gallery.assetDeleteSuccess": "Image deleted successfully.",
-        "creatives.containersV2.Assets.Gallery.assetUploadFailed": "Image uploaded failed",
+        "creatives.containersV2.Assets.Gallery.assetUploadFailed": "Image upload failed",
         "creatives.containersV2.Assets.Gallery.assetUploadSuccess": "Image uploaded successfully",
         "creatives.containersV2.Assets.Gallery.backToGallery": "Back to image gallery",
         "creatives.containersV2.Assets.Gallery.delete": "Delete",
@@ -1133,7 +1133,7 @@ exports[`<Cap /> should render its children 1`] = `
         "creatives.containersV2.Email.alertMessage": "Alert",
         "creatives.containersV2.Email.alphabetically": "Alphabetically",
         "creatives.containersV2.Email.alphabeticallyOption": "Alphabetically",
-        "creatives.containersV2.Email.assetUploadFailed": "Image uploaded failed",
+        "creatives.containersV2.Email.assetUploadFailed": "Image upload failed",
         "creatives.containersV2.Email.blankTemplate": "Blank template",
         "creatives.containersV2.Email.cancel": "Cancel",
         "creatives.containersV2.Email.copyPrimaryLanguage": "Copy Primary Language",

package/containers/Email/messages.js

@@ -228,7 +228,7 @@ export default defineMessages({
   },
   "assetUploadFailed": {
     id: 'creatives.containers.Email.assetUploadFailed',
-    defaultMessage: 'Image uploaded failed',
+    defaultMessage: 'Image upload failed',
   },
   "goBackConfirmation": {
     id: 'creatives.containers.Email.Create.goBackConfirmation',

package/package.json

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

package/translations/en.json

@@ -281,7 +281,7 @@
   "creatives.containers.Assets.Gallery.alphabetically": "Alphabetically",
   "creatives.containers.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
   "creatives.containers.Assets.Gallery.assetDeleteSuccess": "Image deleted successfully.",
-  "creatives.containers.Assets.Gallery.assetUploadFailed": "Image uploaded failed",
+  "creatives.containers.Assets.Gallery.assetUploadFailed": "Image upload failed",
   "creatives.containers.Assets.Gallery.assetUploadSuccess": "Image uploaded successfully",
   "creatives.containers.Assets.Gallery.backToGallery": "Back to image gallery",
   "creatives.containers.Assets.Gallery.delete": "Delete",
@@ -428,7 +428,7 @@
   "creatives.containers.Email.Tags": "Tags",
   "creatives.containers.Email.alphabetically": "Alphabetically",
   "creatives.containers.Email.alphabeticallyOption": "Alphabetically",
-  "creatives.containers.Email.assetUploadFailed": "Image uploaded failed",
+  "creatives.containers.Email.assetUploadFailed": "Image upload failed",
   "creatives.containers.Email.blankTemplate": "Blank template",
   "creatives.containers.Email.cancel": "Cancel",
   "creatives.containers.Email.createHeading": "Create email template",
@@ -833,7 +833,7 @@
   "creatives.containersV2.Assets.Gallery.alphabetically": "Alphabetically",
   "creatives.containersV2.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
   "creatives.containersV2.Assets.Gallery.assetDeleteSuccess": "Image deleted successfully.",
-  "creatives.containersV2.Assets.Gallery.assetUploadFailed": "Image uploaded failed",
+  "creatives.containersV2.Assets.Gallery.assetUploadFailed": "Image upload failed",
   "creatives.containersV2.Assets.Gallery.assetUploadSuccess": "Image uploaded successfully",
   "creatives.containersV2.Assets.Gallery.backToGallery": "Back to image gallery",
   "creatives.containersV2.Assets.Gallery.delete": "Delete",
@@ -1091,7 +1091,7 @@
   "creatives.containersV2.Email.alertMessage": "Alert",
   "creatives.containersV2.Email.alphabetically": "Alphabetically",
   "creatives.containersV2.Email.alphabeticallyOption": "Alphabetically",
-  "creatives.containersV2.Email.assetUploadFailed": "Image uploaded failed",
+  "creatives.containersV2.Email.assetUploadFailed": "Image upload failed",
   "creatives.containersV2.Email.blankTemplate": "Blank template",
   "creatives.containersV2.Email.cancel": "Cancel",
   "creatives.containersV2.Email.copyPrimaryLanguage": "Copy Primary Language",

package/utils/common.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { Auth } from '@capillarytech/cap-ui-utils';
+
 import {
   STORE2DOOR_PLUS_ENABLED,
   TRAI_DLT,
@@ -262,3 +263,24 @@ export const isTraiDLTEnable = (isFullMode, smsRegister) => {
   const isTraiDltFeature = isTraiDltFeatureForOrg && isTraiEnableforLib;
   return isTraiDltFeature;
 };
+
+/* function used to encode filename and check file name 
+  pattern based on the given regex */
+export function createNewFile(Files, allowedExtensionsRegex) {
+  const fileObject = Files[0];
+  let incorrectFile = false;
+
+  if (allowedExtensionsRegex && !allowedExtensionsRegex.test(fileObject?.name)) {
+    incorrectFile = true;
+    return [fileObject, incorrectFile];
+  }
+  const encodedName = fileObject?.name.replace(/(.+?)(\.[^.]*$|$)/, (match, name, extension) => {
+    const filename = encodeURIComponent(name);
+    return filename + extension;
+  });
+  const { type, ...rest } = fileObject;
+  const newFile = new File([fileObject], encodedName, { type, ...rest });
+  newFile.uid = fileObject.uid;
+  return [newFile, incorrectFile];
+}
+

package/utils/tests/v2Common.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { getObjFromQueryParams } from '../v2common';
-
+import { getObjFromQueryParams} from '../v2common';
+import {createNewFile} from '../common';
 describe('Test v2common container', () => {
   it('test getObjFromQueryParams', () => {
     expect(getObjFromQueryParams("?channel=WHATSAPP&mode=CREATE")).toEqual({
@@ -9,3 +9,45 @@ describe('Test v2common container', () => {
     });
   });
 });
+
+describe('Test createNewFile function', () => {
+  const allowedExtensionsRegex = /(\.png|\.jpg)$/i;
+  const tempFile = [{
+    name: '#image.png',
+    type: 'image/jpeg',
+    size: 2048,
+    uid: 'def456',
+  }];
+  const expectedFile = new File([tempFile], '%23image.png', {
+    type: 'image/jpeg',
+    size: 2048,
+    uid: 'def456',
+  });
+  it('should create a new file with encoded name', () => {
+    const [resultFile, incorrectFile] = createNewFile(tempFile, allowedExtensionsRegex);
+    expect(resultFile).toMatchObject(expectedFile);
+    expect(incorrectFile).toBe(false);
+  });
+  it('should return incorrect file true', () => {
+    const tempFileWrong = [{
+      name: '#song.mov',
+      type: 'video/mov',
+      size: 2048,
+      uid: 'def4516',
+    }];
+
+    const expectedFileWrong = new File([tempFileWrong], '%23song.mov', {
+      type: 'video/mov',
+      size: 2048,
+      uid: 'def4516',
+    });
+    const [resultFile, incorrectFile] = createNewFile(tempFileWrong, allowedExtensionsRegex);
+    expect(resultFile).toMatchObject(expectedFileWrong);
+    expect(incorrectFile).toBe(true);
+  });
+  it('should return only the updated file as the validation is handled differently for some channels', () => {
+    const resultFile = createNewFile(tempFile)[0];
+    expect(resultFile).toMatchObject(expectedFile);
+  });
+});
+

package/v2Components/CapDocumentUpload/index.js

@@ -13,6 +13,7 @@ import isEmpty from 'lodash/isEmpty';
 import './index.scss';
 import messages from './messages';
 import { convertPdfToImages } from '../WhatsappDocumentPreview/index';
+import { createNewFile } from '../../utils/common';
 
 function CapDocumentUpload(props) {
   const {
@@ -39,7 +40,7 @@ function CapDocumentUpload(props) {
       const { secure_file_path = '', karixFileHandle = '', name = '', file_size = ''} = get(docDataObj, 'metaInfo', {});
       setWhatsappDocParams({
         ...whatsappDocParams,
-        whatsappDocName: `${name.slice(0, -13)}.pdf`,
+        whatsappDocName: `${decodeURIComponent(name.slice(0, -13))}.pdf`,
         //sliced to show the actual name of the pdf to the user and in the preview, this remove suffix appended to the name on creatives node side
         whatsappDocSize: file_size,
       });
@@ -69,11 +70,7 @@ function CapDocumentUpload(props) {
       e.preventDefault();
     }
     const _URL = window.URL || window.webkitURL;
-    let incorrectFile = false;
-    const file = files[0];
-    if (!allowedExtensionsRegex.test(file.name)) {
-      incorrectFile = true;
-    }
+    const [file, incorrectFile] = createNewFile(files, allowedExtensionsRegex);
     const doc = new FileReader();
     doc.src = _URL.createObjectURL(file);
     const fileParams = {

package/v2Components/CapImageUpload/index.js

@@ -23,6 +23,7 @@ import Gallery from '../../v2Containers/Assets/Gallery';
 import { FACEBOOK, RCS, WHATSAPP } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
+import { createNewFile } from '../../utils/common';
 function CapImageUpload(props) {
   const {
     intl,
@@ -78,11 +79,7 @@ function CapImageUpload(props) {
       e.preventDefault();
     }
     const _URL = window.URL || window.webkitURL;
-    let incorrectFile = false;
-    const file = files[0];
-    if (!allowedExtensionsRegex.test(file.name)) {
-      incorrectFile = true;
-    }
+    const [file, incorrectFile] = createNewFile(files, allowedExtensionsRegex);
     const img = new Image();
     img.src = _URL.createObjectURL(file);
     img.onload = () => {

package/v2Components/CapVideoUpload/index.js

@@ -18,7 +18,7 @@ import {
   CapSpin,
 } from '@capillarytech/cap-ui-library';
 import messages from './messages';
-import {bytes2Size} from '../../utils/common';
+import {bytes2Size, createNewFile} from '../../utils/common';
 import { WHATSAPP } from './constants';
 import './index.scss';
 
@@ -64,11 +64,7 @@ function CapVideoUpload(props) {
       e.preventDefault();
     }
     const _URL = window.URL || window.webkitURL;
-    let incorrectFile = false;
-    const file = files[0];
-    if (!allowedExtensionsRegex.test(file.name)) {
-      incorrectFile = true;
-    }
+    const [file, incorrectFile] = createNewFile(files, allowedExtensionsRegex);
     const video = new FileReader();
     video.src = _URL.createObjectURL(file);
     const fileParams = {

package/v2Components/FormBuilder/index.js

@@ -30,6 +30,7 @@ import { SMS, LINE } from '../../v2Containers/CreativesContainer/constants';
 import { validateIfTagClosed } from '../../utils/tagValidations';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
+import { createNewFile } from '../../utils/common';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -2161,13 +2162,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       e.preventDefault();
     }
     const _URL = window.URL || window.webkitURL;
-    const file = files[0];
+    const tempFile = files[0];
     if (val.supportedExtensions) {
       const allowedExtensions = /(\.bmp|\.jpeg|\.png|\.gif|\.jpg)$/i;
-      if (!allowedExtensions.exec(file.name)) {
-        this.callChildEvent({file, type: 'wrong file'}, val, val.submitAction);
+      if (!allowedExtensions.exec(tempFile?.name)) {
+        this.callChildEvent({tempFile, type: 'wrong file'}, val, val.submitAction);
       }
     }
+    const file = createNewFile(files)[0];
     const img = new Image();
     img.src = _URL.createObjectURL(file);
     img.onload = () => {

package/v2Containers/App/constants.js

@@ -8,6 +8,7 @@ export const GET_SIDEBAR_FAILURE = 'app/App/GET_SIDEBAR_FAILURE';
 
 export const getTopbarMenuDataValue = () => ([
       { label: <FormattedMessage {...globalMessages.campaigns} />, link: '/campaigns/ui/list', key: 'campaigns' },
+      { label: <FormattedMessage {...globalMessages.journeys} />, link: '/journeys/ui', key: 'journeys' },
       { label: <FormattedMessage {...globalMessages.audience} />, link: '/audience-manager/list', key: 'audience' },
       { label: <FormattedMessage {...globalMessages.incentive} />, link: '/coupons/ui/', key: 'incentive' },
       { label: <FormattedMessage {...globalMessages.creatives} />, link: '/creatives/ui/v2', key: 'creatives' },

package/v2Containers/Assets/Gallery/index.js

@@ -13,8 +13,10 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
+import Bugsnag from '@bugsnag/js';
 import { CapHeading, CapHeader, CapInput, CapButton, CapSpin, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
 import { Popover } from 'antd';
+import { createNewFile } from '../../../utils/common';
 import makeSelectGallery from './selectors';
 import messages from './messages';
 import * as actions from './actions';
@@ -231,16 +233,18 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     const _URL = window.URL || window.webkitURL;
     for (const file in files) {
       if (files.hasOwnProperty(file)) {
+        const tempFile = files[file];
+        const [uploadFile] = createNewFile([tempFile]);
         const img = new Image();
         const that = this;
-        img.src = _URL.createObjectURL(files[file]);
+        img.src = _URL.createObjectURL(uploadFile);
         img.onload = function () {
           const fileParams = {
             width: this.width,
             height: this.height,
             isGeneratePreview: true,
           };
-          that.props.actions.uploadAsset(files[file], 'image', fileParams);
+          that.props.actions.uploadAsset(uploadFile, 'image', fileParams);
         };
       }
     }
@@ -307,6 +311,10 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     const currentChannel = 'gallery';
     const { searchLoader, searchText } = this.state;
     const cardDataList = templates?.length ? _.map(templates, (template) => {
+      const nameParts = template.name.split('.');
+      if (encodeURIComponent(decodeURIComponent(nameParts[0])) === nameParts[0]) {
+        template.name = `${decodeURIComponent(nameParts[0])}.${nameParts[1]}`;
+        }
       const templateData =
         {
           key: `${currentChannel}-card-${template.name}`,
@@ -390,9 +398,26 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     const by = commonUtil.getUserNameById(parseInt(this.state.selectedAsset.updatedBy, 10), commonUtil.getMergedUserList(this.props.Gallery.userList));
     const width = this.state.selectedAsset.metaInfo.width;
     const height = this.state.selectedAsset.metaInfo.height;
+    /*
+    splitting the name on . and verifying 
+    whether the filename is already encoded or not, 
+    if yes decoding it ,to be shown on ui 
+    */
+    const nameParts = this.state.selectedAsset.name.split('.');
+    let updatedTitle = this.state.selectedAsset.name;
+    try {
+      if (encodeURIComponent(decodeURIComponent(nameParts[0])) === nameParts[0]) {
+        updatedTitle = `${decodeURIComponent(nameParts[0])}.${nameParts[1]}`;
+      }
+    } catch (error) {
+      Bugsnag.leaveBreadcrumb("Error decoding the string:", error);
+      Bugsnag.notify(error, (event) => {
+        event.severity = "error";
+      });
+    }
     const slideboxHeader = (<div>
       <CapHeader
-        title={this.state.selectedAsset.name}
+        title={updatedTitle}
         description={<FormattedMessage
           {...messages.lastUpdated}
           values={{on, by }}

package/v2Containers/Assets/Gallery/messages.js

@@ -80,7 +80,7 @@ export default defineMessages({
   },
   assetUploadFailed: {
     id: 'creatives.containersV2.Assets.Gallery.assetUploadFailed',
-    defaultMessage: 'Image uploaded failed',
+    defaultMessage: 'Image upload failed',
   },
   assetDeleteSuccess: {
     id: 'creatives.containersV2.Assets.Gallery.assetDeleteSuccess',

package/v2Containers/Cap/messages.js

@@ -24,6 +24,10 @@ export default defineMessages({
     id: 'creatives.containersV2.Cap.campaigns',
     defaultMessage: 'Campaigns',
   },
+  "journeys": {
+    id: 'creatives.containersV2.Cap.journeys',
+    defaultMessage: 'Journeys',
+  },
   "loyalty": {
     id: 'creatives.containersV2.Cap.loyalty',
     defaultMessage: 'Loyalty',

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

@@ -356,7 +356,7 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.containers.Assets.Gallery.alphabetically": "Alphabetically",
         "creatives.containers.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
         "creatives.containers.Assets.Gallery.assetDeleteSuccess": "Image deleted successfully.",
-        "creatives.containers.Assets.Gallery.assetUploadFailed": "Image uploaded failed",
+        "creatives.containers.Assets.Gallery.assetUploadFailed": "Image upload failed",
         "creatives.containers.Assets.Gallery.assetUploadSuccess": "Image uploaded successfully",
         "creatives.containers.Assets.Gallery.backToGallery": "Back to image gallery",
         "creatives.containers.Assets.Gallery.delete": "Delete",
@@ -503,7 +503,7 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.containers.Email.Tags": "Tags",
         "creatives.containers.Email.alphabetically": "Alphabetically",
         "creatives.containers.Email.alphabeticallyOption": "Alphabetically",
-        "creatives.containers.Email.assetUploadFailed": "Image uploaded failed",
+        "creatives.containers.Email.assetUploadFailed": "Image upload failed",
         "creatives.containers.Email.blankTemplate": "Blank template",
         "creatives.containers.Email.cancel": "Cancel",
         "creatives.containers.Email.createHeading": "Create email template",
@@ -908,7 +908,7 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.containersV2.Assets.Gallery.alphabetically": "Alphabetically",
         "creatives.containersV2.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
         "creatives.containersV2.Assets.Gallery.assetDeleteSuccess": "Image deleted successfully.",
-        "creatives.containersV2.Assets.Gallery.assetUploadFailed": "Image uploaded failed",
+        "creatives.containersV2.Assets.Gallery.assetUploadFailed": "Image upload failed",
         "creatives.containersV2.Assets.Gallery.assetUploadSuccess": "Image uploaded successfully",
         "creatives.containersV2.Assets.Gallery.backToGallery": "Back to image gallery",
         "creatives.containersV2.Assets.Gallery.delete": "Delete",
@@ -1166,7 +1166,7 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.containersV2.Email.alertMessage": "Alert",
         "creatives.containersV2.Email.alphabetically": "Alphabetically",
         "creatives.containersV2.Email.alphabeticallyOption": "Alphabetically",
-        "creatives.containersV2.Email.assetUploadFailed": "Image uploaded failed",
+        "creatives.containersV2.Email.assetUploadFailed": "Image upload failed",
         "creatives.containersV2.Email.blankTemplate": "Blank template",
         "creatives.containersV2.Email.cancel": "Cancel",
         "creatives.containersV2.Email.copyPrimaryLanguage": "Copy Primary Language",

package/v2Containers/Email/messages.js

@@ -232,7 +232,7 @@ export default defineMessages({
   },
   "assetUploadFailed": {
     id: 'creatives.containersV2.Email.assetUploadFailed',
-    defaultMessage: 'Image uploaded failed',
+    defaultMessage: 'Image upload failed',
   },
   "noImgInGallery": {
     id: 'creatives.containersV2.Email.noImgInGallery',

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

@@ -24,6 +24,7 @@ import {
   LINE_IMG_SIZE,
   ALLOWED_EXTENSIONS_REGEX,
 } from './constants';
+import { createNewFile } from '../../../../utils/common';
 
 export const LineImage = ({
     className,
@@ -171,11 +172,7 @@ export const LineImage = ({
             e.preventDefault();
         }
         const _URL = window.URL || window.webkitURL;
-        let incorrectFile = false;
-        const file = files[0];
-        if (!ALLOWED_EXTENSIONS_REGEX.test(file.name)) {
-            incorrectFile = true;
-        }
+        const [file, incorrectFile] = createNewFile(files, ALLOWED_EXTENSIONS_REGEX);
         const img = new Image();
         img.src = _URL.createObjectURL(file);
         img.onload = () => {