@capillarytech/creatives-library 7.12.3 → 7.12.6

package/config/app.js

@@ -17,6 +17,7 @@ const config = {
   },
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    //api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.3",
+  "version": "7.12.6",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TemplatePreview/assets/images/sms_mobile_ios.svg

@@ -0,0 +1,18 @@
+<svg width="228" height="472" viewBox="0 0 228 472" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <rect fill="#101211" width="228" height="472" rx="32"/>
+        <path d="M195 11c12.703 0 23 10.297 23 23v405c0 12.703-10.297 23-23 23H33c-12.703 0-23-10.297-23-23V34c0-12.703 10.297-23 23-23h25v3c0 7.077 5.655 12.833 12.693 12.996L71 27h86c7.18 0 13-5.82 13-13v-3h25z" fill="#F4F5F7"/>
+        <path d="M195 11c12.703 0 23 10.297 23 23v43.092H10V34c0-12.703 10.297-23 23-23h25v3c0 7.077 5.655 12.833 12.693 12.996L71 27h86c7.18 0 13-5.82 13-13v-3h25z" fill="#F8F8F8"/>
+        <rect stroke="#C8C7CC" stroke-width=".5" fill="#FAFAFA" x="44" y="421.072" width="168" height="20" rx="10"/>
+        <path d="M79.35 455h69.3c.72 0 1.35.467 1.35 1 0 .533-.63 1-1.35 1h-69.3c-.72 0-1.35-.467-1.35-1 0-.533.63-1 1.35-1z" fill="#2E2E2E" fill-rule="nonzero" opacity=".4"/>
+        <path fill="#E0E0E0" d="M10 77h208v1H10z"/>
+        <path d="m19.769 59.041-4.623-4.568a.487.487 0 0 1 0-.696l4.623-4.568a.728.728 0 0 1 1.02 0 .708.708 0 0 1 0 1.008l-3.954 3.908 3.954 3.908a.708.708 0 0 1 0 1.008.728.728 0 0 1-1.02 0M201 48a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm0 .818a5.182 5.182 0 1 0 0 10.364 5.182 5.182 0 0 0 0-10.364zm.502 3.644v4.014h.502v.251h-2.008v-.25h.502v-3.764h-.502v-.251h1.506zm-.627-2.007a.627.627 0 1 1 0 1.254.627.627 0 0 1 0-1.254z" fill="#007AFF"/>
+        <path d="M198.7 21.3c-.5 0-.6 0-.8.1l-.3.3c-.1.2-.1.3-.1.8v2c0 .5 0 .6.1.8l.3.3c.2.1.3.1.8.1h6.8c.5 0 .6 0 .8-.1l.3-.3c.1-.2.1-.3.1-.8v-2c0-.5 0-.6-.1-.8l-.3-.3c-.2-.1-.3-.1-.8-.1h-6.8zm0-.4h6.8c.6 0 .8.1 1 .2.2.1.4.3.5.5.1.2.2.4.2 1v2c0 .6-.1.8-.2 1-.1.2-.3.4-.5.5-.2.1-.4.2-1 .2h-6.8c-.6 0-.8-.1-1-.2-.2-.1-.4-.3-.5-.5-.1-.2-.2-.4-.2-1v-2c0-.6.1-.8.2-1 .1-.2.3-.4.5-.5.2-.2.4-.2 1-.2zm8.9 1.7c.5.2.7.5.7.9s-.2.7-.7.9v-1.8z" fill-opacity=".36" fill="#000" fill-rule="nonzero"/>
+        <path d="M198.6 21.7h7c.2 0 .3 0 .4.1.1 0 .1.1.2.2s.1.2.1.4v2.3c0 .2 0 .3-.1.4l-.2.2c-.1.1-.2.1-.4.1h-7c-.2 0-.3 0-.4-.1-.1-.1-.2-.2-.2-.3 0-.1-.1-.2-.1-.4v-2.3c0-.2 0-.3.1-.4 0-.1.1-.1.2-.2.1.1.1 0 .4 0zM173.3 24.4c.5 0 .8.4.8.8v.6c0 .5-.4.8-.8.8s-.8-.4-.8-.8v-.6c0-.5.4-.8.8-.8zm2.7-1.2c.5 0 .8.4.8.8v1.7c0 .5-.4.8-.8.8s-.8-.4-.8-.8V24c0-.4.4-.8.8-.8zm2.6-1.3c.5 0 .8.4.8.8v3c0 .5-.4.8-.8.8s-.8-.4-.8-.8v-3c0-.4.3-.8.8-.8zm2.6-1.3c.5 0 .8.4.8.8v4.3c0 .5-.4.8-.8.8s-.8-.4-.8-.8v-4.3c0-.4.4-.8.8-.8zM189.8 21.6c1.2 0 2.4.5 3.3 1.3.1.1.2.1.2 0l.6-.6.1-.1s0-.1-.1-.1c-2.3-2.2-5.9-2.2-8.3 0l-.1.1s0 .1.1.1l.6.6c.1.1.2.1.2 0 1-.8 2.2-1.3 3.4-1.3zm0 2.1c.7 0 1.3.2 1.8.7.1.1.2.1.2 0l.6-.6.1-.1s0-.1-.1-.1c-1.5-1.4-3.8-1.4-5.3 0l-.1.1s0 .1.1.1l.6.6c.1.1.2.1.2 0 .6-.4 1.2-.7 1.9-.7zm1.2 1.5.1-.1s0-.1-.1-.1c-.7-.6-1.7-.6-2.4 0l-.1.1s0 .1.1.1l1.1 1.1.1.1s.1 0 .1-.1l1.1-1.1zM29.063 24.648c.02.388.17.657.449.805a.995.995 0 0 0 .484.117c.336 0 .622-.14.86-.42.236-.28.404-.848.503-1.705-.156.248-.35.422-.58.522-.23.1-.478.15-.744.15-.539 0-.965-.168-1.28-.504-.313-.336-.47-.768-.47-1.297 0-.507.155-.954.465-1.34.31-.385.767-.578 1.371-.578.815 0 1.378.368 1.688 1.102.171.404.257.909.257 1.516 0 .685-.102 1.291-.308 1.82-.341.88-.92 1.32-1.735 1.32-.546 0-.962-.143-1.246-.43-.284-.286-.425-.645-.425-1.078h.71zm1.066-1.148c.279 0 .533-.092.764-.275.23-.184.345-.505.345-.963 0-.412-.103-.718-.31-.92a1.086 1.086 0 0 0-.791-.303c-.344 0-.617.115-.819.346-.201.23-.302.538-.302.924 0 .364.088.654.265.869.177.215.46.322.848.322zm3.207-1.629h.816v.852h-.816v-.852zm0 3.277h.816V26h-.816v-.852zm3.98-1.128v-2.536l-1.793 2.536h1.793zm.012 1.98v-1.367h-2.453v-.688l2.563-3.554h.593v3.629h.824v.613h-.824V26h-.703zm2.559-3.96v-.54c.508-.05.862-.132 1.062-.248.2-.116.35-.39.45-.822h.554V26h-.75v-3.96h-1.316z" fill="#000" fill-rule="nonzero"/>
+        <path d="M27.304 424h4.393c.3 0 .696.196.881.438l1.207 1.78a.635.635 0 0 0 .524.278h2.596A1.1 1.1 0 0 1 38 427.603v8.04a1.1 1.1 0 0 1-1.095 1.108H22.096A1.1 1.1 0 0 1 21 435.644v-8.041a1.1 1.1 0 0 1 1.096-1.107h2.606c.203 0 .392-.101.507-.269l1.213-1.79c.186-.24.582-.437.882-.437zm6.31 3.881c0 .306.245.555.548.555a.55.55 0 0 0 .548-.555.551.551 0 0 0-.548-.554.552.552 0 0 0-.549.554zm-7.953 3.603c0 2.144 1.719 3.88 3.84 3.88 2.12 0 3.838-1.736 3.838-3.88 0-2.143-1.718-3.88-3.839-3.88-2.12 0-3.839 1.737-3.839 3.88zm-3.016-6.93h1.097a.55.55 0 0 1 .548.555v.554h-2.193v-.554a.55.55 0 0 1 .548-.554zm3.84 6.93c0-1.684 1.35-3.048 3.015-3.048 1.666 0 3.016 1.364 3.016 3.048 0 1.685-1.35 3.05-3.016 3.05s-3.016-1.365-3.016-3.05zM202 423a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm3.06 6.251a.437.437 0 0 0-.437.437v1.603a2.623 2.623 0 0 1-5.246 0v-1.603a.437.437 0 1 0-.875 0v1.603a3.498 3.498 0 0 0 3.06 3.47v.903h-1.165a.437.437 0 1 0 0 .874h3.206a.437.437 0 0 0 0-.874h-1.166v-.904a3.498 3.498 0 0 0 3.061-3.469v-1.603a.437.437 0 0 0-.437-.437zm-3.06-3.79-.143.006a1.75 1.75 0 0 0-1.606 1.744v4.08c0 .966.783 1.75 1.749 1.75l.143-.006a1.75 1.75 0 0 0 1.606-1.744v-4.08c0-.966-.783-1.75-1.749-1.75z" fill="#8A8A8F"/>
+        <text font-family="Roboto-Regular, Roboto" font-size="7" letter-spacing="-.169" fill="#0A0A0A">
+                    <tspan x="100" y="70">Sender ID</tspan>
+                </text>
+        <path d="M115 40c6.075 0 11 4.925 11 11s-4.925 11-11 11-11-4.925-11-11 4.925-11 11-11zm0 .88c-5.59 0-10.12 4.53-10.12 10.12 0 2.935 1.25 5.579 3.246 7.427 1.669-1.206 4.206-1.396 4.726-2.795.065-.709.04-1.204.04-1.852-.322-.169-.92-1.244-1.017-2.15-.252-.021-.65-.268-.767-1.24-.063-.523.187-.817.339-.91-.854-3.286-.384-6.156 3.512-6.228.973 0 1.723.26 2.015.774 2.844.395 1.99 4.219 1.579 5.455.152.092.402.386.34.908-.117.973-.516 1.22-.768 1.24-.097.908-.673 1.982-.994 2.15 0 .649-.025 1.144.04 1.853.519 1.398 3.044 1.589 4.706 2.79A10.085 10.085 0 0 0 125.12 51c0-5.59-4.53-10.12-10.12-10.12z" fill="#959BA9" fill-rule="nonzero"/>
+    </g>
+</svg>

