@capillarytech/creatives-library 8.0.271 → 8.0.273

package/v2Components/HtmlEditor/utils/validationAdapter.js

@@ -16,7 +16,7 @@ const VALIDATION_SOURCES = {
   EMAIL_SPECIFIC: 'email-specific',
   INAPP_SPECIFIC: 'inapp-specific',
   EMAIL_COMPATIBILITY: 'email-compatibility',
-  MOBILE_OPTIMIZATION: 'mobile-optimization'
+  MOBILE_OPTIMIZATION: 'mobile-optimization',
 };
 
 /**
@@ -30,42 +30,47 @@ export const transformValidationToErrorInfo = (validation, variant = 'email') =>
     return { errorMessages: { LIQUID_ERROR_MSG: [], STANDARD_ERROR_MSG: [] } };
   }
 
+  if (typeof validation.getAllIssues !== 'function') {
+    console.warn('[validationAdapter] validation.getAllIssues is not a function:', validation);
+    return { errorMessages: { LIQUID_ERROR_MSG: [], STANDARD_ERROR_MSG: [] } };
+  }
+
   const allIssues = validation.getAllIssues();
+  // Safety check: ensure allIssues is an array
+  if (!Array.isArray(allIssues)) {
+    console.warn('[validationAdapter] validation.getAllIssues() did not return an array:', allIssues);
+    return { errorMessages: { LIQUID_ERROR_MSG: [], STANDARD_ERROR_MSG: [] } };
+  }
 
   // Separate liquid and standard errors
-  const liquidErrors = allIssues.filter(issue =>
-    issue.source === VALIDATION_SOURCES.LIQUID ||
-    issue.rule?.includes('liquid') ||
-    issue.message?.toLowerCase().includes('liquid')
-  );
-
-  const standardErrors = allIssues.filter(issue =>
-    issue.source !== VALIDATION_SOURCES.LIQUID &&
-    !issue.rule?.includes('liquid') &&
-    !issue.message?.toLowerCase().includes('liquid')
-  );
+  const liquidErrors = allIssues.filter((issue) => issue.source === VALIDATION_SOURCES.LIQUID
+    || issue.rule?.includes('liquid')
+    || issue.message?.toLowerCase().includes('liquid'));
+
+  const standardErrors = allIssues.filter((issue) => issue.source !== VALIDATION_SOURCES.LIQUID
+    && !issue.rule?.includes('liquid')
+    && !issue.message?.toLowerCase().includes('liquid'));
 
   // Format errors for ErrorInfoNote
-  const formatErrors = (errors) =>
-    errors.map(error => {
-      let message = error.message;
-
-      // Add line/column info if available
-      if (error.line) {
-        message += ` Line ${error.line}`;
-        if (error.column) {
-          message += `, Char ${error.column}`;
-        }
-        message += '.';
+  const formatErrors = (errors) => errors.map((error) => {
+    let {message} = error;
+
+    // Add line/column info if available
+    if (error.line) {
+      message += ` Line ${error.line}`;
+      if (error.column) {
+        message += `, Char ${error.column}`;
       }
+      message += '.';
+    }
 
-      // Add rule info if available
-      if (error.rule) {
-        message += ` • ${error.rule}`;
-      }
+    // Add rule info if available
+    if (error.rule) {
+      message += ` • ${error.rule}`;
+    }
 
-      return message;
-    });
+    return message;
+  });
 
   // Handle InApp variant with platform-specific errors (if needed in future)
   if (variant === 'inapp') {
@@ -74,8 +79,8 @@ export const transformValidationToErrorInfo = (validation, variant = 'email') =>
     return {
       errorMessages: {
         LIQUID_ERROR_MSG: formatErrors(liquidErrors),
-        STANDARD_ERROR_MSG: formatErrors(standardErrors)
-      }
+        STANDARD_ERROR_MSG: formatErrors(standardErrors),
+      },
     };
   }
 
@@ -83,8 +88,8 @@ export const transformValidationToErrorInfo = (validation, variant = 'email') =>
   return {
     errorMessages: {
       LIQUID_ERROR_MSG: formatErrors(liquidErrors),
-      STANDARD_ERROR_MSG: formatErrors(standardErrors)
-    }
+      STANDARD_ERROR_MSG: formatErrors(standardErrors),
+    },
   };
 };
 
@@ -98,7 +103,18 @@ export const hasValidationErrors = (validation) => {
     return false;
   }
 
+  if (typeof validation.getAllIssues !== 'function') {
+    console.warn('[validationAdapter] validation.getAllIssues is not a function:', validation);
+    return false;
+  }
+
   const allIssues = validation.getAllIssues();
+  // Safety check: ensure allIssues is an array
+  if (!Array.isArray(allIssues)) {
+    console.warn('[validationAdapter] validation.getAllIssues() did not return an array:', allIssues);
+    return false;
+  }
+
   return allIssues.length > 0;
 };
 
@@ -112,19 +128,28 @@ export const getValidationSummary = (validation) => {
     return { totalErrors: 0, totalWarnings: 0, hasLiquidErrors: false };
   }
 
+  if (typeof validation.getAllIssues !== 'function') {
+    console.warn('[validationAdapter] validation.getAllIssues is not a function:', validation);
+    return { totalErrors: 0, totalWarnings: 0, hasLiquidErrors: false };
+  }
+
   const allIssues = validation.getAllIssues();
-  const errors = allIssues.filter(issue => issue.severity === 'error');
-  const warnings = allIssues.filter(issue => issue.severity === 'warning');
-  const liquidErrors = allIssues.filter(issue =>
-    issue.source === VALIDATION_SOURCES.LIQUID ||
-    issue.rule?.includes('liquid') ||
-    issue.message?.toLowerCase().includes('liquid')
-  );
+  // Safety check: ensure allIssues is an array
+  if (!Array.isArray(allIssues)) {
+    console.warn('[validationAdapter] validation.getAllIssues() did not return an array:', allIssues);
+    return { totalErrors: 0, totalWarnings: 0, hasLiquidErrors: false };
+  }
+
+  const errors = allIssues.filter((issue) => issue.severity === 'error');
+  const warnings = allIssues.filter((issue) => issue.severity === 'warning');
+  const liquidErrors = allIssues.filter((issue) => issue.source === VALIDATION_SOURCES.LIQUID
+    || issue.rule?.includes('liquid')
+    || issue.message?.toLowerCase().includes('liquid'));
 
   return {
     totalErrors: errors.length,
     totalWarnings: warnings.length,
     hasLiquidErrors: liquidErrors.length > 0,
-    totalIssues: allIssues.length
+    totalIssues: allIssues.length,
   };
 };

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -0,0 +1,38 @@
+/**
+ * Validation Constants
+ *
+ * Shared constants for validation issue categorization across HTML Editor components
+ */
+
+// Issue sources for categorizing validation errors
+export const ISSUE_SOURCES = {
+  HTMLHINT: 'htmlhint',
+  CSS_VALIDATOR: 'css-validator',
+  CUSTOM: 'custom',
+  SECURITY: 'security',
+  LIQUID: 'liquid-validator',
+};
+
+// Label issue patterns - syntax errors related to tags
+// These patterns identify tag syntax errors (open/close tags, attributes, brackets)
+export const LABEL_ISSUE_PATTERNS = [
+  'tag must be paired',
+  'open tag match failed',
+  'closed tag match failed',
+  'missing required',
+  'tag-pair',
+  'attr-value-not-empty',
+  'attr-no-duplication',
+  'tag-self-close',
+  'spec-char-escape',
+  'tagname-lowercase',
+  'attr-lowercase',
+  'src-not-empty',
+  'alt-require',
+];
+
+// Tab keys: Errors = blocking, Warnings = non-blocking
+export const ERROR_TAB_KEYS = {
+  ERRORS: 'errors',
+  WARNINGS: 'warnings',
+};

