@capillarytech/creatives-library 7.12.15 → 7.12.16

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -1,5 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test SlideBoxHeader container Should render correct component for rcs channel create mode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+/>
+`;
+
+exports[`Test SlideBoxHeader container Should render correct component for rcs channel edit mode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    description={false}
+    descriptionClass=""
+    inline={false}
+    prefix={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Edit {channel}"
+        id="creatives.containersV2.Creatives.editMessageContent"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="RCS creative"
+              id="creatives.containersV2.Creatives.rcsCreative"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container Should render correct component for rcs channel preview mode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    description={
+      <CapLabel
+        type="label3"
+      >
+        <FormattedMessage
+          defaultMessage="Last updated: {date} by {user}"
+          id="creatives.containersV2.Creatives.lastUpdated"
+          values={
+            Object {
+              "date": "17 Feb 2022",
+              "user": "Ashish Karan fd",
+            }
+          }
+        />
+      </CapLabel>
+    }
+    descriptionClass=""
+    inline={false}
+    prefix={
+      <SlideBoxHeader__PrefixWrapper>
+        <SvgBack />
+      </SlideBoxHeader__PrefixWrapper>
+    }
+    size="large"
+    title="amit123456"
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container Should render correct component for rcs channel templates mode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    description={
+      <FormattedMessage
+        defaultMessage="Select only one creative"
+        id="creatives.containersV2.Creatives.creativeTemplatesDesc"
+        values={Object {}}
+      />
+    }
+    descriptionClass=""
+    inline={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Creative templates"
+        id="creatives.containersV2.Creatives.creativeTemplates"
+        values={Object {}}
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
 exports[`Test SlideBoxHeader container Should render correct component for whatsapp channel create mode 1`] = `
 <div
   key="creatives-container-slidebox-header-content"

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

@@ -1,5 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test SlideBoxContent container Should render correct component for rcs channel create mode 1`] = `
+<CreativesContainer__SlideBoxWrapper
+  className="add-creatives-section creatives-library-mode "
+>
+  <CapSlideBox
+    closeIconSize="m"
+    content={
+      <SlideBoxContent
+        currentChannel="RCS"
+        getFormData={[Function]}
+        handleClose={[Function]}
+        onCallTaskSubmit={[Function]}
+        onChannelChange={[Function]}
+        onCreateComplete={[MockFunction]}
+        onCreateNew={[Function]}
+        onCreateNextStep={[Function]}
+        onEmailModeChange={[Function]}
+        onEnterTemplateName={[Function]}
+        onFTPSubmit={[MockFunction]}
+        onFacebookSubmit={[MockFunction]}
+        onMobilepushModeChange={[Function]}
+        onPreviewTemplate={[Function]}
+        onRemoveTemplateName={[Function]}
+        onResetStep={[Function]}
+        onSelectTemplate={[Function]}
+        onShowTemplates={[Function]}
+        onValidationFail={[Function]}
+        onWeChatMaptemplateStepChange={[Function]}
+        onWechatTemplateChange={[Function]}
+        saveMessage={[Function]}
+        setIsLoadingContent={[Function]}
+        showTemplateName={[Function]}
+        slidBoxContent="templates"
+        templateData={
+          Object {
+            "type": undefined,
+          }
+        }
+        templateStep="modeSelection"
+        weChatMaptemplateStep={0}
+        weChatTemplateType=""
+      />
+    }
+    footer={false}
+    handleClose={[Function]}
+    header={
+      <SlideBoxHeader
+        channel="RCS"
+        isLoadingContent={true}
+        onShowTemplates={[Function]}
+        onWeChatMaptemplateStepChange={[Function]}
+        showPrefix={true}
+        slidBoxContent="templates"
+        templateData={
+          Object {
+            "type": undefined,
+          }
+        }
+        templateNameRenderProp={[Function]}
+        templateStep="modeSelection"
+        weChatMaptemplateStep={0}
+        weChatTemplateType=""
+      />
+    }
+    position="right"
+    show={true}
+    size="size-xl"
+  />
+</CreativesContainer__SlideBoxWrapper>
+`;
+
 exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "

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/Facebook/Advertisement/index.js

@@ -60,6 +60,7 @@ import {
   NO_CALL_TO_ACTION,
 } from './constant';
 import cloneDeep from 'lodash/cloneDeep';
+import { FACEBOOK } from "../../CreativesContainer/constants";
 export const Advertisement = (props) => {
   const CarouselContainer = styled.div`
     width: ${(styledProps) => styledProps.width || '22px'};
@@ -366,7 +367,7 @@ export const Advertisement = (props) => {
           },
         },
       },
-      type: "FACEBOOK",
+      type: FACEBOOK,
       name: messageTitle,
     };
     if (!isFullMode) {
@@ -441,7 +442,7 @@ export const Advertisement = (props) => {
       value: formatSubmitPayload(),
       _id: params && params.id,
       validity: true,
-      type: 'FACEBOOK',
+      type: FACEBOOK,
     });
   }, [carouselData,
     pageId,
@@ -558,6 +559,7 @@ export const Advertisement = (props) => {
       className={`cap-image-upload-${selectedAd}`}
       key={`${index}-fb-image-upload`}
       imageData={fbADData}
+      channel={FACEBOOK}
        /> :
       <CapVideoUpload
         style={{paddingBottom: '21px'}}

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

@@ -0,0 +1,57 @@
+import {
+  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_RCS_ASSET_REQUEST,
+  file,
+  assetType,
+  fileParams,
+  templateType,
+});
+
+export const clearRcsAsset = (templateType) => ({
+  type: CLEAR_RCS_ASSET,
+  templateType,
+});
+
+export const clearCreateResponse = () => ({
+  type: CLEAR_CREATE_RESPONSE_REQUEST,
+});
+
+export const createTemplate = (template, callback) => ({
+  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

@@ -0,0 +1,51 @@
+export const RCS = 'RCS';
+export const SMS = 'SMS';
+export const MEDIUM = 'MEDIUM';
+export const VERTICAL = 'VERTICAL';
+export const RIGHT = 'RIGHT';
+export const STANDALONE = 'STANDALONE';
+export const RICHCARD = 'RICHCARD';
+export const RCS_MEDIA_TYPES = {
+  NONE: 'NONE',
+  IMAGE: 'IMAGE',
+  VIDEO: 'VIDEO',
+};
+export const RCS_DLT_MODE = {
+  TEMPLATES: 'templates',
+  EDIT: 'editTemplate',
+};
+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';
+export const FULL = 'full';
+export const ALL = 'all';
+export const LIBRARY = 'library';
+export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+export const RCS_IMG_WIDTH = 1440;
+export const RCS_IMG_HEIGHT = 720;
+export const RCS_IMG_SIZE = 2000000; // 2MB
+
+const prefix = 'app/v2Containers/Rcs';
+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_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`;
+