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

package/v2Containers/Viber/index.js

@@ -1,69 +1,59 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { isUrl } from '../Line/Container/Wrapper/utils';
-import { get } from 'lodash';
-import withCreatives from '../../hoc/withCreatives';
-import {
-  CapHeader,
-  CapRow,
-  CapColumn,
-  CapSpin,
-  CapLabel,
-  CapInput,
-  CapHeading,
-  CapDivider,
-  CapIcon,
-  CapButton,
-  CapUploader,
-  CapDrawer,
-  CapNotification,
-  CapImage,
-} from '@capillarytech/cap-ui-library';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import { GA } from '@capillarytech/cap-ui-utils';
 import { makeSelectViber, makeSelectCreateViber } from './selectors';
 import * as viberActions from './actions';
 import { validateTags } from '../../utils/tagValidations';
 import TemplatePreview from '../../v2Components/TemplatePreview';
-import {
-  CAP_G09,
-  CAP_SPACE_08,
-  CAP_SPACE_12,
-  FONT_COLOR_05,
-  CAP_SPACE_32,
-  CAP_SPACE_24,
-  CAP_WHITE,
-  CAP_SPACE_16,
-  CAP_G07,
-} from '@capillarytech/cap-ui-library/styled/variables';
-import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import styled from 'styled-components';
+import { isUrl } from '../Line/Container/Wrapper/utils';
 import messages from './messages';
 import TagList from '../TagList';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
-import Gallery from '../Assets/Gallery';
 import {
-  ALLOWED_EXTENSIONS_REGEX,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER,
+  ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER,
   VIBER_IMG_HEIGHT,
   VIBER_IMG_WIDTH,
   VIBER_IMG_SIZE,
+  VIBER_VIDEO_SIZE,
   charLimit,
+  VIBER_MEDIA_TYPES,
+  VIBER_BUTTON_TYPES,
+  NONE,
+  mediaRadioOptions,
+  buttonRadioOptions,
 } from './constants';
-import { GA } from '@capillarytech/cap-ui-utils';
+import withCreatives from '../../hoc/withCreatives';
 import { CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER } from '../App/constants';
 import { gtmPush } from '../../utils/gtmTrackers';
 import { VIBER } from '../CreativesContainer/constants';
 import { getCdnUrl } from '../../utils/cdnTransformation';
 import globalMessages from '../Cap/messages';
-
-const { CapHeadingSpan } = CapHeading;
+import CapImageUpload from '../../v2Components/CapImageUpload';
+import CapVideoUpload from '../../v2Components/CapVideoUpload';
+import './index.scss';
+import { ViberFooter } from './style';
 const { TextArea } = CapInput;
 
