@capillarytech/creatives-library 8.0.259 → 8.0.260-alpha.0

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,47 +30,42 @@ 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;
-
-    // Add line/column info if available
-    if (error.line) {
-      message += ` Line ${error.line}`;
-      if (error.column) {
-        message += `, Char ${error.column}`;
+  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 += '.';
       }
-      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') {
@@ -79,8 +74,8 @@ export const transformValidationToErrorInfo = (validation, variant = 'email') =>
     return {
       errorMessages: {
         LIQUID_ERROR_MSG: formatErrors(liquidErrors),
-        STANDARD_ERROR_MSG: formatErrors(standardErrors),
-      },
+        STANDARD_ERROR_MSG: formatErrors(standardErrors)
+      }
     };
   }
 
@@ -88,8 +83,8 @@ export const transformValidationToErrorInfo = (validation, variant = 'email') =>
   return {
     errorMessages: {
       LIQUID_ERROR_MSG: formatErrors(liquidErrors),
-      STANDARD_ERROR_MSG: formatErrors(standardErrors),
-    },
+      STANDARD_ERROR_MSG: formatErrors(standardErrors)
+    }
   };
 };
 
@@ -103,18 +98,7 @@ 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;
 };
 
@@ -128,28 +112,19 @@ 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();
-  // 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'));
+  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/MobilePushPreviewV2/index.js

@@ -26,17 +26,8 @@ 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);
-    // 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');
-    }
+    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');
     let device = "android";
     if (hasAndroid) {
       device = 'android';
@@ -54,17 +45,6 @@ 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,
@@ -77,12 +57,9 @@ 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: isAndroid ? androidPreviewContent : iosPreviewContent,
-        templateLayoutType: isAndroid ? androidContent?.bodyType : iosContent?.bodyType,
+        inAppPreviewContent: device === ANDROID.toLowerCase() ? androidPreviewContent : iosPreviewContent,
+        templateLayoutType: device === ANDROID.toLowerCase() ? androidContent?.bodyType : iosContent?.bodyType,
       };
     } else if (channel === MOBILE_PUSH) {
       const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
@@ -148,9 +125,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
   }
 
   getPreview(device) {
-    // Normalize device to 'android' or 'ios' for comparison
-    const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
-    const deviceParam = normalizedDevice === ANDROID.toLowerCase() ? ANDROID : IOS;
+    const deviceParam = device === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
       <TemplatePreview
         device={this.props.channel === INAPP.toUpperCase() ? deviceParam : device}
@@ -184,8 +159,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');
-      hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
+      hasAndroid = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent.title');
+      hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent.title');
     }
     const hasBothAndroidAndIos = hasAndroid && hasIos;
     return (

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -1,16 +1,5 @@
 @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%);
