@capillarytech/creatives-library 7.1.11 → 7.2.0

package/index.js

@@ -65,6 +65,10 @@ import LineCreate from './v2Containers/Line/Container';
 import lineCreateReducer from './v2Containers/Line/Container/reducer';
 import lineCreateSaga from './v2Containers/Line/Container/sagas';
 
+import Viber from './v2Containers/Viber';
+import viberReducer from './v2Containers/Viber/reducer';
+import viberSaga from './v2Containers/Viber/sagas';
+
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
@@ -82,7 +86,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
 const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
 const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
 const EmailContainer = {Email, emailReducer, emailSaga};
-const BeeContainer ={ BeeEditor,beeReducer,beeSaga}
+const BeeContainer = { BeeEditor, beeReducer, beeSaga};
 const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
 const WeChatMapTemplateContainer = {WeChatMapTemplate, weChatMapTemplateReducer, weChatMapTemplateSaga};
 const WeChatRichMediaCreateContainer = {WeChatRichMediaCreate, weChatRichMediaCreateReducer, weChatRichMediaCreateSaga};
@@ -92,6 +96,8 @@ const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepu
 const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
+const ViberContainer = {Viber, viberReducer, viberSaga};
+
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 
 export {default as TagList} from './v2Containers/TagList/index';
@@ -131,4 +137,5 @@ export { CapContainer,
   updateCharCount,
   FacebookContainer,
   GalleryContainer,
+  ViberContainer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.1.11",
+  "version": "7.2.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -30,6 +30,7 @@
     "redux-beacon": "^0.4.0",
     "redux-immutable": "3.0.8",
     "reselect": "2.5.4",
+    "save": "^2.4.0",
     "styled-components": "^3.2.1",
     "webpack-bugsnag-plugins": "^1.4.3",
     "whatwg-fetch": "2.0.1"

package/reducers.js

@@ -9,6 +9,8 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 
 import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
 import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
+
+
 import capReducer from 'containers/Cap/reducer';
 import appReducer from 'containers/App/reducer';
 import createSmsReducer from 'containers/Sms/Create/reducer';

package/routes.js

@@ -598,7 +598,8 @@ export default function createRoutes(store) {
 
         importModules.catch(errorLoading);
       },
-    }, {
+    },
+    {
       path: '/v2(/:channel)',
       name: 'templatesV2',
       getComponent(nextState, cb) {
@@ -634,6 +635,8 @@ export default function createRoutes(store) {
           import('v2Containers/Facebook/reducer'),
           import('v2Containers/Line/Container/sagas'),
           import('v2Containers/Line/Container/reducer'),
+          import('v2Containers/Viber/sagas'),
+          import('v2Containers/Viber/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -654,6 +657,7 @@ export default function createRoutes(store) {
           galleryReducer, gallerySagas,
           facebookSagas, facebookReducer,
           lineCreateSagas, lineCreateReducer,
+          viberSagas, viberReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -670,6 +674,7 @@ export default function createRoutes(store) {
           injectReducer('gallery', galleryReducer.default);
           injectReducer('facebook', facebookReducer.default);
           injectReducer('lineCreate', lineCreateReducer.default);
+          injectReducer('viber', viberReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -685,6 +690,7 @@ export default function createRoutes(store) {
           injectSagas(weChatRichmediaTemplatesEditSagas.default);
           injectSagas(facebookSagas.default);
           injectSagas(lineCreateSagas.default);
+          injectSagas(viberSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -358,6 +358,11 @@ export const createLineTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createViberTemplate = ({template}) => {
+  const url = `${API_ENDPOINT}/templates/VIBER`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const getLocizMessage = async (locale) => {
   const appName = 'creatives_v2';
   const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -21,8 +21,6 @@
     left: 23%;
     width: 42%;
     height: 336px;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
 
     .sms-icon{
@@ -51,6 +49,14 @@
         left: 36px;
         margin-top: -6px;
       }
+      }
+      &.viber-preview{
+        width: 43%;
+        .message-pop {
+          width: 80%;
+          left: 36px;
+          margin-top: -6px;
+        }
     }
 
     .message-pop{

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

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="220px" height="472px" viewBox="0 0 220 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Group 20</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M8,0 L193,0 C197.970563,-9.13077564e-16 202,4.02943725 202,9 L202,395 C202,399.970563 197.970563,404 193,404 L9,404 C4.02943725,404 6.08718376e-16,399.970563 0,395 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="path-1"></path>
+        <path d="M0,0 L202,0 L202,38 C202,42.418278 198.418278,46 194,46 L8,46 C3.581722,46 5.41083001e-16,42.418278 0,38 L0,0 Z" id="path-3"></path>
+        <filter x="-1.7%" y="-9.8%" width="103.5%" height="115.2%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.39215687   0 0 0 0 0.39215687   0 0 0 0 0.39215687  0 0 0 0.21960784 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <path d="M0,0 L202,0 L202,45 C202,49.418278 198.418278,53 194,53 L8,53 C3.581722,53 5.41083001e-16,49.418278 0,45 L0,0 Z" id="path-5"></path>
+        <filter x="-1.7%" y="-8.5%" width="103.5%" height="113.2%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.39215687   0 0 0 0 0.39215687   0 0 0 0 0.39215687  0 0 0 0.29803923 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <path d="M11.3333333,6.00000016 C11.3333333,6.36819 11.0348565,6.66666684 10.6666666,6.66666684 L3.33333341,6.66666684 L6.52666664,9.86000007 C6.78808141,10.1214148 6.78808141,10.5452519 6.52666664,10.8066667 C6.26525187,11.0680815 5.84141479,11.0680815 5.58000002,10.8066667 L1.48044011,6.70710678 C1.08991582,6.31658249 1.08991582,5.68341751 1.48044011,5.29289322 L5.58000001,1.19333332 C5.84141478,0.931918557 6.26525186,0.931918557 6.52666663,1.19333332 C6.52666663,1.19333333 6.52666664,1.19333334 6.52666664,1.19333334 C6.78808142,1.45474813 6.78808142,1.87858523 6.52666664,2.14000002 L3.33333341,5.33333347 L10.6666666,5.33333347 C11.0348565,5.33333347 11.3333333,5.63181031 11.3333333,6.00000016 Z" id="path-7"></path>
+        <rect id="path-9" x="0" y="0" width="16" height="16"></rect>
+        <rect id="path-11" x="0" y="0" width="16" height="16"></rect>
+        <rect id="path-13" x="0" y="0" width="16" height="16"></rect>
+        <rect id="path-15" x="0" y="0" width="16" height="16"></rect>
+        <rect id="path-17" x="0" y="0" width="16" height="16"></rect>
+        <rect id="path-19" x="0" y="0" width="16" height="16"></rect>
+    </defs>
+    <g id="➊-Campaigns---Viber" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-20">
+            <g id="Group-18">
+                <g id="Group-14">
+                    <rect id="body" fill="#101211" x="0" y="0" width="220" height="472" rx="26"></rect>
+                    <g id="Group-22" transform="translate(9.000000, 36.000000)">
+                        <g id="Bitmap">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use>
+                        </g>
+                        <g id="screen" transform="translate(101.000000, 23.000000) scale(1, -1) translate(-101.000000, -23.000000) ">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                        <g id="Group" transform="translate(101.000000, 377.500000) scale(1, -1) translate(-101.000000, -377.500000) translate(0.000000, 351.000000)">
+                            <g id="Group-12">
+                                <g id="screen" transform="translate(101.000000, 26.500000) scale(1, -1) translate(-101.000000, -26.500000) ">
+                                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                                    <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g id="Atoms/Icons/24/filled/error" transform="translate(189.000000, 60.000000)">
+                        <g id="Group-21">
+                            <path d="M6,0 C2.688,0 0,2.688 0,6 C0,9.312 2.688,12 6,12 C9.312,12 12,9.312 12,6 C12,2.688 9.312,0 6,0 Z" id="Mask" fill="#6563FF" fill-rule="nonzero" transform="translate(6.000000, 6.000000) rotate(-180.000000) translate(-6.000000, -6.000000) "></path>
+                            <path d="M6,4.66666667 C5.53976271,4.66666667 5.16666667,4.29357062 5.16666667,3.83333333 C5.16666667,3.37309604 5.53976271,3 6,3 C6.46023729,3 6.83333333,3.37309604 6.83333333,3.83333333 C6.83333333,4.29357062 6.46023729,4.66666667 6,4.66666667 Z" id="Path" fill="#FFFFFF"></path>
+                            <path d="M6,8.66666667 C5.63181017,8.66666667 5.33333333,8.36818983 5.33333333,8 L5.33333333,6 C5.33333333,5.63181017 5.63181017,5.33333333 6,5.33333333 C6.36818983,5.33333333 6.66666667,5.63181017 6.66666667,6 L6.66666667,8 C6.66666667,8.36818983 6.36818983,8.66666667 6,8.66666667 Z" id="Path" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                    <g id="Atoms/Icons/24/Nav/Back" transform="translate(19.000000, 60.000000)">
+                        <mask id="mask-8" fill="white">
+                            <use xlink:href="#path-7"></use>
+                        </mask>
+                        <use id="icon" fill="#FFFFFF" xlink:href="#path-7"></use>
+                        <rect id="grey_k-091E42" fill="#6563FF" mask="url(#mask-8)" x="-2" y="-2" width="16" height="16"></rect>
+                    </g>
+                    <rect id="parts" fill="#2E2E2E" x="84" y="14" width="52" height="5"></rect>
+                    <rect id="parts" fill="#2E2E2E" x="84" y="455" width="52" height="5"></rect>
+                    <circle id="parts" fill="#2E2E2E" cx="45.5" cy="19.5" r="5.5"></circle>
+                    <circle id="parts" fill="#2E2E2E" cx="65.5" cy="19.5" r="3.5"></circle>
+                    <circle id="Ellipse" fill="#6563FF" cx="191" cy="420" r="12"></circle>
+                    <g id="Group" transform="translate(184.000000, 414.500000)" stroke="#FFFFFF">
+                        <g id="Group-9" transform="translate(0.500000, 0.499512)">
+                            <rect id="Rectangle" x="-1.69642078e-13" y="0" width="13.3333322" height="10"></rect>
+                            <path d="M0.555555556,3.33333333 L13.3333333,3.33333333" id="Line" stroke-linecap="square"></path>
+                            <path d="M0.555555556,6.44422744 L13.3333333,6.44422744" id="Line-Copy" stroke-linecap="square"></path>
+                            <path d="M6.66666667,0.555555556 L6.66666667,10" id="Line-2" stroke-linecap="square"></path>
+                        </g>
+                    </g>
+                    <g id="search" transform="translate(95.000000, 416.000000)">
+                        <mask id="mask-10" fill="white">
+                            <use xlink:href="#path-9"></use>
+                        </mask>
+                        <g id="Background"></g>
+                        <path d="M14.474296,13.5266073 L12.0009634,11.0732726 C13.9944404,8.58770198 13.697479,4.977455 11.3246444,2.85103506 C8.95180839,0.724615141 5.33072242,0.823701289 3.07772334,3.07670008 C0.824724324,5.32969918 0.725638228,8.95078372 2.85205798,11.3236189 C4.97847734,13.6964554 8.58872567,13.9934173 11.0742954,11.9999392 L13.5276306,14.4532733 C13.6528071,14.5794816 13.8232045,14.6504735 14.0009636,14.6504735 C14.1787221,14.6504735 14.3491195,14.5794816 14.474296,14.4532733 C14.7240659,14.1948762 14.7240659,13.7850049 14.474296,13.5266073 L14.474296,13.5266073 Z M7.33396079,11.9996053 C4.75663117,11.9996053 2.66729346,9.91026744 2.66729346,7.33293745 C2.66729346,4.7556084 4.75663145,2.66627069 7.33396079,2.66627069 C9.91129021,2.66627069 12.0006281,4.7556097 12.0006281,7.33293894 C12.0006281,9.91026744 9.91129115,11.9996053 7.33396172,11.9996053 L7.33396079,11.9996053 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-10)"></path>
+                    </g>
+                    <g id="image-v" transform="translate(43.000000, 416.000000)">
+                        <mask id="mask-12" fill="white">
+                            <use xlink:href="#path-11"></use>
+                        </mask>
+                        <g id="Background"></g>
+                        <path d="M12.6669805,1.33313534 L3.33364673,1.33313534 C2.22907703,1.33313534 1.33364673,2.22856591 1.33364673,3.33313534 L1.33364673,12.6664691 C1.33364673,13.7710389 2.22907703,14.6664692 3.33364673,14.6664692 L12.6669805,14.6664692 C12.7766352,14.6649425 12.8859445,14.6537879 12.9936485,14.6331367 L13.1936467,14.5864705 L13.2403132,14.5864705 L13.2403132,14.5864705 L13.2736459,14.5864705 L13.5203139,14.4931372 L13.6069792,14.4464705 C13.6736459,14.4064713 13.7469792,14.3731372 13.8136459,14.3264705 C13.9026632,14.2609772 13.9872882,14.1897138 14.0669752,14.1131398 L14.1136452,14.0531372 C14.1790975,13.9868105 14.2392792,13.9154825 14.2936464,13.8398025 L14.3536454,13.7531377 C14.4002099,13.6789158 14.4403558,13.6008545 14.4736454,13.5198029 C14.4919384,13.4878168 14.5075472,13.4543698 14.5203118,13.4198046 C14.5536451,13.3398038 14.5736453,13.2531385 14.6003126,13.1664718 L14.6003126,13.0664722 C14.6381099,12.9362065 14.6604853,12.8019531 14.6669806,12.6664705 L14.6669806,3.33313534 C14.6669806,2.22856578 13.7715503,1.33313534 12.6669805,1.33313534 L12.6669805,1.33313534 Z M3.33396013,13.333621 C2.96577032,13.333621 2.66729346,13.0351437 2.66729346,12.6669542 L2.66729346,9.79362058 L4.86062688,7.59362022 L4.86062688,7.59362022 C4.9858045,7.4674116 5.15620178,7.39642135 5.3339602,7.39642135 C5.51171871,7.39642135 5.68211546,7.4674116 5.8072937,7.59362022 L11.5406267,13.333621 L3.33396013,13.333621 Z M13.3332188,12.6667553 C13.3325906,12.7489506 13.3167685,12.8303192 13.2865511,12.9067583 C13.2713151,12.9392531 13.2534802,12.9704651 13.2332189,13.0000885 C13.2153828,13.0283111 13.1953187,13.0550634 13.1732189,13.0800894 L9.60655189,9.51342215 L10.1932187,8.92675535 C10.3183967,8.80054674 10.4887941,8.72955649 10.666552,8.72955649 C10.8443106,8.72955649 11.0147079,8.80054674 11.1398848,8.92675535 L11.1398848,8.92675535 L13.3332188,11.1267556 L13.3332188,12.6667553 Z M13.3339601,9.23960447 L12.0806273,7.99960421 C11.2883516,7.24785121 10.0462353,7.24785121 9.2539596,7.99960421 L8.66729346,8.58627097 L6.74729346,6.66627069 C5.95501762,5.91451796 4.71290232,5.91451796 3.92062658,6.66627069 L2.66729346,7.90627043 L2.66729346,3.33293735 C2.66729346,2.96474757 2.96577032,2.66627069 3.33396013,2.66627069 L12.6672935,2.66627069 C13.035483,2.66627069 13.3339601,2.96474757 13.3339601,3.33293735 L13.3339601,9.23960447 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-12)"></path>
+                    </g>
+                    <g id="smile" transform="translate(17.000000, 416.000000)">
+                        <g id="Group-13">
+                            <mask id="mask-14" fill="white">
+                                <use xlink:href="#path-13"></use>
+                            </mask>
+                            <g id="Background"></g>
+                            <path d="M9.57339145,9.48664197 C8.65514264,10.2269844 7.34497346,10.2269844 6.42672422,9.48664197 C6.14321849,9.25100113 5.72236638,9.28980296 5.48672489,9.57330935 C5.25108307,9.85681513 5.28988522,10.2776671 5.573391,10.5133086 C6.97854066,11.6863159 9.0215765,11.6863159 10.4267252,10.513308 C10.610143,10.3608568 10.6982825,10.122126 10.6579385,9.88706125 C10.6175934,9.6519964 10.4548942,9.45631768 10.2311398,9.3737511 C10.0073858,9.29118388 9.75657877,9.33427534 9.57321401,9.48678948 L9.57339145,9.48664197 Z M6.00023106,7.33320978 C6.3684206,7.33320978 6.66689785,7.03473319 6.66689785,6.66654298 C6.66689785,6.29835278 6.3684206,5.99987619 6.00023106,5.99987619 C5.63204085,5.99987619 5.33356426,6.29835342 5.33356426,6.66654298 C5.33356426,7.03473252 5.63204085,7.33320978 6.00023106,7.33320978 L6.00023106,7.33320978 Z M10.0001483,5.99987619 C9.63195826,5.99987619 9.33348179,6.29835342 9.33348179,6.66654298 C9.33348179,7.03473319 9.63195826,7.33320978 10.0001483,7.33320978 C10.3683384,7.33320978 10.6668149,7.03473252 10.6668149,6.66654298 C10.6668149,6.29835278 10.3683377,5.99987619 10.0001483,5.99987619 L10.0001483,5.99987619 Z M8.00031366,1.33313534 C4.31841485,1.33313534 1.33364673,4.317904 1.33364673,7.99980307 C1.33364673,11.6817011 4.31841525,14.6664692 8.00031366,14.6664692 C11.6822125,14.6664692 14.6669806,11.6816998 14.6669806,7.99980094 C14.6669806,4.317904 11.6822125,1.33313534 8.00031446,1.33313534 L8.00031366,1.33313534 Z M8.0006268,13.3329374 C5.05510765,13.3329374 2.66729346,10.9451225 2.66729346,7.99960338 C2.66729346,5.05408488 5.05510797,2.66627069 8.0006268,2.66627069 C10.9461453,2.66627069 13.3339601,5.05408616 13.3339601,7.99960466 C13.3339601,10.9451225 10.9461453,13.3329374 8.00062744,13.3329374 L8.0006268,13.3329374 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-14)"></path>
+                        </g>
+                    </g>
+                    <g id="camera" transform="translate(69.000000, 416.000000)">
+                        <mask id="mask-16" fill="white">
+                            <use xlink:href="#path-15"></use>
+                        </mask>
+                        <g id="Background"></g>
+                        <path d="M12.6672455,4.33323017 L11.8139117,4.33323017 L11.6005792,3.66656348 C11.3171172,2.86479444 10.557642,2.32995222 9.70724613,2.33321522 L6.29391187,2.33321522 C5.43476798,2.33483742 4.67263947,2.88496559 4.40057829,3.69989684 L4.18724529,4.36656353 L3.33391184,4.36656353 C2.22934209,4.36656353 1.33391184,5.26199447 1.33391184,6.36656359 L1.33391184,11.6998964 C1.33391184,12.8044662 2.22934209,13.699897 3.33391184,13.699897 L12.6672455,13.699897 C13.7718159,13.699897 14.6672462,12.8044662 14.6672462,11.6998964 L14.6672462,6.36656291 C14.676185,5.83038357 14.4694243,5.31306997 14.0933795,4.93075583 C13.7173337,4.54844135 13.2035095,4.33315708 12.6672509,4.33323017 L12.6672455,4.33323017 Z M13.3344913,11.6662227 C13.3344913,12.0344142 13.0360141,12.3328917 12.6678237,12.3328917 L3.3344904,12.3328917 C2.96630055,12.3328917 2.66782368,12.0344142 2.66782368,11.6662227 L2.66782368,6.3328912 C2.66782368,5.96470129 2.96630055,5.66622267 3.3344904,5.66622267 L4.66782368,5.66622267 C4.96659219,5.68181844 5.23916129,5.49647175 5.33449057,5.21289106 L5.6944906,4.11955812 C5.78620549,3.84801715 6.04121277,3.66548516 6.32782399,3.66622267 L9.74115762,3.66622267 C10.0277678,3.66548516 10.2827758,3.84801715 10.3744899,4.11955812 L10.734491,5.21289141 C10.8220452,5.47314689 11.0602159,5.65309822 11.33449,5.66622267 L12.6678237,5.66622267 C13.0360141,5.66622267 13.3344913,5.96470129 13.3344913,6.3328912 L13.3344913,11.6662227 Z M8.00050562,5.66663828 C6.52774622,5.66663828 5.33383868,6.86054561 5.33383868,8.33330476 C5.33383868,9.80606392 6.52774622,10.9999712 8.00050562,10.9999712 C9.47326503,10.9999712 10.6671726,9.80606392 10.6671726,8.33330412 C10.6671726,6.86054561 9.47326578,5.66663828 8.00050616,5.66663828 L8.00050562,5.66663828 Z M8.00108376,9.66676478 C7.26470413,9.66676478 6.66775042,9.06981108 6.66775042,8.33343145 C6.66775042,7.59705182 7.26470413,7.00009812 8.00108376,7.00009812 C8.73746338,7.00009812 9.33441709,7.59705182 9.33441709,8.33343145 C9.33441709,9.06981108 8.73746338,9.66676478 8.00108376,9.66676478 L8.00108376,9.66676478 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-16)"></path>
+                    </g>
+                    <g id="ellipsis-h" transform="translate(147.000000, 416.000000)">
+                        <mask id="mask-18" fill="white">
+                            <use xlink:href="#path-17"></use>
+                        </mask>
+                        <g id="Background"></g>
+                        <path d="M8.0007972,6.66644127 C7.26441749,6.66644127 6.66746371,7.26339516 6.66746371,7.99977502 C6.66746371,8.73615488 7.26441749,9.33310877 8.0007972,9.33310877 C8.73717692,9.33310877 9.33413069,8.73615488 9.33413069,7.99977502 C9.33413069,7.26339516 8.73717692,6.66644127 8.0007972,6.66644127 L8.0007972,6.66644127 Z M3.33357243,6.66644127 C2.59719264,6.66644127 2.00023909,7.26339516 2.00023909,7.99977502 C2.00023909,8.73615488 2.5971928,9.33310877 3.33357243,9.33310877 C4.06995205,9.33310877 4.66690576,8.73615488 4.66690576,7.99977502 C4.66690576,7.26339516 4.06995205,6.66644127 3.33357243,6.66644127 L3.33357243,6.66644127 Z M12.6669994,6.66644127 C11.930619,6.66644127 11.3336659,7.26339516 11.3336659,7.99977502 C11.3336659,8.73615488 11.930619,9.33310877 12.6669994,9.33310877 C13.4033797,9.33310877 14.0003329,8.73615488 14.0003329,7.99977502 C14.0003329,7.26339516 13.4033784,6.66644127 12.6669994,6.66644127 L12.6669994,6.66644127 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-18)"></path>
+                    </g>
+                    <g id="analysis-2" transform="translate(121.000000, 416.000000)">
+                        <g id="analysis">
+                            <mask id="mask-20" fill="white">
+                                <use xlink:href="#path-19"></use>
+                            </mask>
+                            <g id="Background"></g>
+                            <path d="M14.4729095,4.85988274 C14.3477325,4.73367443 14.177335,4.66268386 13.999576,4.66268386 C13.8218184,4.66268386 13.6514209,4.73367411 13.5262437,4.85988274 L9.33290904,9.05988319 L6.47290927,6.19321612 C6.3477314,6.06700746 6.17733466,5.99601722 5.99957604,5.99601722 C5.82181743,5.99601722 5.65142056,6.06700746 5.52624268,6.19321612 L1.52624269,10.1932163 C1.40003439,10.3183942 1.32904414,10.488792 1.32904414,10.6665497 C1.32904414,10.8443085 1.40003455,11.0147055 1.52624269,11.1398825 C1.65142038,11.2660917 1.8218177,11.337082 1.99957607,11.337082 C2.17733439,11.337082 2.34773167,11.2660917 2.47290941,11.1398825 L5.99957604,7.60654942 L8.85957608,10.4732162 C8.98475395,10.5994251 9.15515136,10.6704154 9.33290904,10.6704154 C9.51066805,10.6704154 9.6810648,10.5994251 9.80624267,10.4732162 L14.4729095,5.80654948 C14.5991181,5.68137148 14.6701086,5.51097463 14.6701086,5.33321612 C14.6701086,5.15545754 14.5991181,4.98506042 14.4729095,4.85988274 L14.4729095,4.85988274 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-20)"></path>
+                        </g>
+                    </g>
+                    <text id="Type-a-message..." font-family="Roboto-Regular, Roboto" font-size="10" font-weight="normal" line-spacing="14" fill="#B4B1B4">
+                        <tspan x="17" y="403">Type a message...</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/v2Components/TemplatePreview/index.js

@@ -16,15 +16,19 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
+import { VIBER } from '../../v2Containers/App/constants';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
+const viberMobileAndroid = require('./assets/images/viberMobile.svg');
+
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
-import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
+
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -127,7 +131,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module} = this.props;
+    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName } = this.props;
+    const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -155,11 +160,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       });
     }
     const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
-    const showTestAndPreview = showTestAndPreviewIcon && 
+    const showTestAndPreview = showTestAndPreviewIcon &&
         channel !== WECHAT &&
         ['outbound', 'library'].includes(module);
 
-    const renderLineMultiText = (content)  => {
+    const renderLineMultiText = (content) => {
       let textCount = 0;
       return content.map((item) => {
         const { type, messageContent = '' } = item || {};
@@ -170,12 +175,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               {this.props.intl.formatMessage(messages.textMessageLabel)}
               {textCount}: ({messageContent.length}/{1600} {this.props.intl.formatMessage(messages.textMessageCharacter)})
             </p>
-          )
+          );
         }
-        return null
+        return null;
       });
-    }
-    
+    };
+    const viberSectionStyle = {
+      "padding": '3.5px 0 0',
+      'border-radius': '8px',
+      'background-color': CAP_G15,
+      'width': '81%',
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -245,7 +255,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             />
           )
         }
-      </div>  
+      </div>
     );
 
     return (
@@ -393,7 +403,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                   marginLeft: 40,
                 }}
               >
