@capillarytech/creatives-library 8.0.266-alpha.1 → 8.0.266

package/v2Containers/CreativesContainer/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  CAP_SPACE_16, CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
-} from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64 } from '@capillarytech/cap-ui-library/styled/variables';
 
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
@@ -44,8 +42,9 @@ import { makeSelectFetchingCmsData } from '../Email/selectors';
 import {
   IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
 } from '../Line/Container/constants';
+import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/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 {
@@ -66,29 +65,19 @@ 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';
 
 const SlideBoxWrapper = styled.div`
   .cap-slide-box-v2-container{
-    .slidebox-header, .slidebox-content-container{
+    .slidebox-header, .slidebox-content-container, .slidebox-footer{
       margin-bottom: ${({ slideBoxWrapperMargin }) => `${slideBoxWrapperMargin}`};
       padding: 0 rem;
       &.has-footer{
         overflow-x: hidden;
       }
     }
-    .slidebox-footer{
-      /* Only apply margin-bottom to footer when ErrorInfoNote is shown in footer (BEE editor) */
-      /* For HTML Editor, errors are shown in ValidationErrorDisplay (inside content area), so no footer margin needed */
-      margin-bottom: ${({ shouldApplyFooterMargin }) => (shouldApplyFooterMargin ? `${CAP_SPACE_16}` : '0')};
-      padding: 0 rem;
-      &.has-footer{
-        overflow-x: hidden;
-      }
-    }
   }
 `;
 export class Creatives extends React.Component {
@@ -107,7 +96,6 @@ export class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
-      inAppEditorType: null,
       isLiquidValidationError: false,
       errorMessages: [],
       liquidErrorMessage: {
@@ -120,15 +108,6 @@ 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,
-      // HTML Editor validation state (for email channel)
-      htmlEditorValidationState: {
-        isContentEmpty: true,
-        issueCounts: { errors: 0, warnings: 0, total: 0 },
-        validationComplete: false, // Flag to track if validation has completed
-        errorsAcknowledged: false, // Flag to track if user has acknowledged errors by clicking redirection icon
-      },
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -158,7 +137,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) {
@@ -184,9 +163,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
@@ -265,19 +244,8 @@ export class Creatives extends React.Component {
   onCreateNextStep = () => {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
-      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())) {
+      const { emailCreateMode, currentChannel } = prevState;
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
         templateStep = prevState.templateStep + 2;
       }
       return {
@@ -286,21 +254,14 @@ export class Creatives extends React.Component {
     });
   }
 
-  onEmailModeChange = (mode, selectedMode = null) => {
-    this.setState({
-      emailCreateMode: mode,
-      selectedEmailCreateMode: selectedMode || mode, // Store the selected mode for new flow
-    });
+  onEmailModeChange = (mode) => {
+    this.setState({ emailCreateMode: mode });
   }
 
   onInAppModeChange = (mode) => {
     this.setState({ inAppCreateMode: mode });
   }
 
-  onInAppEditorTypeChange = (editorType) => {
-    this.setState({ inAppEditorType: editorType });
-  }
-
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode });
   }
@@ -344,7 +305,7 @@ export class Creatives extends React.Component {
       }
       return buttonObj;
     });
-    const { url, previewUrl } = media || {};
+    const {url, previewUrl} = media || {};
     return {
       bodyText: bodyTemplate,
       varMap: cardVarMapped,
@@ -473,35 +434,14 @@ 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: 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,
+                  ANDROID: templateData?.androidContent,
+                  IOS: templateData?.iosContent,
                 },
               },
             },
@@ -736,7 +676,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,
@@ -769,6 +709,73 @@ 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 { 
+            title, 
+            message, 
+            iconImageUrl: brandIcon = "", 
+            cta, 
+            expandableDetails 
+          } = webpushContent || {};
+          
+          // Map cta to onClickAction
+          let onClickAction = null;
+          if (cta) {
+            if (cta?.type === EXTERNAL_URL) {
+              onClickAction = {
+                type: URL,
+                url: cta?.actionLink || '',
+              };
+            } else {
+              onClickAction = {
+                type: cta?.type || SITE_URL,
+              };
+            }
+          }
+          
+          // Map expandableDetails.ctas to ctas array
+          let ctas = [];
+          if (expandableDetails?.ctas && expandableDetails?.ctas?.length > 0) {
+            ctas = 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 (expandableDetails?.media && expandableDetails?.media?.length > 0) {
+            const firstMedia = expandableDetails?.media[0];
+            if (firstMedia?.type === WEBPUSH_MEDIA_TYPES.IMAGE && firstMedia?.url) {
+              image = firstMedia?.url;
+            }
+          }
+          
+          creativesTemplateData = {
+            type: channel,
+            name: templateData?.messageSubject,
+            versions: {
+              base: {
+                content: {
+                  webpush: {
+                    title: title || '',
+                    message: message || '',
+                    ...(brandIcon && { brandIcon }),
+                    ...(onClickAction && { onClickAction }),
+                    ...(ctas.length > 0 && { ctas }),
+                    ...(image && { image, mediaType: IMAGE }),
+                  },
+                },
+              },
+            },
+            definition: { accountId },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -821,7 +828,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 || [];
@@ -916,24 +923,11 @@ export class Creatives extends React.Component {
               androidContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
-              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;
+              androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
             }
+            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)) {
@@ -951,24 +945,11 @@ export class Creatives extends React.Component {
               iosContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
-              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;
+              iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
             }
+            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";
         }
