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

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}

package/v2Containers/Templates/index.js

@@ -104,6 +104,9 @@ import {
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
+  EXTERNAL_URL,
+  URL,
+  SITE_URL,
 } from '../App/constants';
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
@@ -1399,6 +1402,69 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         };
       }
 
+      case WEBPUSH: {
+        // WebPush content is stored in creatives format (brandIcon, onClickAction, ctas)
+        // Must be transformed to campaign/test-message format matching getTemplateContent() in WebPush/Create/index.js
+        const webpushContent = get(baseContent, 'content.webpush', {});
+        const title = webpushContent?.title || '';
+        const message = webpushContent?.message || '';
+        const accountId = get(template, 'definition.accountId', null);
+        const templateName = template?.name || '';
+
+        // iconImageUrl stored as brandIcon in creatives format
+        const iconImageUrl = webpushContent?.brandIcon || webpushContent?.iconImageUrl || undefined;
+
+        // cta stored as onClickAction in creatives format (type: URL|SITE_URL, url)
+        // or already as cta in campaign format (type: EXTERNAL_URL|SITE_URL, actionLink)
+        let cta = null;
+        const onClickAction = webpushContent?.onClickAction;
+        const existingCta = webpushContent?.cta;
+        if (onClickAction) {
+          const ctaType = onClickAction.type === URL ? EXTERNAL_URL : (onClickAction.type || SITE_URL);
+          cta = { type: ctaType, actionLink: onClickAction.url || '' };
+        } else if (existingCta) {
+          cta = { type: existingCta.type || EXTERNAL_URL, actionLink: existingCta.actionLink || '' };
+        }
+
+        // expandableDetails: image → media[], ctas[] → mapped ctas
+        const image = webpushContent?.image;
+        const rawCtas = webpushContent?.ctas;
+        const existingExpandable = webpushContent?.expandableDetails;
+        let expandableDetails = null;
+        const hasImage = !!image;
+        const hasCtas = Array.isArray(rawCtas) && rawCtas.length > 0;
+        if (hasImage || hasCtas) {
+          expandableDetails = {
+            media: hasImage ? [{ url: image, type: IMAGE }] : [],
+            ctas: hasCtas ? rawCtas.map((ctaItem) => ({
+              type: ctaItem?.type === URL ? EXTERNAL_URL : (ctaItem?.type || EXTERNAL_URL),
+              action: ctaItem?.action || '',
+              title: ctaItem?.actionText || ctaItem?.title || '',
+              actionLink: ctaItem?.actionLink || '',
+            })) : [],
+          };
+        } else if (existingExpandable) {
+          expandableDetails = {
+            media: existingExpandable?.media || [],
+            ctas: existingExpandable?.ctas || [],
+          };
+        }
+
+        return {
+          channel: WEBPUSH,
+          accountId,
+          content: {
+            title,
+            message,
+            ...(iconImageUrl ? { iconImageUrl } : {}),
+            ...(cta ? { cta } : {}),
+            ...(expandableDetails ? { expandableDetails } : {}),
+          },
+          messageSubject: templateName || title,
+          offers: [],
+        };
+      }
+
       default:
         console.warn(`Unsupported channel for content extraction: ${channelUpper}`);
         return null;
@@ -1411,7 +1477,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
    * @returns {Boolean} - True if channel supports Test and Preview
    */
   isTestAndPreviewSupported = () => {
-    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
     return supportedChannels.includes(this.state.channel.toUpperCase());
   }
 
