@capillarytech/creatives-library 8.0.316-alpha.4 → 8.0.317-alpha.0

package/v2Containers/CreativesContainer/index.js

@@ -2125,6 +2125,7 @@ export class Creatives extends React.Component {
       smsRegister,
       enableNewChannels,
       eventContextTags,
+      waitEventContextTags,
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
@@ -2289,6 +2290,7 @@ export class Creatives extends React.Component {
               creativesMode={creativesMode} // An existing prop that we're using here. Required to ensure correct account details in Edit or Preview in case of Embedded mode.
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               loyaltyMetaData={loyaltyMetaData}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
@@ -2382,6 +2384,7 @@ Creatives.propTypes = {
   orgUnitId: PropTypes.number,
   hostName: PropTypes.string,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   loyaltyTagFetchingDependencies: PropTypes.object,
   customerType: PropTypes.string,
   intl: PropTypes.shape({

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

@@ -529,4 +529,108 @@ describe('shouldCheckValidation (line 79)', () => {
       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();
+  });
 });

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

@@ -72,4 +72,114 @@ describe('Test SlideBoxHeader container', () => {
     renderFunction("ZALO", "editTemplate", zaloEditTemplateData, true);
     expect(renderedComponent).toMatchSnapshot();
   });
+
+  it('renders templateNameRenderProp when isFullMode and shouldShowTemplateName are both true', () => {
+    const templateNameRenderProp = jest.fn().mockReturnValue(null);
+    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' }}
+        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);
+    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' }}
+        onCreateComplete={onCreateComplete}
+        isFullMode={false}
+        moduleType="journey"
+      />
+    );
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('hides edit header for InApp edit with fullMode (shouldShowInAppEditHeader=false, isInAppCreate guard)', () => {
+    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}
+        onCreateComplete={onCreateComplete}
+        isFullMode={false}
+        moduleType="journey"
+      />
+    );
+    expect(renderedComponent).toMatchSnapshot();
+  });
 });

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

@@ -377,3 +377,366 @@ exports[`Test SlideBoxHeader container Should render correct component for zalo
   />
 </div>
 `;
+
+exports[`Test SlideBoxHeader container does not call templateNameRenderProp when isFullMode is false (showTemplateNameHeader=false) 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    className="support-video-elements"
+    description={
+      <React.Fragment>
+        
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Edit {channel}"
+        id="creatives.containersV2.Creatives.editMessageContent"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="SMS"
+              id="creatives.containersV2.Creatives.smsHeader"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container does not call templateNameRenderProp when shouldShowTemplateName is false (showTemplateNameHeader=false) 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    className="support-video-elements"
+    description={
+      <React.Fragment>
+        
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    prefix={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Edit {channel}"
+        id="creatives.containersV2.Creatives.editMessageContent"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="SMS"
+              id="creatives.containersV2.Creatives.smsHeader"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container hides edit header for InApp edit with fullMode (shouldShowInAppEditHeader=false, isInAppCreate guard) 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    className="support-video-elements"
+    description={
+      <React.Fragment>
+        
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    prefix={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Edit {channel}"
+        id="creatives.containersV2.Creatives.editMessageContent"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="In App Message"
+              id="creatives.containersV2.Creatives.inAppHeader"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container renders templateNameRenderProp when isFullMode and shouldShowTemplateName are both true 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+/>
+`;
+
+exports[`Test SlideBoxHeader container renders whatsappOverview=false header when WHATSAPP edit without fullMode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    className="support-video-elements"
+    description={
+      <React.Fragment>
+        <React.Fragment>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Template name"
+              id="creatives.containersV2.templateNameLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className="whatsapp-rcs-slidebox-template-name"
+            type="label2"
+          >
+            amit123456
+          </SlideBoxHeader__StyledLabel>
+        </React.Fragment>
+        <React.Fragment>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label3"
+          >
+            <FormattedMessage
+              defaultMessage="|"
+              id="creatives.containersV2.Whatsapp.labelSeperator"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Template category"
+              id="creatives.containersV2.Whatsapp.templateCategoryLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label2"
+          >
+            Alert Update
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label3"
+          >
+            <FormattedMessage
+              defaultMessage="|"
+              id="creatives.containersV2.Whatsapp.labelSeperator"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Language"
+              id="creatives.containersV2.Whatsapp.languageLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label2"
+          >
+            <FormattedMessage
+              defaultMessage="English"
+              id="creatives.containersV2.Whatsapp.english"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+        </React.Fragment>
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Edit {channel}"
+        id="creatives.containersV2.Creatives.editMessageContent"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="WhatsApp template"
+              id="creatives.containersV2.Creatives.whatsappTemplate"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container renders whatsappOverview=true header when WHATSAPP edit in fullMode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    className="support-video-elements"
+    description={
+      <React.Fragment>
+        <React.Fragment>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Template name"
+              id="creatives.containersV2.templateNameLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className="whatsapp-rcs-slidebox-template-name"
+            type="label2"
+          >
+            amit123456
+          </SlideBoxHeader__StyledLabel>
+        </React.Fragment>
+        <React.Fragment>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label3"
+          >
+            <FormattedMessage
+              defaultMessage="|"
+              id="creatives.containersV2.Whatsapp.labelSeperator"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Template category"
+              id="creatives.containersV2.Whatsapp.templateCategoryLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label2"
+          >
+            Alert Update
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label3"
+          >
+            <FormattedMessage
+              defaultMessage="|"
+              id="creatives.containersV2.Whatsapp.labelSeperator"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Language"
+              id="creatives.containersV2.Whatsapp.languageLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className=""
+            type="label2"
+          >
+            <FormattedMessage
+              defaultMessage="English"
+              id="creatives.containersV2.Whatsapp.english"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+        </React.Fragment>
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    prefix={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="WhatsApp template overview"
+        id="creatives.containersV2.Creatives.whatsappOverview"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="WhatsApp template"
+              id="creatives.containersV2.Creatives.whatsappTemplate"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;
+
+exports[`Test SlideBoxHeader container shows edit header for InApp edit without fullMode (shouldShowInAppEditHeader=true) 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    className="support-video-elements"
+    description={
+      <React.Fragment>
+        
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Edit {channel}"
+        id="creatives.containersV2.Creatives.editMessageContent"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="In App Message"
+              id="creatives.containersV2.Creatives.inAppHeader"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;