@capillarytech/creatives-library 9.0.72 → 9.1.0

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -12,7 +12,7 @@ import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import EmailHTMLEditor from '../EmailHTMLEditor';
 import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
-import { validateTags } from '../../../../utils/tagValidations';
+import { validateTags, hasUnsubscribeTag } from '../../../../utils/tagValidations';
 import { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
 import { downloadHtmlFile } from '../../../../utils/downloadFile';
 
@@ -23,6 +23,7 @@ jest.mock('../../../../utils/commonUtils', () => ({
 
 jest.mock('../../../../utils/tagValidations', () => ({
   validateTags: jest.fn(),
+  hasUnsubscribeTag: jest.fn(() => false),
 }));
 
 jest.mock('../../../../utils/common', () => ({
@@ -217,11 +218,12 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
     React.useEffect(() => {
       setValue(props.inputValue || '');
     }, [props.inputValue]);
+    const isPreheader = props.inputId === 'template-preheader';
     return (
       <div data-testid="cap-tag-list-input">
         <input
-          id="template-subject"
-          data-testid="subject-input"
+          id={props.inputId || 'template-subject'}
+          data-testid={isPreheader ? 'preheader-input' : 'subject-input'}
           value={value}
           onChange={(e) => {
             setValue(e.target.value);
@@ -233,16 +235,35 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
         />
         <button
           onClick={() => props.onTagSelect && props.onTagSelect('customer.name')}
-          data-testid="trigger-tag-select"
+          data-testid={isPreheader ? 'preheader-trigger-tag-select' : 'trigger-tag-select'}
         >
           Select Tag
         </button>
+        {isPreheader && (
+          <button
+            onClick={() => props.onTagSelect && props.onTagSelect('')}
+            data-testid="preheader-trigger-tag-select-empty"
+          >
+            Select Empty Tag
+          </button>
+        )}
         <button
           onClick={() => props.onContextChange && props.onContextChange('default')}
-          data-testid="trigger-context-change"
+          data-testid={isPreheader ? 'preheader-trigger-context-change' : 'trigger-context-change'}
         >
           Change Context
         </button>
+        {props.extraContent}
+        {props.inputProps && props.inputProps.prefix}
+        {props.inputProps && props.inputProps.suffix}
+        <span data-testid={isPreheader ? 'preheader-exclude-tags' : 'subject-exclude-tags'}>
+          {JSON.stringify(props.excludeTags || [])}
+        </span>
+        {props.inputErrorMessage && (
+          <span data-testid={isPreheader ? 'preheader-error' : 'subject-error'}>
+            {props.inputErrorMessage}
+          </span>
+        )}
       </div>
     );
   };
@@ -407,6 +428,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
+    hasUnsubscribeTag.mockReturnValue(false);
     isEmailUnsubscribeTagOptional.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
@@ -754,6 +776,186 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('Pre-header Handling', () => {
+    const revealPreheader = () => {
+      fireEvent.click(screen.getByText('+ Pre-header'));
+    };
+
+    it('uses the updated placeholder text and 85-character limit', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      expect(screen.getByTestId('preheader-input').placeholder).toBe('e.g. Get 20% off your next order');
+      expect(screen.getByText('0 / 85')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'Hello' } });
+      expect(screen.getByText('5 / 85')).toBeInTheDocument();
+    });
+
+    it('shows an info tooltip icon next to the Pre-header label', () => {
+      const { container } = renderWithIntl();
+      revealPreheader();
+
+      expect(container.querySelector('.cap-icon-v2-info-circle')).toBeInTheDocument();
+    });
+
+    it('inserts tag into Pre-header field at the cursor position', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello ' } });
+      Object.defineProperty(input, 'selectionStart', { value: 6, writable: true });
+      Object.defineProperty(input, 'selectionEnd', { value: 6, writable: true });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello {{customer.name}}');
+    });
+
+    it('appends the tag when the Pre-header input has no selection', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      Object.defineProperty(input, 'selectionStart', { value: undefined, writable: true });
+      Object.defineProperty(input, 'selectionEnd', { value: undefined, writable: true });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello{{customer.name}}');
+    });
+
+    it('appends the tag when the Pre-header input element is not found', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      input.remove();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+      // Should handle gracefully without throwing
+    });
+
+    it('falls back to a safe append when reading the Pre-header input throws', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      Object.defineProperty(input, 'selectionStart', {
+        configurable: true,
+        get() { throw new Error('boom'); },
+      });
+
+      expect(() => fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'))).not.toThrow();
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello{{customer.name}}');
+    });
+
+    it('does nothing when the Pre-header tag select fires without data', () => {
+      renderWithIntl();
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'Hello' } });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select-empty'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello');
+    });
+
+    it('inserts a tag into an empty Pre-header field', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('{{customer.name}}');
+    });
+
+    it('handles the Pre-header context-change trigger', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-context-change'));
+      // Exercises handleOnTagsContextChange for the Pre-header field
+    });
+
+    it('clears a stale Pre-header error once the user edits the field again', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData />
+        </IntlProvider>
+      );
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}} extra' } });
+
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+    });
+
+    it('blocks save for an invalid Pre-header even when onValidationFail is not provided', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const emailActions = {
+        ...defaultProps.emailActions,
+        createTemplate: jest.fn((obj, callback) => callback({ templateId: { _id: '123', versions: {} } })),
+      };
+      const props = { ...defaultProps, emailActions };
+      delete props.onValidationFail;
+      const { rerender } = render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...props} isGetFormData={false} />
+        </IntlProvider>
+      );
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      expect(() => rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...props} isGetFormData />
+        </IntlProvider>
+      )).not.toThrow();
+
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+      expect(emailActions.createTemplate).not.toHaveBeenCalled();
+    });
+
+    it('removes the Pre-header field, clearing its value and error, when Remove is clicked', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData />
+        </IntlProvider>
+      );
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText('Remove'));
+
+      expect(screen.queryByTestId('preheader-input')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+      expect(screen.getByText('+ Pre-header')).toBeInTheDocument();
+    });
+
+    it('defaults injectedTags to {} for the Pre-header tag list when the prop is falsy', () => {
+      // null (not undefined) is required here: a static defaultProps entry only kicks in for
+      // undefined, so deleting the prop would never actually exercise the `|| {}` fallback.
+      expect(() => render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} injectedTags={null} />
+        </IntlProvider>
+      )).not.toThrow();
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      expect(screen.getByTestId('preheader-input')).toBeInTheDocument();
+    });
+  });
+
   describe('Content Change Handling', () => {
     it('updates content when HTMLEditor changes', () => {
       renderWithIntl();
@@ -899,6 +1101,63 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
+    it('hides the unsubscribe tag from the Pre-header Add Label dropdown but not Subject\'s', () => {
+      renderWithIntl();
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      expect(screen.getByTestId('preheader-exclude-tags')).toHaveTextContent(JSON.stringify(['unsubscribe']));
+      expect(screen.getByTestId('subject-exclude-tags')).toHaveTextContent(JSON.stringify([]));
+    });
+
+    it('blocks save and shows an inline error when Pre-header contains the unsubscribe tag', async () => {
+      const onValidationFail = jest.fn();
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ onValidationFail, isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+      expect(defaultProps.emailActions.createTemplate).not.toHaveBeenCalled();
+      expect(screen.getByTestId('preheader-error')).toHaveTextContent('Unsubscribe tag is not allowed in Pre-header.');
+    });
+
+    it('allows save when Pre-header does not contain the unsubscribe tag', async () => {
+      hasUnsubscribeTag.mockReturnValue(false);
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      const { rerender } = renderWithIntl({
+        isGetFormData: false, templateName: 'New Template', emailActions, getLiquidTags: null,
+      });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'A normal preheader' } });
+      fireEvent.click(screen.getByTestId('trigger-content-change'));
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData templateName="New Template" emailActions={emailActions} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 3000 });
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+    });
+
     it('blocks save when there are HTML validation errors', async () => {
       const onValidationFail = jest.fn();
       // Mock getAllIssues to return BLOCKING errors (sanitizer errors or client-side Liquid errors)

package/v2Containers/EmailWrapper/components/_emailHTMLEditor.scss

@@ -9,3 +9,32 @@
 .html-editor-options-icon {
   cursor: pointer;
 }
+
+// Subject/Pre-header field rows
+.email-html-editor-field {
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.email-html-editor-add-preheader-btn {
+  white-space: nowrap;
+}
+
+// Subject/Pre-header inline prefix label and Pre-header suffix (counter + Remove)
+.email-html-editor-prefix {
+  padding-right: $CAP_SPACE_08;
+  margin-right: $CAP_SPACE_08;
+  border-right: 0.0625rem solid $CAP_COLOR_16;
+}
+
+.email-html-editor-prefix-label {
+  font-weight: 600;
+}
+
+.email-html-editor-counter {
+  white-space: nowrap;
+}
+
+.email-html-editor-remove-link {
+  white-space: nowrap;
+  cursor: pointer;
+}

package/v2Containers/EmailWrapper/constants.js

@@ -4,6 +4,8 @@
  *
  */
 
+import { UNSUBSCRIBE_TAG } from '../../constants/unified';
+
 export const DEFAULT_ACTION = "app/EmailWrapper/DEFAULT_ACTION";
 export const EMAIL_CREATE_MODES = {
   UPLOAD: "upload",
@@ -17,3 +19,6 @@ export const STEPS = {
   TEMPLATE_SELECTION: "templateSelection",
   CREATE_TEMPLATE_CONTENT: "createTemplateContent",
 };
+
+// Unsubscribe is not a valid Pre-header tag — hide it from the "Add Label" dropdown there.
+export const PREHEADER_EXCLUDED_TAGS = [UNSUBSCRIBE_TAG];

package/v2Containers/EmailWrapper/messages.js

@@ -122,6 +122,30 @@ export default defineMessages({
     id: 'creatives.containersV2.EmailWrapper.enterEmailSubject',
     defaultMessage: 'Enter Email Subject',
   },
+  preheader: {
+    id: 'creatives.containersV2.EmailWrapper.preheader',
+    defaultMessage: 'Pre-header',
+  },
+  enterEmailPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.enterEmailPreheader',
+    defaultMessage: 'e.g. Get 20% off your next order',
+  },
+  preheaderInfoTooltip: {
+    id: 'creatives.containersV2.EmailWrapper.preheaderInfoTooltip',
+    defaultMessage: 'Shows next to the subject line in the inbox, use it to add context and improve open rates. Keep it to 40–85 characters.',
+  },
+  addPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.addPreheader',
+    defaultMessage: '+ Pre-header',
+  },
+  removePreheader: {
+    id: 'creatives.containersV2.EmailWrapper.removePreheader',
+    defaultMessage: 'Remove',
+  },
+  unsubscribeNotAllowedInPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.unsubscribeNotAllowedInPreheader',
+    defaultMessage: 'Unsubscribe tag is not allowed in Pre-header.',
+  },
   editorType: {
     id: 'creatives.containersV2.EmailWrapper.editorType',
     defaultMessage: 'Editor type',

package/v2Containers/MobilePush/Create/constants.js

@@ -23,3 +23,4 @@ export const GET_IOS_CTAS_SUCCESS = 'app/v2Containers/PushMessage/Create/GET_IOS
 export const GET_IOS_CTAS_FAILURE = 'app/v2Containers/PushMessage/Create/GET_IOS_CTAS_FAILURE';
 export const RESET_STORE = 'app/v2Containers/PushMessage/Create/RESET_STORE';
 export const EXTERNAL_LINK_LOWERCASE = 'external link';
+export const MOBILE_PUSH_PLATFORM_COUNT = 2;

package/v2Containers/MobilePush/Create/index.js

@@ -81,7 +81,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (typeof this.props.onContentValidityChange !== 'function') {
       return;
     }
-    const validity = getMobilePushEmbeddedContentValidity(this.state?.formData, this.state?.tabCount);
+    const validity = getMobilePushEmbeddedContentValidity(this.state?.formData);
     const isContentEmpty = !!validity.isContentEmpty;
     if (this._lastReportedMobilePushContentEmpty === isContentEmpty) return;
     this._lastReportedMobilePushContentEmpty = isContentEmpty;
@@ -187,7 +187,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       this.setState({showIosCtaTable: true});
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema)) {
-      const schema = this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.imageSchema;
+      const schema = cloneDeep(this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.imageSchema);
       const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
       const isIosSupported = get(this, "props.Templates.selectedWeChatAccount.configs.ios") === '1';
       if (!isAndroidSupported) {

package/v2Containers/MobilePush/Create/test/contentValidity.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { cloneDeep } from 'lodash';
 import { Create } from '../index';
+import { response as mpushSchemaResponse } from '../../initialSchema';
 
 // Shallow-render the plain class (bypassing the withCreatives/Redux/saga HOC) so this test
 // only exercises the componentDidUpdate → onContentValidityChange wiring in isolation.
@@ -56,6 +58,25 @@ describe('MobilePush/Create — onContentValidityChange reporting', () => {
     );
   });
 
+  it('reports isContentEmpty: false when only iOS has content', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Create {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: { 0: { 'message-title': '', 'message-editor': '' }, 1: {} },
+      tabCount: 1,
+    });
+    onContentValidityChange.mockClear();
+
+    wrapper.setState({
+      formData: { 0: { 'message-title': '', 'message-editor': '' }, 1: { 'message-title2': 'test', 'message-editor2': 'test' } },
+      tabCount: 1,
+    });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: false }),
+    );
+  });
+
   it('re-reports empty when a previously entered message is cleared out', () => {
     const onContentValidityChange = jest.fn();
     const wrapper = shallow(<Create {...baseProps()} onContentValidityChange={onContentValidityChange} />);
@@ -94,3 +115,40 @@ describe('MobilePush/Create — onContentValidityChange reporting', () => {
     expect(onContentValidityChange).not.toHaveBeenCalled();
   });
 });
