@capillarytech/creatives-library 8.0.102-alpha.0 → 8.0.102

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.102-alpha.0",
+  "version": "8.0.102",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CreativesContainer/index.js

@@ -740,10 +740,7 @@ export class Creatives extends React.Component {
             forEach(androidContent.custom, (customKeyValue) => {
               custom[customKeyValue.key] = customKeyValue.value;
             });
-            //skipping it for MPUSH as custom key is already in the reqd format for hydra sdk
-            if (channel !== constants.MOBILE_PUSH) {
-              androidContent.custom = custom;
-            }
+            androidContent.custom = custom;
             templateData.androidContent = androidContent;
             templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = 'ANDROID';
@@ -759,10 +756,7 @@ export class Creatives extends React.Component {
             forEach(iosContent.custom, (customKeyValue) => {
               custom[customKeyValue.key] = customKeyValue.value;
             });
-            //skipping it for MPUSH as custom key is already in the reqd format for hydra sdk
-            if (channel !== constants.MOBILE_PUSH) {
-              iosContent.custom = custom;
-            }
+            iosContent.custom = custom;
             templateData.iosContent = iosContent;
             templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
             templateData.iosContent.deviceType = IOS.toUpperCase();

package/v2Containers/EmailWrapper/index.js

@@ -6,9 +6,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { GA } from '@capillarytech/cap-ui-utils';
 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,
@@ -18,48 +23,302 @@ 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 EmailWrapper = (props) => {
-  // Pass all props to the custom hook
-  const {
-    templateName,
-    isTemplateNameEmpty,
-    modeContent,
-    modes,
-    isShowEmailCreate,
-    emailProps,
-    cmsTemplatesProps,
-    uploadButtonLabel,
-    onTemplateNameChange,
-    onChange,
-    useFileUpload,
-  } = useEmailWrapper(props);
+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: {
 
-  // Render using the presentation component with data from the hook
-  return (
-    <EmailWrapperView
-      isUploading={props.isUploading}
-      emailCreateMode={props.emailCreateMode}
-      step={props.step}
-      isFullMode={props.isFullMode}
-      templateName={templateName}
-      onTemplateNameChange={onTemplateNameChange}
-      isTemplateNameEmpty={isTemplateNameEmpty}
-      modes={modes}
-      onChange={onChange}
-      EmailLayout={props.EmailLayout}
-      modeContent={modeContent}
-      useFileUpload={useFileUpload}
-      uploadButtonLabel={uploadButtonLabel}
-      isShowEmailCreate={isShowEmailCreate}
-      emailProps={emailProps}
-      cmsTemplatesProps={cmsTemplatesProps}
-    />
-  );
-};
+      },
+      // 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',
+      },
+    ];
+  }
+
+  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,
+    } = 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}
+              />}
+              {!isShowEmailCreate && (
+                <CmsTemplatesComponent
+                  cmsTemplates={CmsTemplates}
+                  handleEdmDefaultTemplateSelection={this.useEditor}
+                  cmsTemplatesLoader={cmsTemplatesLoader}
+                  currentOrgDetails={currentOrgDetails || cap?.currentOrgDetails}
+                />
+              )}
+            </div>
+          }
+        </CapSpin>
+      </div>
+    );
+  }
+}
 
 EmailWrapper.propTypes = {
   onEmailModeChange: PropTypes.func.isRequired,

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -1,184 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import styled from 'styled-components';
-import _ from 'lodash';
-import { CapRadioCard, CapInput, CapUploader, CapSpin, CapButton, CapError } from '@capillarytech/cap-ui-library';
-import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import Email from '../../Email';
-import CmsTemplatesComponent from '../../../v2Components/CmsTemplatesComponent';
-import messages from '../messages';
-
-const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
-
-const CardContainer = styled.div`
-  margin-top: 16px;
-  .ant-radio-group{
-    .ant-radio-button-wrapper{
-      &:first-child{
-        margin-left: unset;
-      }
-    }
-  }
-`;
-
-// Mode selection component that handles the creation mode selection UI
-const ModeSelectionUI = ({
-  isFullMode,
-  templateName,
-  onTemplateNameChange,
-  isTemplateNameEmpty,
-  modes,
-  emailCreateMode,
-  onChange,
-  EmailLayout,
-  modeContent,
-  useFileUpload,
-  uploadButtonLabel,
-}) => (
-  <div>
-    {isFullMode && (
-      <CapInput
-        label={<FormattedMessage {...messages.creativeName} />}
-        onChange={onTemplateNameChange}
-        value={templateName}
-        labelPosition="top"
-        size="default"
-        style={{ width: '68%'}}
-      />
-    )}
-    <CardContainer>
-      <CapRadioCardWithLabel
-        panes={modes}
-        onChange={onChange}
-        selected={emailCreateMode}
-        label={<FormattedMessage {...messages.createMode} />}
-      />
-    </CardContainer>
-    <div>
-      {emailCreateMode === "upload" && (
-        <div style={{ marginLeft: '8px' }}>
-          <CapUploader onChange={useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
-            {(isFullMode && isTemplateNameEmpty) && (
-              <CapError type="error">
-                <FormattedMessage {...messages.emptyTemplateName} />
-              </CapError>
-            )}
-            <CapButton disabled={isFullMode && isTemplateNameEmpty}>
-              {uploadButtonLabel}
-            </CapButton>
-          </CapUploader>
-          {!_.isEmpty(EmailLayout) && (
-            <div>{_.get(modeContent, "file.name")}</div>
-          )}
-        </div>
-      )}
-    </div>
-  </div>
-);
-
-ModeSelectionUI.propTypes = {
-  isFullMode: PropTypes.bool,
-  templateName: PropTypes.string,
-  onTemplateNameChange: PropTypes.func.isRequired,
-  isTemplateNameEmpty: PropTypes.bool,
-  modes: PropTypes.array.isRequired,
-  emailCreateMode: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  EmailLayout: PropTypes.object,
-  modeContent: PropTypes.object,
-  useFileUpload: PropTypes.func.isRequired,
-  uploadButtonLabel: PropTypes.node.isRequired,
-};
-
-// Content creation component that handles the email or template selection UI
-const ContentCreationUI = ({
-  isShowEmailCreate,
-  emailProps,
-  cmsTemplatesProps,
-}) => (
-  <div>
-    {isShowEmailCreate ? (
-      <Email {...emailProps} />
-    ) : (
-      <CmsTemplatesComponent {...cmsTemplatesProps} />
-    )}
-  </div>
-);
-
-ContentCreationUI.propTypes = {
-  isShowEmailCreate: PropTypes.bool.isRequired,
-  emailProps: PropTypes.object.isRequired,
-  cmsTemplatesProps: PropTypes.object.isRequired,
-};
-
-// Main EmailWrapper presentational component
-const EmailWrapperView = ({
-  isUploading,
-  emailCreateMode,
-  step,
-  isFullMode,
-  templateName,
-  onTemplateNameChange,
-  isTemplateNameEmpty,
-  modes,
-  onChange,
-  EmailLayout,
-  modeContent,
-  useFileUpload,
-  uploadButtonLabel,
-  isShowEmailCreate,
-  emailProps,
-  cmsTemplatesProps,
-}) => {
-  const isShowTemplateSelection = step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload");
-
-  return (
-    <div>
-      <CapSpin spinning={emailCreateMode === "upload" ? isUploading : false}>
-        {isShowTemplateSelection ? (
-          <ModeSelectionUI
-            isFullMode={isFullMode}
-            templateName={templateName}
-            onTemplateNameChange={onTemplateNameChange}
-            isTemplateNameEmpty={isTemplateNameEmpty}
-            modes={modes}
-            emailCreateMode={emailCreateMode}
-            onChange={onChange}
-            EmailLayout={EmailLayout}
-            modeContent={modeContent}
-            useFileUpload={useFileUpload}
-            uploadButtonLabel={uploadButtonLabel}
-          />
-        ) : (
-          <ContentCreationUI
-            isShowEmailCreate={isShowEmailCreate}
-            emailProps={emailProps}
-            cmsTemplatesProps={cmsTemplatesProps}
-          />
-        )}
-      </CapSpin>
-    </div>
-  );
-};
-
-EmailWrapperView.propTypes = {
-  isUploading: PropTypes.bool,
-  emailCreateMode: PropTypes.string,
-  step: PropTypes.string,
-  isFullMode: PropTypes.bool,
-  templateName: PropTypes.string,
-  onTemplateNameChange: PropTypes.func.isRequired,
-  isTemplateNameEmpty: PropTypes.bool,
-  modes: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
-  EmailLayout: PropTypes.object,
-  modeContent: PropTypes.object,
-  useFileUpload: PropTypes.func.isRequired,
-  uploadButtonLabel: PropTypes.node.isRequired,
-  isShowEmailCreate: PropTypes.bool.isRequired,
-  emailProps: PropTypes.object.isRequired,
-  cmsTemplatesProps: PropTypes.object.isRequired,
-};
-
-export default EmailWrapperView;

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -1,289 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import _ from 'lodash';
-import { GA } from '@capillarytech/cap-ui-utils';
-import { CapNotification } from '@capillarytech/cap-ui-library';
-import { CHANNEL_CREATE_TRACK_MAPPING } from '../../App/constants';
-import { gtmPush } from '../../../utils/gtmTrackers';
-import { EMAIL } from '../../CreativesContainer/constants';
-import messages from '../messages';
-
-const { timeTracker } = GA;
-
-/**
- * Custom hook to handle EmailWrapper component business logic
- */
-const useEmailWrapper = ({
-  intl,
-  onEmailModeChange,
-  emailCreateMode,
-  step,
-  EmailLayout,
-  CmsTemplates,
-  SelectedEdmDefaultTemplate,
-  isUploading,
-  templatesActions,
-  showNextStep,
-  onResetStep,
-  onEnterTemplateName,
-  onRemoveTemplateName,
-  getCmsTemplatesInProgress,
-  // Props for Email component
-  setIsLoadingContent,
-  isGetFormData,
-  getFormdata,
-  type,
-  isFullMode,
-  cap,
-  showTemplateName,
-  showLiquidErrorInFooter,
-  onValidationFail,
-  forwardedTags,
-  selectedOfferDetails,
-  onPreviewContentClicked,
-  onTestContentClicked,
-  editor,
-  moduleType,
-  eventContextTags,
-  isLoyaltyModule,
-  // Props for CmsTemplates component
-  cmsTemplatesLoader,
-  currentOrgDetails,
-}) => {
-  // State management
-  const [templateName, setTemplateName] = useState('');
-  const [isTemplateNameEmpty, setIsTemplateNameEmpty] = useState(true);
-  const [selectedCreateMode, setSelectedCreateMode] = useState('');
-  const [modeContent, setModeContent] = useState({});
-  const [routeParams] = useState({
-    pathname: `/email/create`,
-    query: { module: 'library', type: 'embedded' },
-  });
-
-  // Cleanup effect
-  useEffect(() => {
-    return () => {
-      onResetStep();
-      templatesActions.resetTemplateData();
-    };
-  }, [onResetStep, templatesActions]);
-
-  // Main logic effect
-  useEffect(() => {
-    if (step === "modeSelection" && !selectedCreateMode && emailCreateMode === 'upload' && !EmailLayout) {
-      //document.getElementById('upload-email-template').click();
-    } else if (step === "templateSelection" && !selectedCreateMode) {
-      if (emailCreateMode === "editor" && !CmsTemplates && !getCmsTemplatesInProgress) {
-        templatesActions.getDefaultBeeTemplates();
-      }
-    } else if (step === "createTemplateContent" && !selectedCreateMode) {
-      if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
-        setSelectedCreateMode('upload');
-      } else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
-        handleEdmDefaultTemplateSelection(modeContent.id);
-      }
-    }
-  }, [
-    step,
-    selectedCreateMode,
-    emailCreateMode,
-    EmailLayout,
-    CmsTemplates,
-    getCmsTemplatesInProgress,
-    modeContent.id,
-    SelectedEdmDefaultTemplate,
-    templatesActions
-  ]);
-
-  // Event handlers
-  const onTemplateNameChange = useCallback(({target: {value}}) => {
-    const isEmptyTemplateName = !value?.trim();
-    setTemplateName(value);
-    setIsTemplateNameEmpty(isEmptyTemplateName);
-
-    if (value && onEnterTemplateName) {
-      onEnterTemplateName();
-    } else if (onRemoveTemplateName) {
-      onRemoveTemplateName();
-    }
-  }, [onEnterTemplateName, onRemoveTemplateName]);
-
-  const onChange = useCallback((e) => {
-    onEmailModeChange(e.target.value);
-  }, [onEmailModeChange]);
-
-  const handleZipUploadError = useCallback(() => {
-    const message = {
-      key: "email-upload-error",
-      message: intl.formatMessage(messages.invalidUploadFileError2),
-      description: intl.formatMessage(messages.invalidUploadFileErrorDesc2),
-    };
-    CapNotification.error(message);
-  }, [intl]);
-
-  const stopTimerGA = useCallback(() => {
-    const timeTaken = timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
-      category: 'Creatives',
-      action: 'Create',
-      label: 'uploadZip',
-    });
-    gtmPush('creativeDetails', {
-      channel: EMAIL,
-      timeTaken,
-      mode: 'uploadZip',
-    });
-  }, []);
-
-  const handleFileUpload = useCallback((file = {}) => {
-    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
-          stopTimerGA();
-          setModeContent({ file });
-          showNextStep();
-        }, handleZipUploadError);
-      } else if (fileExtension === 'html' || fileExtension === 'htm') {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const text = reader.result;
-          setModeContent({ file });
-          templatesActions.handleHtmlUpload(text);
-        };
-        reader.readAsText(file.originFileObj);
-      } else {
-        const message = {
-          key: "email-upload-error",
-          message: intl.formatMessage(messages.invalidUploadFileError),
-          description: intl.formatMessage(messages.invalidUploadFileErrorDesc),
-        };
-        CapNotification.error(message);
-      }
-    }
-  }, [isUploading, intl, templatesActions, stopTimerGA, handleZipUploadError, showNextStep]);
-
-  const handleEdmDefaultTemplateSelection = useCallback((id) => {
-    const data = _.find(CmsTemplates, { _id: id });
-    templatesActions.setEdmTemplate(data);
-    templatesActions.setBEETemplate(data);
-    setSelectedCreateMode('editor');
-  }, [CmsTemplates, templatesActions]);
-
-  const useFileUpload = useCallback(({ file }) => {
-    setModeContent({});
-    handleFileUpload(file);
-  }, [handleFileUpload]);
-
-  const useEditor = useCallback((id) => {
-    setModeContent({ id });
-    showNextStep();
-  }, [showNextStep]);
-
-  // Derived state
-  const isShowEmailCreate = !_.isEmpty(selectedCreateMode) && (!_.isEmpty(EmailLayout) || SelectedEdmDefaultTemplate);
-
-  // Memoize static data
-  const modes = useMemo(() => [
-    {
-      title: intl.formatMessage(messages.zipUpload),
-      content: intl.formatMessage(messages.zipUploadDesc),
-      value: 'upload',
-    },
-    {
-      title: intl.formatMessage(messages.useEditor),
-      content: intl.formatMessage(messages.useEditorDesc),
-      value: 'editor',
-    },
-  ], [intl]);
-
-  // Prepare props for Email component
-  const emailProps = useMemo(() => ({
-    setIsLoadingContent,
-    key: "email-create-template",
-    location: routeParams,
-    route: { name: 'email' },
-    params: {},
-    isGetFormData,
-    getFormdata,
-    getFormSubscriptionData: getFormdata,
-    getDefaultTags: type,
-    isFullMode,
-    defaultData: { 'template-name': templateName },
-    cap,
-    showTemplateName,
-    showLiquidErrorInFooter,
-    onValidationFail,
-    forwardedTags,
-    selectedOfferDetails,
-    onPreviewContentClicked,
-    onTestContentClicked,
-    editor,
-    moduleType,
-    eventContextTags,
-    isLoyaltyModule,
-  }), [
-    setIsLoadingContent,
-    routeParams,
-    isGetFormData,
-    getFormdata,
-    type,
-    isFullMode,
-    templateName,
-    cap,
-    showTemplateName,
-    showLiquidErrorInFooter,
-    onValidationFail,
-    forwardedTags,
-    selectedOfferDetails,
-    onPreviewContentClicked,
-    onTestContentClicked,
-    editor,
-    moduleType,
-    eventContextTags,
-    isLoyaltyModule,
-  ]);
-
-  // Prepare props for CmsTemplatesComponent
-  const cmsTemplatesProps = useMemo(() => ({
-    cmsTemplates: CmsTemplates,
-    handleEdmDefaultTemplateSelection: useEditor,
-    cmsTemplatesLoader,
-    currentOrgDetails: currentOrgDetails || cap?.currentOrgDetails,
-  }), [CmsTemplates, useEditor, cmsTemplatesLoader, currentOrgDetails, cap]);
-
-  // Upload button label
-  const uploadButtonLabel = intl.formatMessage(messages.upload);
-
-  return {
-    // State
-    templateName,
-    isTemplateNameEmpty,
-    modeContent,
-
-    // Derived values
-    modes,
-    isShowEmailCreate,
-    emailProps,
-    cmsTemplatesProps,
-    uploadButtonLabel,
-
-    // Event handlers
-    onTemplateNameChange,
-    onChange,
-    useFileUpload,
-  };
-};
-
-export default useEmailWrapper;