-                <div className="sms-icon"
+                <div
+                  className="sms-icon"
                   style={{
                     left: 0,
                     top: 8,
@@ -401,7 +412,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     width: 20,
                     height: 20,
                     background: CAP_COLOR_03,
-                    paddingRight: 5
+                    paddingRight: 5,
                   }}
                 >
                   {this.props.LineAccountName}
@@ -464,7 +475,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                 },
                               }}
                             />
-                          </div>  
+                          </div>
                         );
                       }
                       if (type === VIDEO) {
@@ -495,7 +506,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                 },
                               }}
                             />
-                          </div>  
+                          </div>
                         );
                       }
                       if (type === STICKER && selectedSticker) {
@@ -510,7 +521,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               alignItems: 'center',
                             }}
                           >
-                            <CapImage 
+                            <CapImage
                               src={selectedSticker.stickerUrl}
                               style={{maxWidth: '100%', marginBottom: 5 }}
                               rest={{
@@ -519,11 +530,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                   marginBottom: 5,
                                 },
                                 height: 70,
-                                onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
-                                onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||  selectedSticker.stickerUrl),
+                                onMouseOut: (e) => (e.currentTarget.src = selectedSticker.stickerUrl),
+                                onMouseOver: (e) => (e.currentTarget.src = selectedSticker.animatedStickerUrl || selectedSticker.stickerUrl),
                               }}
                             />
