@capillarytech/creatives-library 8.0.130 → 8.0.131

package/v2Components/TemplatePreview/index.js

@@ -32,6 +32,7 @@ import {
   RCS,
   ZALO,
   INAPP,
+  MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
@@ -55,6 +56,7 @@ import WhatsappStatusContainer from '../WhatsappStatusContainer';
 import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER } from '../../v2Containers/Whatsapp/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
+import { CAROUSEL } from '../../v2Containers/MobilePushNew/constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
@@ -66,8 +68,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/androidPushMessage.svg');
-const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
+const androidPushMessagePhone = require('./assets/images/Android_With_date_and_time.svg');
+const iPhonePushMessagePhone = require('./assets/images/iOS_With_date_and_time.svg');
 
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -167,6 +169,53 @@ 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 (
+      <CapRow className="msg-container-carousel mobile-push-carousel-container">
+        <CapRow className="scroll-container mobile-push-scroll-container">
+          {content?.carouselData?.map((item, idx) => (
+            <CapColumn
+              key={`carousel-card-${idx}`}
+              className="mobile-push-carousel-card message-pop align-left message-pop-carousel"
+            >
+              {item?.mediaType === IMAGE.toLowerCase() && item?.imageUrl && (
+                <CapImage
+                  src={item?.imageUrl}
+                  alt="carousel-img"
+                  className="carousel-image"
+                />
+              )}
+              {item?.mediaType === VIDEO.toLowerCase() && item?.videoPreviewImg && (
+                <CapRow className="video-preview">
+                  <CapImage
+                    src={item?.videoPreviewImg}
+                    alt="carousel-video-preview"
+                    className="carousel-video-preview"
+                  />
+                  <CapRow className="icon-position">
+                    <CapImage className="video-icon" src={videoPlay} />
+                  </CapRow>
+                </CapRow>
+              )}
+              <CapRow className="carousel-content">
+                <CapLabel className="carousel-title">
+                  {item?.title || item?.header || ""}
+                </CapLabel>
+                <CapLabel className="carousel-message">
+                  {item?.message || item?.bodyText || ""}
+                </CapLabel>
+              </CapRow>
+            </CapColumn>
+          ))}
+        </CapRow>
+      </CapRow>
+    );
+  };
+
   render() {
     const {
       channel,
@@ -213,11 +262,11 @@ 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}`}>
+          return (<CapRow className="actions" key={`action-${action.label}`}>
               <span className="action">{action.label.toUpperCase()}</span>
-          </div>);
+          </CapRow>);
         }
         return undefined;
       });
@@ -270,7 +319,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       actionUrl,
       sectionStyle,
     }) => (
-      <div
+      <CapRow
         className="message-pop align-left"
         style={{
           ...sectionStyle,
@@ -291,7 +340,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 <video style={{ opacity: 0.5, width: '100%' }}>
                   <source src={video} type="video/mp4" />
                 </video>
-                <div
+                <CapRow
                   style={{
                     position: 'absolute',
                     display: 'flex',
@@ -318,7 +367,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       )
                       : null
                   }
-                </div>
+                </CapRow>
               </>
             )
             : (
@@ -334,7 +383,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               />
             )
         }
-      </div>
+      </CapRow>
     );
 
     const renderWhatsappCtaPreview = () => {
@@ -410,31 +459,32 @@ 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 (
@@ -480,7 +530,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
         )}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
-            <div className="test-and-preview-container">
+            <CapRow className="test-and-preview-container">
               <CapButton
                 style={{
                   color: "#2466ea",
@@ -509,23 +559,23 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 <CapIcon type="lab" />
                 <FormattedMessage {...messages.testMessage} />
               </CapButton>
-            </div>
+            </CapRow>
           )}
-          <div
+          <CapRow
             className={`preview-container ${
               type === "embedded" ? "embedded-preview" : ""
             }`}
           >
             {channel && channel.toLowerCase() === "sms" && (
-              <div>
-                <div className="shell-v2 align-center" id="sms-preview">
+              <CapRow>
+                <CapRow className="shell-v2 align-center" id="sms-preview">
                   <CapImage
                     className="preview-image sms"
                     src={smsMobileAndroid}
                     alt={this.props.intl.formatMessage(messages.previewGenerated)}
                   />
-                  <div className="msg-container sms">
-                    <div className={"message-pop sms"}>
+                  <CapRow className="msg-container sms">
+                    <CapRow className={"message-pop sms"}>
                       {content &&
                         content.length &&
                         content.map((msg, index) => (
@@ -537,11 +587,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                             {msg}
                           </CapColumn>
                         ))}
-                    </div>
-                  </div>
-                </div>
+                    </CapRow>
+                  </CapRow>
+                </CapRow>
                 {!this.props.showCount && (
-                  <div>
+                  <CapRow>
                     <CapColumn className="character-count-col" span={22}>
                       {(channel || "").toLowerCase() === "sms" && (
                         <CapHeading type="h3">
@@ -568,12 +618,12 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapHeading>
                       )}
                     </CapColumn>
-                  </div>
+                  </CapRow>
                 )}
-              </div>
+              </CapRow>
             )}
             {channel && channel.toLowerCase() === "wechat" ? (
-              <div className="shell-v2 align-center" id="sms-preview">
+              <CapRow className="shell-v2 align-center" id="sms-preview">
                 <CapImage
                   className="preview-image"
                   src={
@@ -583,8 +633,8 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   }
                   alt={this.props.intl.formatMessage(messages.previewGenerated)}
                 />
-                <div className="msg-container wechat">
-                  <div
+                <CapRow className="msg-container wechat">
+                  <CapRow
                     className="message-pop align-left"
                     style={{
                       background: `${
@@ -600,14 +650,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     }}
                   >
                     {content}
