@capillarytech/creatives-library 9.0.28 → 9.0.29-alpha.1

package/v2Containers/CreativesContainer/index.scss

@@ -2,6 +2,93 @@
 
 $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%;
+  }
+}
+
+/*
+ * Liquid-error spacing must stay inside the content column. margin-bottom on
+ * .slidebox-content-container added to the in-flow height past 100vh, so the outer
+ * .cap-slide-box-v2-container gained a second scrollbar. Margin/padding values are
+ * static per modifier class, driven off the same enum CreativesSlideBoxWrapper.js maps from.
+ */
+.creatives-slide-box-wrapper {
+  .cap-slide-box-v2-container {
+    .slidebox-content-container {
+      margin-bottom: 0;
+      box-sizing: border-box;
+      &.has-footer {
+        overflow-x: hidden;
+      }
+    }
+    .slidebox-header.has-footer,
+    .slidebox-footer.has-footer {
+      overflow-x: hidden;
+    }
+  }
+
+  &--margin-32 .cap-slide-box-v2-container {
+    .slidebox-header {
+      margin-bottom: $CAP_SPACE_32;
+    }
+    .slidebox-content-container {
+      padding-bottom: $CAP_SPACE_32;
+    }
+  }
+  &--margin-56 .cap-slide-box-v2-container {
+    .slidebox-header {
+      margin-bottom: $CAP_SPACE_56;
+    }
+    .slidebox-content-container {
+      padding-bottom: $CAP_SPACE_56;
+    }
+  }
+  &--margin-64 .cap-slide-box-v2-container {
+    .slidebox-header {
+      margin-bottom: $CAP_SPACE_64;
+    }
+    .slidebox-content-container {
+      padding-bottom: $CAP_SPACE_64;
+    }
+  }
+  &--footer-margin .cap-slide-box-v2-container .slidebox-footer {
+    margin-bottom: $CAP_SPACE_16;
+  }
+}
+
 .#{$classPrefix} {
     &.creatives-library-mode{
         .sms-create-container,  .sms-email-container{
@@ -80,5 +167,19 @@ $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/v2Containers/CreativesContainer/tests/CreativesSlideBoxWrapper.test.js

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { CAP_SPACE_32 } from '@capillarytech/cap-ui-library/styled/variables';
+import CreativesSlideBoxWrapper from '../CreativesSlideBoxWrapper';
+
+describe('CreativesSlideBoxWrapper', () => {
+  it('renders children inside a div with the base wrapper class', () => {
+    const { container, getByText } = render(
+      <CreativesSlideBoxWrapper slideBoxWrapperMargin={CAP_SPACE_32}>
+        <span>content</span>
+      </CreativesSlideBoxWrapper>,
+    );
+    expect(getByText('content')).toBeInTheDocument();
+    const wrapperDiv = container.firstChild;
+    expect(wrapperDiv).not.toHaveAttribute('style');
+    expect(wrapperDiv.className).toBe('creatives-slide-box-wrapper creatives-slide-box-wrapper--margin-32');
+  });
+
+  it('renders no margin modifier class when slideBoxWrapperMargin is 0', () => {
+    const { container } = render(
+      <CreativesSlideBoxWrapper slideBoxWrapperMargin={0}>
+        <span>content</span>
+      </CreativesSlideBoxWrapper>,
+    );
+    expect(container.firstChild.className).toBe('creatives-slide-box-wrapper');
+  });
+
+  it('appends the provided className to the base wrapper class', () => {
+    const { container } = render(
+      <CreativesSlideBoxWrapper className="extra-class">
+        <span>content</span>
+      </CreativesSlideBoxWrapper>,
+    );
+    expect(container.firstChild.className).toBe('creatives-slide-box-wrapper extra-class');
+  });
+
+  it('applies the footer margin modifier class when shouldApplyFooterMargin is true', () => {
+    const { container } = render(
+      <CreativesSlideBoxWrapper shouldApplyFooterMargin>
+        <span>content</span>
+      </CreativesSlideBoxWrapper>,
+    );
+    expect(container.firstChild.className).toBe('creatives-slide-box-wrapper creatives-slide-box-wrapper--footer-margin');
+  });
+
+  it('spreads any remaining props onto the wrapper div', () => {
+    const { container } = render(
+      <CreativesSlideBoxWrapper data-testid="wrapper-rest-prop">
+        <span>content</span>
+      </CreativesSlideBoxWrapper>,
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'wrapper-rest-prop');
+  });
+});

package/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/v2Containers/CreativesContainer/tests/SlideBoxContent.smsDltPreview.test.js

@@ -0,0 +1,73 @@
+/**
+ * Covers the SMS `getChannelPreviewContent` DLT-enabled branch in SlideBoxContent, which joins
+ * `updated-sms-editor` segments into a single string for the preview. Isolated in its own file
+ * (mirrors SlideBoxContent.localTemplates.test.js) because it mocks TemplatePreview and
+ * isTraiDLTEnable, which would otherwise affect the large shared snapshot suite.
+ */
+import React from 'react';
+import { mountWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import * as commonUtil from '../../../utils/common';
+import { SlideBoxContent } from '../SlideBoxContent';
+
+const mockTemplatePreview = jest.fn(() => <div data-testid="template-preview-mock" />);
+jest.mock('../../../v2Components/TemplatePreview', () => ({
+  __esModule: true,
+  default: (props) => mockTemplatePreview(props),
+}));
+
+describe('SlideBoxContent getChannelPreviewContent — SMS DLT branch', () => {
+  const onCreateComplete = jest.fn();
+
+  const renderFunction = (templateData) => mountWithIntl(
+    <SlideBoxContent
+      slidBoxContent="preview"
+      currentChannel="SMS"
+      templateData={templateData}
+      onCreateComplete={onCreateComplete}
+    />,
+  );
+
+  beforeEach(() => {
+    mockTemplatePreview.mockClear();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('joins updated-sms-editor segments into one string when DLT is enabled', () => {
+    jest.spyOn(commonUtil, 'isTraiDLTEnable').mockReturnValue(true);
+
+    renderFunction({
+      type: 'SMS',
+      versions: {
+        base: {
+          'updated-sms-editor': ['Hello', ' ', 'World'],
+          'sms-editor': 'Should not be used',
+        },
+      },
+    });
+
+    expect(mockTemplatePreview).toHaveBeenCalledWith(
+      expect.objectContaining({ content: 'Hello World' }),
+    );
+  });
+
+  it('falls back to sms-editor when DLT is enabled but updated-sms-editor is empty', () => {
+    jest.spyOn(commonUtil, 'isTraiDLTEnable').mockReturnValue(true);
+
+    renderFunction({
+      type: 'SMS',
+      versions: {
+        base: {
+          'updated-sms-editor': '',
+          'sms-editor': 'Plain SMS content',
+        },
+      },
+    });
+
+    expect(mockTemplatePreview).toHaveBeenCalledWith(
+      expect.objectContaining({ content: 'Plain SMS content' }),
+    );
+  });
+});

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

@@ -272,6 +272,21 @@ describe('Test SlideBoxContent container', () => {
       renderFunction('LINE', 'createTemplate', templateData, { isFullMode: false });
       expect(renderedComponent).toMatchSnapshot();
     });
+
+    it('Should handle LINE channel in non-full mode with template data that is neither an edit nor a default', () => {
+      // templateData is present but has no _id, no message body, and isDefault is falsy,
+      // so getLineType falls through to the final `return {}` (isCreate/isEdit both false).
+      const templateData = {
+        isDefault: false,
+      };
+      renderFunction('LINE', 'createTemplate', templateData, { isFullMode: false });
+      expect(renderedComponent).toMatchSnapshot();
+    });
+
+    it('Should derive isCreate/isEdit from slidBoxContent in non-full mode when templateData is absent', () => {
+      renderFunction('LINE', 'createTemplate', null, { isFullMode: false });
+      expect(renderedComponent).toMatchSnapshot();
+    });
   });
 
   describe('getViber utility function', () => {
@@ -359,6 +374,28 @@ describe('Test SlideBoxContent container', () => {
       });
       expect(renderedComponent).toMatchSnapshot();
     });
+
+    it('renders the direct Email component for a BEE (drag-drop) template regardless of hasSupportCKEditor', () => {
+      const emailTemplateData = {
+        type: 'EMAIL',
+        _id: '123',
+        base: {
+          is_drag_drop: true,
+        },
+        versions: {
+          base: {
+            content: {},
+          },
+        },
+      };
+
+      renderFunction('EMAIL', 'editTemplate', emailTemplateData, {
+        ...commonEmailProps,
+        isTestAndPreviewMode: false,
+        showTestAndPreviewSlidebox: false,
+      });
+      expect(renderedComponent).toMatchSnapshot();
+    });
   });
 
   describe('getChannelPreviewContent utility function for LINE messages type detection', () => {

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

@@ -531,62 +531,131 @@ describe('shouldCheckValidation (line 79)', () => {
   });
 });
 
-describe('SlideBoxFooter — continue and preview states', () => {
+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);
-  });
 
