@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.126

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -9,11 +9,10 @@
   width: 450px;
 
   .preview-image {
-      width: 70%;
+      width: 51%;
       &.sms {
         width: 45%;
       }
-      &.mobilepush
 
             .inapp-message-container-POPUP-ANDROID {
               position: absolute;
@@ -576,9 +575,9 @@
   }
   .android-push-message-Container, .iphone-push-message-Container{
     position: absolute;
-    top: 30%;
-    left: 18%;
-    width: 63%;
+    top: 11%;
+    left: 28.8%;
+    width: 42%;
     height: 336px;
     overflow: auto;
     display: -webkit-box;
@@ -606,130 +605,98 @@
         }
       }
     }
-    .mobile-push-carousel-card {
-        position: relative;
-        min-width: 258px;
-        margin-right: 12px;
-        background: #fff;
-        color: #091e42;
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 0;
-        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.08);
-    
-        .carousel-image {
-          width: 100%;
-          height: 180px;
-          object-fit: contain;
-          border-radius: 8px 8px 0 0;
-        }
-    
-        .carousel-video-preview {
-          width: 100%;
-          height: 180px;
-          object-fit: contain;
-          border-radius: 8px 8px 0 0;
-          opacity: 0.7;
-        }
-    
-        .carousel-content {
-          padding: 10px 12px;
-          width: 100%;
-    
-          .carousel-title {
-            font-weight: 600;
-            font-size: 14px;
-            margin-bottom: 4px;
-          }
-    
-          .carousel-message {
-            font-size: 13px;
-            color: #555;
-          }
-    
-          .carousel-link {
-            margin-top: 8px;
-    
-            a {
-              color: #2466ea;
-              font-size: 12px;
-              text-decoration: underline;
-            }
-          }
-        }
-      }
   }
