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

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

@@ -200,6 +200,370 @@ 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,12 +382,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 +423,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 +448,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 +2181,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;

package/v2Containers/CreativesContainer/index.js

@@ -1,43 +1,4 @@
 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,
@@ -230,10 +191,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);
@@ -1795,24 +1753,30 @@ export class Creatives extends React.Component {
       } />
   )
 
-  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);
-      }}
-    />
-  )
+  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 {

package/v2Containers/Email/index.js

@@ -795,16 +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'];
     const defaultTemplateName = _.get(defaultData, 'template-name', "");
@@ -816,9 +809,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) {
@@ -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}