@capillarytech/creatives-library 8.0.353-alpha.2 → 8.0.353-alpha.4

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -79,6 +79,69 @@ const errorMessageForTags = {
   TAG_BRACKET_COUNT_MISMATCH_ERROR: 'tagBracketCountMismatchError'
 };
 
+// Isolated input for EMAIL template-name: only this tiny component re-renders on each keystroke.
+// formData is updated only on blur (onCommit), eliminating all re-renders during typing.
+class HighFreqInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localValue: props.value || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value && this.state.localValue !== this.props.value) {
+      this.setState({ localValue: this.props.value || '' });
+    }
+  }
+
+  handleChange = (e) => {
+    this.setState({ localValue: e.target.value });
+  };
+
+  handleBlur = (e) => {
+    this.props.onCommit(this.state.localValue);
+    if (this.props.onBlur) this.props.onBlur(e);
+  };
+
+  render() {
+    const { value: _v, onCommit: _oc, onBlur: _ob, ...rest } = this.props;
+    return <CapInput {...rest} value={this.state.localValue} onChange={this.handleChange} onBlur={this.handleBlur} />;
+  }
+}
+
+// Isolated wrapper for EMAIL template-subject: blur-only commit, same as HighFreqInput.
+class HighFreqTagInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localInputValue: props.inputValue || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.inputValue !== this.props.inputValue && this.state.localInputValue !== this.props.inputValue) {
+      this.setState({ localInputValue: this.props.inputValue || '' });
+    }
+  }
+
+  handleInputChange = (e) => {
+    this.setState({ localInputValue: e.target.value });
+  };
+
+  handleBlur = () => {
+    this.props.onCommit(this.state.localInputValue);
+  };
+
+  render() {
+    const { inputValue: _iv, onCommit: _oc, inputOnChange: _ic, ...rest } = this.props;
+    return (
+      <CapTagListWithInput
+        {...rest}
+        inputValue={this.state.localInputValue}
+        inputOnChange={this.handleInputChange}
+        inputProps={{ ...(this.props.inputProps || {}), onBlur: this.handleBlur }}
+      />
+    );
+  }
+}
+
 class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -352,6 +415,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({tabCount: nextProps.tabCount});
     }
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
+      if (this.debouncedUpdateFormData) this.debouncedUpdateFormData.flush();
       this.setState({checkValidation: true});
       this.validateForm(null, null, true, true, () => {
         //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
@@ -382,12 +446,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.setState({formData: nextProps.formData, tabCount: nextProps.tabCount});
           // this.resetTabKeys(nextProps.formData, nextProps.tabCount);
         } else if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL') {
-          // Skip state overwrite when only high-frequency fields changed — FormBuilder
-          // already updated them via updateFieldValueImmediately, so overwriting here
-          // would cause a redundant full re-render ~300ms after every keystroke.
-          if (!this._isOnlyHighFreqUpdate(nextProps.formData, this.state.formData)) {
-            this.setState({formData: nextProps.formData});
-          }
+          this.setState({formData: nextProps.formData});
         }
 
         if (this.state.usingTabContainer && this.state.tabKey === '') {
@@ -428,24 +487,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
       && !_.isEqual(nextProps.formData, this.state.formData) &&
       !_.isEqual(nextProps.formData, this.props.formData)) {
-      // For EMAIL: skip state overwrite when only high-frequency fields (template-name /
-      // template-subject) changed — they are already correct via updateFieldValueImmediately.
-      const isEmailHighFreqOnly = (
-        this.props.schema &&
-        this.props.schema.channel &&
-        this.props.schema.channel.toUpperCase() === 'EMAIL' &&
-        this._isOnlyHighFreqUpdate(nextProps.formData, this.state.formData)
-      );
-      if (!isEmailHighFreqOnly) {
-        // Don't run validation if we're in Test & Preview mode
-        if (!nextProps.isTestAndPreviewMode) {
-          this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
-            this.validateForm();
-          });
-        } else {
-          // Just update formData without validation
-          this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey});
-        }
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
+          this.validateForm();
+        });
+      } else {
+        // Just update formData without validation
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey});
       }
       //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
     } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
@@ -463,16 +512,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({currentTab: nextProps.currentTab});
     }
 
