@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

package/v2Containers/EmailWrapper/index.js

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
+import { compose } from 'redux';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {
   selectEmailLayout,
@@ -18,10 +19,17 @@ import {
   selectCmsTemplatesLoader,
 } from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
-import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
+import { selectCurrentOrgDetails, makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags, selectLiquidStateDetails } from "../../v2Containers/Cap/selectors";
+import { makeSelectEmail, selectLoadingStatus, makeSelectFetchingCmsData } from '../Email/selectors';
+import * as emailActionsCreators from '../Email/actions';
+import * as globalActions from '../Cap/actions';
 import EmailWrapperView from './components/EmailWrapperView';
 import useEmailWrapper from './hooks/useEmailWrapper';
 import HTMLEditorTesting from './components/HTMLEditorTesting';
+import injectReducer from '../../utils/injectReducer';
+import injectSaga from '../../utils/injectSaga';
+import v2EmailReducer from '../Email/reducer';
+import { v2EmailSagas } from '../Email/sagas';
 
 
 const EmailWrapper = (props) => {
@@ -64,6 +72,18 @@ const EmailWrapper = (props) => {
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
+    location,
+    emailActions,
+    Email,
+    metaEntities,
+    loadingTags,
+    injectedTags,
+    globalActions: globalActionsProp,
+    templateData,
+    params,
+    fetchingLiquidTags,
+    createTemplateInProgress,
+    fetchingCmsData,
   } = props;
 
   // Pass destructured props to the custom hook
@@ -76,9 +96,12 @@ const EmailWrapper = (props) => {
     emailProps,
     cmsTemplatesProps,
     uploadButtonLabel,
+    showNextButton,
+    isNextButtonEnabled,
     onTemplateNameChange,
     onChange,
     useFileUpload,
+    handleNextClick,
   } = useEmailWrapper({
     emailCreateMode,
     step,
@@ -117,32 +140,68 @@ const EmailWrapper = (props) => {
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
+    location,
+    emailActions,
+    Email,
+    templateData,
+    params,
   });
 
   // Render using the presentation component with data from the hook
   return (
     <div>
       <EmailWrapperView
-      isUploading={isUploading}
-      emailCreateMode={emailCreateMode}
-      step={step}
-      isFullMode={isFullMode}
-      templateName={templateName}
-      onTemplateNameChange={onTemplateNameChange}
-      isTemplateNameEmpty={isTemplateNameEmpty}
-      modes={modes}
-      onChange={onChange}
-      EmailLayout={EmailLayout}
-      modeContent={modeContent}
-      useFileUpload={useFileUpload}
-      uploadButtonLabel={uploadButtonLabel}
-      isShowEmailCreate={isShowEmailCreate}
-      emailProps={emailProps}
-      cmsTemplatesProps={cmsTemplatesProps}
-      onPreviewContentClicked={onPreviewContentClicked}
-      onTestContentClicked={onTestContentClicked}
-      editor={editor}
-    />
+        isUploading={isUploading}
+        emailCreateMode={emailCreateMode}
+        step={step}
+        isFullMode={isFullMode}
+        templateName={templateName}
+        onTemplateNameChange={onTemplateNameChange}
+        isTemplateNameEmpty={isTemplateNameEmpty}
+        modes={modes}
+        onChange={onChange}
+        EmailLayout={EmailLayout}
+        modeContent={modeContent}
+        useFileUpload={useFileUpload}
+        uploadButtonLabel={uploadButtonLabel}
+        isShowEmailCreate={isShowEmailCreate}
+        emailProps={emailProps}
+        cmsTemplatesProps={cmsTemplatesProps}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
+        editor={editor}
+        // New flow props - only used when supportCKEditor is false
+        // These props are needed for EmailHTMLEditor component (tag loading, validation, etc.)
+        metaEntities={metaEntities}
+        loadingTags={loadingTags}
+        injectedTags={injectedTags}
+        globalActions={globalActionsProp}
+        supportedTags={props.supportedTags}
+        getDefaultTags={type}
+        location={location}
+        currentOrgDetails={currentOrgDetails}
+        onValidationFail={onValidationFail}
+        forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
+        getFormdata={getFormdata}
+        isGetFormData={isGetFormData}
+        getLiquidTags={globalActionsProp?.getLiquidTags}
+        showLiquidErrorInFooter={showLiquidErrorInFooter}
+        intl={intl}
+        emailActions={emailActions}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
+        Email={Email}
+        setIsLoadingContent={setIsLoadingContent}
+        templateData={templateData}
+        params={params}
+        showTemplateName={showTemplateName}
+        fetchingLiquidTags={fetchingLiquidTags}
+        createTemplateInProgress={createTemplateInProgress}
+        fetchingCmsData={fetchingCmsData}
+      />
 
       {/* HTMLEditor Testing Component - Console Controlled */}
       <HTMLEditorTesting />
@@ -159,7 +218,7 @@ EmailWrapper.propTypes = {
   templatesActions: PropTypes.object,
   CmsTemplates: PropTypes.arrayOf(PropTypes.object),
   SelectedEdmDefaultTemplate: PropTypes.object,
-  step: PropTypes.string,
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   showNextStep: PropTypes.func,
   getFormdata: PropTypes.func,
   intl: intlShape,
@@ -187,6 +246,7 @@ EmailWrapper.propTypes = {
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
   isTestAndPreviewMode: PropTypes.bool,
+  location: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -196,12 +256,31 @@ const mapStateToProps = createStructuredSelector({
   isUploading: uploadSelector(),
   cmsTemplatesLoader: selectCmsTemplatesLoader(),
   currentOrgDetails: selectCurrentOrgDetails(),
+  Email: makeSelectEmail(),
+  metaEntities: makeSelectMetaEntities(),
+  loadingTags: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
+  fetchingLiquidTags: selectLiquidStateDetails(),
+  createTemplateInProgress: selectLoadingStatus(),
+  fetchingCmsData: makeSelectFetchingCmsData(),
 });
 
 function mapDispatchToProps(dispatch) {
   return {
     templatesActions: bindActionCreators(templatesActionsCreators, dispatch),
+    emailActions: bindActionCreators(emailActionsCreators, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(EmailWrapper)));
+// Inject Email reducer and saga so that getCmsSetting action can be handled
+const withReducer = injectReducer({ key: 'email', reducer: v2EmailReducer });
+const withEmailSaga = injectSaga({ key: 'email', saga: v2EmailSagas });
+
+const ConnectedEmailWrapper = connect(mapStateToProps, mapDispatchToProps)(injectIntl(EmailWrapper));
+
+export default compose(
+  UserIsAuthenticated,
+  withReducer,
+  withEmailSaga,
+)(ConnectedEmailWrapper);

package/v2Containers/EmailWrapper/messages.js

@@ -60,6 +60,66 @@ export default defineMessages({
   },
   emptyTemplateName: {
     id: `creatives.containersV2.EmailWrapper.emptyTemplateName`,
-    defaultMessage: `Please enter template name.`
+    defaultMessage: `Please enter template name.`,
+  },
+  htmlEditorTitle: {
+    id: 'creatives.EmailWrapper.htmlEditorTitle',
+    defaultMessage: 'HTML editor',
+  },
+  htmlEditorDesc: {
+    id: 'creatives.EmailWrapper.htmlEditorDesc',
+    defaultMessage: 'Use a basic HTML editor to write and format your content. Suitable if you are familiar with HTML.',
+  },
+  dragDropEditorTitle: {
+    id: 'creatives.EmailWrapper.dragDropEditorTitle',
+    defaultMessage: 'Drag & drop editor',
+  },
+  dragDropEditorDesc: {
+    id: 'creatives.EmailWrapper.dragDropEditorDesc',
+    defaultMessage: 'Create your content visually by dragging blocks — no coding needed. Great for quick, easy designs.',
+  },
+  uploadZipTitle: {
+    id: 'creatives.EmailWrapper.uploadZipTitle',
+    defaultMessage: 'Upload zip file',
+  },
+  uploadZipDesc: {
+    id: 'creatives.EmailWrapper.uploadZipDesc',
+    defaultMessage: 'Upload a ZIP containing your custom HTML, images, and assets. Ideal if your content is already built.',
+  },
+  next: {
+    id: 'creatives.EmailWrapper.next',
+    defaultMessage: 'Next',
+  },
+  beeEditorDisabledTooltip: {
+    id: 'creatives.EmailWrapper.beeEditorDisabledTooltip',
+    defaultMessage: 'Please get the drag & drop editor enabled for your brand',
+  },
+  emailContent: {
+    id: 'creatives.containersV2.Email.emailContent',
+    defaultMessage: 'Email content',
+  },
+  create: {
+    id: 'creatives.containersV2.EmailWrapper.create',
+    defaultMessage: 'Create',
+  },
+  update: {
+    id: 'creatives.containersV2.EmailWrapper.update',
+    defaultMessage: 'Update',
+  },
+  previewAndTest: {
+    id: 'creatives.containersV2.EmailWrapper.previewAndTest',
+    defaultMessage: 'Preview and Test',
+  },
+  required: {
+    id: 'creatives.containersV2.EmailWrapper.required',
+    defaultMessage: 'Required',
+  },
+  subject: {
+    id: 'creatives.containersV2.EmailWrapper.subject',
+    defaultMessage: 'Subject',
+  },
+  enterEmailSubject: {
+    id: 'creatives.containersV2.EmailWrapper.enterEmailSubject',
+    defaultMessage: 'Enter Email Subject',
   },
 });

package/v2Containers/EmailWrapper/tests/EmailHTMLEditor.test.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import EmailHTMLEditor from '../components/EmailHTMLEditor';
+
+// Mock dependencies
+jest.mock('../messages', () => ({
+    create: { id: 'create', defaultMessage: 'Create' },
+    update: { id: 'update', defaultMessage: 'Update' },
+    previewAndTest: { id: 'previewAndTest', defaultMessage: 'Preview and Test' },
+    required: { id: 'required', defaultMessage: 'Required' },
+    subject: { id: 'subject', defaultMessage: 'Subject' },
+    emailContent: { id: 'emailContent', defaultMessage: 'Email Content' },
+    enterEmailSubject: { id: 'enterEmailSubject', defaultMessage: 'Enter Email Subject' },
+}));
+jest.mock('../../../v2Components/HtmlEditor', () => ({
+    __esModule: true,
+    default: ({ onContentChange, initialContent, onSave }) => (
+        <div data-testid="html-editor">
+            <textarea
+                data-testid="html-editor-textarea"
+                value={initialContent}
+                onChange={(e) => onContentChange(e.target.value)}
+            />
+            <button data-testid="html-editor-save" onClick={onSave}>Save in Editor</button>
+        </div>
+    ),
+}));
+
+jest.mock('../../../v2Components/CapTagListWithInput', () => ({
+    __esModule: true,
+    default: ({ inputOnChange, inputValue, inputErrorMessage, onTagSelect }) => (
+        <div data-testid="cap-tag-list-input">
+            <input
+                data-testid="subject-input"
+                value={inputValue}
+                onChange={inputOnChange}
+            />
+            {inputErrorMessage && <div data-testid="subject-error">{inputErrorMessage}</div>}
+            <button data-testid="add-tag-btn" onClick={() => onTagSelect('FirstName')}>Add Tag</button>
+        </div>
+    ),
+}));
+
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
+    __esModule: true,
+    default: ({ message, description }) => (
+        <div data-testid="cap-notification">
+            {message}
+            {description}
+        </div>
+    ),
+}));
+
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => ({
+    __esModule: true,
+    default: ({ children, spinning }) => (
+        <div data-testid="cap-spin" data-spinning={spinning}>
+            {children}
+        </div>
+    ),
+}));
+
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => ({
+    __esModule: true,
+    default: ({ children, onClick, type }) => (
+        <button data-testid={`cap-button-${type}`} onClick={onClick}>
+            {children}
+        </button>
+    ),
+}));
+
+describe('EmailHTMLEditor', () => {
+    const mockOnSave = jest.fn();
+    const mockOnPreview = jest.fn();
+    const mockOnSubjectChange = jest.fn();
+    const mockOnContentChange = jest.fn();
+
+    const defaultProps = {
+        intl: { formatMessage: ({ id, defaultMessage }) => defaultMessage || id },
+        onSave: mockOnSave,
+        onPreview: mockOnPreview,
+        onSubjectChange: mockOnSubjectChange,
+        onContentChange: mockOnContentChange,
+        loadingTags: false,
+        fetchingLiquidTags: false,
+        createTemplateInProgress: false,
+        fetchingCmsData: false,
+    };
+
+    const renderComponent = (props = {}) => {
+        return render(
+            <IntlProvider locale="en" messages={{}}>
+                <EmailHTMLEditor {...defaultProps} {...props} />
+            </IntlProvider>
+        );
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders correctly', () => {
+        renderComponent();
+        expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+        expect(screen.getByTestId('cap-tag-list-input')).toBeInTheDocument();
+        expect(screen.getByTestId('cap-button-primary')).toHaveTextContent('Create');
+        expect(screen.getByTestId('cap-button-secondary')).toHaveTextContent('Preview and Test');
+    });
+
+    it('renders Update button in edit mode', () => {
+        renderComponent({ isEditMode: true });
+        expect(screen.getByTestId('cap-button-primary')).toHaveTextContent('Update');
+    });
+
+    it('updates subject state on change', () => {
+        renderComponent();
+        const input = screen.getByTestId('subject-input');
+        fireEvent.change(input, { target: { value: 'New Subject' } });
+        expect(mockOnSubjectChange).toHaveBeenCalledWith('New Subject');
+        expect(input.value).toBe('New Subject');
+    });
+
+    it('updates content state on change', () => {
+        renderComponent();
+        const textarea = screen.getByTestId('html-editor-textarea');
+        fireEvent.change(textarea, { target: { value: '<p>New Content</p>' } });
+        expect(mockOnContentChange).toHaveBeenCalledWith('<p>New Content</p>');
+    });
+
+    it('validates empty subject on save', () => {
+        renderComponent();
+        const saveBtn = screen.getByTestId('cap-button-primary');
+        fireEvent.click(saveBtn);
+
+        expect(mockOnSave).not.toHaveBeenCalled();
+        // Expect internal error state to be set (mocked CapTagListWithInput displays it)
+        // Note: The mock implementation displays inputErrorMessage prop. 
+        // EmailHTMLEditor passes `subjectError || internalSubjectError`.
+        // We need to wait for state update if necessary, but fireEvent is synchronous for state updates in tests usually.
+        expect(screen.getByTestId('subject-error')).toBeInTheDocument();
+    });
+
+    it('calls onSave with valid data', () => {
+        renderComponent({ initialSubject: 'Valid Subject', initialContent: '<p>Valid Content</p>' });
+        const saveBtn = screen.getByTestId('cap-button-primary');
+        fireEvent.click(saveBtn);
+
+        expect(mockOnSave).toHaveBeenCalledWith({
+            subject: 'Valid Subject',
+            content: '<p>Valid Content</p>',
+        });
+    });
+
+    it('calls onPreview with valid data', () => {
+        renderComponent({ initialSubject: 'Subject', initialContent: 'Content' });
+        const previewBtn = screen.getByTestId('cap-button-secondary');
+        fireEvent.click(previewBtn);
+
+        expect(mockOnPreview).toHaveBeenCalledWith({
+            subject: 'Subject',
+            content: 'Content',
+        });
+    });
+
+    it('handles tag insertion into subject', () => {
+        renderComponent({ initialSubject: 'Hello ' });
+        const addTagBtn = screen.getByTestId('add-tag-btn');
+        fireEvent.click(addTagBtn);
+
+        // Mock implementation appends tag
+        // The component logic handles insertion at cursor or append
+        // Here we just check if onSubjectChange was called with appended tag
+        expect(mockOnSubjectChange).toHaveBeenCalledWith('Hello {{FirstName}}');
+    });
+});

