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

package/v2Containers/Viber/index.js

@@ -1,59 +1,69 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-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 { 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 { makeSelectViber, makeSelectCreateViber } from './selectors';
 import * as viberActions from './actions';
 import { validateTags } from '../../utils/tagValidations';
 import TemplatePreview from '../../v2Components/TemplatePreview';
-import { isUrl } from '../Line/Container/Wrapper/utils';
+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 messages from './messages';
 import TagList from '../TagList';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import Gallery from '../Assets/Gallery';
 import {
-  ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER,
-  ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER,
+  ALLOWED_EXTENSIONS_REGEX,
   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 withCreatives from '../../hoc/withCreatives';
+import { GA } from '@capillarytech/cap-ui-utils';
 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';
-import CapImageUpload from '../../v2Components/CapImageUpload';
-import CapVideoUpload from '../../v2Components/CapVideoUpload';
-import './index.scss';
-import { ViberFooter } from './style';
+
+const { CapHeadingSpan } = CapHeading;
 const { TextArea } = CapInput;
 
-export const Viber = (props) => {
+
+const Viber = (props) => {
   const {
     intl,
+    supportedExtensions,
     isFullMode,
     injectedTags,
     location,
@@ -71,37 +81,47 @@ export const Viber = (props) => {
   } = props || {};
 
   const { formatMessage } = intl;
-  const [imageSrc, setImageSrc] = useState('');
+  const [isImageError, updateImageErrorMessage] = useState(false);
+  const [isImage, updateImageStatus] = useState(false);
+  const [imageSrc, setImageSrc] = useState();
+  const [isDrawerRequired, updateDrawerRequirement] = useState(false);
   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 [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 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`)) {
@@ -118,51 +138,42 @@ export const Viber = (props) => {
 
   useEffect(() => {
     if ((params && params.id) || (templateData || {}).edit) {
-      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 || {};
+      const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
+      const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
       updateTextMessageTitle(editMessageTitle);
-      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?.thumbnailUrl,
-          viberVideoPreviewImg: video?.thumbnailUrl,
-          duration: video?.duration,
-        });
-        updateAssetList({
-          ...assetList,
-          previewUrl: video?.thumbnailUrl,
-          videoSrc: video?.url,
-          videoDuration: video?.duration,
-        });
-      } else {
-        setTemplateMediaType(VIBER_MEDIA_TYPES.TEXT);
+      updateTextMessageContent(editViberContent.text || '');
+      updateButtonText(editViberContent.buttonText || '');
+      updateButtonUrl(editViberContent.buttonURL || '');
+      if (editViberContent.imageURL) {
+        updateImageSrc(editViberContent.imageURL);
+        updateImagePreview(editViberContent.imageURL);
+        updateImageStatus(true);
       }
     }
   }, [viber[`templateDetails`] || templateData]);
 
-  // Text area Code start here
+// 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 ******************************
 
-  // Tags Code start from here
+// Tags Code start from here
   useEffect(() => {
     const type = location && location.query && location.query.type;
     const getTagsQuery = {
@@ -197,9 +208,10 @@ export 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({
@@ -213,11 +225,12 @@ export 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);
   };
 
@@ -240,152 +253,257 @@ export const Viber = (props) => {
     updateErrorMessageTitle(errorMessage);
   };
   // Text Area container
-  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
-
-  // template media code start here
+  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 isMediaTypeImage = templateMediaType === VIBER_MEDIA_TYPES.IMAGE;
-  const isMediaTypeVideo = templateMediaType === VIBER_MEDIA_TYPES.VIDEO;
+// ******************** Text area Code End here ******************************
 
-  const onTemplateMediaTypeChange = ({ target: { value } }) => {
-    setTemplateMediaType(value);
+// ******************** 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 uploadViberAsset = (file, type, fileParams) => {
-    actions.uploadViberAsset(file, type, fileParams, 0);
+  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 updateOnViberImageReUpload = useCallback(() => {
-    setImageSrc("");
-  }, [imageSrc]);
+  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 setUpdateViberImageSrc = useCallback(
-    (val) => {
-      setImageSrc(val);
-      actions.clearViberAsset(0);
-    },
-    [imageSrc]
-  );
+  const setDrawerVisibility = (drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag);
 
-  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 onGalleryClick = (event) => {
+    event.stopPropagation();
+    setDrawerVisibility(true);
+  };
 
-  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 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 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 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 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={false}
-    />
-  );
+  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 renderMediaComponent = () => (
-    <>
-      {isMediaTypeImage && renderImageComponent()}
-      {isMediaTypeVideo && renderVideoComonent()}
-    </>
-  );
+  const WithLabel = LabelHOC(ImageComponent);
+  const ImageViber = <>
+    <WithLabel
+      key={`viber-with-label`}
+      errorMessage={isImageError} ifError={!!isImageError}
+    />
+    <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 ******************************
 
-  // 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);
   };
@@ -398,159 +516,50 @@ export const Viber = (props) => {
     }
     updateButtonURLErrorMessage(errorMessage);
   };
-  const getPreviewSection = () => (
+  const getPreviewSection = () =>
     // const accountName = get(lineData, 'selectedLineAccount.name', '');
-    <TemplatePreview
-      channel={VIBER}
-      content={{
-        viberPreviewContent: {
-          ...(isMediaTypeImage && { imageURL: imageSrc }),
-          ...(isMediaTypeVideo && { videoParams: viberVideoSrcAndPreview }),
-          buttonText,
-          messageContent,
-        },
-      }}
-      viberAccountName={(accountName[0] || "").toUpperCase()}
-      viberBrandName={accountName}
-    />
-  );
-
-  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>
-  );
-
-  const onChangeButtonType = ({ target: { value } }) => {
-    setButtonType(value);
-    setCtadata({});
-    updateButtonText("");
-    updateButtonUrl("");
-    setIsCtaSaved(false);
-  };
+     (
+       <TemplatePreview
+         channel="VIBER"
+         content={{imageURL: imagePreview, buttonText, messageContent}}
+         viberAccountName={((accountName[0] || "")).toUpperCase()}
+         viberBrandName={accountName}
+        />
+    );
 
-  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"
+  const ButtonViber = (<>
+    <CapInput
+      id="viber-button-text"
+      type="input"
+      onChange={onChangeButtonText}
+      label={formatMessage(messages.buttonText)}
+      defaultValue={buttonText}
+      value={buttonText}
+      style={{paddingBottom: '11px'}}
+      maxLength={20}
+    />
+    <CapInput
+      id="viber-button-url"
+      type="input"
+      onChange={onChangeButtonUrl}
+      defaultValue={buttonURL}
+      value={buttonURL}
+      label={formatMessage(messages.buttonUrl)}
+      errorMessage={buttonURLErrorMessage}
       />
-      {isBtnTypeCta && ButtonViber}
-    </div>
-  );
-  // Button Code End here
+  </>);
 
+ // ******************** Button Code End here ******************************
   const formatSubmitPayload = () => {
     const messageData = {
       text: messageContent,
     };
-    if (isMediaTypeImage) {
-      messageData.image = {};
-      messageData.image.url = imageSrc;
+    if (imageSrc) {
+      messageData.imageURL = imageSrc;
     }
-    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;
+    if (buttonText && buttonURL) {
+      messageData.buttonText = buttonText;
+      messageData.buttonURL = buttonURL;
     }
     return {
       versions: {
@@ -563,7 +572,7 @@ export const Viber = (props) => {
                 },
               },
             ],
-            content: {...messageData},
+            viber: {...messageData},
           },
         },
       },
@@ -572,7 +581,7 @@ export 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),
@@ -592,7 +601,7 @@ export const Viber = (props) => {
         channel: VIBER,
         timeTaken,
         content: messageContent,
-        mode: isEdit ? EDIT : CREATE,
+        mode: isEdit ? EDIT : CREATE
       });
     } else {
       CapNotification.error({
@@ -606,9 +615,7 @@ export const Viber = (props) => {
         formatSubmitPayload(),
         (resp, errorMessage) => {
           createCallback({resp, errorMessage});
-          if (!errorMessage) {
-            onCreateComplete();
-          }
+          onCreateComplete();
         }
     );
   };
@@ -621,9 +628,7 @@ export const Viber = (props) => {
       },
         (resp, errorMessage) => {
           createCallback({resp, errorMessage}, true);
-          if (!errorMessage) {
-            onCreateComplete();
-          }
+          onCreateComplete();
         });
   };
 
@@ -647,24 +652,22 @@ export 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 !== '' && (trimedButtonText === '' && trimedButtonUrl === '')) {
-    //   return true;
-    // }
-    //if template title is empty
-    if (messageTitle?.trim() === '') {
+    // 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 media type is image/video than image/video should be uploaded
-    if (
-      (isMediaTypeImage && !imageSrc) ||
-      (isMediaTypeVideo && !viberVideoSrcAndPreview.viberVideoSrc)
-    ) {
+    // if button is being added than button url and button Text both are mandatory
+    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonText !== '' && trimedButtonUrl === '')) {
       return true;
     }
-    if (isBtnTypeCta && !isCtaSaved) {
+    // if button url is not valid url
+    if (buttonURLErrorMessage) {
+      return true;
+    }
+    //if template title is empty
+    if (messageTitle?.trim() === '') {
       return true;
     }
     return false;
@@ -675,25 +678,32 @@ export const Viber = (props) => {
       <CapSpin spinning={isEditLoading}>
         <CapRow>
           <CapColumn span={14}>
-            {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()}
+            <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)}
             <div style={{marginBottom: '100px'}}/>
           </CapColumn>
           <CapColumn span={6}>
@@ -724,11 +734,12 @@ export const Viber = (props) => {
             onClick={handleClose}
             className="cancel-msg"
             type="secondary"
-          >
+                  >
             <FormattedMessage {...messages.cancelButtonLabel} />
           </CapButton>
         </ViberFooter>
       </CapSpin>
+
     </>
   );
 };
@@ -744,9 +755,10 @@ const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(viberActions, dispatch),
 });
 
+
 export default withCreatives({
   WrappedComponent: injectIntl(Viber),
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});