@capillarytech/creatives-library 6.0.0 → 6.0.1

package/assets/IPad.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+function SvgIPad(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 407 574"
+      fill="currentColor"
+      {...props}
+    >
+      <image
+        width={407}
+        height={574}
+        xlinkHref="data:image/png;base64,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"
+        fill="none"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export default SvgIPad;

package/assets/index.js

@@ -0,0 +1 @@
+export { default as IPad } from './IPad'

package/components/FormBuilder/index.js

@@ -27,6 +27,12 @@ import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 import messages from './messages';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
+
+const errorMessageForTags = {
+  UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
+  MISSING_TAG_ERROR: 'missingTagsError',
+  GENERIC_VALIDATION_ERROR: 'genericValidationError',
+};
 // import styled from 'styled-components';
 
 // import { FormattedMessage } from 'react-intl';
@@ -437,8 +443,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (tagValidationResponse.valid) {
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
         } else {
-          
-          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)) {
@@ -446,7 +453,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           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;
@@ -2118,6 +2125,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
+  getMissingTagsName = (content = '') => {
+    const tagValidationResponse = this.validateTags(content);
+    const errorString = tagValidationResponse.missingTags.join(', ').toString();
+    return errorString;
+  };
+
+  getUnsupportedTagsName = (content = '') => {
+    const tagValidationResponse = this.validateTags(content);
+    const errorString = tagValidationResponse.unsupportedTags.join(', ').toString();
+    return errorString;
+  };
+
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -2195,18 +2214,29 @@ 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 messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+          const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
+          let errorMessage = false;
+          if (errorType && errorType === MISSING_TAG_ERROR) {
+            errorMessage = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
+          } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
+            errorMessage = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
+          } else if (errorType) {
+            errorMessage = this.props.intl.formatMessage(messages.genericTagsValidationError);
+          }
           if (styling === 'semantic') {
             columns.push(
               <Col key="input" span={val.width}>
                 <CapTextArea
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  errorMessage={errorMessage}
                   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={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  defaultValue={messageContent}
+                  value={messageContent}
                   rows={20}
                   disabled={val.disabled}
                   cols={20}
@@ -2552,6 +2582,17 @@ 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 errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
+            let errorMessage = false;
+            if (errorType && errorType === MISSING_TAG_ERROR) {
+              errorMessage = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
+            } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
+              errorMessage = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
+            } else if (errorType) {
+              errorMessage = this.props.intl.formatMessage(messages.genericTagsValidationError);
+            }
             if (styling === 'semantic') {
               columns.push(
                 <Col key="input" span={val.width} offset={val.offset}>
@@ -2560,12 +2601,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     placeholder={val.placeholder ? val.placeholder : ''}
                     disabled={val.disabled}
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    errorMessage={errorMessage}
                     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={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    defaultValue={messageContent || ''}
+                    value={messageContent || ''}
                     rows={10}
                     cols={2}
                   />

package/components/FormBuilder/messages.js

@@ -22,6 +22,18 @@ export default defineMessages({
     id: 'creatives.components.FormBuilder.unsupportedTags',
     defaultMessage: 'Unsupported tags are:',
   },
+  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',
+  },
   layoutSelection: {
     id: 'creatives.components.FormBuilder.layoutSelection',
     defaultMessage: 'Layout Selection',

package/components/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/components/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/components/TemplatePreview/assets/images/SmsMobileIos.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+
+function SvgSmsMobileIos(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={32} />
+        <path
+          fill="#FFF"
+          d="M55.965 11v3c0 7.18 5.82 13 13 13h82.07c7.18 0 13-5.82 13-13v-3h23.316c12.702 0 23 10.297 23 23v405c0 12.703-10.298 23-23 23H32.649c-12.702 0-23-10.297-23-23V34c0-12.703 10.298-23 23-23h23.316z"
+        />
+        <rect
+          width={181.404}
+          height={136}
+          x={19.298}
+          y={88}
+          fill="#FFF"
+          rx={17.5}
+        />
+        <path
+          fill="#F8F8F8"
+          d="M55.965 11v3c0 7.18 5.82 13 13 13h82.07c7.18 0 13-5.82 13-13v-3h23.316c12.702 0 23 10.297 23 23v43.092H9.649V34c0-12.703 10.298-23 23-23h23.316z"
+        />
+        <rect
+          width={176}
+          height={20}
+          x={22}
+          y={421.072}
+          fill="#FAFAFA"
+          stroke="#C8C7CC"
+          strokeWidth={0.5}
+          rx={10}
+        />
+        <path
+          fill="#2E2E2E"
+          fillRule="nonzero"
+          d="M76.566 455h66.868c.695 0 1.303.467 1.303 1 0 .533-.608 1-1.303 1H76.566c-.695 0-1.303-.467-1.303-1 0-.533.608-1 1.303-1z"
+          opacity={0.4}
+        />
+        <path fill="#E0E0E0" d="M9.649 77h200.702v1H9.649z" />
+        <path
+          fill="#007AFF"
+          d="M19.769 59.041l-4.623-4.568a.487.487 0 010-.696l4.623-4.568a.726.726 0 011.02 0 .708.708 0 010 1.008l-3.954 3.908 3.954 3.908a.708.708 0 010 1.008.726.726 0 01-1.02 0M193.947 60a6 6 0 110-12 6 6 0 010 12zm0-.818a5.182 5.182 0 100-10.364 5.182 5.182 0 000 10.364zm-.125-7.473a.626.626 0 11-.002-1.252.626.626 0 01.002 1.252zm-.878 5.018v-.25h.502v-3.764h-.502v-.251h1.505v4.014h.502v.251h-2.007z"
+        />
+        <text
+          fill="#0A0A0A"
+          fontFamily="Roboto-Regular, Roboto"
+          fontSize={7}
+          letterSpacing={-0.169}
+        >
+          <tspan x={96.491} y={70}>
+            {"Sender ID"}
+          </tspan>
+        </text>
+        <path
+          fill="#959BA9"
+          fillRule="nonzero"
+          d="M104.33 58.425c1.611-1.204 4.06-1.394 4.563-2.793.062-.709.038-1.204.038-1.852-.31-.169-.888-1.244-.981-2.15-.244-.021-.628-.268-.74-1.24-.061-.523.18-.817.327-.91-.824-3.286-.371-6.156 3.388-6.228.94 0 1.663.26 1.945.774 2.743.395 1.92 4.219 1.523 5.455.147.092.388.386.328.908-.113.973-.497 1.22-.74 1.24-.095.908-.65 1.982-.96 2.15 0 .649-.024 1.144.038 1.853.502 1.399 2.94 1.589 4.543 2.791 1.924-1.848 3.128-4.49 3.128-7.423 0-5.59-4.372-10.12-9.765-10.12-5.393 0-9.765 4.53-9.765 10.12 0 2.934 1.205 5.577 3.13 7.425zM110.965 62c-5.862 0-10.614-4.925-10.614-11s4.752-11 10.614-11c5.862 0 10.614 4.925 10.614 11s-4.752 11-10.614 11z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgSmsMobileIos;

package/components/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/components/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/package.json

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

package/v2Components/FormBuilder/index.js

@@ -32,6 +32,12 @@ const {TextArea} = CapInput;
 const {CapRadioGroup} = CapRadio;
 // import styled from 'styled-components';
 
+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 +474,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 +2238,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
+  getMissingTagsName = (content = '') => {
+    const tagValidationResponse = this.validateTags(content);
+    const errorString = tagValidationResponse.missingTags.join(', ').toString();
+    return errorString;
+  };
+
+  getUnsupportedTagsName = (content = '') => {
+    const tagValidationResponse = this.validateTags(content);
+    const errorString = tagValidationResponse.unsupportedTags.join(', ').toString();
+    return errorString;
+  };
+
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -2293,20 +2312,30 @@ 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];
+          const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+          const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
+          let errorMessageText = false;
+          if (errorType && errorType === MISSING_TAG_ERROR) {
+            errorMessageText = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
+          } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
+            errorMessageText = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
+          } else if (errorType) {
+            errorMessageText = this.props.intl.formatMessage(messages.genericTagsValidationError);
+          }
           if (styling === 'semantic') {
             columns.push(
               <CapColumn key="input" span={val.width}>
                 <TextArea
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                  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={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={value || ""}
+                  defaultValue={messageContent || ''}
+                  value={messageContent || ""}
                   rows={20}
                   disabled={val.disabled}
                   cols={20}
@@ -2728,7 +2757,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
           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];
+            const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
+            let errorMessageText = false;
+            if (errorType && errorType === MISSING_TAG_ERROR) {
+              errorMessageText = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
+            } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
+              errorMessageText = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
+            } else if (errorType) {
+              errorMessageText = this.props.intl.formatMessage(messages.genericTagsValidationError);
+            }
             if (styling === 'semantic') {
               columns.push(
                 <CapColumn key="input" span={val.width} offset={val.offset}>
@@ -2737,13 +2776,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     placeholder={val.placeholder ? val.placeholder : ''}
                     disabled={val.disabled}
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    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={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    value={textValue || ""}
+                    defaultValue={messageContent || ''}
+                    value={messageContent || ""}
                     rows={10}
                     cols={2}
                   />

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:',