@capillarytech/creatives-library 7.17.117 → 7.17.118-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.117",
+  "version": "7.17.118-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -273,12 +273,8 @@ describe("Creatives testing template creation", () => {
     fireEvent.change(templateNameInput, {
       target: { value: 'viber_test_template' },
     });
-
-    const templateTextInput = await creativesScreen.getByText(
-      /Text message/,
-      {},
-    );
-    const msgBox = templateTextInput.parentElement.nextSibling.firstChild;
+    const msgBox = screen.getByPlaceholderText(/Enter message/i);
+    msgBox.focus();
     //Enter a template text message
     fireEvent.change(msgBox, {
       target: { value: 'viber_template_message' },
@@ -306,24 +302,32 @@ describe("Creatives testing template creation", () => {
     // first click opens the popup, and second click closes it, clicking twice is intentional
     userEvent.click(addLabel);
     userEvent.click(addLabel);
+    const imageRadio = creativesScreen.getByRole('radio', {name: /image/i});
+    fireEvent.click(imageRadio);
     const imageUploader = creativesScreen.getByRole('button', {
-      name: /drag and drop image here or your computer gallery/i,
+      name: /drag and drop image here or select from computer gallery/i,
     });
     expect(within(imageUploader).getByRole('button', {
-      name: /your computer/i,
+      name: /select from computer/i,
     })).toBeInTheDocument();
     const galleryBtn = within(imageUploader).getByRole('button', {
       name: globalMessages.gallery.defaultMessage,
     });
 
     //configuring CTA button
-    const btnText = creativesScreen.getByText(/button text/i);
-    const btnTextBox = btnText.nextSibling.firstChild;
+    const ctaRadioBtn = creativesScreen.getByRole('radio', {
+      name: /call to action create a button that lets customers respond to your messages or take action/i,
+    });
+    fireEvent.click(ctaRadioBtn);
+    const btnTextBox = await creativesScreen.findByPlaceholderText(
+      'Enter button text',
+    );
     fireEvent.change(btnTextBox, {
       target: { value: 'button' },
     });
-    const btnUrl = creativesScreen.getByText(/button url/i);
-    const btnUrlBox = btnUrl.nextSibling.firstChild;
+    const btnUrlBox = await creativesScreen.findByPlaceholderText(
+      'Enter button url',
+    );
     fireEvent.change(btnUrlBox, {
       target: { value: 'button' },
     });

package/v2Components/CapImageUpload/constants.js

@@ -0,0 +1,6 @@
+export const MAX_SUPPORTED_IMAGE_SIZE = {
+  VIBER: 10,
+  RCS: 2,
+  INAPP: 5,
+  WHATSAPP: 5,
+};

package/v2Components/CapImageUpload/index.js

@@ -20,7 +20,8 @@ import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
-import { FACEBOOK, INAPP, RCS, WHATSAPP } from "../../v2Containers/CreativesContainer/constants";
+import { MAX_SUPPORTED_IMAGE_SIZE } from './constants';
+import { FACEBOOK, INAPP, RCS, WHATSAPP, VIBER } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -173,6 +174,17 @@ function CapImageUpload(props) {
     );
   }, []);
 
+  const getImageSizeLabel = () => (
+    <CapHeadingSpan type="label2">
+      <FormattedMessage
+        {...messages.imageSize}
+        values={{
+          size: MAX_SUPPORTED_IMAGE_SIZE[channel],
+        }}
+      />
+    </CapHeadingSpan>
+  );
+
   const getImageSection = useCallback(() => {
     if (imageSrc === "") {
       return (<>
@@ -244,9 +256,7 @@ function CapImageUpload(props) {
       <div className="image-info-wrapper">
         {channel === WHATSAPP && (
           <>
-            <CapHeadingSpan type="label2">
-              <FormattedMessage {...messages.maxImageSize} />
-            </CapHeadingSpan>
+            {getImageSizeLabel}
             <CapHeadingSpan type="label2">
               <FormattedMessage {...messages.whatsappAspectRatio} />
             </CapHeadingSpan>
@@ -262,18 +272,7 @@ function CapImageUpload(props) {
             <FormattedMessage {...messages.aspectRatio} />
           </CapHeadingSpan>
         )}
-        {channel === RCS && (
-          <CapHeadingSpan type="label2" className="image-size">
-            <FormattedMessage {...messages.imageSize} />
-          </CapHeadingSpan>
-        )}
-        {
-          channel === INAPP && (
-            <CapHeadingSpan type="label2" className="image-size">
-              <FormattedMessage {...messages.maxImageSize} />
-            </CapHeadingSpan>
-          )
-        }
+        {[RCS, VIBER, INAPP].includes(channel) && getImageSizeLabel()}
         <CapHeadingSpan type="label2" className="image-format">
           {channel === INAPP ? <FormattedMessage {...messages.format2} /> : <FormattedMessage {...messages.format} />}
         </CapHeadingSpan>

package/v2Components/CapImageUpload/messages.js

@@ -2,10 +2,6 @@ import { defineMessages } from 'react-intl';
 const scope = `creatives.componentsV2.CapImageUpload`;
 
 export default defineMessages({
-  maxImageSize: {
-    id: `${scope}.maxImageSize`,
-    defaultMessage: 'Size upto: 5MB',
-  },
   whatsappAspectRatio: {
     id: `${scope}.whatsappAspectRatio`,
     defaultMessage: 'Max aspect ratio: 1.91:1',
@@ -61,6 +57,6 @@ export default defineMessages({
   },
   imageSize: {
     id: `${scope}.imageSize`,
-    defaultMessage: 'Size upto: 2MB',
+    defaultMessage: 'Size upto: {size}MB',
   },
 });

package/v2Components/CapVideoUpload/constants.js

@@ -1 +1,6 @@
 export const WHATSAPP = 'WHATSAPP';
+export const DEFAULT = 'DEFAULT';
+export const SUPPORTED_FILE_FORMATS = {
+  VIBER: '3GP, MP4, MOV, M4V',
+  DEFAULT: 'MP4',
+};

package/v2Components/CapVideoUpload/index.js

@@ -19,8 +19,9 @@ import {
 } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import {bytes2Size, getDecodedFileName} from '../../utils/common';
-import { WHATSAPP } from './constants';
+import { SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT } from './constants';
 import './index.scss';
+import { VIBER } from '../../v2Containers/CreativesContainer/constants';
 
 function CapVideoUpload(props) {
   const {
@@ -230,6 +231,7 @@ function CapVideoUpload(props) {
               videoWidth: metaVideoWidth,
               previewUrl,
               fileHandle,
+              videoDuration,
             }
           );
         }
@@ -276,6 +278,16 @@ function CapVideoUpload(props) {
       </Fragment>
     );
   };
+
+  const getVideoSizeDescription = () => (
+    <CapHeading.CapHeadingSpan type="label2">
+      <FormattedMessage
+        {...messages.videoSizeDescription}
+        values={{ size: bytes2Size(videoSize) }}
+      />
+    </CapHeading.CapHeadingSpan>
+  );
+
   return (
     <CapSpin spinning={isSpinning}>
       <div style={style} className="cap-custom-video-upload">
@@ -295,26 +307,34 @@ function CapVideoUpload(props) {
             onClose={() => updateTemplateDrawerRequirement(false)}
         />
         </form>
-        {channel !== WHATSAPP ?
+        {![WHATSAPP, VIBER].includes(channel) &&
         <>
           <CapHeading.CapHeadingSpan type="h6" className="video-description">
             <FormattedMessage {...messages.videoRatioDescription} />
           </CapHeading.CapHeadingSpan>
           {' '}
           <CapHeading.CapHeadingSpan type="h6" className="video-description file-format">
-            <FormattedMessage {...messages.fileFormat} />
-
+            <FormattedMessage {...messages.fileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
           <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
             <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
           </CapHeading.CapHeadingSpan>
-        </> :
+        </>}
+        {channel === WHATSAPP &&
         <>
-          <CapHeading.CapHeadingSpan type="label2" className="">
-            <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
+          {getVideoSizeDescription()}
+          <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
+            <FormattedMessage {...messages.fileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
+        </>}
+        {channel === VIBER &&
+        <>
+          {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
-            <FormattedMessage {...messages.whatsappFileFormat} />
+            <FormattedMessage {...messages.fileFormat} values={{ format: SUPPORTED_FILE_FORMATS[channel] }} />
+          </CapHeading.CapHeadingSpan>
+          <CapHeading.CapHeadingSpan type="label2" className="video-duration">
+            <FormattedMessage {...messages.viberMaxDuration} />
           </CapHeading.CapHeadingSpan>
         </>}
       </div>

package/v2Components/CapVideoUpload/index.scss

@@ -46,4 +46,7 @@ $classPrefix: cap-custom-video-upload;
 }
 .video-panel {
     display: flex;
-}  
+}  
+.video-duration {
+    margin-left: 8rem;
+}

package/v2Components/CapVideoUpload/messages.js

@@ -57,10 +57,10 @@ export default defineMessages({
   },
   fileFormat: {
     id: `${scope}.fileFormat`,
-    defaultMessage: 'Format: MP4',
+    defaultMessage: 'Format: {format}',
   },
-  whatsappFileFormat: {
-    id: `${scope}.whatsappFileFormat`,
-    defaultMessage: 'Format: MP4',
+  viberMaxDuration: {
+    id: `${scope}.viberMaxDuration`,
+    defaultMessage: 'Max Duration: 600 seconds',
   },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -991,4 +991,25 @@
 .media-img-inapp {
   width: 100%;
   height: 100%;
+}
+.empty-placeholder {
+  padding-bottom: $CAP_SPACE_16;
+}
+.viber-button-base {
+  border-radius: $CAP_SPACE_16;
+  background-color: $CAP_PURPLE01;
+  margin-top: $CAP_SPACE_12;
+  text-align: center;
+  width: 8.75rem;
+  height: $CAP_SPACE_20;
+  margin-left: $CAP_SPACE_08;
+}
+.viber-button-card-text {
+  font-size: $CAP_SPACE_12;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: $CAP_WHITE;
 }

package/v2Components/TemplatePreview/index.js

@@ -11,7 +11,17 @@ import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
 import { CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage, CapLabel, CapDivider, CapTooltip } from '@capillarytech/cap-ui-library';
-import { isEmpty } from 'lodash';
+import {
+  CAP_COLOR_03,
+  CAP_WHITE,
+  FONT_COLOR_01,
+  CAP_G06,
+  CAP_G15,
+  CAP_PURPLE01,
+  CAP_G16,
+  CAP_SPACE_08,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import isEmpty from 'lodash/isEmpty';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
@@ -36,6 +46,13 @@ import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
 import videoPlay from '../../assets/videoPlay.svg';
 import zaloMessage from '../../v2Containers/Zalo/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
+import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
+import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
+import WhatsappStatusContainer from '../WhatsappStatusContainer';
+import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
+import { QUICK_REPLY } from '../../v2Containers/Whatsapp/constants';
+import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
+
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
@@ -49,23 +66,6 @@ const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
-import {
-  CAP_COLOR_03,
-  CAP_WHITE,
-  FONT_COLOR_01,
-  CAP_G06,
-  CAP_G15,
-  CAP_PURPLE01,
-  CAP_G16,
-  CAP_SPACE_08,
-} from '@capillarytech/cap-ui-library/styled/variables';
-import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
-import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
-import WhatsappStatusContainer from '../WhatsappStatusContainer';
-import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY } from '../../v2Containers/Whatsapp/constants';
-import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
-
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
     const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
@@ -184,8 +184,14 @@ 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 { buttonText, imageURL, rcsPreviewContent, inAppPreviewContent, messageContent: viberMessageContent } = content || {};
+    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent } = content || {};
     const { rcsImageSrc, rcsTitle, rcsDesc, buttonText: rcsButtonText } = rcsPreviewContent || {};
+    const {
+      videoParams,
+      imageURL,
+      buttonText: viberButtonText,
+      messageContent: viberMessageContent,
+    } = viberPreviewContent || {};
     const {mediaPreview = {}, templateTitle = "", templateMsg = "", ctaData} = inAppPreviewContent || {};
     let smsDetails = {};
     // let smsText = '';
@@ -920,35 +926,40 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         }}
                       />
                     )}
-                    {/* button viber preview */}
-                    {buttonText && (
-                      <div
-                        style={{
-                          "border-radius": "16px",
-                          "background-color": CAP_PURPLE01,
-                          "margin-top": "14px",
-                          "text-align": "center",
-                          width: "140px",
-                          height: "20px",
-                          "margin-left": "8px",
-                        }}
+                    {/* Video Viber preview */}
+                    {videoParams?.viberVideoSrc && (
+                      <CapTooltip
+                        title={formatMessage(messages.videoPreviewTooltip)}
                       >
-                        <p
-                          style={{
-                            "font-size": "12px",
-                            "font-weight": "500",
-                            display: "-webkit-box",
-                            "-webkit-line-clamp": "1",
-                            "-webkit-box-orient": "vertical",
-                            overflow: "hidden",
-                            color: CAP_WHITE,
-                          }}
-                        >
-                          {buttonText || ""}
+                        <div className="video-preview">
+                          <CapImage
+                            src={videoParams?.viberVideoPreviewImg}
+                            className="whatsapp-image"
+                            alt={formatMessage(messages.previewGenerated)}
+                            rest={{
+                              style: {
+                                maxWidth: "100%",
+                                marginBottom: 5,
+                              },
+                            }}
+                          />
+                          <div className="icon-position">
+                            <CapImage
+                              className="video-icon"
+                              src={videoPlay} />
+                          </div>
+                        </div>
+                      </CapTooltip>
+                    )}
+                    {/* button viber preview */}
+                    {viberButtonText && (
+                      <CapLabel className="viber-button-base">
+                        <p className="viber-button-card-text">
+                          {viberButtonText || ""}
                         </p>
-                      </div>
+                      </CapLabel>
                     )}
-                    <div style={{ paddingBottom: 32 }}></div>
+                    <div className="empty-placeholder"></div>
                   </div>
                 </div>
               </div>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
@@ -308,11 +309,16 @@ export function SlideBoxContent(props) {
       }
       case constants.VIBER: {
         const template = cloneDeep(templateDataObject);
-        const { text = "", imageURL = "", buttonText = "" } = get(template, 'versions.base.content.viber', {});
+        const { text = "", button = {}, image = {}, video = {} } = get(template, 'versions.base.content.content', {});
+        const { url: viberImageUrl = "" } = image;
+        const { url: viberVideoUrl = "", thumbnailUrl = '' } = video;
         template.content = {
-          messageContent: text,
-          imageURL,
-          buttonText,
+          viberPreviewContent: {
+            ...(!isEmpty(image) && { imageURL: viberImageUrl }),
+            ...(!isEmpty(video) && { videoParams: { viberVideoSrc: viberVideoUrl, viberVideoPreviewImg: thumbnailUrl }}),
+            buttonText: button?.text,
+            messageContent: text,
+          },
         };
         return template.content;
       }

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -70,6 +70,7 @@ export function SlideBoxHeader(props) {
       whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
       rcs: <FormattedMessage {...messages.rcsCreative} />,
       zalo: <FormattedMessage {...messages.zaloTemplate} />,
+      viber: <FormattedMessage {...messages.viberTemplate} />,
     };
     return labels[currentChannel.toLowerCase()];
   };

package/v2Containers/CreativesContainer/messages.js

@@ -322,6 +322,10 @@ export default defineMessages({
     id: `${scope}.zaloTemplate`,
     defaultMessage: `Zalo template`,
   },
+  "viberTemplate": {
+    id: `${scope}.viberTemplate`,
+    defaultMessage: `Viber template`,
+  },
   "learnTips": {
     id: `${scope}.learnTips`,
     defaultMessage: `Learn tips to get approved`,

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -3,6 +3,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
 import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
+import { templateDetailsImage, templateDetailsVideo, templateDetailsText, templateDetails_ } from '../../Viber/tests/mockData';
 
 const {
   whatsappEditTemplateData,
@@ -86,4 +87,14 @@ describe('Test SlideBoxContent container', () => {
     renderFunction('LINE', 'preview', linePreviewTemplateData2);
     expect(renderedComponent).toMatchSnapshot();
   });
+  it('Should render correct component for viber channel preview mode', () => {
+    renderFunction('VIBER', 'preview', templateDetails_);
+    expect(renderedComponent).toMatchSnapshot();
+    renderFunction('VIBER', 'preview', templateDetailsImage);
+    expect(renderedComponent).toMatchSnapshot();
+    renderFunction('VIBER', 'preview', templateDetailsVideo);
+    expect(renderedComponent).toMatchSnapshot();
+    renderFunction('VIBER', 'preview', templateDetailsText);
+    expect(renderedComponent).toMatchSnapshot();
+  });
 });