-                  </div>
-                </div>
-              </div>
+                  </CapRow>
+                </CapRow>
+              </CapRow>
             ) : (
               ""
             )}
-            {channel && channel.toLowerCase() === "mobilepush" && (
-              <div className="shell-v2 align-center" id="mobilepush-preview">
+            {channel && channel.toUpperCase() === MOBILE_PUSH && (
+              <CapRow className="shell-v2 align-center" id="mobilepush-preview">
                 <CapImage
                   className="preview-image"
                   src={
@@ -619,69 +669,146 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 {(!!content.header ||
                   !!content.bodyText ||
-                  !!content.bodyImage) && (
-                  <div
+                  !!content.bodyImage || !!content.bodyVideo?.videoSrc || !!content.bodyGif) && (
+                  <CapRow
                     className={`${
                       this.props.device === "ios" ? "iphone" : this.props.device
                     }-push-message-Container`}
                   >
                     {this.props.device === "android" ? (
-                      <div className="message-pop align-left">
-                        <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 && (
-                          <div className="body-image">
-                            <CapImage src={content.bodyImage} alt="" />
-                          </div>
+                      <CapRow className="message-pop align-left">
+                        <CapRow className="app-header">
+                          <CapRow className="app-header-left">
+                          <span className="app-icon">{""}</span>
+                          <CapLabel className="title">{content.header}</CapLabel>
+                          </CapRow>
+                          <CapRow className="app-header-right">
+                            <span>2:29 PM</span>
+                            <CapIcon type="chevron-down" size="sm" />
+                          </CapRow>
+                        </CapRow>
+                        <CapLabel className="body-text">{content.bodyText}</CapLabel>
+                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content?.bodyGif) && (
+                          <CapRow 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', marginLeft: '24px' }}
+                                    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="" />
+                                );
+                              }
+                            })()}
+                          </CapRow>
                         )}
-                        {content.actions.filter((action) => action.label)
-                          .length ? (
-                            <div className="actions">
+                        {(content?.actions || []).filter((action) => action?.label)
+                          .length && content?.carouselData?.length === 0 ? (
+                            <CapRow className="actions">
                               {_.map(
-                                content.actions,
-                              (action) =>
-                                !!action.label && (
-                                  <span
-                                    className="action"
-                                    key={`action-${action.label}`}
-                                  >
-                                    {action.label && action.label.toUpperCase()}
-                                  </span>
-                                )
+                                content?.actions || [],
+                                (action) =>
+                                  !!action?.label && (
+                                    <span
+                                      className="action"
+                                      key={`action-${action?.label}`}
+                                      title={action?.url || ''}
+                                    >
+                                      {action?.label?.toUpperCase()}
+                                    </span>
+                                  )
                               )}
-                            </div>
-                          ) : (
-                            ""
-                          )}
-                      </div>
+                            </CapRow>
+                          ) : null}
+                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
+                      </CapRow>
                     ) : (
-                      <div className="message-pop align-left">
-                        <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>
-                        {content.bodyImage && (
-                          <div className="body-image">
-                            <CapImage src={content.bodyImage} alt="" />
-                          </div>
+                      <CapRow className="message-pop align-left">
+                        <CapRow className="app-header">
+                          <CapRow className="app-header-left">
+                          <span className="app-icon">{""}</span>
+                          <CapLabel className="title">{content.header}</CapLabel>
+                          </CapRow>
+                          <CapRow className="app-header-right">
+                            <span>2:29 PM</span>
+                            <CapIcon type="chevron-down" size="sm" />
+                          </CapRow>
+                        </CapRow>
+                        <CapLabel className="body-text">{content.bodyText}</CapLabel>
+                        {(content?.bodyImage || content?.bodyVideo?.videoSrc || content?.bodyGif) && (
+                          <CapRow 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', marginLeft: '24px' }}
+                                    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="" />
+                                );
+                              }
+                            })()}
+                          </CapRow>
                         )}
