@capillarytech/creatives-library 7.11.14 → 7.12.0

package/v2Containers/Rcs/index.js

@@ -1,1064 +0,0 @@
-/* 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,
-  } = 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};
-
-    .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 (!isEmpty(editContent)) {
-      const { cardContent = [], smsFallBackContent = {} } = editContent;
-      const {
-        media: { mediaUrl = '' } = {},
-        mediaType = '',
-        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 || {}}
-            />
-          }
-        />
-      </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 || {}}
-                />
-              }
-            />
-          </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;
-    const tempMediaSrc = !isMediaTypeNone ? rcsImageSrc : '';
-
-    return {
-      name: templateName,
-      versions: {
-        base: {
-          content: {
-            RCS: {
-              cardContent: [
-                {
-                  title: templateTitle,
-                  description: templateDesc,
-                  mediaType: templateMediaType,
-                  media: {
-                    mediaUrl: tempMediaSrc,
-                    height: MEDIUM,
-                  },
-                },
-              ],
-              cardSettings: {
-                cardOrientation: VERTICAL,
-                mediaAlignment: RIGHT,
-              },
-              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({});
-  };
-
-  const isDisableDone = () => {
-    //if template name is not entered
-    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,
-});