+
+describe('MobilePush/Create — shared layout schema', () => {
+  it('hides Android on its own schema copy, leaving the store layout untouched', () => {
+    const storeSchema = cloneDeep(mpushSchemaResponse.metaEntities[0].definition.textSchema);
+    const standaloneSectionCount = storeSchema.standalone.sections.length;
+    const wrapper = shallow(<Create
+      {...baseProps()}
+      params={{ mode: 'text' }}
+      Templates={{ selectedWeChatAccount: { id: 669, configs: { android: '0', ios: '1' } } }}
+    />);
+    wrapper.instance().injectEvents = jest.fn();
+    wrapper.setProps({ metaEntities: { layouts: [{ definition: { textSchema: storeSchema } }], tags: {} } });
+
+    const [ownSchema] = wrapper.instance().injectEvents.mock.calls[0];
+    expect(ownSchema).not.toBe(storeSchema);
+    expect(ownSchema.containers[0].panes[0].isSupported).toBe(false);
+    expect(wrapper.state('currentTab')).toBe(2);
+    expect(storeSchema.containers[0].panes[0].isSupported).toBe(true);
+    expect(storeSchema.standalone.sections).toHaveLength(standaloneSectionCount);
+  });
+
+  it('uses its own copy of the image schema in image mode', () => {
+    const storeSchema = cloneDeep(mpushSchemaResponse.metaEntities[0].definition.imageSchema);
+    const wrapper = shallow(<Create
+      {...baseProps()}
+      params={{ mode: 'image' }}
+      Templates={{ selectedWeChatAccount: { id: 703, configs: { android: '1', ios: '1' } } }}
+    />);
+    wrapper.instance().injectEvents = jest.fn();
+    wrapper.setProps({ metaEntities: { layouts: [{ definition: { imageSchema: storeSchema } }], tags: {} } });
+
+    const [ownSchema] = wrapper.instance().injectEvents.mock.calls[0];
+    expect(ownSchema).not.toBe(storeSchema);
+    expect(ownSchema.containers[0].panes[0].isSupported).not.toBe(false);
+    expect(ownSchema.containers[0].panes[1].isSupported).not.toBe(false);
+  });
+});

