@capillarytech/creatives-library 8.0.202 → 8.0.204

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -139,196 +139,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     // Check if the liquid flow feature is supported and the channel is in the supported list.
     this.liquidFlow = this.isLiquidFlowSupported.bind(this);
     this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
-    
-    // Performance optimization: Debounced functions for high-frequency updates
-    this.debouncedUpdateFormData = _.debounce((data, val, event, skipStateUpdate) => {
-      this.performFormDataUpdate(data, val, event, skipStateUpdate);
-    }, 300);
-    this.debouncedValidation = _.debounce(this.validateForm.bind(this), 500);
-  
-  // Memoized validation cache
-  this.validationCache = new Map();
-
-  }
-  
-  // Helper function to generate unique tab ID
-  generateUniqueTabId(formData, tabIndex) {
-    let id = _.uniqueId();
-    let validId = false;
-    
-    while (!validId) {
-      validId = true;
-      for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
-        if (!formData[tabIndex]) {
-          continue;
-        }
-        if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
-          validId = false;
-          break;
-        }
-      }
-      if (!validId) {
-        id = _.uniqueId();
-      }
-    }
-    
-    return id;
-  }
-
-  // Performance optimized form data update function
-  performFormDataUpdate(data, val, event, skipStateUpdate = false) {
-    
-    // Use optimized state update instead of deep cloning
-    const formData = this.optimizedFormDataUpdate(data, val, event);
-    
-    const tabIndex = this.state.currentTab - 1;
-    let currentTab = this.state.currentTab;
-
-    if (this.state.usingTabContainer && !val.standalone) {
-      const data1 = data;
-      if (event === "addLanguage") {
-        const addLanguageType = this.props.addLanguageType;
-        if (addLanguageType === '') {
-          return;
-        }
-        const currentLang = formData[tabIndex].activeTab;
-        let baseTab;
-        
-        switch (addLanguageType) {
-          case "upload":
-            baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
-
-            baseTab.iso_code = data.iso_code;
-            baseTab.lang_id = data.lang_id;
-            baseTab.language = data.language;
-            baseTab.tabKey = this.generateUniqueTabId(formData, tabIndex);
-            
-            formData[tabIndex][data.iso_code] = baseTab;
-            formData[tabIndex].activeTab = data.iso_code;
-            formData[tabIndex].tabKey = baseTab.tabKey;
-            break;
-          case "copyPrimaryLanguage":
-          case "useEditor":
-            baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
-
-            baseTab.iso_code = data.iso_code;
-            baseTab.lang_id = data.lang_id;
-            baseTab.language = data.language;
-            baseTab.tabKey = this.generateUniqueTabId(formData, tabIndex);
-            
-            formData[tabIndex].selectedLanguages.push(data.iso_code);
-            formData[tabIndex][data.iso_code] = baseTab;
-            formData[tabIndex].activeTab = data.iso_code;
-            formData[tabIndex].tabKey = baseTab.tabKey;
-            break;
-          case '':
-            return;
-          default:
-            break;
-        }
-        const that = this;
-        setTimeout(() => {
-          that.setState({tabKey: baseTab.tabKey});
-        }, 0);
-      }
-
-      if (!this.props.isNewVersionFlow) {
-        formData[tabIndex][val.id] = data1;
-      } else if (this.props.isNewVersionFlow && event !== "addLanguage" && event !== "onContentChange") {
-        formData[tabIndex][this.props.baseLanguage][val.id] = data1;
-      }
-
-      if (formData[tabIndex].base) {
-        if (!this.props.isNewVersionFlow) {
-          formData.base[val.id] = data1;
-        } else {
-          formData.base[data1.iso_code] = formData[tabIndex][data1.iso_code];
-          formData.base.tabKey = formData[tabIndex].tabKey;
-          formData.base.activeTab = formData[tabIndex].activeTab;
-          formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
-        }
-      }
-    } else {
-      formData[val.id] = data;
-    }
-
-    if (this.props.isNewVersionFlow) {
-      if (event === 'onSelect' && data === 'New Version') {
-        this.callChildEvent(data, val, 'addVersion', event);
-      } else if (event === 'onSelect' && data !== 'New Version') {
-        currentTab = _.findIndex(this.state.formData['template-version-options'], { key: data}) + 1;
-        this.setState({currentTab, tabKey: formData[`${currentTab - 1}`].tabKey}, () => {
-          val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
-        });
-      }
-
-      if (event === 'onContentChange') {
-        // Content change handling
-      }
-    }
 
-    // Only update state if not already updated (for immediate UI feedback)
-    if (!skipStateUpdate) {
-      this.setState({formData}, () => {
-        if (this.props.startValidation) {
-          this.debouncedValidation();
-        }
-      });
-    } else {
-      // Just trigger validation if state was already updated
-      if (this.props.startValidation) {
-        this.debouncedValidation();
-      }
-    }
-    
-    if (event && val.injectedEvents[event]) {
-      if (event === "onRowClick") {
-        val.injectedEvents[event].call(this, data);
-      } else if (this.props.isNewVersionFlow && event !== 'onSelect') {
-        if (event === 'addLanguage') {
-          val.injectedEvents[event].call(this, data, formData, val);
-          this.setState({currentEventVal: {}, currentEvent: {}, currentEventData: {}});
-        } else {
-          val.injectedEvents[event].call(this, true, formData, val);
-        }
-      } else if (!this.props.isNewVersionFlow) {
-        val.injectedEvents[event].call(this, true, formData, val);
-      }
-    } else if (val.injectedEvents && val.injectedEvents.onChange) {
-      val.injectedEvents.onChange.call(this, true, formData, val);
-    }
-
-    if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
-      this.props.onChange(formData, this.state.tabCount, currentTab, val);
-    }
-  }
-
-  // Optimized form data update - only clone what's necessary
-  optimizedFormDataUpdate(data, val, event) {
-    const currentFormData = this.state.formData;
-    
-    // For simple field updates, use spread operator instead of deep clone
-    if (!this.state.usingTabContainer || val.standalone) {
-      return {
-        ...currentFormData,
-        [val.id]: data
-      };
-    }
-    
-    // For tab container updates, only clone the affected tab
-    const tabIndex = this.state.currentTab - 1;
-    const updatedFormData = { ...currentFormData };
-    
-    if (updatedFormData[tabIndex]) {
-      updatedFormData[tabIndex] = {
-        ...updatedFormData[tabIndex],
-        [val.id]: data
-      };
-    }
-    
-    return updatedFormData;
   }
