@capillarytech/creatives-library 3.0.9 → 3.0.10

package/package.json

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

package/v2Containers/Assets/Gallery/index.js

@@ -13,7 +13,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapHeader, CapInput, CapButton, CapSpin, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel } from '@capillarytech/cap-ui-library';
+import { CapHeader, CapInput, CapButton, CapSpin, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
 import { Popover } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';
@@ -23,7 +23,7 @@ import * as globalActions from '../../Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as commonUtil from '../../../utils/common';
 import Pagination from '../../../v2Components/Pagination';
-
+import imageGalleryIllustration from '../images/imageGalleryIllustration.svg';
 import './_gallery.scss';
 const {CapCustomCardList} = CapCustomCard;
 export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -240,6 +240,12 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       };
     }
   }
+  getIllustrationProps={
+    buttonLabel: <FormattedMessage {...messages.upload} />,
+    onClick: (e) => this.openFileDialog(e),
+    illustrationImage: imageGalleryIllustration,
+    title: <FormattedMessage {...messages.addImages} />,
+  }
 
   prepareData() {
     const data = [];
@@ -326,10 +332,12 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }) : [];
     return (<div>
       {filterContent}
-      <CapSpin spinning={isLoading} tip={loadingTip}>
-        {!_.isEmpty(templates) && <div className="pagination-container">
-          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
-        </div>}
+      <CapSpin spinning={isLoading} tip={loadingTip} style={{width: "100%"}}>
+        {!isLoading && <div>
+          {!_.isEmpty(templates) ? <div className="pagination-container">
+            <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
+          </div> : <CapIllustration {...this.getIllustrationProps} />}</div>
+        }
       </CapSpin>
 
     </div>);