package/v2Containers/EmailWrapper/tests/EmailHTMLEditorValidation.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import EmailHTMLEditor from '../components/EmailHTMLEditor';
+
+// Mock dependencies
+jest.mock('../../../v2Components/HtmlEditor', () => () => <div data-testid="html-editor" />);
+jest.mock('../../../v2Components/CapTagListWithInput', () => () => <div data-testid="cap-tag-list" />);
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => () => <div />);
+jest.mock('../../../utils/commonUtils', () => ({
+    validateLiquidTemplateContent: jest.fn(),
+    hasLiquidSupportFeature: jest.fn(() => true),
+}));
+jest.mock('../../../utils/common', () => ({
+    hasLiquidSupportFeature: jest.fn(() => true),
+}));
+
+describe('EmailHTMLEditor Validation', () => {
+    const mockOnValidationFail = jest.fn();
+    const mockGetFormdata = jest.fn();
+    const defaultProps = {
+        intl: { formatMessage: ({ defaultMessage }) => defaultMessage },
+        onValidationFail: mockOnValidationFail,
+        isGetFormData: false,
+        getFormdata: mockGetFormdata,
+        location: {},
+        Email: {},
+        emailActions: {},
+        currentOrgDetails: {},
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('calls onValidationFail when subject is empty and save is triggered', async () => {
+        const { rerender } = render(
+            <IntlProvider locale="en">
+                <EmailHTMLEditor {...defaultProps} />
+            </IntlProvider>
+        );
+
+        // Trigger save by setting isGetFormData to true
+        rerender(
+            <IntlProvider locale="en">
+                <EmailHTMLEditor {...defaultProps} isGetFormData={true} />
+            </IntlProvider>
+        );
+
+        await waitFor(() => {
+            expect(mockOnValidationFail).toHaveBeenCalled();
+        });
+    });
+
+    it('calls onValidationFail when liquid validation fails', async () => {
+        const mockGetLiquidTags = jest.fn();
+        // Mock validateLiquidTemplateContent to trigger onError
+        const { validateLiquidTemplateContent } = require('../../../utils/commonUtils');
+        validateLiquidTemplateContent.mockImplementation(({ onError }) => {
+            onError({ standardErrors: ['Error'], liquidErrors: [] });
+        });
+
+        const { rerender } = render(
+            <IntlProvider locale="en">
+                <EmailHTMLEditor
+                    {...defaultProps}
+                    getLiquidTags={mockGetLiquidTags}
+                />
+            </IntlProvider>
+        );
+
+        // Trigger save
+        rerender(
+            <IntlProvider locale="en">
+                <EmailHTMLEditor
+                    {...defaultProps}
+                    getLiquidTags={mockGetLiquidTags}
+                    isGetFormData={true}
+                />
+            </IntlProvider>
+        );
+
+        await waitFor(() => {
+            expect(mockOnValidationFail).toHaveBeenCalled();
+        });
+    });
+});