@capillarytech/creatives-library 8.0.54 → 8.0.56

package/components/FormBuilder/index.js

@@ -26,6 +26,7 @@ import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 import globalMessages from '../../v2Containers/Cap/messages';
 import messages from './messages';
+import { createQueryString } from '../../utils/common';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 
@@ -2001,8 +2002,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/${(this.props.schema.channel || '').toLowerCase()}/`,
-        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
-      });
+        search: createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport})})
     } else if (id === "email-language-delete-modal") {
       this.deleteLanguage();
       this.props.handleCancelModal();

package/components/Sidebar/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 // import styled from 'styled-components';
-import { Accordion, Icon, Input, Button } from 'semantic-ui-react';
+import { Icon, Input, Button, Accordion, AccordionTitle, AccordionContent } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
@@ -41,16 +41,20 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
     return (<Accordion key={keyValue}>{content}</Accordion>);
   }
 
-  getAccordionTitle(title) {
-    return (<Accordion.Title>
+  getAccordionTitle(title,index) {
+    return (
+    <AccordionTitle
+      index={index}
+      active={this.state.activeIndex == index}
+      onClick={this.handleTitleClick}>
       <div className="header item">
         <Icon name="dropdown" /> {title}
       </div>
-    </Accordion.Title>);
+    </AccordionTitle>);
   }
 
-  getAccordionContent(links, keyValue) {
-    return (<Accordion.Content key={keyValue}>{links}</Accordion.Content>);
+  getAccordionContent(links, index, keyValue) {
+    return (<AccordionContent key={keyValue} active={this.state.activeIndex == index}>{links}</AccordionContent>);
   }
 
   getLinkElement(to, text = '', value, isExternal) {
@@ -89,7 +93,10 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
         selectedItem = activeRouteName.toLowerCase();
       }
     });
-    this.setState({ activeIndex: selectedIndex, activeItem: selectedItem });
+    this.setState({ 
+      activeIndex: typeof selectedIndex === 'object' ? selectedIndex?.index : selectedIndex, 
+      activeItem: selectedItem 
+    });
   }
 
   toggleSideNav(e) {
@@ -104,13 +111,13 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
     });
   }
 
-  createAccordianElements(title, contentItems) {
+  createAccordianElements(title, contentItems, index) {
     const accordian = [];
-    accordian.push(this.getAccordionTitle(title));
+    accordian.push(this.getAccordionTitle(title, index));
     const contentLink = contentItems.map((key) =>
       this.getLinkElement(key.link, key.text, key.value, key.external),
     );
-    accordian.push(this.getAccordionContent(contentLink));
+    accordian.push(this.getAccordionContent(contentLink, index));
     return accordian;
   }
 
@@ -122,14 +129,14 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
       if (isCategory) { // attach nested Accordion
         const accordian = [];
         const nestedAcordian = [];
-        accordian.push(this.getAccordionTitle(headerTitle));
+        accordian.push(this.getAccordionTitle(headerTitle, index));
         const contentAccordian = this.getAccordian(this.createNavigationElement(key.categories), `nestedAccordian-${index}`);
         nestedAcordian.push(contentAccordian);
-        const content = this.getAccordionContent(nestedAcordian, `content-${index}`);
+        const content = this.getAccordionContent(nestedAcordian, index, `content-${index}`);
         accordian.push(content);
         navArray.push(accordian);
       } else { // attach items to existing accordian
-        const accordianElem = this.createAccordianElements(headerTitle, key.items);
+        const accordianElem = this.createAccordianElements(headerTitle, key.items, index);
         navArray.push(accordianElem);
       }
     });
@@ -159,7 +166,7 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
   }
 
   handleTitleClick(e, i) {
-    this.setState({ activeIndex: this.state.activeIndex === i ? -1 : i });
+    this.setState({ activeIndex: this.state.activeIndex === i ? -1 : typeof i === 'object' ? i?.index : i });
   }
 
   handleSearch(e) {
@@ -172,7 +179,6 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
     const push = !visible ? 'push' : '';
     const collapse = !visible ? 'collapse' : '';
     const toggle = visible ? 'hide' : '';
-
     // const types = [{ text: 'Creatives', value: 'Creatives' }];
     return (
       <div className="sidebar-container">
@@ -186,7 +192,7 @@ class Sidebar extends React.Component { // eslint-disable-line react/prefer-stat
             <span className="menu-title"><FormattedMessage {...messages.menuTitle} /> </span>
             {this.props.actionComponents}
           </div>
-          <Accordion className="sidebar-accordian" activeIndex={this.state.activeIndex} onTitleClick={this.handleTitleClick}>
+          <Accordion className="sidebar-accordian" activeIndex={this.state.activeIndex}>
             {this.props.menuData && this.createNavigationElement(this.props.menuData)}
           </Accordion>
         </div>

package/containers/Cap/index.js

@@ -215,7 +215,12 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   render() {
     const userData = this.props.Global;
-    const { type } = new URLSearchParams(this.props.location.search) || {};
+    const { pathname, search, hash } = this.props.location;
+    const fullURL = `${window.location.origin}${pathname}${search}${hash}`;
+    const url = new URL(fullURL);
+    const params = new URLSearchParams(url.search);
+    // Extract parameters
+    const type = params.get("type");
     // const changeOrg = this.props.actions.changeOrg;
     // const logout = this.props.actions.logout;
     const proxyOrgList = [];

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

@@ -1237,6 +1237,7 @@ exports[`<Cap /> should render its children 1`] = `
         "creatives.containersV2.EmailWrapper.invalidUploadFileError": "File cannot be uploaded.",
         "creatives.containersV2.EmailWrapper.invalidUploadFileError2": "File upload failed",
         "creatives.containersV2.EmailWrapper.invalidUploadFileErrorDesc2": "Please select another file with valid file contents",