-  it('renders the Continue button when shouldShowContinueFooter returns true', () => {
     renderComponent({
       ...baseFooterProps,
-      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
-      shouldShowContinueFooter: jest.fn().mockReturnValue(true),
-      isContinueButtonDisabled: false,
-      // null lets the component fall back to messages.continue (has a valid id)
-      // The defaultProp {} has no id, which causes FormattedMessage to throw
-      continueButtonLabel: null,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: false,
+        hasErrors: false,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 1, label: 0, liquid: 0, total: 1 },
+      },
     });
-    const continueBtn = screen.getByRole('button', { name: /continue/i });
-    expect(continueBtn).toBeTruthy();
-    expect(continueBtn).toBeEnabled();
+    // 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('disables the Continue button when isContinueButtonDisabled is true', () => {
+  it('issueCounts.total=0 with validationComplete=false → not activated (BEE edit mode)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+
     renderComponent({
       ...baseFooterProps,
-      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
-      shouldShowContinueFooter: jest.fn().mockReturnValue(true),
-      isContinueButtonDisabled: true,
-      continueButtonLabel: null,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: false,
+        hasErrors: false,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+      },
     });
-    const continueBtn = screen.getByRole('button', { name: /continue/i });
-    expect(continueBtn).toBeDisabled();
+    // 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('renders the Edit button when slidBoxContent is preview', () => {
+  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,
-      slidBoxContent: 'preview',
-      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
-      shouldShowContinueFooter: jest.fn().mockReturnValue(false),
-      onEditTemplate: jest.fn(),
+      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 },
+      },
     });
