@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Containers/InApp/index.js

@@ -1,6 +1,4 @@
-import React, {
-  useState, useEffect, useCallback, useMemo, useRef,
-} from "react";
+import React, { useState, useEffect } from "react";
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
 import { bindActionCreators } from "redux";
@@ -9,25 +7,28 @@ import { injectIntl, FormattedMessage } from "react-intl";
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
 import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
 import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
 import CapRow from "@capillarytech/cap-ui-library/CapRow";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapTab from "@capillarytech/cap-ui-library/CapTab";
 import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
-import { makeSelectInApp, makeSelectAccount, makeSelectGetTemplateDetailsInProgress } from "./selectors";
+import { makeSelectInApp, makeSelectAccount } from "./selectors";
 import * as globalActions from '../Cap/actions';
 import {
   isLoadingMetaEntities,
   makeSelectMetaEntities,
   setInjectedTags,
   selectCurrentOrgDetails,
-  selectLiquidStateDetails,
+  selectLiquidStateDetails
 } from "../Cap/selectors";
 import * as inAppActions from "./actions";
 import './index.scss';
 import messages from "./messages";
 import globalMessages from "../Cap/messages";
 import withCreatives from "../../hoc/withCreatives";
+import TemplatePreview from "../../v2Components/TemplatePreview";
 import { validateTags } from "../../utils/tagValidations";
 import injectReducer from '../../utils/injectReducer';
 import v2InAppReducer from './reducer';
