@capillarytech/creatives-library 8.0.102-alpha.0 → 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-alpha.0",
+  "version": "8.0.104",
   "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/components/EmailWrapperView.js

@@ -2,12 +2,19 @@ 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 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);
 
@@ -36,7 +43,7 @@ const ModeSelectionUI = ({
   useFileUpload,
   uploadButtonLabel,
 }) => (
-  <div>
+  <>
     {isFullMode && (
       <CapInput
         label={<FormattedMessage {...messages.creativeName} />}
@@ -55,8 +62,8 @@ const ModeSelectionUI = ({
         label={<FormattedMessage {...messages.createMode} />}
       />
     </CardContainer>
-    <div>
-      {emailCreateMode === "upload" && (
+    <>
+      {emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && (
         <div style={{ marginLeft: '8px' }}>
           <CapUploader onChange={useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
             {(isFullMode && isTemplateNameEmpty) && (
@@ -68,13 +75,13 @@ const ModeSelectionUI = ({
               {uploadButtonLabel}
             </CapButton>
           </CapUploader>
-          {!_.isEmpty(EmailLayout) && (
-            <div>{_.get(modeContent, "file.name")}</div>
+          {!isEmpty(EmailLayout) && (
+            <>{get(modeContent, "file.name")}</>
           )}
         </div>
       )}
-    </div>
-  </div>
+    </>
+  </>
 );
 
 ModeSelectionUI.propTypes = {
@@ -97,13 +104,13 @@ const ContentCreationUI = ({
   emailProps,
   cmsTemplatesProps,
 }) => (
-  <div>
+  <>
     {isShowEmailCreate ? (
       <Email {...emailProps} />
     ) : (
       <CmsTemplatesComponent {...cmsTemplatesProps} />
     )}
-  </div>
+  </>
 );
 
 ContentCreationUI.propTypes = {
@@ -131,11 +138,12 @@ const EmailWrapperView = ({
   emailProps,
   cmsTemplatesProps,
 }) => {
-  const isShowTemplateSelection = step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload");
+  console.log("EmailLayout", step, emailCreateMode);
+  const isShowTemplateSelection = step === STEPS.MODE_SELECTION || (step === STEPS.TEMPLATE_SELECTION && emailCreateMode === EMAIL_CREATE_MODES.UPLOAD);
 
   return (
-    <div>
-      <CapSpin spinning={emailCreateMode === "upload" ? isUploading : false}>
+    <>
+      <CapSpin spinning={emailCreateMode === EMAIL_CREATE_MODES.UPLOAD ? isUploading : false}>
         {isShowTemplateSelection ? (
           <ModeSelectionUI
             isFullMode={isFullMode}
@@ -158,7 +166,7 @@ const EmailWrapperView = ({
           />
         )}
       </CapSpin>
-    </div>
+    </>
   );
 };
 
@@ -172,7 +180,7 @@ EmailWrapperView.propTypes = {
   isTemplateNameEmpty: PropTypes.bool,
   modes: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
-  EmailLayout: PropTypes.object,
+  EmailLayout: PropTypes.string,
   modeContent: PropTypes.object,
   useFileUpload: PropTypes.func.isRequired,
   uploadButtonLabel: PropTypes.node.isRequired,

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

@@ -1,19 +1,20 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { CapNotification } from '@capillarytech/cap-ui-library';
+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';
-
-const { timeTracker } = GA;
+import { STEPS } from '../constants';
+import { EMAIL_CREATE_MODES } from '../constants';
 
 /**
  * Custom hook to handle EmailWrapper component business logic
  */
 const useEmailWrapper = ({
-  intl,
+  intl: { formatMessage },
   onEmailModeChange,
   emailCreateMode,
   step,
@@ -67,33 +68,6 @@ const useEmailWrapper = ({
     };
   }, [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();
@@ -114,14 +88,14 @@ const useEmailWrapper = ({
   const handleZipUploadError = useCallback(() => {
     const message = {
       key: "email-upload-error",
-      message: intl.formatMessage(messages.invalidUploadFileError2),
-      description: intl.formatMessage(messages.invalidUploadFileErrorDesc2),
+      message: formatMessage(messages.invalidUploadFileError2),
+      description: formatMessage(messages.invalidUploadFileErrorDesc2),
     };
     CapNotification.error(message);
-  }, [intl]);
+  }, [formatMessage]);
 
   const stopTimerGA = useCallback(() => {
-    const timeTaken = timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
+    const timeTaken = GA.timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
       category: 'Creatives',
       action: 'Create',
       label: 'uploadZip',
@@ -131,54 +105,85 @@ const useEmailWrapper = ({
       timeTaken,
       mode: 'uploadZip',
     });
-  }, []);
+  }, [formatMessage]);
 
   const handleFileUpload = useCallback((file = {}) => {
     if (!isUploading) {
-      const fileExtension = file.name.split('.').pop();
+      // 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
-      const fileSize = file && (file.size / (1024 * 1024));
+      // 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: intl.formatMessage(messages.invalidUploadFileError),
-          description: intl.formatMessage(messages.invalidUploadFileErrorDesc3),
+          message: formatMessage(messages.invalidUploadFileError),
+          description: formatMessage(messages.invalidUploadFileErrorDesc3),
         };
         CapNotification.error(message);
-      } else if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      } 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: intl.formatMessage(messages.invalidUploadFileError),
-          description: intl.formatMessage(messages.invalidUploadFileErrorDesc),
+          message: formatMessage(messages.invalidUploadFileError),
+          description: formatMessage(messages.invalidUploadFileErrorDesc),
         };
         CapNotification.error(message);
       }
     }
-  }, [isUploading, intl, templatesActions, stopTimerGA, handleZipUploadError, showNextStep]);
+  }, [isUploading, formatMessage, templatesActions, stopTimerGA, handleZipUploadError, showNextStep]);
 
   const handleEdmDefaultTemplateSelection = useCallback((id) => {
-    const data = _.find(CmsTemplates, { _id: id });
+    const data = find(CmsTemplates, { _id: id });
     templatesActions.setEdmTemplate(data);
     templatesActions.setBEETemplate(data);
-    setSelectedCreateMode('editor');
+    setSelectedCreateMode(EMAIL_CREATE_MODES.EDITOR);
   }, [CmsTemplates, templatesActions]);
 
   const useFileUpload = useCallback(({ file }) => {
@@ -191,22 +196,70 @@ const useEmailWrapper = ({
     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);
+  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: formatMessage(messages.zipUpload),
+      content: formatMessage(messages.zipUploadDesc),
+      value: EMAIL_CREATE_MODES.UPLOAD,
     },
     {
-      title: intl.formatMessage(messages.useEditor),
-      content: intl.formatMessage(messages.useEditorDesc),
-      value: 'editor',
+      title: formatMessage(messages.useEditor),
+      content: formatMessage(messages.useEditorDesc),
+      value: EMAIL_CREATE_MODES.EDITOR,
     },
-  ], [intl]);
+  ], [formatMessage]);
 
   // Prepare props for Email component
   const emailProps = useMemo(() => ({
@@ -264,7 +317,7 @@ const useEmailWrapper = ({
   }), [CmsTemplates, useEditor, cmsTemplatesLoader, currentOrgDetails, cap]);
 
   // Upload button label
-  const uploadButtonLabel = intl.formatMessage(messages.upload);
+  const uploadButtonLabel = formatMessage(messages.upload);
 
   return {
     // State

package/v2Containers/EmailWrapper/index.js

@@ -23,7 +23,41 @@ import EmailWrapperView from './components/EmailWrapperView';
 import useEmailWrapper from './hooks/useEmailWrapper';
 
 const EmailWrapper = (props) => {
-  // Pass all props to the custom hook
+  // 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
+  } = props;
+
+  // Pass destructured props to the custom hook
   const {
     templateName,
     isTemplateNameEmpty,
@@ -36,21 +70,52 @@ const EmailWrapper = (props) => {
     onTemplateNameChange,
     onChange,
     useFileUpload,
-  } = useEmailWrapper(props);
+  } = 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
+  });
 
   // Render using the presentation component with data from the hook
   return (
     <EmailWrapperView
-      isUploading={props.isUploading}
-      emailCreateMode={props.emailCreateMode}
-      step={props.step}
-      isFullMode={props.isFullMode}
+      isUploading={isUploading}
+      emailCreateMode={emailCreateMode}
+      step={step}
+      isFullMode={isFullMode}
       templateName={templateName}
       onTemplateNameChange={onTemplateNameChange}
       isTemplateNameEmpty={isTemplateNameEmpty}
       modes={modes}
       onChange={onChange}
-      EmailLayout={props.EmailLayout}
+      EmailLayout={EmailLayout}
       modeContent={modeContent}
       useFileUpload={useFileUpload}
       uploadButtonLabel={uploadButtonLabel}