-    const editBtn = screen.getByRole('button', { name: /edit/i });
-    expect(editBtn).toBeTruthy();
+    // 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('calls onEditTemplate when the Edit button is clicked in preview mode', () => {
-    const onEditTemplate = jest.fn();
+  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,
-      slidBoxContent: 'preview',
-      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
-      shouldShowContinueFooter: jest.fn().mockReturnValue(false),
-      onEditTemplate,
+      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();
+    expect(createBtn).not.toBeDisabled();
+  });
+
+  describe('getSaveButtonLabel', () => {
+    it('shows the creating-template label when isFullMode and isCreatingTemplate are both true', () => {
+      renderComponent({
+        ...baseFooterProps,
+        isFullMode: true,
+        isCreatingTemplate: true,
+        slidBoxContent: 'editTemplate',
+      });
+      // getFullModeSaveBtn short-circuits on isCreatingTemplate before checking EDIT_TEMPLATE,
+      // so the label is "Done" (creativesTemplatesDone) rather than "Update".
+      expect(screen.getByRole('button', { name: /done/i })).toBeInTheDocument();
+    });
+
+    it('falls back to the non-full-mode save label when isFullMode is false', () => {
+      renderComponent({
+        ...baseFooterProps,
+        isFullMode: false,
+        isCreatingTemplate: false,
+        slidBoxContent: 'editTemplate',
+      });
+      expect(screen.getByRole('button', { name: /done/i })).toBeInTheDocument();
     });
-    screen.getByRole('button', { name: /edit/i }).click();
-    expect(onEditTemplate).toHaveBeenCalled();
   });
 });