@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.1

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

@@ -16,10 +16,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 +60,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 +130,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 +204,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 +243,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 +284,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 +307,7 @@
 
               .without-image-title-HEADER-ios {
                 left: 26%;
-                top: 18px;
+                top: 1.286rem;
                 text-align: center;
               }
       
@@ -330,7 +337,7 @@
               .without-image-content-HEADER-ios {
                 width: 92%;
                 left: 6%;
-                top: 21px;
+                top: 1.5rem;
               }
       
               .inapp-button-HEADER-iOS {
@@ -347,12 +354,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 +429,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 +466,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;
     }
   };
 
@@ -1406,7 +1386,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">
+                    <div style={{ position: 'relative', display: 'inline-block', width: '100%', height: '100%' }}>
+                      <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" 
+                      />
+                    </div>
+                  </div>
+              ): (
+                <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
                   src={getPreviewImage()}
@@ -1414,9 +1421,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"
@@ -1481,9 +1494,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/index.js

@@ -92,9 +92,12 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
 
-    if (templateContent) {
+    // Use templateContent or fall back to content prop
+    const initialContent = templateContent || content;
+
+    if (initialContent) {
       return {
-        resolvedBody: templateContent,
+        resolvedBody: initialContent,
         resolvedTitle: formData['template-subject'] || ''
       };
     }
@@ -112,14 +115,14 @@ const TestAndPreviewSlidebox = (props) => {
   const resolveTagsInText = (text, tagValues) => {
     if (!text) return text;
     let resolvedText = text;
-    
+
     // Replace each tag with its custom value
     Object.keys(tagValues).forEach((tagPath) => {
       const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
       const tagRegex = new RegExp(`{{${tagName}}}`, 'g');
       resolvedText = resolvedText.replace(tagRegex, tagValues[tagPath] || `{{${tagName}}}`);
     });
-    
+
     return resolvedText;
   };
 
@@ -128,7 +131,7 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
-    
+
     if (isDragDrop && beeContent) {
       return beeContent; // Use BEE content if available
     }
@@ -230,7 +233,7 @@ const TestAndPreviewSlidebox = (props) => {
           actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
       }
-      
+
       actions.fetchTestCustomersRequested();
       actions.fetchTestGroupsRequested();
     }
@@ -242,17 +245,20 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
-    
-    if (templateContent && templateContent.trim() !== '') {
+
+    // Fallback to content prop if templateContent is missing (for HTML editor)
+    const contentToUse = templateContent || content;
+
+    if (contentToUse && (typeof contentToUse === 'string' && contentToUse.trim() !== '')) {
       // Common function to handle content update
-      const handleContentUpdate = (content) => {
+      const handleContentUpdate = (newContent) => {
         setPreviewDataHtml({
-          resolvedBody: content,
+          resolvedBody: newContent,
           resolvedTitle: formData['template-subject'] || ''
         });
 
         // Extract tags from content
-        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+        const payloadContent = convert(newContent, GLOBAL_CONVERT_OPTIONS);
         actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
       };
 
@@ -264,13 +270,13 @@ const TestAndPreviewSlidebox = (props) => {
           handleContentUpdate(templateContent);
         }
       } else {
-        // For CKEditor, only update if content changed
-        if (templateContent !== previewDataHtml?.resolvedBody) {
-          handleContentUpdate(templateContent);
+        // For CKEditor/HTML, only update if content changed
+        if (contentToUse !== previewDataHtml?.resolvedBody) {
+          handleContentUpdate(contentToUse);
         }
       }
     }
-  }, [formData, currentTab]);
+  }, [formData, currentTab, content]);
 
   // Cleanup effect to reset ref when slidebox closes
   useEffect(() => {
@@ -366,10 +372,10 @@ const TestAndPreviewSlidebox = (props) => {
   useEffect(() => {
     if (selectedCustomer) {
       setTagsExtracted(true); // Auto-open custom values editor
-      
+
       // Get all available tags
       const allTags = [...requiredTags, ...optionalTags];
-      
+
       if (allTags.length > 0) {
         const payload = {
           channel: EMAIL,
@@ -391,7 +397,7 @@ const TestAndPreviewSlidebox = (props) => {
         updatedValues[tag?.fullPath] = prefilledValues[tag?.fullPath] || '';
       });
 
-      
+
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values
@@ -439,10 +445,10 @@ const TestAndPreviewSlidebox = (props) => {
     setSelectedTestEntities([]);
     setBeeContent('');
     previousBeeContentRef.current = '';
-    
+
     // Clear any pending actions
     actions.clearPrefilledValues();
-    
+
     // Call parent's onClose if provided
     if (onClose) {
       onClose();
@@ -457,7 +463,7 @@ const TestAndPreviewSlidebox = (props) => {
   const handleCustomerSelect = (customer) => {
     setSelectedCustomer(customer);
     setTagsExtracted(true); // Auto-open custom values editor
-    
+
     // Clear any existing values while waiting for prefilled values
     const emptyValues = {};
     [...requiredTags, ...optionalTags].forEach((tag) => {
@@ -468,7 +474,7 @@ const TestAndPreviewSlidebox = (props) => {
 
   const handleClearSelection = () => {
     setSelectedCustomer(null);
-    
+
     // Initialize empty values for all tags
     const emptyValues = {};
     [...requiredTags, ...optionalTags].forEach((tag) => {
@@ -559,12 +565,12 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
-    
+
     // Check for personalization tags (excluding unsubscribe)
     const content = templateContent || getCurrentContent;
     const tags = content.match(/{{[^}]+}}/g) || [];
     const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
-    
+
     if (!hasPersonalizationTags && tags.length === 1 && tags[0].includes('unsubscribe')) {
       // If only unsubscribe tag is present, show noTagsExtracted message
       setTagsExtracted(false);
@@ -573,7 +579,7 @@ const TestAndPreviewSlidebox = (props) => {
       setCustomValues({});
       return;
     }
-    
+
     // Extract tags
     setTagsExtracted(true);
     if (templateContent) {

package/v2Containers/App/constants.js

@@ -40,7 +40,6 @@ export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
 export const TRACK_CREATE_VIBER = 'createViber';
 export const TRACK_CREATE_FACEBOOK = 'createFacebook';
-export const TRACK_CREATE_WEBPUSH = 'createWebPush';
 
 export const CREATE = 'create';
 export const EDIT = 'edit';
@@ -55,7 +54,6 @@ export const EMAIL = 'email';
 export const ASSETS = 'assets';
 export const ZALO = 'zalo';
 export const INAPP = 'inapp';
-export const WEBPUSH = 'webpush';
 
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 
@@ -67,7 +65,6 @@ export const TRACK_EDIT_IMAGE = 'editImage';
 export const TRACK_EDIT_LINE = 'editLine';
 export const TRACK_EDIT_VIBER = 'editViber';
 export const TRACK_EDIT_FACEBOOK = 'editFacebook';
-export const TRACK_EDIT_WEBPUSH = 'editWebPush';
 
 export const CHANNEL_CREATE_TRACK_MAPPING = {
   sms: TRACK_CREATE_SMS,
@@ -78,7 +75,6 @@ export const CHANNEL_CREATE_TRACK_MAPPING = {
   line: TRACK_CREATE_LINE,
   viber: TRACK_CREATE_VIBER,
   facebook: TRACK_CREATE_FACEBOOK,
-  webpush: TRACK_CREATE_WEBPUSH,
 };
 
 export const CHANNEL_EDIT_TRACK_MAPPING = {
@@ -90,7 +86,6 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   line: TRACK_EDIT_LINE,
   viber: TRACK_EDIT_VIBER,
   facebook: TRACK_EDIT_FACEBOOK,
-  webpush: TRACK_EDIT_WEBPUSH,
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';