@capillarytech/creatives-library 8.0.69-alpha.1 → 8.0.69-alpha.4

package/package.json

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

package/v2Components/CapImageUpload/index.js

@@ -96,7 +96,7 @@ function CapImageUpload(props) {
       const fileParams = {
         width: img.width,
         height: img.height,
-        error: file && (file.size / (1e+6) > 3), // checking error based on file size
+        error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
       };
       submitAction({file, type: 'image', fileParams}, incorrectFile);
     };

package/v2Components/CapVideoUpload/messages.js

@@ -37,7 +37,7 @@ export default defineMessages({
   },
   videoIncorrectSize: {
     id: `${scope}.videoIncorrectSize`,
-    defaultMessage: 'This file format/size is not supported.',
+    defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
   },
   whatsappErrorMessage: {
     id: `${scope}.whatsappErrorMessage`,

package/v2Components/FormBuilder/index.js

@@ -2350,7 +2350,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       const fileParams = {
         width: this.width || img.width,
         height: this.height || img.height,
-        error: file && (file.size / (1e+6) > 3),
+        error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
       };
       this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
     };

package/v2Containers/Assets/Gallery/constants.js

@@ -21,3 +21,5 @@ export const DELETE_ASSET_FAILURE = 'app/Gallery/DELETE_ASSET_FAILURE';
 export const GET_USER_LIST_REQUEST = "app/Gallery/GET_USER_LIST_REQUEST";
 export const GET_USER_LIST_SUCCESS = "app/Gallery/GET_USER_LIST_SUCCESS";
 export const GET_USER_LIST_FAILURE = "app/Gallery/GET_USER_LIST_FAILURE";
+
+export const GALLERY_ALLOWED_EXTENSION = /(\.bmp|\.jpeg|\.png|\.gif|\.avif|\.jpg)$/i;

package/v2Containers/Assets/Gallery/index.js

@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapHeading, CapHeader, CapInput, CapButton, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
+import { CapHeading, CapHeader, CapInput, CapButton, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration, CapNotification,} from '@capillarytech/cap-ui-library';
 import { Popover } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';
@@ -30,7 +30,7 @@ import injectSaga from '../../../utils/injectSaga';
 import injectReducer from '../../../utils/injectReducer';
 import { v2GallerySagas } from './sagas';
 import v2GalleryReducer from './reducer';
-import { compose } from 'redux';
+import { GALLERY_ALLOWED_EXTENSION } from './constants';
 
 const {CapCustomCardList} = CapCustomCard;
 export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -238,6 +238,19 @@ 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 {size = '', name = ''} = files[file];
+        const fileSize = size / (1024 * 1024);
+        const allowedExtensions = GALLERY_ALLOWED_EXTENSION;
+        if (fileSize > 10 || !allowedExtensions?.test(name)) {
+          const { formatMessage } = this.props.intl;
+          const fileErrorMessage = {
+            key: "image-gallery-upload-error",
+            message: formatMessage(messages.invalidUploadFileError),
+            description: formatMessage(messages.invalidUploadFileErrorDesc3),
+          };
+          CapNotification.error(fileErrorMessage);
+          return;
+        }
         const img = new Image();
         const that = this;
         img.src = _URL.createObjectURL(files[file]);

package/v2Containers/Assets/Gallery/messages.js

@@ -106,4 +106,12 @@ export default defineMessages({
     id: `creatives.containersV2.Assets.Gallery.loadingGallery`,
     defaultMessage: 'Loading gallery...',
   },
+  invalidUploadFileError: {
+    id: `creatives.containersV2.Assets.Gallery.invalidUploadFileError`,
+    defaultMessage: `File cannot be uploaded.`,
+  },
+  invalidUploadFileErrorDesc3: {
+    id: `creatives.containersV2.Assets.Gallery.invalidUploadFileErrorDesc3`,
+    defaultMessage: `Please select another file with valid file size less than 10MB`,
+  },
 });

