@capillarytech/creatives-library 8.0.304 → 8.0.306

package/constants/unified.js

@@ -45,6 +45,7 @@ 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.304",
+  "version": "8.0.306",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/common.js

@@ -24,7 +24,8 @@ import {
   ENABLE_WEBPUSH,
   LIQUID_SUPPORT,
   SUPPORT_CK_EDITOR,
-  ENABLE_NEW_MPUSH
+  ENABLE_NEW_MPUSH,
+  ENABLE_NEW_EDITOR_FLOW_INAPP
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -142,6 +143,11 @@ 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,6 +63,7 @@ const CapDeviceContent = (props) => {
     deepLinkValue,
     setDeepLinkValue,
     onCopyTitleAndContent,
+    isOtherDeviceSupported,
     tags,
     onTagSelect,
     handleOnTagsContextChange,
@@ -167,13 +168,15 @@ const CapDeviceContent = (props) => {
   return (
     <>
       <CapRow className="creatives-device-content">
-        <CapLink
-          title={isAndroid
-            ? formatMessage(messages.copyContentFromIOS)
-            : formatMessage(messages.copyCotentFromAndroid)}
-          className="inapp-copy-content"
-          onClick={onCopyTitleAndContent}
-        />
+        {isOtherDeviceSupported && (
+          <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/FormBuilder/index.js

@@ -1331,7 +1331,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
   onSubmitWrapper = (args) => {
     const {singleTab = null} = args || {};
-    if (this.liquidFlow()) {
+    if (this.liquidFlow() && !this.props?.isFullMode) {
       // For MPUSH, we need to validate both Android and iOS content separately
       if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
         this.validateFormBuilderMPush(this.state.formData, singleTab);

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -294,6 +294,7 @@ const HTMLEditor = forwardRef(({
     enableSanitization: true,
     securityLevel: 'standard',
     apiValidationErrors, // Pass API validation errors to merge with client-side validation
+    isFullMode, // Skip liquid validation in standalone/full mode
   }, formatSanitizerMessage, formatValidatorMessage);
 
   // Expose validation and content state via ref

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -1375,6 +1375,7 @@ describe('HTMLEditor', () => {
           debounceMs: 500,
           enableSanitization: true,
           securityLevel: 'standard',
+          isFullMode: true,
         },
         expect.any(Function),
         expect.any(Function)

package/v2Components/HtmlEditor/hooks/__tests__/useValidation.test.js

@@ -155,7 +155,7 @@ describe('useValidation', () => {
         await Promise.resolve();
       });
 
-      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null);
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null, { skipLiquidValidation: false });
     });
 
     it('updates validation when content changes', async () => {
@@ -472,7 +472,7 @@ describe('useValidation', () => {
         await Promise.resolve();
       });
 
-      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'inapp', null);
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'inapp', null, { skipLiquidValidation: false });
     });
 
     it('defaults to email variant', async () => {
@@ -487,7 +487,7 @@ describe('useValidation', () => {
         await Promise.resolve();
       });
 
-      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null);
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null, { skipLiquidValidation: false });
     });
   });
 
@@ -1242,4 +1242,133 @@ describe('useValidation', () => {
       });
     });
   });
