cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/CreativesContainer/index.scss

@@ -2,6 +2,43 @@
 
 $classPrefix: add-creatives-section;
 
+/* Local SMS template picker: fill slidebox height; global .v2-pagination-container uses 100vh-20rem and leaves a dead zone inside slideboxes */
+.#{$classPrefix}.creatives-slidebox--local-sms-templates {
+  .cap-slide-box-v2-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    max-height: 100vh;
+  }
+
+  .slidebox-content-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .slidebox-content-container > div {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* TemplatesV2 root: fill slidebox so the template grid can flex instead of using 100vh-based pagination height */
+  .slidebox-content-container .creatives-templates-container--local-sms.library-mode {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: auto;
+    max-height: 100%;
+  }
+}
+
 .#{$classPrefix} {
     &.creatives-library-mode{
         .sms-create-container,  .sms-email-container{
@@ -80,5 +117,18 @@ $classPrefix: add-creatives-section;
 }
 
 .template-footer-width {
-    width: 100%;;
+    width: 100%;
+}
+
+.slidebox-footer-actions {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+
+    .ant-btn,
+    button {
+        flex-shrink: 0;
+    }
 }

package/app/v2Containers/CreativesContainer/messages.js

@@ -378,4 +378,16 @@ export default defineMessages({
     id: `${scope}.next`,
     defaultMessage: `Next`,
   },
+  "channelNotSupportedAnonymous": {
+    id: `${scope}.channelNotSupportedAnonymous`,
+    defaultMessage: `This channel is not supported for anonymous customers`,
+  },
+  "personalizationNotSupportedAnonymous": {
+    id: `${scope}.personalizationNotSupportedAnonymous`,
+    defaultMessage: `Personalization tags are not supported for anonymous customers`,
+  },
+  "personalizationTokensErrorMessage": {
+    id: `${scope}.personalizationTokensErrorMessage`,
+    defaultMessage: `Personalization tags are not supported for anonymous customers, please remove the tags.`,
+  },
 });

package/app/v2Containers/CreativesContainer/tests/SlideBoxContent.localTemplates.test.js

@@ -0,0 +1,90 @@
+/**
+ * Covers `localTemplatesConfig` / `useLocalTemplates` branch in SlideBoxContent → TemplatesV2
+ * (embedded SMS template list / RCS SMS fallback).
+ */
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { SlideBoxContent } from '../SlideBoxContent';
+
+const mockTemplatesV2 = jest.fn(() => <div data-testid="templates-v2-mock" />);
+jest.mock('../../TemplatesV2', () => ({
+  __esModule: true,
+  default: (props) => mockTemplatesV2(props),
+}));
+
+const baseProps = {
+  slidBoxContent: 'templates',
+  currentChannel: 'SMS',
+  onSelectTemplate: jest.fn(),
+  onPreviewTemplate: jest.fn(),
+  onCreateNew: jest.fn(),
+  onChannelChange: jest.fn(),
+  location: { pathname: '/sms', query: {}, search: '' },
+  cap: {},
+  channelsToHide: [],
+  channelsToDisable: [],
+  handleClose: jest.fn(),
+  messageDetails: {},
+  onCreateComplete: jest.fn(),
+};
+
+describe('SlideBoxContent local templates (TemplatesV2)', () => {
+  beforeEach(() => {
+    mockTemplatesV2.mockClear();
+  });
+
+  // Use mount when asserting TemplatesV2 mock calls: shallow does not invoke children under styled CreativesWrapper.
+  it('renders TemplatesV2 in full mode when useLocalTemplates is true', () => {
+    mountWithIntl(
+      <SlideBoxContent
+        {...baseProps}
+        isFullMode
+        localTemplatesConfig={{
+          useLocalTemplates: true,
+          localTemplates: [],
+          localTemplatesLoading: false,
+        }}
+      />,
+    );
+    expect(mockTemplatesV2).toHaveBeenCalled();
+    const passed = mockTemplatesV2.mock.calls[mockTemplatesV2.mock.calls.length - 1][0];
+    expect(passed.localTemplatesConfig.useLocalTemplates).toBe(true);
+  });
+
+  it('does not render TemplatesV2 in full mode when useLocalTemplates is false', () => {
+    shallowWithIntl(
+      <SlideBoxContent
+        {...baseProps}
+        isFullMode
+        localTemplatesConfig={{ useLocalTemplates: false }}
+      />,
+    );
+    expect(mockTemplatesV2).not.toHaveBeenCalled();
+  });
+
+  it('renders TemplatesV2 in library mode without localTemplates flag', () => {
+    mountWithIntl(
+      <SlideBoxContent
+        {...baseProps}
+        isFullMode={false}
+      />,
+    );
+    expect(mockTemplatesV2).toHaveBeenCalled();
+  });
+
+  it('merges top-level local template props via pick when localTemplatesConfig is omitted', () => {
+    mountWithIntl(
+      <SlideBoxContent
+        {...baseProps}
+        isFullMode
+        useLocalTemplates
+        localTemplates={[{ _id: '1' }]}
+        localTemplatesLoading={false}
+      />,
+    );
+    expect(mockTemplatesV2).toHaveBeenCalled();
+    const passed = mockTemplatesV2.mock.calls[mockTemplatesV2.mock.calls.length - 1][0];
+    expect(passed.localTemplatesConfig.useLocalTemplates).toBe(true);
+    expect(passed.localTemplatesConfig.localTemplates).toEqual([{ _id: '1' }]);
+  });
+});

