@capillarytech/creatives-library 7.17.105 → 7.17.106-alpha.0

package/package.json

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

package/services/api.js

@@ -304,7 +304,18 @@ export const deleteAssetById = ({assetId, assetType}) => {
 
 export const uploadFile = ({file, assetType, fileParams, mode, wechatParams, whatsappParams}) => {
   const data = new FormData();
-  data.append('file', file);
+  let fileName = '';
+  try {
+    fileName = encodeURIComponent(file?.name || '');
+  } catch (error) {
+    fileName = file?.name || '';
+  }
+  // Creating a new File object with the modified filename
+  const modifiedFile = new File([file], fileName, {
+    type: file?.type,
+  });
+  // Append the modified file to the FormData object
+  data.append('file', modifiedFile);
   data.append('fileParam', JSON.stringify(fileParams));
   if (mode) {
     data.append('mode', mode);

package/services/tests/api.test.js

@@ -38,6 +38,25 @@ describe('uploadFile -- whatsapp image upload', () => {
         },
       }),
     ).toEqual(Promise.resolve()));
+
+  it('Uploads the file with the original filename when encodeURIComponent fails', async () => {
+    // Mocking the encodeURIComponent function to throw an error
+    global.encodeURIComponent = jest.fn(() => { throw new Error('encodeURIComponent error'); });
+    const blob = new Blob([''], { type: 'image/jpeg' });
+    const file = new File([blob], '@%test.jpeg', { type: 'image/jpeg' });
+    expect(
+        uploadFile({
+          file,
+          assetType: 'image',
+          fileParams: {
+            width: 275,
+            height: 183,
+            error: false,
+          },
+          whatsappParams: {},
+        }),
+      ).toEqual(Promise.resolve());
+  });
 });
 
 describe('createWhatsappTemplate -- Test with valid responses', () => {

package/utils/common.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import Bugsnag from '@bugsnag/js';
 import { Auth } from '@capillarytech/cap-ui-utils';
 import {
   STORE2DOOR_PLUS_ENABLED,
@@ -427,4 +428,22 @@ export const handleInjectedData = (data, scope) => {
 
 export const handlePreviewInNewTab = (previewUrl) => {
   window.open(previewUrl, '_blank');
-}
+};
+
+export const getDecodedFileName = (templateName = '') => {
+  try {
+    return decodeURIComponent(templateName);
+  } catch (error) {
+    // If decoding fails due to URIError, using the original encoded filename
+    if (error instanceof URIError) {
+      return templateName;
+    } else {
+      // For other errors, registering the exception in Bugsnag
+      Bugsnag.leaveBreadcrumb("Error decoding the string:", error);
+      Bugsnag.notify(error, (event) => {
+        event.severity = "error";
+      });
+    }
+  }
+  return templateName;
+};

package/utils/tests/common.test.js

@@ -1,19 +1,29 @@
 import React from 'react';
+import Bugsnag from '@bugsnag/js';
 import { FormattedMessage } from 'react-intl';
 import "@testing-library/jest-dom";
-import { filterTags, getTreeStructuredTags, handleInjectedData, intlKeyGenerator, bytes2Size, getUserNameById, iframePreviewAdjustWidth } from "../common";
+import {
+  filterTags,
+  getTreeStructuredTags,
+  handleInjectedData,
+  intlKeyGenerator,
+  bytes2Size,
+  getUserNameById,
+  iframePreviewAdjustWidth,
+  getDecodedFileName
+} from "../common";
 import * as mockdata from "./common.mockdata";
 
 describe("getTreeStructuredTags test", () => {
   it("test for getTreeStructuredTags when tagsList is not empty", () => {
-    expect(getTreeStructuredTags({tagsList: mockdata.tagsList})).toEqual(mockdata.output1);
+    expect(getTreeStructuredTags({ tagsList: mockdata.tagsList })).toEqual(mockdata.output1);
   });
   it("test for getTreeStructuredTags when tagsList is empty", () => {
-    expect(getTreeStructuredTags({tagsList: []})).toEqual([]);
+    expect(getTreeStructuredTags({ tagsList: [] })).toEqual([]);
   });
 
   it("test for getTreeStructuredTags when incentive attached is BADGES", () => {
-    expect(getTreeStructuredTags({tagsList: mockdata.badgesTags, offerDetails: mockdata.offer})).toEqual(mockdata.expectedOffer);
+    expect(getTreeStructuredTags({ tagsList: mockdata.badgesTags, offerDetails: mockdata.offer })).toEqual(mockdata.expectedOffer);
   });
   it("test for filterTags", () => {
     expect(filterTags(mockdata.tagsToFilter, mockdata.tagsList)).toEqual([mockdata.tagsList[1]]);
@@ -22,7 +32,7 @@ describe("getTreeStructuredTags test", () => {
     expect(filterTags([], [])).toEqual([]);
   });
   it("test for getTreeStructuredTags when incentive attached is offer", () => {
-    expect(getTreeStructuredTags({tagsList: mockdata.OfferTag, offerDetails: [{id: '12', couponName: 'mac'}]})).toEqual(mockdata.offerOutput);
+    expect(getTreeStructuredTags({ tagsList: mockdata.OfferTag, offerDetails: [{ id: '12', couponName: 'mac' }] })).toEqual(mockdata.offerOutput);
   });
 });
 
@@ -221,3 +231,43 @@ describe('iframeAdjustWidth', () => {
     expect(iframePreviewAdjustWidth(data)).toBe("<html><head></head><body>[object Object]</body></html>");
   });
 });
+
+describe('getDecodedFileName function', () => {
+  it('Returns an empty string when templateName is undefined', () => {
+    expect(getDecodedFileName()).toEqual('');
+  });
+
+  it('Returns the decoded filename from encoded filename', () => {
+    expect(getDecodedFileName('%24Test.jpeg')).toEqual('$Test.jpeg');
+    expect(getDecodedFileName('cap%24.logo.%23.jpg')).toEqual('cap$.logo.#.jpg');
+    expect(getDecodedFileName("%24L_i%40n%26e__%60AL%60L%2BI'ma_g__e%2Bco_pyAI____Copy____Copy_wek1SeS0.jpg")).toEqual("$L_i@n&e__`AL`L+I'ma_g__e+co_pyAI____Copy____Copy_wek1SeS0.jpg");
+    expect(getDecodedFileName('test.jpeg')).toEqual('test.jpeg');
+  });
+
+  it('Returns the original filename when decoding fails due to URIError', () => {
+    const fileName = '@Test%ZZ.jpeg';
+    expect(getDecodedFileName(fileName)).toEqual(fileName);
+  });
+
+  it('Returns the original filename and notifies Bugsnag for other decoding errors', () => {
+    // Mocking Bugsnag methods for testing
+    const originalLeaveBreadcrumb = Bugsnag.leaveBreadcrumb;
+    const originalNotify = Bugsnag.notify;
+    Bugsnag.leaveBreadcrumb = jest.fn();
+    Bugsnag.notify = jest.fn((error, callback) => {
+      const event = {};
+      callback(event);
+      expect(event.severity).toEqual("error");
+    });
+    const fileName = '@Test%20ZZ.jpg';
+    const error = new Error('Some other decoding error');
+    // Mocking decodeURIComponent to throw the error
+    global.decodeURIComponent = jest.fn(() => { throw error; });
+
+    expect(getDecodedFileName(fileName)).toEqual(fileName);
+    expect(Bugsnag.notify).toHaveBeenCalled();
+    // Restoring original Bugsnag methods
+    Bugsnag.leaveBreadcrumb = originalLeaveBreadcrumb;
+    Bugsnag.notify = originalNotify;
+  });
+});

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, getDecodedFileName} from '../../utils/common';
 import { WHATSAPP } from './constants';
 import './index.scss';
 
@@ -265,7 +265,7 @@ function CapVideoUpload(props) {
           {showVideoNameAndDuration &&
             <div className="video-info">
               <CapHeading type="h6">
-                {videoName}
+                {getDecodedFileName(videoName)}
               </CapHeading>
               <CapHeading type="h6">
                 {videoDuration}

package/v2Containers/Assets/Gallery/index.js

@@ -307,6 +307,7 @@ 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) => {
+      template.name = commonUtil.getDecodedFileName(template?.name);
       const templateData =
         {
           key: `${currentChannel}-card-${template.name}`,

package/v2Containers/Email/index.js

@@ -25,6 +25,7 @@ import messages from './messages';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
+import { getDecodedFileName } from '../../utils/common';
 
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
@@ -2448,6 +2449,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   getTemplateDataForGrid = ({templates, handlers, isLoading, loadingTip}) => {
     const currentChannel = 'gallery';
     const cardDataList = templates.length ? _.map(templates, (template) => {
+      template.name = getDecodedFileName(template?.name);
       const templateData =
         {
           key: `${currentChannel}-card-${template.name}`,

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

@@ -11,6 +11,7 @@ import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapError from '@capillarytech/cap-ui-library/CapError';
 import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
 import { isUrl } from '../Wrapper/utils';
+import { getDecodedFileName } from '../../../../utils/common';
 import LineDrawer from '../Drawer';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, CAP_SPACE_24, CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import style from './style';
@@ -414,7 +415,7 @@ export const LineVideo = ({
           </video>
           <div style={{ marginLeft: CAP_SPACE_24 }}>
             <CapHeading type="h6">
-              {videoName}
+              {getDecodedFileName(videoName)}
             </CapHeading>
             <CapHeading type="h6">
               {videoDuration}

package/v2Containers/Whatsapp/utils.js

@@ -23,6 +23,7 @@ import {
 import './styles.scss';
 import pdfIcon from "../../assets/pdfIcon.svg";
 import messages from './messages';
+import { getDecodedFileName } from '../../utils/common';
 
 export function bytesConversion(x) {
   // the function accepts bytes and convert in appropriate size following the,
@@ -47,7 +48,7 @@ export const getWhatsappDocPreview = (whatsappDocParams) => {
         <CapImage src={pdfIcon} />
         <div className="pdf-info">
           <div className="pdf-name-div">
-            <CapLabel type="label9" className="pdf-name">{whatsappDocName}</CapLabel>
+            <CapLabel type="label9" className="pdf-name">{getDecodedFileName(whatsappDocName)}</CapLabel>
           </div>
           <CapLabel className="pdf-info-sec">
             {whatsappDocPages} {whatsappDocPages > 1 ? <FormattedMessage {...messages.pages} /> : <FormattedMessage {...messages.page} />}{` · ${bytesConversion(whatsappDocParams?.whatsappDocSize)} · `}