@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.16

package/v2Containers/CreativesContainer/index.scss

@@ -2,74 +2,6 @@
 
 $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. Dynamic margin/padding values
- * are passed via CSS custom properties from CreativesSlideBoxWrapper.js.
- */
-.creatives-slide-box-wrapper {
-  .cap-slide-box-v2-container {
-    .slidebox-header {
-      margin-bottom: var(--slidebox-wrapper-margin, 0);
-      &.has-footer {
-        overflow-x: hidden;
-      }
-    }
-    .slidebox-content-container {
-      margin-bottom: 0;
-      padding-bottom: var(--slidebox-wrapper-margin, 0);
-      box-sizing: border-box;
-      &.has-footer {
-        overflow-x: hidden;
-      }
-    }
-    .slidebox-footer {
-      margin-bottom: var(--slidebox-footer-margin, 0);
-      &.has-footer {
-        overflow-x: hidden;
-      }
-    }
-  }
-}
-
 .#{$classPrefix} {
     &.creatives-library-mode{
         .sms-create-container,  .sms-email-container{
@@ -148,19 +80,5 @@ $classPrefix: add-creatives-section;
 }
 
 .template-footer-width {
-    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;
-    }
+    width: 100%;;
 }
-

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

@@ -531,107 +531,62 @@ describe('shouldCheckValidation (line 79)', () => {
   });
 });
 
-describe('SlideBoxFooter — isHtmlEditorValidationStateActive via issueCounts', () => {
+describe('SlideBoxFooter — continue and preview states', () => {
   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,
-      currentChannel: 'EMAIL',
-      slidBoxContent: 'editTemplate',
-      htmlEditorValidationState: {
-        validationComplete: false,
-        hasErrors: false,
-        errorsAcknowledged: false,
-        isContentEmpty: false,
-        issueCounts: { html: 1, label: 0, liquid: 0, total: 1 },
-      },
+      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,
     });
-    // 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();
+    const continueBtn = screen.getByRole('button', { name: /continue/i });
+    expect(continueBtn).toBeTruthy();
+    expect(continueBtn).toBeEnabled();
   });
 
-  it('issueCounts.total=0 with validationComplete=false → not activated (BEE edit mode)', () => {
-    const { hasSupportCKEditor } = require('../../../utils/common');
-    hasSupportCKEditor.mockReturnValue(false);
-
+  it('disables the Continue button when isContinueButtonDisabled is true', () => {
     renderComponent({
       ...baseFooterProps,
-      currentChannel: 'EMAIL',
-      slidBoxContent: 'editTemplate',
-      htmlEditorValidationState: {
-        validationComplete: false,
-        hasErrors: false,
-        errorsAcknowledged: false,
-        isContentEmpty: false,
-        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
-      },
+      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
+      shouldShowContinueFooter: jest.fn().mockReturnValue(true),
+      isContinueButtonDisabled: true,
+      continueButtonLabel: null,
     });
-    // isHtmlEditorValidationStateActive = false → isHTMLEditorModeInEdit = false
-    // isBEEEditor = true (isEditMode && !isHtmlEditorValidationStateActive)
-    // shouldCheckValidation = false → button enabled
-    const updateBtn = screen.getByRole('button', { name: /update/i });
-    expect(updateBtn).toBeEnabled();
+    const continueBtn = screen.getByRole('button', { name: /continue/i });
+    expect(continueBtn).toBeDisabled();
   });
-});
-
-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,
-      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 },
-      },
+      slidBoxContent: 'preview',
+      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
+      shouldShowContinueFooter: jest.fn().mockReturnValue(false),
+      onEditTemplate: jest.fn(),
     });
-    // 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();
+    const editBtn = screen.getByRole('button', { name: /edit/i });
+    expect(editBtn).toBeTruthy();
   });
 
-  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);
-
+  it('calls onEditTemplate when the Edit button is clicked in preview mode', () => {
+    const onEditTemplate = jest.fn();
     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 },
-      },
+      slidBoxContent: 'preview',
+      shouldShowDoneFooter: jest.fn().mockReturnValue(false),
+      shouldShowContinueFooter: jest.fn().mockReturnValue(false),
+      onEditTemplate,
     });
-    // 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();
+    screen.getByRole('button', { name: /edit/i }).click();
+    expect(onEditTemplate).toHaveBeenCalled();
   });
 });

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

@@ -73,111 +73,48 @@ describe('Test SlideBoxHeader container', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('renders templateNameRenderProp when isFullMode and shouldShowTemplateName are both true', () => {
-    const templateNameRenderProp = jest.fn().mockReturnValue(null);
+  it('Should render correct component for inapp channel edit mode (non-fullmode)', () => {
     renderedComponent = shallowWithIntl(
       <SlideBoxHeader
         slidBoxContent="editTemplate"
-        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' }}
+        channel="INAPP"
+        templateData={{ name: 'InApp Template' }}
         onCreateComplete={onCreateComplete}
         isFullMode={false}
-        shouldShowTemplateName
-        templateNameRenderProp={templateNameRenderProp}
         moduleType="journey"
       />
     );
-    expect(templateNameRenderProp).not.toHaveBeenCalled();
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('does not call templateNameRenderProp when shouldShowTemplateName is false (showTemplateNameHeader=false)', () => {
-    const templateNameRenderProp = jest.fn().mockReturnValue(null);
+  it('Should render correct component for inapp channel create mode', () => {
     renderedComponent = shallowWithIntl(
       <SlideBoxHeader
-        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' }}
+        slidBoxContent="createTemplate"
+        channel="INAPP"
+        templateData={{}}
         onCreateComplete={onCreateComplete}
         isFullMode={false}
         moduleType="journey"
+        templateStep="modeSelection"
       />
     );
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('hides edit header for InApp edit with fullMode (shouldShowInAppEditHeader=false, isInAppCreate guard)', () => {
+  it('Should render wechat map template create steps (mapTemplateCreate path)', () => {
     renderedComponent = shallowWithIntl(
       <SlideBoxHeader
-        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}
+        slidBoxContent="createTemplate"
+        channel="WECHAT"
+        templateData={{}}
         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,11 +870,6 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
       }
     }
     onCreateComplete={[MockFunction]}
-    templateData={
-      Object {
-        "mode": "create",
-      }
-    }
     waitEventContextTags={Object {}}
   />
 </SlideBoxContent__CreativesWrapper>
@@ -986,7 +981,6 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
   <Connect(UserIsAuthenticated(Component))
     FTPMode="create"
     channel="rcs"
-    localTemplatesConfig={Object {}}
     loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
@@ -1399,7 +1393,6 @@ exports[`Test SlideBoxContent container Should render correct component for what
   <Connect(UserIsAuthenticated(Component))
     FTPMode="create"
     channel="whatsapp"
-    localTemplatesConfig={Object {}}
     loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
@@ -3416,7 +3409,6 @@ exports[`Test SlideBoxContent container getViber utility function Should handle
         "name": "sms",
       }
     }
-    templateData={null}
     waitEventContextTags={Object {}}
   />
 </SlideBoxContent__CreativesWrapper>