-  .android-push-message-Container, .iphone-push-message-Container{
-    .title, .body-text, .body-image, .app-header{
+  .android-push-message-Container{
+    .title, .body-text, .body-image, .app-name{
       background-color: #FFFFFF;
       color: #333333;
     }
-    .app-header{
+    .app-name{
       color: #5D5D5D;
       font-weight: 600;
-      padding: $CAP_SPACE_04 $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .app-icon{
-        width: $CAP_SPACE_12;
-        height: $CAP_SPACE_12;
-        border-radius: 50%;
-        background-color: #737070;
-      }
+      padding: 8px 8px 4px 8px;
+    }
+    .title, .body-image{
+      padding: 0 8px 0 8px;
 
-      .app-header-left{
-        display: flex;
-        align-items: center;
-      }
-      .app-header-right{
-        display: flex;
-        align-items: center;
+    }
+    .body-text{
+      padding: 0 8px 4px 8px;
+      color: #5a5959;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .actions{
+      background-color: #EEEEEE;
+      height: 32px;
+      padding: 4px;
+      .action{
+        line-height: 24px;
         font-size: 10px;
-        span{
-          font-weight: 200;
-        }
+        font-weight: 600;
+        color: #1970DA;
+        height: 12px;
+        margin-left: 8px;
       }
     }
-    .title{
-      padding: 0 $CAP_SPACE_08 0 $CAP_SPACE_08;
+  }
+  .iphone-push-message-Container{
+    top: 8%;
+    .message-pop{
+      border-radius: 4px;
+      word-wrap: break-word;
+    }
+    .title, .body-text, .body-image, .app-name{
+      background-color: #FFFFFF;
+      color: #333333;
     }
     .body-image{
-      padding: 0 $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
-      img{
-        border-radius: 3%;
+      padding-top: 8px;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .app-name{
+      padding: 8px;
+      color: #5D5D5D;
+      border-bottom: solid 1px #D6D6D6;
+      .material-icons{
+        font-size: 12px;
+        float: right;
       }
     }
-    .body-text{
-      padding: $CAP_SPACE_04 $CAP_SPACE_08 0.625rem $CAP_SPACE_08;
-      padding-left: $CAP_SPACE_32;
-      font-size: $FONT_SIZE_S;
+    .title, .body-text{
+      padding: 4px;
     }
     .title{
-      font-size: $FONT_SIZE_S;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      font-weight: 500;
-      max-width: 11.25rem;
+    }
+    .body-text{
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
     }
     .actions{
-      background-color: #ffffff;
-      height: auto;
-      padding: $CAP_SPACE_08;
+      background-color: #FFFFFF;
+      opacity: 0.8;
+      height: 32px;
+      line-height: 26px;
+      margin-top: 4px;
+      border-radius: 6px;
       text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: $CAP_SPACE_08;
+      padding: 4px;
       .action{
-        font-size: $FONT_SIZE_S;
+        font-size: 12px;
         font-weight: 600;
-        color: #1970DA;
-        height: 1.25rem;
+        color: #000000;
+        text-align: center;
+        margin-left: 8px;
       }
     }
   }
@@ -800,15 +767,6 @@
       }
     }
   }
-
-  .mobile-push-scroll-container {
-    position: relative;
-  }
-  // Mobile Push Carousel Styles
-  .mobile-push-carousel-container {
-    background-color: #fff;
-    padding-left: 22px;
-  }
 }
 
 .align-center {

package/v2Components/TemplatePreview/index.js

@@ -32,7 +32,6 @@ import {
   RCS,
   ZALO,
   INAPP,
-  MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
@@ -67,8 +66,8 @@ const viberMobileAndroid = require('./assets/images/viberMobile.svg');
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
-const androidPushMessagePhone = require('./assets/images/Android _ With date and time.svg');
-const iPhonePushMessagePhone = require('./assets/images/iOS _ With date and time.svg');
+const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
+const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -168,53 +167,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     this.props.onTestContentClicked(params);
   };
 
-  renderMobilePushCarousel = (content) => {
-    if (!content?.carouselData || content.carouselData.length === 0) {
-      return null;
-    }
-
-    return (
-      <div className="msg-container-carousel mobile-push-carousel-container">
-        <div className="scroll-container mobile-push-scroll-container">
-          {content.carouselData.map((item, idx) => (
-            <div
-              key={`carousel-card-${idx}`}
-              className="mobile-push-carousel-card message-pop align-left message-pop-carousel"
-            >
-              {item.mediaType === "image" && item.imageUrl && (
-                <CapImage
-                  src={item.imageUrl}
-                  alt="carousel-img"
-                  className="carousel-image"
-                />
-              )}
-              {item.mediaType === "video" && item.videoPreviewImg && (
-                <div className="video-preview">
-                  <CapImage
-                    src={item.videoPreviewImg}
-                    alt="carousel-video-preview"
-                    className="carousel-video-preview"
-                  />
-                  <div className="icon-position">
-                    <CapImage className="video-icon" src={videoPlay} />
-                  </div>
-                </div>
-              )}
-              <div className="carousel-content">
-                <div className="carousel-title">
-                  {item.title || item.header || ""}
-                </div>
-                <div className="carousel-message">
-                  {item.message || item.bodyText || ""}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  };
-
   render() {
     const {
       channel,
@@ -261,7 +213,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
     let iosActions = [];
     if ((channel || '').toLowerCase() === "mobilepush") {
-      iosActions = _.map(content.actions || [], (action) => {
+      iosActions = _.map(content.actions, (action) => {
         if (action.label) {
           return (<div className="actions" key={`action-${action.label}`}>
               <span className="action">{action.label.toUpperCase()}</span>
@@ -458,32 +410,31 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       handlePreviewInNewTab(templatePreviewUrl);
     };
 
-    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;
-      }
-    } 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;
+    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;
+        }
+      } 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;
+        }
       }
-    }
-  };
-
+    };
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
     return (
@@ -655,7 +606,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             ) : (
               ""
             )}
-            {channel && channel.toUpperCase() === MOBILE_PUSH && (
+            {channel && channel.toLowerCase() === "mobilepush" && (
               <div className="shell-v2 align-center" id="mobilepush-preview">
                 <CapImage
                   className="preview-image"
@@ -668,7 +619,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 {(!!content.header ||
                   !!content.bodyText ||
-                  !!content.bodyImage || !!content.bodyVideo?.videoSrc || !!content.bodyGif) && (
+                  !!content.bodyImage) && (
                   <div
                     className={`${
                       this.props.device === "ios" ? "iphone" : this.props.device
@@ -676,54 +627,22 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   >
                     {this.props.device === "android" ? (
                       <div className="message-pop align-left">
-                        <div className="app-header">
-                          <div className="app-header-left">
-                          <span className="app-icon">{""}</span>
-                          <div className="title">{content.header}</div>
-                          </div>
-                          <div className="app-header-right">
-                            <span>2:29 PM</span>
-                            <CapIcon type="chevron-down" size="sm" />
-                          </div>
+                        <div className="app-name">
+                          <span className="app-icon"></span>{" "}
+                          {content.appName ? content.appName : "App name"}
                         </div>
+                        <div className="title">{content.header}</div>
                         <div className="body-text">{content.bodyText}</div>
-                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content.bodyGif) && (
+                        {content.bodyImage && (
                           <div className="body-image">
-                            {(() => {
-                              if (content?.bodyVideo?.videoSrc && !content.bodyImage && !content.bodyGif) {
-                                return (
-                                  <video 
-                                    key={`android-video-${content.bodyVideo.videoSrc}`}
-                                    controls 
-                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
-                                    poster={content?.bodyVideo?.videoPreview || undefined}
-                                  >
-                                    <source src={content.bodyVideo.videoSrc} type="video/mp4" />
-                                    {formatMessage(messages.videoNotSupported)}
-                                  </video>
-                                );
-                              } else if (content.bodyGif) {
-                                return (
-                                  <img 
-                                    src={content.bodyGif} 
-                                    alt="GIF preview" 
-                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
-                                    key={`android-gif-${content.bodyGif}`}
-                                  />
-                                );
-                              } else {
-                                return (
-                                  <CapImage src={content.bodyImage || content?.bodyVideo?.videoPreview} alt="" />
-                                );
-                              }
-                            })()}
+                            <CapImage src={content.bodyImage} alt="" />
                           </div>
                         )}
-                        {(content.actions || []).filter((action) => action.label)
+                        {content.actions.filter((action) => action.label)
                           .length ? (
                             <div className="actions">
                               {_.map(
-                                content.actions || [],
+                                content.actions,
                               (action) =>
                                 !!action.label && (
                                   <span
@@ -738,73 +657,26 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                           ) : (
                             ""
                           )}
-                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
                       </div>
                     ) : (
                       <div className="message-pop align-left">
-                        <div className="app-header">
-                          <div className="app-header-left">
-                          <span className="app-icon">{""}</span>
-                          <div className="title">{content.header}</div>
-                          </div>
-                          <div className="app-header-right">
-                            <span>2:29 PM</span>
-                            <CapIcon type="chevron-down" size="sm" />
-                          </div>
+                        <div className="app-name">
+                          <span className="app-icon"></span>
+                          {content.appName ? content.appName : "App name"}{" "}
+                          <i className="material-icons">
+                            {this.props.intl.formatMessage(messages.close)}
+                          </i>
                         </div>
-                        <div className="body-text">{content.bodyText}</div>
-                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content.bodyGif) && (
+                        {content.bodyImage && (
                           <div className="body-image">
-                            {(() => {
-                              if (content?.bodyVideo?.videoSrc && !content.bodyImage && !content.bodyGif) {
-                                return (
-                                  <video 
-                                    key={`ios-video-${content.bodyVideo.videoSrc}`}
-                                    controls 
-                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
-                                    poster={content?.bodyVideo?.videoPreview || undefined}
-                                  >
-                                    <source src={content.bodyVideo.videoSrc} type="video/mp4" />
-                                    {formatMessage(messages.videoNotSupported)}
-                                  </video>
-                                );
-                              } else if (content.bodyGif) {
-                                return (
-                                  <img 
-                                    src={content.bodyGif} 
-                                    alt="GIF preview" 
-                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
-                                    key={`ios-gif-${content.bodyGif}`}
-                                  />
-                                );
-                              } else {
-                                return (
-                                  <CapImage src={content.bodyImage || content?.bodyVideo?.videoPreview} alt="" />
-                                );
-                              }
-                            })()}
+                            <CapImage src={content.bodyImage} alt="" />
                           </div>
                         )}
-                        {(content.actions || []).filter((action) => action.label)
-                          .length ? (
-                            <div className="actions">
-                              {_.map(
-                                content.actions || [],
-                              (action) =>
-                                !!action.label && (
-                                  <span
-                                    className="action"
-                                    key={`action-${action.label}`}
-                                  >
-                                    {action.label && action.label.toUpperCase()}
-                                  </span>
-                                )
-                              )}
-                            </div>
-                          ) : (
-                            ""
-                          )}
-                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
+                        <div className="title">{content.header}</div>
+                        <div className="body-text">{content.bodyText}</div>
+                        {content.actions.filter((action) => action.label).length
+                          ? iosActions
+                          : ""}
                       </div>
                     )}
                   </div>

package/v2Components/TemplatePreview/messages.js

@@ -90,8 +90,4 @@ export default defineMessages({
     id: `creatives.componentsV2.TemplatePreview.addToCart`,
     defaultMessage: 'Add to cart',
   },
-  videoNotSupported: {
-    id: 'creatives.componentsV2.TemplatePreview.videoNotSupported',
-    defaultMessage: 'Your browser does not support the video tag.',
-  },
 });