@capillarytech/creatives-library 8.0.299-alpha.1 → 8.0.299-alpha.10

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.299-alpha.1",
+  "version": "8.0.299-alpha.10",
   "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,10 +142,6 @@ export const hasNewMobilePushFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_NEW_MPUSH,
 );
 
-export const hasNewEditorFlowInAppEnabled = ()=>{
-  return true
-}
-
 //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/CustomerCreationModal.js

@@ -74,7 +74,7 @@ const CustomerCreationModal = ({
       const details = res.customerDetails || [];
       if (!success) {
         const errorMessage = response?.message || response?.status?.message
-        if (errorMessage.toLowerCase().includes("merged customer found")) {
+        if (errorMessage?.toLowerCase().includes("merged customer found")) {
           return { success: true, exists: true, details: [] };
         }
       }
@@ -195,7 +195,7 @@ const CustomerCreationModal = ({
       width={500}
       maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
       footer={
-        <CapRow justify="start" text-align="left" gutter={8}>
+        <CapRow justify="start" gutter={8}>
             <CapButton
               type="primary"
               onClick={() => onSave(validationErrors, setIsLoading)}
@@ -215,7 +215,7 @@ const CustomerCreationModal = ({
       }
       title={<FormattedMessage {...messages.customerCreationModalTitle} />}
       wrapClassName="common-test-preview-modal-wrap"
-      className="common-test-preview-modal"
+      className={`common-test-preview-modal${lookupLoading ? ' customer-creation-modal--lookup-loading' : ''}`}
     >
       <CapRow className="customer-creation-modal-row">
         <CapColumn span={24}>
@@ -242,7 +242,7 @@ const CustomerCreationModal = ({
         </CapColumn>
       </CapRow>
 
-      <CapRow className="customer-creation-modal-row">
+      <CapRow className="customer-creation-modal-row customer-creation-modal-row--email">
         <CapColumn span={24}>
           <CapLabel type="label1" className="customer-creation-modal-label">
             <FormattedMessage {...messages.customerEmail} /> {channel !== CHANNELS.EMAIL && <span className="customer-creation-modal-optional">(Optional)</span>}

package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js

@@ -2,7 +2,7 @@ import CapModal from "@capillarytech/cap-ui-library/CapModal";
 import { FormattedMessage, injectIntl } from "react-intl";
 import messages from "./messages";
 import React, { useState } from "react";
-import { CapCard, CapRow, CapColumn, CapLabel } from "@capillarytech/cap-ui-library";
+import { CapCard, CapRow, CapColumn } from "@capillarytech/cap-ui-library";
 import { CHANNELS } from "./constants";
 import CapButton from "@capillarytech/cap-ui-library/CapButton";    
 import CapIcon from "@capillarytech/cap-ui-library/CapIcon";

package/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -134,7 +134,7 @@ SendTestMessage.defaultProps = {
   channel: undefined,
   renderAddTestCustomerButton: undefined,
   searchValue: '',
-  setSearchValue: undefined,
+  setSearchValue: () => {}, // no-op when not provided; required by TreeSelect when showSearch is true
   deliverySettings: {},
   senderDetailsOptions: [],
   wecrmAccounts: [],

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -5,9 +5,28 @@
  */
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
-  /* All ant overrides scoped under wrapper to avoid affecting other modals. */
+/* All ant overrides scoped under wrapper to avoid affecting other modals. */
 .common-test-preview-modal-wrap {
-  z-index: 10000 !important;
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Modals rendered inside slidebox via getContainer (lib mode) – mask and wrap above content */
+.common-test-and-preview-notification-container {
+  .ant-notification {
+    z-index: 10001;
+  }
+
+  .common-test-preview-modal-wrap {
+    z-index: 10003;
+  }
+
+  .ant-modal-mask,
+  .ant-modal-wrap {
+    z-index: 10003;
+  }
 }
 
 /* Lookup spinner overlay above test-customers dropdown. */
@@ -22,19 +41,23 @@
 
 /* When customer lookup is loading, dropdown renders inside .send-test-section; lower it so spinner is on top. */
 .common-test-preview-customer-loading .test-customers-tree-select-dropdown {
-  z-index: 0 !important;
+  z-index: 0;
 }
 
 /* Customer creation modal content – avoid inline styles */
 .common-test-preview-modal {
   color: $CAP_G01 !important;
-  .ant-modal-content {
-    width: 28.5rem; /* 456px at 16px root */
-  }
+  width: 32.571em !important;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 32.571em !important;
+
   .ant-modal-footer {
     text-align: left;
-    margin-left: 0.625rem; /* 10px at 16px root */
-    margin-top: 0.9375rem; /* 15px at 16px root */
+    margin-left: 0.625rem;
+    /* 10px at 16px root */
+    margin-top: 0.9375rem;
+    /* 15px at 16px root */
   }
 
   .customer-creation-modal-row {
@@ -63,22 +86,78 @@
     font-weight: normal;
   }
 
+  /* Input text color and font to match standalone (lib mode can lose host styles) */
   .customer-creation-modal-input {
-    width: 100%;
-    color: $CAP_G01;
+    border: none !important;
+
+    /* Sizes in em for 14px base: same px as .5rem 2.5rem 1.5rem .875rem at 16px (8px, 40px, 24px, 14px) */
+    .ant-input {
+      color: $CAP_G01;
+      font-size: $FONT_SIZE_M;
+      font-weight: normal;
+      padding: 0.571em;
+      /* 8px */
+      height: 2.857em;
+      /* 40px */
+      line-height: 1.714em;
+      /* 24px */
+    }
+
+    .ant-input:hover,
+    .ant-input:focus {
+      border: 1px solid $CAP_G01 !important;
+    }
+
+    .ant-input::placeholder {
+      color: $CAP_G06;
+    }
 
+    /* Error state: single clean red border, no double line or focus ring */
     &.has-error {
-      color: $CAP_COLOR_03 !important;
+      .ant-input-affix-wrapper {
+        border: 1px solid $CAP_COLOR_03;
+        border-radius: $CAP_SPACE_04;
+      }
+
+      .ant-input-affix-wrapper:hover,
+      .ant-input-affix-wrapper:focus,
+      .ant-input-affix-wrapper-focused {
+        border: 1px solid $CAP_COLOR_03;
+      }
+
+      .ant-input-affix-wrapper .ant-input {
+        border: none !important;
+      }
+
       .ant-input {
-        border-color: $CAP_COLOR_03 !important;
+        border: 1px solid $CAP_COLOR_03;
       }
     }
   }
 
+  /* Error message only – no extra border/line below the input */
   .customer-creation-modal-validation-error {
     color: $CAP_COLOR_03;
     font-size: $FONT_SIZE_S;
     margin-top: $CAP_SPACE_04;
+    border: none;
+    border-top: none;
+    box-shadow: none;
+
+    &::before,
+    &::after {
+      display: none;
+      content: none;
+      border: none;
+    }
+  }
+
+  /* Lookup loading: make Email and Mobile fields look disabled (wrapper-only) */
+  .customer-creation-modal--lookup-loading .customer-creation-modal-row--email .customer-creation-modal-input,
+  .customer-creation-modal--lookup-loading .customer-creation-modal-row--last .customer-creation-modal-input {
+    opacity: 0.65;
+    cursor: not-allowed;
+    background-color: $CAP_G09;
   }
 
   /* Existing customer modal content */
@@ -87,13 +166,17 @@
       margin-bottom: $CAP_SPACE_16;
     }
 
+    .ant-card.cap-card-v2 {
+      border: none
+    }
+
     .ant-card-body {
       padding: 1rem;
+      border-radius: $CAP_SPACE_08;
+      border: $CAP_SPACE_01 solid $CAP_G06;
     }
 
     &-card {
-      border-radius: $CAP_SPACE_08;
-      border: $CAP_SPACE_01 solid $CAP_G06;
       padding: 0;
     }
 
@@ -104,9 +187,11 @@
     }
 
     &-avatar {
-      width: 3rem; /* 48px at 16px root */
+      width: 3rem;
+      /* 48px at 16px root */
       height: 3rem;
-      border-radius: 1.25rem; /* 20px at 16px root */
+      border-radius: 1.25rem;
+      /* 20px at 16px root */
       background-color: $CAP_G07;
       display: flex;
       align-items: center;
@@ -187,6 +272,7 @@
 
   .tag-input-field {
     width: 14.714rem;
+
     .input {
       height: $CAP_SPACE_40;
     }
@@ -199,12 +285,16 @@
 
   .left-panel {
     width: 40%;
+    min-width: 20rem;
+    /* Consistent width in campaigns/library mode so test customer dropdown matches creatives */
     padding-right: 1rem;
     border-right: $CAP_SPACE_01 solid $CAP_G12;
     overflow-y: auto;
+
     .panel-divider {
       margin: 0;
     }
+
     .no-tags-extracted-info-note {
       .note-text {
         white-space: unset;
@@ -253,6 +343,7 @@
     .values-missing-message {
       margin: $CAP_SPACE_16 0;
     }
+
     .editor-header {
       display: flex;
       justify-content: flex-end;
@@ -336,7 +427,7 @@
         align-items: center;
         min-height: $CAP_SPACE_20;
         padding-left: $CAP_SPACE_08;
-        
+
         &:hover {
           background-color: #f5f5f5;
         }
@@ -402,6 +493,7 @@
           color: #bfbfbf;
           font-style: italic;
         }
+
         .ant-input {
           margin: $CAP_SPACE_06 0;
           height: $CAP_SPACE_36;
@@ -462,10 +554,11 @@
       justify-content: space-between;
       margin-bottom: $CAP_SPACE_16;
     }
+
     .editor-actions::before,
     .editor-actions::after {
-        content: none;
-        display: none;
+      content: none;
+      display: none;
     }
 
     .optional-tags-section {
@@ -474,9 +567,10 @@
         color: #666;
       }
 
-        z-index: -1;
+      z-index: -1;
+
       .optional-tags-content {
-        padding: $CAP_SPACE_16;  
+        padding: $CAP_SPACE_16;
         background: #f5f5f5;
         border-radius: $CAP_SPACE_04;
       }
@@ -502,31 +596,40 @@
       margin-bottom: $CAP_SPACE_16;
       color: #666;
     }
+
     .ant-collapse-header {
       padding-left: 0;
     }
+
     .ant-collapse-content-box {
       padding-left: 0 !important;
     }
+
     .send-test-content {
       flex-direction: column;
       align-items: stretch;
       gap: 0;
     }
+
     .test-customers-tree-select {
       width: 100%;
+      min-width: 18rem;
+      /* Consistent dropdown width in campaigns and creatives */
       min-height: $CAP_SPACE_40;
       margin: $CAP_SPACE_12 0 $CAP_SPACE_08;
+
       .ant-select-selection,
       .ant-select-selector {
         min-height: $CAP_SPACE_40;
         height: auto !important;
       }
     }
+
     .send-test-content .ant-btn {
       margin-top: $CAP_SPACE_04;
       flex-shrink: 0;
     }
+
     .ant-select-selection__choice {
       background-color: $CAP_G08;
       border-radius: $CAP_SPACE_04;
@@ -536,8 +639,11 @@
 
 // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
 .test-customers-tree-select-dropdown {
-  max-height: 20rem !important; /* 320px */
-  overflow-y: auto !important;
+  min-width: 18rem;
+  max-height: 20rem;
+  /* 320px */
+  overflow-y: auto;
+
   .ant-select-tree-list-holder-inner {
     overflow: visible;
   }
@@ -574,7 +680,7 @@
         padding-bottom: $CAP_SPACE_16;
         margin-bottom: $CAP_SPACE_16;
       }
-      
+
       .right-panel {
         padding-left: 0;
         padding-top: $CAP_SPACE_16;
@@ -590,6 +696,7 @@
   .preview-divider {
     margin: 0;
   }
+
   .preview-header {
     display: flex;
     justify-content: space-between;
@@ -601,6 +708,7 @@
       font-size: $FONT_SIZE_M;
       color: #595959;
       gap: $CAP_SPACE_04;
+
       b {
         color: #262626;
         margin-left: $CAP_SPACE_04;
@@ -631,10 +739,12 @@
 
   .preview-body {
     border-radius: $CAP_SPACE_08;
-    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0,0,0,0.1);
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.1);
+
     &.mobile {
       width: 26.786rem;
       margin: 0 auto;
+
       .browser-bar {
         background: $CAP_G08;
       }
@@ -650,13 +760,16 @@
         display: flex;
         gap: $CAP_SPACE_08;
         color: $CAP_G06;
+
         .refresh-icon {
           margin-top: $CAP_SPACE_04;
+
           svg path {
             fill: $CAP_G06;
           }
         }
       }
+
       .address-bar {
         flex-grow: 1;
         background: $CAP_WHITE;
@@ -666,13 +779,16 @@
         color: #595959;
         text-align: center;
         border: $CAP_SPACE_01 solid $CAP_G07;
+
         .address-bar-label {
           float: left;
         }
+
         .browser-address-bar-icon {
           float: right;
         }
       }
+
       .browser-actions {
         color: #8c8c8c;
       }
@@ -683,9 +799,11 @@
       align-items: center;
       padding: $CAP_SPACE_16;
       gap: $CAP_SPACE_16;
+
       .back-arrow {
         font-size: $CAP_SPACE_16;
       }
+
       .email-meta {
         margin-left: auto;
         display: flex;
@@ -693,6 +811,7 @@
         gap: $CAP_SPACE_08;
         font-size: $FONT_SIZE_S;
         color: #8c8c8c;
+
         .dots {
           width: $CAP_SPACE_06;
           height: $CAP_SPACE_06;
@@ -707,16 +826,19 @@
       align-items: center;
       padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
       gap: $CAP_SPACE_12;
+
       .sender-avatar {
         width: $CAP_SPACE_40;
         height: $CAP_SPACE_40;
         border-radius: 50%;
         background: $CAP_G12;
       }
+
       .sender-info {
         .sender-name {
           font-weight: 500;
         }
+
         .recipient-info {
           font-size: $FONT_SIZE_S;
           color: #8c8c8c;
@@ -727,6 +849,7 @@
     .email-content {
       border-top: $CAP_SPACE_01 solid $CAP_G12;
       padding: 0 $CAP_SPACE_16;
+
       iframe {
         border: none;
       }

package/v2Components/CommonTestAndPreview/index.js

@@ -410,7 +410,7 @@ const CommonTestAndPreview = (props) => {
   /**
    * Common handler for saving test customers (both new and existing)
    */
-  const handleSaveTestCustomer = async (validationErrors = {},setIsLoading = false) => {
+  const handleSaveTestCustomer = async (validationErrors = {},setIsLoading = () => {}) => {
     // Check for validation errors before saving (for new customers)
     if (customerModal[1] === CUSTOMER_MODAL_NEW && (validationErrors.email || validationErrors.mobile)) {
       return;
@@ -2676,7 +2676,10 @@ const CommonTestAndPreview = (props) => {
 
       if (!success) {
         const errorMessage = response?.message || response?.status?.message || formatMessage(messages.memberLookupError);
-        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage });
+        CapNotification.error({
+          message: formatMessage(messages.memberLookupError),
+          description: errorMessage,
+        });
         return;
       }
 
@@ -2710,6 +2713,7 @@ const CommonTestAndPreview = (props) => {
     } catch {
       CapNotification.error({
         message: formatMessage(messages.memberLookupError),
+        description: formatMessage(messages.memberLookupError),
       });
     } finally {
       setIsCustomerDataLoading(false);

package/v2Components/CommonTestAndPreview/tests/CommonTestAndPreview.addTestCustomer.test.js

@@ -361,6 +361,7 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
         message: 'Unable to look up customer. Please try again.',
+        description: 'Unable to look up customer. Please try again.',
       })));
       expect(screen.queryByText(/add new test customer/i)).toBeFalsy();
     });
@@ -573,7 +574,8 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await clickAddTestCustomer();
       await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
-        message: 'Merged customer found',
+        message: 'Unable to look up customer. Please try again.',
+        description: 'Merged customer found',
       })));
       expect(screen.queryByText(/add new test customer/i)).toBeFalsy();
       expect(screen.queryByText(/this user profile already exists/i)).toBeFalsy();
@@ -595,7 +597,8 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await clickAddTestCustomer();
       await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
-        message: 'Server error',
+        message: 'Unable to look up customer. Please try again.',
+        description: 'Server error',
       })));
       expect(screen.queryByText(/add new test customer/i)).toBeFalsy();
       expect(screen.queryByText(/this user profile already exists/i)).toBeFalsy();
@@ -617,6 +620,7 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await clickAddTestCustomer();
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
         message: 'Unable to look up customer. Please try again.',
+        description: 'Unable to look up customer. Please try again.',
       })));
     });
   });

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/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 = {},
@@ -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