-    // For EMAIL: check high-freq first (cheap) to avoid the expensive _.isEqual
-    // and the setState + validateForm cascade triggered by every debounced keystroke.
-    const isEmailHighFreqOnly = (
-      !_.isEmpty(nextProps.formData) &&
-      this.props.schema &&
-      this.props.schema.channel &&
-      this.props.schema.channel.toUpperCase() === 'EMAIL' &&
-      this._isOnlyHighFreqUpdate(nextProps.formData, this.state.formData)
-    );
-    if (!isEmailHighFreqOnly && !_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
+    if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
       if (nextProps.isNewVersionFlow) {
         const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
 
@@ -2205,20 +2245,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.debouncedUpdateFormData(data, val, event, true);
   }
 
-  // Returns true when the only differences between newData and currentData are
-  // the high-frequency standalone fields (template-name / template-subject).
-  // Uses reference equality for all other keys — safe because shallow spreads in
-  // optimizedFormDataUpdate and updateFieldValueImmediately preserve nested refs.
-  _isOnlyHighFreqUpdate(newData, currentData) {
-    if (!newData || !currentData) return false;
-    // isTemplateNameEdited is set alongside template-name by performTemplateNameUpdate
-    // and treated as a high-freq field so it doesn't break the reference equality check.
-    const HIGH_FREQ_FIELDS = ['template-name', 'template-subject', 'isTemplateNameEdited'];
-    return Object.keys(newData).every(
-      key => HIGH_FREQ_FIELDS.includes(key) || newData[key] === currentData[key]
-    );
-  }
-
   // Update field value immediately for UI feedback
   updateFieldValueImmediately(data, val) {
     const currentFormData = this.state.formData;
@@ -3448,40 +3474,62 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               ? formatMessage(messages.personalizationTagsErrorMessage)
               : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
             if (styling === 'semantic') {
-              columns.push(
-              <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
-                  <CapInput
-                    id={val.id}
-                    errorMessage={errorMessageText}
-                    label={val.label}
-                    inductiveText={val.inductiveText}
-                    className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
-                    // fluid={val.fluid}
-                    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}
-                    size={val.size || "default"}
-                  />
-                  {this.props.schema?.channel === EMAIL &&
-                    !aiContentBotDisabled && (
-                      <CapAskAira.ContentGenerationBot
-                        text={value || ""}
-                        setText={this.handleSetText.bind(this, val)}
-                        iconPlacement="float-br"
-                        iconSize="1.6rem"
-                        rootStyle={{
-                          bottom: "0.2rem",
-                          right: "0.2rem",
-                          left: "auto",                           
-                        }}
-                      />
-                    )}
-                </CapColumn>
-              );
+              const isEmailStandaloneHighFreq = val.standalone && this.props.schema?.channel?.toUpperCase() === 'EMAIL';
+              if (isEmailStandaloneHighFreq) {
+                columns.push(
+                  <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                    <HighFreqInput
+                      id={val.id}
+                      errorMessage={errorMessageText}
+                      label={val.label}
+                      inductiveText={val.inductiveText}
+                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                      style={val.style ? val.style : {}}
+                      placeholder={val.placeholder}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                      onBlur={(e) => this.handleFieldBlur(e, val)}
+                      value={value || ""}
+                      disabled={val.disabled}
+                      size={val.size || "default"}
+                    />
+                  </CapColumn>
+                );
+              } else {
+                columns.push(
+                <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                    <CapInput
+                      id={val.id}
+                      errorMessage={errorMessageText}
+                      label={val.label}
+                      inductiveText={val.inductiveText}
+                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                      // fluid={val.fluid}
+                      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}
+                      size={val.size || "default"}
+                    />
+                    {this.props.schema?.channel === EMAIL &&
+                      !aiContentBotDisabled && (
+                        <CapAskAira.ContentGenerationBot
+                          text={value || ""}
+                          setText={this.handleSetText.bind(this, val)}
+                          iconPlacement="float-br"
+                          iconSize="1.6rem"
+                          rootStyle={{
+                            bottom: "0.2rem",
+                            right: "0.2rem",
+                            left: "auto",
+                          }}
+                        />
+                      )}
+                  </CapColumn>
+                );
+              }
             }
             break;
 