package/v2Containers/CreativesContainer/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Bugsnag from "@bugsnag/js";
 import {
   CapSlideBox,
   CapHeader,
@@ -139,21 +140,27 @@ export class Creatives extends React.Component {
       templateData.updatedByName = commonUtil.getUserNameById(userId, usersList);
       this.setState({ slidBoxContent: constants.PREVIEW, templateData });
     } else {
-      const {
-        name = "",
-        sourceAccountIdentifier = "",
-        configs: { token = "" } = {},
-      } = get(this.props, "Templates.selectedZaloAccount", {});
-      const { hostName = '' } = get(this.props, "Templates.senderDetails", {});
-      this.props.zaloActions.getTemplateInfoById({
-        username: name,
-        oa_id: sourceAccountIdentifier,
-        token,
-        host: hostName,
-        id: template?._id,
-        preview: true,
-        actionCallback: this.actionCallback,
-      });
+      if (get(template, 'versions.base.content.zalo.previewUrl')) {
+        commonUtil.handlePreviewInNewTab(
+          template.versions.base.content.zalo.previewUrl
+        );
+      } else {
+        const {
+          name = "",
+          sourceAccountIdentifier = "",
+          configs: { token = "" } = {},
+          hostName = ""
+        } = get(this.props, "Templates.selectedZaloAccount", {});
+        this.props.zaloActions.getTemplateInfoById({
+          username: name,
+          oa_id: sourceAccountIdentifier,
+          token,
+          host: hostName || this.props?.hostName || this.props.Templates?.senderDetails?.hostName,
+          id: template?._id,
+          preview: true,
+          actionCallback: this.actionCallback,
+        });
+      }
     }
   };
 

package/v2Containers/Email/index.js

@@ -1179,7 +1179,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const _URL = window.URL || window.webkitURL;
     const file = files[0];
     const fileSize = file && (file.size / ( 1024 * 1024 ));
-    if (fileSize > 5) {
+    if (fileSize > 10) {
       const message = this.props.intl.formatMessage(messages.uploadSizeError);
       CapNotification.error({key: 'uploadImageIssue', message});
       document.getElementById("fileName").value = "";

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

@@ -182,7 +182,7 @@ export const LineImage = ({
             const fileParams = {
                 width: img.width,
                 height: img.height,
-                error: file && (file.size / (1e+6) > 3),
+                error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
             };
             submitAction({file, type: 'image', fileParams}, incorrectFile);
         };

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

@@ -61,7 +61,7 @@ export default defineMessages({
   },
   "lineImageIncorrectSize": {
     id: `${scope}.lineImageIncorrectSize`,
-    defaultMessage: 'Please upload the image with correct type, size and dimension',
+    defaultMessage: 'Please upload the image with allowed file extension, size, dimension and aspect ratio',
   },
   "imageGallery": {
     id: `${scope}.imageGallery`,

package/v2Containers/Line/Container/ImageCarousel/messages.js

@@ -65,7 +65,7 @@ export default defineMessages({
   },
   "lineImageIncorrectSize": {
     id: `${scope}.lineImageIncorrectSize`,
-    defaultMessage: 'Please upload the image with correct type, size and dimension',
+    defaultMessage: 'Please upload the image with allowed file extension, size, dimension and aspect ratio',
   },
   "imageGallery": {
     id: `${scope}.imageGallery`,

package/v2Containers/Line/Container/ImageMap/messages.js

@@ -57,7 +57,7 @@ export default defineMessages({
   },
   "lineImageMapIncorrectSize": {
     id: `${scope}.lineImageMapIncorrectSize`,
-    defaultMessage: 'Please upload the image with correct type, size and dimension',
+    defaultMessage: 'Please upload the image with allowed file extension, size, dimension and aspect ratio',
   },
   "imageGallery": {
     id: `${scope}.imageGallery`,

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

@@ -65,7 +65,7 @@ export default defineMessages({
   },
   "lineVideoIncorrectSize": {
     id: `${scope}.lineVideoIncorrectSize`,
-    defaultMessage: 'This file format/size is not supported.',
+    defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
   },
   "imageGallery": {
     id: `${scope}.imageGallery`,

package/v2Containers/MobilePush/Create/messages.js

@@ -240,7 +240,7 @@ export default defineMessages({
   },
   "uploadImageSizeErrorDescription": {
     id: 'creatives.containersV2.MobilePush.Create.uploadImageSizeErrorDescription',
-    defaultMessage: 'File size cannot be more than 3mb',
+    defaultMessage: 'File size cannot be more than 5mb',
   },
   "validationError": {
     id: 'creatives.containersV2.MobilePush.Create.validationError',