package/v2Containers/EmailWrapper/mockdata/mockdata.js

@@ -1,127 +0,0 @@
-export const EmailWrapperMockData = {
-  onEmailModeChange: jest.fn(),
-  showTemplateName: jest.fn(),
-  emailCreateMode: 'editor',
-  isGetFormData: false,
-  getFormdata: jest.fn(),
-  type: 'email',
-  step: 'modeSelection',
-  cap: { currentOrgDetails: { basic_details: {} } },
-  isFullMode: true,
-  setIsLoadingContent: jest.fn(),
-  onValidationFail: jest.fn(),
-  forwardedTags: {},
-  selectedOfferDetails: [],
-  onPreviewContentClicked: jest.fn(),
-  onTestContentClicked: jest.fn(),
-  editor: {},
-  moduleType: 'email',
-  showLiquidErrorInFooter: jest.fn(),
-  eventContextTags: [],
-  isLoyaltyModule: false,
-  isUploading: 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,
-  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>'
-    }
-  ],
-  SelectedEdmDefaultTemplate: null,
-  cmsTemplatesLoader: false,
-  currentOrgDetails: { basic_details: {} },
-  intl: {
-    formatMessage: jest.fn((message) => message.defaultMessage || ''),
-  },
-};
-
-export const EmailWrapperViewMockProps = {
-  isUploading: false,
-  emailCreateMode: 'editor',
-  step: 'modeSelection',
-  isFullMode: true,
-  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: [
-      {
-        _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>'
-      }
-    ],
-    handleEdmDefaultTemplateSelection: jest.fn(),
-    cmsTemplatesLoader: false,
-    currentOrgDetails: { basic_details: {} }
-  }
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { EmailWrapperViewMockProps } from '../mockdata/mockdata';
-
-// Simple test for EmailWrapperView
-describe('EmailWrapperView', () => {
-  it('component exists', () => {
-    // Just verify the file exists by requiring it
-    jest.doMock('../components/EmailWrapperView', () => ({
-      __esModule: true,
-      default: () => null
-    }));
-
-    // Simple assertion to make the test pass
-    expect(typeof require('../components/EmailWrapperView').default).toBe('function');
-  });
-});

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