+
+  describe('isFullMode - skip liquid validation', () => {
+    it('passes skipLiquidValidation: true to validateHTML when isFullMode is true', async () => {
+      const { validateHTML } = require('../../utils/htmlValidator');
+
+      render(<TestComponent content="<p>Test</p>" options={{ isFullMode: true }} />);
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null, { skipLiquidValidation: true });
+    });
+
+    it('excludes API liquid errors from getAllIssues when isFullMode is true', async () => {
+      let validationState;
+      const onStateChange = (state) => { validationState = state; };
+
+      const apiValidationErrors = {
+        liquidErrors: ['Unsupported tag: points_balance'],
+        standardErrors: [],
+      };
+
+      render(
+        <TestComponent
+          content="<p>Test</p>"
+          options={{ apiValidationErrors, isFullMode: true }}
+          onStateChange={onStateChange}
+        />
+      );
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      const issues = validationState.getAllIssues();
+      const liquidIssues = issues.filter((i) => i.source === 'liquid-validator');
+      expect(liquidIssues).toHaveLength(0);
+    });
+
+    it('returns isClean true when only liquid errors exist and isFullMode is true', () => {
+      const apiValidationErrors = {
+        liquidErrors: ['Unsupported tag: points_balance'],
+        standardErrors: [],
+      };
+
+      render(
+        <TestComponent
+          content=""
+          options={{ apiValidationErrors, isFullMode: true }}
+        />
+      );
+
+      // Before validation runs, isClean should be true because liquid errors are ignored in full mode
+      expect(screen.getByTestId('is-clean')).toHaveTextContent('true');
+    });
+
+    it('does not treat liquid errors as blocking when isFullMode is true', async () => {
+      let validationState;
+      const onStateChange = (state) => { validationState = state; };
+
+      const apiValidationErrors = {
+        liquidErrors: ['Unsupported tag: points_balance'],
+        standardErrors: [],
+      };
+
+      render(
+        <TestComponent
+          content="<p>Valid</p>"
+          options={{ apiValidationErrors, isFullMode: true }}
+          onStateChange={onStateChange}
+        />
+      );
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      expect(validationState.hasBlockingErrors).toBe(false);
+    });
+
+    it('still treats standard API errors as blocking when isFullMode is true', async () => {
+      let validationState;
+      const onStateChange = (state) => { validationState = state; };
+
+      const apiValidationErrors = {
+        liquidErrors: ['Liquid error'],
+        standardErrors: ['Standard error'],
+      };
+
+      render(
+        <TestComponent
+          content="<p>Valid</p>"
+          options={{ apiValidationErrors, isFullMode: true }}
+          onStateChange={onStateChange}
+        />
+      );
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      expect(validationState.hasBlockingErrors).toBe(true);
+    });
+  });
 });

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -77,6 +77,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     enableSanitization = true,
     securityLevel = 'standard',
     apiValidationErrors = null, // API validation errors from validateLiquidTemplateContent
+    isFullMode = false, // When true, skip liquid validation (standalone/full mode)
   } = options;
 
   // Validation state
@@ -137,7 +138,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
     try {
       // 1. HTML Validation
-      const htmlValidation = validateHTML(htmlContent, variant, formatValidatorMessage);
+      const htmlValidation = validateHTML(htmlContent, variant, formatValidatorMessage, { skipLiquidValidation: isFullMode });
 
       // 2. CSS Validation (extract from HTML)
       const cssValidation = extractAndValidateCSS(htmlContent, formatValidatorMessage);
@@ -206,7 +207,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         },
       }));
     }
-  }, [variant, enableSanitization, securityLevel, formatSanitizerMessage, formatValidatorMessage]);
+  }, [variant, enableSanitization, securityLevel, formatSanitizerMessage, formatValidatorMessage, isFullMode]);
 
   /**
    * Validates content with debouncing
@@ -339,7 +340,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
    */
   const getAllIssues = useCallback(() => {
     // API errors (liquid + standard) are blocking – they block Save/Update/Preview/Test
-    const apiLiquidErrors = (apiValidationErrors?.liquidErrors || []).map((errorMessage) => {
+    const apiLiquidErrors = (isFullMode ? [] : (apiValidationErrors?.liquidErrors || [])).map((errorMessage) => {
       const extractedLine = extractLineNumberFromMessage(errorMessage);
       return {
         type: VALIDATION_SEVERITY.ERROR,
@@ -420,19 +421,20 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
     // Ensure we always return an array
     return Array.isArray(allIssues) ? allIssues : [];
-  }, [validationState, apiValidationErrors, extractLineNumberFromMessage, content]);
+  }, [validationState, apiValidationErrors, extractLineNumberFromMessage, content, isFullMode]);
 
   /**
    * Check if validation is clean (no errors or warnings)
    * Includes API validation errors in the check
    */
   const isClean = useCallback(() => {
-    const hasApiErrors = (apiValidationErrors?.liquidErrors?.length || 0) + (apiValidationErrors?.standardErrors?.length || 0) > 0;
+    const liquidErrorCount = isFullMode ? 0 : (apiValidationErrors?.liquidErrors?.length || 0);
+    const hasApiErrors = liquidErrorCount + (apiValidationErrors?.standardErrors?.length || 0) > 0;
     return validationState.summary.totalErrors === 0
            && validationState.summary.totalWarnings === 0
            && !validationState.summary.hasSecurityIssues
            && !hasApiErrors;
-  }, [validationState.summary, apiValidationErrors]);
+  }, [validationState.summary, apiValidationErrors, isFullMode]);
 
   // Effect to validate content when it changes
   useEffect(() => {
@@ -448,11 +450,12 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     }
   }, []);
 