package/v2Components/TemplatePreview/index.js

@@ -25,6 +25,7 @@ import { UNSUBSCRIBE_TEXT_LENGTH } from '../../v2Containers/Whatsapp/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg'
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
+const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
 const lineMobileAndroid = require('../../assets/line.png');
 const viberMobileAndroid = require('./assets/images/viberMobile.svg');
 
@@ -159,6 +160,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       whatsappContentLen,
       intl,
       templateData,
+      rcsIosPreview,
     } = this.props;
     const { formatMessage } = intl;
     const { buttonText, imageURL, rcsPreviewContent, messageContent: viberMessageContent } = content || {};
@@ -726,40 +728,38 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             }
             {
               channel?.toUpperCase() === RCS && (
-                <>
-                  <div className='shell-v2 align-center'>
-                    <CapImage
-                      className='preview-image'
-                      src={smsMobileAndroid}
-                      alt={formatMessage(messages.previewGenerated)}
-                    />
-                    <div className='msg-container sms'>
-                      <div className='message-pop sms'>
-                        {rcsImageSrc && (
-                          <CapImage
-                            src={rcsImageSrc}
-                            className='rcs-image'
-                            alt={formatMessage(messages.previewGenerated)}
-                          />
-                        )}
-                        {rcsTitle && (
-                          <CapLabel
-                            type="label5"
-                            className='message-pop-item align-left rcs-content'
-                            fontWeight='bold'
-                          >
-                            {rcsTitle}
-                          </CapLabel>
-                        )}
-                        {rcsDesc && (
-                          <CapLabel type="label5" className='message-pop-item align-left rcs-content rcs-desc'>
-                            {rcsDesc}
-                          </CapLabel>
-                        )}
-                      </div>
+                <div className='shell-v2 align-center'>
+                  <CapImage
+                    className='preview-image'
+                    src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
+                    alt={formatMessage(messages.previewGenerated)}
+                  />
+                  <div className='msg-container sms'>
+                    <div className='message-pop sms'>
+                      {rcsImageSrc && (
+                        <CapImage
+                          src={rcsImageSrc}
+                          className='rcs-image'
+                          alt={formatMessage(messages.previewGenerated)}
+                        />
+                      )}
+                      {rcsTitle && (
+                        <CapLabel
+                          type="label5"
+                          className='message-pop-item align-left rcs-content'
+                          fontWeight='bold'
+                        >
+                          {rcsTitle}
+                        </CapLabel>
+                      )}
+                      {rcsDesc && (
+                        <CapLabel type="label5" className='message-pop-item align-left rcs-content rcs-desc'>
+                          {rcsDesc}
+                        </CapLabel>
+                      )}
                     </div>
                   </div>
-                </>
+                </div>
               )
             }
             {channel && channel.toLowerCase() === FACEBOOK && (

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -339,7 +339,7 @@ export function SlideBoxContent(props) {
       }
       case constants.RCS: {
         const template = cloneDeep(templateDataObject);
-        const { description = "", media: {mediaUrl = ""}, title} = get(template, 'versions.base.content.RCS.cardContent[0]', {});
+        const { description = "", media: { mediaUrl = "" } = {}, title = "" } = get(template, 'versions.base.content.RCS.cardContent[0]', {});
         return {
           rcsPreviewContent: {
             rcsImageSrc: mediaUrl,

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,6 +7,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
+import { LANGUAGE_OPTIONS } from '../Whatsapp/constants'
 import globalMessages from '../Cap/messages'
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
@@ -43,10 +44,11 @@ export function SlideBoxHeader(props) {
   const {
     whatsappTemplateName,
     whatsappTemplateCategory,
+    whatsappTemplateLanguageCode,
   } = templateData || {};
   const whatsappName = whatsappTemplateName || templateData?.name;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
-
+  const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
   const getChannelLabel = (currentChannel = '') => {
     const labels = {
@@ -103,7 +105,7 @@ export function SlideBoxHeader(props) {
                 {renderWhatsappData("label2", formatString(whatsappCategory))}
                 {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
-                {renderWhatsappData("label2", <FormattedMessage {...whatsppMsg.templateLanguageEnglish} />)}
+                {renderWhatsappData("label2", LANGUAGE_OPTIONS?.find(option => option.value === whatsappLanguageCode)?.label)}
               </>)
           }
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -190,7 +190,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
         >
           <FormattedMessage
             defaultMessage="English"
-            id="creatives.containersV2.Whatsapp.templateLanguageEnglish"
+            id="creatives.containersV2.Whatsapp.english"
             values={Object {}}
           />
         </SlideBoxHeader__StyledLabel>

package/v2Containers/Rcs/constants.js

@@ -14,8 +14,9 @@ export const RCS_DLT_MODE = {
   TEMPLATES: 'templates',
   EDIT: 'editTemplate',
 };
-export const TEMPLATE_MESSAGE_MAX_LENGTH = 1000;
+export const TEMPLATE_DESC_MAX_LENGTH = 1000;
 export const FALLBACK_MESSAGE_MAX_LENGTH = 160;
+export const TEMPLATE_TITLE_MAX_LENGTH = 200;
 export const TAG = 'TAG';
 export const EMBEDDED = 'embedded';
 export const DEFAULT = 'default';

package/v2Containers/Rcs/index.js

@@ -1,6 +1,4 @@
 /* eslint-disable no-unused-expressions */
-/* eslint-disable indent */
-/* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
@@ -44,13 +42,14 @@ import {
   setInjectedTags,
 } from '../Cap/selectors';
 import * as RcsActions from './actions';
-import * as TemplatesActions from '../Templates/actions'
+import * as TemplatesActions from '../Templates/actions';
 import './index.scss';
 import {
   RCS,
   SMS,
   RCS_MEDIA_TYPES,
-  TEMPLATE_MESSAGE_MAX_LENGTH,
+  TEMPLATE_TITLE_MAX_LENGTH,
+  TEMPLATE_DESC_MAX_LENGTH,
   FALLBACK_MESSAGE_MAX_LENGTH,
   TAG,
   EMBEDDED,
@@ -172,11 +171,9 @@ export const Rcs = (props) => {
   const paramObj = params || {};
   useEffect(() => {
     const { id } = paramObj;
-    if (id) {
-      if (isFullMode) {
-        setSpin(true);
-        actions.getTemplateDetails(id, setSpin);
-      }
+    if (id && isFullMode) {
+      setSpin(true);
+      actions.getTemplateDetails(id, setSpin);
     }
     //cleanup code
     return () => {
@@ -189,21 +186,21 @@ export const Rcs = (props) => {
       ? rcsData.templateDetails || {}
       : templateData || {};
     const editContent = get(versions, `base.content.RCS`, {});
-    if (editContent && !isEmpty(editContent)) {
+    if (!isEmpty(editContent)) {
       const { cardContent = [], smsFallBackContent = {} } = editContent;
       const {
-        media = { mediaUrl: '' },
-        mediaType,
-        title,
-        description,
+        media: { mediaUrl = '' } = {},
+        mediaType = '',
+        title = '',
+        description = '',
       } = cardContent[0] || {};
       const { message, templateConfigs = {} } = smsFallBackContent;
       setTemplateName(name);
-      setFallbackMessage(message);
-      setTemplateDesc(description);
-      setTemplateTitle(title);
       setTemplateMediaType(mediaType);
-      updateRcsImageSrc(media.mediaUrl);
+      updateRcsImageSrc(mediaUrl);
+      setTemplateTitle(title);
+      setTemplateDesc(description);
+      setFallbackMessage(message);
       setEditFlow(true);
       // for DLT Fallback message
       if (isDltEnabled) {
@@ -217,11 +214,10 @@ export const Rcs = (props) => {
         if (header.length > 0) {
           const tempData = {
             versions: {
-              // eslint-disable-next-line no-undef
               base: {
                 header,
-                "template_id": templateId,
-                "template_name": tmpName,
+                'template_id': templateId,
+                'template_name': tmpName,
                 'sms-editor': template,
                 'var-mapped': templateVariableMapping,
               },
@@ -361,7 +357,7 @@ export const Rcs = (props) => {
       }) || {};
     if (value === '' && isMediaTypeNone) {
       errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
-    } else if (value?.length > TEMPLATE_MESSAGE_MAX_LENGTH) {
+    } else if (value?.length > TEMPLATE_DESC_MAX_LENGTH) {
       errorMessage = formatMessage(messages.templateDescLengthError);
     } else if (unsupportedTags?.length > 0) {
       errorMessage = formatMessage(
@@ -408,21 +404,21 @@ export const Rcs = (props) => {
       {/* template title */}
       {renderLabel('templateTitle', true)}
       <CapInput
-        id={`rcs-template-title-input`}
+        id="rcs-template-title-input"
         onChange={onTemplateTitleChange}
         placeholder={formatMessage(messages.templateTitlePlaceholder)}
         value={templateTitle || ''}
         size="default"
-        maxLength={200}
+        maxLength={TEMPLATE_TITLE_MAX_LENGTH}
         suffix={
-          <CapLabel type="label1">{`${templateTitle.length} / 200`}</CapLabel>
+          <CapLabel type="label1">{`${templateTitle.length} / ${TEMPLATE_TITLE_MAX_LENGTH}`}</CapLabel>
         }
       />
       {/* template message */}
-      <CapRow id={`rcs-template-message-label`}>
+      <CapRow id="rcs-template-message-label">
         <CapHeader
           title={
-            <CapRow style={{ display: 'flex' }}>
+            <CapRow type="flex">
               <CapHeading type="h4">
                 {formatMessage(messages.templateDescLabel)}
               </CapHeading>
@@ -446,7 +442,7 @@ export const Rcs = (props) => {
         />
       </CapRow>
       <TextArea
-        id={`rcs_template_message_textarea`}
+        id="rcs_template_message_textarea"
         autosize={{ minRows: 3, maxRows: 5 }}
         placeholder={formatMessage(messages.templateDescPlaceholder)}
         onChange={onTemplateDescChange}
@@ -460,7 +456,9 @@ export const Rcs = (props) => {
   const fallbackSmsLength = () => (
     <CapLabel type="label1" className="fallback-sms-length">
       {formatMessage(messages.totalCharacters, {
-        smsCount: Math.ceil(fallbackMessage.length / 160),
+        smsCount: Math.ceil(
+          fallbackMessage.length / FALLBACK_MESSAGE_MAX_LENGTH,
+        ),
         number: fallbackMessage.length,
       })}
     </CapLabel>
@@ -477,7 +475,7 @@ export const Rcs = (props) => {
   const closeDltContainerHandler = () => {
     setShowDltContainer(false);
     setDltMode('');
-    templatesActions.getAllTemplates('Rcs', { page: 1, perPage: 25 })
+    templatesActions.getAllTemplates('Rcs', { page: 1, perPage: 25 });
   };
 
   const rcsDltEditSelectHandler = (data) => {
@@ -618,7 +616,7 @@ export const Rcs = (props) => {
       >
         <CapHeader
           title={
-            <CapRow style={{ display: 'flex' }}>
+            <CapRow type="flex">
               <CapHeading type="h4">
                 {formatMessage(messages.fallbackLabel)}
               </CapHeading>
@@ -712,7 +710,7 @@ export const Rcs = (props) => {
             />
           </CapRow>
           <TextArea
-            id={`rcs_fallback_message_textarea`}
+            id="rcs_fallback_message_textarea"
             autosize={{ minRows: 3, maxRows: 5 }}
             placeholder={formatMessage(messages.fallbackMsgPlaceholder)}
             onChange={onFallbackMessageChange}
@@ -762,8 +760,8 @@ export const Rcs = (props) => {
               updateImageSrc={setUpdateRcsImageSrc}
               updateOnReUpload={updateOnRcsImageReUpload}
               index={0}
-              className={'cap-custom-image-upload'}
-              key={`rcs-uploaded-image`}
+              className="cap-custom-image-upload"
+              key="rcs-uploaded-image"
               imageData={rcsData}
               channel={RCS}
             />
@@ -801,7 +799,6 @@ export const Rcs = (props) => {
       header: registeredSenderIds = [],
       'var-mapped': templateVariableMapping = {},
     } = base;
-    const tempMediaSrc = !isMediaTypeNone ? rcsImageSrc : '';
 
     return {
       name: templateName,
@@ -814,10 +811,12 @@ export const Rcs = (props) => {
                   title: templateTitle,
                   description: templateDesc,
                   mediaType: templateMediaType,
-                  media: {
-                    mediaUrl: tempMediaSrc,
-                    height: MEDIUM,
-                  },
+                  ...(!isMediaTypeNone && {
+                    media: {
+                      mediaUrl: rcsImageSrc,
+                      height: MEDIUM,
+                    },
+                  }),
                 },
               ],
               cardSettings: {
@@ -949,7 +948,7 @@ export const Rcs = (props) => {
             {/* template name */}
             {isFullMode && (
               <CapInput
-                id={`rcs_template_name_input`}
+                id="rcs_template_name_input"
                 onChange={onTemplateNameChange}
                 errorMessage={templateNameError}
                 placeholder={formatMessage(
@@ -966,7 +965,7 @@ export const Rcs = (props) => {
               options={mediaRadioOptions || []}
               value={templateMediaType}
               onChange={onTemplateMediaTypeChange}
-              className={'rcs-radio'}
+              className="rcs-radio"
             />
             {getMediaBasedComponent()}
             <CapDivider style={{ margin: `${CAP_SPACE_28} 0` }} />
@@ -983,8 +982,8 @@ export const Rcs = (props) => {
             title={
               isDisableDone()
                 ? formatMessage(messages.rcsDoneBtnToolTip, {
-                    type: formatMessage(messages[mediaTypeMsg]),
-                  })
+                  type: formatMessage(messages[mediaTypeMsg]),
+                })
                 : ''
             }
             placement={'right'}
@@ -1026,7 +1025,9 @@ export const Rcs = (props) => {
                   className="margin-t-16"
                 >
                   {formatMessage(messages.totalCharacters, {
-                    smsCount: Math.ceil(tempMsg.length / 160),
+                    smsCount: Math.ceil(
+                      tempMsg.length / FALLBACK_MESSAGE_MAX_LENGTH,
+                    ),
                     number: tempMsg.length,
                   })}
                 </CapHeading>

package/v2Containers/Rcs/sagas.js

@@ -23,7 +23,7 @@ export function* uploadRcsAsset(file, assetType, fileParams) {
     yield put({
       type: UPLOAD_RCS_ASSET_SUCCESS,
       data: result.response.asset,
-      statusCode: result.status ? result.status.code : '',
+      statusCode: result?.status?.code || '',
       templateType: file.templateType,
     });
   } catch (error) {
@@ -50,7 +50,7 @@ export function* createRCSTemplate({ template, callback }) {
     yield put({
       type: CREATE_RCS_TEMPLATE_SUCCESS,
       data: result.response,
-      statusCode: result.status ? result.status.code : '',
+      statusCode: result?.status?.code || '',
       errorMsg,
     });
     if (callback) {
@@ -87,7 +87,7 @@ export function* editTemplate({ template, callback }) {
     yield put({
       type: EDIT_RCS_TEMPLATE_SUCCESS,
       data: result.response,
-      statusCode: result.status ? result.status.code : '',
+      statusCode: result?.status?.code || '',
       errorMsg,
     });
     if (callback) {