@@ -1,101 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-// Tests for EmailWrapper container component
-describe('EmailWrapper Container Tests', () => {
-  // This test verifies that the container passes props from the custom hook to the view component
-  it('should pass props from custom hook to view', () => {
-    // Mock hook results
-    const mockHookResults = {
-      templateName: 'Test Template',
-      isTemplateNameEmpty: false,
-      modeContent: { file: { name: 'test.zip' } },
-      modes: ['upload', 'editor'],
-      isShowEmailCreate: false,
-      emailProps: { location: { pathname: '/email/create' } },
-      cmsTemplatesProps: { cmsTemplates: [] },
-      uploadButtonLabel: 'Upload',
-      onTemplateNameChange: jest.fn(),
-      onChange: jest.fn(),
-      useFileUpload: jest.fn()
-    };
-
-    // Mock view component (captures props)
-    let capturedViewProps = null;
-    const mockView = jest.fn(props => {
-      capturedViewProps = props;
-      return null;
-    });
-
-    // Mock custom hook
-    const mockUseEmailWrapper = jest.fn(() => mockHookResults);
-
-    // Container props
-    const containerProps = {
-      isUploading: false,
-      emailCreateMode: 'editor',
-      step: 'modeSelection',
-      isFullMode: true,
-      EmailLayout: null
-    };
-
-    // Simulate the container component behavior
-    function simulateContainer() {
-      // Get state and handlers from hook
-      const hookResults = mockUseEmailWrapper(containerProps);
-
-      // Render view with combined props
-      return mockView({
-        ...containerProps,
-        ...hookResults
-      });
-    }
-
-    // Run the simulation
-    simulateContainer();
-
-    // Verify hook was called with correct props
-    expect(mockUseEmailWrapper).toHaveBeenCalledWith(containerProps);
-
-    // Verify view received combined props
-    expect(capturedViewProps).toEqual({
-      ...containerProps,
-      ...mockHookResults
-    });
-
-    // Verify specific props
-    expect(capturedViewProps.isUploading).toBe(containerProps.isUploading);
-    expect(capturedViewProps.emailCreateMode).toBe(containerProps.emailCreateMode);
-    expect(capturedViewProps.templateName).toBe(mockHookResults.templateName);
-    expect(capturedViewProps.modes).toBe(mockHookResults.modes);
-  });
-
-  // This test verifies the pattern is maintainable for future changes
-  it('handles adding new hook properties', () => {
-    // Mock hook with additional property
-    const mockHookWithNewProp = jest.fn(() => ({
-      templateName: 'Test',
-      newFeature: 'This is a new feature' // New property
-    }));
-
-    // Mock view component (captures props)
-    let capturedViewProps = null;
-    const mockView = jest.fn(props => {
-      capturedViewProps = props;
-      return null;
-    });
-
-    // Simulate container with new hook property
-    function simulateContainer() {
-      const hookResults = mockHookWithNewProp({});
-      return mockView(hookResults);
-    }
-
-    // Run the simulation
-    simulateContainer();
-
-    // Verify the new property is correctly passed to view
-    expect(capturedViewProps.newFeature).toBe('This is a new feature');
-  });
-});

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import useEmailWrapper from '../hooks/useEmailWrapper';
-import { EmailWrapperMockData } from '../mockdata/mockdata';
-import _ from 'lodash';
-
-// Mock dependencies
-jest.mock('lodash', () => ({
-  isEmpty: jest.fn(),
-  find: jest.fn(),
-  get: jest.fn(),
-}));
-
-jest.mock('@capillarytech/cap-ui-library', () => ({
-  CapNotification: {
-    error: jest.fn(),
-  },
-}));
-
-jest.mock('../../../utils/gtmTrackers', () => ({
-  gtmPush: jest.fn(),
-}));
-
-jest.mock('@capillarytech/cap-ui-utils', () => ({
-  GA: {
-    timeTracker: {
-      stopTimer: jest.fn().mockReturnValue(100),
-    },
-  },
-}));
-
-describe('useEmailWrapper', () => {
-  it('is a function', () => {
-    expect(typeof useEmailWrapper).toBe('function');
-  });
-});