@capillarytech/creatives-library 9.0.73-alpha.sprint-testpreview.22 → 9.1.1

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/Rcs/index.js

@@ -312,8 +312,6 @@ export const Rcs = (props) => {
 
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
-  // Set when opened from listing "Preview and test"; closing then returns to the listing.
-  const isTestAndPreviewFromListingRef = useRef(false);
 
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
@@ -330,11 +328,7 @@ export const Rcs = (props) => {
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
-    if (isTestAndPreviewFromListingRef.current && handleClose) {
-      isTestAndPreviewFromListingRef.current = false;
-      handleClose();
-    }
-  }, [propsHandleCloseTestAndPreview, handleClose]);
+  }, [propsHandleCloseTestAndPreview]);
 
   // Helper to get RCS orientation from selectedDimension
   const getRcsOrientation = () => {
@@ -1443,26 +1437,6 @@ export const Rcs = (props) => {
     }
   }, [rcsHydrationDetails, isFullMode, isHostInfoBip]);
 
-  // Listing "Preview and test": open Test & Preview once the template is hydrated.
-  const hasAutoOpenedTestAndPreviewRef = useRef(false);
-  useEffect(() => {
-    if (!isFullMode || !templateData?.openTestAndPreview || hasAutoOpenedTestAndPreviewRef.current) return;
-    if (spin || !isEditFlow || smsFallbackData === undefined) return;
-    if (!(isHostInfoBip || templateStatus === RCS_STATUSES.approved)) return;
-    hasAutoOpenedTestAndPreviewRef.current = true;
-    isTestAndPreviewFromListingRef.current = true;
-    handleTestAndPreview();
-  }, [
-    isFullMode,
-    templateData?.openTestAndPreview,
-    spin,
-    isEditFlow,
-    smsFallbackData,
-    isHostInfoBip,
-    templateStatus,
-    handleTestAndPreview,
-  ]);
-
   useEffect(() => {
     if (templateType === contentType.text_message) {
       setTemplateMediaType(RCS_MEDIA_TYPES.NONE);

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({

package/v2Containers/Templates/index.js

@@ -253,6 +253,7 @@ const duplicateEnum = {
   line: "lineActions",
   [VIBER_CHANNEL]: "viberActions",
   [FACEBOOK_CHANNEL]: "facebookActions",
+  [RCS_LOWERCASE]: "rcsActions",
 };
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -1788,9 +1789,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
           }
           creativesParams.type = this.state.channel.toUpperCase();
-          if (routeParams.openTestAndPreview) {
-            creativesParams.openTestAndPreview = true;
-          }
         }
       }
     }
@@ -2279,9 +2277,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     onClick={() => {
                       if ([ZALO, WHATSAPP, RCS].includes(this.state.channel.toUpperCase()) || (isTraiDltFeature && this.state.channel.toUpperCase() === SMS)) {
                         handlers.handleEditClick(undefined, template, undefined, undefined, {
-                          account: this.state.selectedAccount,
-                          // Test panel fills unmapped variables for these; SMS DLT still needs Overview.
-                          openTestAndPreview: [RCS, WHATSAPP, ZALO].includes(this.state.channel.toUpperCase()),
+                          account: this.state.selectedAccount
                         })
                       } else {
                         this.handleTestAndPreviewFromListing(template)
@@ -2292,7 +2288,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   </CapMenu.Item>
                 )}
                 {/* Duplicate menu item */}
-                {![WECHAT, WHATSAPP, ZALO, RCS].includes(
+                {![WECHAT, WHATSAPP, ZALO].includes(
                   this.state.channel.toUpperCase()
                 ) &&
                   !isTraiDltFeature && !template.isArchived && this.gatedMenuItem({
@@ -3703,7 +3699,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         };
         this.getAllTemplates({params, resetPage: true});
       });
-    } else if ([SMS_LOWERCASE, LINE_LOWERCASE, VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(this.state.channel.toLowerCase())) {
+    } else if (["sms", "line", VIBER_CHANNEL, FACEBOOK_CHANNEL, RCS_LOWERCASE].includes(this.state.channel.toLowerCase())) {
       this.commonDuplicate(duplicateEnum[this.state.channel.toLowerCase()], duplicateObj);
     }
   }
@@ -3862,7 +3858,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({routeParams: {
         pathname: pathName,
         query: getQuery,
-        ...(options?.openTestAndPreview && { openTestAndPreview: true }),
       }});
     }
   }

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

@@ -5,7 +5,6 @@ import { Templates } from '../index';
 import mockdata from '../../mockdata';
 import { rcsTemplates, senderDetailsRcs } from './mockData';
 import { exportEmailTemplateHtml } from '../../../utils/downloadFile';
-import { PERMISSIONS } from '../../../utils/permissions';
 
 const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput, zaloTemplates: ZaloTemplateProp } = mockdata;
 