-                        <div className="title">{content.header}</div>
-                        <div className="body-text">{content.bodyText}</div>
-                        {content.actions.filter((action) => action.label).length
-                          ? iosActions
-                          : ""}
-                      </div>
+                        {(content?.actions || []).filter((action) => action?.label)
+                          .length && content?.carouselData?.length === 0 ? (
+                            <CapRow className="actions">
+                              {_.map(
+                                content?.actions || [],
+                                (action) =>
+                                  !!action?.label && (
+                                    <span
+                                      className="action"
+                                      key={`action-${action?.label}`}
+                                      title={action?.url || ''}
+                                    >
+                                      {action?.label?.toUpperCase()}
+                                    </span>
+                                  )
+                              )}
+                            </CapRow>
+                          ) : null}
+                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
+                      </CapRow>
                     )}
-                  </div>
+                  </CapRow>
                 )}
-              </div>
+              </CapRow>
             )}
             {channel && channel.toLowerCase() === "line" ? (
               <div className="shell-v2 align-center" id="sms-preview">
@@ -719,7 +846,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     {this.props.LineAccountName}
                   </div>
                   <>
-                    {content.map((item) => {
+                    {content?.map((item) => {
                       const {
                         type,
                         messageContent,
@@ -1280,7 +1407,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 </div>
               </div>
             )}
-          </div>
+          </CapRow>
         </CapColumn>
       </CapRow>
     );

package/v2Components/TemplatePreview/messages.js

@@ -90,4 +90,8 @@ 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.',
+  },
 });

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -5,7 +5,7 @@ exports[`Test Templates container Should render correct preview component for rc
   <CapColumn
     span={24}
   >
-    <div
+    <CapRow
       className="preview-container "
     >
       <div
@@ -38,7 +38,7 @@ exports[`Test Templates container Should render correct preview component for rc
           </div>
         </div>
       </div>
-    </div>
+    </CapRow>
   </CapColumn>
 </CapRow>
 `;
@@ -48,7 +48,7 @@ exports[`Test Templates container Should render correct preview component for wh
   <CapColumn
     span={24}
   >
-    <div
+    <CapRow
       className="preview-container "
     >
       <div
@@ -135,7 +135,7 @@ exports[`Test Templates container Should render correct preview component for wh
           }
         />
       </CapHeading>
-    </div>
+    </CapRow>
   </CapColumn>
 </CapRow>
 `;
@@ -145,7 +145,7 @@ exports[`Test Templates container Should render correct preview component for wh
   <CapColumn
     span={24}
   >
-    <div
+    <CapRow
       className="preview-container "
     >
       <div
@@ -207,7 +207,7 @@ exports[`Test Templates container Should render correct preview component for wh
           }
         />
       </CapHeading>
-    </div>
+    </CapRow>
   </CapColumn>
 </CapRow>
 `;
@@ -217,7 +217,7 @@ exports[`Test Templates container Should render correct preview component for wh
   <CapColumn
     span={24}
   >
-    <div
+    <CapRow
       className="preview-container "
     >
       <div
@@ -274,7 +274,7 @@ exports[`Test Templates container Should render correct preview component for wh
           }
         />
       </CapHeading>
-    </div>
+    </CapRow>
   </CapColumn>
 </CapRow>
 `;
@@ -284,7 +284,7 @@ exports[`Test Templates container Should render correct preview component for za
   <CapColumn
     span={24}
   >
-    <div
+    <CapRow
       className="preview-container "
     >
       <CapRow
@@ -321,7 +321,7 @@ exports[`Test Templates container Should render correct preview component for za
           </CapLabel>
         </CapRow>
       </CapRow>
-    </div>
+    </CapRow>
   </CapColumn>
 </CapRow>
 `;