@capillarytech/creatives-library 8.0.249 → 8.0.250-alpha.0

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -10,6 +10,7 @@ import SmsWrapper from '../SmsWrapper';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
+import InAppWrapper from '../InAppWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
@@ -119,7 +120,11 @@ export function SlideBoxContent(props) {
       emailCreateMode,
       onMobilepushModeChange,
       mobilePushCreateMode,
+      onInAppEditorTypeChange,
+      inAppEditorType,
       templateStep,
+      inAppCreateMode,
+      onInAppModeChange,
       onEnterTemplateName,
       onRemoveTemplateName,
       onCreateNextStep,
@@ -169,6 +174,7 @@ export function SlideBoxContent(props) {
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
       supportedTags = [],
+      onHtmlEditorValidationStateChange,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -668,44 +674,95 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
+        location={location}
+        onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
-      <Email
-        key="cretives-container-email-edit"
-        setIsLoadingContent={setIsLoadingContent}
-        location={{
-          pathname: `/email/edit`,
-          query: { type: 'embedded', module: 'library'},
-        }}
-        route={{ name: 'email' }}
-        isGetFormData={isGetFormData}
-        getFormdata={getFormData}
-        params={{ id: templateData._id }}
-        templateData={templateData}
-        getFormSubscriptionData={getFormData}
-        getDefaultTags={type}
-        isFullMode={isFullMode}
-        editor={editor}
-        cap={cap}
-        showTemplateName={showTemplateName}
-        onValidationFail={onValidationFail}
-        forwardedTags={forwardedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
-        moduleType={moduleType}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
-        eventContextTags={eventContextTags}
-        isLoyaltyModule={isLoyaltyModule}
-        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-        handleTestAndPreview={handleTestAndPreview}
-        handleCloseTestAndPreview={handleCloseTestAndPreview}
-        isTestAndPreviewMode={(() => {
-          return isTestAndPreviewMode;
-        })()}
-      />
-        )}
+        (() => {
+          const supportCKEditor = commonUtil.hasSupportCKEditor();
+          // When supportCKEditor is true: Always use Email component (legacy flow)
+          if (supportCKEditor || templateData?.is_drag_drop) {
+            return (
+              <Email
+                key="cretives-container-email-edit"
+                setIsLoadingContent={setIsLoadingContent}
+                location={{
+                  pathname: `/email/edit`,
+                  query: { type: 'embedded', module: 'library'},
+                }}
+                route={{ name: 'email' }}
+                isGetFormData={isGetFormData}
+                getFormdata={getFormData}
+                params={{ id: templateData._id }}
+                templateData={templateData}
+                getFormSubscriptionData={getFormData}
+                getDefaultTags={type}
+                isFullMode={isFullMode}
+                editor={editor}
+                cap={cap}
+                showTemplateName={showTemplateName}
+                onValidationFail={onValidationFail}
+                forwardedTags={forwardedTags}
+                selectedOfferDetails={selectedOfferDetails}
+                onPreviewContentClicked={onPreviewContentClicked}
+                onTestContentClicked={onTestContentClicked}
+                moduleType={moduleType}
+                showLiquidErrorInFooter={showLiquidErrorInFooter}
+                eventContextTags={eventContextTags}
+              isLoyaltyModule={isLoyaltyModule}
+              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+              handleTestAndPreview={handleTestAndPreview}
+              handleCloseTestAndPreview={handleCloseTestAndPreview}
+              isTestAndPreviewMode={isTestAndPreviewMode}
+              onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
+            />
+            );
+          }     
+          // HTML template: Use EmailWrapper component (which uses EmailWithoutSaga)
+          return (
+            <EmailWrapper
+              key="cretives-container-email-edit-wrapper"
+              setIsLoadingContent={setIsLoadingContent}
+              onEmailModeChange={onEmailModeChange}
+              emailCreateMode="editor"
+              isGetFormData={isGetFormData}
+              getFormdata={getFormData}
+              templateData={templateData}
+              type={type}
+              step="createTemplateContent"
+              showNextStep={onCreateNextStep}
+              isFullMode={isFullMode}
+              editor={editor}
+              cap={cap}
+              onResetStep={onResetStep}
+              showTemplateName={showTemplateName}
+              onEnterTemplateName={onEnterTemplateName}
+              onRemoveTemplateName={onRemoveTemplateName}
+              onValidationFail={onValidationFail}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onPreviewContentClicked={onPreviewContentClicked}
+              onTestContentClicked={onTestContentClicked}
+              getCmsTemplatesInProgress={getCmsTemplatesInProgress}
+              moduleType={moduleType}
+              showLiquidErrorInFooter={showLiquidErrorInFooter}
+              eventContextTags={eventContextTags}
+              isLoyaltyModule={isLoyaltyModule}
+              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+              handleTestAndPreview={handleTestAndPreview}
+              handleCloseTestAndPreview={handleCloseTestAndPreview}
+              isTestAndPreviewMode={isTestAndPreviewMode}
+              onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
+              location={{
+                pathname: `/email/edit/${templateData._id}`,
+                query: { type: 'embedded', module: 'library', id: templateData._id },
+              }}
+              params={{ id: templateData._id }}
+            />
+          );
+        })()
+      )}
       {isEditMPush && (
         (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
         (!isFullMode && isLoyaltyModule) || 
@@ -999,22 +1056,39 @@ export function SlideBoxContent(props) {
         />
       )}
 
-      {isCreateInApp && (<InApp
-        isFullMode={isFullMode}
-        onCreateComplete={onCreateComplete}
-        handleClose={handleClose}
-        location={{
-          pathname: `/inapp/create`,
-          query,
-          search: '',
-        }}
-        getFormData={getFormData}
-        isGetFormData={isGetFormData}
-        templateData={templateData}
-        getDefaultTags={type}
-        eventContextTags={eventContextTags}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
-        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+      {isCreateInApp && (
+        <InAppWrapper
+          key="creatives-inapp-wrapper"
+          date={new Date().getMilliseconds()}
+          setIsLoadingContent={setIsLoadingContent}
+          onInAppEditorTypeChange={onInAppEditorTypeChange}
+          inAppEditorType={inAppEditorType}
+          isGetFormData={isGetFormData}
+          getFormdata={getFormData}
+          templateData={templateData}
+          type={type}
+          step={templateStep}
+          showNextStep={onCreateNextStep}
+          isFullMode={isFullMode}
+          cap={cap}
+          onResetStep={onResetStep}
+          showTemplateName={showTemplateName}
+          onEnterTemplateName={onEnterTemplateName}
+          onRemoveTemplateName={onRemoveTemplateName}
+          onValidationFail={onValidationFail}
+          forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
+          moduleType={moduleType}
+          showLiquidErrorInFooter={showLiquidErrorInFooter}
+          eventContextTags={eventContextTags}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          getDefaultTags={type}
+          onInAppModeChange={onInAppModeChange}
+          inAppCreateMode={inAppCreateMode}
+          showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
@@ -1105,6 +1179,8 @@ SlideBoxContent.propTypes = {
   onSelectTemplate: PropTypes.func,
   onPreviewTemplate: PropTypes.func,
   templateData: PropTypes.object,
+  onInAppEditorTypeChange: PropTypes.func,
+  inAppEditorType: PropTypes.object,
   location: PropTypes.object,
   isGetFormData: PropTypes.bool,
   getFormData: PropTypes.func,

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -7,12 +7,15 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
 import { PREVIEW } from './constants';
+import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
 
-function getFullModeSaveBtn(slidBoxContent) {
-  return slidBoxContent === "editTemplate" ?
-    <FormattedMessage {...messages.creativesTemplatesUpdate}/>
-    :
-    <FormattedMessage {...messages.creativesTemplatesSaveFullMode}/>;
+function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
+  if (isCreatingTemplate) {
+    return <FormattedMessage {...messages.creativesTemplatesDone} />;
+  }
+  return slidBoxContent === "editTemplate"
+    ? <FormattedMessage {...messages.creativesTemplatesUpdate} />
+    : <FormattedMessage {...messages.creativesTemplatesSaveFullMode} />;
 }
 function SlideBoxFooter(props) {
   const {
@@ -24,18 +27,119 @@ function SlideBoxFooter(props) {
     fetchingCmsData,
     isTemplateNameEmpty,
     errorMessages,
-    isLiquidValidationError,
+    // eslint-disable-next-line no-unused-vars
+    isLiquidValidationError, // Legacy prop, kept for PropTypes compatibility
     currentTab,
     onTestAndPreview,
     // isEmptyContent,
     showTestAndPreviewButton,
     shouldShowDoneFooter,
     shouldShowContinueFooter,
+    isContinueButtonDisabled,
+    continueButtonLabel,
+    htmlEditorValidationState,
+    isCreatingTemplate,
+    currentChannel,
+    emailCreateMode,
+    selectedEmailCreateMode,
   } = props;
 
+  // Calculate if buttons should be disabled
+  // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
+  // For other channels, BEE editor, or when htmlEditorValidationState is not provided, don't disable based on validation
+  const isEmailChannel = currentChannel?.toUpperCase() === 'EMAIL';
+  const isEditMode = slidBoxContent === 'editTemplate';
+
+  // Use selectedEmailCreateMode for accurate mode detection in create mode (emailCreateMode is mapped for backwards compatibility)
+  // In edit mode: htmlEditorValidationState is initialized as {} but only updated by HTML Editor
+  // If it's still in initial state (validationComplete === false, issueCounts.total === 0), it's BEE editor
+  // Upload mode also uses HTML Editor, so include it in HTML Editor mode check
+  const isUploadMode = emailCreateMode === EMAIL_CREATE_MODES.UPLOAD;
+  const isHTMLEditorModeInCreate = selectedEmailCreateMode === EMAIL_CREATE_MODES.HTML_EDITOR || isUploadMode;
+  // In edit mode: Check if htmlEditorValidationState has been updated by HTML Editor
+  // HTML Editor will call updateHtmlEditorValidationState, setting validationComplete to true at some point
+  // If validationComplete is false and issueCounts.total === 0, it's likely still in initial state (BEE editor)
+  const isHtmlEditorValidationStateActive = htmlEditorValidationState && (
+    htmlEditorValidationState.validationComplete === true
+    || (htmlEditorValidationState.issueCounts && htmlEditorValidationState.issueCounts.total > 0)
+    || htmlEditorValidationState.hasErrors === true
+  );
+  const isHTMLEditorModeInEdit = isEditMode && isHtmlEditorValidationStateActive;
+  const isHTMLEditorMode = isHTMLEditorModeInCreate || isHTMLEditorModeInEdit;
+  console.log('***isHTMLEditorMode', isHTMLEditorMode, 'isHTMLEditorModeInCreate', isHTMLEditorModeInCreate, 'isHTMLEditorModeInEdit', isHTMLEditorModeInEdit, 'isHtmlEditorValidationStateActive', isHtmlEditorValidationStateActive);
+
+  // BEE editor detection: drag_drop mode OR (editor mode AND not HTML Editor)
+  // In edit mode: if htmlEditorValidationState is in initial state (not updated by HTML Editor), it's BEE editor
+  const isBEEEditor = selectedEmailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
+    || (emailCreateMode === EMAIL_CREATE_MODES.EDITOR && !isHTMLEditorMode)
+    || (isEditMode && !isHtmlEditorValidationStateActive);
+  // Only check validation for HTML Editor mode, not for BEE/DragDrop editor
+  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor;
+  const isContentEmpty = shouldCheckValidation ? (htmlEditorValidationState?.isContentEmpty ?? true) : false;
+  // Check if validation has completed
+  const validationComplete = shouldCheckValidation ? (htmlEditorValidationState?.validationComplete ?? false) : true;
+  // Only Rule Group #1 (Input & Sanitization) blocks; hasErrors is set by HTMLEditor from hasBlockingErrors.
+  // hasErrors should always be set (defaults to false), so we only check for explicit true value.
+  // Warnings (label issues, HTML/CSS compatibility) do NOT block buttons.
+  const hasValidationErrors = shouldCheckValidation && htmlEditorValidationState?.hasErrors === true;
+  console.log('***hasValidationErrors', hasValidationErrors);
+  const errorsAcknowledged = shouldCheckValidation ? (htmlEditorValidationState?.errorsAcknowledged ?? false) : true;
+  console.log('***errorsAcknowledged', errorsAcknowledged);
+
+  // IMPORTANT: In both modes, if validation finds errors, buttons must stay disabled until user acknowledges by clicking redirection icon
+  let shouldDisableButtons = false;
+  if (shouldCheckValidation) {
+    if (isEditMode) {
+      // Edit mode: Disable if validation has completed AND found errors AND errors not acknowledged
+      shouldDisableButtons = validationComplete && hasValidationErrors && !errorsAcknowledged;
+    } else {
+      // Create mode:
+      // 1. Disable until validation completes
+      // 2. Disable if content is empty
+      // 3. Disable if validation finds errors AND errors not acknowledged (user must click redirection icon)
+      shouldDisableButtons = !validationComplete || isContentEmpty || (hasValidationErrors && !errorsAcknowledged);
+    }
+  }
+
+  // Show ErrorInfoNote for API validation errors (from validateLiquidTemplateContent)
+  // For HTML Editor: API validation errors are shown in ValidationErrorDisplay (inside CodeEditorPane), not here
+  const hasStandardErrors = errorMessages && errorMessages.STANDARD_ERROR_MSG && errorMessages.STANDARD_ERROR_MSG.length > 0;
+  const hasLiquidErrors = errorMessages && errorMessages.LIQUID_ERROR_MSG && errorMessages.LIQUID_ERROR_MSG.length > 0;
+
+  // Check if htmlEditorValidationState has actual validation errors
+  // If htmlEditorValidationState exists but has no errors (total === 0), and we have STANDARD/LIQUID errors,
+  // then those errors are from BEE editor (FormBuilder validation), not HTML Editor
+  const htmlEditorHasErrors = htmlEditorValidationState && htmlEditorValidationState.issueCounts && htmlEditorValidationState.issueCounts.total > 0;
+
+  // BEE editor errors: We have STANDARD/LIQUID errors AND either:
+  // 1. No htmlEditorValidationState exists, OR
+  // 2. htmlEditorValidationState exists but has no actual errors (meaning errors are from FormBuilder/BEE editor)
+  // IMPORTANT: Only check for BEE editor errors when NOT in HTML Editor mode (upload or html_editor)
+  // Upload mode uses HTML Editor, so BEE editor errors don't apply
+  // IMPORTANT: BEE editor doesn't have real-time content updates,
+  // so we should NOT disable buttons based on validation errors
+  // In edit mode: Check if htmlEditorValidationState is in initial state (not updated by HTML Editor)
+  // In edit mode with BEE editor, htmlEditorValidationState will remain in initial state
+  // In create mode, check selectedEmailCreateMode or emailCreateMode
+  const isBEEEditorModeInEdit = isEditMode && !isHtmlEditorValidationStateActive;
+  console.log('***isBEEEditorModeInEdit', isBEEEditorModeInEdit, 'isHtmlEditorValidationStateActive', isHtmlEditorValidationStateActive);
+  const isBEEEditorModeInCreate = !isHTMLEditorMode && !isEditMode;
+  console.log('***isBEEEditorModeInCreate', isBEEEditorModeInCreate);
+  const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
+  console.log('***isBEEEditorMode', isBEEEditorMode);
+  const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
+  console.log('***hasBEEEditorErrors', hasBEEEditorErrors);
+
+  const shouldShowErrorInfoNote = hasBEEEditorErrors;
   return (
-    <div className='template-footer-width'>
-      {isLiquidValidationError && (<ErrorInfoNote errorMessages={errorMessages} currentTab={currentTab?.toUpperCase()} />)}
+    <div className="template-footer-width">
+      {shouldShowErrorInfoNote && (
+        <ErrorInfoNote
+          errorMessages={errorMessages}
+          currentTab={currentTab?.toUpperCase()}
+          useLegacyDisplay // Use simple list display for BEE Editor (not tabbed interface)
+        />
+      )}
       <div>
         {shouldShowDoneFooter() && (
           <div>
@@ -47,10 +151,10 @@ function SlideBoxFooter(props) {
             <CapRow>
               <CapButton
                 onClick={onSave}
-                disabled={isTemplateNameEmpty || fetchingCmsData || false}
+                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons}
               >
                 {isFullMode ? (
-                  getFullModeSaveBtn(slidBoxContent)
+                  getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
                 ) : (
                   <FormattedMessage {...messages.creativesTemplatesSave} />
                 )}
@@ -59,7 +163,7 @@ function SlideBoxFooter(props) {
                 <CapButton
                   type="secondary"
                   onClick={onTestAndPreview}
-                  // disabled={isEmptyContent || false}
+                  disabled={shouldDisableButtons}
                   style={{ marginLeft: '8px' }}
                 >
                   <FormattedMessage {...messages.testAndPreview} />
@@ -70,8 +174,11 @@ function SlideBoxFooter(props) {
           </div>
         )}
         {shouldShowContinueFooter() && (
-          <CapButton onClick={onCreateNextStep}>
-            <FormattedMessage {...messages.continue} />
+          <CapButton
+            onClick={onCreateNextStep}
+            disabled={isContinueButtonDisabled || false}
+          >
+            <FormattedMessage {...(continueButtonLabel || messages.continue)} />
           </CapButton>
         )}
         {slidBoxContent === PREVIEW && (
@@ -99,5 +206,48 @@ SlideBoxFooter.propTypes = {
   onTestAndPreview: PropTypes.func,
   isEmptyContent: PropTypes.bool,
   showTestAndPreviewButton: PropTypes.bool,
+  isContinueButtonDisabled: PropTypes.bool,
+  continueButtonLabel: PropTypes.object,
+  htmlEditorValidationState: PropTypes.shape({
+    isContentEmpty: PropTypes.bool,
+    issueCounts: PropTypes.shape({
+      html: PropTypes.number,
+      label: PropTypes.number,
+      liquid: PropTypes.number,
+      total: PropTypes.number,
+    }),
+    validationComplete: PropTypes.bool,
+    /** Only Rule Group #1 (Input & Sanitization) blocks; warnings do not block */
+    hasErrors: PropTypes.bool,
+  }),
+  isCreatingTemplate: PropTypes.bool,
+  currentChannel: PropTypes.string,
+  emailCreateMode: PropTypes.string,
+  selectedEmailCreateMode: PropTypes.string,
+};
+
+SlideBoxFooter.defaultProps = {
+  slidBoxContent: '',
+  onSave: () => {},
+  onEditTemplate: () => {},
+  onCreateNextStep: () => {},
+  shouldShowContinueFooter: () => {},
+  shouldShowDoneFooter: () => {},
+  isFullMode: false,
+  fetchingCmsData: false,
+  isTemplateNameEmpty: false,
+  errorMessages: [],
+  isLiquidValidationError: false,
+  currentTab: '',
+  onTestAndPreview: () => {},
+  isEmptyContent: false,
+  showTestAndPreviewButton: false,
+  isContinueButtonDisabled: false,
+  continueButtonLabel: {},
+  htmlEditorValidationState: {},
+  isCreatingTemplate: false,
+  currentChannel: '',
+  emailCreateMode: '',
+  selectedEmailCreateMode: '',
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -45,6 +45,7 @@ export function SlideBoxHeader(props) {
   const isZaloEdit = channel.toLowerCase() === ZALO && slidBoxContent === 'editTemplate';
   const zaloOverview = isZaloEdit && isFullMode;
   const whatsappOverview = isWhatsappEdit && isFullMode;
+  const shouldShowInAppEditHeader = isInAppEdit && !isFullMode;
   const headerMessage = whatsappOverview ? messages.whatsappOverview : zaloOverview ? messages.zaloOverview : messages.editMessageContent;
   const {
     whatsappTemplateName,
@@ -110,7 +111,7 @@ export function SlideBoxHeader(props) {
             }
           />
         )}
-      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
+      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (shouldShowInAppEditHeader || !isInAppCreate) && (
         <CapHeader
           className="support-video-elements"
           title={<FormattedMessage {...headerMessage} values={{ channel: getChannelLabel(channel) }} />}

package/v2Containers/CreativesContainer/constants.js

@@ -26,6 +26,7 @@ export const WEBPUSH_BRAND_ICON = "WEBPUSH_BRAND_ICON";
 export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 export const JOURNEY = "journey";
+export const HTML = "HTML";
 
 export const LOYALTY_SUPPORTED_ACTION = "SEND_COMMUNICATION_ACTION";