@capillarytech/creatives-library 8.0.199-alpha.0 → 8.0.200-alpha.0

package/constants/unified.js

@@ -44,7 +44,6 @@ export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
 export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
-export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';

package/package.json

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

package/utils/common.js

@@ -21,8 +21,7 @@ import {
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
-  LIQUID_SUPPORT,
-  ENABLE_NEW_MPUSH
+  LIQUID_SUPPORT
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -126,11 +125,6 @@ export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );
 
-export const hasNewMobilePushFeatureEnabled = Auth.hasFeatureAccess.bind(
-  null,
-  ENABLE_NEW_MPUSH,
-);
-
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/utils/createMobilePushPayload.js

@@ -62,12 +62,33 @@ const createMobilePushPayload = ({
     throw new Error(intl.formatMessage(messages.templateNameEmptyError));
   }
 
-  // Validate content
-  if (isAndroidSupported && (!androidContent?.title || !androidContent?.message)) {
-    throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
-  }
-  if (isIosSupported && (!iosContent?.title || !iosContent?.message)) {
-    throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
+  // Validate content - allow single platform if explicitly allowed
+  const allowSinglePlatform = options?.allowSinglePlatform || false;
+  
+  if (!allowSinglePlatform) {
+    // Normal validation: require all supported platforms to have content
+    if (isAndroidSupported && (!androidContent?.title || !androidContent?.message)) {
+      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
+    }
+    if (isIosSupported && (!iosContent?.title || !iosContent?.message)) {
+      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
+    }
+  } else {
+    // Single platform mode: require at least one platform to have content
+    const hasAndroidContent = isAndroidSupported && androidContent?.title?.trim() && androidContent?.message?.trim();
+    const hasIosContent = isIosSupported && iosContent?.title?.trim() && iosContent?.message?.trim();
+    
+    if (!hasAndroidContent && !hasIosContent) {
+      throw new Error(intl.formatMessage(messages.singlePlatformContentMissing));
+    }
+    
+    // Validate individual platforms that are supported but have incomplete content
+    if (isAndroidSupported && !hasAndroidContent && androidContent) {
+      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
+    }
+    if (isIosSupported && !hasIosContent && iosContent) {
+      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
+    }
   }
 
   // Ensure imageSrc has the required properties

package/utils/tests/createMobilePushPayload.test.js

@@ -261,6 +261,59 @@ describe('createMobilePushPayload', () => {
         accountData: unsupportedAccountData,
       })).not.toThrow();
     });
+
+    // Single Platform Mode Tests
+    it('should allow single platform when allowSinglePlatform is true - Android only', () => {
+      expect(() => callWithIntl({
+        templateName: 'Test',
+        androidContent: { title: 'Title', message: 'Message' },
+        iosContent: null,
+        accountData: mockAccountData,
+        options: { allowSinglePlatform: true },
+      })).not.toThrow();
+    });
+
+    it('should allow single platform when allowSinglePlatform is true - iOS only', () => {
+      expect(() => callWithIntl({
+        templateName: 'Test',
+        androidContent: null,
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+        options: { allowSinglePlatform: true },
+      })).not.toThrow();
+    });
+
+    it('should throw error when no platforms have content even with allowSinglePlatform', () => {
+      expect(() => callWithIntl({
+        templateName: 'Test',
+        androidContent: null,
+        iosContent: null,
+        accountData: mockAccountData,
+        options: { allowSinglePlatform: true },
+      })).toThrow(intl.formatMessage(messages.singlePlatformContentMissing));
+    });
+
+    it('should validate individual platforms in single platform mode - Android incomplete', () => {
+      // Test case where iOS has valid content but Android has incomplete content
+      expect(() => callWithIntl({
+        templateName: 'Test',
+        androidContent: { title: 'Valid Title' }, // Missing message property
+        iosContent: { title: 'Valid Title', message: 'Valid Message' }, // Complete content
+        accountData: mockAccountData,
+        options: { allowSinglePlatform: true },
+      })).toThrow(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
+    });
+
+    it('should validate individual platforms in single platform mode - iOS incomplete', () => {
+      // Test case where Android has valid content but iOS has incomplete content
+      expect(() => callWithIntl({
+        templateName: 'Test',
+        androidContent: { title: 'Valid Title', message: 'Valid Message' }, // Complete content
+        iosContent: { title: 'Valid Title' }, // Missing message property
+        accountData: mockAccountData,
+        options: { allowSinglePlatform: true },
+      })).toThrow(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
+    });
   });
 
   // Account Data Validation Tests

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/SlideBoxContent.js

@@ -668,9 +668,7 @@ export function SlideBoxContent(props) {
       />
         )}
       {isEditMPush && (
-        (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
-        (!isFullMode && isLoyaltyModule) || 
-        (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewMobilePushFeatureEnabled()) ? (
+        (!isFullMode && isLoyaltyModule) ? (
           <MobliPushEdit
             getFormLibraryData={getFormData}
             setIsLoadingContent={setIsLoadingContent}
@@ -726,9 +724,7 @@ export function SlideBoxContent(props) {
         )
       )}
       {isCreateMPush && (
-        (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
-        (!isFullMode && isLoyaltyModule) || 
-        (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewMobilePushFeatureEnabled()) ? (
+        (!isFullMode && isLoyaltyModule) ? (
           <MobilepushWrapper
             key="creatives-mobilepush-wrapper"
             date={new Date().getMilliseconds()}

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
+        });
       }
     }
   }