@@ -1183,7 +1164,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,
@@ -1209,6 +1190,105 @@ 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 { 
+            title, 
+            message, 
+            brandIcon, 
+            iconImageUrl: templateImageUrl , 
+            onClickAction, 
+            ctas: templateCtas, 
+            cta: templateCta, 
+            expandableDetails: templateExpandableDetails, 
+            image 
+          } = webpushContent || {};
+          
+          const iconImageUrl = brandIcon || templateImageUrl || '';
+          
+          // Map onClickAction to cta
+          let cta = null;
+          if (onClickAction) {
+            if (onClickAction?.type === URL) {
+              cta = {
+                type: EXTERNAL_URL,
+                actionLink: onClickAction?.url || '',
+              };
+            } else {
+              cta = {
+                type: onClickAction?.type || SITE_URL,
+                actionLink: onClickAction?.url || '',
+              };
+            }
+          } else if (templateCta) {
+            // Fallback to cta if onClickAction is not present
+            cta = {
+              type: templateCta?.type || EXTERNAL_URL,
+              actionLink: templateCta?.actionLink || '',
+            };
+          }
+          
+          // Map ctas array to expandableDetails.ctas
+          let expandableDetails = null;
+          const hasCtas = templateCtas && templateCtas.length > 0;
+          const hasImage = image;
+          
+          if (hasCtas || hasImage) {
+            expandableDetails = {
+              media: [],
+              ctas: [],
+            };
+            
+            // Map image to expandableDetails.media
+            if (hasImage) {
+              expandableDetails.media = [{
+                url: image,
+                type: IMAGE,
+              }];
+            }
+            
+            // Map ctas array to expandableDetails.ctas
+            if (hasCtas) {
+              expandableDetails.ctas = templateCtas.map((ctaItem) => ({
+                type: ctaItem?.type === URL ? EXTERNAL_URL : ctaItem?.type,
+                action: ctaItem?.action || '',
+                title: ctaItem?.actionText || ctaItem?.title || '',
+                actionLink: ctaItem?.actionLink || '',
+              }));
+            }
+          } else if (templateExpandableDetails) {
+            // If expandableDetails already exists, use it
+            expandableDetails = {
+              media: templateExpandableDetails?.media || [],
+              ctas: templateExpandableDetails?.ctas || [],
+            };
+          }
+          
+          // Convert from creatives format to campaign format
+          templateData = {
+            channel,
+            messageContent: {
+              content: {
+                channel: constants.WEBPUSH,
+                accountId,
+                content: {
+                  title: title || '',
+                  message: message || '',
+                  ...(iconImageUrl && { iconImageUrl }),
+                  ...(cta && { cta }),
+                  ...(expandableDetails && { expandableDetails }),
+                },
+                messageSubject: channelTemplate?.name ? channelTemplate.name : 'messageSubject',
+                offers: [],
+              },
+            },
+          };
+        }
+        break;
+      }
       default:
         break;
     }
@@ -1260,6 +1340,7 @@ export class Creatives extends React.Component {
       case constants.SMS:
       case constants.WECHAT:
       case constants.VIBER:
+      case constants.WEBPUSH:
         break;
       case constants.EMAIL:
         gtmDetails = {
@@ -1321,7 +1402,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,
@@ -1371,9 +1452,6 @@ 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;
     });
   }
@@ -1419,7 +1497,7 @@ export class Creatives extends React.Component {
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
     const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData, inAppCreateMode,
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
     } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1427,13 +1505,6 @@ 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';
