@capillarytech/creatives-library 6.0.0 → 6.0.2

package/v2Components/FormBuilder/index.js

@@ -32,6 +32,16 @@ const {TextArea} = CapInput;
 const {CapRadioGroup} = CapRadio;
 // import styled from 'styled-components';
 
+const tagsTypes = {
+  MISSING_TAGS: 'missingTags',
+  UNSUPPORTED_TAGS: 'unsupportedTags',
+};
+const errorMessageForTags = {
+  UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
+  MISSING_TAG_ERROR: 'missingTagsError',
+  GENERIC_VALIDATION_ERROR: 'genericValidationError',
+};
+
 const isUrl = (str) => {
   // eslint-disable-next-line no-useless-escape
   const res = str.match(/(http(s)?:\/\/.)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
@@ -468,15 +478,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
         } else {
           errorData[count]['invalid-tags'] = tagValidationResponse.unsupportedTags;          
-          errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
+          const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, GENERIC_VALIDATION_ERROR } = errorMessageForTags;
+          const { missingTags, unsupportedTags} = tagValidationResponse;
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = missingTags && missingTags.length ? MISSING_TAG_ERROR : ( unsupportedTags && unsupportedTags.length ? UNSUPPORTED_TAG_ERROR : GENERIC_VALIDATION_ERROR);
           isValid = false;
         }
         if(content !== '' && (ifUnicode && !unicodeCheck)) {
           errorData[count][`unicode-validity${index > 1 ? index : ''}`] = true;
           isValid = false;
         } else if (content === '') {
-          
-          errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = errorMessageForTags.GENERIC_VALIDATION_ERROR;
           isValid = false;
         } else {
           errorData[count][`unicode-validity${index > 1 ? index : ''}`] = false;
@@ -2231,6 +2242,61 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
+
+  getMissingOrUnsupportedTagsName = (content = '', type) => {
+    const { MISSING_TAGS, UNSUPPORTED_TAGS} = tagsTypes;
+    const tagValidationResponse = this.validateTags(content);
+    if (type && (type === MISSING_TAGS || type === UNSUPPORTED_TAGS)) {
+      return tagValidationResponse[type].join(', ').toString();
+    }
+    return null;
+  };
+
+  renderTextAreaContent = (styling, columns, val, isVersionEnable, rows, cols, offset = 0) => {
+    const { checkValidation, errorData, currentTab, formData } = this.state;
+    const { MISSING_TAGS, UNSUPPORTED_TAGS } = tagsTypes;
+    const errorType = (isVersionEnable ? errorData[`${currentTab - 1}`][val.id] : errorData[val.id]);
+    const ifError = checkValidation && errorType;
+    const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
+    const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
+    const { formatMessage } = this.props.intl;
+    let errorMessageText = false;
+    switch (errorType) {
+      case MISSING_TAG_ERROR:
+        errorMessageText = formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingOrUnsupportedTagsName(messageContent, MISSING_TAGS)});
+        break;
+      case UNSUPPORTED_TAG_ERROR:
+        errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getMissingOrUnsupportedTagsName(messageContent, UNSUPPORTED_TAGS)});
+        break;
+      case true:
+        errorMessageText = formatMessage(messages.genericTagsValidationError);
+        break;
+      default:
+        break;
+    }
+    if (styling === 'semantic') {
+      columns.push(
+        <CapColumn key="input" span={val.width} offset={offset}>
+          <TextArea
+            id={val.id}
+            placeholder={val.placeholder ? val.placeholder : ''}
+            className={`${ifError ? 'error' : ''}`}
+            errorMessage={errorMessageText}
+            label={val.label}
+            autosize={val.autosize ? val.autosizeParams : false}
+            onChange={(e) => this.updateFormData(e.target.value, val)}
+            style={val.style ? val.style : {}}
+            defaultValue={messageContent || ''}
+            value={messageContent || ""}
+            rows={rows}
+            disabled={val.disabled}
+            cols={cols}
+          />
+        </CapColumn>
+      );
+    }
+  };
+
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -2292,28 +2358,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
           break;
         case "textarea":
-          ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-          const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
-          if (styling === 'semantic') {
-            columns.push(
-              <CapColumn key="input" span={val.width}>
-                <TextArea
-                  id={val.id}
-                  className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                  label={val.label}
-                  autosize={val.autosize ? val.autosizeParams : false}
-                  onChange={(e) => this.updateFormData(e.target.value, val)}
-                  style={val.style ? val.style : {}}
-                  defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={value || ""}
-                  rows={20}
-                  disabled={val.disabled}
-                  cols={20}
-                />
-              </CapColumn>
-            );
-          }
+          const rows = 20;
+          const cols = 20;
+          this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
           break;
         case "contentPreview":
           content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
@@ -2727,29 +2774,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             break;
 
           case "textarea":
-            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            const textValue = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
-            if (styling === 'semantic') {
-              columns.push(
-                <CapColumn key="input" span={val.width} offset={val.offset}>
-                  <TextArea
-                    id={val.id}
-                    placeholder={val.placeholder ? val.placeholder : ''}
-                    disabled={val.disabled}
-                    className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    label={val.label}
-                    autosize={val.autosize ? val.autosizeParams : false}
-                    onChange={(e) => this.updateFormData(e.target.value, val)}
-                    style={val.style ? val.style : {}}
-                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    value={textValue || ""}
-                    rows={10}
-                    cols={2}
-                  />
-                </CapColumn>
-              );
-            }
+            const rows = 10;
+            const cols = 2;
+            this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
             break;
           case "checkbox":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);

package/v2Components/FormBuilder/messages.js

@@ -22,6 +22,18 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.ok',
     defaultMessage: 'Ok',
   },