package/app/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
-
 import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 import { templateDetailsImage, templateDetailsVideo, templateDetailsText, templateDetails_ } from '../../Viber/tests/mockData';
@@ -42,6 +41,15 @@ jest.mock('../../WebPush', () => ({
   ),
 }));
 
+jest.mock('v2Containers/InApp', () => () => <div data-test="inapp" />);
+jest.mock('v2Containers/InAppWrapper', () => () => <div data-test="inapp-wrapper" />);
+
+jest.mock('../../../utils/commonUtils', () => ({
+  hasNewEditorFlowInAppEnabled: jest.fn(),
+}));
+
+import commonUtil from '../../../utils/commonUtils';
+
 describe('Test SlideBoxContent container', () => {
   const onCreateComplete = jest.fn();
   let renderedComponent;
@@ -910,4 +918,64 @@ describe('Test SlideBoxContent container', () => {
       expect(renderedComponent).toMatchSnapshot();
     });
   });
+
+  describe('InApp vs InAppWrapper rendering conditions', () => {
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders InAppWrapper when isFullMode=true and new editor disabled', () => {
+      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(false);
+
+      renderFunction(
+        'INAPP',
+        'createTemplate',
+        { mode: 'create' },
+        { isFullMode: true, isLoyaltyModule: false }
+      );
+
+      expect(renderedComponent).toMatchSnapshot();
+    });
+
+    it('renders InApp when isFullMode=false and loyalty module enabled', () => {
+      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(false);
+
+      renderFunction(
+        'INAPP',
+        'createTemplate',
+        { mode: 'create' },
+        { isFullMode: false, isLoyaltyModule: true }
+      );
+
+      expect(renderedComponent).toMatchSnapshot();
+    });
+
+    it('renders InApp when not full mode, not loyalty and new editor disabled', () => {
+      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(false);
+
+      renderFunction(
+        'INAPP',
+        'createTemplate',
+        { mode: 'create' },
+        { isFullMode: false, isLoyaltyModule: false }
+      );
+
+      expect(renderedComponent).toMatchSnapshot();
+    });
+
+    it('renders InAppWrapper when full mode and new editor enabled', () => {
+      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(true);
+
+      renderFunction(
+        'INAPP',
+        'createTemplate',
+        { mode: 'create' },
+        { isFullMode: true, isLoyaltyModule: false }
+      );
+
+      expect(renderedComponent).toMatchSnapshot();
+    });
+
+  });
 });

package/app/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js

@@ -190,4 +190,447 @@ describe('shouldCheckValidation (line 79)', () => {
     const saveBtn = screen.getByRole('button', { name: /create/i });
     expect(saveBtn).toBeDisabled();
   });