@@ -28,41 +27,6 @@ jest.mock('../../CreativesContainer', () => ({
   ),
 }));
 
-// Recursively walks a plain-object/array/React-element tree (as returned by
-// getTemplateDataForGrid, which is never mounted here) looking for a node whose
-// className includes the given substring - robust against the exact nesting of
-// CapDropdown > CapMenu > CapMenu.Item without hardcoding array indices.
-function findByClassName(node, className, seen = new Set()) {
-  if (!node || typeof node !== 'object') return null;
-  if (seen.has(node)) return null;
-  seen.add(node);
-  if (Array.isArray(node)) {
-    for (let i = 0; i < node.length; i += 1) {
-      const found = findByClassName(node[i], className, seen);
-      if (found) return found;
-    }
-    return null;
-  }
-  // React element (has .props) - check its className, then search its own prop values.
-  if (node.props) {
-    if (typeof node.props.className === 'string' && node.props.className.includes(className)) {
-      return node;
-    }
-    return findByClassName(node.props, className, seen);
-  }
-  // Plain object (e.g. a getTemplateDataForGrid card-data entry: {key, title, extra, hoverOption, ...})
-  // or a React element's .props object - search every own value.
-  const values = Object.values(node);
-  for (let i = 0; i < values.length; i += 1) {
-    const value = values[i];
-    if (value && typeof value === 'object') {
-      const found = findByClassName(value, className, seen);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-
 describe('Test Templates container', () => {
   const getWeCrmAccounts = jest.fn();
   const setChannelAccount = jest.fn();
@@ -307,6 +271,41 @@ describe('Test Templates container', () => {
   describe('Export HTML (EMAIL channel)', () => {
     const emailTemplate = { _id: 'email_1', name: 'My Email Template', versions: { base: {} } };
 
+    // Recursively walks a plain-object/array/React-element tree (as returned by
+    // getTemplateDataForGrid, which is never mounted here) looking for a node whose
+    // className includes the given substring - robust against the exact nesting of
+    // CapDropdown > CapMenu > CapMenu.Item without hardcoding array indices.
+    function findByClassName(node, className, seen = new Set()) {
+      if (!node || typeof node !== 'object') return null;
+      if (seen.has(node)) return null;
+      seen.add(node);
+      if (Array.isArray(node)) {
+        for (let i = 0; i < node.length; i += 1) {
+          const found = findByClassName(node[i], className, seen);
+          if (found) return found;
+        }
+        return null;
+      }
+      // React element (has .props) - check its className, then search its own prop values.
+      if (node.props) {
+        if (typeof node.props.className === 'string' && node.props.className.includes(className)) {
+          return node;
+        }
+        return findByClassName(node.props, className, seen);
+      }
+      // Plain object (e.g. a getTemplateDataForGrid card-data entry: {key, title, extra, hoverOption, ...})
+      // or a React element's .props object - search every own value.
+      const values = Object.values(node);
+      for (let i = 0; i < values.length; i += 1) {
+        const value = values[i];
+        if (value && typeof value === 'object') {
+          const found = findByClassName(value, className, seen);
+          if (found) return found;
+        }
+      }
+      return null;
+    }
+
     beforeEach(() => {
       jest.clearAllMocks();
       // jest config sets resetMocks: true, wiping the default implementation baked into
@@ -427,75 +426,4 @@ describe('Test Templates container', () => {
       expect(findByClassName(cardDataList, 'export-html-email')).toBeNull();
     });
   });
-
-  describe('RCS listing menu', () => {
-    const approvedRcsTemplate = {
-      _id: 'rcs_1',
-      name: 'RCS Template',
-      versions: { base: { content: { RCS: { rcsContent: { cardContent: [{ Status: 'approved' }] } } } } },
-    };
-    const handlers = { handlePreviewClick: jest.fn(), handleEditClick: jest.fn() };
-    const getCardData = () => renderedComponent.instance().getTemplateDataForGrid({
-      templates: [approvedRcsTemplate],
-      handlers,
-      filterContent: null,
-      channel: 'rcs',
-      isLoading: false,
-      isInitialLoading: false,
-      loadingTip: '',
-      previewTemplateId: null,
-    });
-
-    beforeEach(() => {
-      RenderFunctionFor('rcs', true);
-      renderedComponent.setProps({
-        isFullMode: true,
-        isDltFromRcs: false,
-        Global: { user: { accessiblePermissions: [PERMISSIONS.CREATIVE_EDIT] } },
-        actions: { ...renderedComponent.props().actions, resetTemplateData: jest.fn() },
-      });
-    });
-
-    it('does not render the Duplicate menu item for RCS', () => {
-      expect(findByClassName(getCardData(), 'duplicate-rcs')).toBeNull();
-    });
-
-    it('"Preview and test" opens the editor with openTestAndPreview', () => {
-      const menuItem = findByClassName(getCardData(), 'test-and-preview-rcs');
-      expect(menuItem).not.toBeNull();
-
-      menuItem.props.onClick();
-      expect(handlers.handleEditClick).toHaveBeenCalledWith(
-        undefined,
-        approvedRcsTemplate,
-        undefined,
-        undefined,
-        expect.objectContaining({ openTestAndPreview: true }),
-      );
-    });
-
-    it('handleEditClick keeps openTestAndPreview in routeParams', () => {
-      renderedComponent.instance().handleEditClick(undefined, approvedRcsTemplate, undefined, undefined, {
-        openTestAndPreview: true,
-      });
-      expect(renderedComponent.state('routeParams')).toEqual(
-        expect.objectContaining({ pathname: '/rcs/edit/rcs_1/', openTestAndPreview: true }),
-      );
-    });
-
-    it('handleEditClick omits openTestAndPreview for Overview', () => {
-      renderedComponent.instance().handleEditClick(undefined, approvedRcsTemplate);
-      expect(renderedComponent.state('routeParams')).not.toHaveProperty('openTestAndPreview');
-    });
-
-    it('getCreativesParams forwards openTestAndPreview to the editor', () => {
-      renderedComponent.setState({ routeParams: { pathname: '/rcs/edit/rcs_1/', openTestAndPreview: true } });
-      expect(renderedComponent.instance().getCreativesParams()).toEqual(
-        expect.objectContaining({ mode: 'edit', _id: 'rcs_1', type: 'RCS', openTestAndPreview: true }),
-      );
-
-      renderedComponent.setState({ routeParams: { pathname: '/rcs/edit/rcs_1/' } });
-      expect(renderedComponent.instance().getCreativesParams()).not.toHaveProperty('openTestAndPreview');
-    });
-  });
 });

package/v2Containers/Viber/index.scss

@@ -12,6 +12,11 @@
   margin-bottom: $CAP_SPACE_06;
 }
 .cap-custom-image-upload {
+  padding-top: $CAP_SPACE_20;
+  form {
+    padding: 0;
+  }
+
   .dragger-button.re-upload {
     top: -11rem;
     position: relative;
@@ -131,6 +136,32 @@
   margin-top: $CAP_SPACE_16;
 }
 
+.viber-carousel-tab {
+  .ant-tabs-nav .ant-tabs-nav-wrap {
+    flex: none;
+  }
+
+  .ant-tabs-nav-list .ant-tabs-tab {
+    padding: $CAP_SPACE_08;
+    justify-content: center;
+    font-size: $FONT_SIZE_L;
+
+    + .ant-tabs-tab {
+      margin-left: 0;
+    }
+  }
+
+  .ant-tabs-extra-content {
+    display: flex;
+    align-items: center;
+
+    .ant-divider-vertical {
+      height: $CAP_SPACE_24;
+      margin: 0 $CAP_SPACE_12;
+    }
+  }
+}
+
 .viber-carousel-card {
   border: 1px solid $CAP_G06;
   border-radius: $CAP_SPACE_04;