package/v2Containers/MobilePush/Edit/index.js

@@ -136,7 +136,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (typeof this.props.onContentValidityChange !== 'function') {
       return;
     }
-    const validity = getMobilePushEmbeddedContentValidity(this.state.formData, this.state.tabCount);
+    const validity = getMobilePushEmbeddedContentValidity(this.state.formData);
     const isContentEmpty = !!validity.isContentEmpty;
     if (this._lastReportedMobilePushContentEmpty === isContentEmpty) return;
     this._lastReportedMobilePushContentEmpty = isContentEmpty;
@@ -242,7 +242,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
-      const definition = nextProps.metaEntities.layouts[0].definition;
+      const definition = cloneDeep(nextProps.metaEntities.layouts[0].definition);
       const initialSchema = definition?.textSchema || definition?.imageSchema || {};
       this.setState({fullSchema: definition, schema: initialSchema}, () => {
         // Use this.props (latest) in callback to avoid race: templateDetails may have arrived by now

package/v2Containers/MobilePush/Edit/test/contentValidity.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { cloneDeep } from 'lodash';
 import { Edit } from '../index';
+import { response as mpushSchemaResponse } from '../../initialSchema';
 
 // Shallow-render the plain class (bypassing the withCreatives/Redux/saga HOC) so this test
 // only exercises the componentDidUpdate → onContentValidityChange wiring in isolation.
@@ -130,3 +132,18 @@ describe('MobilePush/Edit — onContentValidityChange reporting', () => {
     expect(onContentValidityChange).not.toHaveBeenCalled();
   });
 });
