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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.118",
+  "version": "7.17.120-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,12 +174,23 @@ function CapImageUpload(props) {
     );
   }, []);
 
+  const getImageSizeLabel = () => (
+    <CapHeadingSpan type="label2">
+      <FormattedMessage
+        {...messages.channelImageSize}
+        values={{
+          size: MAX_SUPPORTED_IMAGE_SIZE[channel],
+        }}
+      />
+    </CapHeadingSpan>
+  );
+
   const getImageSection = useCallback(() => {
     if (imageSrc === "") {
       return (<>
         <CapUploader.CapDragger
           customRequest={capUploaderCustomRequest}
-          className="form-builder-dragger"
+          className="form-builder-dragger grey-background"
           showUploadList={!isImageError}
         >
           <CapHeading className="dragger-title" type="h7">
@@ -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/index.scss

@@ -14,4 +14,7 @@ $classPrefix: cap-custom-image-upload;
     justify-content: space-between;
     margin-top: 8px;
   }
+  .grey-background div {
+    background: $CAP_G10;
+  }
 }

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',
@@ -59,8 +55,8 @@ export default defineMessages({
     id: `${scope}.aspectRatio`,
     defaultMessage: 'Aspect ratio: 1:1',
   },
-  imageSize: {
-    id: `${scope}.imageSize`,
-    defaultMessage: 'Size upto: 2MB',
+  channelImageSize: {
+    id: `${scope}.channelImageSize`,
+    defaultMessage: 'Size upto: {size}MB',
   },
 });

package/v2Components/CapVideoUpload/constants.js

@@ -1 +1,7 @@
 export const WHATSAPP = 'WHATSAPP';
+export const DEFAULT = 'DEFAULT';
+export const SUPPORTED_FILE_FORMATS = {
+  VIBER: '3GP, MP4, MOV, M4V',
+  DEFAULT: 'MP4',
+};
+export const VIBER_MAX_DURATION = 600; // seconds

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, VIBER_MAX_DURATION } from './constants';
 import './index.scss';
+import { VIBER } from '../../v2Containers/CreativesContainer/constants';
 
 function CapVideoUpload(props) {
   const {
@@ -41,7 +42,7 @@ function CapVideoUpload(props) {
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
-  const [videoDuration, updateVideoDuration] = useState('');
+  const [videoDuration, updateVideoDuration] = useState(null);
   const [isPlaying, updateIsPlaying] = useState(false);
   const [isSpinning, setSpinning] = useState(false);
 
@@ -99,6 +100,7 @@ function CapVideoUpload(props) {
           videoName: metaVideoName,
           videoId: metaVideoId,
           fileHandle: karixFileHandle,
+          videoDuration: null,
         },
         );
       }
@@ -199,6 +201,7 @@ function CapVideoUpload(props) {
     }
     const onReUpload = () => {
       updateVideoStatus(false);
+      updateVideoDuration(null);
       onVideoUploadUpdateAssestList(
         index,
         {
@@ -207,7 +210,7 @@ function CapVideoUpload(props) {
           videoHeight: "",
           videoWidth: "",
           videoSrc: "",
-          videoDuration: "",
+          videoDuration: null,
           videoId: "",
           fileHandle: "",
         }
@@ -217,12 +220,13 @@ function CapVideoUpload(props) {
     const updateMetadataLoaded = () => {
       const { current: { duration, videoHeight: metaVideoHeight, videoWidth: metaVideoWidth } = {} } = videoEl;
       if (duration) {
-        const value = moment('1900-01-01 00:00:00').add(duration, 'seconds').format("HH.mm.ss"); // to get the duration of video
-        updateVideoDuration(value);
+        updateVideoDuration(duration);
         if (videoWidth === undefined && videoHeight === undefined) {
-          onVideoUploadUpdateAssestList(
-            index,
-            {
+          if (
+            channel !== VIBER ||
+            (channel === VIBER && duration <= VIBER_MAX_DURATION)
+          ) {
+            onVideoUploadUpdateAssestList(index, {
               videoSrc,
               videoId,
               videoName,
@@ -230,12 +234,16 @@ function CapVideoUpload(props) {
               videoWidth: metaVideoWidth,
               previewUrl,
               fileHandle,
-            }
-          );
+              videoDuration: duration,
+            });
+          } else {
+            onReUpload();
+            updateVideoErrorMessage(formatMessage(messages.videoDurationError));
+          }
         }
       }
     };
-
+    const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
         <div style={{ overflow: 'hidden' }}>
@@ -264,11 +272,11 @@ function CapVideoUpload(props) {
           </video>
           {showVideoNameAndDuration &&
             <div className="video-info">
-              <CapHeading type="h6">
+              <CapHeading type="h4">
                 {getDecodedFileName(videoName)}
               </CapHeading>
               <CapHeading type="h6">
-                {videoDuration}
+                {videoDurationValue}
               </CapHeading>
             </div>
           }
@@ -276,6 +284,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 +313,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.channelFileFormat} 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.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
+        </>}
+        {channel === VIBER &&
+        <>
+          {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
-            <FormattedMessage {...messages.whatsappFileFormat} />
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS.VIBER }} />
+          </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

@@ -55,12 +55,16 @@ export default defineMessages({
     id: `${scope}.imageReUpload`,
     defaultMessage: 'Re upload',
   },
-  fileFormat: {
-    id: `${scope}.fileFormat`,
-    defaultMessage: 'Format: MP4',
+  channelFileFormat: {
+    id: `${scope}.channelFileFormat`,
+    defaultMessage: 'Format: {format}',
   },
-  whatsappFileFormat: {
-    id: `${scope}.whatsappFileFormat`,
-    defaultMessage: 'Format: MP4',
+  viberMaxDuration: {
+    id: `${scope}.viberMaxDuration`,
+    defaultMessage: 'Max Duration: 600 seconds',
+  },
+  videoDurationError: {
+    id: `${scope}.videoDurationError`,
+    defaultMessage: 'Video duration should not exceed 600 seconds',
   },
 });

package/v2Components/FormBuilder/constants.js

@@ -1,3 +1 @@
-export const AI_SUGGESTION_API_URL = `wss://${window.location.host}/arya/api/v1/ask-aira-service/content_gen/get_ai_suggestions`;
-export const CONTENT_RECOMMENDATION_BOT = "CONTENT_RECOMMENDATION_BOT";
 export const OUTBOUND = 'OUTBOUND';

package/v2Components/FormBuilder/index.js

@@ -51,7 +51,7 @@ import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS } from '../../v2Container
 import { validateIfTagClosed } from '../../utils/tagValidations';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
-import { AI_SUGGESTION_API_URL, CONTENT_RECOMMENDATION_BOT, OUTBOUND } from './constants';
+import { OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
@@ -1442,6 +1442,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return formData;
   }
 
+  /**
+   * Initializes the form with the given schema.
+   *
+   * @param {Object} schema - The schema object for the form.
+   * @param {boolean} makeFormEmpty - Flag indicating whether to make the form empty.
+   * @param {boolean} resetTabKeys - Flag indicating whether to reset tab keys.
+   * @returns {void}
+   */
   initialiseForm(schema, makeFormEmpty, resetTabKeys) {
     let formData = makeFormEmpty ? {} : _.cloneDeep(this.state.formData);
     let errorData = {};
@@ -1471,8 +1479,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     }
     const tempFormData = _.cloneDeep(formData);
+    // Store the value of 'template-name' before the deletion process
+    const templateNameValue = tempFormData['template-name'];
     if (!this.props.isNewVersionFlow) {
       _.forEach(formData, (element, key) => {
+        // This code block is used to clean up the tempFormData object.
+        // If the element is not an object and the key of the element is not found in the formElements array,
+        // then the element is removed from the tempFormData object.
         if (typeof element !== 'object' && this.formElements.indexOf(key) === -1) {
           delete tempFormData[key];
         } else if (typeof element === "object") {
@@ -1482,8 +1495,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           });
         }
+        // If the element is an object, it iterates over its properties (innerElement).
+        // If the property key (innerKey) is not "tabKey", "base", "name", "imagePreview", "image"
+        // and is not found in the formElements array, then the property is removed from the object in tempFormData.
       });
     }
+    // If 'template-name' was deleted, re-add it to tempFormData
+    if (!Object.prototype.hasOwnProperty.call(tempFormData, 'template-name')) {
+      tempFormData['template-name'] = templateNameValue;
+    }
     formData = _.cloneDeep(tempFormData);
     this.setState({formData, errorData}, () => {
       this.validateForm();
@@ -2375,13 +2395,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             && hasAiSuggestionsEnabled
             && this.props.isFullMode
             && (
-              <CapAskAira
+              <CapAskAira.ContentGenerationBot
                 text={messageContent || ""}
                 setText={(x) => {
                   this.updateFormData(x, val);
                 }}
-                botType={CONTENT_RECOMMENDATION_BOT}
-                websocketUrl={AI_SUGGESTION_API_URL}
+                iconPlacement="float-br"
+                rootStyle={{
+                  // 1rem is the margin-bottom of textarea
+                  bottom: 'calc(1rem + 0.2rem)',
+                  right: '0.2rem',
+                }}
               />
             )}
         </CapColumn>

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';
@@ -309,11 +310,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: viberVideoUrl = "", thumbnailUrl = '' } = video;
+        const { url: viberImageUrl = "" } = image;
         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()];
   };