@capillarytech/creatives-library 7.17.152-alpha.1 → 7.17.153

package/package.json

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

package/v2Components/Ckeditor/index.js

@@ -15,6 +15,7 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import './style.scss';
 // import messages from './messages';
 const loadScript = require('load-script');
+
 const defaultScriptUrl = `${window.location.origin}/arya/ui/library/ckeditor/ckeditor.js`;
 /*const defaultScriptUrl = 'https://nightly.intouch.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
 **Uncomment the above line to use CKEDITOR in local
@@ -173,7 +174,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       // setTimeout(() => {
       //   this.editorInstance.name = this.id;
       // }, 5000);
-      
+
     }
   }
 
@@ -202,7 +203,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       });
     }
   }
-  
+
   onLoad = () => {
     this.setState({ scriptLoaded: true }, () => {
       this.initializeEditor();
@@ -211,7 +212,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
   initializeEditor = () => {
     if (this.unmounting) return;
-    
+
     if (!window.CKEDITOR) {
       console.error("CKEditor not found");
       return;
@@ -219,13 +220,13 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
     let html = this.props.content;
     html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
-    
+
     this.editorInstance = window.CKEDITOR.appendTo(
       this.node,
       this.state.config,
       html
     );
-    
+
 
     if (this.props.getEditorInstanse) {
       this.props.getEditorInstanse(this.editorInstance, this.props.id);
@@ -236,23 +237,22 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     // this.editorInstance.on('change', this.handleContentChange);
 
     // mode event is fired whenever mode is toggled from normal to source mode or vice versa
-    // change event works only in wysiwyg(non-source) mode, key event works in both source & wysiwyg(non-source) mode but, 
+    // change event works only in wysiwyg(non-source) mode, key event works in both source & wysiwyg(non-source) mode but,
     // key event doesn't get fired up while setting text to bold,italic etc..
-    this.editorInstance.on('mode',()=>{
-      if(this.editorInstance.mode==="source"){
-        this.editorInstance.on('key',this.handleContentChange)
-      }
-      else{
-        if(this.editorInstance.hasListeners("key")){
+    this.editorInstance.on('mode', () => {
+      if (this.editorInstance.mode === "source") {
+        this.editorInstance.on('key', this.handleContentChange);
+      } else {
+        if (this.editorInstance.hasListeners("key")) {
           /*Removing the 'key' listener is necessary. If not removed and the mode is switched in the following manner :
           source mode -> Non-source mode -> source mode,
-          then under this scenario both 'key' and 'change' listener will get fired on entering text. Except that 'key' listener will not get fired when setting text to 'bold', 'italic' etc.  
+          then under this scenario both 'key' and 'change' listener will get fired on entering text. Except that 'key' listener will not get fired when setting text to 'bold', 'italic' etc.
           */
-          this.editorInstance.removeListener("key",this.handleContentChange)
+          this.editorInstance.removeListener("key", this.handleContentChange);
         }
-        this.editorInstance.on('change',this.handleContentChange)
+        this.editorInstance.on('change', this.handleContentChange);
       }
-    })
+    });
 
     _.forEach(this.props.events, (event, index) => {
       this.editorInstance.on(index, event);

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -569,9 +569,6 @@
       }
     }
   }
