@capillarytech/creatives-library 8.0.235 → 8.0.236-alpha.1

package/v2Components/HtmlEditor/messages.js

@@ -13,321 +13,321 @@ export default defineMessages({
   // Main component messages
   initializing: {
     id: `${scope}.initializing`,
-    defaultMessage: 'Initializing HTML Editor...'
+    defaultMessage: 'Initializing HTML Editor...',
   },
 
   // Label insertion messages
   addLabel: {
     id: `${scope}.addLabel`,
-    defaultMessage: 'Add label'
+    defaultMessage: 'Add label',
   },
   labelInserted: {
     id: `${scope}.labelInserted`,
-    defaultMessage: 'Label inserted successfully'
+    defaultMessage: 'Label inserted successfully',
   },
   labelInsertedDescription: {
     id: `${scope}.labelInsertedDescription`,
-    defaultMessage: 'The label "{label}" has been inserted at the cursor position'
+    defaultMessage: 'The label "{label}" has been inserted at the cursor position',
   },
   labelInsertError: {
     id: `${scope}.labelInsertError`,
-    defaultMessage: 'Failed to insert label'
+    defaultMessage: 'Failed to insert label',
   },
   editorNotReady: {
     id: `${scope}.editorNotReady`,
-    defaultMessage: 'Editor is not ready. Please try again.'
+    defaultMessage: 'Editor is not ready. Please try again.',
   },
   editorMethodNotAvailable: {
     id: `${scope}.editorMethodNotAvailable`,
-    defaultMessage: 'Editor method not available. Please refresh and try again.'
+    defaultMessage: 'Editor method not available. Please refresh and try again.',
   },
 
   // Save messages
   contentSaved: {
     id: `${scope}.contentSaved`,
-    defaultMessage: 'Content saved successfully'
+    defaultMessage: 'Content saved successfully',
   },
   saveError: {
     id: `${scope}.saveError`,
-    defaultMessage: 'Failed to save content'
+    defaultMessage: 'Failed to save content',
   },
   autoSaveEnabled: {
     id: `${scope}.autoSaveEnabled`,
-    defaultMessage: 'Auto-save is enabled'
+    defaultMessage: 'Auto-save is enabled',
   },
   autoSaveDisabled: {
     id: `${scope}.autoSaveDisabled`,
-    defaultMessage: 'Auto-save is disabled'
+    defaultMessage: 'Auto-save is disabled',
   },
 
   // Editor toolbar messages
   htmlEditor: {
     id: `${scope}.htmlEditor`,
-    defaultMessage: 'Email content'
+    defaultMessage: 'Email content',
   },
   desktop: {
     id: `${scope}.desktop`,
-    defaultMessage: 'Desktop'
+    defaultMessage: 'Desktop',
   },
   mobile: {
     id: `${scope}.mobile`,
-    defaultMessage: 'Mobile'
+    defaultMessage: 'Mobile',
   },
   mobileDevice: {
     id: `${scope}.mobileDevice`,
-    defaultMessage: 'Mobile Device'
+    defaultMessage: 'Mobile Device',
   },
   htmlPreview: {
     id: `${scope}.htmlPreview`,
-    defaultMessage: 'HTML Preview'
+    defaultMessage: 'HTML Preview',
   },
   startTypingHtml: {
     id: `${scope}.startTypingHtml`,
-    defaultMessage: 'Start typing HTML to see the preview'
+    defaultMessage: 'Start typing HTML to see the preview',
   },
   previewMode: {
     id: `${scope}.previewMode`,
-    defaultMessage: 'Preview Mode'
+    defaultMessage: 'Preview Mode',
   },
   fullscreen: {
     id: `${scope}.fullscreen`,
-    defaultMessage: 'Fullscreen'
+    defaultMessage: 'Fullscreen',
   },
   enterFullscreen: {
     id: `${scope}.enterFullscreen`,
-    defaultMessage: 'Enter Fullscreen'
+    defaultMessage: 'Enter Fullscreen',
   },
   exitFullscreen: {
     id: `${scope}.exitFullscreen`,
-    defaultMessage: 'Exit Fullscreen'
+    defaultMessage: 'Exit Fullscreen',
   },
   save: {
     id: `${scope}.save`,
-    defaultMessage: 'Save'
+    defaultMessage: 'Save',
   },
 
   // Editor tabs messages
   htmlTab: {
     id: `${scope}.htmlTab`,
-    defaultMessage: 'HTML'
+    defaultMessage: 'HTML',
   },
   cssTab: {
     id: `${scope}.cssTab`,
-    defaultMessage: 'CSS'
+    defaultMessage: 'CSS',
   },
   javascriptTab: {
     id: `${scope}.javascriptTab`,
-    defaultMessage: 'JavaScript'
+    defaultMessage: 'JavaScript',
   },
 
   // Preview messages
   previewTitle: {
     id: `${scope}.previewTitle`,
-    defaultMessage: 'Preview'
+    defaultMessage: 'Preview',
   },
   previewLoading: {
     id: `${scope}.previewLoading`,
-    defaultMessage: 'Loading preview...'
+    defaultMessage: 'Loading preview...',
   },
   previewError: {
     id: `${scope}.previewError`,
-    defaultMessage: 'Preview error'
+    defaultMessage: 'Preview error',
   },
   previewEmpty: {
     id: `${scope}.previewEmpty`,
-    defaultMessage: 'Start typing HTML to see the preview'
+    defaultMessage: 'Start typing HTML to see the preview',
   },
   refreshPreview: {
     id: `${scope}.refreshPreview`,
-    defaultMessage: 'Refresh Preview'
+    defaultMessage: 'Refresh Preview',
   },
 
   // Mobile device preview messages
   android: {
     id: `${scope}.android`,
-    defaultMessage: 'Android'
+    defaultMessage: 'Android',
   },
   ios: {
     id: `${scope}.ios`,
-    defaultMessage: 'iOS'
+    defaultMessage: 'iOS',
   },
   devicePreview: {
     id: `${scope}.devicePreview`,
-    defaultMessage: 'Device Preview'
+    defaultMessage: 'Device Preview',
   },
 
   // InApp variant messages
   inAppEditor: {
     id: `${scope}.inAppEditor`,
-    defaultMessage: 'In-app content'
+    defaultMessage: 'In-app content',
   },
   keepContentSameForBoth: {
     id: `${scope}.keepContentSameForBoth`,
-    defaultMessage: 'Keep content same for both'
+    defaultMessage: 'Keep content same for both',
   },
 
   // Validation messages
   validationErrors: {
     id: `${scope}.validationErrors`,
-    defaultMessage: '{count} validation {count, plural, one {error} other {errors}}'
+    defaultMessage: '{count} validation {count, plural, one {error} other {errors}}',
   },
   validationWarnings: {
     id: `${scope}.validationWarnings`,
-    defaultMessage: '{count} validation {count, plural, one {warning} other {warnings}}'
+    defaultMessage: '{count} validation {count, plural, one {warning} other {warnings}}',
   },
   noValidationIssues: {
     id: `${scope}.noValidationIssues`,
-    defaultMessage: 'No validation issues'
+    defaultMessage: 'No validation issues',
   },
   showProblems: {
     id: `${scope}.showProblems`,
-    defaultMessage: 'Show Problems'
+    defaultMessage: 'Show Problems',
   },
   hideProblems: {
     id: `${scope}.hideProblems`,
-    defaultMessage: 'Hide Problems'
+    defaultMessage: 'Hide Problems',
   },
 
   // Error messages
   securityError: {
     id: `${scope}.securityError`,
-    defaultMessage: 'Security Error'
+    defaultMessage: 'Security Error',
   },
   runtimeError: {
     id: `${scope}.runtimeError`,
-    defaultMessage: 'Runtime Error'
+    defaultMessage: 'Runtime Error',
   },
   renderError: {
     id: `${scope}.renderError`,
-    defaultMessage: 'Render Error'
+    defaultMessage: 'Render Error',
   },
   clearErrors: {
     id: `${scope}.clearErrors`,
-    defaultMessage: 'Clear Errors'
+    defaultMessage: 'Clear Errors',
   },
   copyError: {
     id: `${scope}.copyError`,
-    defaultMessage: 'Copy Error Details'
+    defaultMessage: 'Copy Error Details',
   },
   errorCopied: {
     id: `${scope}.errorCopied`,
-    defaultMessage: 'Error details copied to clipboard'
+    defaultMessage: 'Error details copied to clipboard',
   },
 
   // Accessibility messages
   codeEditor: {
     id: `${scope}.codeEditor`,
-    defaultMessage: 'Email Editor'
+    defaultMessage: 'Email Editor',
   },
   previewPanel: {
     id: `${scope}.previewPanel`,
-    defaultMessage: 'Preview Panel'
+    defaultMessage: 'Preview Panel',
   },
   resizeHandle: {
     id: `${scope}.resizeHandle`,
-    defaultMessage: 'Drag to resize panels'
+    defaultMessage: 'Drag to resize panels',
   },
   splitPanels: {
     id: `${scope}.splitPanels`,
-    defaultMessage: 'Split panels - code editor and preview'
+    defaultMessage: 'Split panels - code editor and preview',
   },
 
   // Performance messages
   optimizing: {
     id: `${scope}.optimizing`,
-    defaultMessage: 'Optimizing performance...'
+    defaultMessage: 'Optimizing performance...',
   },
   performanceWarning: {
     id: `${scope}.performanceWarning`,
-    defaultMessage: 'Large content detected. Performance may be affected.'
+    defaultMessage: 'Large content detected. Performance may be affected.',
   },
 
   // Feature messages
   autoSave: {
     id: `${scope}.autoSave`,
-    defaultMessage: 'Auto-save'
+    defaultMessage: 'Auto-save',
   },
   lastSaved: {
     id: `${scope}.lastSaved`,
-    defaultMessage: 'Last saved: {time}'
+    defaultMessage: 'Last saved: {time}',
   },
   unsavedChanges: {
     id: `${scope}.unsavedChanges`,
-    defaultMessage: 'You have unsaved changes'
+    defaultMessage: 'You have unsaved changes',
   },
 
   // Content Sanitizer messages
   sanitizer: {
     invalidInput: {
       id: `${scope}.sanitizer.invalidInput`,
-      defaultMessage: 'Invalid input: HTML content must be a string'
+      defaultMessage: 'Invalid input: HTML content must be a string',
     },
     invalidInputNonEmpty: {
       id: `${scope}.sanitizer.invalidInputNonEmpty`,
-      defaultMessage: 'Invalid input: HTML content must be a non-empty string'
+      defaultMessage: 'Invalid input: HTML content must be a non-empty string',
     },
     sanitizationFailed: {
       id: `${scope}.sanitizer.sanitizationFailed`,
-      defaultMessage: 'Sanitization failed: {error}'
+      defaultMessage: 'Sanitization failed: {error}',
     },
     dangerousProtocolDetected: {
       id: `${scope}.sanitizer.dangerousProtocolDetected`,
-      defaultMessage: 'Dangerous protocol detected'
+      defaultMessage: 'Dangerous protocol detected',
     },
 
     // Email compatibility warnings
     emailMultimediaNotSupported: {
       id: `${scope}.sanitizer.emailMultimediaNotSupported`,
-      defaultMessage: 'Video/audio/canvas elements may not be supported in email clients'
+      defaultMessage: 'Video/audio/canvas elements may not be supported in email clients',
     },
     emailPositioningNotSupported: {
       id: `${scope}.sanitizer.emailPositioningNotSupported`,
-      defaultMessage: 'Fixed/sticky positioning may not work in email clients'
+      defaultMessage: 'Fixed/sticky positioning may not work in email clients',
     },
     emailModernCssLimited: {
       id: `${scope}.sanitizer.emailModernCssLimited`,
-      defaultMessage: 'CSS Grid and Flexbox have limited support in email clients'
+      defaultMessage: 'CSS Grid and Flexbox have limited support in email clients',
     },
     emailViewportUnitsNotSupported: {
       id: `${scope}.sanitizer.emailViewportUnitsNotSupported`,
-      defaultMessage: 'Viewport units and rem may not be supported in all email clients'
+      defaultMessage: 'Viewport units and rem may not be supported in all email clients',
     },
 
     // Mobile optimization warnings
     mobileTablesNotFriendly: {
       id: `${scope}.sanitizer.mobileTablesNotFriendly`,
-      defaultMessage: 'Tables may not be mobile-friendly - consider using flexbox or grid'
+      defaultMessage: 'Tables may not be mobile-friendly - consider using flexbox or grid',
     },
     mobileRelativeFontSizes: {
       id: `${scope}.sanitizer.mobileRelativeFontSizes`,
-      defaultMessage: 'Consider using relative font sizes (em, rem, %) for better mobile scaling'
+      defaultMessage: 'Consider using relative font sizes (em, rem, %) for better mobile scaling',
     },
     mobileFixedWidthsProblematic: {
       id: `${scope}.sanitizer.mobileFixedWidthsProblematic`,
-      defaultMessage: 'Large fixed widths may not work well on mobile devices'
+      defaultMessage: 'Large fixed widths may not work well on mobile devices',
     },
     mobileRelativeUnits: {
       id: `${scope}.sanitizer.mobileRelativeUnits`,
-      defaultMessage: 'Consider using relative units (rem, em, %) for better mobile responsiveness'
+      defaultMessage: 'Consider using relative units (rem, em, %) for better mobile responsiveness',
     },
 
     // Production recommendations
     productionValidHtml: {
       id: `${scope}.sanitizer.productionValidHtml`,
-      defaultMessage: 'Provide valid HTML content before deploying to production'
+      defaultMessage: 'Provide valid HTML content before deploying to production',
     },
     productionSanitized: {
       id: `${scope}.sanitizer.productionSanitized`,
-      defaultMessage: 'Content has been sanitized for security - review changes before deploying'
+      defaultMessage: 'Content has been sanitized for security - review changes before deploying',
     },
     productionInlineCss: {
       id: `${scope}.sanitizer.productionInlineCss`,
-      defaultMessage: 'Consider inlining CSS for better email client compatibility'
+      defaultMessage: 'Consider inlining CSS for better email client compatibility',
     },
     productionLargeContent: {
       id: `${scope}.sanitizer.productionLargeContent`,
-      defaultMessage: 'Content is large ({size} characters) - consider optimizing for mobile performance'
-    }
+      defaultMessage: 'Content is large ({size} characters) - consider optimizing for mobile performance',
+    },
   },
 
   // HTML Validator messages
@@ -335,55 +335,55 @@ export default defineMessages({
     // General validation messages
     validationFailed: {
       id: `${scope}.validator.validationFailed`,
-      defaultMessage: 'Validation failed: {error}'
+      defaultMessage: 'Validation failed: {error}',
     },
     liquidValidationFailed: {
       id: `${scope}.validator.liquidValidationFailed`,
-      defaultMessage: 'Liquid validation failed'
+      defaultMessage: 'Liquid validation failed',
     },
 
     // Security validation messages
     unsafeProtocolDetected: {
       id: `${scope}.validator.unsafeProtocolDetected`,
-      defaultMessage: 'Potentially unsafe protocol detected: {protocol}'
+      defaultMessage: 'Potentially unsafe protocol detected: {protocol}',
     },
     scriptTagsDetected: {
       id: `${scope}.validator.scriptTagsDetected`,
-      defaultMessage: 'Script tags detected - may be filtered in production'
+      defaultMessage: 'Script tags detected - may be filtered in production',
     },
 
     // Email-specific validation messages
     outlookIncompatible: {
       id: `${scope}.validator.outlookIncompatible`,
-      defaultMessage: 'Element may not be supported in Outlook: {element}'
+      defaultMessage: 'Element may not be supported in Outlook: {element}',
     },
     emailCssUnsupported: {
       id: `${scope}.validator.emailCssUnsupported`,
-      defaultMessage: 'CSS feature may not be supported in email clients'
+      defaultMessage: 'CSS feature may not be supported in email clients',
     },
 
     // Mobile/InApp validation messages
     mobileIncompatible: {
       id: `${scope}.validator.mobileIncompatible`,
-      defaultMessage: 'Element may not be supported on mobile: {element}'
+      defaultMessage: 'Element may not be supported on mobile: {element}',
     },
     largeImageDetected: {
       id: `${scope}.validator.largeImageDetected`,
-      defaultMessage: 'Large image dimensions detected - consider mobile optimization'
+      defaultMessage: 'Large image dimensions detected - consider mobile optimization',
     },
 
     // CSS validation messages
     unclosedCssRule: {
       id: `${scope}.validator.unclosedCssRule`,
-      defaultMessage: 'Unclosed CSS rule detected'
+      defaultMessage: 'Unclosed CSS rule detected',
     },
     emptyCssRule: {
       id: `${scope}.validator.emptyCssRule`,
-      defaultMessage: 'Empty CSS rule detected'
+      defaultMessage: 'Empty CSS rule detected',
     },
     cssValidationFailed: {
       id: `${scope}.validator.cssValidationFailed`,
-      defaultMessage: 'CSS validation failed: {error}'
-    }
-  }
+      defaultMessage: 'CSS validation failed: {error}',
+    },
+  },
 });

