@capillarytech/creatives-library 9.0.56-betaa.0 → 9.0.56

package/v2Containers/WebPush/Create/preview/WebPushPreview.js

@@ -33,6 +33,7 @@ const WebPushPreview = ({
   brandIconSrc,
   buttons,
   onClickShowInAllDevices,
+  showPreviewInAllDevices,
 }) => {
   const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
   const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
@@ -93,18 +94,20 @@ const WebPushPreview = ({
           buttons={buttons}
         />
         <PreviewDisclaimer />
-        <CapRow className="preview-all-devices-button">
-          <CapColumn span={24}>
-            <CapButton
-              type="link"
-              onClick={handleOpenPreviewSlideBox}
-              className="preview-all-devices-trigger"
-              data-test-id="webpush-preview-toggle"
-            >
-              <FormattedMessage {...messages.previewInAllDevices} />
-            </CapButton>
-          </CapColumn>
-        </CapRow>
+        {showPreviewInAllDevices && (
+          <CapRow className="preview-all-devices-button">
+            <CapColumn span={24}>
+              <CapButton
+                type="link"
+                onClick={handleOpenPreviewSlideBox}
+                className="preview-all-devices-trigger"
+                data-test-id="webpush-preview-toggle"
+              >
+                <FormattedMessage {...messages.previewInAllDevices} />
+              </CapButton>
+            </CapColumn>
+          </CapRow>
+        )}
       </CapColumn>
       <CapSlideBox
         header={<FormattedMessage {...messages.webPushNotificationPreview} />}
@@ -141,6 +144,7 @@ WebPushPreview.propTypes = {
     })
   ),
   onClickShowInAllDevices: PropTypes.func,
+  showPreviewInAllDevices: PropTypes.bool,
 };
 
 WebPushPreview.defaultProps = {
@@ -150,6 +154,7 @@ WebPushPreview.defaultProps = {
   imageSrc: '',
   brandIconSrc: '',
   buttons: [],
+  showPreviewInAllDevices: true,
 };
 
 export default WebPushPreview;

package/v2Containers/WebPush/Create/preview/tests/WebPushPreview.test.js

@@ -109,6 +109,11 @@ describe('WebPushPreview', () => {
       expect(button.hasClass('preview-all-devices-trigger')).toBe(true);
     });
 
+    it('should hide "Preview in all devices" button when showPreviewInAllDevices is false', () => {
+      const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} showPreviewInAllDevices={false} />);
+      expect(wrapper.find('.preview-all-devices-button').exists()).toBe(false);
+    });
+
     it('should render CapSlideBox component', () => {
       const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);
       const allSlideBoxes = wrapper.find(CapSlideBox);

package/v2Containers/WebPush/Create/tests/contentValidity.test.js

@@ -0,0 +1,294 @@
+/**
+ * Tests for the onContentValidityChange reporting wired into WebPushCreate.
+ *
+ * WebPushCreate is a functional component (not a class like Sms/Create and Sms/Edit), so the
+ * dedup pattern is implemented as a useEffect + useRef instead of componentDidUpdate + an
+ * instance field, but the contract with the parent (CreativesContainer) is identical:
+ * onContentValidityChange({ isContentEmpty }) is called only when isContentEmpty actually
+ * changes since the last report, with title AND message both required for WebPush.
+ *
+ * Note: all relative mock paths are resolved from THIS test file's location
+ * (app/v2Containers/WebPush/Create/tests/), not from the component — mirrors
+ * testAndPreviewIntegration.test.js in this same directory.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+
+// ── Infrastructure / HOC mocks ──────────────────────────────────────────────
+jest.mock('../../../../hoc/withCreatives', () => ({
+  __esModule: true,
+  default: ({ WrappedComponent }) => WrappedComponent,
+}));
+
+jest.mock('@capillarytech/vulcan-react-sdk/utils', () => ({
+  injectReducer: () => (Component) => Component,
+  injectSaga: () => (Component) => Component,
+}));
+jest.mock('@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes', () => ({
+  DAEMON: 'DAEMON',
+}));
+
+// ── Redux slices (paths relative to this test file) ─────────────────────────
+jest.mock('../../../Templates/selectors', () => ({
+  makeSelectTemplates: () => () => {},
+}));
+jest.mock('../../../Templates/actions', () => ({}));
+jest.mock('../../selectors', () => ({
+  makeSelectWebPush: () => () => ({}),
+  makeSelectCreateError: () => () => null,
+  makeSelectCreateTemplateInProgress: () => () => false,
+  makeSelectEditTemplateInProgress: () => () => false,
+  makeSelectEditError: () => () => null,
+}));
+jest.mock('../../actions', () => ({}));
+jest.mock('../../reducer', () => () => ({}));
+jest.mock('../../sagas', () => ({}));
+jest.mock('../../../Templates/sagas', () => ({ v2TemplateSaga: {} }));
+jest.mock('../../../Cap/selectors', () => ({
+  makeSelectMetaEntities: () => () => [],
+  setInjectedTags: () => () => [],
+}));
+jest.mock('../../../CreativesContainer/constants', () => ({
+  WEBPUSH: 'WEBPUSH',
+}));
+jest.mock('../../../CreativesContainer/messages', () => ({
+  testAndPreview: { id: 'testAndPreview', defaultMessage: 'Test & Preview' },
+}));
+jest.mock('../../../../utils/common', () => ({
+  isAiContentBotDisabled: () => false,
+}));
+
+// ── Form section components ──────────────────────────────────────────────────
+// TemplateNameSection stays a stub — it is only relevant in isFullMode, which these tests
+// keep off (mirrors baseProps below) to focus purely on title/message emptiness.
+jest.mock('../components/TemplateNameSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="template-name-section" />,
+}));
+// NotificationTitleSection and MessageSection are given lightweight controlled-input stand-ins
+// so tests can drive real onChange handlers (handleNotificationTitleChange / handleMessageChange)
+// inside WebPushCreate, exercising the actual state that feeds the isContentEmpty computation.
+jest.mock('../components/NotificationTitleSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <input data-testid="notification-title-input" value={value} onChange={onChange} />
+  ),
+}));
+jest.mock('../components/MessageSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <textarea data-testid="message-input" value={value} onChange={onChange} />
+  ),
+}));
+jest.mock('../components/MediaSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="media-section" />,
+}));
+jest.mock('../components/BrandIconSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="brand-icon-section" />,
+}));
+jest.mock('../components/ButtonsLinksSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="buttons-links-section" />,
+}));
+jest.mock('../components/FormActions', () => ({
+  __esModule: true,
+  default: () => <div data-testid="form-actions" />,
+}));
+jest.mock('../preview/WebPushPreview', () => ({
+  __esModule: true,
+  default: () => <div data-testid="webpush-preview" />,
+}));
+jest.mock('../../../TagList', () => ({
+  __esModule: true,
+  default: () => <div data-testid="tag-list" />,
+}));
+
+// ── Hooks ────────────────────────────────────────────────────────────────────
+jest.mock('../hooks/useCharacterCount', () => ({
+  useCharacterCount: () => ({ updateCharacterCount: jest.fn() }),
+}));
+jest.mock('../hooks/useButtonManagement', () => ({
+  useButtonManagement: () => ({ buttons: [], setButtons: jest.fn(), isAddingButton: false }),
+}));
+jest.mock('../hooks/useImageUpload', () => ({
+  useImageUpload: () => ({
+    imageSrc: '',
+    imageUrl: '',
+    isValidating: false,
+    isUploading: false,
+    setImageSrc: jest.fn(),
+    setImageUrl: jest.fn(),
+    uploadMethod: 'UPLOAD_IMAGE',
+  }),
+}));
+jest.mock('../hooks/useTagManagement', () => ({
+  useTagManagement: () => ({ tags: [], extractTags: jest.fn(), handleOnTagsContextChange: jest.fn(), validationConfig: {} }),
+}));
+
+jest.mock('../../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: () => <div data-testid="test-and-preview-slidebox" />,
+}));
+
+// ── CapUI library ─────────────────────────────────────────────────────────────
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({
+  __esModule: true,
+  default: ({ children, className }) => <div className={className}>{children}</div>,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({
+  __esModule: true,
+  default: ({ children, className }) => <div className={className}>{children}</div>,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => ({
+  __esModule: true,
+  default: ({ children, onClick, className, type }) => (
+    <button className={className} onClick={onClick} data-type={type}>
+      {children}
+    </button>
+  ),
+}));
+
+// ── Import component AFTER mocks ─────────────────────────────────────────────
+// eslint-disable-next-line import/first
+import WebPushCreateDefault from '../index';
+
+const baseProps = () => ({
+  isFullMode: false,
+  handleClose: jest.fn(),
+  webPushActions: {
+    createTemplate: jest.fn(),
+    editTemplate: jest.fn(),
+    uploadImage: jest.fn(),
+    clearCreateError: jest.fn(),
+    clearEditError: jest.fn(),
+    clearCreateResponse: jest.fn(),
+    clearEditResponse: jest.fn(),
+    setSelectedAccount: jest.fn(),
+    clearState: jest.fn(),
+  },
+  createTemplateInProgress: false,
+  createTemplateError: null,
+  editTemplateInProgress: false,
+  editTemplateError: null,
+  accountData: null,
+  webPush: {},
+  onCreateComplete: jest.fn(),
+  getFormData: jest.fn(),
+  isGetFormData: false,
+  templateData: null,
+  creativesMode: 'create',
+  params: {},
+  globalActions: { getMetaEntities: jest.fn() },
+  location: { pathname: '/webpush', query: {}, search: '', state: {} },
+  metaEntities: [],
+  injectedTags: [],
+  getDefaultTags: jest.fn(),
+  supportedTags: [],
+  forwardedTags: [],
+  selectedOfferDetails: [],
+  eventContextTags: [],
+  waitEventContextTags: {},
+  templateActions: {},
+  Templates: { templates: [] },
+  restrictPersonalization: false,
+});
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={{ testAndPreview: 'Test & Preview' }}>
+    {children}
+  </IntlProvider>
+);
+
+describe('WebPushCreate — onContentValidityChange reporting', () => {
+  it('reports isContentEmpty: true on mount when title and message are both empty', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+  });
+
+  it('reports isContentEmpty: false once both title and message have content', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: false });
+  });
+
+  it('does not re-report (still empty) if only the title is filled in while message stays empty', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    // Mount already reported isContentEmpty: true (both fields blank).
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+
+    // isContentEmpty is still true (message is required too and remains blank), so the dedup
+    // guard must suppress a duplicate report.
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+
+  it('re-reports isContentEmpty: true when a previously-filled message is cleared out', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: '' } });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+  });
+
+  it('does not throw and does not report when onContentValidityChange is not provided', () => {
+    expect(() => {
+      render(
+        <TestWrapper>
+          <WebPushCreateDefault {...baseProps()} />
+        </TestWrapper>,
+      );
+      fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    }).not.toThrow();
+  });
+
+  it('does not dispatch again on a re-render that does not change isContentEmpty (dedup guard)', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+    onContentValidityChange.mockClear();
+
+    // Further edits that keep both fields non-empty must not re-trigger the callback.
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World!' } });
+
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/Whatsapp/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable camelcase */
 /* eslint-disable no-undef */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -119,7 +119,7 @@ import { ANDROID } from '../../v2Components/CommonTestAndPreview/constants';
 import CapImageUpload from '../../v2Components/CapImageUpload';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
-import { splitContentByOrderedVarTokens } from '../../utils/templateVarUtils';
+import { splitContentByOrderedVarTokens, reconcileVarMapToSlotFormat } from '../../utils/templateVarUtils';
 import { capitalizeString } from '../../utils/Formatter';
 import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
 import {
@@ -188,6 +188,7 @@ export const Whatsapp = (props) => {
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
     isTestAndPreviewMode: propsIsTestAndPreviewMode,
+    onContentValidityChange,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -504,7 +505,8 @@ export const Whatsapp = (props) => {
     if (templateHeaderArray?.length !== 0) {
       let clonedVarMap = {};
       if (!isEmpty(varMap)) {
-        clonedVarMap = cloneDeep(varMap);
+        // Reconcile CCS sequential varMapped indices to the UI’s `${token}_${index}` slot keys so values map to the correct segments.
+        clonedVarMap = reconcileVarMapToSlotFormat(varMap, templateHeaderArray, regex);
       } else {
         templateHeaderArray?.forEach((headerValue, i) => {
           if (headerValue?.match(regex)?.length > 0) {
@@ -562,7 +564,9 @@ export const Whatsapp = (props) => {
     if (tempMsgArray.length !== 0) {
       const { varMapped = {} } = editContent;
       if (!isEmpty(varMapped)) {
-        varMap = cloneDeep(varMapped);
+        // CCS's varMapped can use plain sequential occurrence indices ("0","1",...)
+        // rather than this UI's own `${token}_${index}` slot keys
+        varMap = reconcileVarMapToSlotFormat(varMapped, tempMsgArray, validVarRegex);
       } else {
         //computing and setting varMap for first edit
         for (let i = 0; i < tempMsgArray.length; i += 1) {
@@ -701,6 +705,23 @@ export const Whatsapp = (props) => {
     }
   }, [carouselValidateTag, tags])
 
+  // Reports live "is content empty" validity to the parent slidebox so it can
+  // disable the Done/Preview-and-test buttons whenever the template message
+  // (the one field that is always required, regardless of template type) is
+  // cleared out. Mirrors the Sms Create/Edit componentDidUpdate pattern; the
+  // ref-based dedup avoids redundant parent setState calls / render loops.
+  const lastReportedTemplateMessageEmptyRef = useRef(undefined);
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') {
+      return;
+    }
+    const isContentEmpty = !templateMessage?.trim();
+    if (lastReportedTemplateMessageEmptyRef.current !== isContentEmpty) {
+      lastReportedTemplateMessageEmptyRef.current = isContentEmpty;
+      onContentValidityChange({ isContentEmpty });
+    }
+  }, [templateMessage, onContentValidityChange]);
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;