-  .message-preview {
-    left: 40%;
-  }
   .android-push-message-Container, .iphone-push-message-Container{
     position: absolute;
     top: 11%;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -592,6 +592,8 @@ export function SlideBoxContent(props) {
         cap={cap}
         onResetStep={onResetStep}
         showTemplateName={showTemplateName}
+        onEnterTemplateName={onEnterTemplateName}
+        onRemoveTemplateName={onRemoveTemplateName}
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -16,12 +16,12 @@ function SlideBoxFooter(props) {
       <div>
         {props.shouldShowDoneFooter() && (
           <div>
-            { isFullMode && isTemplateNameEmpty && 
+            { isFullMode && isTemplateNameEmpty &&
               <CapError type="error">
                 <FormattedMessage {...messages.templateNameEmpty} />
-              </CapError> 
+              </CapError>
             }
-            <CapButton onClick={onSave} disabled={isTemplateNameEmpty ||fetchingCmsData || false}>
+            <CapButton onClick={onSave} disabled={isTemplateNameEmpty || fetchingCmsData || false}>
               {isFullMode ?
                 getFullModeSaveBtn(slidBoxContent)
               :
@@ -52,5 +52,6 @@ SlideBoxFooter.propTypes = {
   shouldShowContinueFooter: PropTypes.func,
   shouldShowDoneFooter: PropTypes.func,
   isFullMode: PropTypes.bool,
+  isTemplateNameEmpty: PropTypes.bool,
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/index.js

@@ -84,7 +84,7 @@ export class Creatives extends React.Component {
 
   componentDidMount() {
     GA.timeTracker.startTimer(CREATIVES_CONTAINER);
-    if(!this.props?.isFullMode){
+    if (!this.props?.isFullMode) {
       this.props?.templateActions.getCdnTransformationConfig();
     }
   }
@@ -598,7 +598,7 @@ export class Creatives extends React.Component {
           const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
           const sourceType = get(channelTemplate, 'definition.sourceType');
           if (type === LOYALTY) {
-            if(sourceType === 'MAPP_SDK') {
+            if (sourceType === 'MAPP_SDK') {
               templateData.templateId = get(channelTemplate, '_id');
               templateData.licenseCode = get(channelTemplate, 'definition.licenseCode');
               templateData.gatewayId = get(channelTemplate, 'definition.gatewayId');
@@ -741,10 +741,10 @@ export class Creatives extends React.Component {
             header,
             footer,
             headerVarMapped,
-            headerTemplate
+            headerTemplate,
           };
           const {
-            whatsappDocName = '', whatsappDocSize, whatsappDocPages, whatsappDocImg = ''
+            whatsappDocName = '', whatsappDocSize, whatsappDocPages, whatsappDocImg = '',
           } = whatsappDocParams;
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
@@ -970,10 +970,10 @@ export class Creatives extends React.Component {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
           const creativesData = this.getCreativesData(channel, template, templateData );// convers data to consumer understandable format
-          creativesData.then(data=>{
+          creativesData.then((data) => {
             this.logGTMEvent(channel, data);
             this.props.getCreativesData(data);// send data to consumer
-          })
+          });
         },
       );
     }
@@ -1031,7 +1031,7 @@ export class Creatives extends React.Component {
       }
     } else if (channel === constants.EMAIL && isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
-      showFooter = isEmailCreate && emailCreateMode;
+      showFooter = isEmailCreate && emailCreateMode && templateNameExists;
     }
     if (channel === constants.EMAIL && emailCreateMode === "upload") {
       showFooter = showFooter && !this.props.isUploading;
@@ -1105,7 +1105,7 @@ export class Creatives extends React.Component {
     onChange={(ev) => {
       const value = ev.currentTarget.value;
       const isEmptyTemplateName = value.trim() ? false : true;
-      this.setState({isTemplateNameEmpty : isEmptyTemplateName});
+      this.setState({isTemplateNameEmpty: isEmptyTemplateName});
       const newFormData = {...formData, 'template-name': value};
       onFormDataChange(newFormData);
     }}
@@ -1116,7 +1116,7 @@ export class Creatives extends React.Component {
     if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
       if (channel === constants.EMAIL && !name && slidBoxContent === 'createTemplate') {
-        this.setState({isTemplateNameEmpty:true});
+        this.setState({isTemplateNameEmpty: true});
       }
       this.templateContainerDetails = {formData, onFormDataChange};
       if (name && !isEditName) {

package/v2Containers/Email/index.js

@@ -546,18 +546,29 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.clearStoreValues();
     this.props.actions.clearCRUDResponse();
-    delete window?.[CREATIVES_S3_ASSET_FILESIZES]
+    delete window?.[CREATIVES_S3_ASSET_FILESIZES];
   }
 
   onFormDataChange = (updatedFormData, tabCount, currentTab) => {
     // this.transformFormData(formData);
     const formData = {...updatedFormData};
-    if (this.props.defaultData && _.isEmpty(formData['template-name']) && this.props.isFullMode) {
-      formData['template-name'] = _.get(this.props, "defaultData['template-name']");
+    const {defaultData = {}, isFullMode, showTemplateName, syncTemplateName} = this.props;
+    const templateName = formData['template-name'];
+    const defaultTemplateName = _.get(defaultData, 'template-name', "");
+
+    //sync back template name from from editing in create flow to wrapper when  edited
+    if (syncTemplateName) {
+      syncTemplateName(_.isEmpty(templateName) && defaultTemplateName ? defaultTemplateName : templateName);
+    }
+
+    if (defaultData && _.isEmpty(templateName) && defaultTemplateName?.length >1 && isFullMode) {
+      formData['template-name'] = defaultTemplateName;
+    } else {
+      formData['template-name'] = templateName;
     }
     this.setState({formData, tabCount, isSchemaChanged: false}, () => {
-      if (this.props.isFullMode) {
-        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode && showTemplateName) {
+        showTemplateName({formData, onFormDataChange: this.onFormDataChange});
       }
     });
     if (currentTab) {
@@ -647,7 +658,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       this.state.editorInstanse.insertHtml(`${anchor}`);
     } else if (data === CUSTOMER_BARCODE_TAG && this.state.editorInstanse) {
       this.state.editorInstanse.insertHtml(`<img src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/8ebc8301-e262-45a6-bdab-ff0de91a.png?code={{${data}}}" />`);
-    } else if (this.state.editorInstanse){
+    } else if (this.state.editorInstanse) {
       this.state.editorInstanse.insertHtml(`{{${data}}}`);
     }
       //this.resetCkEditorInstance(currentTab, formData, true, data);
@@ -2409,7 +2420,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     // if (saveCount === 0) {
 
-    this.props.actions.transformEmailTemplate(obj, (newEmail)=>{
+    this.props.actions.transformEmailTemplate(obj, (newEmail) => {
       this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
     });
     // } else {
@@ -2767,6 +2778,7 @@ Email.propTypes = {
   getDefaultTags: PropTypes.string,
   currentOrgDetails: PropTypes.object,
   isLoadingMetaEntities: PropTypes.bool,
+  syncTemplateName: PropTypes.func,
   // creativesContainerActions: PropTypes.object,
   isFullMode: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,

package/v2Containers/EmailWrapper/index.js

@@ -101,10 +101,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     this.props.onResetStep();
     this.props.templatesActions.resetTemplateData();
   }
-  onTemplateNameChange = ({target:{value}}) => {
-    this.setState({ templateName: value });
-    const isEmptyTemplateName = value.trim() ? false : true;
-    this.setState({isTemplateNameEmpty : isEmptyTemplateName});
+  onTemplateNameChange = ({target: {value}}) => {
+    const {onEnterTemplateName, onRemoveTemplateName} = this.props;
+    const isEmptyTemplateName = !value?.trim();
+    this.setState({templateName: value, isTemplateNameEmpty: isEmptyTemplateName});
+    if (value && onEnterTemplateName) {
+      onEnterTemplateName();
+    } else if (onRemoveTemplateName) {
+      onRemoveTemplateName();
+    }
   }
   onChange = (e) => {
     this.props.onEmailModeChange(e.target.value);
@@ -131,8 +136,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     gtmPush('creativeDetails', {
       channel: EMAIL,
       timeTaken,
-      mode: 'uploadZip'
-    });    
+      mode: 'uploadZip',
+    });
   }
   handleFileUpload = (file = {}) => {
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
@@ -185,7 +190,9 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
   useEditor = (id) => {
     this.setState({ modeContent: { id } }, this.props.showNextStep);
   }
-
+  onSyncTemplateName=(tempName) => {
+    this.setState({templateName: tempName});
+  }
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
     const {
@@ -243,10 +250,10 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 {emailCreateMode === "upload" &&
                   <div style={{ marginLeft: '8px' }}>
                     <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
-                      { (isFullMode && isTemplateNameEmpty) && 
+                      { (isFullMode && isTemplateNameEmpty) &&
                         <CapError type="error">
                           < FormattedMessage {...messages.emptyTemplateName} />
-                        </CapError> 
+                        </CapError>
                       }
                       <CapButton disabled={isFullMode && isTemplateNameEmpty}>{this.props.intl.formatMessage(messages.upload)}</CapButton>
                     </CapUploader>
@@ -271,6 +278,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 getDefaultTags={type}
                 isFullMode={isFullMode}
                 defaultData={{ 'template-name': templateName }}
+                syncTemplateName={this.onSyncTemplateName}
                 cap={cap}
                 showTemplateName={showTemplateName}
                 onValidationFail={onValidationFail}
@@ -322,6 +330,8 @@ EmailWrapper.propTypes = {
   getCmsTemplatesInProgress: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
   moduleType: PropTypes.string,
+  onEnterTemplateName: PropTypes.func,
+  onRemoveTemplateName: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Create/index.js

@@ -149,6 +149,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = cloneDeep(formData);
     const {templateCta} = this.state;
+    const {syncTemplateName, defaultData = {}, isFullMode, showTemplateName} = this.props;
+    
     if (!isEmpty(templateCta)) {
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
@@ -157,7 +159,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = get(templateCta, 'ctaTemplateDetails[1].buttonText');
       }
     }
-
+   
+    //sync back template name from from editing in create flow to wrapper when  edited
+  const templateName = formData['template-name'];
+  const defaultTemplateName= get(defaultData, 'template-name') ?? ""
+    //sync back template name from from editing in create flow to wrapper when  edited
+
+    if(syncTemplateName){
+      syncTemplateName(isEmpty(templateName) && defaultTemplateName?defaultTemplateName:templateName)
+    }
+   
     // copy content code
     // if (newFormData[0]['copy-iphone-content'] === "") {
     //
@@ -179,8 +190,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     //     newFormData[1]['copy-android-content'] = "";
     //   }
     // }
-    if (this.props.isFullMode && this.props.defaultData && isEmpty(formData['template-name'])) {
-      newFormData['template-name'] = get(this.props, "defaultData['template-name']");
+     //assign newFormData['template-name'] to default name only once in inital render, if edited use latest form data
+     if (isFullMode && defaultData && isEmpty(templateName) && defaultTemplateName?.length>1) {
+      newFormData['template-name'] = defaultTemplateName;
+    } else {
+      newFormData['template-name'] = templateName;
     }
     if (inputField && inputField.id === "add-sec-cta") {
       if (!newFormData[0]["add-sec-cta"]) {
@@ -188,8 +202,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
     }
     this.setState({formData: newFormData, tabCount, isSchemaChanged: !this.state.isSchemaChanged}, () => {
-      if (this.props.isFullMode) {
-        this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
+      if (isFullMode && showTemplateName) {
+        showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
       }
     });
   };
@@ -1450,10 +1464,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     //this function gets called from form bulder only when the form data is valid
     const obj = this.getTransformedData(formData);
     const content = getContent(obj);
-    const  { 
+    const { 
       definition: {
-        mode: definitionMode
-      } 
+        mode: definitionMode,
+      }, 
     } = obj || {};
     const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
     this.props.actions.createTemplate(obj, (response) => {
@@ -1865,6 +1879,7 @@ Create.propTypes = {
   iosCtasData: PropTypes.array,
   injectedTags: PropTypes.object,
   defaultData: PropTypes.object,
+  syncTemplateName: PropTypes.func,
   showTemplateName: PropTypes.func,
   isGetFormData: PropTypes.bool,
   onValidationFail: PropTypes.func,

package/v2Containers/MobilepushWrapper/index.js

@@ -56,6 +56,8 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
       templateName: "",
     };
   }
+
+
   onChange = (e) => {
     this.props.onMobilepushModeChange( e.target.value );
   };
@@ -68,6 +70,9 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
       onRemoveTemplateName();
     }
   }
+  onSyncTemplateName=(tempName) => {
+    this.setState({templateName: tempName});
+  }
   render() {
     const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData} = this.props;
     const {templateName} = this.state;
@@ -101,6 +106,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               getFormLibraryData={getFormData}
               setIsLoadingContent={setIsLoadingContent}
               defaultData={{"template-name": templateName}}
+              syncTemplateName={this.onSyncTemplateName}
               location={{
                 pathname: `/mobilepush/create/${mobilePushCreateMode}`,
                 query,

package/v2Containers/Templates/index.js

@@ -1591,9 +1591,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (data.expandableDetails && data.expandableDetails.image) {
         bodyTextStyle.WebkitLineClamp = 3;
       }
-      const isFullMode = this.isFullMode();
       result = (
-        <div className={`${isFullMode} ? android-push-message-Container: message-preview android-push-message-Container `}>
+        <div className="android-push-message-Container">
           <div className="message-pop align-left">
             <div className="message-container">
               <div className="app-name">

package/v2Containers/Whatsapp/index.js

@@ -1403,7 +1403,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       type: WHATSAPP,
     });
   };
-
+  const isMediatypeValid =()=> ((isMediaTypeImage && whatsappImageSrc === "") || (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") || (isMediaTypeDoc && whatsappDocSource === ""))
+  
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -1422,7 +1423,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       return true;
     }
     //if media type is image, video or document and the mediaType file is not uploaded
-    if (!isMediaTypeText && host === HOST_KARIX && karixFileHandle === '') {
+    
+    if (!isMediaTypeText && isMediatypeValid() ) {
       return true;
     }
     if (templateHeaderError || templateFooterError) {
@@ -2202,10 +2204,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     Object.values(headerVarMappedData).some((inputValue) => inputValue === "") ||
     computeTextLength(MESSAGE_TEXT) > TEMPLATE_MESSAGE_MAX_LENGTH ||
     computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ||
-    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) ||
-    (isMediaTypeImage && whatsappImageSrc === "") ||
-    (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") ||
-    (isMediaTypeDoc && whatsappDocSource === "");
+    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) || isMediatypeValid();
 
   return (
     <CapSpin spinning={spin}>