package/v2Components/MobilePushPreviewV2/index.js

@@ -26,8 +26,17 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.getPreview = this.getPreview.bind(this);
     this.setContent = this.setContent.bind(this);
     this.goToDuplicate = this.goToDuplicate.bind(this);
-    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent.title');
-    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent.title');
+    // Check for INAPP channel structure (versions.base.content.ANDROID/IOS) or MOBILE_PUSH structure (versions.base.ANDROID/IOS)
+    const { channel, templateData } = props;
+    let hasAndroid;
+    let hasIos;
+    if (channel === INAPP.toUpperCase()) {
+      hasAndroid = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent');
+      hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
+    } else {
+      hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
+      hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
+    }
     let device = "android";
     if (hasAndroid) {
       device = 'android';
@@ -45,6 +54,17 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     if (channel === INAPP.toUpperCase()) {
       const androidContent = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent');
       const iosContent = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
+      const isBeeFreeTemplate = get(androidContent, 'isBEEeditor') || get(iosContent, 'isBEEeditor');
+      if (isBeeFreeTemplate) {
+        // Normalize device to 'android' or 'ios' for comparison
+        const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+        const isAndroid = normalizedDevice === ANDROID.toLowerCase();
+        content = {
+          inAppPreviewContent: isAndroid ? androidContent?.beeHtml : iosContent?.beeHtml,
+          isBeeFreeTemplate: true,
+        };
+        return content;
+      }
       const androidPreviewContent = {
         templateTitle: androidContent?.title,
         templateMsg: androidContent?.message,
@@ -57,9 +77,12 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.image },
         ctaData: getCtaObject(iosContent?.expandableDetails?.ctas),
       };
+      // Normalize device to 'android' or 'ios' for comparison
+      const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+      const isAndroid = normalizedDevice === ANDROID.toLowerCase();
       content = {
-        inAppPreviewContent: device === ANDROID.toLowerCase() ? androidPreviewContent : iosPreviewContent,
-        templateLayoutType: device === ANDROID.toLowerCase() ? androidContent?.bodyType : iosContent?.bodyType,
+        inAppPreviewContent: isAndroid ? androidPreviewContent : iosPreviewContent,
+        templateLayoutType: isAndroid ? androidContent?.bodyType : iosContent?.bodyType,
       };
     } else if (channel === MOBILE_PUSH) {
       const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
@@ -125,7 +148,9 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
   }
 
   getPreview(device) {
-    const deviceParam = device === ANDROID.toLowerCase() ? ANDROID : IOS;
+    // Normalize device to 'android' or 'ios' for comparison
+    const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+    const deviceParam = normalizedDevice === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
       <TemplatePreview
         device={this.props.channel === INAPP.toUpperCase() ? deviceParam : device}
@@ -159,8 +184,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
       hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
     } else if (this.props.channel === INAPP.toUpperCase()) {
-      hasAndroid = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent.title');
-      hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent.title');
+      hasAndroid = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent');
+      hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
     }
     const hasBothAndroidAndIos = hasAndroid && hasIos;
     return (

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -59,10 +59,9 @@
             .inapp-message-container-HEADER-ANDROID {
               position: absolute;
               display: flex;
-              // bottom: 19.4rem;
-              width: 200px;
-              left: 28%;
-              top: 20px;
+              width: 17.571rem;
+              left: 18%;
+              top: 4.071rem;
       
               .inapp-title-HEADER-ANDROID {
                 left: 34%;
@@ -132,19 +131,20 @@
               position: absolute;
               display: flex;
               justify-content: center;
-              bottom: 1.5%;
-              width: 200px;
-              left: 28%;
+              bottom: 2.5%;
+              width: 16.571rem;
+              left: 21%;
+              background-color: $CAP_WHITE;
       
               .inapp-title-FOOTER-ANDROID {
-                width: 90px;
+                width: 6.429rem;
                 height: 12px;
                 text-align: left;
                 left: 34%;
                 justify-content: center;
                 position: relative;
                 right: 33%;
-                bottom: -22px;
+                bottom: -1.429rem;
                 font-size: 10px;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -204,7 +204,8 @@
               position: absolute;
               top: 10%;
               display: flex;
-              left: 29%;
+              left: 20%;
+              width: 16.643rem;
               .inapp-title-FULLSCREEN-ANDROID {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -241,7 +242,7 @@
               position: absolute;
               top: 20%;
               display: flex;
-              width: 200px;
+              width: 14.286rem;
               left: 28%;
       
               .inapp-title-POPUP-iOS {
@@ -280,16 +281,16 @@
             .inapp-message-container-HEADER-iOS {
               position: absolute;
               display: flex;
-              width: 200px;
-              left: 28%;
-              top: 3%;
+              width: 16.571rem;
+              left: 20%;
+              top: 10%;
       
               .inapp-title-HEADER-iOS {
                 left: 34%;
                 top: 15%;
                 position: relative;
                 font-size: 10px;
-                width: 90px;
+                width: 6.429rem;
                 height: 12px;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -300,7 +301,7 @@
 
               .without-image-title-HEADER-ios {
                 left: 26%;
-                top: 18px;
+                top: 1.286rem;
                 text-align: center;
               }
       
@@ -330,7 +331,7 @@
               .without-image-content-HEADER-ios {
                 width: 92%;
                 left: 6%;
-                top: 21px;
+                top: 1.5rem;
               }
       
               .inapp-button-HEADER-iOS {
@@ -350,9 +351,9 @@
               position: absolute;
               display: flex;
               justify-content: center;
-              width: 200px;
-              left: 28%;
-              top: 75%;
+              width: 16.571rem;
+              left: 20%;
+              top: 45%;
       
               .inapp-title-FOOTER-iOS {
                 width: 90px;
@@ -423,7 +424,8 @@
               position: absolute;
               top: 10%;
               display: flex;
-              left: 29%;
+              left: 20%;
+              width: 16.643rem;
               .inapp-title-FULLSCREEN-iOS {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -455,6 +457,14 @@
                 bottom: -1%;
               }
             }
+            
+            .inapp-message-container-MODAL-ANDROID, .inapp-message-container-MODAL-iOS {
+              position: absolute;
+              top: 30%;
+              display: flex;
+              width: 200px;
+              left: 28%;
+            }
   }