-  const hasApiErrors = (apiValidationErrors?.liquidErrors?.length || 0) + (apiValidationErrors?.standardErrors?.length || 0) > 0;
+  const hasApiLiquidErrors = isFullMode ? false : (apiValidationErrors?.liquidErrors?.length || 0) > 0;
+  const hasApiErrors = hasApiLiquidErrors || (apiValidationErrors?.standardErrors?.length || 0) > 0;
 
   const protocolTypes = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
-  // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === ISSUE_SOURCES.LIQUID && e.severity === VALIDATION_SEVERITY.ERROR);
+  // Client-side Liquid validation errors are blocking (genuine syntax errors) - skip in full mode
+  const hasClientSideLiquidErrors = isFullMode ? false : (validationState.htmlErrors || []).some((e) => e.source === ISSUE_SOURCES.LIQUID && e.severity === VALIDATION_SEVERITY.ERROR);
   const hasBlockingErrors = (validationState.sanitizationWarnings || []).some((w) => BLOCKING_ERROR_RULE_IDS.includes(w.rule)) || (validationState.securityIssues || []).some((s) => protocolTypes.includes(s?.type)) || hasApiErrors || hasClientSideLiquidErrors;
 
   return {

package/v2Components/HtmlEditor/utils/htmlValidator.js

@@ -76,7 +76,7 @@ const CUSTOM_VALIDATIONS = {
  * @param {Function} formatMessage - Message formatter function for internationalization
  * @returns {Object} Validation result with errors and warnings
  */
-export const validateHTML = (html, variant = 'email', formatMessage = defaultMessageFormatter) => {
+export const validateHTML = (html, variant = 'email', formatMessage = defaultMessageFormatter, options = {}) => {
   if (!html || typeof html !== 'string') {
     return {
       isValid: true,
@@ -133,7 +133,9 @@ export const validateHTML = (html, variant = 'email', formatMessage = defaultMes
   // Always run custom validations and Liquid validation, even if HTMLHint failed
   // This ensures unsafe protocol detection and other critical validations still run
   runCustomValidations(html, variant, results, formatMessage);
-  runLiquidValidation(html, variant, results, formatMessage);
+  if (!options.skipLiquidValidation) {
+    runLiquidValidation(html, variant, results, formatMessage);
+  }
 
   return results;
 };

package/v2Containers/BeePopupEditor/index.js

@@ -40,6 +40,11 @@ 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({});
@@ -111,8 +116,10 @@ function BeePopupEditor(props) {
     window.BeePlugin.create(tokenData, beeConfig, (instance) => {
       beePluginInstance = instance;
       beeInstanceRef.current = instance;
-      // Check if beeJson is already an object (happens when layout type changes)
-      const parseJson = typeof beeJson === 'string' ? JSON.parse(beeJson) : beeJson;
+      // 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;
       beePluginInstance.start(parseJson);
       saveBeeInstance(beePluginInstance, device);
       isInitializedRef.current = true;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -1078,8 +1078,38 @@ export function SlideBoxContent(props) {
       )}
 
       {isCreateInApp && (
-        <InAppWrapper
-          key="creatives-inapp-wrapper"
+  (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"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
           onInAppEditorTypeChange={onInAppEditorTypeChange}
@@ -1114,10 +1144,12 @@ 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,6 +1,5 @@
 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';
@@ -42,6 +41,15 @@ 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;
@@ -910,4 +918,64 @@ 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,6 +202,114 @@ 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
@@ -1103,17 +1211,26 @@ 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>
-  <Connect(Connect(UserIsAuthenticated(InjectIntl(CreativesCommon))))
-    date={0}
+  <Component
     getDefaultTags=""
-    key="creatives-inapp-wrapper"
+    key="creatives-inapp-create"
+    location={
+      Object {
+        "pathname": "/inapp/create",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
     onCreateComplete={[MockFunction]}
     templateData={
       Object {
         "mode": "create",
       }
     }
-    type=""
   />
 </SlideBoxContent__CreativesWrapper>
 `;