@capillarytech/creatives-library 7.12.15 → 7.12.17

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.12.15",
+  "version": "7.12.17",
   "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,8 @@ function CapImageUpload(props) {
     index,
     className,
     imageData,
+    channel,
+    channelSpecificStyle,
   } = props;
   const {
     formatMessage,
@@ -55,13 +58,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);
 
@@ -200,11 +206,12 @@ function CapImageUpload(props) {
         className="dragger-button re-upload"
         type="flat"
         onClick={onReUpload}
+        style={ channelSpecificStyle ? { marginTop:'-16px'} : {}}
        >
         <FormattedMessage {...messages.imageReUpload} />
       </CapButton>
     );
-  }, [isImageError]);
+  }, [isImageError, imageSrc]);
 
   return (
     <div style={style} className="cap-custom-image-upload">
@@ -234,9 +241,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 +275,8 @@ CapImageUpload.propTypes = {
   updateOnReUpload: PropTypes.func,
   imageData: PropTypes.object,
   index: PropTypes.number,
+  channel: PropTypes.string,
+  channelSpecificStyle: PropTypes.bool,
 };
 
 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,19 +24,20 @@ export default defineMessages({
   },
   imageReUpload: {
     id: `${scope}.imageReUpload`,
-    defaultMessage: 'Re upload',
+    defaultMessage: 'Reupload',
   },
   imageDimenstionDescription: {
     id: `${scope}.imageDimenstionDescription`,
-    defaultMessage: 'Dimensions: {width}px x {height}px',
+    defaultMessage: 'Dimensions upto: {width}px x {height}px',
   },
   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: 100%;
+          height: 123px;
+        }
         .message-pop-item{
           padding: 4px;
           background: #3F51B5;
@@ -87,6 +91,12 @@
           &:first-child{
             margin-top: 0;
           }
+          &.rcs-content {
+            background: $CAP_WHITE;
+            color: $CAP_G01;
+            margin-top: 0;
+            padding: 4px 8px;
+          }
         }
       }
       &:not(.sms){

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

@@ -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';
@@ -24,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');
 
@@ -158,9 +160,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       whatsappContentLen,
       intl,
       templateData,
+      rcsIosPreview,
     } = 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 +726,42 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 ''
               )
             }
+            {
+              channel?.toUpperCase() === RCS && (
+                <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 && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test Templates container Should render correct preview component for rcs channel 1`] = `
+<CapRow>
+  <CapColumn
+    span={16}
+  />
+  <CapColumn
+    span={8}
+  >
+    <div
+      className="preview-container "
+    >
+      <div
+        className="shell-v2 align-center"
+      >
+        <CapImage
+          alt="Preview is being generated"
+          className="preview-image"
+          src="test-file-stub"
+        />
+        <div
+          className="msg-container sms"
+        >
+          <div
+            className="message-pop sms"
+          />
+        </div>
+      </div>
+    </div>
+  </CapColumn>
+</CapRow>
+`;
+
 exports[`Test Templates container Should render correct preview component for whatsapp channel 1`] = `
 <CapRow>
   <CapColumn
@@ -57,7 +89,7 @@ exports[`Test Templates container Should render correct preview component for wh
               Object {
                 "background-color": "#efefef",
                 "border-radius": "6px",
-                "left": "10%",
+                "left": 0,
                 "padding": "4px 0 0.571rem",
                 "width": "88%",
               }

package/v2Components/TemplatePreview/tests/index.test.js

@@ -2,23 +2,23 @@ import React from 'react';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
 import { TemplatePreview } from '../index';
-import mockdata from '../../mockdata';
 
 
 describe('Test Templates container', () => {
   let renderedComponent;
 
-  const renderFunction = () => {
+  const renderFunction = (channel) => {
     renderedComponent = shallowWithIntl(
-      <TemplatePreview
-        channel="whatsapp"
-        showCount
-      />
+      <TemplatePreview channel={channel} showCount />,
     );
   };
 
   it('Should render correct preview component for whatsapp channel', () => {
-    renderFunction();
+    renderFunction('whatsapp');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('Should render correct preview component for rcs channel', () => {
+    renderFunction('rcs');
     expect(renderedComponent).toMatchSnapshot();
   });
 });

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": {