@capillarytech/creatives-library 7.11.10 → 7.11.12

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { Creatives } from '../index';
 import mockdata from '../../mockdata';
 
-const { Templates, editTemplateData } = mockdata;
+const { whatsappTemplates, rcsTemplates, whatsappEditTemplateData, rcsEditTemplateData } = mockdata;
 
 jest.mock("../../../v2Components/FormBuilder", () => ({
   __esModule: true,
@@ -20,10 +20,10 @@ describe('Test SlideBoxContent container', () => {
     jest.clearAllMocks();
   });
 
-  const renderFunction = (channel, mode, templateData) => {
+  const renderFunction = (channel, mode, templates, templateData) => {
     renderedComponent = shallowWithIntl(
       <Creatives
-        Templates={Templates}
+        Templates={templates}
         channel={channel}
         slidBoxContent={mode}
         templateData={templateData}
@@ -34,12 +34,12 @@ describe('Test SlideBoxContent container', () => {
   };
 
   it('Should render correct component for whatsapp channel create mode', () => {
-    renderFunction("WHATSAPP", "createTemplate", { mode: "create" });
+    renderFunction("WHATSAPP", "createTemplate", whatsappTemplates, { mode: "create" });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel edit mode', () => {
-    renderFunction("WHATSAPP", "editTemplate", editTemplateData);
+    renderFunction("WHATSAPP", "editTemplate", whatsappTemplates, whatsappEditTemplateData);
     renderedComponent.instance().onEditTemplate();
     renderedComponent.find('CapSlideBox').props().content.props.handleClose();
     expect(renderedComponent).toMatchSnapshot();
@@ -47,12 +47,24 @@ describe('Test SlideBoxContent container', () => {
     expect(handleCloseCreatives).toHaveBeenCalledWith(true);
   });
 
-
-  it('Text getCreatives data', () => {
-    renderFunction("WHATSAPP", "editTemplate", editTemplateData);
+  it('Text getCreatives data for whatsapp', () => {
+    renderFunction("WHATSAPP", "editTemplate", whatsappTemplates, whatsappEditTemplateData);
     renderedComponent.instance().onEditTemplate();
-    renderedComponent.find('CapSlideBox').props().content.props.getFormData(editTemplateData);
+    renderedComponent.find('CapSlideBox').props().content.props.getFormData(whatsappEditTemplateData);
     expect(getCreativesData).toHaveBeenCalledTimes(1);
     expect(getCreativesData).toHaveBeenCalledWith({ channel: "WHATSAPP" });
   });
+
+  it('Should render correct component for rcs channel create mode', () => {
+    renderFunction("RCS", "createTemplate", rcsTemplates, { mode: "create" });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Text getCreatives data for rcs', () => {
+    renderFunction("RCS", "editTemplate", rcsTemplates, rcsEditTemplateData);
+    renderedComponent.instance().onEditTemplate();
+    renderedComponent.find('CapSlideBox').props().content.props.getFormData(rcsEditTemplateData);
+    expect(getCreativesData).toHaveBeenCalledTimes(1);
+    expect(getCreativesData).toHaveBeenCalledWith({ channel: "RCS" });
+  });
 });

package/v2Containers/MobilePush/Edit/index.js

@@ -60,7 +60,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.getLinkTypeFields = getLinkTypeFields.bind(this);
   }
   componentWillMount() {
-
     this.props.actions.getWeCrmAccounts("mobilepush");
     if (!this.props.Templates.selectedWeChatAccount && this.props.location.query.type !== 'embedded') {
       const type = this.props.location.query.type;
@@ -76,7 +75,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         version: "v2",
       };
       this.props.globalActions.fetchSchemaForEntity(query);
-
     }
   }
   componentDidMount() {
@@ -106,10 +104,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : 
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount :
     (!_.isEmpty(this.props.Edit.selectedWeChatAccount) ? this.props.Edit.selectedWeChatAccount : nextProps.Edit.selectedWeChatAccount));
     if (this.props.location.query.type === 'embedded' && !nextProps.Edit.fetchingWeCrmAccounts && !_.isEqual(this.props.Edit.weCrmAccounts, nextProps.Edit.weCrmAccounts) && (!selectedWeChatAccount || _.isEmpty(selectedWeChatAccount))) {
-
       this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, get(this.props, "templateData.definition.accountId"));
     }
     if (!_.isEmpty(nextProps.Edit.selectedWeChatAccount) && !_.isEqual(this.props.Edit.selectedWeChatAccount, nextProps.Edit.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && this.props.location.query.module === "loyalty") {
@@ -175,7 +172,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     });
   };
   onFormDataChange = (formData, tabCount, currentTab, inputField) => {
-    
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
     if (!_.isEmpty(templateCta) && this.state.currentTab === 2) {
@@ -241,12 +237,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   onTabChange = (data) => {
-    
     this.setState({currentTab: data});
   };
 
   onTagSelect = (data, currentTab, srcComp) => {
-    
     const editorId = srcComp.target;
     this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
@@ -259,10 +253,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onUpdateTemplateComplete = (response) => {
     const obj = this.getTransformedData(this.state.formData);
     const content = getContent(obj);
-    const  { 
+    const {
       definition: {
-        mode: definitionMode
-      } 
+        mode: definitionMode,
+      },
     } = obj || {};
     const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
     const timeTaken = GA.timeTracker.stopTimer(TRACK_EDIT_MPUSH, {
@@ -278,12 +272,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         timeTaken,
         content,
         mode: EDIT,
-        imageAdded: definitionMode === 'image'
-      })
-    } catch(e) {
+        imageAdded: definitionMode === 'image',
+      });
+    } catch (e) {
       console.log(e);
     }
-    
+
     this.resetSchema();
     this.setState({
       formData: {},
@@ -535,7 +529,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         delete cta.ioscdeepLinkName;
       }
       obj.versions.base.IOS.expandableDetails.ctas.push(cta);
-      obj.versions.base.IOS.expandableDetails.categoryId = get(this.state, "templateCta.id");
+      obj.versions.base.IOS.expandableDetails.categoryId = get(this.state, "templateCta.id") || get(this.state.editData, 'versions.base.IOS.expandableDetails.categoryId');
+
       if (obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
         const params = _.map(ios, (field, key) => {
           let actionLink;
@@ -603,13 +598,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   getMappedEvent = (id, event) => {
     const map = this.state.eventsMap;
     if (!map[id] || !map[id][event]) {
-      
+
     }
     return map[id][event];
   };
 
   getCurrentWindow = (e) => {
-    
     const response = {
       action: e.action,
       value: 'edit',
@@ -619,13 +613,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   getFormData = (e) => {
-    
     const response = {
       action: "getFormData",
       value: this.getTransformedData(this.state.formData),
       validity: this.state.isFormValid,
     };
-    
+
     this.setState({checkValidation: true}, this.showError);
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
@@ -635,7 +628,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
 
   setEditState(data, schema) {
-    
     const tabCount = Object.keys(data.versions.base).length;
     const formData = {};
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === "loyalty") {
@@ -775,7 +767,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     formData[0].base = true;
     // formData[0].tabKey = '1';
     // formData[1].tabKey = '2';
-    
+
     this.setState({templateCta}, () => {
       this.getSchemaForFormData(formData, schema);
       this.setState({tabCount, formData, editData: data, currentTab: 1}, () => {
@@ -1361,7 +1353,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
 
   startTemplateCreation = (data) => {
-    
     if (!this.state.isContentEditLoaded && this.state.fullSchema && this.props.Edit.weCrmAccounts) {
       const schema = JSON.stringify(data).indexOf("BIG_PICTURE") > -1 ? this.state.fullSchema.imageSchema : this.state.fullSchema.textSchema;
       this.setMobilePushAccountOptions(this.props.Edit.weCrmAccounts, data.content.accId);
@@ -1377,7 +1368,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   };
   discardValues = () => {
-    
     this.resetSchema();
     this.setState({
       formData: {},
@@ -1403,7 +1393,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
   };
   moveToTemplates = () => {
-    
     const modalContent = {
       title: this.props.intl.formatMessage(messages.alertMessage),
       body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
@@ -1478,17 +1467,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   saveFormData = (formData) => {
-    
     const obj = this.getTransformedData(formData);
-    
+
     this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
   };
   handleFrameTasks = (e) => {
-    // 
+    //
     const type = e.data;
-    
+
     if (typeof type === 'object') {
-      // 
+      //
       const action = type.action;
       switch (action) {
         case "startTemplateCreation":
@@ -1509,15 +1497,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           this.getFormData(e);
           break;
         case "startTemplateCreation":
-          
+
           //this.getFormData(e);
           break;
         case "moveToTemplates":
-          
+
           this.moveToTemplates();
           break;
         case "validateContent":
-          
+
           this.validateContent(e);
           break;
         default:
@@ -1726,7 +1714,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    
+
     this.setState({schema, loadingContentEdit: false}, () => {
       this.removeStandAlone();
     });
@@ -1747,7 +1735,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({ schema });
   };
   handleOnTagsContextChange = (data) => {
-    
     const query = {
       layout: 'mobilepush',
       type: 'TAG',

package/v2Containers/Rcs/actions.js

@@ -1,12 +1,16 @@
 import {
-  UPLOAD_ASSET_REQUEST,
-  CLEAR_ASSET,
-  CREATE_TEMPLATE_REQUEST,
+  RCS,
+  UPLOAD_RCS_ASSET_REQUEST,
+  CLEAR_RCS_ASSET,
+  CREATE_RCS_TEMPLATE_REQUEST,
   CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_RCS_TEMPLATE_DETAILS_REQUEST,
+  CLEAR_EDIT_RESPONSE_REQUEST,
+  EDIT_RCS_TEMPLATE_REQUEST,
 } from './constants';
 
 export const uploadRcsAsset = (file, assetType, fileParams, templateType) => ({
-  type: UPLOAD_ASSET_REQUEST,
+  type: UPLOAD_RCS_ASSET_REQUEST,
   file,
   assetType,
   fileParams,
@@ -14,7 +18,7 @@ export const uploadRcsAsset = (file, assetType, fileParams, templateType) => ({
 });
 
 export const clearRcsAsset = (templateType) => ({
-  type: CLEAR_ASSET,
+  type: CLEAR_RCS_ASSET,
   templateType,
 });
 
@@ -23,7 +27,31 @@ export const clearCreateResponse = () => ({
 });
 
 export const createTemplate = (template, callback) => ({
-  type: CREATE_TEMPLATE_REQUEST,
+  type: CREATE_RCS_TEMPLATE_REQUEST,
   template,
   callback,
 });
+
+// FOR EDIT
+export function getTemplateDetails(id, callback) {
+  return {
+    type: GET_RCS_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: RCS,
+    callback,
+  };
+}
+
+export function editTemplate(template, callback) {
+  return {
+    type: EDIT_RCS_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function clearEditResponse() {
+  return {
+    type: CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}

package/v2Containers/Rcs/constants.js

@@ -14,7 +14,9 @@ export const RCS_DLT_MODE = {
   TEMPLATES: 'templates',
   EDIT: 'editTemplate',
 };
-export const TEMPLATE_MESSAGE_MAX_LENGTH = 1000;
+export const TEMPLATE_DESC_MAX_LENGTH = 1000;
+export const FALLBACK_MESSAGE_MAX_LENGTH = 160;
+export const TEMPLATE_TITLE_MAX_LENGTH = 200;
 export const TAG = 'TAG';
 export const EMBEDDED = 'embedded';
 export const DEFAULT = 'default';
@@ -27,12 +29,23 @@ export const RCS_IMG_HEIGHT = 720;
 export const RCS_IMG_SIZE = 2000000; // 2MB
 
 const prefix = 'app/v2Containers/Rcs';
-export const UPLOAD_ASSET_REQUEST = `${prefix}/UPLOAD_ASSET_REQUEST`;
-export const UPLOAD_ASSET_SUCCESS = `${prefix}/UPLOAD_ASSET_SUCCESS`;
-export const UPLOAD_ASSET_FAILURE = `${prefix}/UPLOAD_ASSET_FAILURE`;
-export const CLEAR_ASSET = `${prefix}/CLEAR_ASSET`;
+export const UPLOAD_RCS_ASSET_REQUEST = `${prefix}/UPLOAD_RCS_ASSET_REQUEST`;
+export const UPLOAD_RCS_ASSET_SUCCESS = `${prefix}/UPLOAD_RCS_ASSET_SUCCESS`;
+export const UPLOAD_RCS_ASSET_FAILURE = `${prefix}/UPLOAD_RCS_ASSET_FAILURE`;
+export const CLEAR_RCS_ASSET = `${prefix}/CLEAR_RCS_ASSET`;
 
-export const CREATE_TEMPLATE_REQUEST = `${prefix}/CREATE_TEMPLATE_REQUEST`;
-export const CREATE_TEMPLATE_SUCCESS = `${prefix}/CREATE_TEMPLATE_SUCCESS`;
-export const CREATE_TEMPLATE_FAILURE = `${prefix}/CREATE_TEMPLATE_FAILURE`;
+export const CREATE_RCS_TEMPLATE_REQUEST = `${prefix}/CREATE_RCS_TEMPLATE_REQUEST`;
+export const CREATE_RCS_TEMPLATE_SUCCESS = `${prefix}/CREATE_RCS_TEMPLATE_SUCCESS`;
+export const CREATE_RCS_TEMPLATE_FAILURE = `${prefix}/CREATE_RCS_TEMPLATE_FAILURE`;
 export const CLEAR_CREATE_RESPONSE_REQUEST = `${prefix}/Create/CLEAR_CREATE_RESPONSE_REQUEST`;
+
+
+export const GET_RCS_TEMPLATE_DETAILS_REQUEST = `${prefix}/GET_RCS_TEMPLATE_DETAILS_REQUEST`;
+export const GET_RCS_TEMPLATE_DETAILS_SUCCESS = `${prefix}/GET_RCS_TEMPLATE_DETAILS_SUCCESS`;
+export const GET_RCS_TEMPLATE_DETAILS_FAILURE = `${prefix}/GET_RCS_TEMPLATE_DETAILS_FAILURE`;
+
+export const EDIT_RCS_TEMPLATE_REQUEST = `${prefix}/EDIT_RCS_TEMPLATE_REQUEST`;
+export const EDIT_RCS_TEMPLATE_SUCCESS = `${prefix}/EDIT_RCS_TEMPLATE_SUCCESS`;
+export const EDIT_RCS_TEMPLATE_FAILURE = `${prefix}/EDIT_RCS_TEMPLATE_FAILURE`;
+export const CLEAR_EDIT_RESPONSE_REQUEST = `${prefix}/Edit/CLEAR_EDIT_RESPONSE_REQUEST`;
+