@capillarytech/creatives-library 8.0.345-alpha.13 → 8.0.345-alpha.15

package/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/v2Containers/CreativesContainer/messages.js

@@ -390,8 +390,4 @@ export default defineMessages({
     id: `${scope}.personalizationTokensErrorMessage`,
     defaultMessage: `Personalization tags are not supported for anonymous customers, please remove the tags.`,
   },
-  "cannotEditArchivedTemplate": {
-    id: `${scope}.cannotEditArchivedTemplate`,
-    defaultMessage: 'Cannot edit an archived template. Please unarchive it first.',
-  },
 });

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/SlideBoxFooter.test.js

@@ -531,62 +531,106 @@ 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('detects BEE editor when emailCreateMode=editor and selectedEmailCreateMode is not html_editor (create mode)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
 
-  it('renders the Edit button when slidBoxContent is preview', () => {
     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 },
+      },
     });
-    screen.getByRole('button', { name: /edit/i }).click();
-    expect(onEditTemplate).toHaveBeenCalled();
+    // isHTMLEditorModeInCreate = false (selectedEmailCreateMode is undefined, not html_editor)
+    // emailCreateMode === 'editor' && !isHTMLEditorMode → isBEEEditor = true
+    const createBtn = screen.getByRole('button', { name: /create/i });
+    expect(createBtn).toBeInTheDocument();
   });
 });

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

@@ -73,48 +73,111 @@ describe('Test SlideBoxHeader container', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('Should render correct component for inapp channel edit mode (non-fullmode)', () => {
+  it('renders templateNameRenderProp when isFullMode and shouldShowTemplateName are both true', () => {
+    const templateNameRenderProp = jest.fn().mockReturnValue(null);
     renderedComponent = shallowWithIntl(
       <SlideBoxHeader
         slidBoxContent="editTemplate"
-        channel="INAPP"
-        templateData={{ name: 'InApp Template' }}
+        channel="SMS"
+        templateData={{ name: 'My Template' }}
+        onCreateComplete={onCreateComplete}
+        isFullMode
+        shouldShowTemplateName
+        templateNameRenderProp={templateNameRenderProp}
+        moduleType="journey"
+      />
+    );
+    expect(templateNameRenderProp).toHaveBeenCalled();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('does not call templateNameRenderProp when isFullMode is false (showTemplateNameHeader=false)', () => {
+    const templateNameRenderProp = jest.fn().mockReturnValue(null);
+    renderedComponent = shallowWithIntl(
+      <SlideBoxHeader
+        slidBoxContent="editTemplate"
+        channel="SMS"
+        templateData={{ name: 'My Template' }}
         onCreateComplete={onCreateComplete}
         isFullMode={false}
+        shouldShowTemplateName
+        templateNameRenderProp={templateNameRenderProp}
         moduleType="journey"
       />
     );
+    expect(templateNameRenderProp).not.toHaveBeenCalled();
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('Should render correct component for inapp channel create mode', () => {
+  it('does not call templateNameRenderProp when shouldShowTemplateName is false (showTemplateNameHeader=false)', () => {
+    const templateNameRenderProp = jest.fn().mockReturnValue(null);
     renderedComponent = shallowWithIntl(
       <SlideBoxHeader
-        slidBoxContent="createTemplate"
-        channel="INAPP"
-        templateData={{}}
+        slidBoxContent="editTemplate"
+        channel="SMS"
+        templateData={{ name: 'My Template' }}
+        onCreateComplete={onCreateComplete}
+        isFullMode
+        shouldShowTemplateName={false}
+        templateNameRenderProp={templateNameRenderProp}
+        moduleType="journey"
+      />
+    );
+    expect(templateNameRenderProp).not.toHaveBeenCalled();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('shows edit header for InApp edit without fullMode (shouldShowInAppEditHeader=true)', () => {
+    renderedComponent = shallowWithIntl(
+      <SlideBoxHeader
+        slidBoxContent="editTemplate"
+        channel="inapp"
+        templateData={{ name: 'InApp Tpl' }}
         onCreateComplete={onCreateComplete}
         isFullMode={false}
         moduleType="journey"
-        templateStep="modeSelection"
       />
     );
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('Should render wechat map template create steps (mapTemplateCreate path)', () => {
+  it('hides edit header for InApp edit with fullMode (shouldShowInAppEditHeader=false, isInAppCreate guard)', () => {
     renderedComponent = shallowWithIntl(
       <SlideBoxHeader
-        slidBoxContent="createTemplate"
-        channel="WECHAT"
-        templateData={{}}
+        slidBoxContent="editTemplate"
+        channel="inapp"
+        templateData={{ name: 'InApp Tpl' }}
+        onCreateComplete={onCreateComplete}
+        isFullMode
+        moduleType="journey"
+      />
+    );
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('renders whatsappOverview=true header when WHATSAPP edit in fullMode', () => {
+    renderedComponent = shallowWithIntl(
+      <SlideBoxHeader
+        slidBoxContent="editTemplate"
+        channel="WHATSAPP"
+        templateData={whatsappEditTemplateData}
+        onCreateComplete={onCreateComplete}
+        isFullMode
+        moduleType="journey"
+      />
+    );
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('renders whatsappOverview=false header when WHATSAPP edit without fullMode', () => {
+    renderedComponent = shallowWithIntl(
+      <SlideBoxHeader
+        slidBoxContent="editTemplate"
+        channel="WHATSAPP"
+        templateData={whatsappEditTemplateData}
         onCreateComplete={onCreateComplete}
         isFullMode={false}
         moduleType="journey"
-        weChatTemplateType="mapTemplate"
-        templateStep="createTemplateContent"
-        onWeChatMaptemplateStepChange={jest.fn()}
-        weChatMaptemplateStep={0}
       />
     );
     expect(renderedComponent).toMatchSnapshot();

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

@@ -870,6 +870,11 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
       }
     }
     onCreateComplete={[MockFunction]}
+    templateData={
+      Object {
+        "mode": "create",
+      }
+    }
     waitEventContextTags={Object {}}
   />
 </SlideBoxContent__CreativesWrapper>
@@ -981,6 +986,7 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
   <Connect(UserIsAuthenticated(Connect(InjectIntl(withStyles__StyledComponent))))
     FTPMode="create"
     channel="rcs"
+    localTemplatesConfig={Object {}}
     loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
@@ -1393,6 +1399,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
   <Connect(UserIsAuthenticated(Connect(InjectIntl(withStyles__StyledComponent))))
     FTPMode="create"
     channel="whatsapp"
+    localTemplatesConfig={Object {}}
     loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
@@ -3409,6 +3416,7 @@ exports[`Test SlideBoxContent container getViber utility function Should handle
         "name": "sms",
       }
     }
+    templateData={null}
     waitEventContextTags={Object {}}
   />
 </SlideBoxContent__CreativesWrapper>