+
+  describe('personalization tokens handling', () => {
+    it('disables Save and Test & Preview when anonymous mobile push template has personalization tokens', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        showTestAndPreviewButton: true,
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Hello {{name}}',
+                expandibleDetails: {
+                  message: 'Body',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+
+      const previewBtn = screen.getByRole('button', { name: /preview and test/i });
+      expect(previewBtn).toBeDisabled();
+    });
+
+    it('uses hasPersonalizationTokenError prop override even when templateData has no tokens', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        showTestAndPreviewButton: true,
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {}, // no personalization tokens in template data
+        hasPersonalizationTokenError: true,
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+
+      const previewBtn = screen.getByRole('button', { name: /preview and test/i });
+      expect(previewBtn).toBeDisabled();
+    });
+
+    it('does not disable buttons when isAnonymousType is false even with liquid tags', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        showTestAndPreviewButton: true,
+        restrictPersonalization: true,
+        isAnonymousType: false, // non-anonymous user
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Hello {{name}}',
+                expandibleDetails: {
+                  message: 'Welcome',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeEnabled();
+
+      const previewBtn = screen.getByRole('button', { name: /preview and test/i });
+      expect(previewBtn).toBeEnabled();
+    });
+
+    it('does not disable buttons when restrictPersonalization is false even for anonymous users with tokens', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        showTestAndPreviewButton: true,
+        restrictPersonalization: false, // personalization is allowed
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Hello {{name}}',
+                expandibleDetails: {
+                  message: 'Welcome',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeEnabled();
+    });
+
+    it('detects liquid tags {{ }} in Android title and disables buttons', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: '{{dynamicTitle}}',
+                expandibleDetails: {
+                  message: 'Static body',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+    });
+
+    it('detects liquid tags {{ }} in iOS message body and disables buttons', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            IOS: {
+              base: {
+                title: 'Static',
+                expandableDetails: {
+                  message: 'Message with {{variable}}',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+    });
+
+    it('detects event context tags [ ] and disables buttons', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Hello [eventContext]',
+                expandibleDetails: {
+                  message: 'Body',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+    });
+
+    it('allows buttons when template has no personalization tokens', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        showTestAndPreviewButton: true,
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Static Title',
+                expandibleDetails: {
+                  message: 'Static Message Body',
+                },
+              },
+            },
+            IOS: {
+              base: {
+                title: 'iOS Title',
+                expandibleDetails: {
+                  message: 'iOS Message',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeEnabled();
+
+      const previewBtn = screen.getByRole('button', { name: /preview and test/i });
+      expect(previewBtn).toBeEnabled();
+    });
+
+    it('handles expandableDetails spelling variant (corrected spelling)', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Static',
+                expandableDetails: { // correct spelling
+                  message: 'Message with {{token}}',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+    });
+
+    it('checks both Android and iOS versions for tokens', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: {
+          versions: {
+            ANDROID: {
+              base: {
+                title: 'Android Title',
+                expandibleDetails: {
+                  message: 'Android Message',
+                },
+              },
+            },
+            IOS: {
+              base: {
+                title: 'iOS [context]',
+                expandibleDetails: {
+                  message: 'iOS Message',
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeDisabled();
+    });
+
+    it('returns false when templateData is null', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: null,
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeEnabled();
+    });
+
+    it('returns false when templateData is undefined', () => {
+      const { hasSupportCKEditor } = require('../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false);
+
+      renderComponent({
+        ...baseFooterProps,
+        currentChannel: 'MOBILE_PUSH',
+        slidBoxContent: 'editTemplate',
+        restrictPersonalization: true,
+        isAnonymousType: true,
+        templateData: undefined,
+      });
+
+      const updateBtn = screen.getByRole('button', { name: /update/i });
+      expect(updateBtn).toBeEnabled();
+    });
+  });
+});
+
+describe('SlideBoxFooter — isHtmlEditorValidationStateActive via issueCounts', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('activates via issueCounts.total > 0 even when validationComplete=false and hasErrors=false', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: false,
+        hasErrors: false,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 1, label: 0, liquid: 0, total: 1 },
+      },
+    });
+    // isHtmlEditorValidationStateActive = true (via issueCounts.total > 0)
+    // isHTMLEditorModeInEdit = true, shouldCheckValidation = true
+    // hasValidationErrors = false, shouldDisableButtons = false (no hasErrors)
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeEnabled();
+  });
+
+  it('issueCounts.total=0 with validationComplete=false → not activated (BEE edit mode)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: false,
+        hasErrors: false,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+      },
+    });
+    // isHtmlEditorValidationStateActive = false → isHTMLEditorModeInEdit = false
+    // isBEEEditor = true (isEditMode && !isHtmlEditorValidationStateActive)
+    // shouldCheckValidation = false → button enabled
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeEnabled();
+  });
+});
+
+describe('SlideBoxFooter — isBEEEditor detection in create mode via emailCreateMode=editor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('detects BEE editor when emailCreateMode=editor and selectedEmailCreateMode is not html_editor (create mode)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'createTemplate',
+      emailCreateMode: 'editor',
+      selectedEmailCreateMode: 'drag_drop',
+      htmlEditorValidationState: {
+        validationComplete: false,
+        hasErrors: false,
+        isContentEmpty: false,
+        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+      },
+    });
+    // selectedEmailCreateMode=drag_drop → isBEEEditor = true (DRAG_DROP branch)
+    // shouldCheckValidation = false → button not disabled by validation
+    const createBtn = screen.getByRole('button', { name: /create/i });
+    expect(createBtn).toBeInTheDocument();
+  });
+
+  it('enables primary action button when emailCreateMode=editor but mode is not HTML editor (BEE editor path)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'createTemplate',
+      emailCreateMode: 'editor',
+      selectedEmailCreateMode: undefined,
+      htmlEditorValidationState: {
+        validationComplete: false,
+        hasErrors: false,
+        isContentEmpty: false,
+        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+      },
+    });
+    // isHTMLEditorModeInCreate = false (selectedEmailCreateMode is undefined, not html_editor)
+    // emailCreateMode === 'editor' && !isHTMLEditorMode → isBEEEditor = true
+    const createBtn = screen.getByRole('button', { name: /create/i });
+    expect(createBtn).toBeInTheDocument();
+  });
 });