@capillarytech/creatives-library 8.0.236-beta.0 → 8.0.236

package/v2Containers/EmailWrapper/index.js

@@ -9,7 +9,6 @@ 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,
@@ -19,17 +18,10 @@ import {
   selectCmsTemplatesLoader,
 } from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
-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 { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 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) => {
@@ -72,18 +64,6 @@ 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
@@ -137,68 +117,32 @@ 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}
-        // 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}
-      />
+      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}
+    />
 
       {/* HTMLEditor Testing Component - Console Controlled */}
       <HTMLEditorTesting />
@@ -215,7 +159,7 @@ EmailWrapper.propTypes = {
   templatesActions: PropTypes.object,
   CmsTemplates: PropTypes.arrayOf(PropTypes.object),
   SelectedEdmDefaultTemplate: PropTypes.object,
-  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  step: PropTypes.string,
   showNextStep: PropTypes.func,
   getFormdata: PropTypes.func,
   intl: intlShape,
@@ -243,7 +187,6 @@ EmailWrapper.propTypes = {
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
   isTestAndPreviewMode: PropTypes.bool,
-  location: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -253,31 +196,12 @@ 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),
   };
 }
 
-// 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);
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(EmailWrapper)));

package/v2Containers/EmailWrapper/messages.js

@@ -60,66 +60,6 @@ export default defineMessages({
   },
   emptyTemplateName: {
     id: `creatives.containersV2.EmailWrapper.emptyTemplateName`,
-    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',
+    defaultMessage: `Please enter template name.`
   },
 });

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

