@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.2

package/v2Containers/CreativesContainer/index.js

@@ -43,7 +43,7 @@ import {
   IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
 } from '../Line/Container/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
-import {RCS_STATUSES} from '../Rcs/constants';
+import { RCS_STATUSES } from '../Rcs/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import {
@@ -64,6 +64,7 @@ import {
   // getTemplateDiffState
 } from "../../utils/transformerUtils";
 import { MANUAL_CAROUSEL } from '../MobilePushNew/constants';
+import { BIG_HTML } from '../InApp/constants';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -95,6 +96,7 @@ export class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
+      inAppEditorType: null,
       isLiquidValidationError: false,
       errorMessages: [],
       liquidErrorMessage: {
@@ -107,6 +109,8 @@ export class Creatives extends React.Component {
       isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
       // Performance optimization: Local template name for immediate UI feedback
       localTemplateName: '',
+      // Track selected email create mode for new flow (HTML Editor vs Drag & Drop)
+      selectedEmailCreateMode: null,
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -136,7 +140,7 @@ export class Creatives extends React.Component {
     if (!this.props?.isFullMode) {
       this.props?.templateActions.getCdnTransformationConfig();
     }
-    
+
     // Store loyalty tag props if loyaltyTagFetchingDependencies is provided
     const { loyaltyTagFetchingDependencies } = this.props;
     if (loyaltyTagFetchingDependencies) {
@@ -162,9 +166,9 @@ export class Creatives extends React.Component {
     const isEmptyTemplateName = !value.trim();
 
     // 1. IMMEDIATE: Update local state for instant UI feedback
-    this.setState({ 
+    this.setState({
       isTemplateNameEmpty: isEmptyTemplateName,
-      localTemplateName: value 
+      localTemplateName: value
     });
 
     // 2. DEBOUNCED: Only debounce the expensive onFormDataChange call
@@ -243,8 +247,19 @@ export class Creatives extends React.Component {
   onCreateNextStep = () => {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
-      const { emailCreateMode, currentChannel } = prevState;
-      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
+      const { emailCreateMode, currentChannel, selectedEmailCreateMode } = prevState;
+
+      // Check if we should skip template selection for HTML Editor
+      const supportCKEditor = commonUtil.hasSupportCKEditor();
+      const shouldSkipTemplateSelection = !supportCKEditor
+        && selectedEmailCreateMode === 'html_editor'
+        && currentChannel.toUpperCase() === constants.EMAIL
+        && prevState.templateStep === 1; // Only skip if we're at modeSelection step
+
+      if (shouldSkipTemplateSelection) {
+        // Skip template selection (step 2), go directly to createTemplateContent (step 3)
+        templateStep = prevState.templateStep + 2;
+      } else if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
         templateStep = prevState.templateStep + 2;
       }
       return {
@@ -253,14 +268,21 @@ export class Creatives extends React.Component {
     });
   }
 
-  onEmailModeChange = (mode) => {
-    this.setState({ emailCreateMode: mode });
+  onEmailModeChange = (mode, selectedMode = null) => {
+    this.setState({
+      emailCreateMode: mode,
+      selectedEmailCreateMode: selectedMode || mode, // Store the selected mode for new flow
+    });
   }
 
   onInAppModeChange = (mode) => {
     this.setState({ inAppCreateMode: mode });
   }
 
+  onInAppEditorTypeChange = (editorType) => {
+    this.setState({ inAppEditorType: editorType });
+  }
+
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode });
   }
@@ -304,7 +326,7 @@ export class Creatives extends React.Component {
       }
       return buttonObj;
     });
-    const {url, previewUrl} = media || {};
+    const { url, previewUrl } = media || {};
     return {
       bodyText: bodyTemplate,
       varMap: cardVarMapped,
@@ -433,14 +455,35 @@ export class Creatives extends React.Component {
         }
         case constants.INAPP: {
           const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
+
+          // Check if this is a BEE editor template (identified by special title 'bee free template')
+          const isAndroidBeeEditor = templateData?.androidContent?.type === constants.HTML
+            && templateData?.androidContent?.title?.toLowerCase() === 'bee free template';
+          const isIosBeeEditor = templateData?.iosContent?.type === constants.HTML
+            && templateData?.iosContent?.title?.toLowerCase() === 'bee free template';
+
           creativesTemplateData = {
             type: channel,
             name: templateData.messageSubject,
             versions: {
               base: {
                 content: {
-                  ANDROID: templateData?.androidContent,
-                  IOS: templateData?.iosContent,
+                  ANDROID: isAndroidBeeEditor ? {
+                    type: templateData?.androidContent?.type,
+                    bodyType: templateData?.androidContent?.bodyType,
+                    deviceType: constants.ANDROID,
+                    beeHtml: { value: templateData?.androidContent?.message },
+                    beeJson: templateData?.androidContent?.expandableDetails?.message,
+                    isBEEeditor: true,
+                  } : templateData?.androidContent,
+                  IOS: isIosBeeEditor ? {
+                    type: templateData?.iosContent?.type,
+                    bodyType: templateData?.iosContent?.bodyType,
+                    deviceType: constants.IOS,
+                    beeHtml: { value: templateData?.iosContent?.message },
+                    beeJson: templateData?.iosContent?.expandableDetails?.message,
+                    isBEEeditor: true,
+                  } : templateData?.iosContent,
                 },
               },
             },
@@ -675,7 +718,7 @@ export class Creatives extends React.Component {
           } = templateData || {};
           const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
           const Status = RCS_STATUSES.approved || '';
-        
+
           creativesTemplateData = {
             type: channel,
             edit: true,
@@ -708,68 +751,6 @@ export class Creatives extends React.Component {
           };
           break;
         }
-        case constants.WEBPUSH: {
-          // Convert from campaign format (messageContent.content.content) to creatives format
-          const webpushContent = get(templateData, 'content', {});
-          const accountId = get(templateData, 'accountId');
-          const templateName = templateData.name || 'Campaign message WebPush content';
-          const brandIcon = webpushContent.iconImageUrl || '';
-          
-          // Map cta to onClickAction
-          let onClickAction = null;
-          if (webpushContent.cta) {
-            if (webpushContent.cta.type === 'EXTERNAL_URL') {
-              onClickAction = {
-                type: 'URL',
-                url: webpushContent.cta.actionLink || '',
-              };
-            } else {
-              onClickAction = {
-                type: webpushContent.cta.type || 'SITE_URL',
-              };
-            }
-          }
-          
-          // Map expandableDetails.ctas to ctas array
-          let ctas = [];
-          if (webpushContent.expandableDetails?.ctas && webpushContent.expandableDetails.ctas.length > 0) {
-            ctas = webpushContent.expandableDetails.ctas.map((ctaItem) => ({
-              actionText: ctaItem.title || ctaItem.actionText || '',
-              type: 'URL',
-              actionLink: ctaItem.actionLink || '',
-            }));
-          }
-          
-          // Map expandableDetails.media to image if present
-          let image = null;
-          if (webpushContent.expandableDetails?.media && webpushContent.expandableDetails.media.length > 0) {
-            const firstMedia = webpushContent.expandableDetails.media[0];
-            if (firstMedia.type === 'IMAGE' && firstMedia.url) {
-              image = firstMedia.url;
-            }
-          }
-          
-          creativesTemplateData = {
-            type: channel,
-            name: templateData.messageSubject,
-            versions: {
-              base: {
-                content: {
-                  webpush: {
-                    title: webpushContent.title || '',
-                    message: webpushContent.message || '',
-                    ...(brandIcon && { brandIcon }),
-                    ...(onClickAction && { onClickAction }),
-                    ...(ctas.length > 0 && { ctas }),
-                    ...(image && { image, mediaType: "IMAGE" }),
-                  },
-                },
-              },
-            },
-            definition: { accountId },
-          };
-          break;
-        }
         default:
           break;
       }
@@ -822,7 +803,7 @@ export class Creatives extends React.Component {
   });
 
   getMobilePushCarouselData = (expandableDetails = []) => {
-    const newExpandableDetails = {...expandableDetails};
+    const newExpandableDetails = { ...expandableDetails };
     newExpandableDetails.style = expandableDetails.style || MANUAL_CAROUSEL;
     newExpandableDetails.message = expandableDetails.message || '';
     newExpandableDetails.ctas = expandableDetails.ctas || [];
@@ -917,11 +898,24 @@ export class Creatives extends React.Component {
               androidContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
-              androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
+              androidContent.expandableDetails = this.getMobilePushCarouselData({ ...androidContent?.expandableDetails });
+            }
+            if (androidContent?.isBEEeditor && androidContent?.beeHtml?.value) {
+              templateData.androidContent = {};
+              templateData.androidContent.type = constants.HTML;
+              templateData.androidContent.message = androidContent?.beeHtml?.value || '';
+              templateData.androidContent.title = 'bee free template';
+              templateData.androidContent.bodyType = androidContent?.bodyType;
+              templateData.androidContent.deviceType = constants.ANDROID;
+              templateData.androidContent.expandableDetails = {
+                style: BIG_HTML,
+                message: androidContent?.beeJson || '',
+              };
+            } else if (!androidContent?.isBEEeditor) {
+              templateData.androidContent = androidContent;
+              templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
+              templateData.androidContent.deviceType = constants.ANDROID;
             }
-            templateData.androidContent = androidContent;
-            templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
-            templateData.androidContent.deviceType = constants.ANDROID;
           }
           const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
           if (!isEmpty(iosContent)) {
@@ -939,11 +933,24 @@ export class Creatives extends React.Component {
               iosContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
-              iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
+              iosContent.expandableDetails = this.getMobilePushCarouselData({ ...iosContent?.expandableDetails });
+            }
+            if (iosContent?.isBEEeditor && iosContent?.beeHtml?.value) {
+              templateData.iosContent = {};
+              templateData.iosContent.type = constants.HTML;
+              templateData.iosContent.message = iosContent?.beeHtml?.value || '';
+              templateData.iosContent.title = 'bee free template';
+              templateData.iosContent.bodyType = iosContent?.bodyType;
+              templateData.iosContent.deviceType = constants.IOS;
+              templateData.iosContent.expandableDetails = {
+                style: BIG_HTML,
+                message: iosContent?.beeJson || '',
+              };
+            } else if (!iosContent?.isBEEeditor) {
+              templateData.iosContent = iosContent;
+              templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
+              templateData.iosContent.deviceType = constants.IOS;
             }
-            templateData.iosContent = iosContent;
-            templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
-            templateData.iosContent.deviceType = constants.IOS;
           }
           templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";
         }
@@ -1158,7 +1165,7 @@ export class Creatives extends React.Component {
             contentType = "",
             cardType = "",
             cardSettings = {},
-          } = get(versions, 'base.content.RCS.rcsContent',{});
+          } = get(versions, 'base.content.RCS.rcsContent', {});
           const rcsContent = {
             contentType,
             cardType,
@@ -1184,96 +1191,6 @@ export class Creatives extends React.Component {
         }
       }
         break;
-      case constants.WEBPUSH: {
-        if (template.value) {
-          const channelTemplate = template.value;
-          const accountId = get(channelTemplate, 'definition.accountId');
-          const webpushContent = get(channelTemplate, 'versions.base.content.webpush', {});
-          
-          const iconImageUrl = webpushContent.brandIcon || webpushContent.iconImageUrl || '';
-          
-          // Map onClickAction to cta
-          let cta = null;
-          if (webpushContent.onClickAction) {
-            if (webpushContent.onClickAction.type === 'URL') {
-              cta = {
-                type: 'EXTERNAL_URL',
-                actionLink: webpushContent.onClickAction.url || '',
-              };
-            } else {
-              cta = {
-                type: webpushContent.onClickAction.type || 'SITE_URL',
-                actionLink: webpushContent.onClickAction.url || '',
-              };
-            }
-          } else if (webpushContent.cta) {
-            // Fallback to cta if onClickAction is not present
-            cta = {
-              type: webpushContent.cta.type || 'EXTERNAL_URL',
-              actionLink: webpushContent.cta.actionLink || '',
-            };
-          }
-          
-          // Map ctas array to expandableDetails.ctas
-          let expandableDetails = null;
-          const hasCtas = webpushContent.ctas && webpushContent.ctas.length > 0;
-          const hasImage = webpushContent.image;
-          
-          if (hasCtas || hasImage) {
-            expandableDetails = {
-              media: [],
-              ctas: [],
-            };
-            
-            // Map image to expandableDetails.media
-            if (hasImage) {
-              expandableDetails.media = [{
-                url: webpushContent.image,
-                type: 'IMAGE',
-              }];
-            }
-            
-            // Map ctas array to expandableDetails.ctas
-            if (hasCtas) {
-              expandableDetails.ctas = webpushContent.ctas.map((ctaItem) => ({
-                type: ctaItem.type === 'URL' ? 'EXTERNAL_URL' : ctaItem.type,
-                action: ctaItem.action || '',
-                title: ctaItem.actionText || ctaItem.title || '',
-                actionLink: ctaItem.actionLink || '',
-              }));
-            }
-          } else if (webpushContent.expandableDetails) {
-            // If expandableDetails already exists, use it
-            expandableDetails = {
-              media: webpushContent.expandableDetails.media || [],
-              ctas: webpushContent.expandableDetails.ctas || [],
-            };
-          }
-          
-          // Convert from creatives format to campaign format
-          templateData = {
-            channel,
-            messageContent: {
-              content: {
-                channel: 'WEBPUSH',
-                accountId,
-                isDefault: false,
-                storeType: 'REGISTERED_STORE',
-                content: {
-                  title: webpushContent.title || '',
-                  message: webpushContent.message || '',
-                  ...(iconImageUrl && { iconImageUrl }),
-                  ...(cta && { cta }),
-                  ...(expandableDetails && { expandableDetails }),
-                },
-                messageSubject: channelTemplate?.name ? channelTemplate.name : 'messageSubject',
-                offers: [],
-              },
-            },
-          };
-        }
-        break;
-      }
       default:
         break;
     }
@@ -1386,7 +1303,7 @@ export class Creatives extends React.Component {
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
-    const { actionName, setMetaData = () => {} } = loyaltyMetaData;
+    const { actionName, setMetaData = () => { } } = loyaltyMetaData;
 
     // const isTemplateModified = getTemplateDiffState(
     //   channel,
@@ -1436,6 +1353,9 @@ export class Creatives extends React.Component {
       if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
         newState = { ...newState, emailCreateMode: null };
       }
+      if (prevState.currentChannel.toUpperCase() === constants.INAPP) {
+        newState = { ...newState, inAppEditorType: null };
+      }
       return newState;
     });
   }
