@capillarytech/creatives-library 8.0.274 → 8.0.276-alpha.0

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -8,6 +8,7 @@ import messages from './messages';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
 import { PREVIEW } from './constants';
 import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
+import { hasSupportCKEditor } from '../../utils/common';
 
 function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
   if (isCreatingTemplate) {
@@ -72,8 +73,10 @@ function SlideBoxFooter(props) {
   const isBEEEditor = selectedEmailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
     || (emailCreateMode === EMAIL_CREATE_MODES.EDITOR && !isHTMLEditorMode)
     || (isEditMode && !isHtmlEditorValidationStateActive);
+  const isSupportCKEditor = hasSupportCKEditor();
   // Only check validation for HTML Editor mode, not for BEE/DragDrop editor
-  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor;
+  // In upload mode the legacy Email (CK) component does not report validation state, so do not disable buttons
+  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor && !isSupportCKEditor;
   const isContentEmpty = shouldCheckValidation ? (htmlEditorValidationState?.isContentEmpty ?? true) : false;
   // Check if validation has completed
   const validationComplete = shouldCheckValidation ? (htmlEditorValidationState?.validationComplete ?? false) : true;
@@ -123,7 +126,7 @@ function SlideBoxFooter(props) {
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
 
-  const shouldShowErrorInfoNote = hasBEEEditorErrors;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (

package/v2Containers/Email/index.js

@@ -235,7 +235,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
-    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
+    const hasUploadedContent = !this.props.params?.id && this.props.Templates?.selectedEmailLayout && !_.isEmpty(formData);
+    this.setState({
+      content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
+      formData,
+      ...(hasUploadedContent ? { loadingStatus: 2 } : {}),
+    });
 
     // setTimeout(() => {
     //     // this.getFormData();
@@ -286,6 +291,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       }
     }
+
+    // When SUPPORT_CK_EDITOR: after zip/HTML upload we show with selectedEmailLayout. Ensure spinner stops
+    // even if formData was empty on first mount (e.g. currentOrgDetails not yet available).
+    if (!this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
+      this.setState((prev) => ({ loadingStatus: Math.max(prev.loadingStatus, 2) }));
+    }
   }
 
 
@@ -313,11 +324,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // }
     const {isFullMode, isGetFormData} = nextProps;
     if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData) && !this.state.isDragDrop) {
-      //only for ck editor
-      //when create button is clicked in full mode
-      // Don't start validation if we're in Test & Preview mode
+      // Only for CK editor: when Done is clicked in full mode, trigger the same chain as library
+      // so that FormBuilder validation and saveFormData run reliably (getFormData -> saveValidationData -> startValidation).
       if (!nextProps.isTestAndPreviewMode) {
-        this.startValidation(true);
+        this.getFormData();
       }
     }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
@@ -1561,7 +1571,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       newFormData[0] = baseData;
       newFormData[0].base = true;
     }
-    this.props.templatesActions.resetUploadData();
+    // Don't clear selectedEmailLayout when we're in create mode with uploaded content -
+    // EmailWrapper uses it to keep isShowEmailCreate true. Clearing it would unmount Email and show wrong UI.
+    const isCreateWithUpload = !props.params?.id && props.Templates?.selectedEmailLayout;
+    if (!isCreateWithUpload) {
+      this.props.templatesActions.resetUploadData();
+    }
     return newFormData;
   }
 
