@capillarytech/creatives-library 8.0.94 → 8.0.96

package/containers/Templates/constants.js

@@ -43,10 +43,3 @@ export const RESET_TEMPLATE = "app/containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/containers/Templates/RESET_TEMPLATE_DATA";
 export const RESET_UPLOAD_DATA = "app/containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
-
-
-export const TRUE = 'true';
-export const FALSE = 'false';
-export const EMAIL = 'email';
-export const TYPE_EMBEDDED = 'embedded';
-export const DEFAULT = 'default';

package/containers/Templates/index.js

@@ -57,7 +57,6 @@ import lineCreateReducer from '../Line/Create/reducer';
 import { ebillSaga } from '../Ebill/sagas';
 import { lineCreateSaga } from '../Line/Create/sagas';
 import { duplicateMPushSaga } from '../MobilePush/Create/sagas';
-import { DEFAULT, FALSE, TRUE, TYPE_EMBEDDED } from './constants';
 
 const MenuItem = Menu.Item;
 const Option = Select.Option;
@@ -915,49 +914,31 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   handleEdmDefaultTemplateSelection = (isSelected, id) => {
     if (isSelected) {
-    const template = _.find(this.props.Templates.cmsTemplates, (template) => {
-        return template?.versions && template?.versions?.base && template?.versions?.base?.drag_drop_id === id;
-      });
-      const {type,module = DEFAULT} = this.props?.location?.query;
-    const isLanguageSupport = this.props?.location?.query?.isLanguageSupport === TRUE;
-    const isEdmSupport = this.props?.location?.query?.isEdmSupport !== FALSE;
+      const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
+      const type = this.props.location.query.type
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const isLanguageSupport = this.props.location.query.isLanguageSupport ? this.props.location.query.isLanguageSupport : true;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
       let getQuery = '';
-    
-      if (template) {
-    this.props.actions.setEdmTemplate({
-      ...template,
-      isEdmSupport,
-      isLanguageSupport,
-          projectId: template?.versions?.base?.drag_drop_id,
-        });
-
-        if (this.state.channel && this.state.channel.toLowerCase() === EMAIL) {
-          getQuery = (type === TYPE_EMBEDDED) ? {
-            type: TYPE_EMBEDDED, 
-      module,
-      isLanguageSupport: isLanguageSupport ? 1 : 0,
-      isEdmSupport: isEdmSupport ? 1 : 0,
-            projectId: template?.versions?.base?.drag_drop_id,
-    } : {
-      module,
-            isLanguageSupport: isLanguageSupport ? 1 : 0,
-            isEdmSupport: isEdmSupport ? 1 : 0,
-            projectId: template?.versions?.base?.drag_drop_id,
-    };
-        } else {
-          getQuery = (type === TYPE_EMBEDDED) ? {type: TYPE_EMBEDDED, module} : {module};
-        }
+      
+      this.props.actions.setEdmTemplate(data);
+      if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
+      } else {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
+      }
+      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+        this.props.createNew();
+        return;
+      }
 
-    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
-      this.props.createNew();
-      return;
-    }
+      const queryParams = commonUtil.createQueryString(getQuery);
+      // this.props.router.push(`${pathName}${queryParams}`);
 
-    this.props.router.push({
-      pathname: `/${this.state.channel.toLowerCase()}/create`,
-          search: commonUtil.createQueryString(getQuery),
-        });
-      }
+      this.props.router.push({
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        search: getQuery,
+      });
     }
   };
 
