@capillarytech/creatives-library 2.0.48 → 2.0.50

package/containers/CreativesContainer/SlideBoxContent.js

@@ -36,6 +36,7 @@ function SlideBoxContent(props) {
       cap,
       onResetStep,
       isFullMode,
+      setIsLoadingContent,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library', isLanguageSupport: true};
@@ -91,6 +92,7 @@ function SlideBoxContent(props) {
       }
       {isEditSms && (
       <SmsEdit
+        setIsLoadingContent={setIsLoadingContent}
         location={creativesLocationProps}
         isFullMode={isFullMode}
         route={{ name: 'sms' }}
@@ -103,6 +105,7 @@ function SlideBoxContent(props) {
         )}
       {isCreateSms && (
       <SmsCreate
+        setIsLoadingContent={setIsLoadingContent}
         location={creativesLocationProps}
         route={{ name: 'sms' }}
         isComponent
@@ -114,6 +117,7 @@ function SlideBoxContent(props) {
         )}
       {isEmailCreate && (
       <EmailWrapper
+        setIsLoadingContent={setIsLoadingContent}
         onEmailModeChange={onEmailModeChange}
         emailCreateMode={emailCreateMode}
         isGetFormData={isGetFormData}
@@ -129,6 +133,7 @@ function SlideBoxContent(props) {
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
       <Email
+        setIsLoadingContent={setIsLoadingContent}
         location={{
           pathname: `/email`,
           query,
@@ -166,5 +171,6 @@ SlideBoxContent.propTypes = {
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
   isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/index.js

@@ -27,6 +27,7 @@ class Creatives extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      isLoadingContent: true,
       templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection
       showSlideBox: true,
       slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
@@ -152,6 +153,11 @@ class Creatives extends React.Component {
       );
     }
   };
+  setIsLoadingContent = (isLoadingContent) => {
+    if (this.state.isLoadingContent !== isLoadingContent) {
+      this.setState({isLoadingContent });
+    }
+  }
   resetStep = () => {
     this.setState((prevState) => {
       let newState = {
@@ -176,18 +182,27 @@ class Creatives extends React.Component {
   shouldShowFooter = () => {
     const {isFullMode} = this.props;
     const {slidBoxContent, currentChannel, emailCreateMode, templateStep} = this.state;
+    const channel = currentChannel.toUpperCase();
+    const currentStep = this.creativesTemplateSteps[templateStep];
     let showFooter = false;
     if (!isFullMode ) {
-      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplateContent';
+      const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
       showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview');
-    } else if (currentChannel === constants.EMAIL && isFullMode) {
-      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplateContent';
+    } else if (channel === constants.EMAIL && isFullMode) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showFooter = isEmailCreate && emailCreateMode;
     }
-    if (currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") {
+    if (channel === constants.EMAIL && emailCreateMode === "upload") {
       showFooter = showFooter && !this.props.isUploading;
     }
+    if (showFooter) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+        showFooter = showFooter && !this.state.isLoadingContent;
+      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+        showFooter = showFooter && !this.state.isLoadingContent;
+      }
+    }
     return showFooter;
   }
   shouldShowDoneFooter = () => {
@@ -244,6 +259,7 @@ class Creatives extends React.Component {
               onEmailNextStep={this.onEmailNextStep}
               onResetStep={this.resetStep}
               cap={cap}
+              setIsLoadingContent={this.setIsLoadingContent}
             />
           }
           footer={this.shouldShowFooter() &&

package/containers/Email/index.js

@@ -504,6 +504,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   componentWillUnmount() {
+    if (this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
+    }
     this.resetStateValue();
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.clearStoreValues();
@@ -2448,6 +2451,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }
+    if (!isLoading && this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(isLoading);
+    }
     return isLoading;
   }
   renderConfirmationModal() {
@@ -2640,6 +2646,7 @@ Email.propTypes = {
   isLoadingMetaEntities: PropTypes.bool,
   // creativesContainerActions: PropTypes.object,
   isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/containers/EmailWrapper/index.js

@@ -143,7 +143,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout} = this.props;
+    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent} = this.props;
     const {templateName, modeContent} = this.state;
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
@@ -166,7 +166,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
               />
               <div>
                 {emailCreateMode === "upload" &&
-                <div>
+                <div style={{ marginLeft: '8px'}}>
                   <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
                     <CapButton>Upload</CapButton>
                   </CapUploader>
@@ -180,6 +180,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
           :
             <div>
               {isShowEmailCreate && <Email
+                setIsLoadingContent={setIsLoadingContent}
                 key="email-create-template"
                 location={this.state.routeParams}
                 route={{ name: 'email' }}
@@ -217,6 +218,7 @@ EmailWrapper.propTypes = {
   onResetStep: PropTypes.func,
   isFullMode: PropTypes.bool,
   isUploading: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Sms/Create/index.js

@@ -175,6 +175,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillUnmount() {
+    if (this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
+    }
     window.removeEventListener("message", this.handleFrameTasks);
   }
 
@@ -923,6 +926,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     // if (isLoading && this.state.loadingStatus >= 2) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }
+    if (!isLoading && this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(isLoading);
+    }
     return isLoading;
   }
   render() {
@@ -992,6 +998,7 @@ Create.propTypes = {
   // creativesContainerActions: PropTypes.object,
   getFormSubscriptionData: PropTypes.func,
   isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Sms/Edit/index.js

@@ -191,6 +191,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillUnmount() {
+    if (this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
+    }
     window.removeEventListener("message", this.handleFrameTasks);
   }
 
@@ -924,6 +927,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     // if (isLoading && this.state.loadingStatus >= 3) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }
+    if (!isLoading && this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(isLoading);
+    }
     return isLoading;
   }
   render() {
@@ -997,6 +1003,7 @@ Edit.propTypes = {
   // creativesContainerActions: PropTypes.object,
   isFullMode: PropTypes.bool,
   getFormSubscriptionData: PropTypes.func,
+  setIsLoadingContent: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/package.json

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