@@ -1481,7 +1401,7 @@ export class Creatives extends React.Component {
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
     const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData, inAppCreateMode,
     } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1489,6 +1409,13 @@ export class Creatives extends React.Component {
     showFooter = isFullMode && slidBoxContent === "preview";
     const isMobilepush = channel === constants.MOBILE_PUSH;
 
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
+    if (!supportCKEditor && channel === constants.EMAIL && currentStep === 'modeSelection' && slidBoxContent === 'createTemplate') {
+      return true;
+    }
+    if (!supportCKEditor && channel === constants.EMAIL && currentStep === 'createTemplateContent' && slidBoxContent === 'createTemplate') {
+      showFooter = true;
+    }
 
     if (!isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
@@ -1524,6 +1451,7 @@ export class Creatives extends React.Component {
       showFooter = true;
     }
 
+
     if (showFooter) {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
         || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
@@ -1546,7 +1474,7 @@ export class Creatives extends React.Component {
 
   shouldShowDoneFooter = () => {
     const {
-      slidBoxContent, templateStep, currentChannel, templateData,
+      slidBoxContent, templateStep, currentChannel, templateData, inAppCreateMode,
     } = this.state;
     const { isFullMode } = this.props;
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1554,10 +1482,17 @@ export class Creatives extends React.Component {
     const channelName = !isFullMode && templateData ? templateData.type : currentChannel;
     const channel = channelName?.toUpperCase();
 
-
+    // Check supportCKEditor flag for new HTML editor flow
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
     if (channel === constants.EMAIL || channel === constants.SMS) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
-      showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+
+      // For new HTML editor flow (when supportCKEditor is false), show Done footer when in createTemplateContent step
+      if (!supportCKEditor && channel === constants.EMAIL && slidBoxContent === 'createTemplate' && currentStep === 'createTemplateContent') {
+        showDone = true;
+      } else {
+        showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+      }
     } else if ([constants.WECHAT, constants.MOBILE_PUSH].includes(channel)) {
       showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
 
@@ -1567,7 +1502,6 @@ export class Creatives extends React.Component {
       }
     }
 
-
     return showDone;
   }
 
@@ -1587,18 +1521,18 @@ export class Creatives extends React.Component {
   templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
     // Use local state for immediate UI feedback, fallback to prop value
     const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-    
+
     return (
       <CapInput
         value={displayValue}
         suffix={<span />}
-        onBlur={() => { 
-          this.setState({ 
+        onBlur={() => {
+          this.setState({
             isEditName: false,
             localTemplateName: '' // Clear local state on blur
-          }, () => { 
-            this.showTemplateName({ formData, onFormDataChange }); 
-          }); 
+          }, () => {
+            this.showTemplateName({ formData, onFormDataChange });
+          });
         }}
         onChange={(ev) => {
           const { value } = ev.currentTarget;
@@ -1610,10 +1544,16 @@ export class Creatives extends React.Component {
   }
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
-    const { slidBoxContent, currentChannel, isEditName } = this.state;
+    const { slidBoxContent, currentChannel, isEditName, templateStep } = this.state;
     const channel = currentChannel.toUpperCase();
     if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
+
+      const isModeSelectionStep = templateStep === 'modeSelection' || this.creativesTemplateSteps[templateStep] === 'modeSelection';
+      const isCreateMode = slidBoxContent === 'createTemplate';
+      if (isCreateMode && isModeSelectionStep) {
+        return;
+      }
       if (channel === constants.EMAIL && !name && slidBoxContent === 'createTemplate') {
         this.setState({ isTemplateNameEmpty: true });
       }
@@ -1621,7 +1561,7 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({ 
+        this.setState({
           showTemplateNameComponentEdit: true,
           localTemplateName: name || '' // Initialize local state with current value
         });
@@ -1639,13 +1579,22 @@ export class Creatives extends React.Component {
 
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
     const {
-      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType,
+      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppEditorType, weChatTemplateType,
     } = this.state;
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
     const channel = currentChannel.toUpperCase();
+    // Check if supportCKEditor is false (new flow)
+    const supportCKEditor = commonUtil.hasSupportCKEditor(); // Default to legacy flow
     if (channel === constants.EMAIL || channel === constants.SMS) {
-      if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
+      // New flow: Show Continue button when supportCKEditor is false and in modeSelection
+      // Always show it (even if disabled) - visibility is separate from enabled state
+      if (!supportCKEditor && currentStep === 'modeSelection' && slidBoxContent === 'createTemplate') {
+        return true; // Return early to ensure visibility
+      }
+
+      // Legacy flow: Original logic (only when supportCKEditor is true)
+      if (supportCKEditor && ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor")) {
         let isEmailCreate = slidBoxContent === 'createTemplate';
         isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || (emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
         isShowContinueFooter = isEmailCreate && emailCreateMode;
@@ -1654,8 +1603,6 @@ export class Creatives extends React.Component {
       isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
     } else if (currentChannel.toUpperCase() === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
-    } else if (currentChannel.toUpperCase() === constants.INAPP) {
-      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentChannel === "modeSelection";
     }
 
     return isShowContinueFooter;
@@ -1681,6 +1628,28 @@ export class Creatives extends React.Component {
     return true;
   }
 
+  // Check if Continue button should be disabled (for new flow only)
+  isContinueButtonDisabled = () => {
+    const { currentChannel, emailCreateMode, templateNameExists } = this.state;
+    const { isFullMode } = this.props;
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
+    if (supportCKEditor) {
+      return false;
+    }
+    if (currentChannel.toUpperCase() === constants.EMAIL) {
+      const isEditorSelected = !!emailCreateMode && emailCreateMode !== 'upload';
+      // In full mode: require both template name AND editor selection
+      // In library mode: require only editor selection (template name not needed)
+      if (isFullMode) {
+        const isTemplateNameValid = templateNameExists;
+        return !(isTemplateNameValid && isEditorSelected);
+      }
+      // Library mode: only editor selection is required
+      return !isEditorSelected;
+    }
+    return true;
+  }
+
   render() {
     const {
       slidBoxContent,
@@ -1701,6 +1670,7 @@ export class Creatives extends React.Component {
       activeFormBuilderTab,
       showTestAndPreviewSlidebox,
       isTestAndPreviewMode,
+      inAppEditorType,
     } = this.state;
     const {
       isFullMode,
@@ -1723,6 +1693,10 @@ export class Creatives extends React.Component {
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
+    // Compute Continue button label
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
+    const continueButtonLabel = supportCKEditor ? messages.continue : messages.next;
+
     const mapTemplateCreate = slidBoxContent === "createTemplate"
       && weChatTemplateType === MAP_TEMPLATE
       && templateStep !== "modeSelection";
@@ -1784,6 +1758,8 @@ export class Creatives extends React.Component {
               onChannelChange={this.onChannelChange}
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
+              onInAppEditorTypeChange={this.onInAppEditorTypeChange}//used when create is clicked in inapp
+              inAppEditorType={inAppEditorType}// htmlEditor || dragDropEditor are values
               templateStep={this.creativesTemplateSteps[templateStep]}
               onCreateNextStep={this.onCreateNextStep}
               onEnterTemplateName={this.onEnterTemplateName}
@@ -1793,6 +1769,8 @@ export class Creatives extends React.Component {
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
+              inAppCreateMode={this.state.inAppCreateMode}
+              onInAppModeChange={this.onInAppModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}
@@ -1853,6 +1831,8 @@ export class Creatives extends React.Component {
               errorMessages={liquidErrorMessage}
               currentTab={activeFormBuilderTab}
               onTestAndPreview={this.handleTestAndPreview}
+              isContinueButtonDisabled={this.isContinueButtonDisabled()}
+              continueButtonLabel={continueButtonLabel}
               showTestAndPreviewButton={(() => {
                 const showButton = currentChannel.toUpperCase() === constants.EMAIL && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate');
                 return showButton;
@@ -1863,7 +1843,7 @@ export class Creatives extends React.Component {
               {(() => {
                 const errorsToShow = get(liquidErrorMessage, constants.LIQUID_ERROR_MSG, []);
                 const standardErrorsToShow = get(liquidErrorMessage, constants.STANDARD_ERROR_MSG, []);
-                return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow}} />;
+                return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{ LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow }} />;
               })()}
             </CapRow>
           )}

package/v2Containers/CreativesContainer/messages.js

@@ -338,10 +338,6 @@ export default defineMessages({
     id: `${scope}.rcsCreative`,
     defaultMessage: `RCS creative`,
   },
-  "webPushTemplate": {
-    id: `${scope}.webPushTemplate`,
-    defaultMessage: `Web Push Template`,
-  },
   "templateNameEmpty": {
     id: `${scope}.templateNameEmpty`,
     defaultMessage: `Template name cannot be empty`
@@ -370,4 +366,8 @@ export default defineMessages({
     id: `${scope}.testAndPreview`,
     defaultMessage: `Preview and Test`,
   },
+  "next": {
+    id: `${scope}.next`,
+    defaultMessage: `Next`,
+  },
 });