@@ -1445,12 +1516,7 @@ export class Creatives extends React.Component {
       }
     } else if (channel === constants.EMAIL && isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
-      // CK editor flow: show footer on mode selection when a card is selected so user sees Continue (disabled until name + card)
-      if (supportCKEditor && slidBoxContent === 'createTemplate' && currentStep === 'modeSelection') {
-        showFooter = !!emailCreateMode;
-      } else {
-        showFooter = isEmailCreate && emailCreateMode && templateNameExists;
-      }
+      showFooter = isEmailCreate && emailCreateMode && templateNameExists;
     }
     if (channel === constants.EMAIL && emailCreateMode === "upload") {
       showFooter = showFooter && !this.props.isUploading;
@@ -1474,7 +1540,6 @@ 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'))) {
@@ -1497,7 +1562,7 @@ export class Creatives extends React.Component {
 
   shouldShowDoneFooter = () => {
     const {
-      slidBoxContent, templateStep, currentChannel, templateData, inAppCreateMode,
+      slidBoxContent, templateStep, currentChannel, templateData,
     } = this.state;
     const { isFullMode } = this.props;
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1505,17 +1570,10 @@ 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';
-
-      // 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;
-      }
+      showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
     } else if ([constants.WECHAT, constants.MOBILE_PUSH].includes(channel)) {
       showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
 
@@ -1525,6 +1583,7 @@ export class Creatives extends React.Component {
       }
     }
 
+
     return showDone;
   }
 
@@ -1544,18 +1603,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 });
-          });
+            localTemplateName: '' // Clear local state on blur
+          }, () => { 
+            this.showTemplateName({ formData, onFormDataChange }); 
+          }); 
         }}
         onChange={(ev) => {
           const { value } = ev.currentTarget;
@@ -1567,18 +1626,10 @@ export class Creatives extends React.Component {
   }
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
-    const {
-      slidBoxContent, currentChannel, isEditName, templateStep,
-    } = this.state;
+    const { slidBoxContent, currentChannel, isEditName } = 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 });
       }
@@ -1586,9 +1637,9 @@ 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
+          localTemplateName: name || '' // Initialize local state with current value
         });
       }
     }
@@ -1602,31 +1653,15 @@ export class Creatives extends React.Component {
     });
   }
 