-
   isLiquidFlowSupported = () => {
     return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
   }
@@ -457,7 +269,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
       this.setState({formData: nextProps.formData, currentLangTab}, () => {
         if (nextProps?.isNewVersionFlow && !this.state?.formData[this.state?.currentTab - 1][this.state?.formData[this.state?.currentTab - 1]?.activeTab]?.tabKey) {
-            this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
+          this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
         if (type === 'embedded' || ( this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
           // Don't run validation if we're in Test & Preview mode
@@ -1104,7 +916,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if(_.isEmpty(androidData) && this.state.currentTab == 2){
-          this.setState({androidValid, iosValid, errorData}, () => {
+          this.setState({androidValid, iosValid}, () => {
             this.props.setModalContent('ios');
           });
           // modal.body = "Android template is not configured. Save without Android template";
@@ -1119,7 +931,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if(_.isEmpty(iosData) && this.state.currentTab == 1){
-          this.setState({androidValid, iosValid, errorData}, () => {
+          this.setState({androidValid, iosValid}, () => {
             this.props.setModalContent('android');
           });
           // modal.body = "IOS template is not configured, Save without IOS template";
@@ -2215,62 +2027,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   updateFormData(data, val, event) {
-    
-    // Check if this is a high-frequency input field that should be optimized
-    const isHighFrequencyField = val && (
-      val.id === 'template-name' || 
-      val.id === 'template-subject'
-    );
-    
-    if (isHighFrequencyField && !event) {
-      // For high-frequency fields: immediate UI update + debounced expensive operations
-      this.updateFormDataOptimized(data, val, event);
-      return;
-    }
-    
-    // For non-high-frequency fields or special events, use immediate update
-    this.performFormDataUpdate(data, val, event);
-  }
-
-  // Optimized update for high-frequency fields
-  updateFormDataOptimized(data, val, event) {
-    // 1. Immediate UI update - update the field value instantly
-    this.updateFieldValueImmediately(data, val);
-    
-    // 2. Debounce expensive operations (validation, parent updates) - skip state update since we already did it
-    this.debouncedUpdateFormData(data, val, event, true);
-  }
-
-  // Update field value immediately for UI feedback
-  updateFieldValueImmediately(data, val) {
-    const currentFormData = this.state.formData;
-    let updatedFormData;
-    
-    if (!this.state.usingTabContainer || val.standalone) {
-      // Simple field update
-      updatedFormData = {
-        ...currentFormData,
-        [val.id]: data
-      };
-    } else {
-      // Tab container update
-      const tabIndex = this.state.currentTab - 1;
-      updatedFormData = { ...currentFormData };
-      
-      if (updatedFormData[tabIndex]) {
-        updatedFormData[tabIndex] = {
-          ...updatedFormData[tabIndex],
-          [val.id]: data
-        };
-      }
-    }
-    
-    // Update state immediately for UI feedback
-    this.setState({ formData: updatedFormData });
-  }
-
-  // Legacy updateFormData function - kept for backward compatibility
-  updateFormDataLegacy(data, val, event) {
     const formData = _.cloneDeep(this.state.formData);
 
     const tabIndex = this.state.currentTab - 1;
@@ -2430,57 +2186,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   hasClass(element, className) {
     return (` ${element.className} `).indexOf(` ${className} `) > -1;
   }
-
-  // Handle field blur for validation
-  handleFieldBlur = (e, val) => {
-    // Trigger validation on blur for high-frequency fields
-    if (val && (val.id === 'template-name' || val.id === 'template-subject')) {
-      this.debouncedValidation();
-    }
-  }
-
-  // Memoized validation for specific fields
-  getMemoizedValidation = (fieldId, fieldValue) => {
-    const cacheKey = `${fieldId}_${fieldValue}`;
-    
-    if (this.validationCache.has(cacheKey)) {
-      return this.validationCache.get(cacheKey);
-    }
-    
-    // Perform validation logic here
-    const isValid = this.performFieldValidation(fieldId, fieldValue);
-    this.validationCache.set(cacheKey, isValid);
-    
-    // Clear cache if it gets too large
-    if (this.validationCache.size > 100) {
-      this.validationCache.clear();
-    }
-    
-    return isValid;
-  }
-
-  // Perform validation for a specific field
-  performFieldValidation = (fieldId, fieldValue) => {
-    // Basic validation logic for template-name and template-subject
-    if (fieldId === 'template-name' || fieldId === 'template-subject') {
-      return fieldValue && fieldValue.trim().length > 0;
-    }
-    return true;
-  }
-
-  // Cleanup debounced functions on component unmount
-  componentWillUnmount() {
-    if (this.debouncedUpdateFormData) {
-      this.debouncedUpdateFormData.cancel();
-    }
-    if (this.debouncedValidation) {
-      this.debouncedValidation.cancel();
-    }
-    // Clear validation cache
-    if (this.validationCache) {
-      this.validationCache.clear();
-    }
-  }
   allowAddSecondaryCta = (val) => {
     if (val.fieldsCount > 0) {
       const errorData = _.cloneDeep(this.state.errorData);
@@ -2896,7 +2601,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
-            onBlur={(e) => this.handleFieldBlur(e, val)}
             style={val.style ? val.style : {}}
             defaultValue={messageContent || ''}
             value={messageContent || ""}
@@ -2978,7 +2682,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   style={val.style ? val.style : {}}
                   placeholder={val.placeholder}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
-                  onBlur={(e) => this.handleFieldBlur(e, val)}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   value={value || ""}
                   disabled={val.disabled}
@@ -3463,7 +3166,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     style={val.style ? val.style : {}}
                     placeholder={val.placeholder}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
-                    onBlur={(e) => this.handleFieldBlur(e, val)}
                     value={value || ""}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}

package/v2Containers/BeeEditor/index.js

@@ -349,4 +349,4 @@ const withConnect = connect(mapStateToProps, mapDispatchToProps);
 const withSaga = injectSaga({ key: 'beeEditor', saga: v2BeeEditionSagas });
 const withReducer = injectReducer({ key: 'beeEditor', reducer: v2BeeEditionReducer });
 
-export default compose(withReducer, withSaga, withConnect)(injectIntl(React.memo(BeeEditor)));
+export default compose(withReducer, withSaga, withConnect)(injectIntl(BeeEditor));

package/v2Containers/CreativesContainer/index.js

@@ -11,7 +11,7 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {
-  isEmpty, get, forEach, cloneDeep, debounce,
+  isEmpty, get, forEach, cloneDeep,
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
@@ -105,8 +105,6 @@ export class Creatives extends React.Component {
       // NEW: Test and Preview feature state
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
-      // Performance optimization: Local template name for immediate UI feedback
-      localTemplateName: '',
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -114,9 +112,6 @@ export class Creatives extends React.Component {
       2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
       3: 'createTemplateContent',
     };
-
-    // Performance optimization: Debounced template name update
-    this.debouncedTemplateNameUpdate = debounce(this.performTemplateNameUpdate.bind(this), 300);
   }
 
   componentWillUnmount() {
@@ -124,11 +119,6 @@ export class Creatives extends React.Component {
       this.props.templateActions.resetTemplateStoreData();
     }
     this.props.globalActions.clearMetaEntities();
-
-    // Cleanup debounced function
-    if (this.debouncedTemplateNameUpdate) {
-      this.debouncedTemplateNameUpdate.cancel();
-    }
   }
 
   componentDidMount() {
@@ -146,29 +136,6 @@ export class Creatives extends React.Component {
 
   onEnterTemplateName = () => {
     this.setState({ templateNameExists: true });
-  }
-
-  // Performance optimized template name update
-  performTemplateNameUpdate = (value, formData, onFormDataChange) => {
-    const isEmptyTemplateName = !value.trim();
-    const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
-
-    this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
-    onFormDataChange(newFormData);
-  }
-
-  // Update template name immediately for UI feedback
-  updateTemplateNameImmediately = (value, formData, onFormDataChange) => {
-    const isEmptyTemplateName = !value.trim();
-
-    // 1. IMMEDIATE: Update local state for instant UI feedback
-    this.setState({ 
-      isTemplateNameEmpty: isEmptyTemplateName,
-      localTemplateName: value 
-    });
-
-    // 2. DEBOUNCED: Only debounce the expensive onFormDataChange call
-    this.debouncedTemplateNameUpdate(value, formData, onFormDataChange);
   };
 
   onRemoveTemplateName = () => {
@@ -1428,30 +1395,21 @@ export class Creatives extends React.Component {
       } />
   )
 
-  templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
-    // Use local state for immediate UI feedback, fallback to prop value
-    const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-    
-    return (
-      <CapInput
-        value={displayValue}
-        suffix={<span />}
-        onBlur={() => { 
-          this.setState({ 
-            isEditName: false,
-            localTemplateName: '' // Clear local state on blur
-          }, () => { 
-            this.showTemplateName({ formData, onFormDataChange }); 
-          }); 
-        }}
-        onChange={(ev) => {
-          const { value } = ev.currentTarget;
-          // Use optimized update for better performance
-          this.updateTemplateNameImmediately(value, formData, onFormDataChange);
-        }}
-      />
-    );
-  }
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
+    <CapInput
+      value={name}
+      suffix={<span />}
+      onBlur={() => { this.setState({ isEditName: false }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }}
+      onChange={(ev) => {
+        const { value } = ev.currentTarget;
+        const isEmptyTemplateName = !value.trim();
+
+        const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
+        this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+        onFormDataChange(newFormData);
+      }}
+    />
+  )
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const { slidBoxContent, currentChannel, isEditName } = this.state;
@@ -1465,10 +1423,7 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({ 
-          showTemplateNameComponentEdit: true,
-          localTemplateName: name || '' // Initialize local state with current value
-        });
+        this.setState({ showTemplateNameComponentEdit: true });
       }
     }
   }

package/v2Containers/Email/index.js

@@ -2516,9 +2516,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
         obj.versions.history.push(newdata);
       }
-      if (index === "template-subject") {
-        obj.versions.history[0].subject = newdata;
-      }
     });
     //const data = formData[`${this.state.currentTab - 1}`];
     obj.name = formData['template-name'];

package/v2Containers/MobilePush/Create/index.js

@@ -207,6 +207,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       {
         formData: newFormData,
         tabCount,
+        isSchemaChanged:
+          compareValue?.toLowerCase() === EXTERNAL_LINK_LOWERCASE ||
+          !this.state?.isSchemaChanged,
       },
       () => {
         if (isFullMode && showTemplateName) {
@@ -217,9 +220,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       }
     );
-    this.setState({isSchemaChanged:
-      compareValue?.toLowerCase() === EXTERNAL_LINK_LOWERCASE ||
-      !this.state?.isSchemaChanged});
   };
 
   onTagSelect = (data, currentTab, srcComp) => {