+        "creatives.containersV2.EmailWrapper.invalidUploadFileErrorDesc3": "Please select another file with valid file size less than 5MB",
         "creatives.containersV2.EmailWrapper.upload": "Upload",
         "creatives.containersV2.EmailWrapper.useEditor": "Create using editor",
         "creatives.containersV2.EmailWrapper.useEditorDesc": "Create using in-built template",

package/containers/Ebill/index.js

@@ -29,6 +29,7 @@ import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 import reducer from './reducer';
 import { ebillSaga } from './sagas';
+import { createQueryString } from '../../utils/common';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -624,7 +625,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/ebill`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 
@@ -768,7 +769,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     this.props.router.push({
       pathname: `/ebill/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
     });
   };
 

package/containers/Email/index.js

@@ -37,6 +37,7 @@ import injectReducer from '../../utils/injectReducer';
 import reducer from './reducer';
 import { emailSaga } from './sagas';
 import { templateSaga } from '../Templates/sagas';
+import { createQueryString } from '../../utils/common';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -961,7 +962,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
         this.props.router.push({
           pathname: `/email`,
-          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
+          search :  createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport})
         });
       }
       if (nextProps.Email.createTemplateError && !_.isEqual(nextProps.Email.createTemplateError, this.props.Email.createTemplateError)) {
@@ -2441,7 +2442,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isEdmSupport = this.props.location.query.isEdmSupport !== false || false;
     this.props.router.push({
       pathname: `/email/`,
-      query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport})
     });
   }
 

package/containers/Line/Create/index.js

@@ -21,6 +21,7 @@ import injectSaga from '../../../utils/injectSaga';
 import injectReducer from '../../../utils/injectReducer';
 import reducer from './reducer';
 import { lineCreateSaga } from './sagas';
