@capillarytech/creatives-library 8.0.102 → 8.0.104

package/config/app.js

@@ -17,16 +17,16 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
-    campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
-    campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
-    auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',
-    arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',
-    subscription_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/org-settings/subscription',
-    exports_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/export/data',
+    api_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/creatives',
+    campaigns_api_endpoint: 'https://devenv-crm.cc.capillarytech.com/iris/v2/campaigns',
+    campaigns_api_org_endpoint: 'https://devenv-crm.cc.capillarytech.com/iris/v2/org/campaign',
+    auth_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/auth',
+    arya_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1',
+    subscription_api_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/org-settings/subscription',
+    exports_api_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/export/data',
     login_url: '/auth/login',
     dashboard_url: '/sms',
-    liquid_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/template',
+    liquid_endpoint: 'https://devenv-crm.cc.capillarytech.com/iris/v2/template',
     dashboard_url_v2: '/v2',
   },
   testing: {

package/package.json

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

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import CapRadioCard from '@capillarytech/cap-ui-library/CapRadioCard';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import Email from '../../Email';
+import CmsTemplatesComponent from '../../../v2Components/CmsTemplatesComponent';
+import messages from '../messages';
+import { EMAIL_CREATE_MODES, STEPS } from '../constants';
+
+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,
+}) => (
+  <>
+    {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>
+    <>
+      {emailCreateMode === EMAIL_CREATE_MODES.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) && (
+            <>{get(modeContent, "file.name")}</>
+          )}
+        </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,
+}) => (
+  <>
+    {isShowEmailCreate ? (
+      <Email {...emailProps} />
+    ) : (
+      <CmsTemplatesComponent {...cmsTemplatesProps} />
+    )}
+  </>
+);
+
+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,
+}) => {
+  console.log("EmailLayout", step, emailCreateMode);
+  const isShowTemplateSelection = step === STEPS.MODE_SELECTION || (step === STEPS.TEMPLATE_SELECTION && emailCreateMode === EMAIL_CREATE_MODES.UPLOAD);
+
+  return (
+    <>
+      <CapSpin spinning={emailCreateMode === EMAIL_CREATE_MODES.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>
+    </>
+  );
+};
+
+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.string,
+  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/constants.js

@@ -4,4 +4,14 @@
  *
  */
 
-export const DEFAULT_ACTION = 'app/EmailWrapper/DEFAULT_ACTION';
+export const DEFAULT_ACTION = "app/EmailWrapper/DEFAULT_ACTION";
+export const EMAIL_CREATE_MODES = {
+  UPLOAD: "upload",
+  EDITOR: "editor",
+};
+
+export const STEPS = {
+  MODE_SELECTION: "modeSelection",
+  TEMPLATE_SELECTION: "templateSelection",
+  CREATE_TEMPLATE_CONTENT: "createTemplateContent",
+};

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -0,0 +1,342 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import { GA } from '@capillarytech/cap-ui-utils';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import { CHANNEL_CREATE_TRACK_MAPPING } from '../../App/constants';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import { EMAIL } from '../../CreativesContainer/constants';
+import messages from '../messages';
+import { STEPS } from '../constants';
+import { EMAIL_CREATE_MODES } from '../constants';
+
+/**
+ * Custom hook to handle EmailWrapper component business logic
+ */
+const useEmailWrapper = ({
+  intl: { formatMessage },
+  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]);
+
+  // 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: formatMessage(messages.invalidUploadFileError2),
+      description: formatMessage(messages.invalidUploadFileErrorDesc2),
+    };
+    CapNotification.error(message);
+  }, [formatMessage]);
+
+  const stopTimerGA = useCallback(() => {
+    const timeTaken = GA.timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
+      category: 'Creatives',
+      action: 'Create',
+      label: 'uploadZip',
+    });
+    gtmPush('creativeDetails', {
+      channel: EMAIL,
+      timeTaken,
+      mode: 'uploadZip',
+    });
+  }, [formatMessage]);
+
+  const handleFileUpload = useCallback((file = {}) => {
+    if (!isUploading) {
+      // Validate file object
+      if (!file || !file.name) {
+        const message = {
+          key: "email-upload-error",
+          message: formatMessage(messages.invalidUploadFileError),
+          description: formatMessage(messages.invalidUploadFileErrorDesc3),
+        };
+        CapNotification.error(message);
+        return;
+      }
+
+      const fileExtension = (file.name || '').split('.').pop().toLowerCase();
+      const supportedZipFormats = ['zip'];
+
+      // Converted file size to MB - added defensive check
+      const fileSize = file && file.size ? (file.size / (1024 * 1024)) : 0;
+
+      // Here fileSize is in MB
+      if (fileSize > 5) {
+        const message = {
+          key: "email-upload-error",
+          message: formatMessage(messages.invalidUploadFileError),
+          description: formatMessage(messages.invalidUploadFileErrorDesc3),
+        };
+        CapNotification.error(message);
+      } else if (supportedZipFormats.includes(fileExtension)) {
+        // Verify originFileObj exists
+        if (!file.originFileObj) {
+          handleZipUploadError();
+          return;
+        }
+
+        templatesActions.handleZipUpload(file.originFileObj, () => { // Handle upload success
+          stopTimerGA();
+          setModeContent({ file });
+          showNextStep();
+        }, handleZipUploadError);
+      } else if (fileExtension === 'html' || fileExtension === 'htm') {
+        // Verify originFileObj exists
+        if (!file.originFileObj) {
+          handleZipUploadError();
+          return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = () => {
+          const text = reader.result;
+          // Add defensive check for empty or invalid content
+          if (!text || typeof text !== 'string') {
+            handleZipUploadError();
+            return;
+          }
+          setModeContent({ file });
+          templatesActions.handleHtmlUpload(text);
+        };
+        reader.onerror = () => {
+          handleZipUploadError();
+        };
+        reader.readAsText(file.originFileObj);
+      } else {
+        const message = {
+          key: "email-upload-error",
+          message: formatMessage(messages.invalidUploadFileError),
+          description: formatMessage(messages.invalidUploadFileErrorDesc),
+        };
+        CapNotification.error(message);
+      }
+    }
+  }, [isUploading, formatMessage, templatesActions, stopTimerGA, handleZipUploadError, showNextStep]);
+
+  const handleEdmDefaultTemplateSelection = useCallback((id) => {
+    const data = find(CmsTemplates, { _id: id });
+    templatesActions.setEdmTemplate(data);
+    templatesActions.setBEETemplate(data);
+    setSelectedCreateMode(EMAIL_CREATE_MODES.EDITOR);
+  }, [CmsTemplates, templatesActions]);
+
+  const useFileUpload = useCallback(({ file }) => {
+    setModeContent({});
+    handleFileUpload(file);
+  }, [handleFileUpload]);
+
+  const useEditor = useCallback((id) => {
+    setModeContent({ id });
+    showNextStep();
+  }, [showNextStep]);
+
+  // Main logic effect - MOVED AFTER function declarations
+  useEffect(() => {
+    // Skip if user has already made a selection
+    if (selectedCreateMode) return;
+
+    // Handle different steps
+    switch (step) {
+      case STEPS.MODE_SELECTION:
+        if (emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && !EmailLayout) {
+          // Commented out: document.getElementById('upload-email-template').click();
+        }
+        break;
+
+      case STEPS.TEMPLATE_SELECTION:
+        const needsTemplates = emailCreateMode === EMAIL_CREATE_MODES.EDITOR
+          && !CmsTemplates
+          && !getCmsTemplatesInProgress;
+
+        if (needsTemplates) {
+          templatesActions.getDefaultBeeTemplates();
+        }
+        break;
+
+      case STEPS.CREATE_TEMPLATE_CONTENT:
+        if (emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && !isEmpty(EmailLayout)) {
+          setSelectedCreateMode(EMAIL_CREATE_MODES.UPLOAD);
+        } else if (emailCreateMode === EMAIL_CREATE_MODES.EDITOR && isEmpty(SelectedEdmDefaultTemplate)) {
+          handleEdmDefaultTemplateSelection(modeContent.id);
+        }
+        break;
+
+      default:
+        // No operation for other steps
+        break;
+    }
+  }, [
+    step,
+    selectedCreateMode,
+    emailCreateMode,
+    EmailLayout,
+    CmsTemplates,
+    getCmsTemplatesInProgress,
+    modeContent.id,
+    SelectedEdmDefaultTemplate,
+    templatesActions,
+    handleEdmDefaultTemplateSelection
+  ]);
+
+  // Derived state
+  const isShowEmailCreate = !isEmpty(selectedCreateMode) && (!isEmpty(EmailLayout) || SelectedEdmDefaultTemplate);
+
+  // Memoize static data
+  const modes = useMemo(() => [
+    {
+      title: formatMessage(messages.zipUpload),
+      content: formatMessage(messages.zipUploadDesc),
+      value: EMAIL_CREATE_MODES.UPLOAD,
+    },
+    {
+      title: formatMessage(messages.useEditor),
+      content: formatMessage(messages.useEditorDesc),
+      value: EMAIL_CREATE_MODES.EDITOR,
+    },
+  ], [formatMessage]);
+
+  // 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 = formatMessage(messages.upload);
+
+  return {
+    // State
+    templateName,
+    isTemplateNameEmpty,
+    modeContent,
+
+    // Derived values
+    modes,
+    isShowEmailCreate,
+    emailProps,
+    cmsTemplatesProps,
+    uploadButtonLabel,
+
+    // Event handlers
+    onTemplateNameChange,
+    onChange,
+    useFileUpload,
+  };
+};
+
+export default useEmailWrapper;