-                          </div>  
+                          </div>
                         );
                       }
                       if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
@@ -535,7 +546,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                           >
                             <Carousel imageCarousel={imageCarousel}/>
                           </div>
-                        )
+                        );
                       }
                       return null;
                     })
@@ -546,7 +557,86 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
+            {
+          channel && channel.toLowerCase() === VIBER ? (
+            <div className="shell-v2 align-center" id="sms-preview">
+              <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
+              <div
+                className="msgContainer viber-preview"
+                style={{
+                  maxHeight: 292,
+                  marginLeft: 28,
+                }}
+              >
+                <div
+                  className="sms-icon"
+                  style={{
+                    "width": 20,
+                    "height": 20,
+                    "margin": '0 4px 277px 0',
+                    'border-radius': '4px',
+                    'background-color': CAP_PURPLE01,
+                    'font-size': '12px',
+                    'font-weight': 900,
+                    "color": CAP_WHITE,
+                  }}
+                >
+                  {viberAccountName}
+                </div>
+                <div
+                  className="message-pop align-left"
+                  style={viberSectionStyle}>
+                  {/* Text Viber preview */}
+                  <p
+                    style={{
+                      'font-size': '10px',
+                      "color": CAP_G16,
+                      "margin": '1.5px 6px 1px 7px',
+                    }}>{viberMessageContent || ''}
+                  </p>
+                  {/* Image Viber preview */}
+                  {imageURL && <CapImage
+                    src={imageURL}
+                    alt="brand-name"
+                    rest={{
+                      style: {
+                        maxWidth: '100%',
+                        marginBottom: 5,
+                      },
+                    }}
+                    />
+                  }
+                  {/* button viber preview */}
+                  {buttonText && <div
+                    style={{
+                      'border-radius': '16px',
+                      'background-color': CAP_PURPLE01,
+                      "margin-top": '14px',
+                      'text-align': 'center',
+                      "width": '140px',
+                      "height": '20px',
+                      "margin-left": "8px",
+                    }}>
+                    <p
+                      style={{ 'font-size': '12px',
+                        'font-weight': '500',
+                        "display": '-webkit-box',
+                        '-webkit-line-clamp': '1',
+                        '-webkit-box-orient': 'vertical',
+                        'overflow': 'hidden',
+                        "color": CAP_WHITE }}
+                      >
+                      {buttonText || ''}</p>
+                  </div>
+                  }
+                  <div style={{ paddingBottom: 32}}></div>
+                </div>
 
+              </div>
+            </div>
+          ) : ''
+        }
           </div>
 
         </CapColumn>

package/v2Containers/App/constants.js

@@ -20,7 +20,7 @@ export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
 
-
+export const VIBER = 'viber';
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
 export const TRACK_EDIT_MPUSH = 'editMpush';