@capillarytech/creatives-library 8.0.292-alpha.0 → 8.0.292-alpha.10

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -102,6 +102,7 @@ const HTMLEditor = forwardRef(({
   onTagSelect = null,
   onContextChange = null,
   globalActions = null,
+  isLiquidEnabled = false, // Controls Liquid tab visibility in ValidationTabs
   isFullMode = true, // Full mode vs library mode - controls layout and visibility
   onErrorAcknowledged = null, // Callback when user clicks redirection icon to acknowledge errors
   onValidationChange = null, // Callback when validation state changes (for parent to track errors)
@@ -174,8 +175,12 @@ const HTMLEditor = forwardRef(({
         ? { [DEVICE_TYPES.ANDROID]: initialContent, [DEVICE_TYPES.IOS]: initialContent }
         : initialContent;
       if (inAppContent.updateContent) {
-        const currentContent = inAppContent.getDeviceContent?.(inAppContent.activeDevice);
-        const newContent = contentToUpdate[inAppContent.activeDevice] || contentToUpdate[DEVICE_TYPES.ANDROID] || '';
+        const activeDevice = inAppContent.activeDevice;
+        const currentContent = inAppContent.getDeviceContent?.(activeDevice);
+        // Use active device's value only; empty string is valid (don't fall back to other device)
+        const newContent = activeDevice in contentToUpdate
+          ? (contentToUpdate[activeDevice] ?? '')
+          : (contentToUpdate[DEVICE_TYPES.ANDROID] ?? '');
         if (currentContent !== newContent) {
           inAppContent.updateContent(newContent, true);
         }
@@ -572,6 +577,7 @@ const HTMLEditor = forwardRef(({
     content,
     layout,
     validation,
+    isLiquidEnabled,
     editorRef: getActiveEditorRef(),
     handleLabelInsert,
     handleSave,
@@ -591,6 +597,7 @@ const HTMLEditor = forwardRef(({
     content,
     layout,
     validation,
+    isLiquidEnabled,
     getActiveEditorRef,
     handleLabelInsert,
     handleSave,
@@ -779,6 +786,7 @@ HTMLEditor.propTypes = {
   onTagSelect: PropTypes.func,
   onContextChange: PropTypes.func, // Deprecated: use globalActions instead
   globalActions: PropTypes.object,
+  isLiquidEnabled: PropTypes.bool, // Controls Liquid tab visibility in validation
   isFullMode: PropTypes.bool, // Full mode vs library mode
   onErrorAcknowledged: PropTypes.func, // Callback when user clicks redirection icon to acknowledge errors
   onValidationChange: PropTypes.func, // Callback when validation state changes
@@ -812,6 +820,7 @@ HTMLEditor.defaultProps = {
   onTagSelect: null,
   onContextChange: null,
   globalActions: null, // Redux actions for API calls
+  isLiquidEnabled: false,
   isFullMode: true, // Default to full mode
   onErrorAcknowledged: null, // Callback when user clicks redirection icon to acknowledge errors
   onValidationChange: null, // Callback when validation state changes

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

@@ -229,6 +229,7 @@ const defaultProps = {
   channel: 'EMAIL',
   userLocale: 'en',
   moduleFilterEnabled: true,
+  isLiquidEnabled: false,
   isFullMode: true,
   onErrorAcknowledged: jest.fn(),
   onValidationChange: jest.fn(),

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

@@ -3201,6 +3201,7 @@ describe('HTMLEditor', () => {
             onTagSelect={onTagSelect}
             onContextChange={onContextChange}
             globalActions={globalActions}
+            isLiquidEnabled={true}
             isFullMode={false}
             onErrorAcknowledged={onErrorAcknowledged}
             onValidationChange={onValidationChange}
@@ -3260,6 +3261,20 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
+    it('should handle isLiquidEnabled prop', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor isLiquidEnabled={true} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
+    });
+
     it('should handle isFullMode prop', () => {
       render(
         <TestWrapper>

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -175,13 +175,18 @@
     }
 
     // Library mode: Position absolute for toolbar in InApp variant
-    // Using higher specificity to override default position: relative
+    // Pin toolbar to the right and reserve space so it does not overlap DeviceToggle (iOS tab must stay clickable)
     &.html-editor--library-mode {
       .html-editor__header {
+        position: relative;
+        padding-right: 14rem; // Reserve space for toolbar so DeviceToggle (flex: 1) doesn't extend under it
+
         .editor-toolbar,
         .editor-toolbar.editor-toolbar,
         .ant-layout-header.editor-toolbar {
           position: absolute;
+          top: 0;
+          right: 0;
         }
       }
     }

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -69,7 +69,7 @@ const CodeEditorPaneComponent = ({
 }) => {
   const context = useEditorContext();
   const {
-    content, validation, variant,
+    content, validation, variant, isLiquidEnabled,
   } = context || {};
   const { content: contentValue, updateContent } = content || {};
   const editorRef = useRef(null);
@@ -250,17 +250,16 @@ const CodeEditorPaneComponent = ({
     };
   }, [channel, intl]);
 
-  // Update editor content when content changes
+  // Update editor content when content changes (e.g. when switching Android/iOS tabs).
+  // Must run when contentValue is '' so switching to an empty tab clears the doc and does not show the other tab's content.
   useEffect(() => {
-    if (viewRef.current && contentValue && contentValue !== viewRef.current.state.doc.toString()) {
-      const { current: view } = viewRef;
-      const { state: { doc: { length } } } = view;
+    if (!viewRef.current) return;
+    const currentDocText = viewRef.current.state.doc.toString();
+    if (contentValue !== currentDocText) {
+      const view = viewRef.current;
+      const { length } = view.state.doc;
       view.dispatch({
-        changes: {
-          from: 0,
-          to: length,
-          insert: contentValue || '',
-        },
+        changes: { from: 0, to: length, insert: contentValue ?? '' },
       });
     }
   }, [contentValue]);
@@ -298,6 +297,7 @@ const CodeEditorPaneComponent = ({
         <ValidationErrorDisplay
           validation={validation}
           onErrorClick={onErrorClick}
+          isLiquidEnabled={isLiquidEnabled}
           className="code-editor-pane__validation"
         />
       </div>

package/v2Components/HtmlEditor/components/DeviceToggle/FLOW_AND_CLICK_BEHAVIOUR.md

@@ -0,0 +1,70 @@
+# DeviceToggle – Click flow and when clicks are blocked
+
+## 1. Click flow (button → end)
+
+1. **User clicks Android or iOS tab**  
+   - `CapButton` receives the click and runs  
+   - `onClick={() => handleDeviceClick(DEVICE_TYPES.ANDROID)}` or  
+   - `onClick={() => handleDeviceClick(DEVICE_TYPES.IOS)}`.
+
+2. **`handleDeviceClick(device)`** (in `DeviceToggle/index.js`):
+   - Only does something if **both**:
+     - `onDeviceChange` is truthy (passed from parent), and  
+     - `device !== activeDevice` (clicked tab is not already active).
+   - If both hold: calls `onDeviceChange(device)`.
+
+3. **Parent wiring** (`HTMLEditor.js`):
+   - `onDeviceChange={switchDevice}`  
+   - So `onDeviceChange` is the `switchDevice` from `useInAppContent`.
+
+4. **`switchDevice(device)`** (`hooks/useInAppContent.js`):
+   - `validDevices = [ANDROID, IOS]` (from `DEVICE_TYPES`: `'android'`, `'ios'`).
+   - If `device !== activeDevice` and `validDevices.includes(device)` → `setActiveDevice(device)`.
+   - If `device` is invalid → logs a warning and does nothing.
+
+5. **Result**  
+   - `activeDevice` updates → DeviceToggle and preview re-render with the new device; no explicit “block” inside this flow.
+
+---
+
+## 2. When the click is effectively “blocked” or does nothing
+
+- **No handler**  
+  If the parent does not pass `onDeviceChange` (or passes `undefined`/`null`), `handleDeviceClick` never calls anything. The button still receives the click; there is no visual “disabled” in DeviceToggle.
+
+- **Same device**  
+  If the user clicks the already-active tab (`device === activeDevice`), `handleDeviceClick` does nothing by design.
+
+- **Invalid device**  
+  If `device` is not `'android'` or `'ios'` (e.g. wrong constant when using the repo as a library), `switchDevice` only warns and does not update state.
+
+- **Click never reaches the button (layout/CSS)**  
+  Another element is on top of the tab and captures the click (see below). This is the likely cause when “the iOS button is not clickable in edit mode” when using the repo as a library.
+
+---
+
+## 3. Why the iOS button can be unclickable in library (edit) mode
+
+In **library mode** (`isFullMode === false`), InApp uses a special layout:
+
+- **Header**: flex row with **DeviceToggle** first and **EditorToolbar** second.
+- **DeviceToggle** has `flex: 1` (takes remaining space).
+- **EditorToolbar** gets `position: absolute` (no `top`/`right`/`left`), so it is taken out of flow.
+
+Because the toolbar is out of flow, the only flex child in flow is the DeviceToggle, so it expands to the full width of the header. The absolutely positioned toolbar is then drawn at its “static” position, which is the **right side** of the header. So the toolbar sits **on top of the right part of the header**, which is exactly where the **iOS** tab and the “Keep content same” checkbox are. Clicks on the iOS tab are then hit by the toolbar first, so the **iOS button appears not clickable** even though the handler logic is fine.
+
+So the problem is **not** that the button is disabled or that the click handler is blocked; it’s that **the EditorToolbar overlaps the iOS tab in library mode** and steals the click.
+
+---
+
+## 4. Recommended fix (library mode)
+
+Ensure the toolbar does not overlap the DeviceToggle:
+
+- Either **remove** the library-mode override that sets `position: absolute` on the toolbar so the header stays in normal flex flow, **or**
+- If you keep `position: absolute` for the toolbar:
+  - Give the header a **positioning context** (e.g. `position: relative`).
+  - Pin the toolbar to the right (e.g. `right: 0; top: 0`).
+  - Reserve space for the toolbar so DeviceToggle doesn’t extend under it (e.g. `padding-right` on the header or a fixed/min width for the toolbar and corresponding margin on the DeviceToggle).
+
+With that, the DeviceToggle (including the iOS tab) remains fully clickable in edit/library mode.

package/v2Components/HtmlEditor/hooks/useInAppContent.js

@@ -73,9 +73,13 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
   const autoSaveTimerRef = useRef(null);
   const changeTimestampRef = useRef(null);
 
-  // Refs to store current values for auto-save
+  // Refs to store current values for auto-save and sync flag
   const onSaveRef = useRef(onSave);
   const deviceContentRef = useRef(deviceContent);
+  const keepContentSameRef = useRef(keepContentSame);
+
+  // Keep ref in sync so updateContent always sees latest (avoids stale closure on first load)
+  keepContentSameRef.current = keepContentSame;
 
   // Update refs when values change
   useEffect(() => {
@@ -143,7 +147,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
   // Get current active content
   const currentContent = useMemo(() => deviceContent?.[activeDevice] || '', [deviceContent, activeDevice]);
 
-  // Update content for current device
+  // Update content for current device. Use ref so we always respect current checkbox (no stale closure).
   const updateContent = useCallback((newContent) => {
     // Validate input
     if (typeof newContent !== CONTENT_VALIDATION?.DEFAULT_CONTENT_TYPE) {
@@ -151,10 +155,11 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       return;
     }
 
+    const shouldSync = keepContentSameRef.current;
     // Create the updated content object
     let updatedDeviceContent;
 
-    if (keepContentSame) {
+    if (shouldSync) {
       // When sync is enabled, update both devices with the same content
       updatedDeviceContent = {
         [ANDROID]: newContent,
@@ -230,7 +235,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
         currentOnSave?.(deviceContentRef.current);
       }, autoSaveInterval);
     }
-  }, [activeDevice, keepContentSame, autoSave, autoSaveInterval, onChange]);
+  }, [activeDevice, autoSave, autoSaveInterval, onChange]);
 
   // Switch active device with better validation
   const switchDevice = useCallback((device) => {
@@ -256,10 +261,12 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
 
       setDeviceContent(syncedContent);
       setIsDirty(true);
+      // Notify parent so preview (e.g. getTemplateContent) shows synced content for both devices
+      onChange?.(syncedContent, activeDevice);
     }
     // When disabled (enabled = false), we don't need to do anything special
     // Each device will maintain its current content independently
-  }, [activeDevice, deviceContent]);
+  }, [activeDevice, deviceContent, onChange]);
 
   // Mark content as saved
   const markAsSaved = useCallback(() => {
@@ -300,21 +307,21 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       return;
     }
 
-    if (keepContentSame) {
+    if (keepContentSameRef.current) {
       // Update both devices when sync is enabled
       setDeviceContent({
         [ANDROID]: content,
         [IOS]: content,
       });
     } else {
-      // Update specific device
+      // Update specific device only
       setDeviceContent((prev) => ({
         ...prev,
         [device]: content,
       }));
     }
     setIsDirty(true);
-  }, [keepContentSame, ANDROID, IOS]);
+  }, [ANDROID, IOS]);
 
   // Cleanup on unmount
   useEffect(() => () => {

package/v2Containers/Cap/mockData.js

@@ -2,9 +2,11 @@ export const expectedStateGetLiquidTagsRequest = {
   fetchingLiquidTags: true,
   fetchingSchema: true,
   fetchingSchemaError: "",
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -15,9 +17,11 @@ export const expectedStateGetLiquidTagsFailure = {
   fetchingLiquidTags: false,
   fetchingSchema: true,
   fetchingSchemaError: "",
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -28,9 +32,11 @@ export const expectedStateGetLiquidTagsSuccess = {
   fetchingLiquidTags: false,
   fetchingSchema: true,
   fetchingSchemaError: "",
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -41,9 +47,11 @@ export const expectedStateGetSchemaForEntitySuccessTAG = {
   fetchingLiquidTags: false,
   fetchingSchema: false,
   fetchingSchemaError: false,
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: undefined,
+    tagLookupMap: { undefined: { definition: {} } },
     tags: { standard: { random: "32" } },
   },
   orgID: "",
@@ -54,9 +62,11 @@ export const expectedStateGetSchemaForEntitySuccess = {
   fetchingLiquidTags: false,
   fetchingSchema: false,
   fetchingSchemaError: false,
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: undefined,
+    tagLookupMap: undefined,
     tags: undefined,
   },
   orgID: "",
@@ -68,9 +78,13 @@ export const expectedForwardedTags = {
   fetchingSchema: false,
   fetchingSchemaError: '',
   injectedTags: undefined,
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {
+
+    },
     tags: [],
   },
   orgID: "",

package/v2Containers/Cap/reducer.js

@@ -1,11 +1,13 @@
 /**
  * Created by vivek on 22/5/17.
  */
-import { fromJS } from 'immutable';
+import { fromJS, Map as ImmutableMap } from 'immutable';
 import _ from 'lodash';
 import * as types from './constants';
 import initialState from '../../initialState';
 import { FAILURE } from '../App/constants';
+import { TAG } from '../Whatsapp/constants';
+import { getTagMapValue, getForwardedMapValues, getLoyaltyTagsMapValue } from '../../utils/tagValidations';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -96,6 +98,39 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('fetchingLiquidTags', false);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
+      //Process standard tags
+      const standardTagMapInitial = _.keyBy(
+        action?.data?.metaEntities?.standard,
+        item => item?.definition?.value
+      );
+      // Mapping only the `definition` object instead of the entire item, to reduce space used
+      const standardTagMap = _.mapValues(standardTagMapInitial, item => ({
+        definition: item?.definition ?? {},
+      }));
+
+      // Process custom tags
+      const customSubtags = getTagMapValue(action?.data?.metaEntities?.custom)
+      // Process extended tags
+      const extendedSubtags = getTagMapValue(action?.data?.metaEntities?.extended);
+
+      const loyaltySubTagsData = getLoyaltyTagsMapValue(action?.data?.metaEntities?.loyaltyTags);
+
+      const getExistingTagLookupMap = (state) => {
+        if (!state || !state.get) return {};
+        const tagLookupMap = state.getIn(['metaEntities', 'tagLookupMap']);
+        return state.get('metaEntities') && ImmutableMap.isMap(tagLookupMap)
+          ? tagLookupMap.toJS()
+          : {};
+      };
+
+      // Combine all maps
+      const combinedTagMap = {
+        ...standardTagMap,
+        ...customSubtags,
+        ...extendedSubtags,
+        ...loyaltySubTagsData,
+        ...getExistingTagLookupMap(state),
+      };
       const stateMeta = state.get("metaEntities");
       return state
         .set('fetchingSchema', false)
@@ -103,6 +138,7 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('metaEntities', {
           layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta?.layouts,
           tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta?.tags,
+          tagLookupMap: action?.data && action?.entityType === TAG ? combinedTagMap : stateMeta?.tagLookupMap,
         })
         .set('fetchingSchemaError', false);
     }
@@ -110,6 +146,7 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state.set('metaEntities', {
         layouts: [],
         tags: [],
+        tagLookupMap: {},
       });
     // eslint-disable-next-line no-case-declarations
     case types.HIDE_TAGS:
@@ -117,8 +154,23 @@ function capReducer(state = fromJS(initialState.cap), action) {
       metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
       metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
       return state.setIn(['metaEntities'], metaEntities);
-    case types.SET_INJECTED_TAGS:
-      return state.set("injectedTags", action.injectedTags);
+    case types.SET_INJECTED_TAGS: 
+
+      // Deep clone the tagLookupMap to avoid direct mutations
+      let updatedMetaEntitiesTagLookUp = _.cloneDeep(state.getIn(['metaEntities', 'tagLookupMap']));
+      const formattedInjectedTags = getForwardedMapValues(action?.injectedTags);
+      // Merge the injectedTags with the existing tagLookupMap
+      updatedMetaEntitiesTagLookUp = {
+        ...formattedInjectedTags || {},
+        ...updatedMetaEntitiesTagLookUp || {},
+      };
+      return state.set("injectedTags", action.injectedTags).setIn(
+        ["metaEntities"],
+        fromJS({
+          ...state.get("metaEntities"),
+          tagLookupMap: updatedMetaEntitiesTagLookUp
+        })
+      );
     case types.GET_TOPBAR_MENU_DATA_REQUEST:
       return state.set('topbarMenuData', fromJS({ status: 'request' }));
     case types.GET_TOPBAR_MENU_DATA_SUCCESS:

package/v2Containers/Cap/tests/reducer.test.js

@@ -21,6 +21,7 @@ import {
   expectedStateGetSchemaForEntitySuccessTAG,
   expectedStateGetSchemaForEntitySuccess,
 } from '../mockData';
+import { TAG } from '../../Whatsapp/constants';
 import { loadItem } from '../../../services/localStorageApi';
 
 
@@ -117,3 +118,104 @@ describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
     expect(reducer(mockedInitialState, action).toJS())?.fetchingSchema?.toEqual(true);
   });
 });
+
+describe('GET_SCHEMA_FOR_ENTITY_SUCCESS handler', () => {
+  it.concurrent('should handle existing tagLookupMap correctly when metaEntities and tagLookupMap exist', () => {
+    const initialStateTest = fromJS({
+      token: loadItem('token') || '',
+      orgID: loadItem('orgID') || '',
+      messages: [],
+      metaEntities: {
+        tags: [{ id: 1, name: 'tag1' }],
+        layouts: ['layout1', 'layout2'],
+        tagLookupMap: {
+          existingTag: { definition: { value: 'existing' } },
+          anotherTag: { definition: { value: 'another' } },
+        },
+        standard: [],
+      },
+      liquidTags: [],
+      fetchingLiquidTags: false,
+      fetchingSchema: false,
+      fetchingSchemaError: '',
+    });
+
+    let action = {
+      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+      entityType: TAG,
+      data: {
+        metaEntities: {
+          standard: [],
+          custom: [],
+          extended: [],
+        },
+      },
+    };
+
+    let newState = reducer(initialStateTest, action);
+    let metaEntities = newState.get('metaEntities');
+
+    expect(metaEntities).toEqual(expect.objectContaining({
+      tagLookupMap: expect.objectContaining({
+        existingTag: expect.objectContaining({
+          definition: expect.objectContaining({
+            value: 'existing',
+          }),
+        }),
+      }),
+    }));
+
+    action = {
+      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+      entityType: 'LAYOUT',
+      data: {
+        metaEntities: {
+          layouts: ['layout1', 'layout2'],
+          standard: [],
+        },
+      },
+    };
+    newState = reducer(initialStateTest, action);
+    metaEntities = newState.get('metaEntities');
+    expect(metaEntities).toEqual(expect.objectContaining({
+      layouts: expect.objectContaining({
+        layouts: expect.arrayContaining(['layout1', 'layout2']),
+      }),
+    }));
+  });
+
+  it.concurrent('should handle non-existent tagLookupMap by returning empty object', () => {
+    const initialStateTest = fromJS({
+      token: loadItem('token') || '',
+      orgID: loadItem('orgID') || '',
+      messages: [],
+      metaEntities: {
+        tagLookupMap: {},
+      },
+      liquidTags: [],
+      fetchingLiquidTags: false,
+      fetchingSchema: false,
+      fetchingSchemaError: '',
+    });
+
+    const action = {
+      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+      entityType: TAG,
+      data: {
+        metaEntities: {
+          standard: [],
+          custom: [],
+          extended: [],
+        },
+      },
+    };
+
+    const newState = reducer(initialStateTest, action);
+    const metaEntities = newState.get('metaEntities');
+
+    // Updated assertions to handle plain object
+    expect(metaEntities).toBeDefined();
+    expect(metaEntities.tagLookupMap).toBeDefined();
+    expect(metaEntities.tagLookupMap).toEqual({});
+  });
+});

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -566,7 +566,6 @@ export function SlideBoxContent(props) {
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
           isTestAndPreviewMode={isTestAndPreviewMode}
-          onValidationFail={onValidationFail}
         />
       )}
       {isEditFTP && (
@@ -633,7 +632,6 @@ export function SlideBoxContent(props) {
         getLiquidTags={getLiquidTags}
         getDefaultTags={type}
         isFullMode={isFullMode}
-        onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         onPreviewContentClicked={onPreviewContentClicked}
@@ -782,7 +780,6 @@ export function SlideBoxContent(props) {
           <MobliPushEdit
             getFormLibraryData={getFormData}
             setIsLoadingContent={setIsLoadingContent}
-            getLiquidTags={getLiquidTags}
             location={{
               pathname: `/mobilepush/edit/`,
               query,
@@ -855,7 +852,6 @@ export function SlideBoxContent(props) {
             mobilePushCreateMode={mobilePushCreateMode}
             isGetFormData={isGetFormData}
             getFormData={getFormData}
-            getLiquidTags={getLiquidTags}
             templateData={templateData}
             type={type}
             step={templateStep}
@@ -884,7 +880,7 @@ export function SlideBoxContent(props) {
           />
         ) : (
           <MobilePushNew
-            key="creatives-mobilepush-create-new"
+            key="creatives-mobilepush-wrapper"
             date={new Date().getMilliseconds()}
             setIsLoadingContent={setIsLoadingContent}
             onMobilepushModeChange={onMobilepushModeChange}
@@ -1137,6 +1133,7 @@ export function SlideBoxContent(props) {
           query,
           search: '',
         }}
+        showTemplateName={showTemplateName}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}