@capillarytech/creatives-library 8.0.302 → 8.0.304

package/constants/unified.js

@@ -45,7 +45,6 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
-export const ENABLE_NEW_EDITOR_FLOW_INAPP = 'ENABLE_NEW_EDITOR_FLOW_INAPP';
 export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';

package/package.json

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

package/utils/common.js

@@ -24,8 +24,7 @@ import {
   ENABLE_WEBPUSH,
   LIQUID_SUPPORT,
   SUPPORT_CK_EDITOR,
-  ENABLE_NEW_MPUSH,
-  ENABLE_NEW_EDITOR_FLOW_INAPP
+  ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -143,11 +142,6 @@ export const hasNewMobilePushFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_NEW_MPUSH,
 );
 
-export const hasNewEditorFlowInAppEnabled = Auth.hasFeatureAccess.bind(
-  null,
-  ENABLE_NEW_EDITOR_FLOW_INAPP,
-);
-
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/v2Components/CapDeviceContent/index.js

@@ -63,7 +63,6 @@ const CapDeviceContent = (props) => {
     deepLinkValue,
     setDeepLinkValue,
     onCopyTitleAndContent,
-    isOtherDeviceSupported,
     tags,
     onTagSelect,
     handleOnTagsContextChange,
@@ -168,15 +167,13 @@ const CapDeviceContent = (props) => {
   return (
     <>
       <CapRow className="creatives-device-content">
-        {isOtherDeviceSupported && (
-          <CapLink
-            title={isAndroid
-              ? formatMessage(messages.copyContentFromIOS)
-              : formatMessage(messages.copyCotentFromAndroid)}
-            className="inapp-copy-content"
-            onClick={onCopyTitleAndContent}
-          />
-        )}
+        <CapLink
+          title={isAndroid
+            ? formatMessage(messages.copyContentFromIOS)
+            : formatMessage(messages.copyCotentFromAndroid)}
+          className="inapp-copy-content"
+          onClick={onCopyTitleAndContent}
+        />
         <CapRow className="creatives-inapp-title">
           <CapColumn
             className="inapp-content-main"

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -214,9 +214,6 @@
 }
 
 .common-test-and-preview-slidebox {
-  .common-test-preview-modal-wrap {
-    z-index: 10003;
-  }
 
   .ant-modal-mask,
   .ant-modal-wrap {

package/v2Containers/BeePopupEditor/index.js

@@ -40,11 +40,6 @@ function BeePopupEditor(props) {
   const savedCallback = useRef();
   const beeInstanceRef = useRef(null);
   const isInitializedRef = useRef(false);
-  const beeJsonRef = useRef(beeJson);
-
-  useEffect(() => {
-    beeJsonRef.current = beeJson;
-  }, [beeJson]);
 
   const [visibleTaglist, setVisibleTaglist] = useState(false);
   const [selectedTag, setSelectedTag] = useState({});
@@ -116,10 +111,8 @@ function BeePopupEditor(props) {
     window.BeePlugin.create(tokenData, beeConfig, (instance) => {
       beePluginInstance = instance;
       beeInstanceRef.current = instance;
-      // Use ref to get the latest beeJson — the closure captures the value at effect time,
-      // but beeJsonRef.current is always up-to-date (e.g. when template data loads async)
-      const latestBeeJson = beeJsonRef.current;
-      const parseJson = typeof latestBeeJson === 'string' ? JSON.parse(latestBeeJson) : latestBeeJson;
+      // Check if beeJson is already an object (happens when layout type changes)
+      const parseJson = typeof beeJson === 'string' ? JSON.parse(beeJson) : beeJson;
       beePluginInstance.start(parseJson);
       saveBeeInstance(beePluginInstance, device);
       isInitializedRef.current = true;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -1078,38 +1078,8 @@ export function SlideBoxContent(props) {
       )}
 
       {isCreateInApp && (
-  (isFullMode && !commonUtil.hasNewEditorFlowInAppEnabled()) ||
-  (!isFullMode && isLoyaltyModule) ||
-  (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewEditorFlowInAppEnabled()) ? (
-    <InApp
-      key="creatives-inapp-create"
-      location={{ pathname: '/inapp/create', query, search: '' }}
-      setIsLoadingContent={setIsLoadingContent}
-      isGetFormData={isGetFormData}
-      getFormData={getFormData}
-      getDefaultTags={type}
-      isFullMode={isFullMode}
-      templateData={templateData}
-      cap={cap}
-      showTemplateName={showTemplateName}
-      showLiquidErrorInFooter={showLiquidErrorInFooter}
-      onValidationFail={onValidationFail}
-      forwardedTags={forwardedTags}
-      selectedOfferDetails={selectedOfferDetails}
-      onPreviewContentClicked={onPreviewContentClicked}
-      onTestContentClicked={onTestContentClicked}
-      eventContextTags={eventContextTags}
-      onCreateComplete={onCreateComplete}
-      handleClose={handleClose}
-      moduleType={moduleType}
-      showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-      handleTestAndPreview={handleTestAndPreview}
-      handleCloseTestAndPreview={handleCloseTestAndPreview}
-      isTestAndPreviewMode={isTestAndPreviewMode}
-    />
-  ) : (
-    <InAppWrapper
-      key="creatives-inapp-wrapper"
+        <InAppWrapper
+          key="creatives-inapp-wrapper"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
           onInAppEditorTypeChange={onInAppEditorTypeChange}
@@ -1144,12 +1114,10 @@ export function SlideBoxContent(props) {
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
       />
-      )
       )}
-  
+
       {isEditInApp && (<InApp
         isFullMode={isFullMode}
-        isLoyaltyModule={isLoyaltyModule}
         templateData={templateData}
         getFormData={getFormData}
         getDefaultTags={type}

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+
 import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 import { templateDetailsImage, templateDetailsVideo, templateDetailsText, templateDetails_ } from '../../Viber/tests/mockData';
@@ -41,15 +42,6 @@ jest.mock('../../WebPush', () => ({
   ),
 }));
 
-jest.mock('v2Containers/InApp', () => () => <div data-test="inapp" />);
-jest.mock('v2Containers/InAppWrapper', () => () => <div data-test="inapp-wrapper" />);
-
-jest.mock('../../../utils/commonUtils', () => ({
-  hasNewEditorFlowInAppEnabled: jest.fn(),
-}));
-
-import commonUtil from '../../../utils/commonUtils';
-
 describe('Test SlideBoxContent container', () => {
   const onCreateComplete = jest.fn();
   let renderedComponent;
@@ -918,64 +910,4 @@ describe('Test SlideBoxContent container', () => {
       expect(renderedComponent).toMatchSnapshot();
     });
   });
-
-  describe('InApp vs InAppWrapper rendering conditions', () => {
-
-    beforeEach(() => {
-      jest.clearAllMocks();
-    });
-
-    it('renders InAppWrapper when isFullMode=true and new editor disabled', () => {
-      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(false);
-
-      renderFunction(
-        'INAPP',
-        'createTemplate',
-        { mode: 'create' },
-        { isFullMode: true, isLoyaltyModule: false }
-      );
-
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('renders InApp when isFullMode=false and loyalty module enabled', () => {
-      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(false);
-
-      renderFunction(
-        'INAPP',
-        'createTemplate',
-        { mode: 'create' },
-        { isFullMode: false, isLoyaltyModule: true }
-      );
-
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('renders InApp when not full mode, not loyalty and new editor disabled', () => {
-      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(false);
-
-      renderFunction(
-        'INAPP',
-        'createTemplate',
-        { mode: 'create' },
-        { isFullMode: false, isLoyaltyModule: false }
-      );
-
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('renders InAppWrapper when full mode and new editor enabled', () => {
-      commonUtil.hasNewEditorFlowInAppEnabled.mockReturnValue(true);
-
-      renderFunction(
-        'INAPP',
-        'createTemplate',
-        { mode: 'create' },
-        { isFullMode: true, isLoyaltyModule: false }
-      );
-
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-  });
 });

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -202,114 +202,6 @@ exports[`Test SlideBoxContent container Email component isTestAndPreviewMode IIF
 </SlideBoxContent__CreativesWrapper>
 `;
 
-exports[`Test SlideBoxContent container InApp vs InAppWrapper rendering conditions renders InApp when isFullMode=false and loyalty module enabled 1`] = `
-<SlideBoxContent__CreativesWrapper>
-  <Component
-    getDefaultTags=""
-    isFullMode={false}
-    key="creatives-inapp-create"
-    location={
-      Object {
-        "pathname": "/inapp/create",
-        "query": Object {
-          "isEditFromCampaigns": undefined,
-          "module": "library",
-          "type": "embedded",
-        },
-        "search": "",
-      }
-    }
-    onCreateComplete={[MockFunction]}
-    templateData={
-      Object {
-        "mode": "create",
-      }
-    }
-  />
-</SlideBoxContent__CreativesWrapper>
-`;
-
-exports[`Test SlideBoxContent container InApp vs InAppWrapper rendering conditions renders InApp when not full mode, not loyalty and new editor disabled 1`] = `
-<SlideBoxContent__CreativesWrapper>
-  <Component
-    getDefaultTags=""
-    isFullMode={false}
-    key="creatives-inapp-create"
-    location={
-      Object {
-        "pathname": "/inapp/create",
-        "query": Object {
-          "isEditFromCampaigns": undefined,
-          "module": "library",
-          "type": "embedded",
-        },
-        "search": "",
-      }
-    }
-    onCreateComplete={[MockFunction]}
-    templateData={
-      Object {
-        "mode": "create",
-      }
-    }
-  />
-</SlideBoxContent__CreativesWrapper>
-`;
-
-exports[`Test SlideBoxContent container InApp vs InAppWrapper rendering conditions renders InAppWrapper when full mode and new editor enabled 1`] = `
-<SlideBoxContent__CreativesWrapper>
-  <Component
-    getDefaultTags=""
-    isFullMode={true}
-    key="creatives-inapp-create"
-    location={
-      Object {
-        "pathname": "/inapp/create",
-        "query": Object {
-          "isEditFromCampaigns": undefined,
-          "module": "default",
-          "type": false,
-        },
-        "search": "",
-      }
-    }
-    onCreateComplete={[MockFunction]}
-    templateData={
-      Object {
-        "mode": "create",
-      }
-    }
-  />
-</SlideBoxContent__CreativesWrapper>
-`;
-
-exports[`Test SlideBoxContent container InApp vs InAppWrapper rendering conditions renders InAppWrapper when isFullMode=true and new editor disabled 1`] = `
-<SlideBoxContent__CreativesWrapper>
-  <Component
-    getDefaultTags=""
-    isFullMode={true}
-    key="creatives-inapp-create"
-    location={
-      Object {
-        "pathname": "/inapp/create",
-        "query": Object {
-          "isEditFromCampaigns": undefined,
-          "module": "default",
-          "type": false,
-        },
-        "search": "",
-      }
-    }
-    onCreateComplete={[MockFunction]}
-    templateData={
-      Object {
-        "mode": "create",
-      }
-    }
-  />
-</SlideBoxContent__CreativesWrapper>
-`;
-
 exports[`Test SlideBoxContent container Should handle isTestAndPreviewMode IIFE implementation correctly 1`] = `
 <SlideBoxContent__CreativesWrapper>
   <ForwardRef
@@ -1211,26 +1103,17 @@ exports[`Test SlideBoxContent container Should render correct component for what
 
 exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 2`] = `
 <SlideBoxContent__CreativesWrapper>
-  <Component
+  <Connect(Connect(UserIsAuthenticated(InjectIntl(CreativesCommon))))
+    date={0}
     getDefaultTags=""
-    key="creatives-inapp-create"
-    location={
-      Object {
-        "pathname": "/inapp/create",
-        "query": Object {
-          "isEditFromCampaigns": undefined,
-          "module": "library",
-          "type": "embedded",
-        },
-        "search": "",
-      }
-    }
+    key="creatives-inapp-wrapper"
     onCreateComplete={[MockFunction]}
     templateData={
       Object {
         "mode": "create",
       }
     }
+    type=""
   />
 </SlideBoxContent__CreativesWrapper>
 `;

package/v2Containers/InApp/__tests__/InAppHTMLEditor.test.js

@@ -39,58 +39,33 @@ jest.mock('../../../utils/common', () => ({
 // Mock HTMLEditor component - must be before imports
 jest.mock('../../../v2Components/HtmlEditor', () => {
   const React = require('react');
-
-  const MockHTMLEditor = function MockHTMLEditor({
-    variant,
-    initialContent,
-    onContentChange,
-    onSave,
-    'data-test': dataTest,
-  }) {
-    return React.createElement(
-      'div',
-      { 'data-testid': dataTest || 'inapp-html-editor' },
+  const MockHTMLEditor = function MockHTMLEditor({ variant, initialContent, onContentChange, onSave, 'data-test': dataTest }) {
+    return React.createElement('div', { 'data-testid': dataTest || 'html-editor' },
       React.createElement('div', { 'data-testid': 'html-editor-variant' }, variant),
-      React.createElement(
-        'div',
-        { 'data-testid': 'html-editor-initial-android' },
-        initialContent?.android || ''
-      ),
-      React.createElement(
-        'div',
-        { 'data-testid': 'html-editor-initial-ios' },
-        initialContent?.ios || ''
-      ),
-      React.createElement(
-        'button',
-        {
-          'data-testid': 'html-editor-change-button',
-          onClick: () => {
-            if (onContentChange) {
-              onContentChange({
-                android: '<p>Updated Android HTML</p>',
-                ios: '<p>Updated iOS HTML</p>',
-              });
-            }
-          },
-        },
-        'Simulate Content Change'
-      ),
-      React.createElement(
-        'button',
-        {
-          'data-testid': 'html-editor-save-button',
-          onClick: () => {
-            if (onSave) {
-              onSave({
-                android: '<p>Saved Android HTML</p>',
-                ios: '<p>Saved iOS HTML</p>',
-              });
-            }
-          },
-        },
-        'Simulate Save'
-      )
+      React.createElement('div', { 'data-testid': 'html-editor-initial-android' }, initialContent?.android || ''),
+      React.createElement('div', { 'data-testid': 'html-editor-initial-ios' }, initialContent?.ios || ''),
+      React.createElement('button', {
+        'data-testid': 'html-editor-change-button',
+        onClick: () => {
+          if (onContentChange) {
+            onContentChange({
+              android: '<p>Updated Android HTML</p>',
+              ios: '<p>Updated iOS HTML</p>',
+            });
+          }
+        }
+      }, 'Simulate Content Change'),
+      React.createElement('button', {
+        'data-testid': 'html-editor-save-button',
+        onClick: () => {
+          if (onSave) {
+            onSave({
+              android: '<p>Saved Android HTML</p>',
+              ios: '<p>Saved iOS HTML</p>',
+            });
+          }
+        }
+      }, 'Simulate Save')
     );
   };
   MockHTMLEditor.displayName = 'MockHTMLEditor';
@@ -100,25 +75,22 @@ jest.mock('../../../v2Components/HtmlEditor', () => {
   };
 });
 
-/**
- * Mock CapDeviceContent to ensure HTMLEditor renders
- */
-jest.mock('../../../v2Components/CapDeviceContent', () => {
-  const React = require('react');
-  const HTMLEditor = require('../../../v2Components/HtmlEditor').default;
+import React from 'react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
+import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import { InApp } from '../index';
+import { INAPP_EDITOR_TYPES } from '../../InAppWrapper/constants';
 
+
+// Mock other dependencies
+jest.mock('../../../v2Components/CapDeviceContent', () => {
   return function MockCapDeviceContent() {
-    return (
-      <div data-testid="cap-device-content">
-        <HTMLEditor
-          variant="inapp"
-          initialContent={{ android: '', ios: '' }}
-          onContentChange={jest.fn()}
-          onSave={jest.fn()}
-          data-test="inapp-html-editor"
-        />
-      </div>
-    );
+    return <div data-testid="cap-device-content">Device Content</div>;
   };
 });
 
@@ -128,20 +100,7 @@ jest.mock('../../../v2Components/TemplatePreview', () => {
   };
 });
 
-import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
-
-import history from '../../../utils/history';
-import { initialReducer } from '../../../initialReducer';
-import { InApp } from '../index';
-import { INAPP_EDITOR_TYPES } from '../../InAppWrapper/constants';
-
 let store;
-
 beforeAll(() => {
   store = configureStore({}, initialReducer, history);
 });
@@ -176,6 +135,8 @@ const defaultProps = {
       configs: {
         android: '1',
         ios: '1',
+        accessToken: 'test-token',
+        deeplink: '{}',
       },
     },
   },
@@ -184,6 +145,7 @@ const defaultProps = {
     query: {},
     search: '',
   },
+  getDefaultTags: null,
   supportedTags: [],
   metaEntities: {
     tags: {
@@ -196,11 +158,26 @@ const defaultProps = {
   currentOrgDetails: {
     accessibleFeatures: [],
   },
+  fetchingLiquidValidation: false,
+  getTemplateDetailsInProgress: false,
+  isEditInApp: false,
+};
+
+// Create stable defaultData objects outside renderComponent to avoid reference changes
+const createStableDefaultData = (editorType) => {
+  if (!editorType) return {};
+  return { 'editor-type': editorType };
 };
 
 const renderComponent = (props = {}) => {
   const mergedProps = { ...defaultProps, ...props };
-
+  // Ensure defaultData is always an object and stable
+  if (!mergedProps.defaultData) {
+    mergedProps.defaultData = {};
+  } else if (mergedProps.defaultData['editor-type']) {
+    // Create a stable reference for defaultData
+    mergedProps.defaultData = createStableDefaultData(mergedProps.defaultData['editor-type']);
+  }
   return render(
     <Provider store={store}>
       <IntlProvider locale="en" messages={{}}>
@@ -218,33 +195,36 @@ describe('InApp HTMLEditor Integration', () => {
   describe('Template Name Editing', () => {
     test('should not truncate template name when editing', async () => {
       const showTemplateNameMock = jest.fn();
-
       renderComponent({
-        defaultData: {
-          'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR,
-          'template-name': 'abcd',
-        },
+        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR, 'template-name': 'abcd' },
         showTemplateName: showTemplateNameMock,
       });
 
-      const editor = await screen.findByTestId('inapp-html-editor');
-      expect(editor).toBeInTheDocument();
+      // Wait for HTML editor to render
+      await waitFor(() => {
+        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
+      });
+
+      // Verify showTemplateName was called with the template name
+      // The template name input is handled by the wrapper, not the InApp component
+      // So we verify that the callback was set up correctly
       expect(showTemplateNameMock).toBeDefined();
     });
 
     test('should preserve template name when showTemplateName callback is provided', async () => {
       const showTemplateNameMock = jest.fn();
-
       renderComponent({
-        defaultData: {
-          'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR,
-          'template-name': 'test',
-        },
+        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR, 'template-name': 'test' },
         showTemplateName: showTemplateNameMock,
       });
 
-      const editor = await screen.findByTestId('inapp-html-editor');
-      expect(editor).toBeInTheDocument();
+      // Wait for HTML editor to render
+      await waitFor(() => {
+        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
+      });
+
+      // Verify the component renders correctly with template name
+      // The template name is managed by the wrapper component
       expect(showTemplateNameMock).toBeDefined();
     });
   });
@@ -252,7 +232,40 @@ describe('InApp HTMLEditor Integration', () => {
   describe('TAG API Calls', () => {
     test('should only make one TAG API call when HTML Editor is used', async () => {
       const fetchSchemaForEntityMock = jest.fn();
+      
+      renderComponent({
+        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
+        globalActions: {
+          ...defaultProps.globalActions,
+          fetchSchemaForEntity: fetchSchemaForEntityMock,
+        },
+      });
+
+      // Wait for component to mount and initialize
+      await waitFor(() => {
+        // Component should be rendered
+        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
+      });
 
+      // Wait a bit for all useEffects to complete
+      await waitFor(() => {
+        // After isHTMLTemplate is set to true, fetchSchemaForEntity should not be called again
+        // The initial call might happen before isHTMLTemplate is set, but subsequent calls should not happen
+        // For HTML Editor, tags should only be fetched via handleOnTagsContextChange
+      }, { timeout: 1000 });
+
+      // For HTML Editor, fetchSchemaForEntity should not be called after isHTMLTemplate is set
+      // (It might be called once initially before isHTMLTemplate is set, but that's acceptable)
+      // The key is that it's not called multiple times
+      const callCount = fetchSchemaForEntityMock.mock.calls.length;
+      // Allow 0 or 1 calls (1 if it was called before isHTMLTemplate was set)
+      expect(callCount).toBeLessThanOrEqual(1);
+    });
+
+    test('should make TAG API call only once when handleOnTagsContextChange is called', async () => {
+      const fetchSchemaForEntityMock = jest.fn();
+      
+      // We need to access the handler, but since it's internal, we'll test via HTMLEditor's onContextChange
       renderComponent({
         defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
         globalActions: {
@@ -261,8 +274,19 @@ describe('InApp HTMLEditor Integration', () => {
         },
       });
 
-      await screen.findByTestId('inapp-html-editor');
+      await waitFor(() => {
+        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
+      });
+
+      // Wait a bit for all useEffects to complete
+      await waitFor(() => {
+        // After isHTMLTemplate is set to true, fetchSchemaForEntity should not be called again
+      }, { timeout: 1000 });
 
+      // Simulate context change from HTMLEditor (which would call onContextChange)
+      // Since we can't directly access the handler, we verify the behavior
+      // by checking that fetchSchemaForEntity is not called multiple times
+      // (It might be called once initially before isHTMLTemplate is set, but that's acceptable)
       const callCount = fetchSchemaForEntityMock.mock.calls.length;
       expect(callCount).toBeLessThanOrEqual(1);
     });
@@ -274,37 +298,45 @@ describe('InApp HTMLEditor Integration', () => {
         defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
       });
 
-      await screen.findByTestId('inapp-html-editor');
+      await waitFor(() => {
+        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
+      });
 
+      // Simulate content being added
       const changeButton = screen.getByTestId('html-editor-change-button');
-
       act(() => {
         fireEvent.click(changeButton);
       });
 
+      // Get the layout radio buttons
       const layoutRadios = container.querySelectorAll('input[type="radio"]');
+      expect(layoutRadios.length).toBeGreaterThan(0);
 
+      // Change layout type
       if (layoutRadios.length > 1) {
         act(() => {
-          fireEvent.change(layoutRadios[1], {
-            target: { value: 'HEADER' },
-          });
+          fireEvent.change(layoutRadios[1], { target: { value: 'HEADER' } });
         });
 
-        const editor = await screen.findByTestId('inapp-html-editor');
-        expect(editor).toBeInTheDocument();
+        // Content should still be present in the editor
+        // The HTMLEditor should preserve content via initialContent prop
+        await waitFor(() => {
+          const editor = screen.getByTestId('inapp-html-editor');
+          expect(editor).toBeInTheDocument();
+        });
       }
     });
   });
 
   describe('Layout Labels', () => {
     test('should use correct layout labels in constants', () => {
-      const { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES } =
-        require('../constants');
-
+      const { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES } = require('../constants');
+      
+      // Verify that HEADER maps to Top banner
       expect(INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER).toBe('HEADER');
       expect(INAPP_LAYOUT_DETAILS.HEADER).toBeDefined();
-
+      
+      // Verify that FOOTER maps to Bottom banner
       expect(INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER).toBe('FOOTER');
       expect(INAPP_LAYOUT_DETAILS.FOOTER).toBeDefined();
     });
@@ -314,16 +346,29 @@ describe('InApp HTMLEditor Integration', () => {
     test('should allow creating template with Android-only content when both devices supported', async () => {
       renderComponent({
         defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
+        accountData: {
+          selectedWeChatAccount: {
+            ...defaultProps.accountData.selectedWeChatAccount,
+            configs: {
+              android: '1',
+              ios: '1',
+            },
+          },
+        },
       });
 
-      await screen.findByTestId('inapp-html-editor');
+      await waitFor(() => {
+        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
+      });
 
+      // Simulate adding content only for Android
       const changeButton = screen.getByTestId('html-editor-change-button');
-
       act(() => {
         fireEvent.click(changeButton);
       });
 
+      // Done button should be enabled (not disabled)
+      // We can't directly test isDisableDone, but we can verify the component renders
       expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
     });
   });

package/v2Containers/InApp/index.js

@@ -14,8 +14,6 @@ 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 CapNotification from "@capillarytech/cap-ui-library/CapNotification";
-import CapTab from "@capillarytech/cap-ui-library/CapTab";
-import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import { makeSelectInApp, makeSelectAccount, makeSelectGetTemplateDetailsInProgress } from "./selectors";
 import * as globalActions from '../Cap/actions';
 import {
@@ -54,20 +52,18 @@ import {
   IOS_CAPITAL,
 } from "./constants";
 import { INAPP, SMS } from "../CreativesContainer/constants";
-import { AI_CONTENT_BOT_DISABLED } from "../../constants/unified";
 import {
   ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
 } from "../Whatsapp/constants";
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
 import { validateInAppContent } from "../../utils/commonUtils";
-import { hasLiquidSupportFeature, hasNewEditorFlowInAppEnabled } from "../../utils/common";
+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 CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
 
 let editContent = {};
@@ -78,7 +74,6 @@ export const InApp = (props) => {
     actions,
     globalActions,
     isFullMode,
-    isLoyaltyModule,
     onCreateComplete,
     params,
     templateData = {},
@@ -883,7 +878,7 @@ export const InApp = (props) => {
       // Use 'html editor template' as title for HTML editor to differentiate from BEE editor
       title: isHTMLTemplate ? 'html editor template' : titleAndroid,
       message: androidMessage,
-      bodyType: bodyTypeForBackend,
+      bodyType: templateLayoutType,
       expandableDetails: {
         style: androidExpandableStyle,
         message: androidMessage,
@@ -1245,13 +1240,11 @@ export const InApp = (props) => {
     && !isBEEeditor
     && !isBeeFreeTemplate;
 
-  const isNewEditorFlowEnabled = !isLoyaltyModule && hasNewEditorFlowInAppEnabled();
-
   // Use state if available, otherwise fall back to direct data check
-  const shouldUseHTMLEditor = isNewEditorFlowEnabled && (isHTMLTemplate || isHTMLTemplateFromData);
+  const shouldUseHTMLEditor = isHTMLTemplate || isHTMLTemplateFromData;
 
   // Only route to Bee editor if it's explicitly a Bee editor AND not an HTML template
-  const shouldUseBeeEditor = isNewEditorFlowEnabled && (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
+  const shouldUseBeeEditor = (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
 
   // Early returns to avoid nested ternary
   if (isEditInApp && getTemplateDetailsInProgress) {
@@ -1287,157 +1280,10 @@ export const InApp = (props) => {
     );
   }
 
-  // ── Old-flow helpers (used by CapDeviceContent when flag is disabled) ──────
-  const isAiContentBotDisabled = currentOrgDetails?.accessibleFeatures?.includes(AI_CONTENT_BOT_DISABLED);
-
-  const templateDescErrorHandler = (value) => {
-    const { unsupportedTags, isBraceError } = validateTags({
-      content: value,
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-      isFullMode,
-    }) || {};
-    if (unsupportedTags?.length > 0) {
-      return formatMessage(globalMessages.unsupportedTagsValidationError, { unsupportedTags });
-    }
-    if (isBraceError) {
-      return formatMessage(globalMessages.braceValidationError);
-    }
-    return '';
-  };
-
-  const onCopyTitleAndContent = () => {
-    if (panes === ANDROID) {
-      setTitleAndroid(titleIos);
-      setTemplateMessageAndroid(templateMessageIos);
-      setInAppImageSrcAndroid(inAppImageSrcIos);
-    } else {
-      setTitleIos(titleAndroid);
-      setTemplateMessageIos(templateMessageAndroid);
-      setInAppImageSrcIos(inAppImageSrcAndroid);
-    }
-  };
-
-  const onTagSelect = (value, index) => {
-    const tag = `{{${value}}}`;
-    if (panes === ANDROID) {
-      if (index === 0) setTitleAndroid((prev) => prev + tag);
-      else setTemplateMessageAndroid((prev) => prev + tag);
-    } else if (index === 0) {
-      setTitleIos((prev) => prev + tag);
-    } else {
-      setTemplateMessageIos((prev) => prev + tag);
-    }
-  };
-
-  // Device support flags (same derivation as InappAdvance)
-  const isAndroidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-  const isIosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
-  // CapDeviceContent tab panes (old flow)
-  const DEVICE_PANES = [
-    {
-      content: (
-        <CapDeviceContent
-          panes={ANDROID}
-          actions={actions}
-          editData={editData}
-          isFullMode={isFullMode}
-          inAppImageSrc={inAppImageSrcAndroid}
-          setInAppImageSrc={setInAppImageSrcAndroid}
-          isEditFlow={isEditFlow}
-          ctaData={ctaDataAndroid}
-          setCtaData={setCtaDataAndroid}
-          buttonType={buttonTypeAndroid}
-          setButtonType={setButtonTypeAndroid}
-          templateMediaType={templateMediaType}
-          setTemplateMediaType={setTemplateMediaType}
-          title={titleAndroid}
-          setTitle={setTitleAndroid}
-          templateMessageError={templateMessageErrorAndroid}
-          templateMessage={templateMessageAndroid}
-          setTemplateMessage={setTemplateMessageAndroid}
-          setTemplateMessageError={setTemplateMessageErrorAndroid}
-          addActionLink={addActionLinkAndroid}
-          setAddActionLink={setAddActionLinkAndroid}
-          deepLink={deepLink}
-          deepLinkValue={deepLinkValueAndroid}
-          setDeepLinkValue={setDeepLinkValueAndroid}
-          onCopyTitleAndContent={onCopyTitleAndContent}
-          isOtherDeviceSupported={isIosSupported}
-          tags={tags}
-          onTagSelect={onTagSelect}
-          handleOnTagsContextChange={handleOnTagsContextChange}
-          templateDescErrorHandler={templateDescErrorHandler}
-          templateTitleError={templateTitleErrorAndroid}
-          setTemplateTitleError={setTemplateTitleErrorAndroid}
-          isAiContentBotDisabled={isAiContentBotDisabled}
-          injectedTags={injectedTags}
-          selectedOfferDetails={selectedOfferDetails}
-          location={location}
-        />
-      ),
-      tab: <FormattedMessage {...messages.Android} />,
-      key: ANDROID,
-      isSupported: isAndroidSupported,
-    },
-    {
-      content: (
-        <CapDeviceContent
-          panes={IOS}
-          actions={actions}
-          editData={editData}
-          isFullMode={isFullMode}
-          inAppImageSrc={inAppImageSrcIos}
-          setInAppImageSrc={setInAppImageSrcIos}
-          isEditFlow={isEditFlow}
-          ctaData={ctaDataIos}
-          setCtaData={setCtaDataIos}
-          buttonType={buttonTypeIos}
-          setButtonType={setButtonTypeIos}
-          templateMediaType={templateMediaType}
-          setTemplateMediaType={setTemplateMediaType}
-          title={titleIos}
-          setTitle={setTitleIos}
-          templateMessageError={templateMessageErrorIos}
-          templateMessage={templateMessageIos}
-          setTemplateMessage={setTemplateMessageIos}
-          setTemplateMessageError={setTemplateMessageErrorIos}
-          addActionLink={addActionLinkIos}
-          setAddActionLink={setAddActionLinkIos}
-          deepLink={deepLink}
-          deepLinkValue={deepLinkValueIos}
-          setDeepLinkValue={setDeepLinkValueIos}
-          onCopyTitleAndContent={onCopyTitleAndContent}
-          isOtherDeviceSupported={isAndroidSupported}
-          tags={tags}
-          onTagSelect={onTagSelect}
-          handleOnTagsContextChange={handleOnTagsContextChange}
-          templateDescErrorHandler={templateDescErrorHandler}
-          templateTitleError={templateTitleErrorIos}
-          setTemplateTitleError={setTemplateTitleErrorIos}
-          isAiContentBotDisabled={isAiContentBotDisabled}
-          injectedTags={injectedTags}
-          selectedOfferDetails={selectedOfferDetails}
-          location={location}
-        />
-      ),
-      tab: <FormattedMessage {...messages.Ios} />,
-      key: IOS,
-      isSupported: isIosSupported,
-    },
-  ];
-  // ─────────────────────────────────────────────────────────────────────────
-
-  // Calculate column span: HTML editor = 18, everything else = 24
-  const editorColumnSpan = shouldUseHTMLEditor ? 18 : 24;
-
   return (
     <CapSpin spinning={spin || fetchingLiquidValidation} tip={fetchingLiquidValidation ? <FormattedMessage {...formBuilderMessages.liquidSpinText} /> : ""}>
       <CapRow className="cap-inapp-creatives">
-        <CapColumn span={editorColumnSpan}>
+        <CapColumn span={shouldUseHTMLEditor ? 18 : 24}>
           {/* Creative layout type */}
           {shouldUseHTMLEditor && (
             <>
@@ -1458,7 +1304,7 @@ export const InApp = (props) => {
               />
             </>
           )}
-          {shouldUseHTMLEditor && (
+          {shouldUseHTMLEditor ? (
             <HTMLEditor
               key={`inapp-html-editor-v${htmlEditorContentVersion}`}
               variant={HTML_EDITOR_VARIANTS.INAPP}
@@ -1474,16 +1320,19 @@ export const InApp = (props) => {
               location={location}
               selectedOfferDetails={selectedOfferDetails}
               onTagSelect={() => {
-                // Tag insertion handled by HTMLEditor's CodeEditorPane at cursor position
+                // 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}
               isFullMode={isFullMode}
               data-test="inapp-html-editor"
               style={{ width: '138%' }}
             />
-          )}
-          {!shouldUseHTMLEditor && isNewEditorFlowEnabled && (
+          ) : (
             <InappAdvanced
               getFormData={getFormData}
               setIsLoadingContent={setIsLoadingContent}
@@ -1508,29 +1357,11 @@ export const InApp = (props) => {
               onCreateComplete={onCreateComplete}
             />
           )}
-          {!shouldUseHTMLEditor && !isNewEditorFlowEnabled && (
-            <>
-              <CapInput
-                label={<FormattedMessage {...messages.creativeName} />}
-                onChange={({ target: { value } }) => setTempName(value)}
-                value={tempName}
-                labelPosition="top"
-                size="default"
-              />
-              <CapTab
-                panes={DEVICE_PANES.filter((devicePane) => devicePane?.isSupported === true)}
-                onChange={(value) => setPanes(value)}
-                activeKey={panes}
-                defaultActiveKey={panes}
-                className="inapp-template-device-tab"
-              />
-            </>
-          )}
         </CapColumn>
       </CapRow>
-      {/* Footer with Done/Update button - show for HTML editor and old CapDeviceContent flow */}
+      {/* Footer with Done/Update button - Only show for HTML editor, bee editor has its own footer */}
       {
-        (shouldUseHTMLEditor || !isNewEditorFlowEnabled) && (
+        shouldUseHTMLEditor && (
           <>
             {hasAnyErrors(errorMessage) && (
               <ErrorInfoNote

package/v2Containers/InApp/tests/mockData.js

@@ -894,5 +894,5 @@ export const deviceContentProps = {
     },
   ],
   tags: [],
-  isOtherDeviceSupported: true,
 };
+