@@ -383,7 +391,8 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     );
   }
   render() {
-    const filterContent = (
+    const assetList = this.props.Gallery.assetList;
+    const filterContent = !_.isEmpty(assetList) ? (
       <div className="action-container" style={{ display: 'inline-flex', width: '100%'}}>
         <div style={{ marginTop: '8px', width: '50%'}}>
           <CapInput.Search
@@ -404,10 +413,10 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           </form>
         </div>
       </div>
-    );
+    ) : <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>;
     const isLoading = this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets;
     const loadingTip = "Loading gallery... ";
-    const assetList = this.props.Gallery.assetList;
+
     return (
       <div>
         {this.state.showEmbeddedPreview ?

package/v2Containers/Assets/Gallery/messages.js

@@ -22,6 +22,10 @@ export default defineMessages({
     id: 'app.containers.Assets.Gallery.upload',
     defaultMessage: 'Upload image',
   },
+  addImages: {
+    id: `app.containers.Assets.Gallery.addImages`,
+    defaultMessage: 'Add images',
+  },
   imagePreview: {
     id: 'app.containers.Assets.Gallery.imagePreview',
     defaultMessage: 'Image preview',

package/v2Containers/Assets/images/calltaskIllustration.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152"><defs><style>.cls-1{fill:#fec52e;}.cls-2{fill:#fff;}.cls-3{fill:#103344;}.cls-4{fill:#ea4cb5;}.cls-5{fill:#e51fa3;}</style></defs><title>Illustration</title><path class="cls-1" d="M117.57,105.9c-3.5-3.1-14.33,2.57-14.93,7.86-.44,3.8,5.54,10.55,12.49,3.83C115.13,117.59,122.11,109.92,117.57,105.9Z"/><path class="cls-1" d="M123,98.46c-1,.76-2.64,3.48,1.57,4.26,0,0,3.23.8,3.1-3S124,97.71,123,98.46Z"/><circle class="cls-1" cx="55.98" cy="74.76" r="2.01"/><path class="cls-1" d="M139.14,51.31l-.13-.23c-6.25-11.38-17.87-20.65-31.76-26.6l-.33-.15c-15.7-6.65-34.27-9.06-51.25-5.5l-1.39.29a67.42,67.42,0,0,0-13.46,4.59C29.56,29,21.63,36.41,16.41,45c-10.68,17.63-9.95,40.23-3,59.59.58,1.62,1.2,3.15,1.86,4.64a1.4,1.4,0,0,1,.57-.13,1.66,1.66,0,0,1,1.44.86l.23.44a.54.54,0,0,0,1,0l.5-.89a1.6,1.6,0,0,1,2.75-.1l.72,1.09a.51.51,0,0,0,.47.24.54.54,0,0,0,.46-.28l.29-.54A1.58,1.58,0,0,1,25,109.1h0a1.6,1.6,0,0,1,1.38.78l.69,1.17a.5.5,0,0,0,.49.26.51.51,0,0,0,.46-.3l.46-.93a1.6,1.6,0,0,1,1.44-.9h0a1.61,1.61,0,0,1,1.44.93l.4.87a.53.53,0,0,0,.93.09l.34-.49a1.61,1.61,0,0,1,2.92.71l.13,1a.54.54,0,0,0,.68.45l4.76-1.38.3,1-4.76,1.37a1.41,1.41,0,0,1-.45.07,1.57,1.57,0,0,1-.88-.27,1.61,1.61,0,0,1-.71-1.14l-.13-1a.54.54,0,0,0-1-.24l-.34.49a1.55,1.55,0,0,1-1.46.68,1.6,1.6,0,0,1-1.32-.92l-.4-.88a.54.54,0,0,0-.49-.31.53.53,0,0,0-.49.3l-.46.93a1.6,1.6,0,0,1-1.38.9,1.58,1.58,0,0,1-1.44-.78l-.7-1.17a.53.53,0,0,0-.48-.26.52.52,0,0,0-.46.28l-.29.54a1.61,1.61,0,0,1-2.76.12l-.72-1.1a.59.59,0,0,0-.47-.24.57.57,0,0,0-.46.28l-.49.89a1.62,1.62,0,0,1-1.41.83h0a1.61,1.61,0,0,1-1.4-.86l-.23-.44a.52.52,0,0,0-.49-.29.74.74,0,0,0-.14,0c6.58,14.18,16.7,21.92,27.47,24-1.21-3.68-2.47-11.18,2.3-25.62,1.33-4,4.12-7.91.2-13.88-.86-1.3-2.43-3.28-2.6-5.66s-3,1.24-6.68-.88C32.21,85.82,20.71,67,24.61,65.47s17,10.46,17.5,10.53,8-8,19.53-7.37c0,0,4.52-13.11,19.71-2.35,0,0,.72.84-2,1.81-3.65,1.29-3.16-1.32-5.32,1.08s2.25,5.81-3.94,9c0,0,3.35,5.76,2.56,15.9,0,0-2.7,8.18,1,14,3.43,5.35,4.6,12.42,4.89,15,7.06-4.47,14.37-9.52,21.42-14.42a167,167,0,0,1,24.68-13.81,34.41,34.41,0,0,0,8.59-5.54C140.23,83,149.41,70.3,139.14,51.31Z"/><path class="cls-2" d="M72.63,94c.79-10.14-2.56-15.9-2.56-15.9,6.19-3.15,1.77-6.56,3.94-9s1.67.21,5.32-1.08c2.74-1,2-1.81,2-1.81-15.19-10.76-19.71,2.35-19.71,2.35C50.07,68,42.66,76.06,42.11,76S28.5,64,24.61,65.47s7.6,20.35,11.75,22.72c3.69,2.12,6.51-1.5,6.68.88s1.74,4.36,2.6,5.66c3.92,6,1.13,9.84-.2,13.88-4.77,14.44-3.51,21.94-2.3,25.62a34,34,0,0,0,22.47-3.62c4.12-2.18,8.48-4.77,12.94-7.6-.29-2.57-1.46-9.64-4.89-15C69.93,102.21,72.63,94,72.63,94Z"/><circle class="cls-3" cx="51.54" cy="85.49" r="0.93"/><circle class="cls-3" cx="60.74" cy="81.25" r="0.93"/><path class="cls-3" d="M59,91c.7.17,2.4-.33,2.6-1.06s-.11-.39.35-1A2.06,2.06,0,0,0,59,86.58,4.15,4.15,0,0,0,56.73,88c-.39.7-.07,2.72,1,2.56C58.39,90.44,58.69,91,59,91Z"/><path class="cls-4" d="M83.85,91.83S56,83.91,40.57,105.6c-1,1.38-2.13,3.94-1.19,6.41l-2.56.74a.54.54,0,0,1-.68-.45l-.13-1a1.61,1.61,0,0,0-2.92-.71l-.34.49a.53.53,0,0,1-.93-.09l-.4-.87a1.61,1.61,0,0,0-1.44-.93h0a1.6,1.6,0,0,0-1.44.9l-.46.93a.51.51,0,0,1-.46.3.5.5,0,0,1-.49-.26l-.69-1.17A1.6,1.6,0,0,0,25,109.1h0a1.58,1.58,0,0,0-1.38.84l-.29.54a.54.54,0,0,1-.46.28.51.51,0,0,1-.47-.24l-.72-1.09a1.6,1.6,0,0,0-2.75.1l-.5.89a.54.54,0,0,1-1,0l-.23-.44a1.66,1.66,0,0,0-1.44-.86,1.4,1.4,0,0,0-.57.13c.14.33.29.66.44,1a.74.74,0,0,1,.14,0,.52.52,0,0,1,.49.29l.23.44a1.61,1.61,0,0,0,1.4.86h0a1.62,1.62,0,0,0,1.41-.83l.49-.89a.57.57,0,0,1,.46-.28.59.59,0,0,1,.47.24l.72,1.1a1.61,1.61,0,0,0,2.76-.12l.29-.54a.52.52,0,0,1,.46-.28.53.53,0,0,1,.48.26l.7,1.17a1.58,1.58,0,0,0,1.44.78,1.6,1.6,0,0,0,1.38-.9l.46-.93a.53.53,0,0,1,.49-.3.54.54,0,0,1,.49.31l.4.88a1.6,1.6,0,0,0,1.32.92,1.55,1.55,0,0,0,1.46-.68l.34-.49a.54.54,0,0,1,1,.24l.13,1a1.61,1.61,0,0,0,.71,1.14,1.57,1.57,0,0,0,.88.27,1.41,1.41,0,0,0,.45-.07l2.75-.79a8.05,8.05,0,0,0,3.29,2.81s3.56.13,9-5.31c0,0,2.36-2-.94-5.22C47.15,101.21,75,93.13,75.12,97.35a10.79,10.79,0,0,0,.84,4.37A2.27,2.27,0,0,0,77.48,103c2.37.6,9,1.94,11.67-.93C92.5,98.38,86.61,92.71,83.85,91.83Z"/><path class="cls-5" d="M79.25,101.14a2.63,2.63,0,0,1-1.78-1.23,9.54,9.54,0,0,1-1-4.38C76.38,91.31,47,99.75,49,104.28c2.39,5.5,0,6.2,0,6.2-3.71,3.15-6.4,3.82-8,3.83a9.42,9.42,0,0,0,2.19,1.51s3.56.13,9-5.31c0,0,2.36-2-.94-5.22C47.15,101.24,75,93.16,75.12,97.38a10.79,10.79,0,0,0,.84,4.37A2.26,2.26,0,0,0,77.48,103c2.37.59,9,1.93,11.67-.94.09-.11.16-.22.24-.33C85.83,102.38,81.24,101.57,79.25,101.14Z"/><path class="cls-2" d="M56.15,93.18a3,3,0,0,0,4,1.14c.24-.14.72-.58.9-.67,1-.59.79.08,2-.39a3.26,3.26,0,0,0,2-2.9C65.28,88.93,56.15,93.18,56.15,93.18Z"/></svg>

package/v2Containers/Assets/images/emailIllustration.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 152 152"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fec52e;}.cls-3{fill:#fff;}.cls-4{fill:#103344;}.cls-5{clip-path:url(#clip-path);}.cls-6{fill:#ebecf0;}.cls-7{fill:#c7ccd3;}.cls-8{fill:#f4f5f7;}.cls-9{fill:#a4172a;}.cls-10{fill:#2546b3;}.cls-11{fill:#279ae0;}.cls-12{fill:#0071bb;}.cls-13{fill:#00adef;}</style><clipPath id="clip-path"><rect class="cls-1" x="96.29" y="58.37" width="42.25" height="31.24" rx="2.83" transform="translate(43.21 -43.29) rotate(25.46)"/></clipPath></defs><title>Illustration</title><path class="cls-2" d="M84.75,135s1.23,3,4.14.77-.45-4.08-1.65-4.47S83,131.2,84.75,135Z"/><path class="cls-2" d="M67.48,136.08s10.14,1.14,10.73-4.79c.46-4.58-10.32-9.94-14.87-7.37C60.05,125.76,58.12,134.41,67.48,136.08Z"/><path class="cls-2" d="M19.18,47.48c-17,24.8-9.29,47.42,9.37,56.64,10.64,5.24,24.36,10.13,37.37,14.69a165.76,165.76,0,0,1,25.24,11.71,34,34,0,0,0,9.36,3.66c9,2,24.43,2,33.64-17.17l.11-.24c5.47-11.53,6.15-26.15,2.89-40.65l-.07-.35c-3.75-16.34-12.54-32.53-25.16-44-.34-.31-.69-.63-1-.93a65.41,65.41,0,0,0-11.42-8.09c-10.69-5.93-21.18-8-31-7.18C48.22,17.2,30.62,30.82,19.18,47.48Z"/><path class="cls-3" d="M50.21,50.7c-4.7-.33-9.42-4.44-18.1,5.14A.76.76,0,0,0,32.25,57s-1.49,1.67,1.89,4a27.74,27.74,0,0,0,5.7,3.21S42,66.09,40,67.68,19.27,65,15.54,68s2,4.36,2,4.36,11.61-.53,15-.26c16.79,1.36,21.9,5.6,25.19,9.72,4.52,5.65,4.5,9.86,4.78,14.82,1,17.45,9.9,21.9,9.39,27.79,0,0,5.71,2.24,5.25-2-.57-5.25-3.65-11.54-2-14.89,1.83-3.63,4.08-3.15,7.08-12.35.41-1.26,3.1,6.72,5.77.32,1.64-4-.22-5-3.79-6.42-7.28-2.8,6.32-22.13-19.11-27-14.62-2.8-15-5.23-12.18-7.41,2.16-1.67,7.7-1.81,10.87-1.15,3,.62,16.61,6.89,18,1.15C83.43,47.56,57.09,51.19,50.21,50.7Z"/><circle class="cls-4" cx="39.05" cy="54.39" r="0.58"/><g class="cls-5"><path class="cls-6" d="M142,71.77l-11.2,23a2.68,2.68,0,0,1-1.64,1.39A2.63,2.63,0,0,1,127.2,96l-33-16.11a2.69,2.69,0,0,1-1.24-3.58l11.21-23A2.68,2.68,0,0,1,105.63,52l.12,0a2.7,2.7,0,0,1,2,.15L140.75,68.2a2.63,2.63,0,0,1,1.32,1.43.14.14,0,0,1,0,.06A2.65,2.65,0,0,1,142,71.77Z"/><path class="cls-7" d="M129.14,96.15A2.63,2.63,0,0,1,127.2,96l-33-16.11a2.66,2.66,0,0,1-1.32-1.43l25.42-6.06Z"/><path class="cls-8" d="M142.07,69.63l-25.51,6.22L105.75,51.93a2.7,2.7,0,0,1,2,.15L140.75,68.2A2.63,2.63,0,0,1,142.07,69.63Z"/><polygon class="cls-6" points="129.82 97.03 129.63 97.13 129.74 97.19 129.82 97.03"/><polygon class="cls-9" points="105.26 55.31 102.17 56.95 100.61 60.19 103.7 58.55 105.26 55.31"/><polygon class="cls-9" points="109.54 55.47 111.98 54.18 109.58 53.03 107.14 54.32 109.54 55.47"/><polygon class="cls-9" points="137.75 68.98 140.18 67.69 137.78 66.54 135.34 67.83 137.75 68.98"/><polygon class="cls-9" points="118.8 59.9 121.23 58.62 118.83 57.47 116.4 58.75 118.8 59.9"/><polygon class="cls-9" points="99.27 67.8 96.18 69.43 94.63 72.67 97.72 71.04 99.27 67.8"/><polygon class="cls-9" points="128.27 64.44 130.71 63.15 128.31 62 125.87 63.29 128.27 64.44"/><polygon class="cls-9" points="115.78 87.71 113.01 89.17 115.42 90.32 118.18 88.86 115.78 87.71"/><polygon class="cls-9" points="129.62 92.36 132.88 90.64 134.43 87.4 131.17 89.13 129.62 92.36"/><polygon class="cls-9" points="137.29 76.34 135.74 79.58 139 77.86 140.56 74.62 137.29 76.34"/><polygon class="cls-9" points="106.31 83.17 103.54 84.64 105.94 85.78 108.71 84.32 106.31 83.17"/><polygon class="cls-9" points="125.26 92.25 122.49 93.71 124.89 94.86 127.66 93.4 125.26 92.25"/><polygon class="cls-9" points="96.83 78.63 94.07 80.09 96.47 81.25 99.23 79.78 96.83 78.63"/><polygon class="cls-10" points="123.53 62.17 125.97 60.88 123.57 59.73 121.13 61.02 123.53 62.17"/><polygon class="cls-10" points="114.06 57.63 116.5 56.35 114.09 55.2 111.66 56.48 114.06 57.63"/><polygon class="cls-10" points="105.08 50.87 103.54 54.09 107.46 52.02 105.08 50.87"/><polygon class="cls-10" points="140.25 70.18 138.8 73.19 142.06 71.47 143.19 69.13 142.52 68.81 140.08 70.1 140.25 70.18"/><polygon class="cls-10" points="135.94 84.25 137.49 81.01 134.23 82.73 132.68 85.97 135.94 84.25"/><polygon class="cls-10" points="133.01 66.71 135.44 65.42 133.04 64.27 130.61 65.56 133.01 66.71"/><polygon class="cls-10" points="101.57 80.9 98.8 82.36 101.2 83.52 103.97 82.05 101.57 80.9"/><polygon class="cls-10" points="120.52 89.98 117.75 91.44 120.15 92.59 122.92 91.13 120.52 89.98"/><polygon class="cls-10" points="131.37 93.79 127.22 95.98 129.63 97.13 129.74 97.19 131.37 93.79"/><polygon class="cls-10" points="111.05 85.44 108.28 86.9 110.68 88.05 113.45 86.59 111.05 85.44"/><polygon class="cls-10" points="102.34 61.41 99.25 63.04 97.69 66.28 100.78 64.65 102.34 61.41"/><polygon class="cls-10" points="96.21 74.19 93.12 75.82 91.63 78.93 91.73 78.98 94.66 77.43 96.21 74.19"/><polygon class="cls-6" points="106.01 53.84 107.08 54.35 109.58 53.03 107.46 52.02 103.54 54.09 102.17 56.95 105.32 55.28 106.01 53.84"/><polygon class="cls-6" points="111.6 56.52 114.09 55.2 111.98 54.18 109.48 55.5 111.6 56.52"/><polygon class="cls-6" points="116.33 58.78 118.83 57.47 116.5 56.35 114 57.66 116.33 58.78"/><polygon class="cls-6" points="103.77 58.52 100.61 60.19 99.25 63.04 102.4 61.37 103.77 58.52"/><polygon class="cls-6" points="100.85 64.61 97.69 66.28 96.18 69.43 99.34 67.76 100.85 64.61"/><polygon class="cls-6" points="125.81 63.32 128.31 62 125.97 60.88 123.47 62.2 125.81 63.32"/><polygon class="cls-6" points="135.28 67.86 137.78 66.54 135.44 65.42 132.95 66.74 135.28 67.86"/><polygon class="cls-6" points="140.02 70.13 142.52 68.81 140.18 67.69 137.68 69.01 140.02 70.13"/><polygon class="cls-6" points="97.79 71 94.63 72.67 93.12 75.82 96.28 74.15 97.79 71"/><polygon class="cls-6" points="121.07 61.05 123.57 59.73 121.23 58.62 118.74 59.94 121.07 61.05"/><polygon class="cls-6" points="130.55 65.59 133.04 64.27 130.71 63.15 128.21 64.47 130.55 65.59"/><polygon class="cls-6" points="128.79 93.95 127.65 93.4 124.89 94.86 127.22 95.98 131.37 93.79 132.88 90.64 129.53 92.41 128.79 93.95"/><polygon class="cls-6" points="131.08 89.17 134.43 87.4 135.94 84.25 132.59 86.02 131.08 89.17"/><polygon class="cls-6" points="138.71 73.24 137.2 76.39 140.56 74.62 142.06 71.47 138.71 73.24"/><polygon class="cls-6" points="122.92 91.13 120.15 92.59 122.49 93.71 125.25 92.25 122.92 91.13"/><polygon class="cls-6" points="134.14 82.78 137.49 81.01 139 77.86 135.65 79.63 134.14 82.78"/><polygon class="cls-6" points="113.44 86.59 110.68 88.05 113.01 89.17 115.78 87.71 113.44 86.59"/><polygon class="cls-6" points="99.23 79.79 96.47 81.25 98.8 82.36 101.57 80.91 99.23 79.79"/><polygon class="cls-6" points="103.97 82.06 101.2 83.52 103.54 84.64 106.3 83.17 103.97 82.06"/><polygon class="cls-6" points="118.18 88.86 115.42 90.32 117.75 91.44 120.51 89.98 118.18 88.86"/><polygon class="cls-6" points="94.64 77.58 94.73 77.39 91.73 78.98 94.07 80.09 96.83 78.64 94.64 77.58"/><polygon class="cls-6" points="108.7 84.33 105.94 85.78 108.28 86.9 111.04 85.44 108.7 84.33"/></g><path class="cls-11" d="M112.12,100.58l6.15,12.3a1.43,1.43,0,0,1,.06,1.16,1.46,1.46,0,0,1-.7.77l-17.7,8.85A1.46,1.46,0,0,1,98,123l-6.15-12.3a1.48,1.48,0,0,1-.08-1.09l0-.07a1.44,1.44,0,0,1,.7-.78l17.7-8.84a1.4,1.4,0,0,1,1-.09h0A1.39,1.39,0,0,1,112.12,100.58Z"/><path class="cls-12" d="M118.33,114a1.46,1.46,0,0,1-.7.77l-17.7,8.85a1.43,1.43,0,0,1-1.05.09l5.74-12.84Z"/><path class="cls-13" d="M111.23,99.84l-5.69,12.93-13.75-3.22a1.44,1.44,0,0,1,.7-.78l17.7-8.84A1.4,1.4,0,0,1,111.23,99.84Z"/></svg>

package/v2Containers/Assets/images/imageGalleryIllustration.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152"><defs><style>.cls-1{fill:#fec52e;}.cls-2{fill:#fff;}.cls-3{fill:#188f8f;}.cls-4{fill:#1eb8b8;}.cls-5{fill:#ea4cb5;}</style></defs><title>Illustration</title><path class="cls-1" d="M124.09,99c-1.06.77-2.7,3.56,1.61,4.36,0,0,3.31.82,3.17-3S125.15,98.24,124.09,99Z"/><path class="cls-1" d="M140.67,50.71c0-.07-.09-.16-.14-.24-6.39-11.65-18.3-21.14-32.53-27.24a2.52,2.52,0,0,0-.34-.15c-16.08-6.81-35.09-9.28-52.49-5.64-.47.09-1,.19-1.42.31A68,68,0,0,0,40,22.45c-11.53,5.4-19.65,13-25,21.81C7.63,56.37,5.55,70.77,7.11,84.93c4-.94,31.52-7.71,40.52-15.68,9.7-8.59,23.42-8.54,28.53.56,5.41,9.62-15.23,19.67-18,24.1S51.63,122.1,26,127.37c11.63,10.3,26.55,11.35,39.39,4.57,10.92-5.77,23.41-14.37,35.2-22.56a170.74,170.74,0,0,1,25.28-14.15,35.5,35.5,0,0,0,8.8-5.67C141.78,83.18,151.19,70.16,140.67,50.71Z"/><path class="cls-1" d="M118.58,106.63c-3.59-3.19-14.69,2.63-15.3,8-.45,3.89,5.68,10.81,12.79,3.93C116.07,118.6,123.22,110.74,118.58,106.63Z"/><path class="cls-2" d="M58.16,93.91c2.77-4.43,23.41-14.48,18-24.1-5.11-9.1-18.83-9.15-28.53-.56-9,8-36.57,14.74-40.52,15.68a90.52,90.52,0,0,0,4.74,20.36c3.47,9.72,8.4,17,14.11,22.08C51.63,122.1,55.45,98.23,58.16,93.91Z"/><path class="cls-2" d="M55.18,64.15s-3.29,0-2-1.11,4.63.45,4.63.45-4.1-3.22-2.5-3.3,4.77,3.15,4.77,3.15Z"/><path class="cls-3" d="M85.59,102.65l-24.12.16s-1.18-4.25-1.41-5.7a68.58,68.58,0,0,1-.87-14.28l.5-.63L83,86.92c0,4,2.77,11.11,3.61,15Z"/><path class="cls-4" d="M86.57,101.92H61.88l-.81-3.53a51.86,51.86,0,0,1-1.34-11.3l0-4.89H84.38l0,4.48A52.13,52.13,0,0,0,85.67,98Z"/><path class="cls-2" d="M62.51,98.77H77.85l-8-6.52S62.35,98.9,62.51,98.77Z"/><path class="cls-2" d="M73.77,94.5l5,4.12h5.25l-7.53-6.15A22.84,22.84,0,0,0,73.77,94.5Z"/><circle class="cls-2" cx="79.05" cy="89.02" r="2.93"/><path class="cls-5" d="M69.27,81.77s1.48-5,6.79-5.13c0,0,3.43,5.07-.56,9.63S74.91,84.69,69.27,81.77Z"/><circle cx="65.73" cy="73.07" r="0.95"/></svg>

package/v2Containers/Assets/images/pushIllustration.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152"><defs><style>.cls-1{fill:#fec52e;}.cls-2{fill:#ed4d61;}.cls-3{fill:#fff;}.cls-4{fill:#df711f;}.cls-5{fill:#7c3f10;}</style></defs><title>Illustration</title><path class="cls-1" d="M88,114.77c-.37,3.5-4.07,5.38-5.62,4.86a3.51,3.51,0,0,1-2.2-1.92l-8.7,6.78a1.29,1.29,0,0,1-1.82-.23L45.32,93a1.3,1.3,0,0,1,.23-1.83L60.68,79.36a1.29,1.29,0,0,1,1.82.22L83,105.94C89.48,94.22,103.78,91,109.22,85.59c3.35-3.34,1.47-9.21-3-10.28-11.06-2.63-9,.16-17.16,2.44-1.3.35-2.61,2.63-6.1,3a5.51,5.51,0,0,1-5.17-2.14c-4.66-.36-3.09-5.37-3.27-6.94s-2.29-4.4-2.46-6.13-.31-3.49-.31-3.49c-.23-2.32,2.11-4.39,3-8.32s-3.49-7.37-3.18-8.33c.61-1.82,7.41-.08,10,.35,1.83.3,6.63-.79,10.61-2.36,1.46-.57,30.5-13.14,39.21-14.4-2.4-8.09-8.62-16.71-23.57-20l-.25-.06C94.74,6.13,80,8.84,66.25,15.47c-.12.06-.24.1-.34.16C50.45,23.17,36.32,35.71,27.78,51c-.24.41-.48.83-.7,1.26a68.2,68.2,0,0,0-5.43,13.29c-3.43,12.06-3,23,.05,32.69,6.35,19.81,24.05,34.23,43.36,41.79,28.73,11.24,49.54-1.75,54.41-22.54a248.26,248.26,0,0,0,4.18-25.09c-6.13,2-11.62,4.46-20.14,7.35C95.93,102.33,88.41,111.08,88,114.77Z"/><path class="cls-2" d="M60.68,79.36,45.55,91.14A1.3,1.3,0,0,0,45.32,93L69.7,124.26a1.29,1.29,0,0,0,1.82.23l8.7-6.78A3.5,3.5,0,0,1,80,116c.09-.87.22-1.71.38-2.52l-9.53,7.42a1.29,1.29,0,0,1-1.82-.23L47.84,93.46a1.3,1.3,0,0,1,.22-1.82l12.48-9.72a1.31,1.31,0,0,1,1.83.22L82.2,107.6c.26-.57.54-1.12.84-1.66L62.5,79.58A1.29,1.29,0,0,0,60.68,79.36Z"/><path class="cls-3" d="M62.37,82.14a1.31,1.31,0,0,0-1.83-.22L48.06,91.64a1.3,1.3,0,0,0-.22,1.82L69,120.65a1.29,1.29,0,0,0,1.82.23l9.53-7.42a25.78,25.78,0,0,1,1.83-5.86Z"/><ellipse cx="79.93" cy="67.57" rx="0.98" ry="1.05"/><path class="cls-4" d="M102.8,92.61,90.14,84.77l5.55-4.68A8.46,8.46,0,0,0,97,78.67l1.43-2a4.31,4.31,0,0,1,5.64-1.21h0a4.31,4.31,0,0,1,1.82,5.4L105,83.13a9,9,0,0,0-.55,1.85Z"/><ellipse class="cls-5" cx="96.24" cy="88.95" rx="2.53" ry="7.52" transform="translate(-29.24 126.74) rotate(-59.5)"/><circle class="cls-1" cx="96.67" cy="88.11" r="1.82"/><path class="cls-2" d="M86.73,91.84a.51.51,0,0,1-.39-.19,8.05,8.05,0,0,1-1.78-7,.51.51,0,0,1,.63-.33.5.5,0,0,1,.33.62A7.07,7.07,0,0,0,87.12,91a.5.5,0,0,1-.08.7A.51.51,0,0,1,86.73,91.84Z"/><path class="cls-2" d="M83.91,95.36a.51.51,0,0,1-.36-.15c-4.85-4.92-3.29-9.84-3.22-10a.51.51,0,0,1,.63-.32.52.52,0,0,1,.32.64c-.06.18-1.42,4.56,3,9a.5.5,0,0,1,0,.71A.52.52,0,0,1,83.91,95.36Z"/></svg>

package/v2Containers/Assets/images/smsIllustration.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152"><defs><style>.cls-1{fill:#103344;}.cls-2{fill:#f0df32;}.cls-3{fill:#f87d22;}.cls-4{fill:#fff;}</style></defs><title>Illustration</title><path class="cls-1" d="M102.38,15.26s-2.76.77-2.19,2.48,3.65,2,4.6.58S104.92,14.51,102.38,15.26Zm14.38,5.08A4.15,4.15,0,0,0,111.43,18s-4.71,1.05-3.19,3.81,4.58,5.29,7.15,5.47S117.56,22.08,116.76,20.34Zm27.79,73.88c-.22-8-5-14.76-14.69-23.77a37.39,37.39,0,0,1-8.36-11.12,45.72,45.72,0,0,1-2.82-7.56c-.8-2.85-1.39-5.72-2-8.6-2.1-9.24-6.51-20.78-30.43-26-21.69-4.76-43.91,4.64-63.5,27.09A63.88,63.88,0,0,0,9.94,66.4C7.59,73.53,6.2,82.14,9,89.54c6.09,16.16,27.07,14.7,36.52,18.26s17.2,16.57,23.71,21a49.36,49.36,0,0,0,47.63,3.57C139.09,122.27,144.76,102.26,144.55,94.22Z"/><path class="cls-2" d="M107.6,66.34,97,65.67a2,2,0,0,0-2.11,1.86l-.43,6.92a2,2,0,0,0,1.85,2.11l5.28.33-.14,2.25,2.38-2.1,3,.19a2,2,0,0,0,2.1-1.86l.44-6.92A2,2,0,0,0,107.6,66.34Z"/><ellipse class="cls-2" cx="50.46" cy="61.84" rx="1.03" ry="0.99"/><ellipse class="cls-2" cx="78.27" cy="44.43" rx="1.27" ry="1.2"/><ellipse class="cls-2" cx="73.51" cy="54.5" rx="1.14" ry="1.07"/><ellipse class="cls-2" cx="55.68" cy="34.22" rx="1.14" ry="1.07"/><rect class="cls-3" x="97.58" y="69.15" width="9.51" height="0.81" transform="translate(4.6 -6.32) rotate(3.62)"/><rect class="cls-3" x="97.47" y="70.92" width="9.51" height="0.81" transform="translate(4.71 -6.31) rotate(3.62)"/><rect class="cls-3" x="97.34" y="72.86" width="6.1" height="0.81" transform="translate(4.83 -6.19) rotate(3.62)"/><path class="cls-2" d="M98.05,32.06l-5.65-.17a1.06,1.06,0,0,0-1.09,1l-.11,3.7a1.06,1.06,0,0,0,1,1.1l2.82.08L95,39l1.24-1.16,1.62,0a1.05,1.05,0,0,0,1.09-1l.12-3.7A1.08,1.08,0,0,0,98.05,32.06Z"/><rect class="cls-2" x="92.76" y="33.65" width="5.08" height="0.43" transform="translate(1.07 -2.88) rotate(1.74)"/><rect class="cls-2" x="92.73" y="34.6" width="5.08" height="0.43" transform="translate(1.1 -2.88) rotate(1.74)"/><rect class="cls-2" x="92.69" y="35.67" width="3.26" height="0.43" transform="translate(1.14 -2.85) rotate(1.74)"/><path class="cls-2" d="M93.35,53.13,91,53.06a.43.43,0,0,0-.45.43l0,1.55a.45.45,0,0,0,.43.46l1.18,0V56l.51-.49.68,0a.45.45,0,0,0,.46-.43l0-1.55A.45.45,0,0,0,93.35,53.13Z"/><rect class="cls-2" x="91.13" y="53.79" width="2.13" height="0.18" transform="translate(1.68 -2.78) rotate(1.74)"/><rect class="cls-2" x="91.12" y="54.19" width="2.13" height="0.18" transform="translate(1.69 -2.78) rotate(1.74)"/><rect class="cls-2" x="91.11" y="54.64" width="1.36" height="0.18" transform="translate(1.71 -2.77) rotate(1.74)"/><path class="cls-2" d="M75,33.11,72.7,33a.42.42,0,0,0-.43.41l0,1.47a.41.41,0,0,0,.4.43l1.12,0v.47l.49-.46.65,0a.42.42,0,0,0,.43-.41l0-1.47A.41.41,0,0,0,75,33.11Z"/><circle class="cls-2" cx="27.34" cy="69.11" r="0.27"/><circle class="cls-2" cx="40.71" cy="60.39" r="0.32"/><circle class="cls-2" cx="43.89" cy="43.83" r="0.48"/><circle class="cls-2" cx="54.46" cy="48.33" r="0.48"/><circle class="cls-2" cx="33.59" cy="54.75" r="0.63"/><path class="cls-4" d="M83.31,90.69c2-3.1,4.3-2.11,4.92-1.63,1,.76.61,1.94-2.42,4.73-2.84,2.61-5.31,4.52-8.66,7.58-6.38,5.83-7.9,8.13-7.9,8.13s-.89-1.14,2.08-5.61a21.54,21.54,0,0,1,2.86-4S81.76,93.08,83.31,90.69Z"/><path class="cls-4" d="M77.73,100.8l-.12,0c-.9-.21-22.07-5.26-26.9-13.28a13.63,13.63,0,0,1-.1-14.61,12,12,0,0,1,11.92-5.31c4.5.58,9.15,5.68,13.84,15.14a110.23,110.23,0,0,1,5.7,14l.05.16ZM60.76,68A11.39,11.39,0,0,0,51,73.15a13.15,13.15,0,0,0,.11,14.08c4.53,7.53,24.66,12.58,26.46,13l3.94-3.55c-.72-2.21-9.13-27.34-19.07-28.64A14.28,14.28,0,0,0,60.76,68Z"/><path class="cls-4" d="M58.31,107.72a9.84,9.84,0,0,1-5.41-1.32c-4.18-2.75-4.7-5.66-4.64-7.16A5.24,5.24,0,0,1,51,94.85c3.29-1.78,17.76,2.79,18.38,3a.26.26,0,0,1,.16.32.25.25,0,0,1-.31.16c-.15,0-14.89-4.69-18-3a4.73,4.73,0,0,0-2.44,4c-.06,1.39.44,4.11,4.42,6.72,6,4,20.83-2.9,21.63-3.27l2.46-2.24a.24.24,0,0,1,.35,0,.25.25,0,0,1,0,.36l-2.49,2.26a.09.09,0,0,1-.06,0C74.56,103.38,65.4,107.72,58.31,107.72Z"/><polygon class="cls-4" points="80.26 96.75 57.7 68.24 57.89 68.08 80.46 96.59 80.26 96.75"/><path class="cls-4" d="M78.69,98.94C65.63,86,49.52,76.25,49.36,76.15l.13-.21c.16.1,16.3,9.86,29.38,22.82Z"/><path class="cls-4" d="M51.49,105a.13.13,0,0,1-.13-.11.14.14,0,0,1,.11-.14l24-3.07-26-4.56a.14.14,0,0,1-.1-.15.13.13,0,0,1,.15-.1l26.85,4.71a.12.12,0,0,1,.1.12.11.11,0,0,1-.11.12L51.5,105Z"/><path class="cls-4" d="M70.76,84.71a7,7,0,0,1-.38-.95l.24-.08c.19.56.36.91.36.92ZM70.17,83c-.08-.33-.14-.67-.19-1l.25,0a8.26,8.26,0,0,0,.18,1Zm-.26-1.76V81c0-.23,0-.47,0-.69l.25,0c0,.22,0,.45,0,.67v.31Zm.39-1.71-.24-.06a5.45,5.45,0,0,1,.3-1l.23.09A5.71,5.71,0,0,0,70.3,79.56ZM70.92,78l-.22-.13a5.29,5.29,0,0,1,.6-.83l.19.17A4.79,4.79,0,0,0,70.92,78ZM72,76.65l-.17-.19.48-.39.15.2A5.81,5.81,0,0,0,72,76.65Z"/><path class="cls-4" d="M64.22,76.37a7.53,7.53,0,0,1-.41-.93l.23-.09a8,8,0,0,0,.4.9Zm-.64-1.66a8.75,8.75,0,0,1-.18-1l.25,0a7.87,7.87,0,0,0,.17,1Zm0-1.76h-.25a7,7,0,0,1,.08-1l.24,0A8.22,8.22,0,0,0,63.62,73Zm.22-1.71-.24-.06a6.71,6.71,0,0,1,.31-1l.23.09A8.37,8.37,0,0,0,63.84,71.24Zm.6-1.61-.23-.11a6,6,0,0,1,.53-.88l.2.15A5.33,5.33,0,0,0,64.44,69.63Z"/><path class="cls-4" d="M79.53,97.75,79,97.16l.19-.16c.58.65.58.65.55.72l-.23-.1.11,0Zm-1-1.15-.67-.75.18-.16.68.75Zm-1.18-1.3-.67-.75.19-.17.67.75ZM76.15,94l-.68-.74.19-.17.67.75ZM75,92.7,74.29,92l.18-.17.68.74Zm-1.18-1.29-.68-.74.18-.17.68.74Zm-1.19-1.29-.68-.74.18-.17.68.74ZM71.4,88.83l-.69-.73.18-.17.69.73Zm-1.2-1.27-.69-.73.18-.17.69.72ZM69,86.28l-.69-.72.18-.17.69.72ZM67.78,85l-.7-.72.18-.17.7.71Zm-1.22-1.26-.71-.71.18-.18c.23.23.45.47.69.7Zm-1.24-1.24-.71-.7.17-.18.72.7Zm-1.25-1.23-.73-.69.18-.18.72.69Zm-1.28-1.2-.74-.66.16-.19c.24.2.49.43.75.67Zm-1.31-1.15c-.31-.25-.57-.45-.79-.6l.14-.21c.23.16.49.36.8.62Zm-7.24-.07-.15-.2a7,7,0,0,1,.88-.52l.11.22A7.5,7.5,0,0,0,54.24,78.87Zm1.52-.8-.09-.23a7.2,7.2,0,0,1,1-.3l.06.24A6.76,6.76,0,0,0,55.76,78.07Zm4.3-.09a6.33,6.33,0,0,0-.94-.28l.05-.24a4.8,4.8,0,0,1,1,.29Zm-2.64-.33,0-.25a5.8,5.8,0,0,1,1,0v.25A6.43,6.43,0,0,0,57.42,77.65Z"/><path class="cls-4" d="M77.72,99.63a.17.17,0,0,1-.12-.06L76.92,99l.16-.2.68.57,0,0-.07.1.07.09A.11.11,0,0,1,77.72,99.63Zm-1.38-1.1-.78-.63.16-.19.78.63ZM75,97.43l-.79-.62.16-.2.79.63Zm-1.38-1.08-.79-.61.15-.2.8.61ZM72.2,95.28l-.8-.6.15-.2.8.6Zm-1.4-1L70,93.65l.14-.2c.28.19.55.39.81.59Zm-1.42-1-.82-.57.14-.21.82.58Zm-1.44-1-.83-.55.13-.21.84.56Zm-1.46-1-.85-.54.14-.21c.28.18.56.35.84.54ZM65,90.32l-.86-.5.12-.22.87.51ZM53.27,90,53,89.86a4,4,0,0,1,.64-.82l.17.17A3.44,3.44,0,0,0,53.27,90Zm10.21-.52L62.59,89l.11-.22.89.46Zm-9.08-.73-.15-.2a5.22,5.22,0,0,1,.88-.52l.11.22A5,5,0,0,0,54.4,88.73Zm7.51,0c-.32-.14-.63-.27-.92-.37l.09-.24c.29.11.6.23.93.38Zm-1.63-.6c-.32-.09-.64-.17-1-.23l0-.24c.32.06.65.14,1,.23ZM55.92,88l-.07-.24a6.46,6.46,0,0,1,1-.22l0,.25A6.07,6.07,0,0,0,55.92,88Zm2.67-.22a8,8,0,0,0-.84,0h-.14v-.25h.15a8.71,8.71,0,0,1,.87,0Z"/><path class="cls-4" d="M53.2,104.46a1.08,1.08,0,0,1,0-.16,2.33,2.33,0,0,1,.2-.89l.23.1a2.11,2.11,0,0,0-.18.79.68.68,0,0,0,0,.12Zm.8-1.55-.19-.16a3.21,3.21,0,0,1,.77-.68l.14.2A3.49,3.49,0,0,0,54,102.91Zm1.35-1-.1-.23a5.53,5.53,0,0,1,1-.36l.07.24A7.05,7.05,0,0,0,55.35,101.92Zm16.55-.23-1-.12,0-.25,1,.12Zm-1.74-.2-1-.1,0-.25,1,.1ZM57,101.38l0-.24c.3-.07.64-.13,1-.18l0,.25A8.65,8.65,0,0,0,57,101.38Zm11.44-.06-1-.08,0-.25,1,.08Zm-1.75-.14h-.2l-.8,0,0-.25.79,0h.21Zm-8-.06,0-.25c.33,0,.66-.06,1-.07l0,.25C59.35,101.06,59,101.09,58.7,101.12Zm6.23,0-1,0v-.25l1,0ZM60.44,101v-.25l1,0V101Zm2.74,0-1,0v-.25l1,0Z"/><path class="cls-2" d="M102.21,100.79,82.62,96.52a3.76,3.76,0,0,0-4.48,2.87l-2.8,12.86a3.75,3.75,0,0,0,2.87,4.47l9.8,2.14L87.1,123l5.07-3.26L97.8,121a3.77,3.77,0,0,0,4.48-2.88l2.8-12.85A3.76,3.76,0,0,0,102.21,100.79Z"/><rect class="cls-3" x="82.41" y="104.54" width="18.03" height="1.53" transform="translate(24.53 -17.06) rotate(12.3)"/><rect class="cls-3" x="81.7" y="107.82" width="18.03" height="1.53" transform="translate(25.22 -16.83) rotate(12.3)"/><rect class="cls-3" x="80.94" y="110.94" width="11.56" height="1.53" transform="translate(25.79 -15.91) rotate(12.3)"/><path class="cls-4" d="M70.76,68.24s14.94-5.45,14.36,7.91C85,79.53,83.24,89.9,83.24,89.9s1.42-12.11,1.44-14.57C84.71,70.69,80.72,65.4,70.76,68.24Z"/></svg>

package/v2Containers/Assets/images/wechatIllustration.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152"><defs><style>.cls-1{fill:#fec52e;}.cls-2{fill:#e51fa3;}.cls-3{fill:#fff;}.cls-4{fill:#103344;}.cls-5{fill:#f27a89;}</style></defs><title>Illustration</title><path class="cls-1" d="M49.48,124.86c-3.91,1.45-7.49,10.6,2.47,14,0,0,10.89,3,12.55-3.42C65.78,130.52,54.9,122.82,49.48,124.86Z"/><path class="cls-1" d="M74.38,137c-1.24-.63-4.68-.84-3.35,3.63,0,0,.82,3.53,4.4,1.54S75.62,137.62,74.38,137Z"/><path class="cls-1" d="M138.38,85.11c0-.13,0-.27,0-.4C137,66.19,130.17,47,118.31,32.27c-.31-.41-.64-.81-1-1.2a72.25,72.25,0,0,0-11.12-10.79C95.52,12,84.4,8,73.47,7.15c-22.4-1.63-44,10.28-59.32,26.56-.26.27-.49.54-.74.82a70.68,70.68,0,0,0,14.07-1.71c13.57-3.39,15.27-5.55,28.8-2.24C74.37,35,75.53,43,75.83,46.92a12.65,12.65,0,0,1-1.1,6.95c-1.64,3.61-.34,7.38-1.14,9.06-1.11,2.31-3.47-3.85-5.77-4.12-2.74-.33-7.5-6.78-10.76-6.28C45.9,54.21,82.33,80,64.63,98.63c-6.72,7.07-8.85,5.31-25.83,6.37-2.7.17-4.82,1.43-7,3,6.91,4,14.24,8,21.37,11.76a182.49,182.49,0,0,1,25.63,17.1,37.34,37.34,0,0,0,9.62,5.59c9.5,3.7,26.39,6.31,39.72-13.06l.16-.24C136.25,117.4,139.48,101.53,138.38,85.11Z"/><polygon class="cls-2" points="92.72 117.83 95.01 120.22 94.88 116.88 92.72 117.83"/><polygon class="cls-2" points="70.31 107.9 68.88 110.88 71.96 109.6 70.31 107.9"/><polygon class="cls-3" points="72.1 102.33 70.88 104.6 73.43 102.95 72.1 102.33"/><ellipse class="cls-2" cx="87.46" cy="110.73" rx="11.89" ry="8.85" transform="translate(-9.3 8.03) rotate(-4.99)"/><path class="cls-2" d="M85.24,100.18a11.47,11.47,0,0,1,6.22.83c-.77-4.84-6.2-8.26-12.45-7.72-6.47.57-11.35,5.17-10.91,10.28.29,3.35,2.8,6.07,6.31,7.4,0-.17-.06-.34-.08-.51C73.89,105.35,79.49,101.31,85.24,100.18Z"/><ellipse class="cls-1" cx="74.53" cy="100.1" rx="1.19" ry="0.96" transform="translate(-8.42 6.86) rotate(-4.99)"/><ellipse class="cls-1" cx="79.4" cy="99.67" rx="1.19" ry="0.96" transform="translate(-8.37 7.28) rotate(-4.99)"/><ellipse class="cls-1" cx="81" cy="108.21" rx="1.19" ry="0.96" transform="translate(-9.11 7.46) rotate(-4.99)"/><ellipse class="cls-1" cx="85.97" cy="107.49" rx="1.19" ry="0.96" transform="translate(-9.02 7.89) rotate(-4.99)"/><path class="cls-3" d="M98.62,99.08a.32.32,0,0,1-.26-.15.3.3,0,0,1,.12-.4l7.09-3.85a.3.3,0,0,1,.4.12.3.3,0,0,1-.12.4L98.76,99A.25.25,0,0,1,98.62,99.08Z"/><path class="cls-3" d="M93.08,91a.28.28,0,0,1-.13,0,.3.3,0,0,1-.13-.4l3.67-7.18a.3.3,0,0,1,.4-.12.29.29,0,0,1,.12.39l-3.67,7.18A.3.3,0,0,1,93.08,91Z"/><path class="cls-3" d="M96.59,94.08a.29.29,0,0,1-.23-.1.3.3,0,0,1,0-.41l9-7.58a.29.29,0,1,1,.37.44l-9,7.58A.26.26,0,0,1,96.59,94.08Z"/><circle class="cls-4" cx="68.05" cy="51.37" r="1.16"/><path class="cls-5" d="M70.13,34.93c2.34,1.59,6.38,5.47,6.52,11.34.07,2.71,1,4.19,3.38,4.6,4.56.79,5.71-5.45,2.52-10.85-2-3.36-8.68-5.94-12-6.25A.64.64,0,0,0,70.13,34.93Z"/></svg>

package/v2Containers/CallTask/index.js

@@ -9,10 +9,10 @@ import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 import {
   //CapSlideBox,
-  CapButton,
   //CapIcon,
   //CapHeader,
   CapLabel,
+  CapIllustration,
 } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
@@ -23,7 +23,7 @@ import makeSelectCallTask from './selectors';
 import NewCallTask from '../../v2Components/NewCallTask';
 import messages from './messages';
 import './_callTask.scss';
-
+import calltaskIllustration from '../Assets/images/calltaskIllustration.svg';
 export class CallTask extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -57,8 +57,18 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     });
   }
 
+  getIllustrationProps=() => {
+    const { intl, showContentInSlidebox, onCreateNew } = this.props;
+    const { formatMessage } = intl;
+    return {
+      buttonLabel: formatMessage(messages.newCallTaskTemplate),
+      onClick: showContentInSlidebox ? this.showNewCallTask : onCreateNew,
+      illustrationImage: calltaskIllustration,
+      title: formatMessage(messages.callTaskTitleIllustartion),
+    };
+  }
   render() {
-    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, showContentInSlidebox, onCreateNew } = this.props;
+    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities } = this.props;
     const { formatMessage } = intl;
     const { mode } = this.state;
     return (
@@ -77,9 +87,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
                 {formatMessage(messages.callTaskInfo)}
               </CapLabel>
               <div className="call-task-action-button">
-                <CapButton onClick={showContentInSlidebox ? this.showNewCallTask : onCreateNew}>
-                  {formatMessage(messages.addNewCallTask)}
-                </CapButton>
+                <CapIllustration {...this.getIllustrationProps()} />
               </div>
               {/* {
               showCallTaskSlidebox && showContentInSlidebox &&

package/v2Containers/CallTask/messages.js

@@ -18,4 +18,12 @@ export default defineMessages({
     id: 'app.containers.CallTask.callTaskInfo',
     defaultMessage: 'Call Tasks are message sent to store staff. The messages are displayed on the Point of Sale (POS) machines for store staff to take action.',
   },
+  callTaskTitleIllustartion: {
+    id: `app.containers.CallTask.callTaskTitleIllustartion`,
+    defaultMessage: 'Create a Call Task template',
+  },
+  newCallTaskTemplate: {
+    id: `app.containers.CallTask.newCallTaskTemplate`,
+    defaultMessage: 'New Call Task template',
+  },
 });

package/v2Containers/Templates/index.js

@@ -15,7 +15,7 @@ import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Modal} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification} from '@capillarytech/cap-ui-library';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -44,6 +44,11 @@ import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
+import emailIllustration from '../Assets/images/emailIllustration.svg';
+import smsIllustration from '../Assets/images/smsIllustration.svg';
+import pushIllustration from '../Assets/images/pushIllustration.svg';
+
+
 const {CapCustomCardList} = CapCustomCard;
 const InlineDiv = styled.div`
   display: inline;
@@ -79,6 +84,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       modeType: null,
       routeParams: null,
     };
+
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
     this.handleOnItemClick = this.handleOnItemClick.bind(this);
     this.handleEditClick = this.handleEditClick.bind(this);
@@ -255,7 +261,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
-      
+
     }
 
     if (this.state.channel.toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
@@ -377,6 +383,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.setState({selectedAccountError: true});
           this.props.actions.resetTemplate();
           return;
+        } else {
+          this.setState({selectedAccountError: false});
         }
       }
 
@@ -532,24 +540,32 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const accounts = _.get(this.props, 'Templates.weCrmAccounts');
     return (<div>
       {filterContent}
-      <CapSpin spinning={isLoading} tip={loadingTip}>
-        {!_.isEmpty(templates) && <div className="pagination-container">
-          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-        </div>}
-        {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
-        <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-          <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
-        </div>}
-        { !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError &&
+      <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
+        {!isLoading && <div>
+          {!_.isEmpty(templates) ? <div className="pagination-container">
+            <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+          </div> : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+          }
+
+          {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
           <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-            <CapHeading type="h6" >
-              {this.props.intl.formatMessage(messages.accountConfigError)}
-              <InlineDiv>
-                <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
-              </InlineDiv>
-            </CapHeading>
+            <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
           </div>
+          }
+
+          { !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError ?
+            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+              <CapHeading type="h6" >
+                {this.props.intl.formatMessage(messages.accountConfigError)}
+                <InlineDiv>
+                  <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
+                </InlineDiv>
+              </CapHeading>
+            </div> : ["mobilepush"].includes(this.state.channel.toLowerCase()) && _.isEmpty(templates) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+          }
+        </div>
         }
+
       </CapSpin>
 
     </div>);
@@ -1355,6 +1371,33 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (lineLoader !== undefined ? lineLoader : false);
     return isLoading;
   }
+  getChannelTypeIllustrationInfo = (type) => {
+    switch (type) {
+      case 'SMS':
+        return {
+          buttonLabel: <FormattedMessage {...messages.newSMSTemplate} />,
+          onClick: this.createTemplate,
+          illustrationImage: smsIllustration,
+          title: <FormattedMessage {...messages.smsTitleIllustartion} />,
+        };
+      case 'EMAIL':
+        return {
+          buttonLabel: <FormattedMessage {...messages.newEmailTemplate} />,
+          onClick: this.createTemplate,
+          illustrationImage: emailIllustration,
+          title: <FormattedMessage {...messages.emailTitleIllustartion} />,
+        };
+      case 'MOBILEPUSH':
+        return {
+          buttonLabel: <FormattedMessage {...messages.newNotificationTemplate} />,
+          onClick: this.createTemplate,
+          illustrationImage: pushIllustration,
+          title: <FormattedMessage {...messages.pushTitleIllustartion} />,
+        };
+      default:
+        return {};
+    }
+  }
   checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
   renderEmailPreviewModal() {
     const slideboxContent = (
@@ -1391,6 +1434,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     </Modal>);
     return modal;
   };
+
   render() {
     const accountOptions = [];
     const isFullMode = this.isFullMode();
@@ -1565,30 +1609,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       >
       </CardGrid>
     );
-    const filterContent = (
-      <div className="action-container">
-        <CapInput.Search
-          className="search-text"
-          style={{width: '210px'}}
-          placeholder={this.props.intl.formatMessage(messages.searchText)}
-          value={this.state.searchText}
-          onChange={(e) => this.searchTemplate(e.target.value)}
-          disabled={this.checkSearchDisabled()}
-          onClear={() => this.searchTemplate('')}
-        />
-        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-          {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
-          <CapButton
-            type={"primary"}
-            disabled={this.isCreateDisabled()}
-            style={{marginLeft: '8px'}}
-            onClick={this.createTemplate} >
-            { this.props.intl.formatMessage(messages.createNewActionButton) }
-          </CapButton>
-        </div>
-
+    const filterContent = ((!_.isEmpty(this.props.TemplatesList) || this.state.channel.toLowerCase() === 'mobilepush' ) && <div className="action-container">
+      {!_.isEmpty(this.props.TemplatesList) && <CapInput.Search
+        className="search-text"
+        style={{width: '210px'}}
+        placeholder={this.props.intl.formatMessage(messages.searchText)}
+        value={this.state.searchText}
+        onChange={(e) => this.searchTemplate(e.target.value)}
+        disabled={this.checkSearchDisabled()}
+        onClear={() => this.searchTemplate('')}
+        />}
+      <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+        {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
+        {!_.isEmpty(this.props.TemplatesList) && <CapButton
+          type={"primary"}
+          disabled={this.isCreateDisabled()}
+          style={{marginLeft: '8px'}}
+          onClick={this.createTemplate} >
+          { this.props.intl.formatMessage(messages.createNewActionButton) }
+        </CapButton>}
       </div>
-    );
+
+    </div>);
     let htmlPreviewContent = "";
     if (this.state.channel.toLowerCase() === 'ebill') {
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
@@ -1623,10 +1665,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               >
               </CardGrid>
             </Pagination>} */}
-          {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress &&
-            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-              <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesMessage)}</CapHeading>
-            </div>}
         </CapRow>
         <CapRow>
           {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
@@ -1684,6 +1722,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       </div>
     );
   }
+
 }
 
 Templates.propTypes = {

package/v2Containers/Templates/messages.js

@@ -278,5 +278,29 @@ export default defineMessages({
     id: `${scope}.accountConfigError`,
     defaultMessage: 'This account is not configured properly. You can configure it ',
   },
+  "newSMSTemplate": {
+    id: `${scope}.newSMSTemplate`,
+    defaultMessage: 'New SMS template',
+  },
+  "newEmailTemplate": {
+    id: `${scope}.newEmailTemplate`,
+    defaultMessage: 'New email template',
+  },
+  "newNotificationTemplate": {
+    id: `${scope}.newNotificationTemplate`,
+    defaultMessage: 'New notification template',
+  },
+  "pushTitleIllustartion": {
+    id: `${scope}.pushTitleIllustartion`,
+    defaultMessage: 'Create a mobile push notification template',
+  },
+  "emailTitleIllustartion": {
+    id: `${scope}.emailTitleIllustartion`,
+    defaultMessage: 'Create an email template',
+  },
+  "smsTitleIllustartion": {
+    id: `${scope}.smsTitleIllustartion`,
+    defaultMessage: 'Create an SMS template',
+  },
 
 });