+import { createQueryString } from '../../../utils/common';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -174,7 +175,7 @@ export class Line extends Component {
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/line/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 
@@ -202,7 +203,7 @@ export class Line extends Component {
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/line/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 
@@ -417,7 +418,7 @@ export class Line extends Component {
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     this.props.router.push({
       pathname: `/LINE/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
     });
   };
 

package/containers/Line/Edit/index.js

@@ -24,6 +24,7 @@ import * as templatesActions from "../../Templates/actions";
 import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_lineEdit.scss';
+import { createQueryString } from '../../../utils/common';
 const BreadcrumbItem = Breadcrumb.Item;
 
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -91,7 +92,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/line/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     } else {
       const query = {
@@ -190,7 +191,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/line/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 
@@ -891,7 +892,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     this.props.router.push({
       pathname: `/line/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
     });
   };
 

package/containers/MobilePush/Create/index.js

@@ -27,6 +27,7 @@ import injectSaga from '../../../utils/injectSaga';
 import reducer from './reducer';
 import { createMPushSaga } from './sagas';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
+import { createQueryString } from '../../../utils/common';
 
 const BreadcrumbItem = Breadcrumb.Item;
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -182,7 +183,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/MOBILEPUSH/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
     this.props.globalActions.removeEntitySchema();
@@ -226,7 +227,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/mobilepush/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
     if (nextProps.params.mode) {
@@ -775,7 +776,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     this.props.router.push({
       pathname: `/MOBILEPUSH/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
     });
   };
 

package/containers/MobilePush/Edit/index.js

@@ -31,6 +31,7 @@ import reducer from './reducer';
 import { editMPushSaga } from './sagas';
 import { templateSaga } from '../../Templates/sagas';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
+import { createQueryString } from '../../../utils/common';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -175,7 +176,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/mobilepush/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     } else {
       const query = {
@@ -278,7 +279,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/mobilepush/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 
@@ -1864,7 +1865,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     this.props.router.push({
       pathname: `/mobilepush/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
     });
   };
 

package/containers/Sms/Create/index.js

@@ -27,6 +27,7 @@ import injectSaga from '../../../utils/injectSaga';
 import injectReducer from '../../../utils/injectReducer';
 import reducer from './reducer';
 import { createSmsSaga } from './sagas';
+import { createQueryString } from '../../../utils/common';
 
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -142,7 +143,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/sms/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 
@@ -357,7 +358,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     this.props.router.push({
       pathname: `/sms/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
     });
   }
 

package/containers/Sms/Edit/index.js

@@ -28,6 +28,7 @@ import injectSaga from '../../../utils/injectSaga';
 import injectReducer from '../../../utils/injectReducer';
 import reducer from './reducer';
 import { editSmsSaga } from './sagas';
+import { createQueryString } from '../../../utils/common';
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -164,7 +165,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/sms/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
 

package/containers/Templates/index.js

@@ -330,7 +330,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       this.props.router.push({
         pathname: `/${(nextProps.route.name || '').toLowerCase()}/create`,
-        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module}),
       });
     }
 
@@ -478,34 +478,34 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
       this.props.router.push({
         pathname: `/email/view`,
-        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {})
       });
     } else if (this.state.channel.toLowerCase() === 'sms') {
       this.props.router.push({
         pathname: `/sms/view`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {})
       });
     } else if (this.state.channel.toLowerCase() === 'mobilepush') {
       this.props.router.push({
         pathname: `/mobilepush/edit/${e.template_id}`,
-        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {})
       });
     } else if (this.state.channel.toLowerCase() === 'wechat') {
       if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
         this.props.router.push({
           pathname: `/wechat/richmedia/edit/${e.template_id}`,
-          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+          search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {})
         });
       } else {
         this.props.router.push({
           pathname: `/wechat/edit/${e.template_id}`,
-          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+          search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {})
         });
       }
     } else if (this.state.channel.toLowerCase() === 'line') {
       this.props.router.push({
         pathname: `/line/view/${e.msg_type}/`,
-        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {})
       });
     }
     this.setState({loading: true});
@@ -534,12 +534,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (item === 'textTemplate') {
       this.props.router.push({
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/text`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module},)
       });
     } else if (item === 'imageTemplate') {
       this.props.router.push({
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
   }
@@ -572,7 +572,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         this.props.router.push({
           pathname: `/${this.props.route.name.toLowerCase()}/create`,
-          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+          search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module}),
         });
       };
       reader.readAsText(files[0]);
@@ -748,6 +748,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   createTemplate(ev) {
+
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     const channel = this.state.channel.toLowerCase();
@@ -757,12 +758,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       this.props.router.push({
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module}),
       });
     } else {
       this.props.router.push({
         pathname: `/${this.state.channel.toLowerCase()}/create`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module}),
       });
     }
   }
