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

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

@@ -200,370 +200,6 @@ describe('ViberPreviewContent', () => {
 
       expect(screen.getByText('Click Here')).toBeTruthy();
     });
-
-    it('should not render button when buttonText has only whitespace', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            messageContent: 'Message',
-            buttonText: '   ',
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-button-base')).toBeFalsy();
-    });
-  });
-
-  describe('Carousel Content', () => {
-    it('should render no content when carousel is selected but cards are empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: '',
-                mediaUrl: '',
-                buttons: [
-                  { title: '', action: '' },
-                ],
-              },
-              {
-                text: '   ',
-                mediaUrl: '   ',
-                buttons: [
-                  { title: '   ', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('No content available')).toBeTruthy();
-    });
-
-    it('should render carousel cards when type is CAROUSEL', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card 1 text',
-                mediaUrl: 'https://image.url/card1.jpg',
-                buttons: [
-                  { title: 'Button 1', action: 'https://example.com/1' },
-                ],
-              },
-              {
-                text: 'Card 2 text',
-                mediaUrl: 'https://image.url/card2.jpg',
-                buttons: [
-                  { title: 'Button 2', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Card 1 text')).toBeTruthy();
-      expect(screen.getByText('Card 2 text')).toBeTruthy();
-      expect(screen.getByText('Button 1')).toBeTruthy();
-      expect(screen.getByText('Button 2')).toBeTruthy();
-    });
-
-    it('should not render empty carousel button placeholder', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card 1 text',
-                mediaUrl: 'https://image.url/card1.jpg',
-                buttons: [
-                  { title: '', action: 'https://example.com/1' },
-                  { title: '   ', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-preview-button')).toBeNull();
-    });
-
-    it('should show carousel shell when showCarouselEditorPreview is true even if cards are empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            showCarouselEditorPreview: true,
-            cards: [
-              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
-              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.queryByText('No content available')).toBeNull();
-      expect(container.querySelector('.viber-carousel-preview-scroll')).toBeTruthy();
-      expect(container.querySelector('.viber-carousel-message-box-placeholder')).toBeTruthy();
-    });
-
-    it('should render carousel message text in message box when type is CAROUSEL', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            messageContent: 'Carousel intro copy',
-            cards: [
-              {
-                text: 'Card text',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [{ title: 'Go', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-message-box-text')).toHaveTextContent('Carousel intro copy');
-      expect(screen.queryByText('Carousel intro copy')).toBeTruthy();
-    });
-
-    it('should hide account icon when carousel is shown', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Carousel card line',
-                mediaUrl: '',
-                buttons: [{ title: 'Open link', action: 'https://x.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-account-icon')).toBeNull();
-    });
-
-    it('should use image placeholder when carousel card mediaUrl is whitespace only', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Only text',
-                mediaUrl: '   ',
-                buttons: [{ title: 'Btn', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-preview-image-placeholder')).toBeTruthy();
-      expect(container.querySelector('.viber-carousel-preview-image')).toBeNull();
-    });
-
-    it('should render at most two carousel buttons per card', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [
-                  { title: 'One', action: 'https://a.com' },
-                  { title: 'Two', action: 'https://b.com' },
-                  { title: 'Three', action: 'https://c.com' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelectorAll('.viber-carousel-preview-button')).toHaveLength(2);
-      expect(screen.getByText('One')).toBeTruthy();
-      expect(screen.getByText('Two')).toBeTruthy();
-      expect(screen.queryByText('Three')).toBeNull();
-    });
-
-    it('should apply secondary class to second carousel button', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [
-                  { title: 'Primary', action: 'https://a.com' },
-                  { title: 'Secondary', action: 'https://b.com' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      const buttons = container.querySelectorAll('.viber-carousel-preview-button');
-      expect(buttons[0].className).toContain('viber-carousel-preview-button');
-      expect(buttons[0].className).not.toContain('viber-carousel-preview-button-secondary');
-      expect(buttons[1].className).toContain('viber-carousel-preview-button-secondary');
-    });
-
-    it('should show carousel when only a button title is present on a card', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: '',
-                mediaUrl: '',
-                buttons: [{ title: 'Tap me', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Tap me')).toBeTruthy();
-      expect(screen.queryByText('No content available')).toBeNull();
-    });
-
-    it('should show one placeholder card when editor preview and cards array is empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            showCarouselEditorPreview: true,
-            cards: [],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelectorAll('.viber-carousel-preview-card')).toHaveLength(1);
-    });
-
-    it('should show no content when CAROUSEL has empty cards and no editor preview flag', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('No content available')).toBeTruthy();
-    });
   });
 
   describe('Account and Brand Name', () => {

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}