@capillarytech/creatives-library 7.12.15 → 7.12.16

package/v2Containers/Rcs/index.js

@@ -0,0 +1,1075 @@
+/* eslint-disable no-unused-expressions */
+import React, { useState, useEffect, useCallback } from 'react';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import { get, isEmpty, cloneDeep } from 'lodash';
+import styled from 'styled-components';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapCard from '@capillarytech/cap-ui-library/CapCard';
+import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
+import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
+import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import {
+  CAP_G01,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  CAP_SPACE_28,
+  CAP_SPACE_32,
+  CAP_WHITE,
+  CAP_SECONDARY,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import { makeSelectRcs } from './selectors';
+import {
+  isLoadingMetaEntities,
+  makeSelectMetaEntities,
+  setInjectedTags,
+} from '../Cap/selectors';
+import * as RcsActions from './actions';
+import * as TemplatesActions from '../Templates/actions';
+import './index.scss';
+import {
+  RCS,
+  SMS,
+  RCS_MEDIA_TYPES,
+  TEMPLATE_TITLE_MAX_LENGTH,
+  TEMPLATE_DESC_MAX_LENGTH,
+  FALLBACK_MESSAGE_MAX_LENGTH,
+  TAG,
+  EMBEDDED,
+  DEFAULT,
+  FULL,
+  ALL,
+  LIBRARY,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  RCS_IMG_WIDTH,
+  RCS_IMG_HEIGHT,
+  RCS_IMG_SIZE,
+  RCS_DLT_MODE,
+  MEDIUM,
+  VERTICAL,
+  RIGHT,
+  STANDALONE,
+  RICHCARD,
+} from './constants';
+import globalMessages from '../Cap/messages';
+import messages from './messages';
+import withCreatives from '../../hoc/withCreatives';
+import TemplatePreview from '../../v2Components/TemplatePreview';
+import CapImageUpload from '../../v2Components/CapImageUpload';
+import addCreativesIcon from '../Assets/images/addCreativesIllustration.svg';
+import Templates from '../Templates';
+import SmsTraiEdit from '../SmsTrai/Edit';
+import TagList from '../TagList';
+import { validateTags } from '../../utils/tagValidations';
+export const Rcs = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    onCreateComplete,
+    params,
+    templateData = {},
+    rcsData = {},
+    templatesActions,
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    loadingTags,
+    getFormData,
+    isDltEnabled,
+    smsRegister,
+    selectedOfferDetails,
+  } = props || {};
+  const { formatMessage } = intl;
+  const { TextArea } = CapInput;
+  const { CapCustomCardList } = CapCustomCard;
+  const [isEditFlow, setEditFlow] = useState(false);
+  const [tags, updateTags] = useState([]);
+  const [rcsImageSrc, updateRcsImageSrc] = useState('');
+  const [spin, setSpin] = useState(false);
+  //template
+  const [templateName, setTemplateName] = useState('');
+  const [templateNameError, setTemplateNameError] = useState(false);
+  const [templateMediaType, setTemplateMediaType] = useState(
+    RCS_MEDIA_TYPES.NONE,
+  );
+  const [templateTitle, setTemplateTitle] = useState('');
+  const [templateDesc, setTemplateDesc] = useState('');
+  const [templateDescError, setTemplateDescError] = useState(false);
+  //fallback
+  const [fallbackMessage, setFallbackMessage] = useState('');
+  const [fallbackMessageError, setFallbackMessageError] = useState(false);
+  //fallback dlt
+  const [showDltContainer, setShowDltContainer] = useState(false);
+  const [dltMode, setDltMode] = useState('');
+  const [dltEditData, setDltEditData] = useState({});
+  const [showDltCard, setShowDltCard] = useState(false);
+  const [fallbackPreviewmode, setFallbackPreviewmode] = useState(false);
+  const [dltPreviewData, setDltPreviewData] = useState('');
+
+  const mediaRadioOptions = [
+    {
+      value: RCS_MEDIA_TYPES.NONE,
+      label: formatMessage(messages.mediaNone),
+    },
+    {
+      value: RCS_MEDIA_TYPES.IMAGE,
+      label: formatMessage(messages.mediaImage),
+    },
+    {
+      value: RCS_MEDIA_TYPES.VIDEO,
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+          {formatMessage(messages.mediaVideo)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
+  ];
+
+  const isMediaTypeNone = templateMediaType === RCS_MEDIA_TYPES.NONE;
+  const RcsFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -32px;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+    z-index:1;
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;
+
+  const RcsLabel = styled.div`
+    display: flex;
+    margin-top: 20px;
+    margin-bottom: 6px;
+  `;
+
+  //gets template details
+  const paramObj = params || {};
+  useEffect(() => {
+    const { id } = paramObj;
+    if (id && isFullMode) {
+      setSpin(true);
+      actions.getTemplateDetails(id, setSpin);
+    }
+    //cleanup code
+    return () => {
+      actions.clearEditResponse();
+    };
+  }, [paramObj.id]);
+
+  useEffect(() => {
+    const { name = '', versions = {} } = isFullMode
+      ? rcsData.templateDetails || {}
+      : templateData || {};
+    const editContent = get(versions, `base.content.RCS`, {});
+    if (editContent && !isEmpty(editContent)) {
+      const { cardContent = [], smsFallBackContent = {} } = editContent;
+      const {
+        media: { mediaUrl = '' } = {},
+        mediaType = RCS_MEDIA_TYPES.NONE,
+        title = '',
+        description = '',
+      } = cardContent[0] || {};
+      const { message, templateConfigs = {} } = smsFallBackContent;
+      setTemplateName(name);
+      setTemplateMediaType(mediaType);
+      updateRcsImageSrc(mediaUrl);
+      setTemplateTitle(title);
+      setTemplateDesc(description);
+      setFallbackMessage(message);
+      setEditFlow(true);
+      // for DLT Fallback message
+      if (isDltEnabled) {
+        const {
+          registeredSenderIds: header = [],
+          template = {},
+          templateId = '',
+          templateName: tmpName = '',
+          templateVariableMapping = {},
+        } = templateConfigs;
+        if (header.length > 0) {
+          const tempData = {
+            versions: {
+              base: {
+                header,
+                'template_id': templateId,
+                'template_name': tmpName,
+                'sms-editor': template,
+                'var-mapped': templateVariableMapping,
+              },
+            },
+          };
+          setDltEditData(tempData);
+          setShowDltCard(true);
+        } else {
+          setShowDltCard(false);
+        }
+      }
+    }
+  }, [rcsData.templateDetails || templateData]);
+
+  // tag Code start from here
+  useEffect(() => {
+    if (!showDltContainer) {
+      //fetching tags
+      const { type, module } = location.query || {};
+      const isEmbedded = type === EMBEDDED;
+      const context = isEmbedded ? module : DEFAULT;
+      const embedded = isEmbedded ? type : FULL;
+      const query = {
+        layout: SMS,
+        type: TAG,
+        context,
+        embedded,
+      };
+      if (getDefaultTags) {
+        query.context = getDefaultTags;
+      }
+      globalActions.fetchSchemaForEntity(query);
+    }
+  }, [showDltContainer]);
+
+  useEffect(() => {
+    let tag = get(metaEntities, `tags.standard`, []);
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  const handleOnTagsContextChange = (data) => {
+    const { type } = location.query || {};
+    const tempData = (data || '').toLowerCase();
+    const isEmbedded = type === EMBEDDED;
+    const embedded = isEmbedded ? type : FULL;
+    const context = tempData === ALL ? DEFAULT : tempData;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context,
+      embedded,
+    };
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const onTagSelect = (data) => {
+    const tempMsg = `${templateDesc}{{${data}}}`;
+    const error = templateDescErrorHandler(tempMsg);
+    setTemplateDesc(tempMsg);
+    setTemplateDescError(error);
+  };
+
+  const onTagSelectFallback = (data) => {
+    const tempMsg = `${fallbackMessage}{{${data}}}`;
+    const error = fallbackMessageErrorHandler(tempMsg);
+    setFallbackMessage(tempMsg);
+    setFallbackMessageError(error);
+  };
+
+  //removing optout tag for rcs
+  const getRcsTags = () => {
+    const tempTags = cloneDeep(tags);
+    // eslint-disable-next-line no-undef
+    if (tempTags?.length > 0 && tempTags[0]?.definition?.value === 'optout') {
+      tempTags.shift();
+    }
+    return tempTags;
+  };
+  // tag Code end
+
+  const renderLabel = (value, showLabel) => (
+    <RcsLabel>
+      <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
+      {showLabel && (
+        <CapHeading type="h4" className="rcs-optional-label">
+          {formatMessage(messages.optional)}
+        </CapHeading>
+      )}
+    </RcsLabel>
+  );
+
+  const onTemplateNameChange = ({ target: { value } }) => {
+    setTemplateName(value);
+    templateNameErrorHandler(value);
+  };
+
+  const templateNameErrorHandler = (value) => {
+    let errorMessage = false;
+    if (value === '') {
+      errorMessage = formatMessage(
+        globalMessages.emptyTemplateNameErrorMessage,
+      );
+    }
+    setTemplateNameError(errorMessage);
+  };
+
+  const onTemplateMediaTypeChange = ({ target: { value } }) => {
+    setTemplateMediaType(value);
+    if (templateDesc.trim() === '') {
+      setTemplateDescError(false);
+    }
+  };
+
+  const onTemplateTitleChange = ({ target: { value } }) => {
+    setTemplateTitle(value);
+  };
+
+  const onTemplateDescChange = ({ target: { value } }) => {
+    const error = templateDescErrorHandler(value);
+    setTemplateDesc(value);
+    setTemplateDescError(error);
+  };
+
+  const templateDescErrorHandler = (value) => {
+    let errorMessage = false;
+    const { unsupportedTags } =
+      validateTags({
+        content: value,
+        tagsParam: tags,
+        injectedTagsParams: injectedTags,
+        location,
+        tagModule: getDefaultTags,
+      }) || {};
+    if (value === '' && isMediaTypeNone) {
+      errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
+    } else if (value?.length > TEMPLATE_DESC_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.templateDescLengthError);
+    } else if (unsupportedTags?.length > 0) {
+      errorMessage = formatMessage(
+        globalMessages.unsupportedTagsValidationError,
+        {
+          unsupportedTags,
+        },
+      );
+    }
+    return errorMessage;
+  };
+
+  const onFallbackMessageChange = ({ target: { value } }) => {
+    const error = fallbackMessageErrorHandler(value);
+    setFallbackMessage(value);
+    setFallbackMessageError(error);
+  };
+
+  const fallbackMessageErrorHandler = (value) => {
+    let errorMessage = false;
+    const { unsupportedTags } =
+      validateTags({
+        content: value,
+        tagsParam: tags,
+        injectedTagsParams: injectedTags,
+        location,
+        tagModule: getDefaultTags,
+      }) || {};
+    if (value?.length > FALLBACK_MESSAGE_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.fallbackMsgLenError);
+    } else if (unsupportedTags?.length > 0) {
+      errorMessage = formatMessage(
+        globalMessages.unsupportedTagsValidationError,
+        {
+          unsupportedTags,
+        },
+      );
+    }
+    return errorMessage;
+  };
+
+  const renderTextComponent = (
+    <>
+      {/* template title */}
+      {renderLabel('templateTitle', true)}
+      <CapInput
+        id="rcs-template-title-input"
+        onChange={onTemplateTitleChange}
+        placeholder={formatMessage(messages.templateTitlePlaceholder)}
+        value={templateTitle || ''}
+        size="default"
+        maxLength={TEMPLATE_TITLE_MAX_LENGTH}
+        suffix={
+          <CapLabel type="label1">{`${templateTitle?.length} / ${TEMPLATE_TITLE_MAX_LENGTH}`}</CapLabel>
+        }
+      />
+      {/* template message */}
+      <CapRow id="rcs-template-message-label">
+        <CapHeader
+          title={
+            <CapRow type="flex">
+              <CapHeading type="h4">
+                {formatMessage(messages.templateDescLabel)}
+              </CapHeading>
+              {!isMediaTypeNone && (
+                <CapHeading type="h4" className="rcs-optional-label">
+                  {formatMessage(messages.optional)}
+                </CapHeading>
+              )}
+            </CapRow>
+          }
+          suffix={
+            <TagList
+              label={formatMessage(globalMessages.addLabels)}
+              onTagSelect={onTagSelect}
+              location={location}
+              tags={getRcsTags()}
+              onContextChange={handleOnTagsContextChange}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+            />
+          }
+        />
+      </CapRow>
+      <TextArea
+        id="rcs_template_message_textarea"
+        autosize={{ minRows: 3, maxRows: 5 }}
+        placeholder={formatMessage(messages.templateDescPlaceholder)}
+        onChange={onTemplateDescChange}
+        errorMessage={templateDescError}
+        value={templateDesc || ''}
+        maxLength={1000}
+      />
+    </>
+  );
+
+  const fallbackSmsLength = () => (
+    <CapLabel type="label1" className="fallback-sms-length">
+      {formatMessage(messages.totalCharacters, {
+        smsCount: Math.ceil(
+          fallbackMessage?.length / FALLBACK_MESSAGE_MAX_LENGTH,
+        ),
+        number: fallbackMessage?.length,
+      })}
+    </CapLabel>
+  );
+
+  //adding creative dlt fallback sms handlers
+  const addDltMsgHandler = () => {
+    setShowDltContainer(true);
+    setDltMode(RCS_DLT_MODE.TEMPLATES);
+    setDltEditData({});
+    setFallbackMessage('');
+  };
+
+  const closeDltContainerHandler = () => {
+    setShowDltContainer(false);
+    setDltMode('');
+    templatesActions.getAllTemplates('Rcs', { page: 1, perPage: 25 });
+  };
+
+  const rcsDltEditSelectHandler = (data) => {
+    setShowDltContainer(true);
+    setDltMode(RCS_DLT_MODE.EDIT);
+    setDltEditData(data);
+  };
+
+  const rcsDltEditCompletionHandler = (data) => {
+    const tempData = {
+      versions: {
+        // eslint-disable-next-line no-undef
+        base: data?.value?.base || {},
+      },
+    };
+    const fallMsg = get(tempData, `versions.base.updated-sms-editor`, []).join(
+      '',
+    );
+    closeDltContainerHandler();
+    setDltEditData(tempData);
+    setFallbackMessage(fallMsg);
+    setFallbackMessageError(fallMsg?.length > FALLBACK_MESSAGE_MAX_LENGTH);
+    setShowDltCard(true);
+  };
+
+  const rcsDltCardDeleteHandler = () => {
+    closeDltContainerHandler();
+    setDltEditData({});
+    setFallbackMessage('');
+    setFallbackMessageError(false);
+    setShowDltCard(false);
+  };
+
+  const dltFallbackListingPreviewhandler = (data) => {
+    const {
+      'updated-sms-editor': updatedSmsEditor = [],
+      'sms-editor': smsEditor = '',
+    } = data.versions.base || {};
+    setFallbackPreviewmode(true);
+    setDltPreviewData(
+      updatedSmsEditor === '' ? smsEditor : updatedSmsEditor.join(''),
+    );
+  };
+
+  const getDltContentCardList = (content, channel) => {
+    const extra = [
+      <CapIcon
+        type="edit"
+        style={{ marginRight: '8px' }}
+        onClick={() => rcsDltEditSelectHandler(dltEditData)}
+      />,
+      <CapDropdown
+        overlay={
+          <CapMenu>
+            <>
+              <CapMenu.Item
+                className="ant-dropdown-menu-item"
+                onClick={() => setFallbackPreviewmode(true)}
+              >
+                {formatMessage(globalMessages.preview)}
+              </CapMenu.Item>
+              <CapMenu.Item
+                className="ant-dropdown-menu-item"
+                onClick={rcsDltCardDeleteHandler}
+              >
+                {formatMessage(globalMessages.delete)}
+              </CapMenu.Item>
+            </>
+          </CapMenu>
+        }
+      >
+        <CapIcon type="more" />
+      </CapDropdown>,
+    ];
+    return {
+      title: channel,
+      content,
+      cardType: channel,
+      extra,
+    };
+  };
+
+  const getDltSlideBoxContent = () => {
+    const loc = {
+      pathname: `/sms/edit`,
+      query: { type: EMBEDDED, module: LIBRARY },
+      search: '',
+    };
+    const route = { name: SMS.toLowerCase() };
+    let dltHeader = '';
+    let dltContent = '';
+    if (dltMode === RCS_DLT_MODE.TEMPLATES) {
+      dltHeader = (
+        <CapHeader
+          title={formatMessage(messages.rcsDltTitle)}
+          description={formatMessage(messages.rcsDltDesc)}
+        />
+      );
+      dltContent = (
+        <Templates
+          location={loc}
+          route={route}
+          smsRegister={smsRegister}
+          isFullMode={isFullMode}
+          isDltFromRcs
+          onSelectTemplate={rcsDltEditSelectHandler}
+          handlePeviewTemplate={dltFallbackListingPreviewhandler}
+        />
+      );
+    } else if (dltMode === RCS_DLT_MODE.EDIT) {
+      dltHeader = formatMessage(messages.dltEditHeader);
+      dltContent = (
+        <SmsTraiEdit
+          location={loc}
+          route={route}
+          getDefaultTags="outbound"
+          handleClose={closeDltContainerHandler}
+          templateData={dltEditData}
+          getFormSubscriptionData={rcsDltEditCompletionHandler}
+          isFullMode={false}
+        />
+      );
+    }
+    return { dltHeader, dltContent };
+  };
+
+  const renderFallBackSmsComponent = () => {
+    const contentArr = [];
+    const showAddCreativeBtnForDlt = isDltEnabled && !showDltCard;
+    const showCardForDlt = isDltEnabled && showDltCard;
+    const showNonDltFallbackComp = !showAddCreativeBtnForDlt && !showCardForDlt;
+    //pushing common fallback sms headings
+    contentArr.push(
+      <CapRow
+        style={{
+          marginBottom: isDltEnabled ? '20px' : '10px',
+        }}
+      >
+        <CapHeader
+          title={
+            <CapRow type="flex">
+              <CapHeading type="h4">
+                {formatMessage(messages.fallbackLabel)}
+              </CapHeading>
+              <CapHeading type="h4" className="rcs-optional-label">
+                {formatMessage(messages.optional)}
+              </CapHeading>
+              <CapTooltipWithInfo
+                placement="right"
+                infoIconProps={{
+                  style: { marginLeft: '4px', marginTop: '3px' },
+                }}
+                title={formatMessage(messages.fallbackToolTip)}
+              />
+            </CapRow>
+          }
+          description={formatMessage(messages.fallbackDesc)}
+          suffix={
+            isDltEnabled ? null : (
+              <CapButton
+                type="flat"
+                className="fallback-preview-btn"
+                prefix={<CapIcon type="eye" />}
+                style={{ color: CAP_SECONDARY.base }}
+                onClick={() => setFallbackPreviewmode(true)}
+                disabled={fallbackMessage === '' || fallbackMessageError}
+              >
+                {formatMessage(globalMessages.preview)}
+              </CapButton>
+            )
+          }
+        />
+      </CapRow>,
+    );
+
+    //dlt is enabled, and dlt content is not yet added, show button to add dlt creative
+    showAddCreativeBtnForDlt &&
+      contentArr.push(
+        <CapCard className="rcs-dlt-fallback-card">
+          <CapRow type="flex" justify="center" align="middle">
+            <CapColumn span={10}>
+              <CapImage src={addCreativesIcon} />
+            </CapColumn>
+            <CapColumn span={14}>
+              <CapButton
+                className="add-dlt-btn"
+                type="secondary"
+                onClick={addDltMsgHandler}
+              >
+                {formatMessage(messages.addSmsCreative)}
+              </CapButton>
+            </CapColumn>
+          </CapRow>
+        </CapCard>,
+      );
+
+    //dlt is enabled and dlt content is added, show it in a card
+    showCardForDlt &&
+      contentArr.push(
+        <CapCustomCardList
+          cardList={[getDltContentCardList(fallbackMessage, SMS)]}
+          className="rcs-dlt-card"
+        />,
+        fallbackMessageError && (
+          <CapError className="rcs-fallback-len-error">
+            {formatMessage(messages.fallbackMsgLenError)}
+          </CapError>
+        ),
+      );
+
+    //dlt is not enabled, show non dlt text area
+    showNonDltFallbackComp &&
+      contentArr.push(
+        <>
+          <CapRow>
+            <CapHeader
+              title={
+                <CapHeading type="h4">
+                  {formatMessage(messages.fallbackTextAreaLabel)}
+                </CapHeading>
+              }
+              suffix={
+                <TagList
+                  label={formatMessage(globalMessages.addLabels)}
+                  onTagSelect={onTagSelectFallback}
+                  location={location}
+                  tags={tags || []}
+                  onContextChange={handleOnTagsContextChange}
+                  injectedTags={injectedTags || {}}
+                  selectedOfferDetails={selectedOfferDetails}
+                />
+              }
+            />
+          </CapRow>
+          <TextArea
+            id="rcs_fallback_message_textarea"
+            autosize={{ minRows: 3, maxRows: 5 }}
+            placeholder={formatMessage(messages.fallbackMsgPlaceholder)}
+            onChange={onFallbackMessageChange}
+            errorMessage={fallbackMessageError}
+            value={fallbackMessage || ''}
+          />
+          <CapRow>{fallbackSmsLength()}</CapRow>
+        </>,
+      );
+
+    return <>{contentArr}</>;
+  };
+
+  const uploadRcsImage = useCallback((file, type, fileParams) => {
+    actions.uploadRcsAsset(file, type, fileParams, 0);
+  }, []);
+
+  const setUpdateRcsImageSrc = useCallback(
+    (val) => {
+      updateRcsImageSrc(val);
+      actions.clearRcsAsset(0);
+    },
+    [rcsImageSrc],
+  );
+
+  const updateOnRcsImageReUpload = useCallback(() => {
+    updateRcsImageSrc('');
+  }, [rcsImageSrc]);
+
+  const getMediaBasedComponent = () => {
+    switch (templateMediaType) {
+      case RCS_MEDIA_TYPES.NONE: {
+        return renderTextComponent;
+      }
+      case RCS_MEDIA_TYPES.IMAGE: {
+        return (
+          <>
+            <CapImageUpload
+              style={{ paddingTop: '20px' }}
+              allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+              imgWidth={RCS_IMG_WIDTH}
+              imgHeight={RCS_IMG_HEIGHT}
+              imgSize={RCS_IMG_SIZE}
+              uploadAsset={uploadRcsImage}
+              isFullMode={isFullMode}
+              imageSrc={rcsImageSrc}
+              updateImageSrc={setUpdateRcsImageSrc}
+              updateOnReUpload={updateOnRcsImageReUpload}
+              index={0}
+              className="cap-custom-image-upload"
+              key="rcs-uploaded-image"
+              imageData={rcsData}
+              channel={RCS}
+            />
+            {renderTextComponent}
+          </>
+        );
+      }
+      default:
+        return null;
+    }
+  };
+
+  const getRcsPreview = () => (
+    <TemplatePreview
+      channel={RCS}
+      content={{
+        rcsPreviewContent: {
+          rcsTitle: templateTitle,
+          rcsDesc: templateDesc,
+          ...(!isMediaTypeNone && {
+            rcsImageSrc,
+          }),
+        },
+      }}
+    />
+  );
+
+  const createPayload = () => {
+    const base = get(dltEditData, `versions.base`, {});
+    const {
+      template_id: templateId = '',
+      // eslint-disable-next-line camelcase
+      template_name = '',
+      'sms-editor': template = '',
+      header: registeredSenderIds = [],
+      'var-mapped': templateVariableMapping = {},
+    } = base;
+
+    return {
+      name: templateName,
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              cardContent: [
+                {
+                  title: templateTitle,
+                  description: templateDesc,
+                  mediaType: templateMediaType,
+                  ...(!isMediaTypeNone && {
+                    media: {
+                      mediaUrl: rcsImageSrc,
+                      height: MEDIUM,
+                    },
+                  }),
+                },
+              ],
+              cardSettings: {
+                cardOrientation: VERTICAL,
+              },
+              cardType: STANDALONE,
+              contentType: RICHCARD,
+              smsFallBackContent: {
+                message: fallbackMessage,
+                ...(isDltEnabled && {
+                  templateConfigs: {
+                    templateId,
+                    templateName: template_name,
+                    template,
+                    registeredSenderIds,
+                    templateVariableMapping,
+                  },
+                }),
+              },
+            },
+          },
+        },
+      },
+      type: RCS,
+    };
+  };
+
+  const actionCallback = ({ errorMessage, resp }, isEdit) => {
+    // eslint-disable-next-line no-undef
+    const error = errorMessage?.message || errorMessage;
+    if (!error) {
+      CapNotification.success({
+        message: isEdit
+          ? formatMessage(messages.rcsEditNotification)
+          : formatMessage(messages.rcsCreateNotification),
+      });
+      if (isEdit) {
+        actions.clearEditResponse();
+      } else {
+        actions.clearCreateResponse();
+      }
+    } else {
+      CapNotification.error({
+        message: error,
+      });
+    }
+  };
+
+  const onCreateRcs = () => {
+    setSpin(true);
+    actions.createTemplate(createPayload(), (resp, errorMessage) => {
+      actionCallback({ resp, errorMessage });
+      if (!errorMessage) {
+        onCreateComplete();
+      } else {
+        setSpin(false);
+      }
+    });
+  };
+
+  const onEditRcs = () => {
+    setSpin(true);
+    actions.editTemplate(
+      {
+        ...createPayload(),
+        _id: params.id,
+      },
+      (resp, errorMessage) => {
+        actionCallback({ resp, errorMessage }, true);
+        if (!errorMessage) {
+          onCreateComplete();
+        } else {
+          setSpin(false);
+        }
+      },
+    );
+  };
+
+  const onDoneCallback = () => {
+    if (isFullMode) {
+      if (isEditFlow) {
+        return onEditRcs;
+      }
+      return onCreateRcs;
+    }
+    return () => getFormData({
+      value: createPayload(),
+      _id: params && params.id,
+      validity: true,
+      type: RCS,
+    });
+  };
+
+  const isDisableDone = () => {
+    //if template name is not entered
+    if (isFullMode) {
+      if (templateName.trim() === '' || templateNameError) {
+        return true;
+      }
+    }
+
+    //if template message is not entered
+    if (isMediaTypeNone && templateDesc.trim() === '') {
+      return true;
+    }
+    //if image is not uploaded
+    if (!isMediaTypeNone && rcsImageSrc === '') {
+      return true;
+    }
+    if (templateDescError || fallbackMessageError) {
+      return true;
+    }
+    return false;
+  };
+
+  const getMainContent = () => {
+    if (showDltContainer && !fallbackPreviewmode) {
+      const dltSlideBoxContent = showDltContainer && getDltSlideBoxContent();
+      const { dltHeader = '', dltContent = '' } = dltSlideBoxContent;
+      return (
+        <CapSlideBox
+          show={showDltContainer}
+          header={dltHeader}
+          content={dltContent}
+          handleClose={closeDltContainerHandler}
+          size="size-xl"
+        />
+      );
+    }
+    const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
+    const mediaTypeMsg = isMediaTypeNone ? 'textMessage' : 'image';
+    return (
+      <>
+        <CapRow className="cap-rcs-creatives">
+          <CapColumn span={14}>
+            {/* template name */}
+            {isFullMode && (
+              <CapInput
+                id="rcs_template_name_input"
+                onChange={onTemplateNameChange}
+                errorMessage={templateNameError}
+                placeholder={formatMessage(
+                  globalMessages.templateNamePlaceholder,
+                )}
+                value={templateName || ''}
+                size="default"
+                label={formatMessage(globalMessages.creativeNameLabel)}
+              />
+            )}
+            {/* template mdeia type */}
+            {renderLabel('mediaLabel')}
+            <CapRadioGroup
+              options={mediaRadioOptions || []}
+              value={templateMediaType}
+              onChange={onTemplateMediaTypeChange}
+              className="rcs-radio"
+            />
+            {getMediaBasedComponent()}
+            <CapDivider style={{ margin: `${CAP_SPACE_28} 0` }} />
+            {renderFallBackSmsComponent()}
+            <div className="rcs-scroll-div" />
+          </CapColumn>
+          <CapColumn span={10} className="rcs-preview-container">
+            {getRcsPreview()}
+          </CapColumn>
+        </CapRow>
+        <RcsFooter>
+          {/* show tooltip only if button is disabled */}
+          <CapTooltip
+            title={
+              isDisableDone()
+                ? formatMessage(messages.rcsDoneBtnToolTip, {
+                  type: formatMessage(messages[mediaTypeMsg]),
+                })
+                : ''
+            }
+            placement={'right'}
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                onClick={onDoneCallback()}
+                disabled={isDisableDone()}
+                className="rcs-done-btn"
+              >
+                <FormattedMessage {...globalMessages.done} />
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </RcsFooter>
+
+        {fallbackPreviewmode && (
+          <CapSlideBox
+            className="rcs-fallback-preview"
+            show={fallbackPreviewmode}
+            header={
+              <CapHeading type="h7" style={{ color: CAP_G01 }}>
+                {formatMessage(messages.fallbackPreviewtitle)}
+              </CapHeading>
+            }
+            content={
+              <>
+                <TemplatePreview
+                  channel={RCS}
+                  content={{
+                    rcsPreviewContent: {
+                      rcsDesc: tempMsg,
+                    },
+                  }}
+                />
+                <CapHeading
+                  type="h3"
+                  style={{ textAlign: 'center' }}
+                  className="margin-t-16"
+                >
+                  {formatMessage(messages.totalCharacters, {
+                    smsCount: Math.ceil(
+                      tempMsg?.length / FALLBACK_MESSAGE_MAX_LENGTH,
+                    ),
+                    number: tempMsg.length,
+                  })}
+                </CapHeading>
+              </>
+            }
+            handleClose={() => {
+              setFallbackPreviewmode(false);
+              setDltPreviewData('');
+            }}
+          />
+        )}
+      </>
+    );
+  };
+  return <CapSpin spinning={loadingTags || spin}>{getMainContent()}</CapSpin>;
+};
+
+const mapStateToProps = createStructuredSelector({
+  rcsData: makeSelectRcs(),
+  metaEntities: makeSelectMetaEntities(),
+  loadingTags: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(RcsActions, dispatch),
+  templatesActions: bindActionCreators(TemplatesActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(Rcs),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});