@@ -776,7 +777,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           type = this.props.location.query.type;
           this.props.router.push({
             pathname: `/wechat/create`,
-            query: type === 'embedded' ? {type: 'embedded'} : {},
+            search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded'} : {}),
           });
         } else if (ev && ev.key && ev.key.toLowerCase() === "richmedia_template") {
           type = this.props.location.query.type;
@@ -785,10 +786,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const message = getMessageObject('error', errorMessage, true);
             this.props.globalActions.addMessageToQueue(message);
           } else {
-            this.props.router.push({
-              pathname: `/wechat/richmedia/create`,
-              query: type === 'embedded' ? {type: 'embedded'} : {},
-            });
+            this.props.router.push(`/wechat/richmedia/create?type=embedded`);
           }
         }
         break;
@@ -933,9 +931,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         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`,
-        query: getQuery,
+        search: getQuery,
       });
     }
   };
@@ -981,9 +983,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'ebill') {
         pathName = `/ebill/edit/${id}`;
       }
+      //getQuery
       this.props.router.push({
         pathname: pathName,
-        query: getQuery,
+        search: commonUtil.createQueryString(getQuery),
       });
     }
   }

package/containers/WeChat/MapTemplates/index.js

@@ -33,6 +33,7 @@ import injectReducer from '../../../utils/injectReducer';
 import reducer from './reducer';
 import { mapTemplatesSaga } from './sagas';
 import { templateSaga } from '../../Templates/sagas';
+import { createQueryString } from '../../../utils/common';
 
 // const Option = Select.Option;
 const URL = "URL";
@@ -175,7 +176,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/wechat`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
   }
@@ -274,7 +275,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         const type = this.props.location.query.type;
         this.props.router.push({
           pathname: `/wechat`,
-          query: type === 'embedded' ? {type: 'embedded', module} : {module},
+          search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
         });
       }
       if (nextProps.WeChat.createTemplateError && !_.isEqual(nextProps.WeChat.createTemplateError, this.props.WeChat.createTemplateError)) {
@@ -1260,7 +1261,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     const type = this.props.location.query.type;
     this.props.router.push({
       pathname: `/wechat`,
-      query: type === 'embedded' ? {type: 'embedded'} : {},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded'} : {})
     });
   }
 

package/containers/WeChat/RichmediaTemplates/Create/index.js

@@ -30,6 +30,7 @@ import injectReducer from '../../../../utils/injectReducer';
 import reducer from './reducer';
 import { richMediaTemplatesSaga } from './sagas';
 import { UserIsAuthenticated } from '../../../../utils/authWrapper';
+import { createQueryString } from '../../../../utils/common';
 
 const MenuItem = Menu.Item;
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -142,8 +143,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/wechat`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})      });
     }
   }
   componentDidMount = () => {
@@ -452,7 +452,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const type = this.props.location.query.type;
     this.props.router.push({
       pathname: `/wechat`,
-      query: type === 'embedded' ? {type: 'embedded'} : {},
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded'} : {})
     });
   }
   closeSlideBox = () => {

package/containers/WeChat/RichmediaTemplates/Edit/index.js

@@ -20,6 +20,7 @@ import reducer from './reducer';
 import createReducer from '../Create/reducer';
 import { richMediaTemplatesEditSaga } from './sagas';
 import { richMediaTemplatesSaga } from '../Create/sagas';
+import { createQueryString } from '../../../../utils/common';
 
 export class Edit extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -36,7 +37,7 @@ export class Edit extends React.PureComponent { // eslint-disable-line react/pre
       const type = this.props.location.query.type;
       this.props.router.push({
         pathname: `/wechat`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
       });
     }
   }

package/package.json

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

package/translations/en.json

@@ -1195,6 +1195,7 @@
   "creatives.containersV2.EmailWrapper.invalidUploadFileError": "File cannot be uploaded.",
   "creatives.containersV2.EmailWrapper.invalidUploadFileError2": "File upload failed",
   "creatives.containersV2.EmailWrapper.invalidUploadFileErrorDesc2": "Please select another file with valid file contents",
+  "creatives.containersV2.EmailWrapper.invalidUploadFileErrorDesc3": "Please select another file with valid file size less than 5MB",
   "creatives.containersV2.EmailWrapper.upload": "Upload",
   "creatives.containersV2.EmailWrapper.useEditor": "Create using editor",
   "creatives.containersV2.EmailWrapper.useEditorDesc": "Create using in-built template",