@@ -1147,7 +1128,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         content = <img src={imgSrc || ''} alt={this.props.intl.formatMessage(messages.previewGenerateText)} width="100%" height="100%"/>;
-
+        
         temp.content = (
           <div
             className="sms-template-content">
@@ -1155,7 +1136,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {content}
             </div>
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
-            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template.versions.base.drag_drop_id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
+            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template._id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {

package/package.json

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

package/services/api.js

@@ -524,7 +524,13 @@ export const checkBulkDuplicates = (data) => {
 export const createWhatsappTemplate = ({payload, gupshupMediaFile }) => {
   const data = new FormData();
   data.append('payload', JSON.stringify(payload));
-  data.append('gupshupMediaFile', gupshupMediaFile);
+  if (Array.isArray(gupshupMediaFile) && gupshupMediaFile?.length) {
+    gupshupMediaFile.forEach((file, index) => {
+      data.append(`gupshupMediaFile_${index}`, file);
+    });
+  } else {
+    data.append('gupshupMediaFile', gupshupMediaFile);
+  }
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', data, true));
 };

package/services/tests/api.test.js

@@ -86,7 +86,11 @@ describe('uploadFile -- whatsapp image upload', () => {
 describe('createWhatsappTemplate -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(
-      createWhatsappTemplate(sampleFile, mockData.createWhatsappPayload),
+      createWhatsappTemplate({gupshupMediaFile: [sampleFile], payload: mockData.createWhatsappPayload}),
+    ).toEqual(Promise.resolve()));
+  it('Should return correct response when single file is present', () =>
+    expect(
+      createWhatsappTemplate({gupshupMediaFile: sampleFile, payload: mockData.createWhatsappPayload}),
     ).toEqual(Promise.resolve()));
 });
 

package/v2Components/CapImageUpload/index.js

@@ -44,6 +44,7 @@ function CapImageUpload(props) {
     imageData,
     channel,
     channelSpecificStyle,
+    showReUploadButton = true,
   } = props;
   const {
     formatMessage,
@@ -224,16 +225,18 @@ function CapImageUpload(props) {
         </>
       );
     }
-    return (
-      <CapButton
-        className="dragger-button re-upload"
-        type="flat"
-        onClick={onReUpload}
-        style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
-       >
-        <FormattedMessage {...messages.imageReUpload} />
-      </CapButton>
-    );
+    if (showReUploadButton) {
+      return (
+        <CapButton
+          className="dragger-button re-upload"
+          type="flat"
+          onClick={onReUpload}
+          style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
+        >
+          <FormattedMessage {...messages.imageReUpload} />
+        </CapButton>
+      );
+    }
   }, [isImageError, imageSrc]);
 
   return (

package/v2Components/CapVideoUpload/index.js

@@ -39,6 +39,7 @@ function CapVideoUpload(props) {
     errorMessage,
     showVideoNameAndDuration = true,
     formClassName = 'video-form',
+    showReUploadButton = true,
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -246,15 +247,17 @@ function CapVideoUpload(props) {
     const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
-        <div style={{ overflow: 'hidden' }}>
-          <CapButton
-            className="dragger-button video-reupload"
-            type="flat"
-            onClick={onReUpload}
-          >
-            <FormattedMessage {...messages.imageReUpload} />
-          </CapButton>
-        </div>
+        {showReUploadButton && (
+          <div style={{ overflow: 'hidden' }}>
+            <CapButton
+              className="dragger-button video-reupload"
+              type="flat"
+              onClick={onReUpload}
+            >
+              <FormattedMessage {...messages.imageReUpload} />
+            </CapButton>
+          </div>
+        )}
         <div className={showVideoNameAndDuration ? 'video-panel' : 'video-panel-wp'}>
           <video
             width="230"

package/v2Components/CapWhatsappCTA/messages.js

@@ -104,4 +104,8 @@ export default defineMessages({
     id: `${prefix}.whatsappCtaTagListRevert`,
     defaultMessage: 'Reset website URL label to default value',
   },
+  url: {
+    id: `${prefix}.url`,
+    defaultMessage: 'URL',
+  },
 });

package/v2Components/CapWhatsappCarouselButton/constant.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import capWhatsappCTAMsg from '../CapWhatsappCTA/messages';
+import capWhatsappMsg from '../../v2Containers/Whatsapp/messages';
+
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const URL = 'URL';
+export const QUICK_REPLY = 'QUICK_REPLY';
+export const STATIC_URL = 'STATIC_URL';
+export const BTN_MAX_LENGTH = 20;
+export const PHONE_NUMBER_MAX_LENGTH = 15;
+export const URL_MAX_LENGTH = 2000;
+export const carouselButtonOptions = (carouselIndex) => {
+  return [
+    {
+      value: PHONE_NUMBER,
+      label: <FormattedMessage {...capWhatsappCTAMsg.ctaPhoneNo} />,
+      disabled: carouselIndex > 0,
+    },
+    {
+      value: URL,
+      label: <FormattedMessage {...capWhatsappCTAMsg.url} />,
+      disabled: carouselIndex > 0,
+    },
+    {
+      value: QUICK_REPLY,
+      label: <FormattedMessage {...capWhatsappMsg.btnTypeQuickReply} />,
+      disabled: carouselIndex > 0,
+    },
+  ];
+};
+
+export const INITIAL_CAROUSEL_PHONE_NUMBER_DATA = {
+  buttonType: PHONE_NUMBER,
+  text: '',
+  phone_number: '',
+  isSaved: false,
+  textError: "",
+};
+
+export const INITIAL_CAROUSEL_URL_DATA = {
+  buttonType: URL,
+  text: '',
+  urlType: STATIC_URL,
+  url: '',
+  isSaved: false,
+  textError: "",
+  urlError: "",
+};
+
+export const INITIAL_CAROUSEL_QUICK_REPLY_DATA = {
+  text: "",
+  buttonType: QUICK_REPLY,
+  isSaved: false,
+  textError: "",
+};