+
+describe('MobilePush/Edit — shared layout schema', () => {
+  it('keeps its own copy of the layout definition, leaving the store layout untouched', () => {
+    const storeDefinition = cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+    const wrapper = shallow(<Edit {...baseProps()} />);
+    wrapper.instance().handleEditSchemaOnPropsChange = jest.fn();
+    wrapper.setProps({ metaEntities: { layouts: [{ definition: storeDefinition }], tags: {} } });
+
+    const ownDefinition = wrapper.state('fullSchema');
+    expect(ownDefinition).not.toBe(storeDefinition);
+    expect(ownDefinition).toEqual(storeDefinition);
+    ownDefinition.textSchema.containers[0].panes[0].isSupported = false;
+    expect(storeDefinition.textSchema.containers[0].panes[0].isSupported).not.toBe(false);
+  });
+});

package/v2Containers/MobilePush/commonMethods.js

@@ -2,6 +2,7 @@ import {get, filter, cloneDeep} from 'lodash';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import messages from './Create/messages';
+import { MOBILE_PUSH_PLATFORM_COUNT } from './Create/constants';
 import { extractContent } from '../../utils/commonUtils';
 function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions, tab}) {
   const currentTab = tab || this.state.currentTab;
@@ -308,17 +309,15 @@ function getMobilePushTabContent(tabIndex, tabData) {
 /**
  * Live "is content empty" check for the legacy Mobile Push Edit/Create forms — the
  * Mobile Push analogue of Sms's `getSmsEmbeddedFooterValidity` (see
- * app/v2Containers/Sms/smsFormDataHelpers.js). Checks every active tab (Android, and
- * iOS when tabCount > 1); Mobile Push allows saving with just one active platform
- * filled in, so the overall content is empty only when EVERY active tab's
- * title+message are both empty.
+ * app/v2Containers/Sms/smsFormDataHelpers.js). Checks both platform tabs (Android =
+ * formData[0], iOS = formData[1]); Mobile Push allows saving with just one platform
+ * filled in, so the overall content is empty only when BOTH tabs' title+message
+ * are empty.
  * @param {object} formData FormBuilder state (same shape as this.state.formData)
- * @param {number} [tabCount] Total number of active tabs (1 = Android only, 2 = Android + iOS)
  * @returns {{ isContentEmpty: boolean }}
  */
-function getMobilePushEmbeddedContentValidity(formData, tabCount) {
-  const count = tabCount != null && tabCount > 1 ? tabCount : 1;
-  for (let i = 0; i < count; i++) {
+function getMobilePushEmbeddedContentValidity(formData) {
+  for (let i = 0; i < MOBILE_PUSH_PLATFORM_COUNT; i++) {
     const content = getMobilePushTabContent(i, formData?.[i]);
     const trimmed = content != null && content !== '' ? String(content).trim() : '';
     if (trimmed) {

package/v2Containers/TagList/index.js

@@ -287,6 +287,10 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       //filtering BADGES_RELATED_TAGS if org does not have BADGES feature enabled
       excludedTags.push(...BADGES_RELATED_TAGS);
     }
+    if (this.props.excludeTags?.length) {
+      // Caller-specified exclusions (e.g. unsubscribe tag not allowed in the Pre-header field)
+      excludedTags.push(...this.props.excludeTags);
+    }
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
@@ -491,12 +495,15 @@ TagList.defaultProps = {
   userLocale: 'en',
   eventContextTags: [],
   waitEventContextTags: {},
+  excludeTags: [],
 };
 
 TagList.propTypes = {
   onTagSelect: PropTypes.func,
   tags: PropTypes.array,
   injectedTags: PropTypes.object,
+  // Tag values (e.g. 'unsubscribe') to hide from the Add Label dropdown for this instance
+  excludeTags: PropTypes.array,
   label: PropTypes.string,
   onContextChange: PropTypes.func,
   moduleFilterEnabled: PropTypes.bool,

package/v2Containers/TagList/tests/TagList.test.js

@@ -105,6 +105,48 @@ describe("TagList test :  UNIT", () => {
     expect(btn).toBeDisabled();
   });
 
+  it('hides a tag named in excludeTags from the Add Label dropdown, keeping other tags visible', () => {
+    const unsubscribeTag = {
+      _id: 'unsubscribe-tag-id',
+      type: 'TAG',
+      definition: {
+        label: { en: 'Unsubscribe' },
+        value: 'unsubscribe',
+        subtags: [],
+        'tag-header': false,
+        supportedModules: [{ context: 'default', layout: 'email', mandatory: false }],
+      },
+    };
+    initializeTagList({
+      tags: [...TagListData.tags, unsubscribeTag],
+      excludeTags: ['unsubscribe'],
+      moduleFilterEnabled: false,
+    });
+    addLabelBtnAssertion();
+    expect(queryByText(/Unsubscribe/i)).not.toBeInTheDocument();
+    expect(getByText(/Optout/i)).toBeInTheDocument();
+  });
+
+  it('does not filter any tag when excludeTags is not provided (default behavior unaffected)', () => {
+    const unsubscribeTag = {
+      _id: 'unsubscribe-tag-id',
+      type: 'TAG',
+      definition: {
+        label: { en: 'Unsubscribe' },
+        value: 'unsubscribe',
+        subtags: [],
+        'tag-header': false,
+        supportedModules: [{ context: 'default', layout: 'email', mandatory: false }],
+      },
+    };
+    initializeTagList({
+      tags: [...TagListData.tags, unsubscribeTag],
+      moduleFilterEnabled: false,
+    });
+    addLabelBtnAssertion();
+    expect(getByText(/Unsubscribe/i)).toBeInTheDocument();
+  });
+
   it('calls transformCouponTags when selectedOfferDetails and coupon tags are present', () => {
     const spy = jest.spyOn(TagList.prototype, 'transformCouponTags');
     initializeTagList({