cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/InApp/index.js

@@ -14,6 +14,8 @@ 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 {
@@ -31,7 +33,6 @@ import creativesMessages from '../CreativesContainer/messages';
 import withCreatives from "../../hoc/withCreatives";
 import UnifiedPreview from "../../v2Components/CommonTestAndPreview/UnifiedPreview";
 import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
-import { validateTags } from "../../utils/tagValidations";
 import injectReducer from '../../utils/injectReducer';
 import v2InAppReducer from './reducer';
 import { v2InAppSagas } from './sagas';
@@ -51,19 +52,22 @@ import {
   LAYOUT_RADIO_OPTIONS,
   IOS_CAPITAL,
 } from "./constants";
-import { INAPP, SMS } from "../CreativesContainer/constants";
+import { GENERIC, INAPP, SMS } from "../CreativesContainer/constants";
 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 } from "../../utils/common";
+import { validateTags } from "../../utils/tagValidations";
+import { hasNewEditorFlowInAppEnabled, isAiContentBotDisabled } 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 capDeviceContentMessages from "../../v2Components/CapDeviceContent/messages";
 import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
 
 let editContent = {};
@@ -74,6 +78,7 @@ export const InApp = (props) => {
     actions,
     globalActions,
     isFullMode,
+    isLoyaltyModule,
     onCreateComplete,
     params,
     templateData = {},
@@ -878,7 +883,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: templateLayoutType,
+      bodyType: bodyTypeForBackend,
       expandableDetails: {
         style: androidExpandableStyle,
         message: androidMessage,
@@ -1079,39 +1084,55 @@ export const InApp = (props) => {
   };
 
   // Validation middleware for tag validation (both liquid and non-liquid flow)
+  // Liquid validation (extractTags) runs only in library mode
   const validationMiddleWare = async () => {
-    // Set up callbacks for validation results
+    // Normalize validator bucket keys to component state keys (ANDROID, IOS_CAPITAL, GENERIC)
+    // so we don't merge e.g. 'android'/'ios'/'generic' with ANDROID/IOS/GENERIC and get duplicate/stale keys
+    const normalizeErrorBuckets = (errors) => {
+      const normalized = {
+        [ANDROID]: [],
+        [IOS_CAPITAL]: [],
+        [GENERIC]: [],
+      };
+      if (!errors || typeof errors !== 'object') return normalized;
+      const keyMap = {
+        ANDROID,
+        android: ANDROID,
+        [IOS_CAPITAL]: IOS_CAPITAL,
+        [IOS]: IOS_CAPITAL,
+        ios: IOS_CAPITAL,
+        GENERIC,
+        generic: GENERIC,
+      };
+      for (const [key, value] of Object.entries(errors)) {
+        const targetKey = keyMap[key];
+        if (targetKey != null && Array.isArray(value)) {
+          normalized[targetKey] = value;
+        }
+      }
+      return normalized;
+    };
     const onError = ({ standardErrors, liquidErrors }) => {
       setErrorMessage((prev) => ({
-        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
-        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...liquidErrors },
+        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...normalizeErrorBuckets(standardErrors) },
+        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...normalizeErrorBuckets(liquidErrors) },
       }));
     };
     const onSuccess = () => {
-      // Proceed with submission when validation is successful
       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
+    // Library mode: run extractTags validation (always, so we catch liquid errors even when tags not loaded)
+    if (!isFullMode) {
       const payload = createPayload();
       validateInAppContent(payload, {
-        currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
+        currentTab: panes === ANDROID ? 1 : 2,
         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}\)/,
@@ -1119,101 +1140,15 @@ export const InApp = (props) => {
             /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();
     }
   };
 
-  const isLiquidFlow = hasLiquidSupportFeature();
-
   // Check template data to determine editor type (for render decision)
   const templateDetails = isFullMode ? editData?.templateDetails : templateData;
   const versions = templateDetails?.versions || {};
@@ -1238,11 +1173,13 @@ export const InApp = (props) => {
     && !isBEEeditor
     && !isBeeFreeTemplate;
 
+  const isNewEditorFlowEnabled = !isLoyaltyModule && hasNewEditorFlowInAppEnabled();
+
   // Use state if available, otherwise fall back to direct data check
-  const shouldUseHTMLEditor = isHTMLTemplate || isHTMLTemplateFromData;
+  const shouldUseHTMLEditor = isNewEditorFlowEnabled && (isHTMLTemplate || isHTMLTemplateFromData);
 
   // Only route to Bee editor if it's explicitly a Bee editor AND not an HTML template
-  const shouldUseBeeEditor = (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
+  const shouldUseBeeEditor = isNewEditorFlowEnabled && (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
 
   // Early returns to avoid nested ternary
   if (isEditInApp && getTemplateDetailsInProgress) {
@@ -1278,10 +1215,222 @@ export const InApp = (props) => {
     );
   }
 
+  // ── Old-flow helpers (used by CapDeviceContent when flag is disabled) ──────
+  const aiContentBotDisabled = isAiContentBotDisabled();
+
+  /**
+   * Clears stored API/liquid errors for a specific device (and GENERIC) so
+   * hasAnyErrors() goes false and Done can be re-clicked after editing.
+   * Does NOT clear errors that belong only to the *other* device.
+   */
+  const clearDeviceErrors = useCallback((platform) => {
+    const key = platform === IOS ? IOS_CAPITAL : ANDROID;
+    setErrorMessage((prev) => ({
+      STANDARD_ERROR_MSG: {
+        ...prev.STANDARD_ERROR_MSG,
+        [key]: [],
+        GENERIC: [],
+      },
+      LIQUID_ERROR_MSG: {
+        ...prev.LIQUID_ERROR_MSG,
+        [key]: [],
+        GENERIC: [],
+      },
+    }));
+  }, [IOS_CAPITAL, ANDROID]);
+
+  const setTitleAndroidWithClear = useCallback((value) => {
+    clearDeviceErrors(ANDROID);
+    setTitleAndroid(value);
+  }, [clearDeviceErrors]);
+
+  const setTitleIosWithClear = useCallback((value) => {
+    clearDeviceErrors(IOS);
+    setTitleIos(value);
+  }, [clearDeviceErrors]);
+
+  const setTemplateMessageAndroidWithClear = useCallback((value) => {
+    clearDeviceErrors(ANDROID);
+    setTemplateMessageAndroid(value);
+  }, [clearDeviceErrors]);
+
+  const setTemplateMessageIosWithClear = useCallback((value) => {
+    clearDeviceErrors(IOS);
+    setTemplateMessageIos(value);
+  }, [clearDeviceErrors]);
+
+  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.unbalanacedCurlyBraces);
+    }
+    return '';
+  };
+
+  /** Same rules as CapDeviceContent onTitleChange / onTemplateMessageChange */
+  const computeInAppTemplateFieldError = (value) => {
+    let error = templateDescErrorHandler(value);
+    if (value === '') {
+      error = formatMessage(capDeviceContentMessages.emptyTemplateMessageErrorMessage);
+    }
+    return error;
+  };
+
+  const onCopyTitleAndContent = () => {
+    if (panes === ANDROID) {
+      clearDeviceErrors(ANDROID);
+      setTitleAndroid(titleIos);
+      setTemplateMessageAndroid(templateMessageIos);
+      setTemplateTitleErrorAndroid(computeInAppTemplateFieldError(titleIos));
+      setTemplateMessageErrorAndroid(computeInAppTemplateFieldError(templateMessageIos));
+      setInAppImageSrcAndroid(inAppImageSrcIos);
+    } else {
+      clearDeviceErrors(IOS);
+      setTitleIos(titleAndroid);
+      setTemplateMessageIos(templateMessageAndroid);
+      setTemplateTitleErrorIos(computeInAppTemplateFieldError(titleAndroid));
+      setTemplateMessageErrorIos(computeInAppTemplateFieldError(templateMessageAndroid));
+      setInAppImageSrcIos(inAppImageSrcAndroid);
+    }
+  };
+
+  const onTagSelect = (value, index) => {
+    const tag = `{{${value}}}`;
+    if (panes === ANDROID) {
+      clearDeviceErrors(ANDROID);
+      const nextTitle = index === 0 ? titleAndroid + tag : titleAndroid;
+      const nextMessage = index === 0 ? templateMessageAndroid : templateMessageAndroid + tag;
+      if (index === 0) setTitleAndroid(nextTitle);
+      else setTemplateMessageAndroid(nextMessage);
+      setTemplateTitleErrorAndroid(computeInAppTemplateFieldError(nextTitle));
+      setTemplateMessageErrorAndroid(computeInAppTemplateFieldError(nextMessage));
+    } else {
+      clearDeviceErrors(IOS);
+      const nextTitle = index === 0 ? titleIos + tag : titleIos;
+      const nextMessage = index === 0 ? templateMessageIos : templateMessageIos + tag;
+      if (index === 0) setTitleIos(nextTitle);
+      else setTemplateMessageIos(nextMessage);
+      setTemplateTitleErrorIos(computeInAppTemplateFieldError(nextTitle));
+      setTemplateMessageErrorIos(computeInAppTemplateFieldError(nextMessage));
+    }
+  };
+
+  // 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={setTitleAndroidWithClear}
+          templateMessageError={templateMessageErrorAndroid}
+          templateMessage={templateMessageAndroid}
+          setTemplateMessage={setTemplateMessageAndroidWithClear}
+          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={aiContentBotDisabled}
+          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={setTitleIosWithClear}
+          templateMessageError={templateMessageErrorIos}
+          templateMessage={templateMessageIos}
+          setTemplateMessage={setTemplateMessageIosWithClear}
+          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={aiContentBotDisabled}
+          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={shouldUseHTMLEditor ? 18 : 24}>
+        <CapColumn span={editorColumnSpan}>
           {/* Creative layout type */}
           {shouldUseHTMLEditor && (
             <>
@@ -1302,7 +1451,7 @@ export const InApp = (props) => {
               />
             </>
           )}
-          {shouldUseHTMLEditor ? (
+          {shouldUseHTMLEditor && (
             <HTMLEditor
               key={`inapp-html-editor-v${htmlEditorContentVersion}`}
               variant={HTML_EDITOR_VARIANTS.INAPP}
@@ -1318,19 +1467,16 @@ export const InApp = (props) => {
               location={location}
               selectedOfferDetails={selectedOfferDetails}
               onTagSelect={() => {
-                // Tag insertion is handled by HTMLEditor's CodeEditorPane at cursor position
-                // Content updates will be propagated via onContentChange callback
+                // Tag insertion handled by HTMLEditor's CodeEditorPane at cursor position
               }}
-              // 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}
@@ -1355,11 +1501,44 @@ export const InApp = (props) => {
               onCreateComplete={onCreateComplete}
             />
           )}
+          {!shouldUseHTMLEditor && !isNewEditorFlowEnabled && (
+            <>
+              <CapInput
+                label={<FormattedMessage {...messages.creativeName} />}
+                onChange={({ target: { value } }) => setTempName(value)}
+                value={tempName}
+                labelPosition="top"
+                size="default"
+              />
+              <CapRow>
+                <CapHeading type="h4">
+                  <FormattedMessage {...messages.creativeLayout} />
+                </CapHeading>
+                <CapHeading type="h6" className="inapp-creative-layout-desc">
+                  <FormattedMessage {...messages.creativeLayoutDesc} />
+                </CapHeading>
+              </CapRow>
+              <CapRadioGroup
+                id="inapp-layout-radio"
+                options={LAYOUT_RADIO_OPTIONS}
+                value={templateLayoutType}
+                onChange={onTemplateLayoutTypeChange}
+                className="inapp-layout-radio"
+              />
+              <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 - Only show for HTML editor, bee editor has its own footer */}
+      {/* Footer with Done/Update button - show for HTML editor and old CapDeviceContent flow */}
       {
-        shouldUseHTMLEditor && (
+        (shouldUseHTMLEditor || !isNewEditorFlowEnabled) && (
           <>
             {hasAnyErrors(errorMessage) && (
               <ErrorInfoNote

package/app/v2Containers/InApp/tests/index.test.js

@@ -21,18 +21,16 @@ import { getCtaObject } from '../utils';
 jest.mock('redux-auth-wrapper/history4/redirect', () => ({
   connectedRouterRedirect: jest.fn((config) => (Component) => Component),
 }));
+import * as commonUtils from '../../../utils/commonUtils';
 
 const mockActions = {
   getTemplateInfoById: jest.fn(),
   resetEditTemplate: jest.fn(),
-  getTemplateDetails: jest.fn((id, callback) => {
+  getTemplateDetails: jest.fn((id, setSpin) => {
     // Simulate successful template details fetch to prevent loading state
     // The callback is setSpin function, call it with false to stop spinner
-    if (callback && typeof callback === 'function') {
-      // Use setTimeout to ensure it's called after render
-      setTimeout(() => {
-        callback(false);
-      }, 0);
+    if (setSpin && typeof setSpin === 'function') {
+      setTimeout(() => setSpin(false), 0);
     }
   }),
   editTemplate: jest.fn(),
@@ -41,6 +39,9 @@ const mockActions = {
 };
 const mockGlobalActions = {
   fetchSchemaForEntity: jest.fn(),
+  getLiquidTags: jest.fn((content, callback) =>
+    callback({ askAiraResponse: { data: [], errors: [] }, isError: false }),
+  ),
 };
 
 jest.mock('../../../v2Containers/TagList/index.js', () => ({
@@ -66,7 +67,17 @@ const renderComponent = (props) =>
   );
 
 describe('Test activity inApp container', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('test case for inApp template update flow', async () => {
+    jest
+      .spyOn(commonUtils, 'validateInAppContent')
+      .mockImplementation((payload, options) => {
+        options.onSuccess();
+        return Promise.resolve(true);
+      });
     renderComponent({
       actions: mockActions,
       globalActions: mockGlobalActions,

package/app/v2Containers/InApp/tests/mockData.js

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

package/app/v2Containers/InAppWrapper/hooks/__tests__/useInAppWrapper.test.js

@@ -78,6 +78,7 @@ describe('useInAppWrapper', () => {
     onPreviewContentClicked: jest.fn(),
     onTestContentClicked: jest.fn(),
     eventContextTags: {},
+    waitEventContextTags: {},
     onCreateComplete: jest.fn(),
     handleClose: jest.fn(),
     templateData: null,
@@ -424,6 +425,24 @@ describe('useInAppWrapper', () => {
 
       expect(capturedState.inAppProps.getDefaultTags).toBe('defaultTags');
     });
+
+    it('passes waitEventContextTags through to inAppProps', () => {
+      const waitMap = { block1: { eventName: 'E', blockName: 'B', tags: [] } };
+      let capturedState = null;
+      render(
+        <TestComponent
+          hookProps={{
+            ...defaultHookProps,
+            waitEventContextTags: waitMap,
+          }}
+          onStateChange={(state) => {
+            capturedState = state;
+          }}
+        />
+      );
+
+      expect(capturedState.inAppProps.waitEventContextTags).toEqual(waitMap);
+    });
   });
 
   describe('isShowInAppCreate', () => {

package/app/v2Containers/InAppWrapper/hooks/useInAppWrapper.js

@@ -33,6 +33,7 @@ const useInAppWrapper = ({
   onPreviewContentClicked,
   onTestContentClicked,
   eventContextTags,
+  waitEventContextTags,
   onCreateComplete,
   handleClose,
   templateData,
@@ -149,6 +150,7 @@ const useInAppWrapper = ({
       onPreviewContentClicked,
       onTestContentClicked,
       eventContextTags,
+      waitEventContextTags,
       onCreateComplete,
       handleClose,
     };
@@ -173,6 +175,7 @@ const useInAppWrapper = ({
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    waitEventContextTags,
     onCreateComplete,
     handleClose,
   ]);

package/app/v2Containers/InAppWrapper/index.js

@@ -36,6 +36,7 @@ const InAppWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    waitEventContextTags,
     onCreateComplete,
     handleClose,
     templateData,
@@ -78,6 +79,7 @@ const InAppWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    waitEventContextTags,
     onCreateComplete,
     handleClose,
     templateData,
@@ -124,6 +126,7 @@ InAppWrapper.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   onCreateComplete: PropTypes.func,
   handleClose: PropTypes.func,
   templateData: PropTypes.object,