-  // Callback to update HTML Editor validation state (called from EmailWrapper)
-  updateHtmlEditorValidationState = (validationState) => {
-    this.setState({
-      htmlEditorValidationState: validationState,
-    });
-  }
-
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
     const {
-      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppEditorType, weChatTemplateType,
+      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, 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) {
-      // 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")) {
+      if ((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;
@@ -1635,6 +1670,8 @@ 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;
@@ -1660,28 +1697,6 @@ 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, EmailLayout } = this.props;
-    if (currentChannel.toUpperCase() === constants.EMAIL) {
-      // Upload mode: enable when a file has been uploaded (EmailLayout set by ZIP or HTML upload)
-      // Other modes: enable when an editor type is selected (html_editor, drag_drop, editor)
-      const isUploadComplete = emailCreateMode === 'upload' && !isEmpty(EmailLayout);
-      const isEditorSelected = !!emailCreateMode && emailCreateMode !== 'upload';
-      const canContinue = isUploadComplete || isEditorSelected;
-      // In full mode: require both template name AND (upload complete or editor selected)
-      // In library mode: require only upload complete or editor selection
-      // Same rules for both CK editor and non-CK flows
-      if (isFullMode) {
-        const isTemplateNameValid = templateNameExists;
-        return !(isTemplateNameValid && canContinue);
-      }
-      return !canContinue;
-    }
-    return true;
-  }
-
   render() {
     const {
       slidBoxContent,
@@ -1690,7 +1705,6 @@ export class Creatives extends React.Component {
       templateData,
       currentChannel,
       emailCreateMode,
-      selectedEmailCreateMode,
       templateStep,
       isLoadingContent,
       mobilePushCreateMode,
@@ -1703,8 +1717,6 @@ export class Creatives extends React.Component {
       activeFormBuilderTab,
       showTestAndPreviewSlidebox,
       isTestAndPreviewMode,
-      inAppEditorType,
-      htmlEditorValidationState,
     } = this.state;
     const {
       isFullMode,
@@ -1727,35 +1739,9 @@ 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";
-
-    // Determine if we're in HTML Editor mode (where errors are shown in ValidationErrorDisplay, not ErrorInfoNote in footer)
-    const isEmailChannel = currentChannel?.toUpperCase() === constants.EMAIL;
-    const isEditMode = slidBoxContent === 'editTemplate';
-    const isHTMLEditorModeInCreate = selectedEmailCreateMode === 'html_editor';
-    const isHTMLEditorModeInEdit = isEditMode && htmlEditorValidationState != null;
-    const isHTMLEditorMode = isEmailChannel && (isHTMLEditorModeInCreate || isHTMLEditorModeInEdit);
-    const isBEEEditor = selectedEmailCreateMode === 'drag_drop'
-      || (emailCreateMode === 'editor' && !isHTMLEditorMode);
-
-    // Check for BEE editor errors (same logic as SlideBoxFooter)
-    const hasStandardErrors = liquidErrorMessage && liquidErrorMessage.STANDARD_ERROR_MSG && liquidErrorMessage.STANDARD_ERROR_MSG.length > 0;
-    const hasLiquidErrors = liquidErrorMessage && liquidErrorMessage.LIQUID_ERROR_MSG && liquidErrorMessage.LIQUID_ERROR_MSG.length > 0;
-    const htmlEditorHasErrors = htmlEditorValidationState && htmlEditorValidationState.issueCounts && htmlEditorValidationState.issueCounts.total > 0;
-    const hasBEEEditorErrors = isEmailChannel && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
-
-    // Only apply margin to footer when ErrorInfoNote is shown in footer (BEE editor)
-    // For HTML Editor, errors are shown in ValidationErrorDisplay (inside content area), so no footer margin needed
-    // IMPORTANT: Never show ErrorInfoNote in footer when in HTML Editor mode, even if liquidErrorMessage exists
-    const shouldShowErrorInfoNoteInFooter = isHTMLEditorMode ? false : hasBEEEditorErrors;
-
-    // Calculate margin for header/content (always apply if there are errors, regardless of editor type)
     const slideBoxWrapperMargin = (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0 && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
       ? CAP_SPACE_64
       : get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0
@@ -1765,11 +1751,7 @@ export class Creatives extends React.Component {
           : 0;
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
-      <SlideBoxWrapper
-        slideBoxWrapperMargin={slideBoxWrapperMargin}
-        shouldApplyFooterMargin={shouldShowErrorInfoNoteInFooter}
-        className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}
-      >
+      <SlideBoxWrapper slideBoxWrapperMargin={slideBoxWrapperMargin} className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
           header={
             this.shouldShowHeader() && (
@@ -1818,8 +1800,6 @@ 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}
@@ -1829,8 +1809,6 @@ 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}
@@ -1869,7 +1847,6 @@ export class Creatives extends React.Component {
               handleTestAndPreview={this.handleTestAndPreview}
               handleCloseTestAndPreview={this.handleCloseTestAndPreview}
               isTestAndPreviewMode={(() => this.state.isTestAndPreviewMode)()}
-              onHtmlEditorValidationStateChange={this.updateHtmlEditorValidationState}
             />
           )}
           footer={this.shouldShowFooter() ? (
@@ -1884,7 +1861,6 @@ export class Creatives extends React.Component {
               currentChannel={currentChannel.toUpperCase()}
               templateStep={this.creativesTemplateSteps[templateStep]}
               emailCreateMode={emailCreateMode}
-              selectedEmailCreateMode={selectedEmailCreateMode}
               shouldShowContinueFooter={this.shouldShowContinueFooter}
               shouldShowDoneFooter={this.shouldShowDoneFooter}
               fetchingCmsData={fetchingCmsData}
@@ -1893,22 +1869,18 @@ export class Creatives extends React.Component {
               errorMessages={liquidErrorMessage}
               currentTab={activeFormBuilderTab}
               onTestAndPreview={this.handleTestAndPreview}
-              isContinueButtonDisabled={this.isContinueButtonDisabled()}
-              continueButtonLabel={continueButtonLabel}
               showTestAndPreviewButton={(() => {
                 const isEmailOrSmsOrWhatsappOrRcsOrInAppOrMobilePush = [constants.EMAIL, constants.SMS, constants.WHATSAPP, constants.RCS, constants.INAPP, constants.MOBILE_PUSH, constants.VIBER, constants.ZALO].includes(currentChannel.toUpperCase());
                 const showButton = isEmailOrSmsOrWhatsappOrRcsOrInAppOrMobilePush && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate');
                 return showButton;
               })()}
-              htmlEditorValidationState={htmlEditorValidationState}
-              isCreatingTemplate={slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL}
             />
           ) : isLiquidValidationError && (
             <CapRow className="template-footer-width">
               {(() => {
                 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>
           )}