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

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -17,7 +17,7 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import { ANDROID, IOS } from '../constants';
 import messages from '../messages';
-import { getWhatsappQuickReply, getWhatsappCarouselButtonView, getWhatsappDocPreview } from '../../../v2Containers/Whatsapp/utils';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, PHONE_NUMBER, WHATSAPP_CATEGORIES, TEMPLATE_VARIABLE_REGEX } from '../../../v2Containers/Whatsapp/constants';
 import videoPlay from '../../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../TemplatePreview/assets/images/empty_image_preview.svg';
@@ -256,9 +256,9 @@ const WhatsAppPreviewContent = ({
         )}
 
         {/* Document Preview */}
-        {content?.whatsappDocSource && content?.whatsappDocParams && (
+        {content?.docPreview && (
           <CapRow className="whatsapp-image">
-            {getWhatsappDocPreview(content.whatsappDocParams)}
+            {content.docPreview}
           </CapRow>
         )}
 

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/WhatsAppPreviewContent.test.js

@@ -27,7 +27,6 @@ jest.mock('../../../../v2Containers/Whatsapp/constants', () => ({
     authentication: 'authentication',
   },
   TEMPLATE_VARIABLE_REGEX: /\{\{.*?\}\}/,
-  SIZE_UNITS: ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
 }));
 
 // Convert messages object to format expected by IntlProvider
@@ -311,13 +310,7 @@ describe('WhatsAppPreviewContent', () => {
         ...defaultProps,
         content: {
           templateMsg: 'Message',
-          whatsappDocSource: 'https://example.com/doc.pdf',
-          whatsappDocParams: {
-            whatsappDocImg: 'https://example.com/doc-preview.png',
-            whatsappDocName: 'test.pdf',
-            whatsappDocPages: 2,
-            whatsappDocSize: 12345,
-          },
+          docPreview: <div data-testid="doc-preview">Document</div>,
         },
       };
 
@@ -327,7 +320,7 @@ describe('WhatsAppPreviewContent', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByAltText('upload-document-src')).toBeTruthy();
+      expect(screen.getByTestId('doc-preview')).toBeTruthy();
     });
   });
 

package/v2Components/FormBuilder/index.js

@@ -382,7 +382,12 @@ 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') {
-          this.setState({formData: nextProps.formData});
+          // 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});
+          }
         }
 
         if (this.state.usingTabContainer && this.state.tabKey === '') {
@@ -423,14 +428,24 @@ 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)) {
-      // 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});
+      // 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});
+        }
       }
       //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
     } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
@@ -448,7 +463,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({currentTab: nextProps.currentTab});
     }
 
-    if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
+    // 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 (nextProps.isNewVersionFlow) {
         const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
 
@@ -2181,6 +2205,20 @@ 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;

package/v2Containers/CreativesContainer/index.js

@@ -1,4 +1,43 @@
 import React from 'react';
+
+// Isolated input for the email template name field.
+// Manages its own value in local state so keystrokes only re-render this
+// small component, not the entire CreativesContainer → Email → FormBuilder tree.
+class TemplateNameInputField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localValue: props.initialValue || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    // Sync from props only when the external value changed AND the user hasn't
+    // diverged from the previous prop value. This handles async data-load in edit
+    // mode without overwriting what the user is actively typing.
+    if (
+      prevProps.initialValue !== this.props.initialValue &&
+      this.state.localValue === (prevProps.initialValue || '')
+    ) {
+      this.setState({ localValue: this.props.initialValue || '' });
+    }
+  }
+
+  handleChange = (ev) => {
+    const { value } = ev.currentTarget;
+    this.setState({ localValue: value });
+    this.props.onChange(value);
+  };
+
+  render() {
+    const { onChange: _onChange, initialValue: _initialValue, ...rest } = this.props;
+    return (
+      <CapInput
+        {...rest}
+        value={this.state.localValue}
+        onChange={this.handleChange}
+      />
+    );
+  }
+}
 import PropTypes from 'prop-types';
 import {
   CAP_SPACE_16, CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
@@ -191,7 +230,10 @@ export class Creatives extends React.Component {
   // Performance optimized template name update
   performTemplateNameUpdate = (value, formData, onFormDataChange) => {
     const isEmptyTemplateName = !value.trim();
-    const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
+    // _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' };
 
     this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
     onFormDataChange(newFormData);
@@ -1753,30 +1795,24 @@ 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 }) => (
+    <TemplateNameInputField
+      initialValue={name}
+      suffix={<span />}
+      onBlur={() => {
+        this.setState({ isEditName: false }, () => {
+          this.showTemplateName({ formData, onFormDataChange });
+        });
+      }}
+      onChange={(value) => {
+        const isEmptyTemplateName = !value.trim();
+        if (this.state.isTemplateNameEmpty !== isEmptyTemplateName) {
+          this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+        }
+        this.debouncedTemplateNameUpdate(value, formData, onFormDataChange);
+      }}
+    />
+  )
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const {

package/v2Containers/Email/index.js

@@ -795,9 +795,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     delete window?.[CREATIVES_S3_ASSET_FILESIZES];
   }
 
-  onFormDataChange = (updatedFormData, tabCount, currentTab) => {
+  // 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) => {
     // 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'];
     const defaultTemplateName = _.get(defaultData, 'template-name', "");
@@ -809,6 +816,9 @@ 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) {
@@ -821,6 +831,27 @@ 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);
@@ -3129,7 +3160,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   onChange={this.onFormDataChange}
                   currentTab={this.state.currentTab}
                   parent={this}
-                  formData={_.cloneDeep(this.state.formData)}
+                  formData={this.getFormDataForBuilder()}
                   location={this.props.location}
                   tabKey={this.state.tabKey}
                   tags={tags}

package/v2Containers/Whatsapp/index.js

@@ -3058,8 +3058,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg;
         break;
       case WHATSAPP_MEDIA_TYPES.DOCUMENT:
-        mediaPreview.whatsappDocSource = whatsappDocSource;
-        mediaPreview.whatsappDocParams = whatsappDocParams;
+        mediaPreview.docPreview = docPreview;
         break;
       default:
         break;
@@ -3137,9 +3136,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg;
         break;
       case WHATSAPP_MEDIA_TYPES.DOCUMENT:
-        // Intentionally not setting mediaPreview.docPreview = docPreview here — docPreview is JSX
-        // and this object is JSON.stringified by CommonTestAndPreview (circular ref crash).
-        // whatsappDocParams below carries the raw data; WhatsAppPreviewContent renders from that.
+        mediaPreview.docPreview = docPreview;
         break;
       default:
         break;