@capillarytech/creatives-library 6.13.4 → 6.13.5

package/app.js

@@ -25,6 +25,7 @@ import initialState from './initialState';
 import './styles/vendor/semantic/dist/semantic.min.css';
 import './styles/main.scss';
 import pathConfig from './config/path';
+import ignoredErrorMessages from './utils/ignoredErrorMessages';
 // addLocaleData([...en, ...es, ...fr, ...it, ...zh]);
 
 const browserHistory = useRouterHistory(createHistory)({
@@ -38,10 +39,12 @@ const history = syncHistoryWithStore(browserHistory, store, {
 });
 
 const bugSnagErrorCallback = (event) => {
-  const { app: { releaseStage } = {} } = event || {};
+  const { app: { releaseStage } = {}, originalError } = event || {};
+  const errorMessage = originalError && originalError.message;
   if (
     (releaseStage || '').includes('nightly') ||
-    process.env.NODE_ENV !== 'production'
+    process.env.NODE_ENV !== 'production' ||
+    ignoredErrorMessages.includes(errorMessage)
   ) {
     return false;
   }

package/components/FormBuilder/index.js

@@ -204,7 +204,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
     if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
       if (nextProps.isNewVersionFlow) {
-        const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
+        const nextPropsFormData = nextProps.formData[nextProps.currentTab - 1];
+        const nextPropsTabKey = nextPropsFormData && nextPropsFormData.tabKey;
+        const tabKey = (this.state.tabKey !== nextPropsTabKey) ? nextPropsTabKey: this.state.tabKey;
 
         this.setState({tabKey});
       }
@@ -1841,7 +1843,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             formData.base.tabKey = `${data}`;
           }
 
-          that.setState({formData, currentLangTab: formData[(this.state.currentTab - 1)].activeTab, tabKey: formData[(this.state.currentTab - 1)][formData[(this.state.currentTab - 1)].activeTab].tabKey}, () => {
+          const formDataActiveKey = formData[(this.state.currentTab - 1)][formData[(this.state.currentTab - 1)].activeTab];
+          const formDataTabKey = formDataActiveKey && formDataActiveKey.tabKey;
+          that.setState({formData, currentLangTab: formData[(this.state.currentTab - 1)].activeTab, tabKey: formDataTabKey}, () => {
             val.injectedEvents[event].call(that.props.parent, this.state.currentTab, formData);
           });
         } else {

package/containers/Ebill/index.js

@@ -908,6 +908,9 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   injectEvents(schema) {
     console.log('now injecting events', schema);
     const temp = schema;
+    if (!temp.standalone) {
+      temp.standalone = {};
+    }
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
       let tempContainer = container;

package/containers/Email/index.js

@@ -1155,8 +1155,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const msgString = JSON.stringify(msg);
       const langId = formData[this.state.currentTab - 1].activeTab;
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
-      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      win.postMessage(msgString, '*');
+      const elementToSelect = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+      if (elementToSelect) {
+        const win = elementToSelect.contentWindow;
+        win.postMessage(msgString, '*');
+      }
     } else {
       console.log('tag', this.state, this.state.editorInstanse);
       if (this.state.editorInstanse) {
@@ -1415,7 +1418,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   getMappedEvent = (id, event) => {
     console.log('Map ', this.map, id, event);
-    return this.map[id][event];
+    const mapIdObject = this.map[id];
+    return mapIdObject && mapIdObject[event] ? mapIdObject[event] : () => {};
   }
 
   getCurrentWindow = (e) => {
@@ -1511,8 +1515,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         _.forEach(data.selectedLanguages, (language, langIndex) => {
           if (data[language].is_drag_drop) {
             console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
-            const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-            win.postMessage("saveProject", '*');
+            const elementToSelect = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+            if (elementToSelect) {
+              const win = elementToSelect.contentWindow;
+              win.postMessage("saveProject", '*');
+            }
           }
         });
       });
@@ -2501,7 +2508,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           const tempEl = containerInputFieldCol;
           if (containerInputFieldCol.id === "tab-header") {
             const baseLanguage = this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details && this.props.Global.currentOrgDetails.basic_details.base_language && this.props.Global.currentOrgDetails.basic_details.base_language !== "" ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en';
-            const supportedLanguages = this.props.Global.currentOrgDetails.basic_details.supported_languages;
+            const supportedLanguages = this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details && this.props.Global.currentOrgDetails.basic_details.supported_languages;
             if (!supportedLanguages) {
               tempEl.value = baseLanguage || 'English';
               return;
@@ -2655,12 +2662,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (languageIndex === -1) {
           languageIndex = 0;
         }
+        const dataBase = data.base;
         const tempData = {
-          "is_drag_drop": data.base.is_drag_drop,
+          "is_drag_drop": dataBase && dataBase.is_drag_drop,
           "lang_id": this.supportedLanguages[languageIndex].lang_id,
           "iso_code": this.supportedLanguages[languageIndex].iso_code,
           "language": this.supportedLanguages[languageIndex].language,
-          "template-content": !data.base.is_drag_drop && data.base.is_drag_drop !== 1 ? data.base.html_content : "",
+          "template-content": dataBase && !dataBase.is_drag_drop && dataBase.is_drag_drop !== 1 ? dataBase.html_content : "",
         };
         formData[0].base = true;
         formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);

package/containers/Sms/Create/index.js

@@ -297,7 +297,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         onTabChange: this.onTabChange,
       },
     };
-    return map[id][event];
+    const mappedIdObject = map[id];
+    return mappedIdObject && mappedIdObject[event] ? mappedIdObject[event] : () => {};
   }
 
   setFormValidity(isFormValid) {

package/containers/Templates/index.js

@@ -721,9 +721,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     switch (type) {
-      case "getFormData":
-        this.getFormData(e);
-        break;
       case "startTemplateCreation":
         console.log('Starting to create template');
         //this.getFormData(e);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.13.4",
+  "version": "6.13.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "1.3.2",
+    "@capillarytech/cap-ui-utils": "1.3.4",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/services/api.js

@@ -359,7 +359,6 @@ export const createLineTemplate = ({template}) => {
 };
 
 export const createViberTemplate = ({template}) => {
-  console.log('VIBER : in api.js', template);
   const url = `${API_ENDPOINT}/templates/VIBER`;
   return request(url, getAPICallObject('POST', template));
 };

package/utils/ignoredErrorMessages.js

@@ -0,0 +1,4 @@
+export default [
+  // ref: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
+  'ResizeObserver loop limit exceeded'
+];

package/v2Components/FormBuilder/index.js

@@ -2362,7 +2362,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
           break;
         case "contentPreview":
-          content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
+          const { formData , currentTab } = this.state || {};
+          const tab = formData && formData[currentTab - 1];
+          content = isVersionEnable ? tab && tab['sms-editor'] : formData && formData['sms-editor'];
           charList = updateCharCount(content).char_list;
           columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
             {charList.map((char) => char)}
@@ -3175,7 +3177,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
               console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
               const currentLang = ((!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage) || 'en';
-              const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
+              const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] || '');
               columns.push(
                 <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
                   <CKEditor
@@ -3198,7 +3200,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
             const { currentTab, formData } = this.state;
-            const supportedLanguages = formData[currentTab - 1].selectedLanguages;
+            const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages || {};
             const currentLang = supportedLanguages[langTab - 1];
 
             let beeJson = '',

package/v2Components/TemplatePreview/index.js

@@ -16,6 +16,7 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
+import { VIBER } from '../../v2Containers/App/constants';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
@@ -26,6 +27,7 @@ const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
+
 import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 
@@ -129,7 +131,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module} = this.props;
+    const { channel, showTestAndPreviewIcon, module } = this.props;
+    const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -555,7 +558,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             {
-          channel && channel.toLowerCase() === 'viber' ? (
+          channel && channel.toLowerCase() === VIBER ? (
             <div className="shell-v2 align-center" id="sms-preview">
               <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div
@@ -590,11 +593,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                       'font-size': '10px',
                       "color": CAP_G16,
                       "margin": '1.5px 6px 1px 7px',
-                    }}>{this.props.content.messageContent || ''}
+                    }}>{viberMessageContent || ''}
                   </p>
                   {/* Image Viber preview */}
-                  {this.props.content.imageURL && <CapImage
-                    src={this.props.content.imageURL}
+                  {imageURL && <CapImage
+                    src={imageURL}
                     alt="brand-name"
                     rest={{
                       style: {
@@ -605,7 +608,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     />
                   }
                   {/* button viber preview */}
-                  {this.props.content.buttonText && <div
+                  {buttonText && <div
                     style={{
                       'border-radius': '16px',
                       'background-color': CAP_PURPLE01,
@@ -620,7 +623,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         'font-weight': '500',
                         "color": CAP_WHITE }}
                       >
-                      {this.props.content.buttonText || ''}</p>
+                      {buttonText || ''}</p>
                   </div>
                   }
                   <div style={{ paddingBottom: 32}}></div>

package/v2Containers/App/constants.js

@@ -20,7 +20,7 @@ export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
 
-
+export const VIBER = 'viber';
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
 export const TRACK_EDIT_MPUSH = 'editMpush';

package/v2Containers/Cap/index.js

@@ -33,7 +33,7 @@ import './_cap.scss';
 const gtm = window.dataLayer || [];
 const {
   logNewTab,
-  getOrgNameFromId,
+  utilsGetOrgNameFromId,
   tabBeforeUnloadEventHandler,
   utilsHandleStorageChange,
   isMultipleTabsOpen,
@@ -297,18 +297,36 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
   };
 
+  getOrgNameFromId = orgId => {
+    const {
+      Global: {
+        user: {
+          proxyOrgList,
+          orgName: defaultOrgName,
+          orgID: defaultOrgID,
+        } = {},
+      } = {},
+    } = this.props;
+    return utilsGetOrgNameFromId(
+      orgId,
+      proxyOrgList,
+      defaultOrgID,
+      defaultOrgName,
+    );
+  };
+
   renderOrgRefreshModal = () => {
     const {
       localStorageOrgInfo: { oldValue: oldOrgId, newValue: newOrgId } = {},
       showRefreshModal,
       refreshSeconds,
     } = this.state;
-    const {
-      Global: { user: { proxyOrgList } = {} } = {},
-      intl: { formatMessage } = {},
-    } = this.props;
-    const oldOrgName = getOrgNameFromId(Number(oldOrgId), proxyOrgList);
-    const newOrgName = getOrgNameFromId(Number(newOrgId), proxyOrgList);
+    const { intl: { formatMessage } = {} } = this.props;
+    const oldOrgName = this.getOrgNameFromId(Number(oldOrgId));
+    const newOrgName = this.getOrgNameFromId(Number(newOrgId));
+    // some users do not have entry for their default org in proxyOrgList.
+    // getOrgNameFromId returns back orgID if no matching entry is present in proxyOrgList
+    // so replacing with defaultOrgName if defaultOrgID is returned
     const modalData = (
       <CapModal
         title={formatMessage(messages.orgRefreshHeading)}
@@ -339,12 +357,15 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   renderOrgChangeModal = () => {
     const { selectedOrgId, showOrgChangeModal } = this.state;
     const {
-      Global: { user: { proxyOrgList } = {},
+      Global: { 
       currentOrgDetails: { basic_details: { name: oldOrgName } = {} } = {},
       },
       intl: { formatMessage } = {},
     } = this.props; 
-    const newOrgName = getOrgNameFromId(selectedOrgId, proxyOrgList);
+    const newOrgName = this.getOrgNameFromId(selectedOrgId);
+    // some users do not have entry for their default org in proxyOrgList.
+    // getOrgNameFromId returns back orgID if no matching entry is present in proxyOrgList
+    // so replacing with defaultOrgName if defaultOrgID is returned
     return (
       <CapModal
         className="change-org-confirm"

package/v2Containers/CreativesContainer/index.js

@@ -254,7 +254,7 @@ class Creatives extends React.Component {
             type: constants.VIBER,
             isDefault,
             edit: true,
-            name: "Campaign message VIBER content",
+            name: "",
             versions: {
               base: {
                 content: {

package/v2Containers/Templates/_templates.scss

@@ -65,7 +65,7 @@
                 text-align:center;
             }
           }
-          .truncate-text{
+          .truncate-text-viber{
             .ant-card-meta-description{
               display: -webkit-box;
               -webkit-line-clamp: 9;

package/v2Containers/Templates/index.js

@@ -31,7 +31,6 @@ import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
 import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
-
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
@@ -54,8 +53,13 @@ import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
-import { CHANNEL_CREATE_TRACK_MAPPING, CHANNEL_EDIT_TRACK_MAPPING } from '../App/constants';
+import {
+  CHANNEL_CREATE_TRACK_MAPPING,
+  CHANNEL_EDIT_TRACK_MAPPING,
+  VIBER as VIBER_CHANNEL,
+} from '../App/constants';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER } from '../CreativesContainer/constants';
+
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -192,7 +196,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if ((this.state.channel && (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'viber' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !isEmpty(this.props.Templates.selectedWeChatAccount))) {
+    if ((['line', VIBER_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) || ((['wechat','mobilepush'].includes(this.state.channel.toLowerCase()) && !isEmpty(this.props.Templates.selectedWeChatAccount))) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -252,12 +256,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.setState({defaultAccount: true});
           nextProps.actions.getWeCrmAccounts(channel);
         }
-      } else if (nextProps.route.name.toLowerCase() === 'viber') {
+      } else if (nextProps.route.name.toLowerCase() === VIBER_CHANNEL) {
         channel = 'Viber';
       }
 
       this.setState({ channel }, () => {
-        if ((this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'viber' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        if (['line', VIBER_CHANNEL, 'sms', 'email', 'ebill'].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
             params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
@@ -346,7 +350,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.props.ebillActions.clearCreateResponse();
         } else if (this.state.channel.toLowerCase() === "line") {
           this.props.lineActions.clearCreateResponse();
-        } else if (this.state.channel.toLowerCase() === "viber") {
+        } else if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
           this.props.viberActions.clearCreateResponse();
         }
       }
@@ -1206,7 +1210,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.props.lineActions.clearCreateResponse();
         }
       });
-    } else if (this.state.channel.toLowerCase() === "viber") {
+    } else if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
       this.props.viberActions.createTemplate(duplicateObj, (response) => {
         if (response && response.templateId) {
           const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
@@ -1296,7 +1300,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathName += `/${options.account}`;
       }
     }
-    if (this.state.channel.toLowerCase() === 'viber') {
+    if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
       pathName = `/viber/edit/${id}/`;
     }
     if (this.state.channel.toUpperCase() === WECHAT) {
@@ -1597,7 +1601,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } = Templates;
     const lineLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
     const smsLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
-    const viberLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'viber');
+    const viberLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === VIBER_CHANNEL);
     const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
     const emailLoader = (

package/v2Containers/TemplatesV2/index.js

@@ -176,9 +176,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (channel === 'line') {
         return this.getLineComponent();
       }
-      if (channel === 'viber') {
-        return this.getViberComponent();
-      }
     }
     const location = {pathname: `/${channel}`, search: '', query};
     switch (channel) {

package/v2Containers/Viber/index.js

@@ -25,7 +25,6 @@ import { makeSelectViber, makeSelectCreateViber } from './selectors';
 import * as viberActions from './actions';
 import { validateTags } from '../../utils/tagValidations';
 import TemplatePreview from '../../v2Components/TemplatePreview';
-import './_viber.scss';
 import {
   CAP_G09,
   CAP_SPACE_08,
@@ -65,8 +64,10 @@ const Viber = (props) => {
     handleClose,
     onCreateComplete,
     params,
+    templateData,
     actions,
-    viber,
+    viber = {},
+    getFormSubscriptionData,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -105,7 +106,7 @@ const Viber = (props) => {
 
   useEffect(() => {
     const { id } = paramObj;
-    if (id) {
+    if (id && !templateData) {
       updateEditLoading(true);
       actions.getTemplateDetails(id, updateEditLoading);
       checkEditFlow(true);
@@ -114,8 +115,8 @@ const Viber = (props) => {
 
   useEffect(() => {
     if (params && params.id) {
-      const { viber: editViberContent = {} } = get(viber, `templateDetails.versions.base.content`, {});
-      const editMessageTitle = get(viber, 'templateDetails.name');
+      const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
+      const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
       updateTextMessageTitle(editMessageTitle);
       updateTextMessageContent(editViberContent.text || '');
       updateButtonText(editViberContent.buttonText || '');
@@ -126,7 +127,7 @@ const Viber = (props) => {
         updateImageStatus(true);
       }
     }
-  }, [viber[`templateDetails`]]);
+  }, [viber[`templateDetails`] || templateData]);
 
 // Common container for TEXT, IMAGE and Button
   const container = (icon, message, data) => (<CapRow
@@ -581,6 +582,7 @@ const Viber = (props) => {
           onCreateComplete();
         });
   };
+
   const onDoneCallback = () => {
     if (isFullMode) {
       if (isEditFlow) {
@@ -588,7 +590,12 @@ const Viber = (props) => {
       }
       return onCreateViber;
     }
-    return '';
+    return () => getFormSubscriptionData({
+      value: formatSubmitPayload(),
+      _id: params && params.id,
+      validity: true,
+      type: 'VIBER',
+    });
   };
 
   const isDisableDone = () => {

package/v2Containers/WeChat/MapTemplates/index.js

@@ -876,7 +876,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     }
     
     getMappedEvent(id, event) {
-      return this.state.map[id][event];
+      return (this.state.map[id] && this.state.map[id][event] ?  this.state.map[id][event] : () => {});
     }
     
     handleOnTagsContextChange = (data) => {