@@ -2902,6 +2917,25 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
+
+    // When SUPPORT_CK_EDITOR: after zip/HTML upload we show Email component with selectedEmailLayout.
+    // Don't show spinner once we have uploaded content in formData (create mode, no params.id).
+    if (isLoading && !this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
+      const content = this.state.formData?.[0]?.['template-content']
+        || _.get(this.state.formData, 'base.template-content')
+        || (this.state.formData?.base && this.state.formData.base[this.state.formData.base?.activeTab]?.['template-content']);
+      if (content) {
+        isLoading = false;
+      }
+      if (typeof window !== 'undefined' && this.state.loadingStatus < 2) {
+        console.log('[UPLOAD-DEBUG] Email isEmailLoading (upload path)', {
+          loadingStatus: this.state.loadingStatus,
+          hasContentInFormData: !!content,
+          isLoadingResult: isLoading,
+          hasSelectedEmailLayout: !!this.props.Templates?.selectedEmailLayout,
+        });
+      }
+    }
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -198,12 +198,13 @@ const EmailWrapperView = ({
   const isEditModeForEditor = hasParamsIdForEditor;
   const isBEEFromProps = emailProps?.editor === 'BEE' && emailProps?.selectedEditorMode === null;
   const isDragDropFromCreateMode = emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP;
-  const isExplicitlyBEEEditor = isBEEFromProps || isDragDropFromCreateMode;
+  const isExplicitlyBEEEditor = isBEEFromProps || isDragDropFromCreateMode ||  (emailProps?.editor === "BEE" && !isFullMode);
   let isHTMLEditorMode = false;
 
   if (supportCKEditor) {
-    // Legacy flow: use HTML editor for UPLOAD so zip/HTML content (EmailLayout) is shown; use Email component for EDITOR
-    isHTMLEditorMode = emailCreateMode === EMAIL_CREATE_MODES.UPLOAD;
+    // UPLOAD mode should use Email component (CKEditor), NOT HTML editor
+    // This ensures consistency between create and edit flows when SUPPORT_CK_EDITOR is enabled
+    isHTMLEditorMode = false; // Always use Email component (CKEditor) in legacy flow
   } else if (isEditModeForEditor) {
     isHTMLEditorMode = !isExplicitlyBEEEditor;
   } else {

package/v2Containers/EmailWrapper/components/__tests__/EmailWrapperView.test.js

@@ -517,4 +517,141 @@ describe('EmailWrapperView', () => {
       // Should handle gracefully if ref methods don't exist
     });
   });
+
+  describe('Issue 1: Beefree template should open in Beefree editor in Edit mode', () => {
+    beforeEach(() => {
+      const { hasSupportCKEditor } = require('../../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false); // New flow
+    });
+
+    it('should render Email component (not HTML editor) when editing Beefree template', () => {
+      const emailPropsWithBEE = {
+        ...defaultProps.emailProps,
+        editor: 'BEE',
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithBEE,
+        emailCreateMode: EMAIL_CREATE_MODES.DRAG_DROP,
+        params: { id: 'beefree-template-1' },
+        location: { query: {}, pathname: '/email/edit/beefree-template-1' },
+      });
+
+      // Should render Email component (BEE editor), not HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+      // Email component would be rendered (we're using EmailWithoutSaga which doesn't have a testid)
+    });
+
+    it('should render HTML editor when editing non-Beefree template', () => {
+      const emailPropsWithHTML = {
+        ...defaultProps.emailProps,
+        editor: 'HTML',
+        selectedEditorMode: EMAIL_CREATE_MODES.HTML_EDITOR,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithHTML,
+        emailCreateMode: EMAIL_CREATE_MODES.HTML_EDITOR,
+        params: { id: 'html-template-1' },
+        location: { query: {}, pathname: '/email/edit/html-template-1' },
+      });
+
+      // Should render HTML editor for non-Beefree template
+      expect(screen.getByTestId('email-html-editor')).toBeInTheDocument();
+    });
+
+    it('should render Email component when emailCreateMode is DRAG_DROP in create mode', () => {
+      const emailPropsWithBEE = {
+        ...defaultProps.emailProps,
+        editor: 'BEE',
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithBEE,
+        emailCreateMode: EMAIL_CREATE_MODES.DRAG_DROP,
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (BEE editor), not HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Issue 2: Upload Zip should open in CKEditor when SUPPORT_CK_EDITOR is enabled', () => {
+    beforeEach(() => {
+      const { hasSupportCKEditor } = require('../../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(true); // Legacy flow
+    });
+
+    it('should render Email component (CKEditor) for UPLOAD mode in create flow', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined, // Default CKEditor
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: { html: '<p>Uploaded content</p>' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+
+    it('should render Email component (CKEditor) for UPLOAD mode in edit flow', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined,
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: { html: '<p>Edited uploaded content</p>' },
+        params: { id: 'uploaded-template-1' },
+        location: { query: {}, pathname: '/email/edit/uploaded-template-1' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+
+    it('should NOT render HTML editor for EDITOR mode when SUPPORT_CK_EDITOR is enabled', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined,
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+  });
 });

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -643,7 +643,7 @@ const useEmailWrapper = ({
           // If template was created in BEE AND BEE is enabled → open in BEE editor
           // Otherwise → open in HTML editor (fallback)
           // IMPORTANT: When supportCKEditor is false, default to HTML editor unless explicitly BEE
-          if (isDragDrop && isBeeEnabled) {
+          if ((isDragDrop && isBeeEnabled) || (!isFullMode && isBeeEnabled)) {
             editorType = 'BEE';
             selectedEditorMode = null; // BEE uses existing flow
           } else {

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

@@ -732,8 +732,7 @@ describe('useEmailWrapper', () => {
 
         await waitFor(() => {
           const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('HTML');
-          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
+          expect(emailProps.editor).toBe('BEE');
         });
       });
 
@@ -762,8 +761,7 @@ describe('useEmailWrapper', () => {
 
         await waitFor(() => {
           const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('HTML');
-          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
+          expect(emailProps.editor).toBe('BEE');
         });
       });
     });

package/v2Containers/MobilePush/Create/index.js

@@ -114,7 +114,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.iosCtasData && isEmpty(this.state.templateCta)) {
       this.setState({showIosCtaTable: true});
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema) && isEmpty(this.state.formData)) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema)) {
       const schema = this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.imageSchema;
       const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
       const isIosSupported = get(this, "props.Templates.selectedWeChatAccount.configs.ios") === '1';

package/v2Containers/MobilePush/Edit/index.js

@@ -168,7 +168,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema) && _.isEmpty(this.state.formData)) {
-      this.setState({ fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {} }, () => {
+      this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
         this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
         const templateId = get(this, "props.params.id");
         if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
@@ -388,11 +388,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     } else {
-      selectedAccount = accounts?.[0];
+      selectedAccount = accounts?.length > 0 ? accounts[0] : {};
       formData['mobilepush-accounts'] = selectedAccount?.id;
     }
     this.props.actions.setWeChatAccount(selectedAccount);
-    this.setState({ formData, accountsOptions: accounts?.map((acc) => ({ key: acc.id, label: acc.name, value: acc.id })) });
+    this.setState({formData, accountsOptions: accounts?.length > 0 ? accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id})) : []});
   };
 
   createDefinition = (account) => ({
@@ -2018,9 +2018,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
     }
-    if (this.props.supportedTags) {
-      tags = this.props.supportedTags;
-    }
     return (
       <div className="creatives-mobilepush-edit mobilepush-wrapper">
         <CapSpin spinning={spinning}>