@capillarytech/creatives-library 8.0.199 → 8.0.200

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -139,8 +139,196 @@ 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());
   }
@@ -2027,6 +2215,64 @@ 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' || 
+      val.type === 'input' || 
+      val.type === 'textarea'
+    );
+    
+    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;
@@ -2186,6 +2432,57 @@ 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' || val.type === 'input' || val.type === 'textarea')) {
+      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);
@@ -2601,6 +2898,7 @@ 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 || ""}
@@ -2682,6 +2980,7 @@ 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}
@@ -3166,6 +3465,7 @@ 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(BeeEditor));
+export default compose(withReducer, withSaga, withConnect)(injectIntl(React.memo(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,
+  isEmpty, get, forEach, cloneDeep, debounce,
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
@@ -105,6 +105,8 @@ 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 = {
@@ -112,6 +114,9 @@ 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() {
@@ -119,6 +124,11 @@ export class Creatives extends React.Component {
       this.props.templateActions.resetTemplateStoreData();
     }
     this.props.globalActions.clearMetaEntities();
+
+    // Cleanup debounced function
+    if (this.debouncedTemplateNameUpdate) {
+      this.debouncedTemplateNameUpdate.cancel();
+    }
   }
 
   componentDidMount() {
@@ -136,6 +146,29 @@ 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 = () => {
@@ -1395,21 +1428,30 @@ export class Creatives extends React.Component {
       } />
   )
 
-  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);
-      }}
-    />
-  )
+  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);
+        }}
+      />
+    );
+  }
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const { slidBoxContent, currentChannel, isEditName } = this.state;
@@ -1423,7 +1465,10 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({ showTemplateNameComponentEdit: true });
+        this.setState({ 
+          showTemplateNameComponentEdit: true,
+          localTemplateName: name || '' // Initialize local state with current value
+        });
       }
     }
   }

package/v2Containers/Email/index.js

@@ -2516,6 +2516,9 @@ 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'];