@capillarytech/creatives-library 7.17.143 → 7.17.145

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -592,8 +592,6 @@ 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

@@ -14,15 +14,14 @@ function SlideBoxFooter(props) {
   return (
     <div>
       <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)
               :
@@ -32,7 +31,7 @@ function SlideBoxFooter(props) {
             {/* {isFullMode && <CapButton type="secondary" onClick={onDiscard}><FormattedMessage {...messages.creativesTemplatesDiscard}/></CapButton>} */}
           </div>)}
         {props.shouldShowContinueFooter() &&
-          <CapButton onClick={onCreateNextStep} >
+          <CapButton onClick={onCreateNextStep}>
             <FormattedMessage {...messages.continue} />
           </CapButton>
           }
@@ -53,6 +52,5 @@ 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 && templateNameExists;
+      showFooter = isEmailCreate && emailCreateMode;
     }
     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,27 +546,18 @@ 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};
-    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;
+    if (this.props.defaultData && _.isEmpty(formData['template-name']) && this.props.isFullMode) {
+      formData['template-name'] = _.get(this.props, "defaultData['template-name']");
     }
     this.setState({formData, tabCount, isSchemaChanged: false}, () => {
-      if (isFullMode) {
-        showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode) {
+        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
       }
     });
     if (currentTab) {
@@ -656,7 +647,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);
@@ -2418,7 +2409,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 {
@@ -2781,7 +2772,6 @@ Email.propTypes = {
   setIsLoadingContent: PropTypes.func,
   injectedTags: PropTypes.object,
   defaultData: PropTypes.object,
-  syncTemplateName: PropTypes.func,
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
   selectedOfferDetails: PropTypes.array,

package/v2Containers/EmailWrapper/index.js

@@ -101,15 +101,10 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     this.props.onResetStep();
     this.props.templatesActions.resetTemplateData();
   }
-  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();
-    }
+  onTemplateNameChange = ({target:{value}}) => {
+    this.setState({ templateName: value });
+    const isEmptyTemplateName = value.trim() ? false : true;
+    this.setState({isTemplateNameEmpty : isEmptyTemplateName});
   }
   onChange = (e) => {
     this.props.onEmailModeChange(e.target.value);
@@ -136,8 +131,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;
@@ -190,9 +185,7 @@ 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 {
@@ -250,10 +243,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>
@@ -278,7 +271,6 @@ 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}
@@ -289,7 +281,6 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 editor={editor}
                 moduleType={moduleType}
               />}
-
               {!isShowEmailCreate && (
                 <CmsTemplatesComponent
                   cmsTemplates={CmsTemplates}
@@ -331,8 +322,6 @@ 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

@@ -31,7 +31,7 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { CREATE, TRACK_CREATE_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
 import { getContent } from '../commonMethods';
-import { getCdnUrl } from '../../../utils/cdnTransformation';
+import { getCdnUrl } from '../../../utils/cdnTransformation'
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -149,8 +149,6 @@ 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');
@@ -159,15 +157,6 @@ 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');
       }
     }
-  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 (isEmpty(templateName) && defaultTemplateName) {
-      syncTemplateName(defaultTemplateName);
-    } else {
-      syncTemplateName(templateName);
-    }
-
 
     // copy content code
     // if (newFormData[0]['copy-iphone-content'] === "") {
@@ -190,12 +179,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     //     newFormData[1]['copy-android-content'] = "";
     //   }
     // }
-
-    //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 (this.props.isFullMode && this.props.defaultData && isEmpty(formData['template-name'])) {
+      newFormData['template-name'] = get(this.props, "defaultData['template-name']");
     }
     if (inputField && inputField.id === "add-sec-cta") {
       if (!newFormData[0]["add-sec-cta"]) {
@@ -203,8 +188,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
     }
     this.setState({formData: newFormData, tabCount, isSchemaChanged: !this.state.isSchemaChanged}, () => {
-      if (isFullMode) {
-        showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode) {
+        this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
       }
     });
   };
@@ -219,7 +204,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({currentTab: data});
   };
   onTemplateNameChange = () => {
-    //
+    // 
   };
 
 
@@ -383,7 +368,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     };
     obj.type = 'MOBILEPUSH';
     obj.name = formData['template-name'];
-    if (this.props?.Templates?.selectedWeChatAccount?.sourceTypeName === 'MAPP_SDK') {
+    if(this.props?.Templates?.selectedWeChatAccount?.sourceTypeName === 'MAPP_SDK') {
       obj.definition = {
         accountId: this.props.Templates.selectedWeChatAccount.id,
         licenseCode: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
@@ -1465,10 +1450,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) => {
@@ -1484,9 +1469,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         timeTaken,
         content,
         mode: CREATE,
-        imageAdded: definitionMode === 'image',
+        imageAdded: definitionMode === 'image'
       });
-
+      
       this.discardValues();
       const message = this.props.intl.formatMessage(messages.messageCreateSuccess);
       CapNotification.success({message, key: 'createMpushSuccess'});
@@ -1880,7 +1865,6 @@ Create.propTypes = {
   iosCtasData: PropTypes.array,
   injectedTags: PropTypes.object,
   defaultData: PropTypes.object,
-  syncTemplateName: PropTypes.func,
   showTemplateName: PropTypes.func,
   isGetFormData: PropTypes.bool,
   onValidationFail: PropTypes.func,
@@ -1909,4 +1893,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: false,
-});
+});

package/v2Containers/MobilepushWrapper/index.js

@@ -56,9 +56,6 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
       templateName: "",
     };
   }
-
- 
-
   onChange = (e) => {
     this.props.onMobilepushModeChange( e.target.value );
   };
@@ -71,10 +68,6 @@ 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;
@@ -108,8 +101,6 @@ 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/Whatsapp/index.js

@@ -1422,7 +1422,7 @@ 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_KARIX, HOST_GUPSHUP].includes(host) && karixFileHandle === '') {
+    if (!isMediaTypeText && host === HOST_KARIX && karixFileHandle === '') {
       return true;
     }
     if (templateHeaderError || templateFooterError) {
@@ -1970,7 +1970,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                 </CapHeading>
               }
               suffix={
-                templateStatus === WHATSAPP_STATUSES.approved && (
+                templateStatus === WHATSAPP_STATUSES.approved && !isAuthenticationTemplate && (
                   <TagList
                     label={formatMessage(globalMessages.addLabels)}
                     onTagSelect={onHeaderTagSelect}