package/v2Components/MobilePushPreviewV2/constants.js

@@ -0,0 +1,6 @@
+export const DEVICE_TYPES = {
+  ANDROID: 'android',
+  IOS: 'ios',
+};
+
+export const IPHONE = 'iphone';

package/v2Components/MobilePushPreviewV2/index.js

@@ -16,6 +16,7 @@ import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 import { getCtaObject } from '../../v2Containers/InApp/utils';
 import { CAROUSEL, VIDEO } from '../../v2Containers/MobilePushNew/constants';
+import { DEVICE_TYPES, IPHONE } from './constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -26,8 +27,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 +55,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 ? DEVICE_TYPES.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 +78,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 ? DEVICE_TYPES.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 +149,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 ? DEVICE_TYPES.IOS : device?.toLowerCase();
+    const deviceParam = normalizedDevice === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
       <TemplatePreview
         device={this.props.channel === INAPP.toUpperCase() ? deviceParam : device}
@@ -159,8 +185,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

@@ -1,5 +1,16 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
+.shell-v2 {
+  &.align-center {
+    .preview-image-container {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 .shell-v2 {
   position: relative;
   -webkit-transform: translate(-50%);
@@ -16,10 +27,11 @@
       &.mobilepush
 
             .inapp-message-container-POPUP-ANDROID {
+              background-color: $CAP_WHITE;
               position: absolute;
-              top: 20%;
+              top: 30%;
               display: flex;
-              width: 200px;
+              width: 14.286rem;
               left: 28%;
       
               .inapp-title-POPUP-ANDROID {
@@ -59,10 +71,10 @@
             .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;
+              background-color: $CAP_WHITE;
       
               .inapp-title-HEADER-ANDROID {
                 left: 34%;
@@ -129,22 +141,24 @@
       
       
             .inapp-message-container-FOOTER-ANDROID {
+              background-color: $CAP_WHITE;
               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;
@@ -201,10 +215,12 @@
             }
       
             .inapp-message-container-FULLSCREEN-ANDROID {
+              background-color: $CAP_WHITE;
               position: absolute;
               top: 10%;
               display: flex;
-              left: 29%;
+              left: 20%;
+              width: 16.643rem;
               .inapp-title-FULLSCREEN-ANDROID {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -238,10 +254,11 @@
             }
       
             .inapp-message-container-POPUP-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
-              top: 20%;
+              top: 30%;
               display: flex;
-              width: 200px;
+              width: 14.286rem;
               left: 28%;
       
               .inapp-title-POPUP-iOS {
@@ -278,18 +295,19 @@
             }
 
             .inapp-message-container-HEADER-iOS {
+              background-color: $CAP_WHITE;
               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 +318,7 @@
 
               .without-image-title-HEADER-ios {
                 left: 26%;
-                top: 18px;
+                top: 1.286rem;
                 text-align: center;
               }
       
@@ -330,7 +348,7 @@
               .without-image-content-HEADER-ios {
                 width: 92%;
                 left: 6%;
-                top: 21px;
+                top: 1.5rem;
               }
       
               .inapp-button-HEADER-iOS {
@@ -347,12 +365,14 @@
             }
 
             .inapp-message-container-FOOTER-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
               justify-content: center;
-              width: 200px;
-              left: 28%;
-              top: 75%;
+              width: 16.571rem;
+              left: 20%;
+              top: 42%;
+              bottom: 3.5%;
       
               .inapp-title-FOOTER-iOS {
                 width: 90px;
@@ -420,10 +440,12 @@
             }
 
             .inapp-message-container-FULLSCREEN-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               top: 10%;
               display: flex;
-              left: 29%;
+              left: 20%;
+              width: 16.643rem;
               .inapp-title-FULLSCREEN-iOS {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -455,6 +477,15 @@
                 bottom: -1%;
               }
             }
+            
+            .inapp-message-container-MODAL-ANDROID, .inapp-message-container-MODAL-iOS {
+              background-color: $CAP_WHITE;
+              position: absolute;
+              top: 30%;
+              display: flex;
+              width: 14.286rem;
+              left: 28%;
+            }
   }
 
 

package/v2Components/TemplatePreview/index.js

@@ -37,14 +37,8 @@ import {
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import Carousel from '../Carousel';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
-import inAppMobileAndroidModal from './assets/images/inapp_mobile_android_modal.svg';
-import inAppMobileAndroidTop from './assets/images/inapp_mobile_android_top.svg';
-import inAppMobileAndroidBottom from './assets/images/inapp_mobile_android_bottom.svg';
-import inAppMobileAndroidFull from './assets/images/inapp_mobile_android_full.svg';
-import inAppMobileIOSModal from './assets/images/inapp_mobile_ios_modal.svg';
-import inAppMobileIOSTop from './assets/images/inapp_mobile_ios_top.svg';
-import inAppMobileIOSBottom from './assets/images/inapp_mobile_ios_bottom.svg';
-import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
+import inAppMobileDeviceAndroid from '../../assets/Android.png';
+import inAppMobileDeviceIos from '../../assets/iOS.png';
 import whatsappImageEmptyPreview from './assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from './assets/images/empty_video_preview.svg';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -239,7 +233,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     } = this.props;
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const { formatMessage } = intl;
-    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent } = content || {};
+    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
     const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
     const {
       videoParams,
@@ -247,7 +241,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       buttonText: viberButtonText,
       messageContent: viberMessageContent,
     } = viberPreviewContent || {};
+    let isHTMLContent = true;
     const {mediaPreview = {}, templateTitle = "", templateMsg = "", ctaData} = inAppPreviewContent || {};
+    if(templateTitle !== undefined && ctaData !== undefined && templateMsg !== undefined) {
+      isHTMLContent = false;
+    }
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -464,27 +462,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
 
     const   getPreviewImage = () => {
     if (this.props.device === ANDROID) {
-      switch (templateLayoutType) {
-        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-          return inAppMobileAndroidModal;
-        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-          return inAppMobileAndroidTop;
-        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-          return inAppMobileAndroidBottom;
-        default:
-          return inAppMobileAndroidFull;
-      }
+      return inAppMobileDeviceAndroid;
     } else {
-      switch (templateLayoutType) {
-        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-          return inAppMobileIOSModal;
-        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-          return inAppMobileIOSTop;
-        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-          return inAppMobileIOSBottom;
-        default:
-          return inAppMobileIOSFull;
-      }
+      return inAppMobileDeviceIos;
     }
   };
 
@@ -1374,7 +1354,34 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               </div>
             )}
             {channel?.toUpperCase() === INAPP && (
-              <div className="shell-v2 align-center">
+              isBeeFreeTemplate ? (
+                  <div className="shell-v2 align-center">
+                    <CapRow className="preview-image-container">
+                      <CapImage
+                        className="preview-image"
+                        src={this.props.device === ANDROID ? inAppMobileDeviceAndroid : inAppMobileDeviceIos}
+                        alt={formatMessage(messages.previewGenerated)}
+                      />
+                      <iframe 
+                        srcDoc={inAppPreviewContent?.value} 
+                        title={formatMessage(messages.inappPreview)}
+                        style={{
+                          position: 'absolute',
+                          top: '3rem',
+                          left: '5rem',
+                          width: '60%',
+                          height: '89%',
+                          zIndex: 1,
+                          pointerEvents: 'none',
+                          backgroundColor: 'white',
+                          borderRadius: `${CAP_SPACE_08}`,
+                        }}
+                        frameBorder="0" 
+                      />
+                    </CapRow>
+                  </div>
+              ): (
+                <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
                   src={getPreviewImage()}
@@ -1382,9 +1389,15 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 <div className="preview-image">
                   <div
-                    className={`inapp-message-container-${templateLayoutType}-${device} sms`}
+                    className={`inapp-message-container-${templateLayoutType}-${device} inapp`}
                   >
-                    <div className="preview-inapp-screen">
+                    {isHTMLContent ? (
+                      <div
+                        className="inapp-html-content"
+                        dangerouslySetInnerHTML={{ __html: templateMsg }}
+                      />
+                    ) : (
+                      <div className="preview-inapp-screen">
                       {
                         <CapLabel
                           type="label15"
@@ -1449,9 +1462,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapButton>
                       )}
                     </div>
+                    )}
                   </div>
                 </div>
               </div>
+              )
             )}
           </CapRow>
         </CapColumn>

package/v2Components/TemplatePreview/messages.js

@@ -94,4 +94,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.videoNotSupported',
     defaultMessage: 'Your browser does not support the video tag.',
   },
+  inappPreview: {
+    id: 'creatives.componentsV2.TemplatePreview.inappPreview',
+    defaultMessage: 'Inapp Preview',
+  },
 });

package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss

@@ -66,6 +66,7 @@
     flex: 1;
     background-color: #f0f2f5;
     padding: $CAP_SPACE_08 $CAP_SPACE_24;
+    overflow-y: auto;
   }
 
   .panel-section {