@capillarytech/creatives-library 7.11.8 → 7.11.9

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/index.js

@@ -91,6 +91,10 @@ import Whatsapp from './v2Containers/Whatsapp';
 import whatsappReducer from './v2Containers/Whatsapp/reducer';
 import whatsappSaga from './v2Containers/Whatsapp/sagas';
 
+import Rcs from './v2Containers/Rcs';
+import rcsReducer from './v2Containers/Rcs/reducer';
+import rcsSaga from './v2Containers/Rcs/sagas';
+
 export {default as Ebill} from './v2Containers/Ebill';
 export {default as EbillReducer} from './v2Containers/Ebill/reducer';
 export {default as EbillSaga} from './v2Containers/Ebill/sagas';
@@ -116,6 +120,7 @@ const ViberContainer = {Viber, viberReducer, viberSaga};
 const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, facebookPreviewSaga };
 const SmsTraiContainer = {SmsTraiCreate, SmsTraiCreateReducer, SmsTraiCreateSaga};
 const WhatsappContainer = { Whatsapp, whatsappReducer, whatsappSaga };
+const RcsContainer = { Rcs, rcsReducer, rcsSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -163,4 +168,5 @@ export { CapContainer,
   FacebookPreviewContainer,
   SmsTraiContainer,
   WhatsappContainer,
+  RcsContainer,
 };

package/package.json

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

package/routes.js

@@ -4,7 +4,6 @@
 // about the code splitting business
 import React from 'react';
 import { getAsyncInjectors } from 'utils/asyncInjectors';
-import pathConfig from './config/path'
 import * as rootSaga from 'containers/Cap/sagas';
 import * as smsSagas from 'containers/Sms/Create/sagas';
 import * as smsEditSagas from 'containers/Sms/Edit/sagas';
@@ -14,6 +13,7 @@ import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
 import * as languageSaga from './v2Containers/LanguageProvider/sagas';
+import pathConfig from './config/path';
 
 import {updateCharCount} from './utils/smsCharCountV2';
 const errorLoading = (err) => {
@@ -26,7 +26,7 @@ const loadModule = (cb) => (componentModule) => {
 
 const loadModuleWithProps = (cb) => (ComponentModule, props) => {
   cb(
-    null, 
+    null,
     () => <ComponentModule.default {...props} />
   );
 };
@@ -662,6 +662,8 @@ export default function createRoutes(store) {
           import('v2Containers/SmsTrai/Create/reducer'),
           import('v2Containers/Whatsapp/sagas'),
           import('v2Containers/Whatsapp/reducer'),
+          import('v2Containers/Rcs/sagas'),
+          import('v2Containers/Rcs/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -686,6 +688,7 @@ export default function createRoutes(store) {
           capFacebookPreviewSagas, capFacebookPreviewReducer,
           smsTraiSagas, smsTraiReducer,
           whatsappSagas, whatsappReducer,
+          rcsSagas, rcsReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -706,6 +709,7 @@ export default function createRoutes(store) {
           injectReducer('facebookPreview', capFacebookPreviewReducer.default);
           injectReducer('smsTrai', smsTraiReducer.default);
           injectReducer('whatsapp', whatsappReducer.default);
+          injectReducer('rcs', rcsReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -725,6 +729,7 @@ export default function createRoutes(store) {
           injectSagas(capFacebookPreviewSagas.default);
           injectSagas(smsTraiSagas.default);
           injectSagas(whatsappSagas.default);
+          injectSagas(rcsSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -109,14 +109,14 @@ function request(url, options, handleUnauthorizedStatus) {
   }
   const fetchUrl = url.indexOf('?') !== -1 ? `${url}&time=${Date.now()}` : `${url}?time=${Date.now()}`;
   return fetch(fetchUrl, options)
-    .then(response => {
+    .then((response) => {
       if (response.status === 403 && handleUnauthorizedStatus) {
         showSomethingwentWrong();
       }
       return checkStatus(response);
     })
     .then(parseJSON)
-    .catch(error => error);
+    .catch((error) => error);
 }
 
 function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false) {
@@ -259,6 +259,12 @@ export const createEbillTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createChannelWiseTemplate = ({ channel, template }) => {
+  const url = `${API_ENDPOINT}/templates/${channel}`;
+  return request(url, getAPICallObject('POST', template));
+};
+
+
 export const getTemplateDetails = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/${id}/${channel ? channel.toUpperCase() : 'SMS'}`;
   return request(url, getAPICallObject('GET'));

package/v2Components/CapImageUpload/index.js

@@ -19,6 +19,7 @@ import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 import get from 'lodash/get';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
+import { FACEBOOK, RCS } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -38,6 +39,7 @@ function CapImageUpload(props) {
     index,
     className,
     imageData,
+    channel,
   } = props;
   const {
     formatMessage,
@@ -55,13 +57,16 @@ function CapImageUpload(props) {
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
 
   const {CapHeadingSpan} = CapHeading;
-  const ImageComponent = useCallback(() => (<>
-    <div
-      className={`image-container upload ${props.ifError ? 'error' : ''}`}
-    >
-      {imageSrc !== "" && (<CapImage src={imageSrc || ""} alt="upload-image-src" height="400" />)}
-    </div></>
-  ), []);
+  const ImageComponent = useCallback(
+    () => (
+      <div className={`image-container upload ${props.ifError ? 'error' : ''}`}>
+        {imageSrc !== '' && (
+          <CapImage src={imageSrc || ''} alt="upload-image-src" height="400" />
+        )}
+      </div>
+    ),
+    [imageSrc],
+  );
 
   const WithLabel = LabelHOC(ImageComponent);
 
@@ -204,7 +209,7 @@ function CapImageUpload(props) {
         <FormattedMessage {...messages.imageReUpload} />
       </CapButton>
     );
-  }, [isImageError]);
+  }, [isImageError, imageSrc]);
 
   return (
     <div style={style} className="cap-custom-image-upload">
@@ -234,9 +239,16 @@ function CapImageUpload(props) {
         <CapHeadingSpan type="label2" className="image-dimension">
           <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight}}/>
         </CapHeadingSpan>
-        <CapHeadingSpan type="label2" className="image-aspect-ratio">
-          <FormattedMessage {...messages.aspectRatio} />
-        </CapHeadingSpan>
+        {channel === FACEBOOK && (
+          <CapHeadingSpan type="label2" className="image-aspect-ratio">
+            <FormattedMessage {...messages.aspectRatio} />
+          </CapHeadingSpan>
+        )}
+        {channel === RCS && (
+          <CapHeadingSpan type="label2" className="image-size">
+            <FormattedMessage {...messages.imageSize} />
+          </CapHeadingSpan>
+        )}
         <CapHeadingSpan type="label2" className="image-format">
           <FormattedMessage {...messages.format} />
         </CapHeadingSpan>
@@ -261,6 +273,7 @@ CapImageUpload.propTypes = {
   updateOnReUpload: PropTypes.func,
   imageData: PropTypes.object,
   index: PropTypes.number,
+  channel: PropTypes.string,
 };
 
 export default injectIntl(CapImageUpload);

package/v2Components/CapImageUpload/index.scss

@@ -3,30 +3,15 @@
 $classPrefix: cap-custom-image-upload;
 
 .#{$classPrefix} {
-    .image-container{
-        .upload{
-            margin-top: 20;
-            background-color: $CAP_G09;
-        }
-    }
-    .upload-image{
-        margin-right: $CAP_SPACE_08
-    }
-    .gallery-select{
-        margin-left: $CAP_SPACE_08
-    }
-    .image-format{
-        float: right; 
-    }
-    .image-aspect-ratio{
-        margin-top: $CAP_SPACE_12;
-        margin-left: 64px; 
-    }
-    .image-dimension{
-        margin-top: $CAP_SPACE_12;
-        margin-right: 46px; 
-    }
-    .image-info-wrapper{
-        margin-bottom: 15px; 
-    }
-}
+  .upload-image {
+    margin-right: $CAP_SPACE_08;
+  }
+  .gallery-select {
+    margin-left: $CAP_SPACE_08;
+  }
+  .image-info-wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+}

package/v2Components/CapImageUpload/messages.js

@@ -8,7 +8,7 @@ export default defineMessages({
   },
   uploadComputer: {
     id: `${scope}.uploadComputer`,
-    defaultMessage: 'Your computer',
+    defaultMessage: 'Select from computer',
   },
   or: {
     id: `${scope}.or`,
@@ -24,7 +24,7 @@ export default defineMessages({
   },
   imageReUpload: {
     id: `${scope}.imageReUpload`,
-    defaultMessage: 'Re upload',
+    defaultMessage: 'Reupload',
   },
   imageDimenstionDescription: {
     id: `${scope}.imageDimenstionDescription`,
@@ -32,11 +32,12 @@ export default defineMessages({
   },
   format: {
     id: `${scope}.format`,
-    defaultMessage: 'Format: JPG, PNG',
+    defaultMessage: 'Format: JPEG, JPG, PNG',
   },
   imageIncorrectSize: {
     id: `${scope}.imageIncorrectSize`,
-    defaultMessage: 'Please upload the image with correct type, size and dimension',
+    defaultMessage:
+      'Please upload the image with correct type, size and dimension',
   },
   imageGallery: {
     id: `${scope}.imageGallery`,
@@ -46,4 +47,8 @@ export default defineMessages({
     id: `${scope}.aspectRatio`,
     defaultMessage: 'Aspect ratio: 1:1',
   },
+  imageSize: {
+    id: `${scope}.imageSize`,
+    defaultMessage: 'Size upto: 2MB',
+  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -77,6 +77,10 @@
         font-size: 10px;
         width: 100%;
         font-family: 'open-sans';
+        .rcs-image{
+          width: 164px;
+          height: 123px;
+        }
         .message-pop-item{
           padding: 4px;
           background: #3F51B5;
@@ -87,6 +91,15 @@
           &:first-child{
             margin-top: 0;
           }
+          &.rcs-content {
+            background: $CAP_WHITE;
+            color: $CAP_G01;
+            margin-top: 0;
+            padding: 4px 8px;
+          }
+          &.rcs-desc:not(:first-child) {
+            margin-top: -8px;
+          }
         }
       }
       &:not(.sms){

package/v2Components/TemplatePreview/index.js

@@ -17,6 +17,7 @@ import messages from './messages';
 import {
   WECHAT,
   WHATSAPP,
+  RCS,
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
@@ -160,7 +161,8 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       templateData,
     } = this.props;
     const { formatMessage } = intl;
-    const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
+    const { buttonText, imageURL, rcsPreviewContent, messageContent: viberMessageContent } = content || {};
+    const { rcsImageSrc, rcsTitle, rcsDesc } = rcsPreviewContent || {};
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -722,6 +724,44 @@ 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>
+                  </div>
+                </>
+              )
+            }
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Containers/App/constants.js

@@ -48,6 +48,7 @@ export const PREVIEW = 'preview';
 export const VIBER = 'viber';
 export const FACEBOOK = 'facebook';
 export const WHATSAPP = 'whatsapp';
+export const RCS = 'rcs';
 
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
@@ -110,4 +111,4 @@ export const LOYALTY = 'loyalty';
 
 export const FAILURE = 'FAILURE';
 export const DATE_DISPLAY_FORMAT = 'D MMM YYYY';
-export const TIME_DISPLAY_FORMAT = 'hh:mm A';
+export const TIME_DISPLAY_FORMAT = 'hh:mm A';

package/v2Containers/Assets/images/addCreativesIllustration.svg

@@ -0,0 +1,30 @@
+<svg width="152" height="152" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="g6dreh3yza" d="M0 0h135.016v120.429H0z"/>
+        <path id="gsany574hc" d="M.661.295h41.938V38H.66z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(8 13)">
+            <mask id="672iuzud9b" fill="#fff">
+                <use xlink:href="#g6dreh3yza"/>
+            </mask>
+            <path d="M58.686 9.812c.251-1.179-.726-2.026-2.046-2.226-.93-.142-1.905.151-2.532.853-.487.546-.837 1.36-.28 2.433 1.11 2.145 4.522.517 4.858-1.06m-11.988 9.282c2.831-2.295 4.63-6.886.88-9.411-3.749-2.525-7.233-.134-7.957.612 0 0-4.629 4.132-3.099 8.799 1.53 4.668 7.345 2.296 10.176 0m56.226 99.867c-15.384-2.74-32.728-1.431-50.612 1.073-17.883 2.503-42.92-6.617-50.79-35.231-7.869-28.615 16.811-46.498 27.184-51.148 4.99-2.237 9.606-4.68 13.055-6.614 3.54-1.985 6.827-4.372 9.867-7.058 28.76-25.409 51.17-22.275 64.708-14.048 14.13 8.585 11.446 29.866 10.373 49.538-1.073 19.672 6.796 27.363 8.227 44.531 1.43 17.169-16.514 21.717-32.012 18.957" fill="#FEC52E" mask="url(#672iuzud9b)"/>
+        </g>
+        <path d="M59.978 122.446c1.308-4.136 1.96-22.422 1.415-28.719-.655-7.548-1.488-9.112-1.488-9.112h39.168l-1.824 12.781c-.41 4.85-.408 14.685.075 19.522.445 4.46.076 3.3 1.092 7.802l.938 3.02c.694 1.95-.182 6.037-2.251 6.048l-34.775-1.104s-5.592.01-2.35-10.238" fill="#FFF"/>
+        <path d="M112.226 84.964c0 3.708-15.394 2.149-33.297 3.009-7.082.339-13.741-.627-19.25-.511-8.053.17-13.964-.63-13.964-2.848 0-3.708 15.29-10.071 33.214-10.071s33.297 6.712 33.297 10.42" fill="#FFF"/>
+        <path d="M100.178 82.995c0 2.163-9.869 1.555-21.275 1.555-11.406 0-21.472-.084-21.472-2.247s10.066-5.587 21.472-5.587 21.275 4.116 21.275 6.28M98.095 91.103c.187-.572.542-3.525.542-3.525s-9.2.468-19.354.48c-6.581.007-13.558-.333-18.704-.588 0 0 .464 3.418.533 3.609 0 0 7.018 2.51 20.309 2.29 0 0 10.376-.39 16.674-2.266" fill="#242E3D"/>
+        <path d="m121.019 35.042-20.571-8.053a4.146 4.146 0 0 0-5.373 2.35L89.79 42.837a4.147 4.147 0 0 0 2.35 5.373l10.286 4.026-1.712 4.374 6.085-2.661 5.913 2.314a4.146 4.146 0 0 0 5.373-2.35l5.285-13.498a4.148 4.148 0 0 0-2.351-5.373" fill="#E51FA3"/>
+        <path fill="#F0DF32" d="m117.453 42.482-18.5-7.243.612-1.568 18.502 7.243zM116.103 45.932l-18.501-7.243.613-1.568 18.502 7.243zM107.9 47.331l-11.863-4.644.614-1.568 11.863 4.644z"/>
+        <path d="m31.78 58.548.743.427-.427.745-.745-.427.428-.745zm1.58-2.75.743.426-.79 1.376-.744-.427.79-1.376zm1.578-2.752.745.427-.79 1.375-.744-.427.79-1.375zm1.58-2.752.745.427-.79 1.376-.744-.428.79-1.375zm1.58-2.752.744.427-.789 1.376-.745-.427.79-1.376zm1.218-2.12.744.427-.427.744-.745-.427.428-.744zm-28.148-2.188-2.14 3.728 29.263 16.802 2.145-3.737c-.048-.025-.1-.039-.148-.066a4.026 4.026 0 1 1 4.009-6.982c.048.027.086.065.132.094l2.431-4.234-29.264-16.802-2.426 4.226a4.022 4.022 0 0 1 1.436 5.458 4.022 4.022 0 0 1-5.438 1.513z" fill="#F87D22"/>
+        <path fill="#FFF" d="m20.306 48.55-.168-.535 10.203-3.21.169.535zM26.818 49.051a1.32 1.32 0 0 0-1.312 1.437 1.312 1.312 0 0 0 1.43 1.192 1.32 1.32 0 0 0 1.194-1.43 1.32 1.32 0 0 0-1.312-1.199m-.001 3.195c-.96 0-1.781-.735-1.87-1.708a1.881 1.881 0 0 1 1.7-2.04 1.89 1.89 0 0 1 2.04 1.701 1.881 1.881 0 0 1-1.87 2.047M24.77 41.475c-.04 0-.081 0-.121.005a1.306 1.306 0 0 0-.893.469c-.225.27-.332.61-.3.962.032.35.198.668.468.893.27.225.606.332.963.3a1.314 1.314 0 0 0 .724-2.323 1.302 1.302 0 0 0-.841-.306m-.006 3.195a1.873 1.873 0 0 1-1.867-1.709 1.87 1.87 0 0 1 .428-1.372 1.881 1.881 0 0 1 3.313 1.034c.045.499-.107.987-.428 1.372a1.869 1.869 0 0 1-1.446.675"/>
+        <g transform="translate(87 101)">
+            <mask id="i30xlevwtd" fill="#fff">
+                <use xlink:href="#gsany574hc"/>
+            </mask>
+            <path d="m32.711 1.546 9.648 19.31a2.24 2.24 0 0 1 .091 1.81 2.242 2.242 0 0 1-1.1 1.219L13.578 37.76a2.246 2.246 0 0 1-1.637.15 2.252 2.252 0 0 1-1.393-1.16L.9 17.44a2.252 2.252 0 0 1-.092-1.808 2.255 2.255 0 0 1 1.103-1.224L29.682.533a2.252 2.252 0 0 1 1.64-.147l.053.016a2.249 2.249 0 0 1 1.336 1.144" fill="#279AE0" mask="url(#i30xlevwtd)"/>
+        </g>
+        <path d="M129.45 123.667a2.24 2.24 0 0 1-1.1 1.218l-27.771 13.876a2.256 2.256 0 0 1-1.637.15l8.995-20.149 21.514 4.905z" fill="#0071BB"/>
+        <path d="m118.322 101.386-8.931 20.286-21.584-5.04a2.26 2.26 0 0 1 1.104-1.223l27.77-13.876c.53-.264 1.115-.3 1.64-.147" fill="#00ADEF"/>
+        <path d="M77.442 79.348c-.146 3.123-.336 5.54-.402 6.245a57.462 57.462 0 0 1-2.955-.235 92.969 92.969 0 0 0-.75-5.662c-.65-4.085-1.768-9.457-3.57-13.654-3.357-7.833 1.119-10.071 1.119-10.071s3.357-1.12 5.596 4.476c1.409 3.514 1.264 12.623.962 18.9M85.708 79.272a201.88 201.88 0 0 1-1.992 6.165c-.974.046-1.992.067-3.022.067h-.078c.112-.66.492-3.178.761-6.422.347-3.928.515-8.931-.146-13.094-1.32-8.215 3.548-9.188 3.548-9.188s3.503-.212 4.286 5.617c.46 3.415-1.589 11.102-3.357 16.855M123.082 70.491a.259.259 0 0 0-.244-.258 1.77 1.77 0 0 1-1.766-1.747c.002-.012.001-.02.001-.032 0-.143-.11-.26-.254-.26a.252.252 0 0 0-.254.255v.028a1.763 1.763 0 0 1-1.765 1.746.261.261 0 0 0-.224.257c0 .132.098.25.225.266l.002.001c.974 0 1.766.787 1.773 1.762a.259.259 0 0 0 .258.251c.143 0 .243-.114.243-.257v-.082a1.765 1.765 0 0 1 1.757-1.664h.001a.264.264 0 0 0 .247-.266M69.766 43.268a.2.2 0 0 0-.187-.198 1.356 1.356 0 0 1-1.354-1.34c.002-.007 0-.014 0-.023a.194.194 0 1 0-.389-.003v.02a1.352 1.352 0 0 1-1.352 1.338.203.203 0 0 0 0 .4l.002.002a1.36 1.36 0 0 1 1.359 1.35c.004.107.09.192.197.192.11 0 .187-.087.187-.196v-.063a1.353 1.353 0 0 1 1.347-1.275v-.001a.203.203 0 0 0 .19-.203M39.243 95.815a.208.208 0 0 0-.196-.207 1.418 1.418 0 0 1-1.414-1.4c.002-.009 0-.016 0-.026a.205.205 0 0 0-.203-.209.203.203 0 0 0-.203.205c0 .007-.002.016 0 .023a1.414 1.414 0 0 1-1.416 1.4.21.21 0 0 0-.178.205c0 .106.077.2.18.213v.001c.782 0 1.416.631 1.422 1.412.005.112.093.2.207.2.114 0 .194-.09.194-.205 0-.022.002-.045 0-.065a1.414 1.414 0 0 1 1.408-1.334h.002a.212.212 0 0 0 .197-.213" fill="#FFF"/>
+    </g>
+</svg>

package/v2Containers/Cap/messages.js

@@ -88,7 +88,26 @@ export default defineMessages({
     id: `creatives.containersV2.templateNamePlaceholder`,
     defaultMessage: 'Enter template name',
   },
-
+  "emptyTemplateNameErrorMessage": {
+    id: `creatives.containersV2.emptyTemplateNameErrorMessage`,
+    defaultMessage: 'Template name cannot be empty',
+  },
+  "creativeNameLabel": {
+    id: `creatives.containersV2.creativeNameLabel`,
+    defaultMessage: 'Creative name',
+  },
+  "addLabels": {
+    id: `creatives.containersV2.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+  "preview": {
+    id: `creatives.containersV2.preview`,
+    defaultMessage: 'Preview',
+  },
+  "delete": {
+    id: `creatives.containersV2.delete`,
+    defaultMessage: 'Delete',
+  },
     //refresh due to org change messages
 
   "refreshOrgText": {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -22,6 +22,7 @@ import LineContainer from '../Line/Container';
 import FTP from '../FTP';
 import Viber from '../Viber';
 import Whatsapp from '../Whatsapp';
+import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 const CreativesWrapper = styled.div`
@@ -174,9 +175,11 @@ export function SlideBoxContent(props) {
 
 
   const isCreate = slidBoxContent === 'createTemplate';
+  const isEdit = slidBoxContent === 'editTemplate';
   const isCreateSms = isCreate && channel === constants.SMS;
   const isCreateFacebook = isCreate && channel === constants.FACEBOOK;
   const isCreateWhatsapp = isCreate && channel === constants.WHATSAPP;
+  const isCreateRcs = isCreate && channel === constants.RCS;
   const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
   let isEditSms = false;
@@ -190,32 +193,34 @@ export function SlideBoxContent(props) {
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
+  let isEditRcs = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
-    isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
-    isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
-    isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
-    isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
-    isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
-    isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isEditWhatsapp = slidBoxContent === 'editTemplate' && channel === constants.WHATSAPP;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER || channel === constants.FACEBOOK || channel === constants.WHATSAPP);
+    isEditSms = isEdit && channel === constants.SMS;
+    isEditCallTask = isEdit && channel === constants.CALL_TASK;
+    isEditMPush = isEdit && channel === constants.MOBILE_PUSH;
+    isEditEmailWithId = isEdit && channel === constants.EMAIL && templateData._id;
+    isEmailEditWithContent = isEdit && channel === constants.EMAIL && !templateData._id;
+    isEditFacebook = isEdit && channel === constants.FACEBOOK;
+    isEditWhatsapp = isEdit && channel === constants.WHATSAPP;
+    isEditRcs = isEdit && channel === constants.RCS;
+    isPreview = slidBoxContent === 'preview' && [constants.SMS, constants.LINE, constants.WHATSAPP, constants.FACEBOOK, constants.VIBER, constants.RCS].includes(channel);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
-    isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
+    isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
   }
+  const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
 
   const getChannelPreviewContent = (templateDataObject) => {
     switch (templateDataObject.type.toUpperCase()) {
       case constants.SMS: {
-        const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
         const updatedSmsEditor = get(
           templateDataObject,
           `versions.base['updated-sms-editor']`,
           '',
         );
-        if (!isTraiDlt || updatedSmsEditor === '') {
+        if (!isDltEnabled || updatedSmsEditor === '') {
           return get(templateDataObject, `versions.base['sms-editor']`);
         }
         return updatedSmsEditor.join('');
@@ -332,11 +337,29 @@ export function SlideBoxContent(props) {
           ...getWhatsappContent(templateDataObject, true),
         };
       }
+      case constants.RCS: {
+        const template = cloneDeep(templateDataObject);
+        const { description = "", media: {mediaUrl = ""}, title} = get(template, 'versions.base.content.RCS.cardContent[0]', {});
+        return {
+          rcsPreviewContent: {
+            rcsImageSrc: mediaUrl,
+            rcsTitle: title,
+            rcsDesc: description,
+          },
+        };
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
   };
 
+  const rcsCommonProps = {
+    isFullMode,
+    isDltEnabled,
+    smsRegister,
+    getDefaultTags: type,
+  };
+
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -715,6 +738,29 @@ export function SlideBoxContent(props) {
         }}/>
       )}
 
+      {isCreateRcs && (<Rcs
+        {...rcsCommonProps}
+        onCreateComplete={onCreateComplete}
+        location={{
+          pathname: `/rcs/create`,
+          query,
+          search: '',
+        }} />
+      )}
+      {isEditRcs && (<Rcs
+        {...rcsCommonProps}
+        templateData={templateData}
+        getFormData={getFormData}
+        params={{
+          id: templateData._id,
+        }}
+        location={{
+          pathname: `/rcs/edit`,
+          query,
+          search: '',
+        }} />
+      )}
+
     </CreativesWrapper>
   );
 }

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -57,6 +57,7 @@ export function SlideBoxHeader(props) {
       no_communication: 'NO_COMMUNICATION',
       ftp: 'FTP',
       whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
+      rcs: <FormattedMessage {...messages.rcsCreative} />,
     };
     return labels[currentChannel.toLowerCase()];
   };

package/v2Containers/CreativesContainer/constants.js

@@ -17,6 +17,7 @@ export const FTP = "FTP";
 export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 export const WHATSAPP = "WHATSAPP";
+export const RCS = "RCS";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/messages.js

@@ -318,4 +318,8 @@ export default defineMessages({
     id: `${scope}.learnTips`,
     defaultMessage: `Learn tips to get approved`,
   },
+  "rcsCreative": {
+    id: `${scope}.rcsCreative`,
+    defaultMessage: `RCS creative`,
+  },
 });

package/v2Containers/Facebook/Advertisement/index.js

@@ -60,6 +60,7 @@ import {
   NO_CALL_TO_ACTION,
 } from './constant';
 import cloneDeep from 'lodash/cloneDeep';
+import { FACEBOOK } from "../../CreativesContainer/constants";
 export const Advertisement = (props) => {
   const CarouselContainer = styled.div`
     width: ${(styledProps) => styledProps.width || '22px'};
@@ -366,7 +367,7 @@ export const Advertisement = (props) => {
           },
         },
       },
-      type: "FACEBOOK",
+      type: FACEBOOK,
       name: messageTitle,
     };
     if (!isFullMode) {
@@ -441,7 +442,7 @@ export const Advertisement = (props) => {
       value: formatSubmitPayload(),
       _id: params && params.id,
       validity: true,
-      type: 'FACEBOOK',
+      type: FACEBOOK,
     });
   }, [carouselData,
     pageId,
@@ -558,6 +559,7 @@ export const Advertisement = (props) => {
       className={`cap-image-upload-${selectedAd}`}
       key={`${index}-fb-image-upload`}
       imageData={fbADData}
+      channel={FACEBOOK}
        /> :
       <CapVideoUpload
         style={{paddingBottom: '21px'}}