@@ -1971,7 +2037,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           // Show preview icon only for channels that don't support Test and Preview
           (() => {
             // Channels that have Test and Preview integrated
-            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
             const isTestAndPreviewSupported = testAndPreviewChannels.includes(currentChannel.toUpperCase());
 
             // Don't show preview icon if channel supports Test and Preview

package/v2Containers/Templates/tests/webpush.test.js

@@ -0,0 +1,375 @@
+/**
+ * Tests for Templates container - WEBPUSH channel additions
+ *
+ * Covers:
+ * - extractTemplateContentForPreview for WEBPUSH channel
+ * - isTestAndPreviewSupported with WEBPUSH channel
+ */
+
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { Templates } from '../index';
+
+jest.mock('../../CreativesContainer', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div className="creatives-container-mock" {...props}>
+      CreativesContainer
+    </div>
+  ),
+}));
+
+// Helper: build a valid template for WEBPUSH
+// extractTemplateContentForPreview reads:
+//   - template.versions.base.content.webpush  → webpushContent
+//   - template.definition.accountId           → accountId
+//   - template.name                            → templateName
+const makeTemplate = (webpush = {}, extra = {}) => ({
+  name: 'My Template',
+  definition: { accountId: 'acc-123' },
+  versions: {
+    base: {
+      content: { webpush },
+    },
+  },
+  ...extra,
+});
+
+describe('Templates - WEBPUSH channel', () => {
+  const mockActions = {
+    getWeCrmAccounts: jest.fn(),
+    setChannelAccount: jest.fn(),
+    getAllTemplates: jest.fn(),
+    getUserList: jest.fn(),
+    getSenderDetails: jest.fn(),
+    resetTemplate: jest.fn(),
+    setArchivedMode: jest.fn(),
+    clearTemplateSelection: jest.fn(),
+    toggleTemplateSelection: jest.fn(),
+  };
+
+  const baseProps = {
+    route: { name: 'webpush' },
+    Templates: { templates: [] },
+    actions: mockActions,
+    location: { pathname: '/webpush', query: {}, search: '' },
+    EmailCreate: { duplicateTemplateInProgress: false },
+    isFullMode: false,
+    intl: { formatMessage: jest.fn((msg) => msg.defaultMessage || '') },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (channel = 'webpush') => {
+    const props = { ...baseProps, route: { name: channel } };
+    return shallowWithIntl(<Templates {...props} />);
+  };
+
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('isTestAndPreviewSupported', () => {
+    it('should return true for WEBPUSH channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'webpush' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for WEBPUSH in uppercase state', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'WEBPUSH' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for EMAIL channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'email' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for SMS channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'sms' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for INAPP channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'inapp' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for VIBER channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'viber' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return true for ZALO channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'zalo' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(true);
+    });
+
+    it('should return false for WHATSAPP channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'whatsapp' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(false);
+    });
+
+    it('should return false for RCS channel', () => {
+      const component = renderComponent('webpush');
+      component.setState({ channel: 'rcs' });
+      expect(component.instance().isTestAndPreviewSupported()).toBe(false);
+    });
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('extractTemplateContentForPreview - WEBPUSH channel', () => {
+    it('should return null when template has no versions.base', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const component = renderComponent('webpush');
+      const result = component.instance().extractTemplateContentForPreview(
+        { name: 'T', definition: {} },
+        'WEBPUSH'
+      );
+      expect(result).toBeNull();
+      consoleSpy.mockRestore();
+    });
+
+    it('should extract title and message from versions.base.content.webpush', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'Push Title', message: 'Push body' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result).toBeDefined();
+      expect(result.channel).toBe('WEBPUSH');
+      expect(result.accountId).toBe('acc-123');
+      expect(result.content.title).toBe('Push Title');
+      expect(result.content.message).toBe('Push body');
+      expect(result.messageSubject).toBe('My Template');
+      expect(result.offers).toEqual([]);
+    });
+
+    it('should fall back to title for messageSubject when template name is empty', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'Title Only', message: 'M' }, { name: '' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.messageSubject).toBe('Title Only');
+    });
+
+    it('should extract brandIcon as iconImageUrl', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        brandIcon: 'https://example.com/brand.png',
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.iconImageUrl).toBe('https://example.com/brand.png');
+    });
+
+    it('should use iconImageUrl field when brandIcon is absent', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        iconImageUrl: 'https://example.com/icon.png',
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.iconImageUrl).toBe('https://example.com/icon.png');
+    });
+
+    it('should NOT include iconImageUrl when neither brandIcon nor iconImageUrl present', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.iconImageUrl).toBeUndefined();
+    });
+
+    it('should convert onClickAction type URL to EXTERNAL_URL cta', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        onClickAction: { type: 'URL', url: 'https://example.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toEqual({ type: 'EXTERNAL_URL', actionLink: 'https://example.com' });
+    });
+
+    it('should preserve onClickAction type SITE_URL as-is', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        onClickAction: { type: 'SITE_URL', url: 'https://site.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toEqual({ type: 'SITE_URL', actionLink: 'https://site.com' });
+    });
+
+    it('should use existingCta when onClickAction is absent', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        cta: { type: 'EXTERNAL_URL', actionLink: 'https://existing.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toEqual({ type: 'EXTERNAL_URL', actionLink: 'https://existing.com' });
+    });
+
+    it('should default existingCta type to EXTERNAL_URL when type is missing', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        cta: { actionLink: 'https://example.com' },
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta.type).toBe('EXTERNAL_URL');
+    });
+
+    it('should NOT include cta when neither onClickAction nor cta present', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.cta).toBeUndefined();
+    });
+
+    it('should build expandableDetails from image and ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        image: 'https://example.com/image.jpg',
+        ctas: [{ type: 'URL', actionText: 'Click', actionLink: 'https://a.com', action: '' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails).toBeDefined();
+      expect(result.content.expandableDetails.media).toEqual([
+        { url: 'https://example.com/image.jpg', type: 'IMAGE' },
+      ]);
+      expect(result.content.expandableDetails.ctas[0].title).toBe('Click');
+      expect(result.content.expandableDetails.ctas[0].type).toBe('EXTERNAL_URL');
+    });
+
+    it('should convert CTA type URL → EXTERNAL_URL in expandableDetails.ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        ctas: [{ type: 'URL', actionText: 'Go', actionLink: 'https://x.com' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.ctas[0].type).toBe('EXTERNAL_URL');
+    });
+
+    it('should keep EXTERNAL_URL type unchanged in expandableDetails.ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        ctas: [{ type: 'EXTERNAL_URL', title: 'Go', actionLink: 'https://x.com' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.ctas[0].type).toBe('EXTERNAL_URL');
+    });
+
+    it('should build image-only expandableDetails when no ctas', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        image: 'https://example.com/img.jpg',
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.media).toHaveLength(1);
+      expect(result.content.expandableDetails.ctas).toEqual([]);
+    });
+
+    it('should build ctas-only expandableDetails when no image', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        ctas: [{ type: 'EXTERNAL_URL', actionText: 'Btn', actionLink: 'https://b.com' }],
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails.media).toEqual([]);
+      expect(result.content.expandableDetails.ctas).toHaveLength(1);
+    });
+
+    it('should use existingExpandable when no image and no ctas', () => {
+      const component = renderComponent('webpush');
+      const existingExpandable = {
+        media: [{ url: 'https://example.com/existing.jpg', type: 'IMAGE' }],
+        ctas: [{ title: 'Existing', actionLink: 'https://existing.com', type: 'EXTERNAL_URL' }],
+      };
+      const template = makeTemplate({
+        title: 'T',
+        message: 'M',
+        expandableDetails: existingExpandable,
+      });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails).toEqual(existingExpandable);
+    });
+
+    it('should NOT include expandableDetails when none present', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result.content.expandableDetails).toBeUndefined();
+    });
+
+    it('should handle empty webpush content gracefully', () => {
+      const component = renderComponent('webpush');
+      const template = makeTemplate({}, { name: '' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result).toBeDefined();
+      expect(result.content.title).toBe('');
+      expect(result.content.message).toBe('');
+    });
+
+    it('should handle missing definition.accountId gracefully (returns null)', () => {
+      const component = renderComponent('webpush');
+      const template = {
+        name: 'T',
+        versions: { base: { content: { webpush: { title: 'T', message: 'M' } } } },
+        // no definition
+      };
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'WEBPUSH');
+      expect(result).toBeDefined();
+      expect(result.accountId).toBeNull();
+    });
+
+    it('should return null for unsupported channel', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const component = renderComponent('webpush');
+      const template = makeTemplate({ title: 'T', message: 'M' });
+
+      const result = component.instance().extractTemplateContentForPreview(template, 'UNSUPPORTED_CHANNEL');
+      expect(result).toBeNull();
+      consoleSpy.mockRestore();
+    });
+  });
+});