@@ -55,11 +55,11 @@ describe('useEmailWrapper', () => {
     mockStopTimer.mockClear();
 
     isEmpty.mockImplementation(val => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
 
     mockProps = {
       ...EmailWrapperMockData,
@@ -224,7 +224,7 @@ describe('useEmailWrapper', () => {
     const mockReader = {
       onload: null,
       onerror: null,
-      readAsText: jest.fn(function () {
+      readAsText: jest.fn(function() {
         this.result = mockHtmlContent;
         if (this.onload) {
           this.onload();
@@ -294,7 +294,7 @@ describe('useEmailWrapper', () => {
     });
 
     expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({
-      key: "email-upload-error",
+       key: "email-upload-error",
     }));
     expect(mockProps.templatesActions.handleZipUpload).not.toHaveBeenCalled();
   });
@@ -309,14 +309,14 @@ describe('useEmailWrapper', () => {
       result.current.useFileUpload({ file: null });
     });
     expect(mockCapNotificationError).toHaveBeenCalledTimes(1);
-    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error" }));
+    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error"}));
 
     mockCapNotificationError.mockClear();
     reactAct(() => {
-      result.current.useFileUpload({ file: { name: 'test.zip', size: 100 } });
+       result.current.useFileUpload({ file: { name: 'test.zip', size: 100 } });
     });
     expect(mockCapNotificationError).toHaveBeenCalledTimes(1);
-    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error" }));
+    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error"}));
 
     expect(mockProps.templatesActions.handleZipUpload).not.toHaveBeenCalled();
     expect(mockProps.templatesActions.handleHtmlUpload).not.toHaveBeenCalled();
@@ -397,7 +397,7 @@ describe('useEmailWrapper', () => {
       // selectedCreateMode is initially '' from hook's useState
     };
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-      initialProps: initialProps
+        initialProps: initialProps
     });
 
     // 4. Simulate user selecting a template ID via the exposed callback (useEditor)
@@ -448,11 +448,11 @@ describe('useEmailWrapper', () => {
 
   it('sets selectedCreateMode in useEffect when in UPLOAD mode and CREATE_TEMPLATE_CONTENT step with EmailLayout', async () => {
     const initialRenderProps = {
-      ...mockProps,
-      step: STEPS.MODE_SELECTION,
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      EmailLayout: null,
-    };
+        ...mockProps,
+        step: STEPS.MODE_SELECTION,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: null,
+      };
 
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
       initialProps: initialRenderProps
@@ -467,11 +467,11 @@ describe('useEmailWrapper', () => {
 
     // Reset isEmpty to default before setting the specific mock for the effect
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     // Mock isEmpty specifically for the EmailLayout check inside the useEffect
     isEmpty.mockImplementationOnce(() => false); // Mock !isEmpty(EmailLayout) to be true
 
@@ -479,16 +479,16 @@ describe('useEmailWrapper', () => {
 
     // Wait for the effect to run, set selectedCreateMode, and isShowEmailCreate to update
     await waitFor(() => {
-      expect(result.current.isShowEmailCreate).toBe(true);
+        expect(result.current.isShowEmailCreate).toBe(true);
     });
 
     // Restore default isEmpty behavior after the specific mock is used
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     isEmpty.mockClear(); // Clear any remaining mock state if needed
 
     expect(mockProps.templatesActions.setEdmTemplate).not.toHaveBeenCalled();
@@ -533,11 +533,11 @@ describe('useEmailWrapper', () => {
 
     // Reset isEmpty to default before setting the specific mock for the effect
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     // Mock isEmpty specifically for the EmailLayout check inside the useEffect
     isEmpty.mockImplementationOnce(() => false); // Mock !isEmpty(EmailLayout) to be true
 
@@ -545,16 +545,16 @@ describe('useEmailWrapper', () => {
 
     // Wait for the effect to run, set selectedCreateMode, and isShowEmailCreate to update
     await waitFor(() => {
-      expect(result.current.isShowEmailCreate).toBe(true);
+        expect(result.current.isShowEmailCreate).toBe(true);
     });
 
     // Restore default isEmpty behavior after the specific mock is used
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     isEmpty.mockClear(); // Clear any remaining mock state if needed
 
     // --- Case 3: EDITOR mode selected, Template becomes available -> true (via effect) ---
@@ -563,11 +563,11 @@ describe('useEmailWrapper', () => {
     find.mockReturnValue(mockTemplate); // Ensure find is mocked for this case
 
     const editorPropsInitial = {
-      ...mockProps,
-      step: STEPS.TEMPLATE_SELECTION,
-      emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-      CmsTemplates: [mockTemplate],
-      SelectedEdmDefaultTemplate: null,
+        ...mockProps,
+        step: STEPS.TEMPLATE_SELECTION,
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        CmsTemplates: [mockTemplate],
+        SelectedEdmDefaultTemplate: null,
     };
     rerender(editorPropsInitial);
 
@@ -579,12 +579,12 @@ describe('useEmailWrapper', () => {
     expect(result.current.modeContent).toEqual({ id: templateId });
 
     const editorPropsFinal = {
-      ...mockProps, // Use fresh props base
-      step: STEPS.CREATE_TEMPLATE_CONTENT, // Move to the create step
-      emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-      CmsTemplates: [mockTemplate],
-      SelectedEdmDefaultTemplate: null, // Template not yet selected in props
-      // modeContent state ({id: templateId}) should persist internally from the reactAct call
+        ...mockProps, // Use fresh props base
+        step: STEPS.CREATE_TEMPLATE_CONTENT, // Move to the create step
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        CmsTemplates: [mockTemplate],
+        SelectedEdmDefaultTemplate: null, // Template not yet selected in props
+        // modeContent state ({id: templateId}) should persist internally from the reactAct call
     };
 
     // Mock isEmpty specifically for the check within the useEffect triggered by rerender

package/v2Containers/TagList/index.js

@@ -372,7 +372,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           channel={this.props.channel}
           disabled={this.props.disabled}
           fetchingSchemaError={this?.state?.tagsError}
-          popoverPlacement={this.props.popoverPlacement}
         />
       </div>
     );
@@ -403,7 +402,6 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
-  popoverPlacement: PropTypes.string,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/Templates/index.js

@@ -937,11 +937,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const zaloSelectedTemplateData = this.selectTemplate(parseInt(creativesParams._id, 10)) || {};
             const { name = '' } = zaloSelectedTemplateData;
             creativesParams.name = name
-          } else if (this.state.channel?.toLowerCase() === EMAIL_LOWERCASE) {
-            const emailSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-            const activeTab = get(emailSelectedTemplateData, 'versions.base.activeTab', 'en');
-            const isDragDrop = get(emailSelectedTemplateData, `versions.base.${activeTab}.is_drag_drop`, false);
-            creativesParams.is_drag_drop = isDragDrop;
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();