@capillarytech/creatives-library 3.1.16 → 3.1.18

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -159,6 +159,7 @@ function SlideBoxContent(props) {
           onWeChatMaptemplateStepChange={onWeChatMaptemplateStepChange}
           weChatMaptemplateStep={weChatMaptemplateStep}
           forwardedTags={forwardedTags}
+          setIsLoadingContent={setIsLoadingContent}
         />
       }
       {isEditSms && (
@@ -325,5 +326,7 @@ SlideBoxContent.propTypes = {
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,
   selectedWeChatAccount: PropTypes.object,
+  onWeChatMaptemplateStepChange: PropTypes.func,
+  weChatMaptemplateStep: PropTypes.string,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -376,9 +376,9 @@ class Creatives extends React.Component {
 
 
     if (showFooter) {
-      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection') || (channel === constants.WECHAT && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
-      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection') || (channel === constants.WECHAT && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
       }
     }

package/v2Containers/Email/messages.js

@@ -274,4 +274,8 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.goBackTemporaryChangesLost',
     defaultMessage: "Do you really want to go back? All your temporary changes will be lost!",
   },
+  "alertMessage": {
+    id: 'creatives.containersV2.Email.alertMessage',
+    defaultMessage: 'Alert',
+  },
 });

package/v2Containers/WeChat/MapTemplates/index.js

@@ -439,7 +439,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
       TopColor: "#000000",
       data: {},
-      previewContent: stateFormData['sms-preview'],
       BrandId: (selectedWeChatAccount.configs.brand_id ? selectedWeChatAccount.configs.brand_id : ''),
       OriginalId: selectedWeChatAccount.sourceAccountIdentifier,
       content: encodeURIComponent(editTemplateData.versions.base.content),
@@ -1209,9 +1208,17 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         </CapSpin>
       );
     }
+    isLoading = () => {
+      const isLoading = this.state.isLoading || this.props.fetchingSchema || this.props.WeChat.getTemplateDetailsInProgress;
+      if (!isLoading && this.props.setIsLoadingContent) {
+        this.props.setIsLoadingContent(isLoading);
+      }
+      return isLoading;
+    }
     
     render() {
       const { activeMode, weChatData, isEdit } = this.state;
+      const spinning = this.isLoading();
       let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
       if (this.props.supportedTags) {
         tags = this.props.supportedTags;
@@ -1223,7 +1230,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
             this.renderSelectTemplate() :
             <CapSpin
               tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
-              spinning={this.state.isLoading || this.props.fetchingSchema || (this.props.WeChat.getTemplateDetailsInProgress ? true : false)}>
+              spinning={spinning}>
               <div>
                 <Helmet
                 title="WeChat"
@@ -1284,6 +1291,7 @@ MapTemplates.propTypes = {
   isFullMode: PropTypes.bool,
   getFormData: PropTypes.func,
   weChatMaptemplateStep: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -114,6 +114,9 @@
     height: 56px;
     width: 20px;
     background: white;
+    ::-webkit-scrollbar {
+      display: none;
+    }
     .cap-icon-v2 {
       color: #091e42;
     }
@@ -126,8 +129,15 @@
     }
     .cap-link-v2 {
       max-height: 100%;
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+  .embedded-mode {
+    .cover-image-row {
+      display: none;
     }
-
   }
 }
 .template-form-header {

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -243,7 +243,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       TopColor: "#000000",
       touser: "{{wechat_open_id}}",
       creative_template_id: templateIdFromProp || templateId,
-      previewContent: message.mediaList,
     };
     const response = {
       action: "getFormData",
@@ -898,6 +897,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const formData = this.state.templateData && !isEmpty(this.state.templateData[this.state.currentContentId]) && this.state.templateData[this.state.currentContentId].formData ? cloneDeep(this.state.templateData[this.state.currentContentId].formData) : {};
     return formData;
   }
+  isLoading = () => {
+    const isLoading = this.state.loading;
+    if (!isLoading && this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(isLoading);
+    }
+    return isLoading;
+  }
   render() {
     const cardLayout = this.returnCardLayout();
     const contentMenu = this.returnContentMenu();
@@ -910,7 +916,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     return (
       <div className="richmedia-container">
-        <CapSpin spinning={this.state.loading}>
+        <CapSpin spinning={this.isLoading()}>
           {this.state.showPreview && <WechatRichmediaTemplatePreview
             show={this.state.showPreview}
             closeSlideBox={this.closeSlideBox}
@@ -921,10 +927,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
             content={this.prepareMediaList()}
           />}
           <div>
-            <Helmet
-              title="Wechat Richmedia"
-            />
-            <div className="wechat-container">
+            <div className={`wechat-container ${isIframe && "embedded-mode"}`}>
               <CapRow className="wechat-form-container">
                 <CapColumn span={9}>
                   {cardLayout}
@@ -987,6 +990,7 @@ Create.propTypes = {
   isGetFormData: PropTypes.bool,
   getFormData: PropTypes.func,
   onValidationFail: PropTypes.func,
+  setIsLoadingContent: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/WeChat/RichmediaTemplates/Create/richmediaschema.js

@@ -57,6 +57,7 @@ export default {
                   }],
               },
               {
+                rowClassName: "cover-image-row",
                 cols: [
                   {
                     id: "upload-image-label",
@@ -91,6 +92,7 @@ export default {
                   }],
               },
               {
+                rowClassName: "cover-image-row",
                 cols: [
                   {
                     id: "upload-image-inductive-text",
@@ -110,7 +112,7 @@ export default {
                   }],
               },
               {
-                rowClassName: "wechat-richmedia-row",
+                rowClassName: "wechat-richmedia-row cover-image-row",
                 cols: [
                   {
                     id: "image-value",

package/v2Containers/WeChat/Wrapper/index.js

@@ -96,6 +96,7 @@ export class Wrapper extends React.Component { // eslint-disable-line react/pref
           {...getCommonProps(this.props)}
           />);
       default:
+        this.props.setIsLoadingContent(false);
         return (<CardContainer>
           <CapRadioCardWithLabel
             label={<FormattedMessage {...messages.templateType}/>}
@@ -183,6 +184,7 @@ Wrapper.propTypes = {
   onWechatTemplateChange: PropTypes.func,
   query: PropTypes.object,
   selectedWeChatAccount: PropTypes.object,
+  setIsLoadingContent: PropTypes.func,
 };
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/WeChat/helper.js

@@ -8,5 +8,6 @@ export function getCommonProps(props) {
     'onValidationFail',
     'weChatMaptemplateStep',
     'onWeChatMaptemplateStepChange',
+    'setIsLoadingContent',
   ]);
 }