@@ -37,7 +38,6 @@ import {
   ANDROID,
   BIG_PICTURE,
   BIG_TEXT,
-  BIG_HTML,
   DEEP_LINK,
   DEVICE_SUPPORTED,
   INAPP_BUTTON_TYPES,
@@ -46,22 +46,19 @@ import {
   INITIAL_CTA_DATA,
   IOS,
   LAYOUT_RADIO_OPTIONS,
-  IOS_CAPITAL,
+  AI_CONTENT_BOT_DISABLED,
 } from "./constants";
 import { INAPP, SMS } from "../CreativesContainer/constants";
 import {
   ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
 } from "../Whatsapp/constants";
+import CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
 import { validateInAppContent } from "../../utils/commonUtils";
+import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
 import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
-import HTMLEditor from "../../v2Components/HtmlEditor";
-import { HTML_EDITOR_VARIANTS } from "../../v2Components/HtmlEditor/constants";
-import { INAPP_EDITOR_TYPES } from "../InAppWrapper/constants";
-import InappAdvanced from "../InappAdvance/index";
-import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
 
 let editContent = {};
 
@@ -69,14 +66,13 @@ export const InApp = (props) => {
   const {
     intl,
     actions,
-    globalActions,
     isFullMode,
     onCreateComplete,
     params,
     templateData = {},
-    defaultData = {},
     editData = {},
     accountData = {},
+    globalActions,
     location,
     getDefaultTags,
     supportedTags,
@@ -84,18 +80,8 @@ export const InApp = (props) => {
     injectedTags,
     getFormData,
     selectedOfferDetails,
+    currentOrgDetails,
     fetchingLiquidValidation,
-    templateName,
-    getTemplateDetailsInProgress,
-    isEditInApp,
-    setIsLoadingContent,
-    query,
-    inAppCreateMode,
-    isGetFormData,
-    showTemplateName,
-    onValidationFail,
-    type,
-    forwardedTags,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -104,7 +90,7 @@ export const InApp = (props) => {
   const [templateMediaType, setTemplateMediaType] = useState(
     INAPP_MEDIA_TYPES.TEXT
   );
-  const [tempName, setTempName] = useState("");
+  const [templateName, setTemplateName] = useState("");
   const [templateLayoutType, setTemplateLayoutType] = useState(
     INAPP_MESSAGE_LAYOUT_TYPES.MODAL
   );
@@ -118,25 +104,6 @@ export const InApp = (props) => {
   const [templateMessageErrorIos, setTemplateMessageErrorIos] = useState(false);
   const [templateTitleErrorAndroid, setTemplateTitleErrorAndroid] = useState(false);
   const [templateTitleErrorIos, setTemplateTitleErrorIos] = useState(false);
-  // HTML Editor content state (for INAPP HTML variant)
-  // Initialize HTML content from edit data if available
-  const getInitialHtmlContent = (device) => {
-    const editContent = isFullMode
-      ? get(editData?.templateDetails?.versions, `base.content`, {})
-      : get(templateData?.versions, `base.content`, {});
-    const deviceContent = editContent?.[device];
-    return deviceContent?.message || "";
-  };
-
-  const [htmlContentAndroid, setHtmlContentAndroid] = useState(() => getInitialHtmlContent("ANDROID"));
-  const [htmlContentIos, setHtmlContentIos] = useState(() => getInitialHtmlContent("IOS"));
-  // Track if this is an HTML template (type === HTML or style === BIG_HTML)
-  const [isHTMLTemplate, setIsHTMLTemplate] = useState(false);
-  // Version to force HTMLEditor remount on layout changes
-  const [htmlEditorContentVersion, setHtmlEditorContentVersion] = useState(0);
-  // Refs to store latest content before layout changes
-  const htmlContentAndroidRef = useRef(htmlContentAndroid);
-  const htmlContentIosRef = useRef(htmlContentIos);
   const [accountId, setAccountId] = useState("");
   const [accessToken, setAccessToken] = useState("");
   const [accountName, setAccountName] = useState("");
@@ -160,7 +127,10 @@ export const InApp = (props) => {
   const [buttonTypeIos, setButtonTypeIos] = useState(INAPP_BUTTON_TYPES.NONE);
   const isBtnTypeCtaAndroid = buttonTypeAndroid === INAPP_BUTTON_TYPES.CTA;
   const isBtnTypeCTaIos = buttonTypeIos === INAPP_BUTTON_TYPES.CTA;
-
+  const { accessibleFeatures = [] } = currentOrgDetails || {};
+  const isAiContentBotDisabled = accessibleFeatures?.includes(
+    AI_CONTENT_BOT_DISABLED
+  );
   const [errorMessage, setErrorMessage] = useState({
     STANDARD_ERROR_MSG: {
       ANDROID: [],
@@ -188,7 +158,7 @@ export const InApp = (props) => {
       // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
       //get deep link keys in an array
       const deepLinkKeys = Object.values(JSON.parse(deepLinkObj || '{}'));
-      const keys = deepLinkKeys?.map((link) => ({ label: link.name, value: link.link, title: link.link }));
+      const keys = deepLinkKeys?.map((link) => ({label: link.name, value: link.link, title: link.link }));
       setPanes(isAndroidSupported ? ANDROID : IOS);
       setDeepLink(keys);
       setAccountId(sourceAccountIdentifier);
@@ -213,32 +183,6 @@ export const InApp = (props) => {
     };
   }, [paramObj.id]);
 
-  // Initialize template name from defaultData (from wrapper) or editData/templateData
-  useEffect(() => {
-    const defaultTemplateName = defaultData?.['template-name'] || '';
-    if (defaultTemplateName && !isEditFlow) {
-      setTempName(defaultTemplateName);
-      // Call showTemplateName callback if provided (for header display)
-      if (isFullMode && showTemplateName && defaultTemplateName) {
-        showTemplateName({
-          formData: { 'template-name': defaultTemplateName },
-          onFormDataChange: (updatedFormData) => {
-            const newName = updatedFormData?.['template-name'] || '';
-            setTempName(newName);
-            if (showTemplateName) {
-              showTemplateName({
-                formData: { 'template-name': newName },
-                onFormDataChange: (formData) => {
-                  setTempName(formData?.['template-name'] || '');
-                },
-              });
-            }
-          },
-        });
-      }
-    }
-  }, [defaultData?.['template-name'], showTemplateName, isEditFlow]);
-
   useEffect(() => {
     const {
       name = "",
@@ -246,48 +190,16 @@ export const InApp = (props) => {
       createdAt = "",
     } = isFullMode ? editData?.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content`, {});
-
-    // LIBRARY MODE FIX: Backend stores bodyType as 'POPUP' but UI expects 'MODAL'
-    // Convert back to MODAL for display
-    if (!isFullMode && editContent) {
-      if (editContent.ANDROID?.bodyType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
-        editContent.ANDROID.bodyType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
-      }
-      if (editContent.IOS?.bodyType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
-        editContent.IOS.bodyType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
-      }
-    }
-
     if (editContent && !isEmpty(editContent)) {
       setEditFlow(true);
-      setTempName(name);
+      setTemplateName(name);
       setTemplateDate(createdAt);
       setTemplateLayoutType(editContent?.ANDROID?.bodyType);
-      // Call showTemplateName callback when in edit mode + full mode to show template name header
-      if (showTemplateName && name) {
-        showTemplateName({
-          formData: { 'template-name': name },
-          onFormDataChange: (updatedFormData) => {
-            const newName = updatedFormData?.['template-name'] || '';
-            setTempName(newName);
-            if (showTemplateName) {
-              showTemplateName({
-                formData: { 'template-name': newName },
-                onFormDataChange: (formData) => {
-                  setTempName(formData?.['template-name'] || '');
-                },
-              });
-            }
-          },
-        });
-      }
       const androidContent = editContent?.ANDROID;
-      let androidIsHTML = false;
       if (!isEmpty(androidContent)) {
         const {
           title: androidTitle = '',
           message: androidMessage = '',
-          type: androidType = '',
           ctas: androidCta = {},
           expandableDetails: androidExpandableDetails = {},
         } = androidContent || {};
@@ -297,30 +209,12 @@ export const InApp = (props) => {
           ctas: androidCtas,
         } = androidExpandableDetails || {};
         const androidCtaLength = androidCtas?.length;
-        // Check if this is a Bee editor template
-        const isBEEeditor = get(androidContent, 'isBEEeditor');
-        const isBeeFreeTemplate = !isEmpty(androidTitle) && androidTitle.toLowerCase() === 'bee free template';
-        // Check if this is an HTML editor template (identified by special title)
-        const isHTMLEditorTemplate = !isEmpty(androidTitle) && androidTitle.toLowerCase() === 'html editor template';
-        // Check if this is an HTML template
-        // Prioritize HTML editor template title, then check type/style
-        // But exclude if it's a Bee editor template
-        androidIsHTML = isHTMLEditorTemplate || ((androidType === INAPP_MEDIA_TYPES.HTML || androidStyle === BIG_HTML)
-          && !isBEEeditor
-          && !isBeeFreeTemplate);
-        setIsHTMLTemplate(androidIsHTML);
-
         setTitleAndroid(androidTitle);
         setTemplateMessageAndroid(androidMessage);
-        // Initialize HTML content for HTMLEditor if feature is enabled and it's an HTML template
-        if (androidIsHTML) {
-          setHtmlContentAndroid(androidMessage);
-        }
         setTemplateMediaType(
-          androidIsHTML ? INAPP_MEDIA_TYPES.HTML
-            : androidStyle === BIG_TEXT
-              ? INAPP_MEDIA_TYPES.TEXT
-              : INAPP_MEDIA_TYPES.IMAGE
+          androidStyle === BIG_TEXT
+            ? INAPP_MEDIA_TYPES.TEXT
+            : INAPP_MEDIA_TYPES.IMAGE
         );
         setInAppImageSrcAndroid(androidImage);
         setDeepLinkValueAndroid(androidCta[0]?.actionLink || '');
@@ -337,7 +231,6 @@ export const InApp = (props) => {
         const {
           title: iosTitle = '',
           message: iosMessage = '',
-          type: iosType = '',
           ctas: iosCta = {},
           expandableDetails: iosExpandableDetails = {},
         } = iosContent || {};
@@ -347,53 +240,9 @@ export const InApp = (props) => {
           ctas: iosCtas,
         } = iosExpandableDetails || {};
         const iosCtaLength = iosCtas?.length;
-
-        // Check if this is an HTML template (if Android wasn't HTML, check iOS)
-        // Note: androidIsHTML is in the outer scope from the Android content check above
-        if (!androidIsHTML) {
-          // Check if this is a Bee editor template
-          const isBEEeditor = get(iosContent, 'isBEEeditor');
-          const isBeeFreeTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'bee free template';
-          // Check if this is an HTML editor template (identified by special title)
-          const isHTMLEditorTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'html editor template';
-          // Check if this is an HTML template
-          // Prioritize HTML editor template title, then check type/style
-          // But exclude if it's a Bee editor template
-          const iosIsHTML = isHTMLEditorTemplate || ((iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML)
-            && !isBEEeditor
-            && !isBeeFreeTemplate);
-          setIsHTMLTemplate(iosIsHTML);
-          // Initialize HTML content for HTMLEditor if feature is enabled and it's an HTML template
-          if (iosIsHTML) {
-            setHtmlContentIos(iosMessage);
-          }
-        } else {
-          // If Android is HTML, also initialize iOS HTML content if available
-          if (androidIsHTML) {
-            setHtmlContentIos(iosMessage);
-          }
-        }
-
         setTitleIos(iosTitle);
         setTemplateMessageIos(iosMessage);
-        // Update templateMediaType if iOS is HTML and Android wasn't
-        if (!androidIsHTML) {
-          // Check if this is a Bee editor template
-          const isBEEeditor = get(iosContent, 'isBEEeditor');
-          const isBeeFreeTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'bee free template';
-          // Check if this is an HTML editor template (identified by special title)
-          const isHTMLEditorTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'html editor template';
-          // Check if this is an HTML template
-          // Prioritize HTML editor template title, then check type/style
-          const iosIsHTML = isHTMLEditorTemplate || ((iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML)
-            && !isBEEeditor
-            && !isBeeFreeTemplate);
-          if (iosIsHTML) {
-            setTemplateMediaType(INAPP_MEDIA_TYPES.HTML);
-          } else {
-            setTemplateMediaType(iosStyle === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
-          }
-        }
+        setTemplateMediaType(iosStyle === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
         setInAppImageSrcIos(iosImage);
         setButtonTypeIos(iosCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
         setAddActionLinkIos(!isEmpty(iosCta) && true);
@@ -402,47 +251,12 @@ export const InApp = (props) => {
           setCtaDataIos(getCtaObject(iosCtas));
         }
       }
-    } else {
-      // Explicitly set edit flow to false if there's no edit content
-      setEditFlow(false);
     }
   }, [editData.templateDetails || templateData]);
 
-  // Extract editor type from defaultData for stable reference
-  const editorType = useMemo(() => {
-    const type = defaultData?.['editor-type'];
-    return type;
-  }, [defaultData]);
-
-  // Separate effect for handling editor type from wrapper in create mode
-  useEffect(() => {
-    // Only process editor type if we're not in edit flow
-    if (!isEditFlow) {
-      if (editorType === INAPP_EDITOR_TYPES.HTML_EDITOR) {
-        setIsHTMLTemplate(true);
-        setTemplateMediaType(INAPP_MEDIA_TYPES.HTML);
-      } else if (editorType === INAPP_EDITOR_TYPES.DRAG_DROP_EDITOR) {
-        setIsHTMLTemplate(false);
-      } else if (!editorType) {
-        // If no editor type is set yet, ensure we start with false
-        setIsHTMLTemplate(false);
-      }
-    }
-  }, [editorType, isEditFlow]);
-
   // tag Code start from here
   useEffect(() => {
-    // Reset tags fetch ref when switching between HTML and legacy editors
-    tagsFetchedRef.current = false;
-
-    // Only fetch tags if HTML Editor is not being used (legacy flow)
-    // For HTML Editor, tags will be fetched via handleOnTagsContextChange
-    if (isHTMLTemplate) {
-      // HTML Editor will handle tag fetching via onContextChange
-      return;
-    }
-
-    //fetching tags for legacy editor
+    //fetching tags
     const { type, module } = location.query || {};
     const isEmbedded = type === EMBEDDED;
     const context = isEmbedded ? module : DEFAULT;
@@ -457,7 +271,7 @@ export const InApp = (props) => {
       query.context = getDefaultTags;
     }
     globalActions.fetchSchemaForEntity(query);
-  }, [isHTMLTemplate]);
+  }, []);
 
   useEffect(() => {
     let tag = get(metaEntities, `tags.standard`, []);
@@ -468,17 +282,7 @@ export const InApp = (props) => {
     updateTags(tag);
   }, [metaEntities]);
 
-  // Track if we've already fetched tags to prevent duplicate calls
-  const tagsFetchedRef = React.useRef(false);
-
-  const handleOnTagsContextChange = useCallback((data) => {
-    // This function is called when TagList needs to fetch tags
-    // It triggers the API call to /meta/TAG endpoint via fetchSchemaForEntity
-    // Only fetch if we haven't already fetched for this context
-    if (tagsFetchedRef.current) {
-      return;
-    }
-
+  const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const tempData = (data || '').toLowerCase();
     const isEmbedded = type === EMBEDDED;
@@ -490,192 +294,257 @@ export const InApp = (props) => {
       context,
       embedded,
     };
-    // Mark as fetched to prevent duplicate calls
-    tagsFetchedRef.current = true;
-    // Call the API via Redux action - this will trigger the saga which calls Api.fetchSchemaForEntity
-    // The API endpoint will be: /meta/TAG?query={...}
     globalActions.fetchSchemaForEntity(query);
-  }, [location.query, globalActions]);
+  };
 
+  const templateDescErrorHandler = (value) => {
+    let errorMessage = false;
+    const { unsupportedTags, isBraceError } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+    }) || {};
+    if (value === '' && INAPP_MEDIA_TYPES.NONE) {
+      errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
+    } else if (unsupportedTags?.length > 0) {
+      errorMessage = formatMessage(
+        globalMessages.unsupportedTagsValidationError,
+        {
+          unsupportedTags,
+        },
+      );
+    }
+    if (isBraceError) {
+      errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
+    }
+    return errorMessage;
+  };
 
+  const onTagSelect = (data, id) => {
+    if (id === 0) {
+      const tempTitle = `${panes === ANDROID ? titleAndroid : titleIos}{{${data}}}`;
+      if (panes === ANDROID) {
+        setTitleAndroid(tempTitle);
+      } else {
+        setTitleIos(tempTitle);
+      }
+    } else {
+      const tempMsg = `${panes === ANDROID ? templateMessageAndroid : templateMessageIos}{{${data}}}`;
+      const error = templateDescErrorHandler(tempMsg);
+      if (panes === ANDROID) {
+        setTemplateMessageAndroid(tempMsg);
+        setTemplateMessageErrorAndroid(error);
+      } else {
+        setTemplateMessageIos(tempMsg);
+        setTemplateMessageErrorIos(error);
+      }
+    }
+  };
   // tag Code end
 
+  const onTemplateNameChange = ({ target: { value } }) => {
+    setTemplateName(value);
+  };
+
   const onTemplateLayoutTypeChange = ({ target: { value } }) => {
-    // Update layout type and force HTMLEditor to remount with latest content
-    // Increment version to force remount - this ensures editor displays current content
     setTemplateLayoutType(value);
-    setHtmlEditorContentVersion(prev => prev + 1);
   };
 
+  const onCopyTitleAndContent = () => {
+    if (panes === ANDROID) {
+      setTitleAndroid(titleIos);
+      setTemplateMessageAndroid(templateMessageIos);
+    } else {
+      setTitleIos(titleAndroid);
+      setTemplateMessageIos(templateMessageAndroid);
+    }
+  };
 
+  const PANES = [
+    {
+      content: (
+        <CapDeviceContent
+          intl={intl}
+          location={location}
+          injectedTags={injectIntl}
+          selectedOfferDetails={selectedOfferDetails}
+          panes={panes}
+          actions={actions}
+          editData={editData}
+          isFullMode={isFullMode}
+          inAppImageSrc={inAppImageSrcAndroid}
+          setInAppImageSrc={setInAppImageSrcAndroid}
+          isEditFlow={isEditFlow}
+          ctaData={ctaDataAndroid}
+          setCtaData={setCtaDataAndroid}
+          buttonType={buttonTypeAndroid}
+          setButtonType={setButtonTypeAndroid}
+          accountId={accountId}
+          accessToken={accessToken}
+          templateMediaType={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
+          title={titleAndroid}
+          setTitle={setTitleAndroid}
+          templateMessageError={templateMessageErrorAndroid}
+          templateMessage={templateMessageAndroid}
+          setTemplateMessage={setTemplateMessageAndroid}
+          setTemplateMessageError={setTemplateMessageErrorAndroid}
+          templateTitleError={templateTitleErrorAndroid}
+          setTemplateTitleError={setTemplateTitleErrorAndroid}
+          addActionLink={addActionLinkAndroid}
+          setAddActionLink={setAddActionLinkAndroid}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueAndroid}
+          setDeepLinkValue={setDeepLinkValueAndroid}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
+          isAiContentBotDisabled={isAiContentBotDisabled}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Android} />,
+      key: ANDROID,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED,
+      // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
+    },
+    {
+      content: (
+        <CapDeviceContent
+          intl={intl}
+          location={location}
+          injectedTags={injectIntl}
+          selectedOfferDetails={selectedOfferDetails}
+          panes={panes}
+          actions={actions}
+          editData={editData}
+          isFullMode={isFullMode}
+          inAppImageSrc={inAppImageSrcIos}
+          setInAppImageSrc={setInAppImageSrcIos}
+          isEditFlow={isEditFlow}
+          ctaData={ctaDataIos}
+          setCtaData={setCtaDataIos}
+          buttonType={buttonTypeIos}
+          setButtonType={setButtonTypeIos}
+          accountId={accountId}
+          accessToken={accessToken}
+          templateMediaType={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
+          title={titleIos}
+          setTitle={setTitleIos}
+          templateMessageError={templateMessageErrorIos}
+          templateMessage={templateMessageIos}
+          setTemplateMessage={setTemplateMessageIos}
+          setTemplateMessageError={setTemplateMessageErrorIos}
+          templateTitleError={templateTitleErrorIos}
+          setTemplateTitleError={setTemplateTitleErrorIos}
+          addActionLink={addActionLinkIos}
+          setAddActionLink={setAddActionLinkIos}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueIos}
+          setDeepLinkValue={setDeepLinkValueIos}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
+          isAiContentBotDisabled={isAiContentBotDisabled}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Ios} />,
+      key: IOS,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED,
+    },
+  ];
+
+  const createModeContent = (
+    <CapRow>
+      {/* template name */}
+      <CapHeading type="h4">
+        <FormattedMessage {...messages.creativeName} />
+      </CapHeading>
+      <CapInput
+        id="inapp-template-name-input"
+        className="inapp-template-name-input"
+        onChange={onTemplateNameChange}
+        placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
+        value={templateName}
+        size="default"
+      />
+    </CapRow>
+  );
   //create methods end
 
   //used by create and edit
-
-  const isDisableDone = (device) => {
-    const isIosDevice = device === IOS || device === IOS_CAPITAL;
-    const isAndroidDevice = device === ANDROID;
-    const isNoDevice = device === null || device === undefined;
-
-    // Check for validation errors first - if there are errors, disable the button
-    if (hasAnyErrors(errorMessage)) {
-      return true;
-    }
-
-    // For HTMLEditor: only validate HTML content (when it's an HTML template)
-    if (isHTMLTemplate) {
-      // Get account-level device support restrictions
-      const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-      const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
-      // Check if devices have content - ensure content is a string before calling trim
-      let hasAndroidContent = htmlContentAndroid && typeof htmlContentAndroid === 'string' && htmlContentAndroid?.trim() !== '';
-      let hasIosContent = htmlContentIos && typeof htmlContentIos === 'string' && htmlContentIos?.trim() !== '';
-
-      // LIBRARY MODE FIX: In library mode edit, htmlContent states might not be set yet
-      // because HTMLEditor loads content via initialContent prop, not via onContentChange
-      // Fallback to checking template data content
-      if (!hasAndroidContent && isEditFlow && !isFullMode && templateData) {
-        const androidTemplateContent = get(templateData, 'versions.base.content.ANDROID.message') ||
-          get(templateData, 'versions.base.content.ANDROID.beeHtml.value');
-        hasAndroidContent = androidTemplateContent && androidTemplateContent.trim() !== '';
-      }
-      if (!hasIosContent && isEditFlow && !isFullMode && templateData) {
-        const iosTemplateContent = get(templateData, 'versions.base.content.IOS.message') ||
-          get(templateData, 'versions.base.content.IOS.beeHtml.value');
-        hasIosContent = iosTemplateContent && iosTemplateContent.trim() !== '';
-      }
-
-      // If checking specific device, validate that device's content
-      if (isAndroidDevice) {
-        // Only validate Android if it's supported by account
-        // But in library mode edit, check template data too
-        if (androidSupported || (isEditFlow && !isFullMode && hasAndroidContent)) {
-          if (!hasAndroidContent) {
-            return true;
-          }
-          return false;
-        }
-        // Android not supported and no content in template - skip validation
-        return false;
-      }
-      if (isIosDevice) {
-        // Only validate iOS if it's supported by account
-        // But in library mode edit, check template data too  
-        if (iosSupported || (isEditFlow && !isFullMode && hasIosContent)) {
-          if (!hasIosContent) {
-            return true;
-          }
-          return false;
-        }
-        // iOS not supported and no content in template - skip validation
-        return false;
-      }
-
-      // If no specific device, check if at least one supported device has content
-      // Users can create templates with content in Android-only, iOS-only, or both devices
-      // Even when both devices are supported, user can create template with content in just one device
-      if (androidSupported && iosSupported) {
-        // Both devices supported - user can create template with content in Android, iOS, or both
-        // Only disable if NEITHER device has content
-        if (!hasAndroidContent && !hasIosContent) {
-          return true;
-        }
-        // At least one device has content - enable Done button
-        return false;
-      }
-      if (androidSupported) {
-        // Only Android supported - require Android content
-        if (!hasAndroidContent) {
-          return true;
-        }
-        // Android has content - enable Done button
-        return false;
+  const getPreviewSection = () => {
+    const templateTitle = panes === ANDROID ? titleAndroid : titleIos;
+    const templateMsg = panes === ANDROID ? templateMessageAndroid : templateMessageIos;
+    const mediaPreview = {};
+    let ctaData = {};
+    if (panes === ANDROID) {
+      ctaData = ctaDataAndroid;
+      switch (templateMediaType) {
+        case INAPP_MEDIA_TYPES.IMAGE:
+          mediaPreview.inAppImageSrcAndroid = inAppImageSrcAndroid;
+          break;
+        default:
+          break;
       }
-      if (iosSupported) {
-        // Only iOS supported - require iOS content
-        if (!hasIosContent) {
-          return true;
-        }
-        // iOS has content - enable Done button
-        return false;
+    } else {
+      ctaData = ctaDataIos;
+      switch (templateMediaType) {
+        case INAPP_MEDIA_TYPES.IMAGE:
+          mediaPreview.inAppImageSrcIos = inAppImageSrcIos;
+          break;
+        default:
+          break;
       }
-      // Neither device supported - this shouldn't happen, but handle gracefully
-      return true;
     }
+    return (
+      <TemplatePreview
+        channel={INAPP}
+        content={{
+          inAppPreviewContent: {
+            mediaPreview,
+            templateTitle,
+            templateMsg,
+            ...((isBtnTypeCtaAndroid || isBtnTypeCTaIos) && {
+              ctaData,
+            }),
+          },
+        }}
+        inAppAccountName={accountName}
+        templateLayoutType={templateLayoutType}
+        device={panes}
+      />
+    );
+  };
 
-    // Legacy flow validation (when HTMLEditor is not enabled)
-    // Get account-level device support
-    const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-    const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
-    // If no tags are available (e.g., in tests), allow submission even with minimal content
-    // This is to support test scenarios where full content validation might not be set up
-    const hasTags = tags && tags.length > 0;
-    const isTestScenario = !hasTags;
-
-    // If no device specified, check if at least one supported device has valid content
-    if (isNoDevice) {
-      // In test scenarios, only require message content (title is optional)
-      // In production, require both title and message
-      const hasAndroidContent = androidSupported && templateMessageAndroid && templateMessageAndroid?.trim() !== '' && !templateMessageErrorAndroid && (isTestScenario || (titleAndroid && titleAndroid?.trim() !== '' && !templateTitleErrorAndroid));
-      const hasIosContent = iosSupported && templateMessageIos && templateMessageIos?.trim() !== '' && !templateMessageErrorIos && (isTestScenario || (titleIos && titleIos?.trim() !== '' && !templateTitleErrorIos));
-
-      // Check media requirements
-      const androidMediaValid = !androidSupported || (templateMediaType === INAPP_MEDIA_TYPES.TEXT || inAppImageSrcAndroid !== '');
-      const iosMediaValid = !iosSupported || (templateMediaType === INAPP_MEDIA_TYPES.TEXT || inAppImageSrcIos !== '');
-
-      // Check CTA requirements
-      const androidCtaValid = !isBtnTypeCtaAndroid || (ctaDataAndroid[0]?.isSaved);
-      const iosCtaValid = !isBtnTypeCTaIos || (ctaDataIos[0]?.isSaved);
-
-      // Check action link requirements
-      const androidActionLinkValid = !addActionLinkAndroid || deepLinkValueAndroid;
-      const iosActionLinkValid = !addActionLinkIos || deepLinkValueIos;
-
-      // If both devices are supported, at least one should have valid content
-      if (androidSupported && iosSupported) {
-        const androidValid = hasAndroidContent && androidMediaValid && androidCtaValid && androidActionLinkValid;
-        const iosValid = hasIosContent && iosMediaValid && iosCtaValid && iosActionLinkValid;
-        return !(androidValid || iosValid);
-      }
-
-      // If only Android is supported, it must have valid content
-      if (androidSupported) {
-        return !(hasAndroidContent && androidMediaValid && androidCtaValid && androidActionLinkValid);
-      }
-
-      // If only iOS is supported, it must have valid content
-      if (iosSupported) {
-        return !(hasIosContent && iosMediaValid && iosCtaValid && iosActionLinkValid);
-      }
-
-      // Neither device supported - disable
+  const isDisableDone = (device) => {
+    const isIosDevice = device === IOS;
+    const isAndroidDevice = device === ANDROID;
+    //if template name is not entered
+    if (isFullMode && templateName.trim() === '') {
       return true;
     }
-
     //if template message is not entered
     //for android
-    if (isAndroidDevice) {
-      const androidMessage = templateMessageAndroid;
-      if (androidMessage?.trim() === '' || templateMessageErrorAndroid) {
-        return true;
-      }
-    }
-    //for ios
-    if (isIosDevice) {
-      const iosMessage = templateMessageIos;
-      if (iosMessage?.trim() === '' || templateMessageErrorIos) {
-        return true;
-      }
+    if (isAndroidDevice && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+      return true;
     }
+    if (isIosDevice && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+      return true;
+    }//for ios
 
     //if template title is not entered
     //for android
-    if (isAndroidDevice && (titleAndroid?.trim() === '' || templateTitleErrorAndroid)) {
+    if (isAndroidDevice && (titleAndroid.trim() === '' || templateTitleErrorAndroid)) {
       return true;
     }
-    if (isIosDevice && (titleIos?.trim() === '' || templateTitleErrorIos)) {
+    if (isIosDevice && (titleIos.trim() === '' || templateTitleErrorIos)) {
       return true;
     }//for ios
     //if media type is image and the mediaType file is not uploaded
@@ -734,11 +603,11 @@ export const InApp = (props) => {
     switch (templateMediaType) {
       case INAPP_MEDIA_TYPES.IMAGE:
         androidMediaParams = {
-          image: getCdnUrl({ url: inAppImageSrcAndroid, channelName: INAPP }),
+          image: getCdnUrl({url: inAppImageSrcAndroid, channelName: INAPP }),
           style: BIG_PICTURE,
         };
         iosMediaParams = {
-          image: getCdnUrl({ url: inAppImageSrcIos, channelName: INAPP }),
+          image: getCdnUrl({url: inAppImageSrcIos, channelName: INAPP }),
           style: BIG_PICTURE,
         };
         break;
@@ -750,46 +619,16 @@ export const InApp = (props) => {
       sourceAccountIdentifier = "",
       id,
     } = accountObj;
-
-    // Use HTML content if HTMLEditor is enabled and it's an HTML template, otherwise use regular message
-    const androidMessage = isHTMLTemplate && htmlContentAndroid
-      ? htmlContentAndroid
-      : templateMessageAndroid;
-
-    // Determine type and style for Android
-    const androidType = isHTMLTemplate ? INAPP_MEDIA_TYPES.HTML : templateMediaType;
-    const androidExpandableStyle = isHTMLTemplate ? BIG_HTML : BIG_TEXT;
-
-    // LIBRARY MODE FIX: Backend doesn't support 'MODAL' bodyType, convert to 'POPUP'
-    const bodyTypeForBackend = templateLayoutType === INAPP_MESSAGE_LAYOUT_TYPES.MODAL ? INAPP_MESSAGE_LAYOUT_TYPES.POPUP : templateLayoutType;
-
-    // Check account-level device support
-    const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-    const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
-    // Check if devices have content (for HTML Editor)
-    const hasAndroidContent = htmlContentAndroid && htmlContentAndroid?.trim() !== '';
-    const hasIosContent = htmlContentIos && htmlContentIos?.trim() !== '';
-
-    // For HTML Editor, check if device has content and is supported
-    // For legacy editor, use isDisableDone check
-    // Only include devices that have content - allows Android-only, iOS-only, or both
-    const shouldIncludeAndroid = isHTMLTemplate
-      ? (androidSupported && hasAndroidContent)
-      : !isDisableDone(ANDROID);
-
-    // Construct Android content if device is supported and has content
-    // Even when both devices are supported, only include devices that have content
-    const androidContent = shouldIncludeAndroid ? {
+    
+    // Construct Android content if not disabled
+    const androidContent = !isDisableDone(ANDROID) ? {
       ...commonDevicePayload,
-      type: androidType,
-      // Use 'html editor template' as title for HTML editor to differentiate from BEE editor
-      title: isHTMLTemplate ? 'html editor template' : titleAndroid,
-      message: androidMessage,
+      title: titleAndroid,
+      message: templateMessageAndroid,
       bodyType: templateLayoutType,
       expandableDetails: {
-        style: androidExpandableStyle,
-        message: androidMessage,
+        style: BIG_TEXT,
+        message: templateMessageAndroid,
         ...androidMediaParams,
         ...(isBtnTypeCtaAndroid && {
           ctas: getCtaPayload(ANDROID),
@@ -797,38 +636,19 @@ export const InApp = (props) => {
       },
       custom: [],
       ...(deepLinkValueAndroid && {
-        ctas: [{ type: DEEP_LINK, actionLink: deepLinkValueAndroid }],
+        ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
       }),
     } : {};
-
-    // Use HTML content if HTMLEditor is enabled and it's an HTML template, otherwise use regular message
-    const iosMessage = isHTMLTemplate && htmlContentIos
-      ? htmlContentIos
-      : templateMessageIos;
-
-    // Determine type and style for iOS
-    const iosType = isHTMLTemplate ? INAPP_MEDIA_TYPES.HTML : templateMediaType;
-    const iosExpandableStyle = isHTMLTemplate ? BIG_HTML : BIG_TEXT;
-
-    // For HTML Editor, check if device has content and is supported
-    // For legacy editor, use isDisableDone check
-    // Only include devices that have content - allows Android-only, iOS-only, or both
-    const shouldIncludeIos = isHTMLTemplate
-      ? (iosSupported && hasIosContent)
-      : !isDisableDone(IOS);
-
-    // Construct iOS content if device is supported and has content
-    // Even when both devices are supported, only include devices that have content
-    const iosContent = shouldIncludeIos ? {
+    
+    // Construct iOS content if not disabled
+    const iosContent = !isDisableDone(IOS) ? {
       ...commonDevicePayload,
-      type: iosType,
-      // Use 'html editor template' as title for HTML editor to differentiate from BEE editor
-      title: isHTMLTemplate ? 'html editor template' : titleIos,
-      message: iosMessage,
-      bodyType: bodyTypeForBackend,
+      title: titleIos,
+      message: templateMessageIos,
+      bodyType: templateLayoutType,
       expandableDetails: {
-        style: iosExpandableStyle,
-        message: iosMessage,
+        style: BIG_TEXT,
+        message: templateMessageIos,
         ...iosMediaParams,
         ...(isBtnTypeCTaIos && {
           ctas: getCtaPayload(IOS),
@@ -836,16 +656,12 @@ export const InApp = (props) => {
       },
       custom: [],
       ...(deepLinkValueIos && {
-        ctas: [{ type: DEEP_LINK, actionLink: deepLinkValueIos }],
+        ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
       }),
     } : {};
-
-    // Ensure name is always set - use tempName as fallback if templateName is empty
-    const templateNameValue = isEditFlow ? tempName : (templateName || tempName || '');
-    const trimmedName = (templateNameValue && typeof templateNameValue === 'string') ? templateNameValue?.trim() : '';
-
+    
     const data = {
-      name: trimmedName,
+      name: templateName,
       versions: {
         base: {
           content: {
@@ -864,26 +680,28 @@ export const InApp = (props) => {
     return data;
   };
 
-  const actionCallback = ({ errorMsg }) => {
-    if (!errorMsg) {
+  const actionCallback = ({ errorMessage }) => {
+    if (!errorMessage) {
       CapNotification.success({
-        message: isEditFlow
-          ? formatMessage(messages.inAppEditNotification)
-          : formatMessage(messages.inAppCreateNotification),
+        message: isEditFlow ? formatMessage(messages.inAppEditNotification, {
+          name: templateName,
+        }) : formatMessage(messages.inAppCreateNotification, {
+          name: templateName,
+        }),
       });
       actions.clearCreateResponse();
     } else {
       CapNotification.error({
-        message: JSON.stringify(errorMsg),
+        message: JSON.stringify(errorMessage),
       });
     }
   };
 
   const onCreateInApp = () => {
     setSpin(true);
-    actions.createInAppTemplate(createPayload(), (resp, errorMsg) => {
-      actionCallback({ resp, errorMsg });
-      if (!errorMsg) {
+    actions.createInAppTemplate(createPayload(), (resp, errorMessage) => {
+      actionCallback({ resp, errorMessage });
+      if (!errorMessage) {
         onCreateComplete();
       } else {
         setSpin(false);
@@ -898,9 +716,9 @@ export const InApp = (props) => {
         ...createPayload(),
         _id: params.id,
       },
-      (resp, errorMsg) => {
-        actionCallback({ resp, errorMsg });
-        if (!errorMsg) {
+      (resp, errorMessage) => {
+        actionCallback({ resp, errorMessage });
+        if (!errorMessage) {
           onCreateComplete();
         } else {
           setSpin(false);
@@ -909,67 +727,6 @@ export const InApp = (props) => {
     );
   };
 
-  // Handle HTML content changes from HTMLEditor
-  const handleHtmlContentChange = useCallback((deviceContent, changedDevice) => {
-    // The onChange callback from useInAppContent passes the full deviceContent object
-    // But we only want to update the state for the device that actually changed
-    // Use the second parameter (changedDevice) if provided, otherwise update both
-
-    // Clear validation errors when content changes (similar to Bee Editor)
-    // This ensures Done button re-enables after user fixes errors
-    if (changedDevice) {
-      setErrorMessage((prev) => ({
-        STANDARD_ERROR_MSG: {
-          ...prev.STANDARD_ERROR_MSG,
-          [changedDevice.toUpperCase()]: [],
-          GENERIC: [],
-        },
-        LIQUID_ERROR_MSG: {
-          ...prev.LIQUID_ERROR_MSG,
-          [changedDevice.toUpperCase()]: [],
-          GENERIC: [],
-        },
-      }));
-    }
-
-    if (changedDevice) {
-      // Only update the device that actually changed
-      if (changedDevice.toUpperCase() === ANDROID && deviceContent?.android !== undefined) {
-        setHtmlContentAndroid(deviceContent.android || '');
-      } else if (changedDevice.toUpperCase() === IOS_CAPITAL && deviceContent?.ios !== undefined) {
-        setHtmlContentIos(deviceContent.ios || '');
-      }
-    } else {
-      // Fallback: update both if changedDevice not provided (for backward compatibility)
-      // Only update if value actually changed to avoid unnecessary re-renders
-      if (deviceContent?.android !== undefined) {
-        setHtmlContentAndroid(prev => {
-          const newValue = deviceContent.android || '';
-          return prev !== newValue ? newValue : prev;
-        });
-      }
-      if (deviceContent?.ios !== undefined) {
-        setHtmlContentIos(prev => {
-          const newValue = deviceContent.ios || '';
-          return prev !== newValue ? newValue : prev;
-        });
-      }
-    }
-  }, [ANDROID, IOS, setErrorMessage]);
-
-  // Handle HTML save from HTMLEditor
-  const handleHtmlSave = useCallback((deviceContent) => {
-    // Update state for both devices if present in the callback
-    if (deviceContent?.android !== undefined) {
-      setHtmlContentAndroid(deviceContent.android || '');
-    }
-    if (deviceContent?.ios !== undefined) {
-      setHtmlContentIos(deviceContent.ios || '');
-    }
-    // Auto-save can trigger this, but we don't want to submit automatically
-    // The user will click the Create/Update button to submit
-  }, []);
-
   const onDoneCallback = () => {
     if (isFullMode) {
       if (isEditFlow) {
@@ -977,17 +734,15 @@ export const InApp = (props) => {
       }
       return onCreateInApp();
     }
-    const payload = createPayload();
-    getFormData({
-      value: payload,
+    return getFormData({
+      value: createPayload(),
       _id: params && params.id,
       validity: true,
       type: INAPP,
     });
   };
 
-  // Validation middleware for tag validation (both liquid and non-liquid flow)
-  const validationMiddleWare = async () => {
+  const liquidMiddleWare = () => {
     // Set up callbacks for validation results
     const onError = ({ standardErrors, liquidErrors }) => {
       setErrorMessage((prev) => ({
@@ -1000,201 +755,45 @@ export const InApp = (props) => {
       onDoneCallback();
     };
 
-    // Skip validation if no tags are available (e.g., in tests or when tags haven't loaded)
-    const hasTags = tags && tags.length > 0;
-
-    // For liquid flow, use validateInAppContent
-    if (isLiquidFlow && hasTags) {
-      // Validate the INAPP content
-      const payload = createPayload();
-      validateInAppContent(payload, {
-        currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
-        onError,
-        onSuccess,
-        getLiquidTags: (content, callback) => globalActions.getLiquidTags(content, callback),
-        formatMessage,
-        messages: formBuilderMessages,
-        tagLookupMap: metaEntities?.tagLookupMap || {},
-        eventContextTags: metaEntities?.eventContextTags || [],
-        isLiquidFlow,
-        forwardedTags: {},
-        skipTags: (tag) => {
-          // Skip certain tags if needed
-          const skipRegexes = [
-            /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
-            /unsubscribe\(#[a-zA-Z\d]{6}\)/,
-            /Link_to_[a-zA-z]/,
-            /SURVEY.*\.TOKEN/,
-            /^[A-Za-z].*\([a-zA-Z\d]*\)/,
-          ];
-
-          return skipRegexes.some((regex) => regex.test(tag));
-        },
-        singleTab: getSingleTab(accountData),
-      });
-    } else if (hasTags) {
-      // For non-liquid flow, validate tags using validateTags (only if tags are available)
-      const androidContent = htmlContentAndroid || '';
-      const iosContent = htmlContentIos || '';
-
-      const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-      const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
-      let hasErrors = false;
-      const newErrors = {
-        STANDARD_ERROR_MSG: {
-          ANDROID: [],
-          IOS: [],
-          GENERIC: [],
-        },
-        LIQUID_ERROR_MSG: {
-          ANDROID: [],
-          IOS: [],
-          GENERIC: [],
-        },
-      };
-
-      // Validate Android content
-      if (androidSupported && androidContent && androidContent?.trim() !== '') {
-        const validationResponse = validateTags({
-          content: androidContent,
-          tagsParam: tags,
-          injectedTagsParams: injectedTags || {},
-          location,
-          tagModule: getDefaultTags,
-          eventContextTags: metaEntities?.eventContextTags || [],
-        }) || {};
-
-        if (validationResponse?.unsupportedTags?.length > 0) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.ANDROID.push(
-            formatMessage(globalMessages.unsupportedTagsValidationError, {
-              unsupportedTags: validationResponse.unsupportedTags.join(", "),
-            })
-          );
-        }
-        if (validationResponse?.isBraceError) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.ANDROID.push(
-            formatMessage(globalMessages.unbalanacedCurlyBraces)
-          );
-        }
-      }
-
-      // Validate iOS content
-      if (iosSupported && iosContent && iosContent?.trim() !== '') {
-        const validationResponse = validateTags({
-          content: iosContent,
-          tagsParam: tags,
-          injectedTagsParams: injectedTags || {},
-          location,
-          tagModule: getDefaultTags,
-          eventContextTags: metaEntities?.eventContextTags || [],
-        }) || {};
-
-        if (validationResponse?.unsupportedTags?.length > 0) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.IOS.push(
-            formatMessage(globalMessages.unsupportedTagsValidationError, {
-              unsupportedTags: validationResponse.unsupportedTags.join(", "),
-            })
-          );
-        }
-        if (validationResponse?.isBraceError) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.IOS.push(
-            formatMessage(globalMessages.unbalanacedCurlyBraces)
-          );
-        }
-      }
-
-      if (hasErrors) {
-        setErrorMessage(newErrors);
-      } else {
-        // No errors, proceed with submission
-        onSuccess();
-      }
-    } else {
-      // No tags available, skip validation and proceed directly
-      onSuccess();
-    }
+    // Validate the INAPP content
+    const payload = createPayload();
+    validateInAppContent(payload, {
+      currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
+      onError,
+      onSuccess,
+      getLiquidTags: (content, callback) => globalActions.getLiquidTags(content, callback),
+      formatMessage,
+      messages: formBuilderMessages,
+      tagLookupMap: metaEntities?.tagLookupMap || {},
+      eventContextTags: metaEntities?.eventContextTags || [],
+      isLiquidFlow,
+      forwardedTags: {},
+      skipTags: (tag) => {
+        // Skip certain tags if needed
+        const skipRegexes = [
+          /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
+          /unsubscribe\(#[a-zA-Z\d]{6}\)/,
+          /Link_to_[a-zA-z]/,
+          /SURVEY.*\.TOKEN/,
+          /^[A-Za-z].*\([a-zA-Z\d]*\)/,
+        ];
+
+        return skipRegexes.some((regex) => regex.test(tag));
+      },
+      singleTab: getSingleTab(accountData),
+    });
   };
 
   const isLiquidFlow = hasLiquidSupportFeature();
-
-  // Check template data to determine editor type (for render decision)
-  const templateDetails = isFullMode ? editData?.templateDetails : templateData;
-  const versions = templateDetails?.versions || {};
-  const templateContent = get(versions, 'base.content', {});
-  const androidContent = templateContent?.ANDROID || {};
-  const iosContent = templateContent?.IOS || {};
-
-  // Check if this is a Bee editor template
-  const isBEEeditor = get(androidContent, 'isBEEeditor') || get(iosContent, 'isBEEeditor');
-  const androidTitle = androidContent?.title || '';
-  const iosTitle = iosContent?.title || '';
-  const isBeeFreeTemplate = (!isEmpty(androidTitle) && androidTitle.toLowerCase() === 'bee free template')
-    || (!isEmpty(iosTitle) && iosTitle.toLowerCase() === 'bee free template');
-
-  // Check if this is an HTML template from content data
-  const androidType = androidContent?.type || '';
-  const androidStyle = androidContent?.expandableDetails?.style || '';
-  const iosType = iosContent?.type || '';
-  const iosStyle = iosContent?.expandableDetails?.style || '';
-  const isHTMLTemplateFromData = (androidType === INAPP_MEDIA_TYPES.HTML || androidStyle === BIG_HTML
-    || iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML)
-    && !isBEEeditor
-    && !isBeeFreeTemplate;
-
-  // Use state if available, otherwise fall back to direct data check
-  const shouldUseHTMLEditor = isHTMLTemplate || isHTMLTemplateFromData;
-
-  // Only route to Bee editor if it's explicitly a Bee editor AND not an HTML template
-  const shouldUseBeeEditor = (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
-
-  // Early returns to avoid nested ternary
-  if (isEditInApp && getTemplateDetailsInProgress) {
-    return <CapSpin spinning={getTemplateDetailsInProgress} />;
-  }
-
-  // Allow BEE editor in both full mode edit (isEditInApp) AND library mode edit (isEditFlow && !isFullMode)
-  if ((isEditInApp || (isEditFlow && !isFullMode)) && shouldUseBeeEditor) {
-
-    return (
-      <InappAdvanced
-        getFormData={getFormData}
-        setIsLoadingContent={setIsLoadingContent}
-        defaultData={{ "template-name": tempName }}
-        location={{
-          pathname: `/inapp/edit`,
-          query,
-          search: '',
-        }}
-        params={{ mode: inAppCreateMode, id: params.id }}
-        isFullMode={isFullMode}
-        isGetFormData={isGetFormData}
-        showTemplateName={showTemplateName}
-        route={{ name: "inapp" }}
-        getDefaultTags={type}
-        onValidationFail={onValidationFail}
-        templateData={templateData}
-        templateName={tempName}
-        setTemplateName={setTempName}
-        forwardedTags={forwardedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onCreateComplete={onCreateComplete}
-      />
-    );
-  }
-
   return (
     <CapSpin spinning={spin || fetchingLiquidValidation} tip={fetchingLiquidValidation ? <FormattedMessage {...formBuilderMessages.liquidSpinText} /> : ""}>
       <CapRow className="cap-inapp-creatives">
-        <CapColumn span={shouldUseHTMLEditor ? 18 : 24}>
-          {/* Creative layout type */}
-          {shouldUseHTMLEditor && (
+        <CapColumn span={14}>
+          {isFullMode && createModeContent}
+          {/* Creative layout type*/}
+          {(isFullMode || !isEditFlow) && (
             <>
-              <CapRow>
+              <CapRow className="inapp-creative-layout">
                 <CapHeading type="h4">
                   <FormattedMessage {...messages.creativeLayout} />
                 </CapHeading>
@@ -1211,63 +810,26 @@ export const InApp = (props) => {
               />
             </>
           )}
-          {shouldUseHTMLEditor ? (
-            <HTMLEditor
-              key={`inapp-html-editor-v${htmlEditorContentVersion}`}
-              variant={HTML_EDITOR_VARIANTS.INAPP}
-              layoutType={templateLayoutType}
-              initialContent={{
-                android: htmlContentAndroidRef.current || htmlContentAndroid || templateMessageAndroid || '',
-                ios: htmlContentIosRef.current || htmlContentIos || templateMessageIos || '',
-              }}
-              onContentChange={handleHtmlContentChange}
-              onSave={handleHtmlSave}
-              tags={tags}
-              injectedTags={injectedTags}
-              location={location}
-              selectedOfferDetails={selectedOfferDetails}
-              onTagSelect={() => {
-                // Tag insertion is handled by HTMLEditor's CodeEditorPane at cursor position
-                // Content updates will be propagated via onContentChange callback
-              }}
-              // Don't pass globalActions to prevent duplicate API calls
-              // HTMLEditor will use onContextChange instead
-              onContextChange={handleOnTagsContextChange}
-              // Pass validation errors to HTMLEditor for display
-              errors={errorMessage}
-              data-test="inapp-html-editor"
-              style={{ width: '138%' }}
-            />
-          ) : (
-            <InappAdvanced
-              getFormData={getFormData}
-              setIsLoadingContent={setIsLoadingContent}
-              defaultData={{ "template-name": tempName }}
-              location={{
-                pathname: `/inapp/create`,
-                query,
-                search: '',
-              }}
-              params={{ mode: inAppCreateMode }}
-              isFullMode={isFullMode}
-              isGetFormData={isGetFormData}
-              showTemplateName={showTemplateName}
-              route={{ name: "inapp" }}
-              getDefaultTags={type}
-              onValidationFail={onValidationFail}
-              templateData={templateData}
-              templateName={tempName}
-              setTemplateName={setTempName}
-              forwardedTags={forwardedTags}
-              selectedOfferDetails={selectedOfferDetails}
-              onCreateComplete={onCreateComplete}
-            />
-          )}
+          {/* device tab */}
+          <CapTab
+            panes={PANES.filter(
+              (devicePane) => devicePane?.isSupported === true
+            )}
+            onChange={(value) => {
+              setPanes(value);
+            }}
+            activeKey={panes}
+            defaultActiveKey={panes}
+            className="inapp-template-device-tab"
+          />
+          <div className="inapp-scroll-div" />
+        </CapColumn>
+        <CapColumn span={10} className="inapp-preview-container">
+          {getPreviewSection()}
         </CapColumn>
       </CapRow>
-      {/* Footer with Done/Update button - Only show for HTML editor, bee editor has its own footer */}
-      {
-        shouldUseHTMLEditor && (
+      <div className={`inapp-footer ${!isFullMode && `inapp-footer-lib`}`}>
+        {
           <>
             {hasAnyErrors(errorMessage) && (
               <ErrorInfoNote
@@ -1275,30 +837,26 @@ export const InApp = (props) => {
                 currentTab={panes}
               />
             )}
-            <div className={`inapp-footer ${!isFullMode && `inapp-footer-lib`}`}>
-              <CapButton
-                onClick={validationMiddleWare}
-                disabled={shouldUseHTMLEditor ? isDisableDone(null) : isDisableDone(panes)}
-                className="inapp-create-btn"
-              >
-                {(() => {
-                  if (isEditFlow) {
-                    return isFullMode ? (
-                      <FormattedMessage {...messages.update} />
-                    ) : (
-                      <FormattedMessage {...globalMessages.done} />
-                    );
-                  }
-                  return isFullMode ? (
-                    <FormattedMessage {...messages.create} />
-                  ) : (
-                    <FormattedMessage {...globalMessages.done} />
-                  );
-                })()}
-              </CapButton>
-            </div>
+            <CapButton
+              onClick={isLiquidFlow ? liquidMiddleWare : onDoneCallback}
+              disabled={isDisableDone(panes)}
+              className="inapp-create-btn"
+            >
+              {isEditFlow ? (
+                isFullMode ? (
+                  <FormattedMessage {...messages.update} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
+              ) : isFullMode ? (
+                <FormattedMessage {...messages.create} />
+              ) : (
+                <FormattedMessage {...globalMessages.done} />
+              )}
+            </CapButton>
           </>
-        )}
+        }
+      </div>
     </CapSpin>
   );
 };
@@ -1310,8 +868,7 @@ const mapStateToProps = createStructuredSelector({
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
   currentOrgDetails: selectCurrentOrgDetails(),
-  fetchingLiquidValidation: selectLiquidStateDetails(),
-  getTemplateDetailsInProgress: makeSelectGetTemplateDetailsInProgress(),
+  fetchingLiquidValidation: selectLiquidStateDetails()
 });
 
 const mapDispatchToProps = (dispatch) => ({