+  missingTagsValidationError: {
+    id: 'creatives.components.FormBuilder.missingTagsValidationError',
+    defaultMessage: 'Missing tags: {missingTags}. Please add them to this message.',
+  },
+  unsupportedTagsValidationError: {
+    id: 'creatives.components.FormBuilder.unsupportedTagsValidationError',
+    defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
+  genericTagsValidationError: {
+    id: 'creatives.components.FormBuilder.genericTagsValidationError',
+    defaultMessage: 'Please check the message content for unsupported/missing tags',
+  },
   contentNotValidLanguage: {
     id: 'creatives.componentsV2.FormBuilder.contentNotValidLanguage',
     defaultMessage: 'Content is not valid for language:',

package/v2Components/TemplatePreview/assets/images/HomeScreenAndroid.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+function SvgHomeScreenAndroid(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 220 472"
+      fill="currentColor"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <rect width={220} height={472} fill="#101211" rx={26} />
+        <rect width={52} height={5} x={84} y={14} fill="#2E2E2E" rx={2.5} />
+        <rect width={52} height={5} x={84} y={455} fill="#2E2E2E" rx={2.5} />
+        <circle cx={45.5} cy={19.5} r={5.5} fill="#2E2E2E" />
+        <circle cx={65.5} cy={19.5} r={3.5} fill="#2E2E2E" />
+        <rect width={202} height={404} x={9} y={36} fill="#E51FA3" rx={9} />
+        <path
+          fill="#F4F5F7"
+          d="M20.692 152h178.616c2.675 0 3.645.278 4.623.801a5.456 5.456 0 012.268 2.268c.523.978.801 1.948.801 4.623v78.616c0 2.675-.278 3.645-.801 4.623a5.456 5.456 0 01-2.268 2.268c-.978.523-1.948.801-4.623.801H20.692c-2.675 0-3.645-.278-4.623-.801a5.456 5.456 0 01-2.268-2.268c-.523-.978-.801-1.948-.801-4.623v-78.616c0-2.675.278-3.645.801-4.623a5.456 5.456 0 012.268-2.268c.978-.523 1.948-.801 4.623-.801z"
+        />
+        <text fill="#5E5E5E" fontFamily="Roboto-Regular, Roboto" fontSize={10}>
+          <tspan x={25} y={169}>
+            {"Messages"}
+          </tspan>
+        </text>
+        <text fill="#5E5E5E" fontFamily="Roboto-Regular, Roboto" fontSize={10}>
+          <tspan x={85.146} y={169}>
+            {"now"}
+          </tspan>
+        </text>
+        <circle cx={78} cy={167} r={1} fill="#5E5E5E" fillRule="nonzero" />
+        <path
+          fill="#5E5E5E"
+          d="M116.725 163.048l-3.301 3.294-3.301-3.294-1.014 1.014 4.315 4.315 4.315-4.315z"
+        />
+        <path
+          fill="#FFF"
+          fillOpacity={0.6}
+          d="M113.75 419.333h-.625v-1.238c0-1.708-1.4-3.095-3.125-3.095s-3.125 1.387-3.125 3.095v1.238h-.625c-.688 0-1.25.557-1.25 1.238v6.19c0 .682.563 1.239 1.25 1.239h7.5c.688 0 1.25-.557 1.25-1.238v-6.19c0-.682-.563-1.239-1.25-1.239zM110 425c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2-6h-4v-1.176c0-1.006.897-1.824 2-1.824s2 .818 2 1.824V419z"
+        />
+        <path
+          fill="#FFF"
+          fillRule="nonzero"
+          d="M86.325 111.884l6.192-8.676-.072-.072c-.84.576-1.908.864-3.204.864-1.248 0-2.472-.348-3.672-1.044a8.22 8.22 0 01-2.916-2.862c-.744-1.212-1.116-2.562-1.116-4.05 0-1.44.378-2.79 1.134-4.05a8.74 8.74 0 013.06-3.042 8.023 8.023 0 014.194-1.152c1.632 0 3.09.396 4.374 1.188 1.284.792 2.28 1.818 2.988 3.078.708 1.26 1.062 2.586 1.062 3.978 0 1.32-.27 2.586-.81 3.798-.54 1.212-1.314 2.562-2.322 4.05l-6.444 9.684-2.448-1.692zm3.6-10.62a5.36 5.36 0 002.682-.702 5.254 5.254 0 001.962-1.908c.48-.804.72-1.686.72-2.646 0-.984-.24-1.878-.72-2.682s-1.134-1.44-1.962-1.908c-.828-.468-1.722-.702-2.682-.702s-1.848.234-2.664.702a5.294 5.294 0 00-1.944 1.908c-.48.804-.72 1.698-.72 2.682 0 .96.24 1.842.72 2.646a5.294 5.294 0 001.944 1.908 5.263 5.263 0 002.664.702zm13.806-2.232c-.648 0-1.194-.222-1.638-.666-.444-.444-.666-.99-.666-1.638 0-.648.222-1.194.666-1.638.444-.444.99-.666 1.638-.666.624 0 1.158.222 1.602.666.444.444.666.99.666 1.638 0 .648-.222 1.194-.666 1.638a2.184 2.184 0 01-1.602.666zm0 14.184c-.648 0-1.194-.222-1.638-.666-.444-.444-.666-.99-.666-1.638 0-.624.222-1.158.666-1.602.444-.444.99-.666 1.638-.666.624 0 1.158.222 1.602.666.444.444.666.978.666 1.602 0 .648-.222 1.194-.666 1.638a2.184 2.184 0 01-1.602.666zm17.191-5.508h-11.808v-2.304l11.52-17.028h3.312v16.452h3.168v2.88h-3.168V113h-3.024v-5.292zm0-2.88V92.84h-.144l-8.172 11.988h8.316zm14.527-12.168l-4.32 3.096-1.584-2.34 7.02-5.04h1.944V113h-3.06V92.66zm-45.272 41.5c-.56 0-1.074-.17-1.54-.51-.467-.34-.787-.817-.96-1.43l.81-.33c.113.427.323.777.63 1.05.306.273.666.41 1.08.41.413 0 .763-.112 1.05-.335.286-.223.43-.528.43-.915 0-.333-.122-.608-.365-.825-.244-.217-.642-.418-1.195-.605l-.45-.16c-.507-.18-.92-.417-1.24-.71-.32-.293-.48-.7-.48-1.22 0-.34.093-.655.28-.945.186-.29.446-.522.78-.695.333-.173.706-.26 1.12-.26.413 0 .773.077 1.08.23.306.153.551.34.735.56.183.22.311.437.385.65l-.8.34c-.067-.247-.219-.47-.455-.67-.237-.2-.549-.3-.935-.3-.367 0-.68.103-.94.31a.958.958 0 00-.39.78c0 .28.11.508.33.685.22.177.553.342 1 .495l.47.16c.606.22 1.08.495 1.42.825.34.33.51.778.51 1.345 0 .46-.119.847-.355 1.16a2.1 2.1 0 01-.895.69c-.36.147-.73.22-1.11.22zm4.995 0c-.614 0-1.082-.18-1.405-.54-.324-.36-.485-.863-.485-1.51v-3.21h.85v3.08c0 .487.11.843.33 1.07.22.227.516.34.89.34.286 0 .541-.077.765-.23.223-.153.396-.353.52-.6.123-.247.185-.507.185-.78v-2.88h.85v5.1h-.81v-.74h-.04c-.14.253-.364.467-.67.64-.307.173-.634.26-.98.26zm3.615-5.26h.81v.75h.04c.14-.253.363-.468.67-.645.307-.177.633-.265.98-.265.613 0 1.082.178 1.405.535.323.357.485.842.485 1.455V134h-.85v-3.14c0-.473-.113-.817-.34-1.03-.227-.213-.537-.32-.93-.32-.273 0-.518.077-.735.23-.217.153-.385.355-.505.605s-.18.512-.18.785V134h-.85v-5.1zm8.88 5.26c-.526 0-.986-.145-1.38-.435-.393-.29-.67-.698-.83-1.225l.8-.33c.24.787.71 1.18 1.41 1.18.394 0 .709-.137.945-.41.237-.273.355-.633.355-1.08v-5.02h.85v4.95c0 .5-.091.928-.275 1.285a1.894 1.894 0 01-.76.81 2.224 2.224 0 01-1.115.275zm5.065 0c-.613 0-1.081-.18-1.405-.54-.323-.36-.485-.863-.485-1.51v-3.21h.85v3.08c0 .487.11.843.33 1.07.22.227.517.34.89.34.287 0 .542-.077.765-.23a1.55 1.55 0 00.52-.6c.124-.247.185-.507.185-.78v-2.88h.85v5.1h-.81v-.74h-.04c-.14.253-.363.467-.67.64-.306.173-.633.26-.98.26zm3.616-7.32h.85V134h-.85v-7.16zm2.525 7.22a.62.62 0 01-.455-.185.615.615 0 01-.185-.455c0-.173.061-.322.185-.445a.62.62 0 01.455-.185.61.61 0 01.445.185.608.608 0 01.185.445.62.62 0 01-.185.455.61.61 0 01-.445.185zm3.67-.91c.207-.207.617-.622 1.23-1.245a67.293 67.293 0 001.28-1.325c.34-.367.57-.653.69-.86.12-.207.18-.457.18-.75 0-.2-.052-.388-.155-.565a1.16 1.16 0 00-.45-.43 1.424 1.424 0 00-.705-.165c-.36 0-.648.105-.865.315-.217.21-.358.438-.425.685l-.78-.31a2.246 2.246 0 011.06-1.255c.293-.163.64-.245 1.04-.245.42 0 .792.09 1.115.27.323.18.575.42.755.72.18.3.27.623.27.97 0 .7-.367 1.423-1.1 2.17l-2.05 2.06h3.23v.81h-4.32v-.85zm6.435.54l1.72-2.41-.02-.02c-.233.16-.53.24-.89.24-.346 0-.686-.097-1.02-.29a2.283 2.283 0 01-.81-.795 2.115 2.115 0 01-.31-1.125c0-.4.105-.775.315-1.125.21-.35.494-.632.85-.845.357-.213.745-.32 1.165-.32.454 0 .859.11 1.215.33.357.22.634.505.83.855.197.35.295.718.295 1.105 0 .367-.075.718-.225 1.055-.15.337-.365.712-.645 1.125l-1.79 2.69-.68-.47zm1-2.95c.267 0 .515-.065.745-.195.23-.13.412-.307.545-.53a1.4 1.4 0 00.2-.735 1.42 1.42 0 00-.2-.745 1.46 1.46 0 00-.545-.53 1.488 1.488 0 00-.745-.195 1.483 1.483 0 00-1.28.725c-.133.223-.2.472-.2.745 0 .267.067.512.2.735a1.483 1.483 0 001.28.725z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgHomeScreenAndroid;

package/v2Components/TemplatePreview/assets/images/SmsMobileAndroid.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+function SvgSmsMobileAndroid(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 220 472"
+      fill="currentColor"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <rect width={220} height={472} fill="#101211" rx={26} />
+        <rect width={202} height={404} x={9} y={36} fill="#F4F5F7" rx={9} />
+        <rect width={182} height={136} x={19} y={92} fill="#F4F5F7" rx={17.5} />
+        <path fill="#CF0E8F" d="M18 36h184a9 9 0 019 9v6H9v-6a9 9 0 019-9z" />
+        <path
+          fill="#FFF"
+          d="M9 404h202v28.5a7.5 7.5 0 01-7.5 7.5h-187a7.5 7.5 0 01-7.5-7.5V404z"
+        />
+        <path fill="#E51FA3" d="M9 82h202V51H9z" />
+        <rect width={52} height={5} x={84} y={14} fill="#2E2E2E" rx={2.5} />
+        <rect width={52} height={5} x={84} y={455} fill="#2E2E2E" rx={2.5} />
+        <circle cx={45.5} cy={19.5} r={5.5} fill="#2E2E2E" />
+        <circle cx={65.5} cy={19.5} r={3.5} fill="#2E2E2E" />
+        <text
+          fill="#FFF"
+          fontFamily="Roboto-Regular, Roboto"
+          fontSize={12}
+          letterSpacing={0.175}
+        >
+          <tspan x={49.5} y={71}>
+            {"Sender ID"}
+          </tspan>
+        </text>
+        <circle cx={199} cy={63} r={1} fill="#FFF" />
+        <circle cx={199} cy={70} r={1} fill="#FFF" />
+        <circle cx={199} cy={66.5} r={1} fill="#FFF" />
+        <path
+          fill="#FFF"
+          d="M28 66a.505.505 0 01-.505.505h-5.556l2.42 2.42a.506.506 0 11-.718.716l-2.934-2.934a1 1 0 010-1.414l2.934-2.934a.508.508 0 01.718.717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"
+        />
+        <path
+          fill="#B3BAC5"
+          d="M189.006 427.286L201 422.143 189.006 417l-.006 4 8.571 1.143-8.571 1.143z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgSmsMobileAndroid;

package/v2Components/TemplatePreview/assets/images/UserIcon.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+function SvgUserIcon(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 22 22"
+      fill="currentColor"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M11.069.724A10.342 10.342 0 00.724 11.07c0 5.715 4.63 10.345 10.345 10.345 5.715 0 10.345-4.63 10.345-10.345 0-5.716-4.63-10.345-10.345-10.345zm0 3.104a3.103 3.103 0 11.002 6.209 3.103 3.103 0 01-.002-6.21zm0 14.69a7.449 7.449 0 01-6.207-3.332C4.888 13.133 9.005 12 11.07 12s6.176 1.133 6.207 3.186a7.449 7.449 0 01-6.207 3.331z"
+          fill="#3F51B5"
+          fillRule="nonzero"
+        />
+        <path d="M-1-1h25v25H-1z" />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgUserIcon;

package/v2Components/TemplatePreview/assets/images/WechatHomeScreenAndroid.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+
+function SvgWechatHomeScreenAndroid(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 221 473"
+      fill="currentColor"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <rect width={220} height={473} fill="#101211" rx={26} />
+        <rect
+          width={52}
+          height={5.011}
+          x={84}
+          y={14.03}
+          fill="#2E2E2E"
+          rx={2.5}
+        />
+        <rect
+          width={52}
+          height={5.011}
+          x={84}
+          y={455.964}
+          fill="#2E2E2E"
+          rx={2.5}
+        />
+        <ellipse cx={45.5} cy={19.541} fill="#2E2E2E" rx={5.5} ry={5.512} />
+        <ellipse cx={65.5} cy={19.541} fill="#2E2E2E" rx={3.5} ry={3.507} />
+        <rect
+          width={202}
+          height={404.856}
+          x={9}
+          y={36.076}
+          fill="#E51FA3"
+          rx={9}
+        />
+        <path
+          fill="#FFF"
+          d="M20.692 152.322h178.616c2.675 0 3.645.279 4.623.801a5.456 5.456 0 012.268 2.268c.523.978.801 1.948.801 4.623v78.816c0 2.674-.278 3.644-.801 4.622a5.45 5.45 0 01-2.268 2.268c-.978.523-1.948.801-4.623.801H20.692c-2.675 0-3.645-.278-4.623-.801a5.456 5.456 0 01-2.268-2.268c-.523-.978-.801-1.948-.801-4.622v-78.816c0-2.675.278-3.645.801-4.623a5.456 5.456 0 012.268-2.268c.978-.522 1.948-.801 4.623-.801z"
+        />
+        <text fill="#5E5E5E" fontFamily="Roboto-Regular, Roboto" fontSize={10}>
+          <tspan x={25} y={169.351}>
+            {"Wechat"}
+          </tspan>
+        </text>
+        <text fill="#5E5E5E" fontFamily="Roboto-Regular, Roboto" fontSize={10}>
+          <tspan x={73.146} y={169.351}>
+            {"now"}
+          </tspan>
+        </text>
+        <circle cx={66} cy={167.354} r={1} fill="#5E5E5E" fillRule="nonzero" />
+        <path
+          fill="#5E5E5E"
+          d="M104.725 163.393l-3.301 3.301-3.301-3.301-1.014 1.016 4.315 4.325 4.315-4.325z"
+        />
+        <path
+          fill="#FFF"
+          fillOpacity={0.6}
+          d="M113.75 420.222h-.625v-1.241c0-1.712-1.4-3.102-3.125-3.102s-3.125 1.39-3.125 3.102v1.24h-.625c-.688 0-1.25.56-1.25 1.241v6.204c0 .682.563 1.24 1.25 1.24h7.5c.688 0 1.25-.558 1.25-1.24v-6.204c0-.682-.563-1.24-1.25-1.24zM110 425.9c-.55 0-1-.45-1-1.002 0-.55.45-1.002 1-1.002s1 .451 1 1.002c0 .551-.45 1.002-1 1.002zm2-6.012h-4v-1.18c0-1.007.897-1.827 2-1.827s2 .82 2 1.828v1.179z"
+        />
+        <path
+          fill="#FFF"
+          fillRule="nonzero"
+          d="M86.325 112.121l6.192-8.694-.072-.072c-.84.577-1.908.865-3.204.865-1.248 0-2.472-.348-3.672-1.046a8.221 8.221 0 01-2.916-2.868c-.744-1.215-1.116-2.567-1.116-4.059 0-1.443.378-2.795 1.134-4.058.756-1.263 1.776-2.279 3.06-3.049s2.682-1.154 4.194-1.154c1.632 0 3.09.397 4.374 1.19 1.284.794 2.28 1.822 2.988 3.085.708 1.263 1.062 2.592 1.062 3.986 0 1.323-.27 2.592-.81 3.807-.54 1.214-1.314 2.567-2.322 4.058l-6.444 9.705-2.448-1.696zm3.6-10.642c.96 0 1.854-.235 2.682-.704a5.257 5.257 0 001.962-1.912c.48-.806.72-1.69.72-2.652 0-.986-.24-1.882-.72-2.687a5.257 5.257 0 00-1.962-1.912c-.828-.47-1.722-.704-2.682-.704s-1.848.235-2.664.704a5.297 5.297 0 00-1.944 1.912c-.48.805-.72 1.701-.72 2.687 0 .962.24 1.846.72 2.652s1.128 1.443 1.944 1.912a5.254 5.254 0 002.664.704zm13.806-2.237c-.648 0-1.194-.223-1.638-.668-.444-.445-.666-.992-.666-1.641 0-.65.222-1.197.666-1.642.444-.444.99-.667 1.638-.667.624 0 1.158.223 1.602.667.444.445.666.993.666 1.642 0 .65-.222 1.196-.666 1.641a2.182 2.182 0 01-1.602.668zm0 14.214c-.648 0-1.194-.223-1.638-.668-.444-.444-.666-.992-.666-1.641 0-.625.222-1.16.666-1.605.444-.445.99-.668 1.638-.668.624 0 1.158.223 1.602.668.444.445.666.98.666 1.605 0 .65-.222 1.197-.666 1.641a2.182 2.182 0 01-1.602.668zm17.191-5.52h-11.808v-2.309l11.52-17.064h3.312v16.487h3.168v2.886h-3.168v5.303h-3.024v-5.303zm0-2.886V93.037h-.144l-8.172 12.013h8.316zm14.527-12.194l-4.32 3.103-1.584-2.345 7.02-5.05h1.944v24.675h-3.06V92.856zm-45.272 41.588c-.56 0-1.074-.17-1.54-.51-.467-.342-.787-.82-.96-1.434l.81-.33c.113.427.323.778.63 1.052.306.274.666.41 1.08.41.413 0 .763-.111 1.05-.335.286-.224.43-.53.43-.917 0-.334-.122-.61-.365-.827-.244-.217-.642-.42-1.195-.606l-.45-.16c-.507-.18-.92-.418-1.24-.712-.32-.294-.48-.701-.48-1.223 0-.34.093-.656.28-.947.186-.29.446-.522.78-.696a2.38 2.38 0 011.12-.26c.413 0 .773.076 1.08.23.306.154.551.34.735.561.183.22.311.438.385.651l-.8.341c-.067-.247-.219-.47-.455-.671-.237-.2-.549-.3-.935-.3-.367 0-.68.103-.94.31a.958.958 0 00-.39.781c0 .281.11.51.33.687.22.177.553.342 1 .496l.47.16c.606.22 1.08.496 1.42.827.34.33.51.78.51 1.348 0 .46-.119.848-.355 1.162a2.096 2.096 0 01-.895.692c-.36.147-.73.22-1.11.22zm4.995 0c-.614 0-1.082-.18-1.405-.54-.324-.362-.485-.866-.485-1.514v-3.217h.85v3.087c0 .487.11.845.33 1.072.22.227.516.34.89.34.286 0 .541-.076.765-.23.223-.154.396-.354.52-.601.123-.247.185-.508.185-.782v-2.886h.85v5.11h-.81v-.74h-.04c-.14.253-.364.467-.67.64a1.958 1.958 0 01-.98.261zm3.615-5.27h.81v.75h.04c.14-.253.363-.469.67-.646.307-.177.633-.265.98-.265.613 0 1.082.178 1.405.536.323.357.485.843.485 1.458v3.277h-.85v-3.147c0-.474-.113-.818-.34-1.032-.227-.214-.537-.32-.93-.32-.273 0-.518.076-.735.23-.217.154-.385.356-.505.606s-.18.513-.18.787v2.876h-.85v-5.11zm8.88 5.27a2.26 2.26 0 01-1.38-.436c-.393-.29-.67-.7-.83-1.227l.8-.331c.24.788.71 1.183 1.41 1.183.394 0 .709-.137.945-.411.237-.274.355-.635.355-1.083v-5.03h.85v4.96c0 .501-.091.93-.275 1.288a1.905 1.905 0 01-.76.812 2.224 2.224 0 01-1.115.275zm5.065 0c-.613 0-1.081-.18-1.405-.54-.323-.362-.485-.866-.485-1.514v-3.217h.85v3.087c0 .487.11.845.33 1.072.22.227.517.34.89.34.287 0 .542-.076.765-.23a1.56 1.56 0 00.52-.601 1.72 1.72 0 00.185-.782v-2.886h.85v5.11h-.81v-.74h-.04c-.14.253-.363.467-.67.64a1.952 1.952 0 01-.98.261zm3.616-7.335h.85v7.175h-.85v-7.175zm2.525 7.235a.62.62 0 01-.455-.185.62.62 0 01-.185-.456c0-.174.061-.323.185-.446a.616.616 0 01.455-.186c.173 0 .321.062.445.186a.609.609 0 01.185.446c0 .18-.062.332-.185.456a.61.61 0 01-.445.185zm3.67-.912c.207-.207.617-.623 1.23-1.248a68.687 68.687 0 001.28-1.327c.34-.368.57-.655.69-.862.12-.207.18-.458.18-.752 0-.2-.052-.389-.155-.566a1.16 1.16 0 00-.45-.43 1.414 1.414 0 00-.705-.166c-.36 0-.648.105-.865.315-.217.21-.358.44-.425.687l-.78-.31a2.23 2.23 0 01.36-.667c.173-.23.407-.428.7-.591.293-.164.64-.246 1.04-.246.42 0 .792.09 1.115.27.323.181.575.422.755.722.18.3.27.625.27.972 0 .702-.367 1.427-1.1 2.175l-2.05 2.064h3.23v.812h-4.32v-.852zm6.435.541l1.72-2.415-.02-.02c-.233.16-.53.24-.89.24-.346 0-.686-.096-1.02-.29a2.297 2.297 0 01-.81-.797 2.12 2.12 0 01-.31-1.127c0-.4.105-.777.315-1.127.21-.351.494-.633.85-.847.357-.214.745-.32 1.165-.32.454 0 .859.11 1.215.33.357.22.634.506.83.857.197.35.295.72.295 1.107 0 .367-.075.72-.225 1.057-.15.338-.365.713-.645 1.128l-1.79 2.695-.68-.47zm1-2.956c.267 0 .515-.065.745-.195a1.457 1.457 0 000-2.545 1.479 1.479 0 00-.745-.196 1.486 1.486 0 00-1.28.726c-.133.224-.2.473-.2.747 0 .267.067.513.2.736a1.489 1.489 0 001.28.727z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgWechatHomeScreenAndroid;

package/v2Components/TemplatePreview/assets/images/WechatMobileAndroid.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+function SvgWechatMobileAndroid(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 220 472"
+      fill="currentColor"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <rect width={220} height={472} fill="#101211" rx={26} />
+        <rect width={202} height={404} x={9} y={36} fill="#F4F5F7" rx={9} />
+        <rect
+          width={182}
+          height={136}
+          x={19}
+          y={112}
+          fill="#F4F5F7"
+          rx={17.5}
+        />
+        <path
+          fill="#F4F5F7"
+          d="M18 36h184a9 9 0 019 9v6H9v-6a9 9 0 019-9zM9 82h202V51H9z"
+        />
+        <rect width={52} height={5} x={84} y={14} fill="#2E2E2E" rx={2.5} />
+        <rect width={52} height={5} x={84} y={455} fill="#2E2E2E" rx={2.5} />
+        <circle cx={45.5} cy={19.5} r={5.5} fill="#2E2E2E" />
+        <circle cx={65.5} cy={19.5} r={3.5} fill="#2E2E2E" />
+        <text
+          fill="#000"
+          fontFamily="Roboto-Regular, Roboto"
+          fontSize={12}
+          letterSpacing={0.175}
+        >
+          <tspan x={49.5} y={71}>
+            {"Muji India"}
+          </tspan>
+        </text>
+        <circle cx={199} cy={63} r={1} fill="#000" />
+        <circle cx={199} cy={70} r={1} fill="#000" />
+        <circle cx={199} cy={66.5} r={1} fill="#000" />
+        <path
+          fill="#000"
+          d="M28 66a.505.505 0 01-.505.505h-5.556l2.42 2.42a.506.506 0 11-.718.716l-2.934-2.934a1 1 0 010-1.414l2.934-2.934a.508.508 0 01.718.717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgWechatMobileAndroid;

package/v2Containers/Assets/images/CalltaskIllustration.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+
+function SvgCalltaskIllustration(props) {
+  return (
+    <svg
+      id="calltaskIllustration_svg__Layer_1"
+      data-name="Layer 1"
+      viewBox="0 0 152 152"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      {...props}
+    >
+      <defs>
+        <style>
+          {
+            ".calltaskIllustration_svg__cls-1{fill:#fec52e}.calltaskIllustration_svg__cls-2{fill:#fff}.calltaskIllustration_svg__cls-3{fill:#103344}"
+          }
+        </style>
+      </defs>
+      <path
+        className="calltaskIllustration_svg__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.83 0 0 6.98-7.67 2.44-11.69zM123 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
+        className="calltaskIllustration_svg__cls-1"
+        cx={55.98}
+        cy={74.76}
+        r={2.01}
+      />
+      <path
+        className="calltaskIllustration_svg__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 00-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 01.57-.13 1.66 1.66 0 011.44.86l.23.44a.54.54 0 001 0l.5-.89a1.6 1.6 0 012.75-.1l.72 1.09a.51.51 0 00.47.24.54.54 0 00.46-.28l.29-.54a1.58 1.58 0 011.3-.82 1.6 1.6 0 011.38.78l.69 1.17a.5.5 0 00.49.26.51.51 0 00.46-.3l.46-.93a1.6 1.6 0 011.44-.9 1.61 1.61 0 011.44.93l.4.87a.53.53 0 00.93.09l.34-.49a1.61 1.61 0 012.92.71l.13 1a.54.54 0 00.68.45l4.76-1.38.3 1-4.76 1.37a1.41 1.41 0 01-.45.07 1.57 1.57 0 01-.88-.27 1.61 1.61 0 01-.71-1.14l-.13-1a.54.54 0 00-1-.24l-.34.49a1.55 1.55 0 01-1.46.68 1.6 1.6 0 01-1.32-.92l-.4-.88a.54.54 0 00-.49-.31.53.53 0 00-.49.3l-.46.93a1.6 1.6 0 01-1.38.9 1.58 1.58 0 01-1.44-.78l-.7-1.17a.53.53 0 00-.48-.26.52.52 0 00-.46.28l-.29.54a1.61 1.61 0 01-2.76.12l-.72-1.1a.59.59 0 00-.47-.24.57.57 0 00-.46.28l-.49.89a1.62 1.62 0 01-1.41.83 1.61 1.61 0 01-1.4-.86l-.23-.44a.52.52 0 00-.49-.29.74.74 0 00-.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 0124.68-13.81 34.41 34.41 0 008.59-5.54c7-6.3 16.18-19 5.91-37.99z"
+      />
+      <path
+        className="calltaskIllustration_svg__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 0022.47-3.62c4.12-2.18 8.48-4.77 12.94-7.6-.29-2.57-1.46-9.64-4.89-15-3.73-5.8-1.03-14.01-1.03-14.01z"
+      />
+      <circle
+        className="calltaskIllustration_svg__cls-3"
+        cx={51.54}
+        cy={85.49}
+        r={0.93}
+      />
+      <circle
+        className="calltaskIllustration_svg__cls-3"
+        cx={60.74}
+        cy={81.25}
+        r={0.93}
+      />
+      <path
+        className="calltaskIllustration_svg__cls-3"
+        d="M59 91c.7.17 2.4-.33 2.6-1.06s-.11-.39.35-1A2.06 2.06 0 0059 86.58 4.15 4.15 0 0056.73 88c-.39.7-.07 2.72 1 2.56.66-.12.96.44 1.27.44z"
+      />
+      <path
+        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 01-.68-.45l-.13-1a1.61 1.61 0 00-2.92-.71l-.34.49a.53.53 0 01-.93-.09l-.4-.87a1.61 1.61 0 00-1.44-.93 1.6 1.6 0 00-1.44.9l-.46.93a.51.51 0 01-.46.3.5.5 0 01-.49-.26l-.69-1.17a1.6 1.6 0 00-1.44-.79 1.58 1.58 0 00-1.38.84l-.29.54a.54.54 0 01-.46.28.51.51 0 01-.47-.24l-.72-1.09a1.6 1.6 0 00-2.75.1l-.5.89a.54.54 0 01-1 0l-.23-.44a1.66 1.66 0 00-1.44-.86 1.4 1.4 0 00-.57.13c.14.33.29.66.44 1a.74.74 0 01.14 0 .52.52 0 01.49.29l.23.44a1.61 1.61 0 001.4.86 1.62 1.62 0 001.41-.83l.49-.89a.57.57 0 01.46-.28.59.59 0 01.47.24l.72 1.1a1.61 1.61 0 002.76-.12l.29-.54a.52.52 0 01.46-.28.53.53 0 01.48.26l.7 1.17a1.58 1.58 0 001.44.78 1.6 1.6 0 001.38-.9l.46-.93a.53.53 0 01.49-.3.54.54 0 01.49.31l.4.88a1.6 1.6 0 001.32.92 1.55 1.55 0 001.46-.68l.34-.49a.54.54 0 011 .24l.13 1a1.61 1.61 0 00.71 1.14 1.57 1.57 0 00.88.27 1.41 1.41 0 00.45-.07l2.75-.79a8.05 8.05 0 003.29 2.81s3.56.13 9-5.31c0 0 2.36-2-.94-5.22-4.03-4.12 23.82-12.2 23.94-7.98a10.79 10.79 0 00.84 4.37 2.27 2.27 0 001.52 1.28c2.37.6 9 1.94 11.67-.93 3.35-3.69-2.54-9.36-5.3-10.24z"
+        fill="#ea4cb5"
+      />
+      <path
+        d="M79.25 101.14a2.63 2.63 0 01-1.78-1.23 9.54 9.54 0 01-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 002.19 1.51s3.56.13 9-5.31c0 0 2.36-2-.94-5.22-4.1-4.05 23.75-12.13 23.87-7.91a10.79 10.79 0 00.84 4.37 2.26 2.26 0 001.52 1.25c2.37.59 9 1.93 11.67-.94.09-.11.16-.22.24-.33-3.56.65-8.15-.16-10.14-.59z"
+        fill="#e51fa3"
+      />
+      <path
+        className="calltaskIllustration_svg__cls-2"
+        d="M56.15 93.18a3 3 0 004 1.14c.24-.14.72-.58.9-.67 1-.59.79.08 2-.39a3.26 3.26 0 002-2.9c.23-1.43-8.9 2.82-8.9 2.82z"
+      />
+    </svg>
+  );
+}
+
+export default SvgCalltaskIllustration;

package/v2Containers/Assets/images/EmailIllustration.js

@@ -0,0 +1,87 @@
+import * as React from "react";
+
+function SvgEmailIllustration(props) {
+  return (
+    <svg
+      id="emailIllustration_svg__Layer_1"
+      data-name="Layer 1"
+      viewBox="0 0 152 152"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      {...props}
+    >
+      <defs>
+        <clipPath id="emailIllustration_svg__clip-path">
+          <rect
+            x={96.29}
+            y={58.37}
+            width={42.25}
+            height={31.24}
+            rx={2.83}
+            transform="rotate(25.46 117.417 73.99)"
+            fill="none"
+          />
+        </clipPath>
+        <style>
+          {
+            ".emailIllustration_svg__cls-2{fill:#fec52e}.emailIllustration_svg__cls-6{fill:#ebecf0}.emailIllustration_svg__cls-9{fill:#a4172a}.emailIllustration_svg__cls-10{fill:#2546b3}"
+          }
+        </style>
+      </defs>
+      <path
+        className="emailIllustration_svg__cls-2"
+        d="M84.75 135s1.23 3 4.14.77-.45-4.08-1.65-4.47-4.24-.1-2.49 3.7zM67.48 136.08s10.14 1.14 10.73-4.79c.46-4.58-10.32-9.94-14.87-7.37-3.29 1.84-5.22 10.49 4.14 12.16zM19.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 0125.24 11.71 34 34 0 009.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 00-11.42-8.09c-10.69-5.93-21.18-8-31-7.18-20.29 1.63-37.89 15.25-49.33 31.91z"
+      />
+      <path
+        d="M50.21 50.7c-4.7-.33-9.42-4.44-18.1 5.14a.76.76 0 00.14 1.16s-1.49 1.67 1.89 4a27.74 27.74 0 005.7 3.21s2.16 1.88.16 3.47S19.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.15 1.64-7.12-24.7-3.49-31.58-3.98z"
+        fill="#fff"
+      />
+      <circle cx={39.05} cy={54.39} r={0.58} fill="#103344" />
+      <g clipPath="url(#emailIllustration_svg__clip-path)">
+        <path
+          className="emailIllustration_svg__cls-6"
+          d="M142 71.77l-11.2 23a2.68 2.68 0 01-1.64 1.39 2.63 2.63 0 01-1.96-.16l-33-16.11a2.69 2.69 0 01-1.24-3.58l11.21-23a2.68 2.68 0 011.46-1.31h.12a2.7 2.7 0 012 .15l33 16.05a2.63 2.63 0 011.32 1.43.14.14 0 010 .06 2.65 2.65 0 01-.07 2.08z"
+        />
+        <path
+          d="M129.14 96.15a2.63 2.63 0 01-1.94-.15l-33-16.11a2.66 2.66 0 01-1.32-1.43l25.42-6.06z"
+          fill="#c7ccd3"
+        />
+        <path
+          d="M142.07 69.63l-25.51 6.22-10.81-23.92a2.7 2.7 0 012 .15l33 16.12a2.63 2.63 0 011.32 1.43z"
+          fill="#f4f5f7"
+        />
+        <path
+          className="emailIllustration_svg__cls-6"
+          d="M129.82 97.03l-.19.1.11.06.08-.16z"
+        />
+        <path
+          className="emailIllustration_svg__cls-9"
+          d="M105.26 55.31l-3.09 1.64-1.56 3.24 3.09-1.64 1.56-3.24zM109.54 55.47l2.44-1.29-2.4-1.15-2.44 1.29 2.4 1.15zM137.75 68.98l2.43-1.29-2.4-1.15-2.44 1.29 2.41 1.15zM118.8 59.9l2.43-1.28-2.4-1.15-2.43 1.28 2.4 1.15zM99.27 67.8l-3.09 1.63-1.55 3.24 3.09-1.63 1.55-3.24zM128.27 64.44l2.44-1.29-2.4-1.15-2.44 1.29 2.4 1.15zM115.78 87.71l-2.77 1.46 2.41 1.15 2.76-1.46-2.4-1.15zM129.62 92.36l3.26-1.72 1.55-3.24-3.26 1.73-1.55 3.23zM137.29 76.34l-1.55 3.24 3.26-1.72 1.56-3.24-3.27 1.72zM106.31 83.17l-2.77 1.47 2.4 1.14 2.77-1.46-2.4-1.15zM125.26 92.25l-2.77 1.46 2.4 1.15 2.77-1.46-2.4-1.15zM96.83 78.63l-2.76 1.46 2.4 1.16 2.76-1.47-2.4-1.15z"
+        />
+        <path
+          className="emailIllustration_svg__cls-10"
+          d="M123.53 62.17l2.44-1.29-2.4-1.15-2.44 1.29 2.4 1.15zM114.06 57.63l2.44-1.28-2.41-1.15-2.43 1.28 2.4 1.15zM105.08 50.87l-1.54 3.22 3.92-2.07-2.38-1.15zM140.25 70.18l-1.45 3.01 3.26-1.72 1.13-2.34-.67-.32-2.44 1.29.17.08zM135.94 84.25l1.55-3.24-3.26 1.72-1.55 3.24 3.26-1.72zM133.01 66.71l2.43-1.29-2.4-1.15-2.43 1.29 2.4 1.15zM101.57 80.9l-2.77 1.46 2.4 1.16 2.77-1.47-2.4-1.15zM120.52 89.98l-2.77 1.46 2.4 1.15 2.77-1.46-2.4-1.15zM131.37 93.79l-4.15 2.19 2.41 1.15.11.06 1.63-3.4zM111.05 85.44l-2.77 1.46 2.4 1.15 2.77-1.46-2.4-1.15zM102.34 61.41l-3.09 1.63-1.56 3.24 3.09-1.63 1.56-3.24zM96.21 74.19l-3.09 1.63-1.49 3.11.1.05 2.93-1.55 1.55-3.24z"
+        />
+        <path
+          className="emailIllustration_svg__cls-6"
+          d="M106.01 53.84l1.07.51 2.5-1.32-2.12-1.01-3.92 2.07-1.37 2.86 3.15-1.67.69-1.44zM111.6 56.52l2.49-1.32-2.11-1.02-2.5 1.32 2.12 1.02zM116.33 58.78l2.5-1.31-2.33-1.12-2.5 1.31 2.33 1.12zM103.77 58.52l-3.16 1.67-1.36 2.85 3.15-1.67 1.37-2.85zM100.85 64.61l-3.16 1.67-1.51 3.15 3.16-1.67 1.51-3.15zM125.81 63.32l2.5-1.32-2.34-1.12-2.5 1.32 2.34 1.12zM135.28 67.86l2.5-1.32-2.34-1.12-2.49 1.32 2.33 1.12zM140.02 70.13l2.5-1.32-2.34-1.12-2.5 1.32 2.34 1.12zM97.79 71l-3.16 1.67-1.51 3.15 3.16-1.67L97.79 71zM121.07 61.05l2.5-1.32-2.34-1.11-2.49 1.32 2.33 1.11zM130.55 65.59l2.49-1.32-2.33-1.12-2.5 1.32 2.34 1.12zM128.79 93.95l-1.14-.55-2.76 1.46 2.33 1.12 4.15-2.19 1.51-3.15-3.35 1.77-.74 1.54zM131.08 89.17l3.35-1.77 1.51-3.15-3.35 1.77-1.51 3.15zM138.71 73.24l-1.51 3.15 3.36-1.77 1.5-3.15-3.35 1.77zM122.92 91.13l-2.77 1.46 2.34 1.12 2.76-1.46-2.33-1.12zM134.14 82.78l3.35-1.77 1.51-3.15-3.35 1.77-1.51 3.15zM113.44 86.59l-2.76 1.46 2.33 1.12 2.77-1.46-2.34-1.12zM99.23 79.79l-2.76 1.46 2.33 1.11 2.77-1.45-2.34-1.12zM103.97 82.06l-2.77 1.46 2.34 1.12 2.76-1.47-2.33-1.11zM118.18 88.86l-2.76 1.46 2.33 1.12 2.76-1.46-2.33-1.12zM94.64 77.58l.09-.19-3 1.59 2.34 1.11 2.76-1.45-2.19-1.06zM108.7 84.33l-2.76 1.45 2.34 1.12 2.76-1.46-2.34-1.11z"
+        />
+      </g>
+      <path
+        d="M112.12 100.58l6.15 12.3a1.43 1.43 0 01.06 1.16 1.46 1.46 0 01-.7.77l-17.7 8.85A1.46 1.46 0 0198 123l-6.15-12.3a1.48 1.48 0 01-.08-1.09v-.07a1.44 1.44 0 01.7-.78l17.7-8.84a1.4 1.4 0 011-.09 1.39 1.39 0 01.95.75z"
+        fill="#279ae0"
+      />
+      <path
+        d="M118.33 114a1.46 1.46 0 01-.7.77l-17.7 8.85a1.43 1.43 0 01-1.05.09l5.74-12.84z"
+        fill="#0071bb"
+      />
+      <path
+        d="M111.23 99.84l-5.69 12.93-13.75-3.22a1.44 1.44 0 01.7-.78l17.7-8.84a1.4 1.4 0 011.04-.09z"
+        fill="#00adef"
+      />
+    </svg>
+  );
+}
+
+export default SvgEmailIllustration;