@@ -3722,37 +3770,48 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isBEEAppEnableForCapTagList === false ||
               channelForCapTagList !== 'EMAIL'
             ) {
+              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === 'EMAIL' && val.id === 'template-subject';
+              const tagListProps = {
+                key: `input-${val.id}`,
+                inputId: val.id,
+                inputValue: this.state.formData[val.id] || '',
+                inputPlaceholder: val.placeholder || '',
+                inputErrorMessage: val.errorMessage && ifError ? val.errorMessage : '',
+                inputRequired: val.required || false,
+                inputDisabled: val.disabled || false,
+                headingText: val.label || '',
+                headingStyle: val.headingStyle || { marginTop: '3%', marginRight: '79%' },
+                headingType: "h4",
+                onTagSelect: (data) => this.callChildEvent(data, val, 'onTagSelect'),
+                onContextChange: this.props.onContextChange,
+                location: this.props.location,
+                tags: this.props.tags ? this.props.tags : [],
+                injectedTags: this.props.injectedTags ? this.props.injectedTags : {},
+                className: val.className ? val.className : '',
+                userLocale: this.state.translationLang,
+                selectedOfferDetails: this.props.selectedOfferDetails,
+                eventContextTags: this.props?.eventContextTags,
+                waitEventContextTags: this.props?.waitEventContextTags,
+                moduleFilterEnabled: moduleFilterEnabledForCapTagList,
+                containerStyle: val.style || {},
+                inputProps: val.inputProps || {},
+                showInput: val.showInput !== false,
+                showTagList: val.showTagList !== false,
+                restrictPersonalization: this.props.restrictPersonalization,
+              };
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
-                  <CapTagListWithInput
-                    key={`input-${val.id}`}
-                    inputId={val.id}
-                    inputValue={this.state.formData[val.id] || ''}
-                    inputOnChange={(e) => this.updateFormData(e.target.value, val)}
-                    inputPlaceholder={val.placeholder || ''}
-                    inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    inputRequired={val.required || false}
-                    inputDisabled={val.disabled || false}
-                    headingText={val.label || ''}
-                    headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
-                    headingType="h4"
-                    onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
-                    onContextChange={this.props.onContextChange}
-                    location={this.props.location}
-                    tags={this.props.tags ? this.props.tags : []}
-                    injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
-                    className={val.className ? val.className : ''}
-                    userLocale={this.state.translationLang}
-                    selectedOfferDetails={this.props.selectedOfferDetails}
-                    eventContextTags={this.props?.eventContextTags}
-                    waitEventContextTags={this.props?.waitEventContextTags}
-                    moduleFilterEnabled={moduleFilterEnabledForCapTagList}
-                    containerStyle={val.style || {}}
-                    inputProps={val.inputProps || {}}
-                    showInput={val.showInput !== false}
-                    showTagList={val.showTagList !== false}
-                    restrictPersonalization={this.props.restrictPersonalization}
-                  />
+                  {isEmailStandaloneSubject ? (
+                    <HighFreqTagInput
+                      {...tagListProps}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                    />
+                  ) : (
+                    <CapTagListWithInput
+                      {...tagListProps}
+                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    />
+                  )}
                 </CapColumn>
               );
             }

package/v2Containers/CreativesContainer/index.js

