@capillarytech/creatives-library 8.0.87-alpha.21 → 8.0.87-alpha.23

package/v2Containers/EmailWrapper/index.js

@@ -6,14 +6,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { GA } from '@capillarytech/cap-ui-utils';
+import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import _ from 'lodash';
-import styled from 'styled-components';
-import { CapRadioCard, CapNotification, CapInput, CapUploader, CapSpin, CapButton, CapError } from '@capillarytech/cap-ui-library';
-import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {
   selectEmailLayout,
@@ -23,304 +18,122 @@ import {
   selectCmsTemplatesLoader,
 } from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
-import Email from '../Email';
-import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
-import messages from './messages';
-import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants';
-import { gtmPush } from '../../utils/gtmTrackers';
-import { EMAIL } from '../CreativesContainer/constants';
 import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
+import EmailWrapperView from './components/EmailWrapperView';
+import useEmailWrapper from './hooks/useEmailWrapper';
 
-const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
-const { timeTracker } = GA;
-const CardContainer = styled.div`
-  margin-top: 16px;
-  .ant-radio-group{
-    .ant-radio-button-wrapper{
-      &:first-child{
-        margin-left: unset;
-      }
-    }
-    
-  }
-`;
-export class EmailWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.emailUploader = React.createRef();
-    this.state = {
-      templateName: '',
-      routeParams: {
-        pathname: `/email/create`,
-        query: { module: 'library', type: 'embedded' },
-      },
-      modeContent: {
+const EmailWrapper = (props) => {
+  // Destructure props for clarity before passing to hook
+  const {
+    emailCreateMode,
+    step,
+    isFullMode,
+    EmailLayout,
+    isUploading,
+    onEmailModeChange,
+    isGetFormData,
+    type,
+    templatesActions,
+    CmsTemplates,
+    SelectedEdmDefaultTemplate,
+    showNextStep,
+    getFormdata,
+    intl,
+    cap,
+    onResetStep,
+    setIsLoadingContent,
+    showTemplateName,
+    showLiquidErrorInFooter,
+    onValidationFail,
+    forwardedTags,
+    selectedOfferDetails,
+    getCmsTemplatesInProgress,
+    currentOrgDetails,
+    moduleType,
+    onEnterTemplateName,
+    onRemoveTemplateName,
+    eventContextTags,
+    isLoyaltyModule,
+    cmsTemplatesLoader,
+    onPreviewContentClicked,
+    onTestContentClicked,
+    editor,
+  } = props;
 
-      },
-      // selectedCreateMode: '',
-      isTemplateNameEmpty: true,
-    };
-    this.modes = [
-      {
-        title: <FormattedMessage {...messages.zipUpload} />,
-        content: <FormattedMessage {...messages.zipUploadDesc} />,
-        value: 'upload',
-        // onClick: () => {
-        //   this.emailUploader.current.click();
-        // },
-      },
-      {
-        title: <FormattedMessage {...messages.useEditor} />,
-        content: <FormattedMessage {...messages.useEditorDesc} />,
-        value: 'editor',
-      },
-    ];
-  }
+  // Pass destructured props to the custom hook
+  const {
+    templateName,
+    isTemplateNameEmpty,
+    modeContent,
+    modes,
+    isShowEmailCreate,
+    emailProps,
+    cmsTemplatesProps,
+    uploadButtonLabel,
+    onTemplateNameChange,
+    onChange,
+    useFileUpload,
+  } = useEmailWrapper({
+    emailCreateMode,
+    step,
+    isFullMode,
+    EmailLayout,
+    isUploading,
+    onEmailModeChange,
+    isGetFormData,
+    type,
+    templatesActions,
+    CmsTemplates,
+    SelectedEdmDefaultTemplate,
+    showNextStep,
+    getFormdata,
+    intl,
+    cap,
+    onResetStep,
+    setIsLoadingContent,
+    showTemplateName,
+    showLiquidErrorInFooter,
+    onValidationFail,
+    forwardedTags,
+    selectedOfferDetails,
+    getCmsTemplatesInProgress,
+    currentOrgDetails,
+    moduleType,
+    onEnterTemplateName,
+    onRemoveTemplateName,
+    eventContextTags,
+    isLoyaltyModule,
+    cmsTemplatesLoader,
+    onPreviewContentClicked,
+    onTestContentClicked,
+    editor,
+  });
 
-  componentDidUpdate() {
-    const { modeContent } = this.state;
-    // const isValid = this.isValid();
-    const { emailCreateMode, EmailLayout, CmsTemplates, step, SelectedEdmDefaultTemplate, templatesActions, getCmsTemplatesInProgress = false } = this.props;
-    if (step === "modeSelection" && !this.state.selectedCreateMode && emailCreateMode === 'upload' && !EmailLayout) {
-      //document.getElementById('upload-email-template').click();
-    } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
-      if (emailCreateMode === "editor" && !CmsTemplates && !getCmsTemplatesInProgress) {
-        templatesActions.getDefaultBeeTemplates();
-      }
-    } else if (step === "createTemplateContent" && !this.state.selectedCreateMode) {
-      if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
-        this.setCreateMode('upload');
-      } else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
-        this.handleEdmDefaultTemplateSelection(modeContent.id);
-      }
-    }
-  }
-
-
-  componentWillUnmount() {
-    this.props.onResetStep();
-    this.props.templatesActions.resetTemplateData();
-  }
-  onTemplateNameChange = ({target: {value}}) => {
-    const {onEnterTemplateName, onRemoveTemplateName} = this.props;
-    const isEmptyTemplateName = !value?.trim();
-    this.setState({templateName: value, isTemplateNameEmpty: isEmptyTemplateName});
-    if (value && onEnterTemplateName) {
-      onEnterTemplateName();
-    } else if (onRemoveTemplateName) {
-      onRemoveTemplateName();
-    }
-  }
-  onChange = (e) => {
-    this.props.onEmailModeChange(e.target.value);
-  };
-  //isValid = () => !_.isEmpty(this.state.templateName)
-  setCreateMode = (emailCreateMode) => {
-    this.setState({ selectedCreateMode: emailCreateMode });
-  }
-  handleZipUploadError = () => {
-    const message = {
-      key: "email-upload-error",
-      message: this.props.intl.formatMessage(messages.invalidUploadFileError2),
-      description: this.props.intl.formatMessage(messages.invalidUploadFileErrorDesc2),
-    };
-    CapNotification.error(message);
-  }
-  stopTimerGA = () => {
-    // stop timer
-    const timeTaken = timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
-      category: 'Creatives',
-      action: 'Create',
-      label: 'uploadZip',
-    });
-    gtmPush('creativeDetails', {
-      channel: EMAIL,
-      timeTaken,
-      mode: 'uploadZip',
-    });
-  }
-  handleFileUpload = (file = {}) => {
-    const { templatesActions, intl, showNextStep, isUploading } = this.props;
-    if (!isUploading) {
-      const fileExtension = file.name.split('.').pop();
-      const supportedZipFormats = ['zip'];
-
-      //converted file size to MB
-      const fileSize = file && (file.size / ( 1024 * 1024 ));
-
-
-      //Here fileSize is in MB
-      if (fileSize > 5) {
-        const message = {
-          key: "email-upload-error",
-          message: intl.formatMessage(messages.invalidUploadFileError),
-          description: intl.formatMessage(messages.invalidUploadFileErrorDesc3),
-        };
-        CapNotification.error(message);
-      } else if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
-        templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
-          this.stopTimerGA();
-          this.setState({ modeContent: { file } }, showNextStep);
-        }, this.handleZipUploadError);
-      } else if (fileExtension === 'html' || fileExtension === 'htm') {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const text = reader.result;
-          this.setState({ modeContent: { file } }, () => {
-            templatesActions.handleHtmlUpload(text);
-          });
-          // showNextStep();
-        };
-        reader.readAsText(file.originFileObj);
-      } else {
-        const message = {
-          key: "email-upload-error",
-          message: intl.formatMessage(messages.invalidUploadFileError),
-          description: intl.formatMessage(messages.invalidUploadFileErrorDesc),
-        };
-        CapNotification.error(message);
-      }
-    }
-  };
-
-  handleEdmDefaultTemplateSelection = (id) => {
-    const { CmsTemplates, templatesActions } = this.props;
-    const data = _.find(CmsTemplates, { _id: id });
-
-    templatesActions.setEdmTemplate(data);
-    templatesActions.setBEETemplate(data);
-    this.setState({
-      selectedCreateMode: 'editor',
-    });
-  };
-  useFileUpload = ({ file }) => {
-    this.setState({ modeContent: {} }, () => {
-      this.handleFileUpload(file);
-    });
-  }
-  useEditor = (id) => {
-    this.setState({ modeContent: { id } }, this.props.showNextStep);
-  }
-
-  isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
-  render() {
-    const {
-      showTemplateName,
-      emailCreateMode,
-      isGetFormData,
-      getFormdata,
-      type,
-      CmsTemplates,
-      step,
-      cap,
-      isFullMode,
-      EmailLayout,
-      setIsLoadingContent,
-      onValidationFail,
-      forwardedTags,
-      selectedOfferDetails,
-      onPreviewContentClicked,
-      onTestContentClicked,
-      cmsTemplatesLoader,
-      editor,
-      currentOrgDetails,
-      moduleType,
-      showLiquidErrorInFooter,
-      eventContextTags,
-      // Flag to enable loyalty module specific features in the email editor
-      isLoyaltyModule,
-      messageDetails = {},
-    } = this.props;
-    const {
-      templateName,
-      modeContent,
-      isTemplateNameEmpty,
-    } = this.state;
-    const isShowEmailCreate = this.isShowEmailCreate();
-    return (
-      <div>
-        <CapSpin spinning={emailCreateMode === "upload" ? this.props.isUploading : false} >
-          {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
-            <div>
-              {isFullMode &&
-                <CapInput
-                  label={<FormattedMessage {...messages.creativeName} />}
-                  onChange={this.onTemplateNameChange}
-                  value={templateName}
-                  labelPosition="top"
-                  size="default"
-                  style={{ width: '68%'}}
-                />
-              }
-              <CardContainer>
-                <CapRadioCardWithLabel
-                  panes={this.modes}
-                  onChange={this.onChange}
-                  selected={emailCreateMode}
-                  label={<FormattedMessage {...messages.createMode} />}
-                />
-              </CardContainer>
-              <div>
-                {emailCreateMode === "upload" &&
-                  <div style={{ marginLeft: '8px' }}>
-                    <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
-                      { (isFullMode && isTemplateNameEmpty) &&
-                        <CapError type="error">
-                          < FormattedMessage {...messages.emptyTemplateName} />
-                        </CapError>
-                      }
-                      <CapButton disabled={isFullMode && isTemplateNameEmpty}>{this.props.intl.formatMessage(messages.upload)}</CapButton>
-                    </CapUploader>
-                    {!_.isEmpty(EmailLayout) &&
-                      <div>{_.get(modeContent, "file.name")}</div>
-                    }
-                  </div>
-                }
-              </div>
-            </div>
-            :
-            <div>
-              {isShowEmailCreate && <Email
-                setIsLoadingContent={setIsLoadingContent}
-                key="email-create-template"
-                location={this.state.routeParams}
-                route={{ name: 'email' }}
-                params={{}}
-                isGetFormData={isGetFormData}
-                getFormdata={getFormdata}
-                getFormSubscriptionData={getFormdata}
-                getDefaultTags={type}
-                isFullMode={isFullMode}
-                defaultData={{ 'template-name': templateName }}
-                cap={cap}
-                showTemplateName={showTemplateName}
-                showLiquidErrorInFooter={showLiquidErrorInFooter}
-                onValidationFail={onValidationFail}
-                forwardedTags={forwardedTags}
-                selectedOfferDetails={selectedOfferDetails}
-                onPreviewContentClicked={onPreviewContentClicked}
-                onTestContentClicked={onTestContentClicked}
-                editor={editor}
-                moduleType={moduleType}
-                eventContextTags={eventContextTags}
-                isLoyaltyModule={isLoyaltyModule}
-                messageDetails={messageDetails}
-              />}
-              {!isShowEmailCreate && (
-                <CmsTemplatesComponent
-                  cmsTemplates={CmsTemplates}
-                  handleEdmDefaultTemplateSelection={this.useEditor}
-                  cmsTemplatesLoader={cmsTemplatesLoader}
-                  currentOrgDetails={currentOrgDetails || cap?.currentOrgDetails}
-                />
-              )}
-            </div>
-          }
-        </CapSpin>
-      </div>
-    );
-  }
-}
+  // Render using the presentation component with data from the hook
+  return (
+    <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}
+    />
+  );
+};
 
 EmailWrapper.propTypes = {
   onEmailModeChange: PropTypes.func.isRequired,
@@ -352,6 +165,9 @@ EmailWrapper.propTypes = {
   onRemoveTemplateName: PropTypes.func,
   eventContextTags: PropTypes.array,
   isLoyaltyModule: PropTypes.bool,
+  onPreviewContentClicked: PropTypes.func,
+  onTestContentClicked: PropTypes.func,
+  editor: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/EmailWrapper/mockdata/mockdata.js

@@ -0,0 +1,119 @@
+
+// Base mock data that can be shared
+const baseMockData = {
+  isUploading: false,
+  emailCreateMode: "editor",
+  step: "modeSelection",
+  isFullMode: true,
+  cmsTemplates: [
+    {
+      _id: "template1",
+      name: "Template 1",
+      content: "<html><body>Template 1 Content</body></html>"
+    },
+    {
+      _id: "template2",
+      name: "Template 2",
+      content: "<html><body>Template 2 Content</body></html>"
+    }
+  ]
+};
+
+export const EmailWrapperMockData = {
+  ...baseMockData,
+  onEmailModeChange: jest.fn(),
+  showTemplateName: jest.fn(),
+  isGetFormData: false,
+  getFormdata: jest.fn(),
+  type: "email",
+  cap: { currentOrgDetails: { basic_details: {} } },
+  setIsLoadingContent: jest.fn(),
+  onValidationFail: jest.fn(),
+  forwardedTags: {},
+  selectedOfferDetails: [],
+  onPreviewContentClicked: jest.fn(),
+  onTestContentClicked: jest.fn(),
+  editor: {},
+  moduleType: "email",
+  showLiquidErrorInFooter: jest.fn(),
+  eventContextTags: [],
+  isLoyaltyModule: false,
+  templatesActions: {
+    resetTemplateData: jest.fn(),
+    getDefaultBeeTemplates: jest.fn(),
+    handleZipUpload: jest.fn(),
+    handleHtmlUpload: jest.fn(),
+    setEdmTemplate: jest.fn(),
+    setBEETemplate: jest.fn()
+  },
+  showNextStep: jest.fn(),
+  onResetStep: jest.fn(),
+  onEnterTemplateName: jest.fn(),
+  onRemoveTemplateName: jest.fn(),
+  getCmsTemplatesInProgress: false,
+  EmailLayout: null,
+  SelectedEdmDefaultTemplate: null,
+  cmsTemplatesLoader: false,
+  currentOrgDetails: { basic_details: {} },
+  intl: {
+    formatMessage: jest.fn(message => message.defaultMessage || "")
+  }
+};
+
+export const EmailWrapperViewMockProps = {
+  ...baseMockData,
+  templateName: "Test Template",
+  onTemplateNameChange: jest.fn(),
+  isTemplateNameEmpty: false,
+  modes: [
+    {
+      title: "Upload zip file",
+      content: "Upload compressed file (Zip) containing HTML & images",
+      value: "upload"
+    },
+    {
+      title: "Create using editor",
+      content: "Create using in-built template",
+      value: "editor"
+    }
+  ],
+  onChange: jest.fn(),
+  EmailLayout: null,
+  modeContent: {},
+  useFileUpload: jest.fn(),
+  uploadButtonLabel: "Upload",
+  isShowEmailCreate: false,
+  emailProps: {
+    key: "email-create-template",
+    location: {
+      pathname: `/email/create`,
+      query: { module: "library", type: "embedded" }
+    },
+    route: { name: "email" },
+    params: {},
+    isGetFormData: false,
+    getFormdata: jest.fn(),
+    getFormSubscriptionData: jest.fn(),
+    getDefaultTags: "email",
+    isFullMode: true,
+    defaultData: { "template-name": "Test Template" },
+    cap: { currentOrgDetails: { basic_details: {} } },
+    showTemplateName: jest.fn(),
+    showLiquidErrorInFooter: jest.fn(),
+    onValidationFail: jest.fn(),
+    forwardedTags: {},
+    selectedOfferDetails: [],
+    onPreviewContentClicked: jest.fn(),
+    onTestContentClicked: jest.fn(),
+    editor: {},
+    moduleType: "email",
+    eventContextTags: [],
+    isLoyaltyModule: false
+  },
+  cmsTemplatesProps: {
+    cmsTemplates: baseMockData.cmsTemplates,
+    handleEdmDefaultTemplateSelection: jest.fn(),
+    cmsTemplatesLoader: false,
+    currentOrgDetails: { basic_details: {} }
+  }
+};