@@ -27,11 +16,10 @@
       &.mobilepush
 
             .inapp-message-container-POPUP-ANDROID {
-              background-color: $CAP_WHITE;
               position: absolute;
-              top: 30%;
+              top: 20%;
               display: flex;
-              width: 14.286rem;
+              width: 200px;
               left: 28%;
       
               .inapp-title-POPUP-ANDROID {
@@ -71,10 +59,10 @@
             .inapp-message-container-HEADER-ANDROID {
               position: absolute;
               display: flex;
-              width: 17.571rem;
-              left: 18%;
-              top: 4.071rem;
-              background-color: $CAP_WHITE;
+              // bottom: 19.4rem;
+              width: 200px;
+              left: 28%;
+              top: 20px;
       
               .inapp-title-HEADER-ANDROID {
                 left: 34%;
@@ -141,24 +129,22 @@
       
       
             .inapp-message-container-FOOTER-ANDROID {
-              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
               justify-content: center;
-              bottom: 2.5%;
-              width: 16.571rem;
-              left: 21%;
-              background-color: $CAP_WHITE;
+              bottom: 1.5%;
+              width: 200px;
+              left: 28%;
       
               .inapp-title-FOOTER-ANDROID {
-                width: 6.429rem;
+                width: 90px;
                 height: 12px;
                 text-align: left;
                 left: 34%;
                 justify-content: center;
                 position: relative;
                 right: 33%;
-                bottom: -1.429rem;
+                bottom: -22px;
                 font-size: 10px;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -215,12 +201,10 @@
             }
       
             .inapp-message-container-FULLSCREEN-ANDROID {
-              background-color: $CAP_WHITE;
               position: absolute;
               top: 10%;
               display: flex;
-              left: 20%;
-              width: 16.643rem;
+              left: 29%;
               .inapp-title-FULLSCREEN-ANDROID {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -254,11 +238,10 @@
             }
       
             .inapp-message-container-POPUP-iOS {
-              background-color: $CAP_WHITE;
               position: absolute;
-              top: 30%;
+              top: 20%;
               display: flex;
-              width: 14.286rem;
+              width: 200px;
               left: 28%;
       
               .inapp-title-POPUP-iOS {
@@ -295,19 +278,18 @@
             }
 
             .inapp-message-container-HEADER-iOS {
-              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
-              width: 16.571rem;
-              left: 20%;
-              top: 10%;
+              width: 200px;
+              left: 28%;
+              top: 3%;
       
               .inapp-title-HEADER-iOS {
                 left: 34%;
                 top: 15%;
                 position: relative;
                 font-size: 10px;
-                width: 6.429rem;
+                width: 90px;
                 height: 12px;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -318,7 +300,7 @@
 
               .without-image-title-HEADER-ios {
                 left: 26%;
-                top: 1.286rem;
+                top: 18px;
                 text-align: center;
               }
       
@@ -348,7 +330,7 @@
               .without-image-content-HEADER-ios {
                 width: 92%;
                 left: 6%;
-                top: 1.5rem;
+                top: 21px;
               }
       
               .inapp-button-HEADER-iOS {
@@ -365,14 +347,12 @@
             }
 
             .inapp-message-container-FOOTER-iOS {
-              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
               justify-content: center;
-              width: 16.571rem;
-              left: 20%;
-              top: 42%;
-              bottom: 3.5%;
+              width: 200px;
+              left: 28%;
+              top: 75%;
       
               .inapp-title-FOOTER-iOS {
                 width: 90px;
@@ -440,12 +420,10 @@
             }
 
             .inapp-message-container-FULLSCREEN-iOS {
-              background-color: $CAP_WHITE;
               position: absolute;
               top: 10%;
               display: flex;
-              left: 20%;
-              width: 16.643rem;
+              left: 29%;
               .inapp-title-FULLSCREEN-iOS {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -477,15 +455,6 @@
                 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,8 +37,14 @@ import {
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import Carousel from '../Carousel';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
-import inAppMobileDeviceAndroid from '../../assets/Android.png';
-import inAppMobileDeviceIos from '../../assets/iOS.png';
+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 whatsappImageEmptyPreview from './assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from './assets/images/empty_video_preview.svg';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -233,7 +239,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, isBeeFreeTemplate } = content || {};
+    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent } = content || {};
     const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
     const {
       videoParams,
@@ -241,11 +247,7 @@ 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) {
@@ -462,9 +464,27 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
 
     const   getPreviewImage = () => {
     if (this.props.device === ANDROID) {
-      return inAppMobileDeviceAndroid;
+      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;
+      }
     } else {
-      return inAppMobileDeviceIos;
+      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;
+      }
     }
   };
 
@@ -1354,34 +1374,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               </div>
             )}
             {channel?.toUpperCase() === INAPP && (
-              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">
+              <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
                   src={getPreviewImage()}
@@ -1389,15 +1382,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 <div className="preview-image">
                   <div
-                    className={`inapp-message-container-${templateLayoutType}-${device} inapp`}
+                    className={`inapp-message-container-${templateLayoutType}-${device} sms`}
                   >
-                    {isHTMLContent ? (
-                      <div
-                        className="inapp-html-content"
-                        dangerouslySetInnerHTML={{ __html: templateMsg }}
-                      />
-                    ) : (
-                      <div className="preview-inapp-screen">
+                    <div className="preview-inapp-screen">
                       {
                         <CapLabel
                           type="label15"
@@ -1462,11 +1449,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapButton>
                       )}
                     </div>
-                    )}
                   </div>
                 </div>
               </div>
-              )
             )}
           </CapRow>
         </CapColumn>

package/v2Components/TemplatePreview/messages.js

@@ -94,8 +94,4 @@ 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,7 +66,6 @@
     flex: 1;
     background-color: #f0f2f5;
     padding: $CAP_SPACE_08 $CAP_SPACE_24;
-    overflow-y: auto;
   }
 
   .panel-section {