@@ -24,16 +24,21 @@ class TemplateNameInputField extends React.Component {
   handleChange = (ev) => {
     const { value } = ev.currentTarget;
     this.setState({ localValue: value });
-    this.props.onChange(value);
+    if (this.props.onChange) this.props.onChange(value);
+  };
+
+  handleBlur = () => {
+    if (this.props.onBlur) this.props.onBlur(this.state.localValue);
   };
 
   render() {
-    const { onChange: _onChange, initialValue: _initialValue, ...rest } = this.props;
+    const { onChange: _onChange, initialValue: _initialValue, onBlur: _ob, ...rest } = this.props;
     return (
       <CapInput
         {...rest}
         value={this.state.localValue}
         onChange={this.handleChange}
+        onBlur={this.handleBlur}
       />
     );
   }
@@ -230,10 +235,7 @@ export class Creatives extends React.Component {
   // Performance optimized template name update
   performTemplateNameUpdate = (value, formData, onFormDataChange) => {
     const isEmptyTemplateName = !value.trim();
-    // _highFreqField signals Email's onFormDataChange that only a high-frequency
-    // standalone field changed, enabling the fast-path cache in getFormDataForBuilder
-    // and skipping the expensive FormBuilder re-render + validateForm cascade.
-    const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true, _highFreqField: 'template-name' };
+    const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
 
     this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
     onFormDataChange(newFormData);
@@ -1799,17 +1801,15 @@ export class Creatives extends React.Component {
     <TemplateNameInputField
       initialValue={name}
       suffix={<span />}
-      onBlur={() => {
-        this.setState({ isEditName: false }, () => {
-          this.showTemplateName({ formData, onFormDataChange });
-        });
+      onBlur={(committedValue) => {
+        this.performTemplateNameUpdate(committedValue, formData, onFormDataChange);
+        this.setState({ isEditName: false });
       }}
       onChange={(value) => {
         const isEmptyTemplateName = !value.trim();
         if (this.state.isTemplateNameEmpty !== isEmptyTemplateName) {
           this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
         }
-        this.debouncedTemplateNameUpdate(value, formData, onFormDataChange);
       }}
     />
   )

package/v2Containers/Email/index.js

@@ -795,15 +795,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     delete window?.[CREATIVES_S3_ASSET_FILESIZES];
   }
 
-  // performFormDataUpdate in FormBuilder passes `val` as the 4th arg to props.onChange.
-  // CreativesContainer.performTemplateNameUpdate passes _highFreqField on the formData object.
-  // Both paths set _highFreqUpdate so getFormDataForBuilder can use the fast-path cache.
-  onFormDataChange = (updatedFormData, tabCount, currentTab, val) => {
+  onFormDataChange = (updatedFormData, tabCount, currentTab) => {
     // this.transformFormData(formData);
     const formData = {...updatedFormData};
-    // Consume and clean up the CC-path signal before storing in state
-    const highFreqField = (val && val.id) || updatedFormData._highFreqField;
-    delete formData._highFreqField;
 
     const {defaultData = {}, isFullMode, showTemplateName} = this.props;
     const templateName = formData['template-name'];
@@ -816,10 +810,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData['template-name'] = templateName;
     }
 
-    // Must be set before setState so getFormDataForBuilder reads it during the triggered re-render.
-    const HIGH_FREQ_FIELDS = ['template-name', 'template-subject'];
-    this._highFreqUpdate = !!(highFreqField && HIGH_FREQ_FIELDS.includes(highFreqField));
-
     this.setState({formData, tabCount, isSchemaChanged: false}, () => {
       if (this.props.isFullMode && showTemplateName) {
         showTemplateName({formData, onFormDataChange: this.onFormDataChange});
@@ -831,27 +821,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     //this.resetCkEditorInstance(currentTab, formData);
   }
 
-  // Returns a formData object safe to pass to FormBuilder.
-  // For high-frequency field updates (template-name / template-subject) patches only
-  // those fields into the existing cache, avoiding an expensive _.cloneDeep of the
-  // entire email formData (HTML content, tabs, language variants) on every keystroke.
-  // All other operations (tab changes, language add/delete, etc.) still get a full clone.
-  getFormDataForBuilder = () => {
-    const formData = this.state.formData;
-    if (this._highFreqUpdate && this._formDataBuilderCache) {
-      this._formDataBuilderCache = {
-        ...this._formDataBuilderCache,
-        'template-name': formData['template-name'],
-        'template-subject': formData['template-subject'],
-        'isTemplateNameEdited': formData['isTemplateNameEdited'],
-      };
-    } else {
-      this._formDataBuilderCache = _.cloneDeep(formData);
-    }
-    this._highFreqUpdate = false;
-    return this._formDataBuilderCache;
-  }
-
   onChange = (evt) => {
     const {isFullMode, showTemplateName} = this.props;
     const formData = _.cloneDeep(this.state.formData);
@@ -3160,7 +3129,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   onChange={this.onFormDataChange}
                   currentTab={this.state.currentTab}
                   parent={this}
-                  formData={this.getFormDataForBuilder()}
+                  formData={_.cloneDeep(this.state.formData)}
                   location={this.props.location}
                   tabKey={this.state.tabKey}
                   tags={tags}