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

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

@@ -16,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 {
@@ -60,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%;
@@ -130,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;
@@ -204,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;
@@ -243,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 {
@@ -284,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;
@@ -307,7 +300,7 @@
 
               .without-image-title-HEADER-ios {
                 left: 26%;
-                top: 1.286rem;
+                top: 18px;
                 text-align: center;
               }
       
@@ -337,7 +330,7 @@
               .without-image-content-HEADER-ios {
                 width: 92%;
                 left: 6%;
-                top: 1.5rem;
+                top: 21px;
               }
       
               .inapp-button-HEADER-iOS {
@@ -354,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;
@@ -429,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;
@@ -466,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;
+      }
     }
   };
 
@@ -1386,34 +1406,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               </div>
             )}
             {channel?.toUpperCase() === INAPP && (
-              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">
+              <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
                   src={getPreviewImage()}
@@ -1421,15 +1414,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"
@@ -1494,11 +1481,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/index.js

@@ -92,12 +92,9 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
 
-    // Use templateContent or fall back to content prop
-    const initialContent = templateContent || content;
-
-    if (initialContent) {
+    if (templateContent) {
       return {
-        resolvedBody: initialContent,
+        resolvedBody: templateContent,
         resolvedTitle: formData['template-subject'] || ''
       };
     }
@@ -115,14 +112,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;
   };
 
@@ -131,7 +128,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
     }
@@ -233,7 +230,7 @@ const TestAndPreviewSlidebox = (props) => {
           actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
       }
-
+      
       actions.fetchTestCustomersRequested();
       actions.fetchTestGroupsRequested();
     }
@@ -245,20 +242,17 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
-
-    // Fallback to content prop if templateContent is missing (for HTML editor)
-    const contentToUse = templateContent || content;
-
-    if (contentToUse && (typeof contentToUse === 'string' && contentToUse.trim() !== '')) {
+    
+    if (templateContent && templateContent.trim() !== '') {
       // Common function to handle content update
-      const handleContentUpdate = (newContent) => {
+      const handleContentUpdate = (content) => {
         setPreviewDataHtml({
-          resolvedBody: newContent,
+          resolvedBody: content,
           resolvedTitle: formData['template-subject'] || ''
         });
 
         // Extract tags from content
-        const payloadContent = convert(newContent, GLOBAL_CONVERT_OPTIONS);
+        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
         actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
       };
 
@@ -270,13 +264,13 @@ const TestAndPreviewSlidebox = (props) => {
           handleContentUpdate(templateContent);
         }
       } else {
-        // For CKEditor/HTML, only update if content changed
-        if (contentToUse !== previewDataHtml?.resolvedBody) {
-          handleContentUpdate(contentToUse);
+        // For CKEditor, only update if content changed
+        if (templateContent !== previewDataHtml?.resolvedBody) {
+          handleContentUpdate(templateContent);
         }
       }
     }
-  }, [formData, currentTab, content]);
+  }, [formData, currentTab]);
 
   // Cleanup effect to reset ref when slidebox closes
   useEffect(() => {
@@ -372,10 +366,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,
@@ -397,7 +391,7 @@ const TestAndPreviewSlidebox = (props) => {
         updatedValues[tag?.fullPath] = prefilledValues[tag?.fullPath] || '';
       });
 
-
+      
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values
@@ -445,10 +439,10 @@ const TestAndPreviewSlidebox = (props) => {
     setSelectedTestEntities([]);
     setBeeContent('');
     previousBeeContentRef.current = '';
-
+    
     // Clear any pending actions
     actions.clearPrefilledValues();
-
+    
     // Call parent's onClose if provided
     if (onClose) {
       onClose();
@@ -463,7 +457,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) => {
@@ -474,7 +468,7 @@ const TestAndPreviewSlidebox = (props) => {
 
   const handleClearSelection = () => {
     setSelectedCustomer(null);
-
+    
     // Initialize empty values for all tags
     const emptyValues = {};
     [...requiredTags, ...optionalTags].forEach((tag) => {
@@ -565,12 +559,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);
@@ -579,7 +573,7 @@ const TestAndPreviewSlidebox = (props) => {
       setCustomValues({});
       return;
     }
-
+    
     // Extract tags
     setTagsExtracted(true);
     if (templateContent) {

package/v2Containers/App/constants.js

@@ -40,6 +40,7 @@ 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';
@@ -54,6 +55,7 @@ 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';
 
@@ -65,6 +67,7 @@ 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,
@@ -75,6 +78,7 @@ 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 = {
@@ -86,6 +90,7 @@ 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';