-
-const Viber = (props) => {
+export const Viber = (props) => {
   const {
     intl,
-    supportedExtensions,
     isFullMode,
     injectedTags,
     location,
@@ -81,47 +71,37 @@ const Viber = (props) => {
   } = props || {};
 
   const { formatMessage } = intl;
-  const [isImageError, updateImageErrorMessage] = useState(false);
-  const [isImage, updateImageStatus] = useState(false);
-  const [imageSrc, setImageSrc] = useState();
-  const [isDrawerRequired, updateDrawerRequirement] = useState(false);
+  const [imageSrc, setImageSrc] = useState('');
   const [messageContent, updateTextMessageContent] = useState('');
   const [buttonText, updateButtonText] = useState('');
   const [buttonURL, updateButtonUrl] = useState('');
   const [errorMessageTextarea, updateErrorMessageTextArea] = useState(false);
-  const [imagePreview, updateImagePreview] = useState();
   const [isEditLoading, updateEditLoading] = useState(false);
   const [isEditFlow, checkEditFlow] = useState(false);
-  const [messageTitle, updateTextMessageTitle] = useState('');
+  const [messageTitle, updateTextMessageTitle] = useState("");
   const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
   const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
   const [accountName, updateAccountName] = useState("");
-
-
-  const updateImageSrc = React.useCallback((url)=>{
+  const [templateMediaType, setTemplateMediaType] = useState(
+    VIBER_MEDIA_TYPES.TEXT
+  );
+  const [assetList, updateAssetList] = useState([]);
+  const [viberVideoSrcAndPreview, setViberVideoSrcAndPreview] = useState({
+    viberVideoSrc: '',
+    viberVideoPreviewImg: '',
+    duration: 0,
+  });
+  // cta button
+  const [buttonType, setButtonType] = useState(NONE);
+  const [ctaData, setCtadata] = useState({});
+  const [isCtaSaved, setIsCtaSaved] = useState(false);
+
+  const updateImageSrc = React.useCallback((url) => {
     const newUrl = getCdnUrl({url, channelName: 'VIBER'});
     setImageSrc(newUrl);
-  },[]);
-
-  const StyledHeader = styled(CapHeader)`
-  margin-bottom: 14px;
-`;
-  const ViberFooter = styled.div`
-    background-color: ${CAP_WHITE};
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    margin-left: -32px;
-    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
-
-    .ant-btn {
-      margin-right: ${CAP_SPACE_16};
-    }
-    }
-`;
+  }, []);
 
   const paramObj = params || {};
-
   useEffect(() => {
     const { id } = paramObj;
     if (id && !get(templateData, `versions.base.content`)) {
@@ -138,42 +118,51 @@ const Viber = (props) => {
 
   useEffect(() => {
     if ((params && params.id) || (templateData || {}).edit) {
-      const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
-      const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
+      const { content: editViberContent = {} } =
+        get(templateData, `versions.base.content`) ||
+        get(viber, `templateDetails.versions.base.content`) ||
+        {};
+      const editMessageTitle =
+        (templateData || {}).name || get(viber, "templateDetails.name");
+      const {
+        text = "",
+        button = {},
+        image = {},
+        video = {},
+      } = editViberContent || {};
+      const { text: ctaBtnText = "", url = "" } = button || {};
       updateTextMessageTitle(editMessageTitle);
-      updateTextMessageContent(editViberContent.text || '');
-      updateButtonText(editViberContent.buttonText || '');
-      updateButtonUrl(editViberContent.buttonURL || '');
-      if (editViberContent.imageURL) {
-        updateImageSrc(editViberContent.imageURL);
-        updateImagePreview(editViberContent.imageURL);
-        updateImageStatus(true);
+      updateTextMessageContent(text || "");
+      updateButtonText(ctaBtnText);
+      updateButtonUrl(url);
+      setIsCtaSaved(true);
+      setButtonType(button?.text ? VIBER_BUTTON_TYPES.CTA : NONE);
+      setCtadata({ buttonText: button?.text, buttonURL: button?.url });
+      if (!isEmpty(image)) {
+        setTemplateMediaType(VIBER_MEDIA_TYPES.IMAGE);
+        updateImageSrc(image?.url);
+      } else if (!isEmpty(video)) {
+        setTemplateMediaType(VIBER_MEDIA_TYPES.VIDEO);
+        setViberVideoSrcAndPreview({
+          viberVideoSrc: video?.url,
+          viberVideoPreviewImg: video?.thumbnailUrl,
+          duration: video?.duration,
+        });
+        updateAssetList({
+          ...assetList,
+          previewUrl: video?.thumbnailUrl,
+          videoSrc: video?.url,
+          videoDuration: video?.duration,
+        });
+      } else {
+        setTemplateMediaType(VIBER_MEDIA_TYPES.TEXT);
       }
     }
   }, [viber[`templateDetails`] || templateData]);
 
-// Common container for TEXT, IMAGE and Button
-  const container = (icon, message, data, showOptional) => (<CapRow
-    style={{
-      border: `solid 1px ${CAP_G07}`,
-      marginBottom: '20px',
-    }}>
-    <CapRow style={{ padding: `${CAP_SPACE_12} ${CAP_SPACE_24} 0px` }}>
-      <CapIcon type={icon}/>
-      <CapHeading type="h4" style={{position: 'absolute', display: 'inline-block', top: '13px', paddingLeft: '10px'}}>
-        {message} {" "}
-        {showOptional && <CapLabel.CapLabelInline type="label14">{formatMessage(messages.optional)}</CapLabel.CapLabelInline>}
-      </CapHeading>
-    </CapRow>
-    <CapDivider className="cap-divider-margin"/>
-    <CapRow style={{ padding: `0 ${CAP_SPACE_24} 22px` }}>
-      {data}
-    </CapRow>
-  </CapRow>);
-
-// ******************** Text area Code start here ******************************
+  // Text area Code start here
 
-// Tags Code start from here
+  // Tags Code start from here
   useEffect(() => {
     const type = location && location.query && location.query.type;
     const getTagsQuery = {
@@ -208,10 +197,9 @@ const Viber = (props) => {
   const tags = metaEntities && metaEntities.tags
   ? metaEntities.tags.standard
   : [];
-
 // tags Code end here
 
-// validation on Text area and tags validation
+  // validation on Text area and tags validation
   const updateTextContentError = (value) => {
     let errorMessage = false;
     const { valid, isBraceError } = validateTags({
@@ -225,12 +213,11 @@ const Viber = (props) => {
       errorMessage = formatMessage(messages.emptyContentErrorMessage);
     } else if (value.length > charLimit) {
       errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
-    } else if (isBraceError){
+    } else if (isBraceError) {
       errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
     } else if (!valid) {
       errorMessage = formatMessage(messages.invalidTagError);
     }
-    
     updateErrorMessageTextArea(errorMessage);
   };
 
@@ -253,257 +240,150 @@ const Viber = (props) => {
     updateErrorMessageTitle(errorMessage);
   };
   // Text Area container
-  const TextAreaViber = (<>
-    <TextArea
-      id={'viber_textarea'}
-      label={(
-      <>
-        <FormattedMessage {...messages.textMessage} />
-        <CapLabel
-          type="label2" style={{display: 'inline-block',
-            float: 'right'}}>
-          {(messageContent || '').length}/{charLimit} {" "}
-          <FormattedMessage {...messages.characters} />
-
-        </CapLabel>
-      </>
-      )}
-      autosize={false}
-      onChange={onTextContentChange}
-      className={`${errorMessageTextarea ? 'error' : ''}`}
-      errorMessage={errorMessageTextarea}
-      defaultValue={messageContent || ''}
-      value={messageContent || ''}
-      rows={5}
-      cols={2}
-    />
-    <TagList
-      key={'viber_tags'}
-      moduleFilterEnabled={location && location.query && location.query.type !== 'embedded'}
-      label={formatMessage(messages.addLabels)}
-      onTagSelect={onTagSelect}
-      onContextChange={handleOnTagsContextChange}
-      location={location}
-      tags={tags}
-      injectedTags={injectedTags || {}}
-      id={'viber_tags'}
-      userLocale={localStorage.getItem('jlocale') || 'en'}
-      selectedOfferDetails={selectedOfferDetails}
-    />
-  </>);
+  const renderTextAreaViber = () => (
+    <>
+      <CapColumn className="viber-message-header">
+        <CapHeading type="h5" className="viber-message-header-style">
+          {formatMessage(messages.message)}
+        </CapHeading>
+        <TagList
+          key={"viber_tags"}
+          className="tag-list-viber"
+          moduleFilterEnabled={
+            location && location.query && location.query.type !== "embedded"
+          }
+          label={formatMessage(messages.addLabels)}
+          onTagSelect={onTagSelect}
+          onContextChange={handleOnTagsContextChange}
+          location={location}
+          tags={tags}
+          injectedTags={injectedTags || {}}
+          id={"viber_tags"}
+          userLocale={localStorage.getItem("jlocale") || "en"}
+          selectedOfferDetails={selectedOfferDetails}
+        />
+      </CapColumn>
+      <TextArea
+        id={"viber_textarea"}
+        autosize={false}
+        onChange={onTextContentChange}
+        className={`${errorMessageTextarea ? "error" : ""}`}
+        errorMessage={errorMessageTextarea}
+        defaultValue={messageContent || ""}
+        value={messageContent || ""}
+        rows={5}
+        cols={2}
+        placeholder={formatMessage(messages.enterMessage)}
+      />
+      <CapLabel type="label1" className="char-count-viber">
+        <FormattedMessage {...messages.charCount} />
+        {(messageContent || "").length}/{charLimit}{" "}
+      </CapLabel>
+    </>
+  );
+  // Text area Code End here
 
-// ******************** Text area Code End here ******************************
+  // template media code start here
+  const isMediaTypeImage = templateMediaType === VIBER_MEDIA_TYPES.IMAGE;
+  const isMediaTypeVideo = templateMediaType === VIBER_MEDIA_TYPES.VIDEO;
 
-// ******************** Image section Code start here ******************************
-  useEffect(() => {
-    if (viber[`uploadedAssetData0`] && Object.keys(viber[`uploadedAssetData0`]).length) {
-      const imgSrc = get(viber, `uploadedAssetData0.metaInfo.secure_file_path`, '');
-      actions.clearViberAsset(0);
-      if (imgSrc) {
-        updateImageSrc(imgSrc);
-        updateImageStatus(true);
-      }
-    }
-  }, [viber[`uploadedAssetData0`]]);
-
-  const submitAction = (data, incorrectFile) => {
-    const {
-      file: {size},
-      fileParams: {
-          height,
-          width,
-      },
-    } = data;
-    if (incorrectFile || size > VIBER_IMG_SIZE || height > VIBER_IMG_HEIGHT || width > VIBER_IMG_WIDTH) {
-      updateImageErrorMessage(formatMessage(messages.viberImageIncorrectSize));
-    } else {
-      updateImageErrorMessage('');
-      actions.uploadViberAsset(
-        data.file,
-        data.type,
-        data.fileParams,
-        0,
-    );
-    }
+  const onTemplateMediaTypeChange = ({ target: { value } }) => {
+    setTemplateMediaType(value);
   };
 
-  const uploadImages = (e, {files}) => {
-    if (e) {
-      e.preventDefault();
-    }
-    const _URL = window.URL || window.webkitURL;
-    let incorrectFile = false;
-    const file = files[0];
-    if (!ALLOWED_EXTENSIONS_REGEX.test(file.name)) {
-      incorrectFile = true;
-    }
-    const img = new Image();
-    img.src = _URL.createObjectURL(file);
-    img.onload = () => {
-      const fileParams = {
-        width: img.width,
-        height: img.height,
-        error: file && (file.size / (1e+6) > 3),
-      };
-      submitAction({file, type: 'image', fileParams}, incorrectFile);
-    };
-    if (e) {
-      const event = e;
-      event.target.value = null;
-    }
+  const uploadViberAsset = (file, type, fileParams) => {
+    actions.uploadViberAsset(file, type, fileParams, 0);
   };
 
-  const ImageComponent = () => (<>
-    <CapHeader
-      title={formatMessage(messages.uploadImage)}
-      description={formatMessage(messages.imageDesc)}
-      size="regular"
-          />
-    <div
-      className={`image-container ${props.ifError ? 'error' : ''}`}
-      style={{
-        marginTop: 20,
-        backgroundColor: CAP_G09,
-      }}
-    >
-      {isImage && (<CapImage src={imageSrc} alt="viber-image-src" height="400" />)}
-    </div></>
-    );
+  const updateOnViberImageReUpload = useCallback(() => {
+    setImageSrc("");
+  }, [imageSrc]);
 
-  const setDrawerVisibility = (drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag);
-
-  const onGalleryClick = (event) => {
-    event.stopPropagation();
-    setDrawerVisibility(true);
-  };
+  const setUpdateViberImageSrc = useCallback(
+    (val) => {
+      setImageSrc(val);
+      actions.clearViberAsset(0);
+    },
+    [imageSrc]
+  );
 
-  const capUploaderCustomRequest = (uploadData) => {
-    uploadImages(undefined, {files: [uploadData.file]});
-  };
-  const onReUpload = () => {
-    updateImageStatus(false);
-    // deleteUploadedImgList(index);
-    updateImageSrc('');
-    updateImagePreview('');
-  };
-  const getViberImageSection = () => {
-    if (!isImage) {
-      return (<>
-        <CapUploader.CapDragger
-          customRequest={capUploaderCustomRequest}
-          className="form-builder-dragger"
-        >
-          <CapHeading className="dragger-title" type="h7">
-            <FormattedMessage {...messages.dragAndDrop} />
-          </CapHeading>
-          <CapHeading className="dragger-or" type="label6">
-            <FormattedMessage {...messages.or} />
-          </CapHeading>
-          <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}}>
-            <FormattedMessage {...messages.uploadComputer} />
-          </CapButton>
-          <CapButton
-            className="dragger-button"
-            type="secondary"
-            style={{marginLeft: CAP_SPACE_08}}
-            onClick={onGalleryClick}
-                >
-            <FormattedMessage {...messages.uploadGallery} />
-          </CapButton>
-        </CapUploader.CapDragger>
-        <div style={{marginTop: '15px' }}>
-          <CapHeadingSpan type="label2" style={{marginTop: CAP_SPACE_12, marginRight: '46px' }}>
-            <FormattedMessage {...messages.imageDimenstionDescription} />
-          </CapHeadingSpan>
-          <CapHeadingSpan type="label2" style={{marginTop: CAP_SPACE_12 }}>
-            <FormattedMessage {...messages.imageSizeDescription} />
-          </CapHeadingSpan>
-        </div>
-
-        </>
-      );
-    }
-    return (
-      <CapButton
-        className="dragger-button"
-        type="flat"
-        style={{
-          top: 0,
-          position: 'absolute',
-          right: 0,
-          color: FONT_COLOR_05,
-        }}
-        onClick={onReUpload}
-       >
-        <FormattedMessage {...messages.imageReUpload} />
-      </CapButton>
-    );
-  };
+  const setUpdateViberVideoSrc = useCallback(
+    (index, data) => {
+      const { videoSrc = "", previewUrl = "", videoDuration } = data;
+      setViberVideoSrcAndPreview({
+        viberVideoSrc: videoSrc,
+        viberVideoPreviewImg: previewUrl,
+        duration: videoDuration,
+      });
+      updateAssetList(data);
+      actions.clearViberAsset(0);
+    },
+    [viberVideoSrcAndPreview?.viberVideoSrc]
+  );
 
-  const getGalleryDrawerContent = () => {
-    const locationGallery = {
-      pathname: `/assets`,
-      search: '',
-      query: !isFullMode ? {type: 'embedded', module: 'library'} : {},
-    };
-    return (
-      <>
-        <CapHeading type="h3">
-          {formatMessage(messages.imageGallery)}
-        </CapHeading>
-        <Gallery
-          location={locationGallery}
-          isFullMode={isFullMode}
-          isLineAsset
-          onGalleryImageSelect={onGalleryImageSelect}
-          />
-      </>
-    );
-  };
+  const renderMediaSection = () => (
+    <>
+      <CapHeading type="h4" className="viber-render-heading">
+        {formatMessage(messages.mediaLabel)}
+      </CapHeading>
+      <CapRadioGroup
+        id="viber-media-radio"
+        options={mediaRadioOptions}
+        value={templateMediaType}
+        onChange={onTemplateMediaTypeChange}
+        className="viber-media-radio"
+      />
+    </>
+  );
 
-  const onGalleryImageSelect = (imageTemplate) => {
-    const image = get(imageTemplate, 'metaInfo.secure_file_path');
-    const imageURL = get(imageTemplate, 'metaInfo.secure_file_path_preview');
-    updateDrawerRequirement(false);
-    if (!ALLOWED_EXTENSIONS_REGEX.test(image)) {
-      updateImageErrorMessage(formatMessage(messages.viberImageIncorrectSize));
-    } else {
-      updateImageErrorMessage('');
-      updateImageStatus(true);
-      updateImageSrc(image);
-      updateImagePreview(imageURL);
-    }
-  };
+  const renderImageComponent = () => (
+    <CapImageUpload
+      allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER}
+      imgSize={VIBER_IMG_SIZE}
+      imgWidth={VIBER_IMG_WIDTH}
+      imgHeight={VIBER_IMG_HEIGHT}
+      uploadAsset={uploadViberAsset}
+      isFullMode={isFullMode}
+      imageSrc={imageSrc}
+      updateImageSrc={setUpdateViberImageSrc}
+      updateOnReUpload={updateOnViberImageReUpload}
+      index={0}
+      className="cap-custom-image-upload"
+      key="viber-uploaded-image"
+      imageData={viber}
+      channel={VIBER}
+    />
+  );
 
-  const WithLabel = LabelHOC(ImageComponent);
-  const ImageViber = <>
-    <WithLabel
-      key={`viber-with-label`}
-      errorMessage={isImageError} ifError={!!isImageError}
+  const renderVideoComonent = () => (
+    <CapVideoUpload
+      index={0}
+      allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER}
+      videoSize={VIBER_VIDEO_SIZE}
+      isFullMode={isFullMode}
+      uploadAsset={uploadViberAsset}
+      uploadedAssetList={assetList}
+      onVideoUploadUpdateAssestList={setUpdateViberVideoSrc}
+      videoData={viber}
+      className="cap-custom-video-upload"
+      formClassName={"viber-video-upload"}
+      channel={VIBER}
+      errorMessage={formatMessage(messages.videoErrorMessage)}
+      showVideoNameAndDuration
     />
-    <form encType="multipart/form-data" id={`viber_form`}>
-      <input
-        key={`viber_imgFile`}
-        style={{ display: 'none' }}
-        id="fileName"
-        type="file"
-        onChange={(e) => uploadImages(e, { files: e.target.files })}
-        accept={supportedExtensions || "image/*"}
-      />
-      {getViberImageSection()}
-      <CapDrawer
-        content={getGalleryDrawerContent()}
-        visible={isDrawerRequired}
-        width={430}
-        onClose={() => updateDrawerRequirement(false)}
-      />
-    </form>
-  </>;
-// ******************** Image section End here ******************************
+  );
 
+  const renderMediaComponent = () => (
+    <>
+      {isMediaTypeImage && renderImageComponent()}
+      {isMediaTypeVideo && renderVideoComonent()}
+    </>
+  );
+  // template media code end here
 
-// ******************** Button Code start here ******************************
+  // Button Code start here
 
+  const isBtnTypeCta = buttonType === VIBER_BUTTON_TYPES.CTA;
   const onChangeButtonText = ({ target: { value } }) => {
     updateButtonText(value);
   };
@@ -516,50 +396,160 @@ const Viber = (props) => {
     }
     updateButtonURLErrorMessage(errorMessage);
   };
-  const getPreviewSection = () =>
+  const getPreviewSection = () => (
     // const accountName = get(lineData, 'selectedLineAccount.name', '');
-     (
-       <TemplatePreview
-         channel="VIBER"
-         content={{imageURL: imagePreview, buttonText, messageContent}}
-         viberAccountName={((accountName[0] || "")).toUpperCase()}
-         viberBrandName={accountName}
-        />
-    );
-
-  const ButtonViber = (<>
-    <CapInput
-      id="viber-button-text"
-      type="input"
-      onChange={onChangeButtonText}
-      label={formatMessage(messages.buttonText)}
-      defaultValue={buttonText}
-      value={buttonText}
-      style={{paddingBottom: '11px'}}
-      maxLength={20}
+    <TemplatePreview
+      channel={VIBER}
+      content={{
+        viberPreviewContent: {
+          ...(isMediaTypeImage && { imageURL: imageSrc }),
+          ...(isMediaTypeVideo && { videoParams: viberVideoSrcAndPreview }),
+          buttonText,
+          messageContent,
+        },
+      }}
+      viberAccountName={(accountName[0] || "").toUpperCase()}
+      viberBrandName={accountName}
     />
-    <CapInput
-      id="viber-button-url"
-      type="input"
-      onChange={onChangeButtonUrl}
-      defaultValue={buttonURL}
-      value={buttonURL}
-      label={formatMessage(messages.buttonUrl)}
-      errorMessage={buttonURLErrorMessage}
+  );
+
+  const handleSaveCta = () => {
+    setCtadata({ buttonText, buttonURL });
+    setIsCtaSaved(true);
+  };
+
+  const handleEditCta = () => {
+    setIsCtaSaved(false);
+    updateButtonText(ctaData?.buttonText);
+    updateButtonUrl(ctaData?.buttonURL);
+  };
+
+  const handleCancelCta = () => {
+    if (isEmpty(ctaData)) {
+      setButtonType(NONE);
+    } else {
+      setIsCtaSaved(true);
+    }
+  };
+
+  const isCtaSaveDisabled =
+    isEmpty(buttonText.trim()) ||
+    isEmpty(buttonURL.trim()) ||
+    buttonURLErrorMessage;
+
+  const ButtonViber = !isCtaSaved ? (
+    <div className="cta-section">
+      <CapHeading type="h4" className="button-text">
+        {formatMessage(messages.buttonText)}{" "}
+        <CapTooltip title={formatMessage(messages.buttonTextTooltip)}>
+          <CapIcon type="info" size="s" />
+        </CapTooltip>
+      </CapHeading>
+      <CapInput
+        id="viber-button-text"
+        className="cta-text-input"
+        type="input"
+        onChange={onChangeButtonText}
+        defaultValue={buttonText}
+        value={buttonText}
+        maxLength={20}
+        placeholder={formatMessage(messages.enterButtonText)}
       />
-  </>);
+      <CapInput
+        id="viber-button-url"
+        type="input"
+        onChange={onChangeButtonUrl}
+        defaultValue={buttonURL}
+        value={buttonURL}
+        label={formatMessage(messages.buttonUrl)}
+        errorMessage={buttonURLErrorMessage}
+        placeholder={formatMessage(messages.enterButtonUrl)}
+      />
+      <CapColumn className="cta-actions">
+        <CapButton
+          disabled={isCtaSaveDisabled}
+          className="cta-btn-action"
+          onClick={handleSaveCta}
+        >
+          {formatMessage(messages.save)}
+        </CapButton>
+        <CapButton className="cta-btn-action" onClick={handleCancelCta}>
+          {formatMessage(messages.cancel)}
+        </CapButton>
+      </CapColumn>
+    </div>
+  ) : (
+    <CapRow className="cta-section-saved">
+      <CapLabel type="label4" className="cta-text">
+        {ctaData?.buttonText}
+      </CapLabel>
+      <CapLabel type="label2" className="button-url">
+        {ctaData?.buttonURL}
+      </CapLabel>
+      <CapColumn className="button-edit-icon" onClick={handleEditCta}>
+        <CapIcon type="edit" size="s" aria-label="edit-cta-icon"></CapIcon>
+      </CapColumn>
+    </CapRow>
+  );
 
- // ******************** Button Code End here ******************************
+  const onChangeButtonType = ({ target: { value } }) => {
+    setButtonType(value);
+    setCtadata({});
+    updateButtonText("");
+    updateButtonUrl("");
+    setIsCtaSaved(false);
+  };
+
+  const renderButtonsSection = () => (
+    <div className="button-section">
+      <CapHeader
+        className="viber-render-heading"
+        title={
+          <CapRow type="flex">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+            <CapHeading className="viber-optional-label">
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapRow>
+        }
+        description={
+          <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
+        }
+      />
+      <CapRadioGroup
+        options={buttonRadioOptions}
+        value={buttonType}
+        onChange={onChangeButtonType}
+        className="viber-btn-radio-group"
+      />
+      {isBtnTypeCta && ButtonViber}
+    </div>
+  );
+  // Button Code End here
+
+  // to generate payload for create and edit
   const formatSubmitPayload = () => {
     const messageData = {
       text: messageContent,
     };
-    if (imageSrc) {
-      messageData.imageURL = imageSrc;
+    if (isMediaTypeImage) {
+      messageData.image = {};
+      messageData.image.url = imageSrc;
     }
-    if (buttonText && buttonURL) {
-      messageData.buttonText = buttonText;
-      messageData.buttonURL = buttonURL;
+    if (isMediaTypeVideo) {
+      const { viberVideoSrc, duration, viberVideoPreviewImg } =
+        viberVideoSrcAndPreview;
+      messageData.video = {};
+      messageData.video.url = viberVideoSrc;
+      messageData.video.thumbnailUrl = viberVideoPreviewImg;
+      messageData.video.duration = duration; // integer value in seconds
+    }
+    if (!isEmpty(ctaData)) {
+      messageData.button = {};
+      messageData.button.text = ctaData?.buttonText;
+      messageData.button.url = ctaData?.buttonURL;
     }
     return {
       versions: {
@@ -572,7 +562,7 @@ const Viber = (props) => {
                 },
               },
             ],
-            viber: {...messageData},
+            content: {...messageData},
           },
         },
       },
@@ -581,7 +571,7 @@ const Viber = (props) => {
     };
   };
 
-  const createCallback = ({errorMessage, resp}, isEdit) => {
+  const createCallback = ({ errorMessage, resp }, isEdit) => {
     if (!errorMessage) {
       CapNotification.success({
         message: isEdit ? formatMessage(messages.viberEditNotification) : formatMessage(messages.viberCreateNotification),
@@ -601,7 +591,7 @@ const Viber = (props) => {
         channel: VIBER,
         timeTaken,
         content: messageContent,
-        mode: isEdit ? EDIT : CREATE
+        mode: isEdit ? EDIT : CREATE,
       });
     } else {
       CapNotification.error({
@@ -615,7 +605,9 @@ const Viber = (props) => {
         formatSubmitPayload(),
         (resp, errorMessage) => {
           createCallback({resp, errorMessage});
-          onCreateComplete();
+          if (!errorMessage) {
+            onCreateComplete();
+          }
         }
     );
   };
@@ -628,7 +620,9 @@ const Viber = (props) => {
       },
         (resp, errorMessage) => {
           createCallback({resp, errorMessage}, true);
-          onCreateComplete();
+          if (!errorMessage) {
+            onCreateComplete();
+          }
         });
   };
 
@@ -652,22 +646,18 @@ const Viber = (props) => {
     if (messageContent?.trim() === '' || errorMessageTextarea) {
       return true;
     }
-    // cannot send text + image only messages, Need to add button details or remove one of the components in order to proceed
-    const trimedButtonText = buttonText.trim();
-    const trimedButtonUrl = buttonURL.trim();
-    if (messageContent !== '' && imageSrc && (trimedButtonUrl === '' && trimedButtonUrl === '')) {
-      return true;
-    }
-    // if button is being added than button url and button Text both are mandatory
-    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonText !== '' && trimedButtonUrl === '')) {
+    //if template title is empty
+    if (messageTitle?.trim() === '') {
       return true;
     }
-    // if button url is not valid url
-    if (buttonURLErrorMessage) {
+    // if media type is image/video than image/video should be uploaded
+    if (
+      (isMediaTypeImage && !imageSrc) ||
+      (isMediaTypeVideo && !viberVideoSrcAndPreview.viberVideoSrc)
+    ) {
       return true;
     }
-    //if template title is empty
-    if (messageTitle?.trim() === '') {
+    if (isBtnTypeCta && !isCtaSaved) {
       return true;
     }
     return false;
@@ -678,32 +668,25 @@ const Viber = (props) => {
       <CapSpin spinning={isEditLoading}>
         <CapRow>
           <CapColumn span={14}>
-            <StyledHeader
-              title={formatMessage(messages.viberCreativeTitle)}
-              size="regular"
-            />
-            {
-              isFullMode
-              ? (
-                <CapInput
-                  id={`viber_input`}
-                  onChange={onTextTitleChange}
-                  errorMessage={errorMessageTitle}
-                  className="text-template-title"
-                  placeholder={formatMessage(messages.textMessageTitlePlaceholder)}
-                  defaultValue={messageTitle || ''}
-                  value={messageTitle || ''}
-                  size="default"
-                  label={formatMessage(messages.textMessageTitleLabel)}
-                  style={{marginBottom: 20}}
-                  data-testid="template_name"
-                  />
-              )
-              : null
-            }
-            {container("message", <FormattedMessage {...messages.message} />, TextAreaViber, false)}
-            {container("image", <FormattedMessage {...messages.image} />, ImageViber, true)}
-            {container("button", <FormattedMessage {...messages.button} />, ButtonViber, true)}
+            {isFullMode ? (
+              <CapInput
+                id={`viber_input`}
+                onChange={onTextTitleChange}
+                errorMessage={errorMessageTitle}
+                placeholder={formatMessage(
+                  messages.textMessageTitlePlaceholder
+                )}
+                defaultValue={messageTitle || ""}
+                value={messageTitle || ""}
+                size="default"
+                label={formatMessage(messages.textMessageTitleLabel)}
+                data-testid="template_name"
+              />
+            ) : null}
+            {renderMediaSection()}
+            {renderMediaComponent()}
+            {renderTextAreaViber()}
+            {renderButtonsSection()}
             <div style={{marginBottom: '100px'}}/>
           </CapColumn>
           <CapColumn span={6}>
@@ -734,12 +717,11 @@ const Viber = (props) => {
             onClick={handleClose}
             className="cancel-msg"
             type="secondary"
-                  >
+          >
             <FormattedMessage {...messages.cancelButtonLabel} />
           </CapButton>
         </ViberFooter>
       </CapSpin>
-
     </>
   );
 };
@@ -755,10 +737,9 @@ const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(viberActions, dispatch),
 });
 
-
 export default withCreatives({
   WrappedComponent: injectIntl(Viber),
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});