@capillarytech/creatives-library 3.8.7 → 3.8.9

package/package.json

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

package/routes.js

@@ -630,6 +630,8 @@ export default function createRoutes(store) {
           import('v2Containers/Assets/Gallery/sagas'),
           import('v2Containers/Facebook/sagas'),
           import('v2Containers/Facebook/reducer'),
+          import('v2Containers/Line/Create/sagas'),
+          import('v2Containers/Line/Create/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -648,6 +650,7 @@ export default function createRoutes(store) {
           weChatRichmediaTemplatesEditSagas, weChatRichmediaTemplatesEditReducer,
           galleryReducer, gallerySagas,
           facebookSagas, facebookReducer,
+          lineCreateSagas, lineCreateReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -663,6 +666,7 @@ export default function createRoutes(store) {
           injectReducer('weChatRichmediaEdit', weChatRichmediaTemplatesEditReducer.default);
           injectReducer('gallery', galleryReducer.default);
           injectReducer('facebook', facebookReducer.default);
+          injectReducer('lineCreate', lineCreateReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -676,6 +680,7 @@ export default function createRoutes(store) {
           injectSagas(weChatRichmediaTemplatesCreateSagas.default);
           injectSagas(weChatRichmediaTemplatesEditSagas.default);
           injectSagas(facebookSagas.default);
+          injectSagas(lineCreateSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/getSchema.js

@@ -1,4 +1,4 @@
-import {SMS, EMAIL, MOBILE_PUSH, WECHAT} from '../v2Containers/CreativesContainer/constants';
+import {SMS, EMAIL, MOBILE_PUSH, WECHAT, LINE} from '../v2Containers/CreativesContainer/constants';
 export default function getSchema(channel) {
   let schemaPath = '../containers/';
   switch (channel.toUpperCase()) {
@@ -14,6 +14,9 @@ export default function getSchema(channel) {
     case WECHAT:
       schemaPath = import(`../v2Containers/WeChat/MapTemplates/initialSchema`);
       break;
+    case LINE:
+      schemaPath = import(`../v2Containers/Line/Create/initialSchema`);
+      break;
     default:
       schemaPath = import(`../v2Containers/Sms/initialSchema`);
   }

package/translations/en.json

@@ -112,6 +112,8 @@
   "creatives.componentsV2.FormBuilder.contentNotValidLanguage": "Content is not valid for language:",
   "creatives.componentsV2.FormBuilder.dragAndDrop": "Drag and drop image here",
   "creatives.componentsV2.FormBuilder.header": "This is the FormBuilder component !",
+  "creatives.componentsV2.FormBuilder.imageDimenstionDescription": "Dimensions: 300px x 400px  Size: 30mb",
+  "creatives.componentsV2.FormBuilder.imageReUpload": "Re upload",
   "creatives.componentsV2.FormBuilder.layoutSelection": "Layout Selection",
   "creatives.componentsV2.FormBuilder.loadingEDMTemplates": "Loading EDM Templates",
   "creatives.componentsV2.FormBuilder.missingTags": "Missing tags are:",
@@ -120,6 +122,8 @@
   "creatives.componentsV2.FormBuilder.selectAFile": "Select a file from your computer",
   "creatives.componentsV2.FormBuilder.unsupportedTags": "Unsupported tags are:",
   "creatives.componentsV2.FormBuilder.upload": "Upload",
+  "creatives.componentsV2.FormBuilder.uploadComputer": "Your computer",
+  "creatives.componentsV2.FormBuilder.uploadGallery": "Gallery",
   "creatives.componentsV2.FormBuilder.yes": "Yes",
   "creatives.componentsV2.Header.cancel": "Cancel",
   "creatives.componentsV2.Header.header": "This is the Header component !",
@@ -229,6 +233,7 @@
   "creatives.containers.Create.graphic_details_page": "Whether to display the graphic cover on the graphic details page",
   "creatives.containers.Create.header": "This is Create container !",
   "creatives.containers.Create.http_example": "Example: http://example.com",
+  "creatives.containers.Create.imageGallery": "Gallery",
   "creatives.containers.Create.markFinalVersionLabel": "Mark as final",
   "creatives.containers.Create.maxContentCount": "You have reached the maximum template size",
   "creatives.containers.Create.messageLabel": "Message",
@@ -246,9 +251,17 @@
   "creatives.containers.Create.sourceLinkEmpty": "Cannot leave source link field empty",
   "creatives.containers.Create.tagsErrorMessage": "\"Optout\" label is mandatory. Please add \"Optout\" label to this message",
   "creatives.containers.Create.tagsLabel": "Tags",
+  "creatives.containers.Create.templateAddTag": "Add tag",
   "creatives.containers.Create.templateDataNotValid": "Template data is not valid",
   "creatives.containers.Create.templateMarkedFinal": "Template Marked as Final Successfully",
+  "creatives.containers.Create.templateMessageError": "Template content cannot be empty!",
+  "creatives.containers.Create.templateMessagePlaceholder": "Please input line template content.",
+  "creatives.containers.Create.templateMessagePreviewPropsError": "Please upload image",
+  "creatives.containers.Create.templateMessagePreviewPropsInductiveText": "The relevant image that complements the message context.",
+  "creatives.containers.Create.templateMessagePreviewPropsLabel": "Upload image content",
+  "creatives.containers.Create.templateNameErrorPlaceholder": "Template name cannot be empty.",
   "creatives.containers.Create.templateNamePlaceHolder": "Enter template name",
+  "creatives.containers.Create.templatePlaceholder": "Enter template name",
   "creatives.containers.Create.titleCharacterCount": "Title exceeds character count limit by",
   "creatives.containers.Create.titleEmpty": "Cannot leave title field empty",
   "creatives.containers.Create.titleNameRepeated": "Title name cannot be repeated",
@@ -1051,6 +1064,7 @@
   "creatives.containersV2.Line.Create.image": "Please upload an image to proceed",
   "creatives.containersV2.Line.Create.inputLineTemplateContent": "Please enter the message content",
   "creatives.containersV2.Line.Create.line": "Line",
+  "creatives.containersV2.Line.Create.lineTemplateCreatedSuccessfully": "Line template created successfully",
   "creatives.containersV2.Line.Create.maxUploadFileSize": "Max file size acceptable is 5mb",
   "creatives.containersV2.Line.Create.maximumCharacterLengthExceeds": "Maximum characters length exceeds",
   "creatives.containersV2.Line.Create.message": "Message",
@@ -1065,7 +1079,6 @@
   "creatives.containersV2.Line.Create.somethingWentWrong": "Something went wrong!!",
   "creatives.containersV2.Line.Create.template": "Template",
   "creatives.containersV2.Line.Create.templateCantEmpty": "Template name cannot be empty",
-  "creatives.containersV2.Line.Create.templateCreatedSuccessfully": "Line template created successfully",
   "creatives.containersV2.Line.Create.templateEditedSuccessfully": "Line template edited successfully",
   "creatives.containersV2.Line.Create.templateNameNotEmpty": "Please provide a template name",
   "creatives.containersV2.Line.Create.templateNotConfigured": "template not configured,",
@@ -1078,6 +1091,14 @@
   "creatives.containersV2.Line.Create.uploadSuccess": "Photo uploaded successfully",
   "creatives.containersV2.Line.Create.uploadingImage": "Uploading image...",
   "creatives.containersV2.Line.Create.valueCantEmpty": "value cannot be empty.",
+  "creatives.containersV2.Line.CreateWrapper.continue": "Continue",
+  "creatives.containersV2.Line.CreateWrapper.hybridTemplateDescription": "Used to create combined text & image or video content",
+  "creatives.containersV2.Line.CreateWrapper.hybridTemplateTitle": "Hybrid",
+  "creatives.containersV2.Line.CreateWrapper.imageTemplateDescription": "Used for creating image or video content",
+  "creatives.containersV2.Line.CreateWrapper.imageTemplateTitle": "Image/video template",
+  "creatives.containersV2.Line.CreateWrapper.templateType": "Select the type of content",
+  "creatives.containersV2.Line.CreateWrapper.textTemplateDescription": "Used for announcing offers and transaction related information",
+  "creatives.containersV2.Line.CreateWrapper.textTemplateTitle": "Text template",
   "creatives.containersV2.Line.Edit.Campaigns": "Campaigns",
   "creatives.containersV2.Line.Edit.Creatives": "Creatives",
   "creatives.containersV2.Line.Edit.Image": "Image",
@@ -1363,6 +1384,7 @@
   "creatives.containersV2.TemplatesV2.facebook": "Facebook",
   "creatives.containersV2.TemplatesV2.gallery": "Gallery",
   "creatives.containersV2.TemplatesV2.header": "This is TemplatesV2 container !",
+  "creatives.containersV2.TemplatesV2.line": "Line",
   "creatives.containersV2.TemplatesV2.pushNotification": "Push notification",
   "creatives.containersV2.TemplatesV2.select": "Select",
   "creatives.containersV2.TemplatesV2.sms": "SMS",

package/translations/zh.json

@@ -112,6 +112,8 @@
   "creatives.componentsV2.FormBuilder.contentNotValidLanguage": "",
   "creatives.componentsV2.FormBuilder.dragAndDrop": "",
   "creatives.componentsV2.FormBuilder.header": "",
+  "creatives.componentsV2.FormBuilder.imageDimenstionDescription": "",
+  "creatives.componentsV2.FormBuilder.imageReUpload": "",
   "creatives.componentsV2.FormBuilder.layoutSelection": "",
   "creatives.componentsV2.FormBuilder.loadingEDMTemplates": "",
   "creatives.componentsV2.FormBuilder.missingTags": "",
@@ -120,6 +122,8 @@
   "creatives.componentsV2.FormBuilder.selectAFile": "",
   "creatives.componentsV2.FormBuilder.unsupportedTags": "",
   "creatives.componentsV2.FormBuilder.upload": "",
+  "creatives.componentsV2.FormBuilder.uploadComputer": "",
+  "creatives.componentsV2.FormBuilder.uploadGallery": "",
   "creatives.componentsV2.FormBuilder.yes": "",
   "creatives.componentsV2.Header.cancel": "",
   "creatives.componentsV2.Header.header": "",
@@ -229,6 +233,7 @@
   "creatives.containers.Create.graphic_details_page": "",
   "creatives.containers.Create.header": "",
   "creatives.containers.Create.http_example": "",
+  "creatives.containers.Create.imageGallery": "",
   "creatives.containers.Create.markFinalVersionLabel": "",
   "creatives.containers.Create.maxContentCount": "",
   "creatives.containers.Create.messageLabel": "",
@@ -246,9 +251,17 @@
   "creatives.containers.Create.sourceLinkEmpty": "",
   "creatives.containers.Create.tagsErrorMessage": "",
   "creatives.containers.Create.tagsLabel": "",
+  "creatives.containers.Create.templateAddTag": "",
   "creatives.containers.Create.templateDataNotValid": "",
   "creatives.containers.Create.templateMarkedFinal": "",
+  "creatives.containers.Create.templateMessageError": "",
+  "creatives.containers.Create.templateMessagePlaceholder": "",
+  "creatives.containers.Create.templateMessagePreviewPropsError": "",
+  "creatives.containers.Create.templateMessagePreviewPropsInductiveText": "",
+  "creatives.containers.Create.templateMessagePreviewPropsLabel": "",
+  "creatives.containers.Create.templateNameErrorPlaceholder": "",
   "creatives.containers.Create.templateNamePlaceHolder": "",
+  "creatives.containers.Create.templatePlaceholder": "",
   "creatives.containers.Create.titleCharacterCount": "",
   "creatives.containers.Create.titleEmpty": "",
   "creatives.containers.Create.titleNameRepeated": "",
@@ -1051,6 +1064,7 @@
   "creatives.containersV2.Line.Create.image": "",
   "creatives.containersV2.Line.Create.inputLineTemplateContent": "",
   "creatives.containersV2.Line.Create.line": "",
+  "creatives.containersV2.Line.Create.lineTemplateCreatedSuccessfully": "",
   "creatives.containersV2.Line.Create.maxUploadFileSize": "",
   "creatives.containersV2.Line.Create.maximumCharacterLengthExceeds": "",
   "creatives.containersV2.Line.Create.message": "",
@@ -1065,7 +1079,6 @@
   "creatives.containersV2.Line.Create.somethingWentWrong": "",
   "creatives.containersV2.Line.Create.template": "",
   "creatives.containersV2.Line.Create.templateCantEmpty": "",
-  "creatives.containersV2.Line.Create.templateCreatedSuccessfully": "",
   "creatives.containersV2.Line.Create.templateEditedSuccessfully": "",
   "creatives.containersV2.Line.Create.templateNameNotEmpty": "",
   "creatives.containersV2.Line.Create.templateNotConfigured": "",
@@ -1078,6 +1091,14 @@
   "creatives.containersV2.Line.Create.uploadSuccess": "",
   "creatives.containersV2.Line.Create.uploadingImage": "",
   "creatives.containersV2.Line.Create.valueCantEmpty": "",
+  "creatives.containersV2.Line.CreateWrapper.continue": "",
+  "creatives.containersV2.Line.CreateWrapper.hybridTemplateDescription": "",
+  "creatives.containersV2.Line.CreateWrapper.hybridTemplateTitle": "",
+  "creatives.containersV2.Line.CreateWrapper.imageTemplateDescription": "",
+  "creatives.containersV2.Line.CreateWrapper.imageTemplateTitle": "",
+  "creatives.containersV2.Line.CreateWrapper.templateType": "",
+  "creatives.containersV2.Line.CreateWrapper.textTemplateDescription": "",
+  "creatives.containersV2.Line.CreateWrapper.textTemplateTitle": "",
   "creatives.containersV2.Line.Edit.Campaigns": "",
   "creatives.containersV2.Line.Edit.Creatives": "",
   "creatives.containersV2.Line.Edit.Image": "",
@@ -1363,6 +1384,7 @@
   "creatives.containersV2.TemplatesV2.facebook": "",
   "creatives.containersV2.TemplatesV2.gallery": "",
   "creatives.containersV2.TemplatesV2.header": "",
+  "creatives.containersV2.TemplatesV2.line": "",
   "creatives.containersV2.TemplatesV2.pushNotification": "",
   "creatives.containersV2.TemplatesV2.select": "",
   "creatives.containersV2.TemplatesV2.sms": "",

package/v2Components/FormBuilder/index.js

@@ -11,9 +11,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { CapDrawer, CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
 import SlideBox from '../SlideBox';
@@ -24,7 +25,7 @@ import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import {SMS} from '../../v2Containers/CreativesContainer/constants';
+import { SMS, LINE } from '../../v2Containers/CreativesContainer/constants';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -55,6 +56,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       currentEventData: {},
       popoverVisible: false,
       customPopoverVisible: false,
+      isDrawerVisible: false,
     };
     this.renderForm = this.renderForm.bind(this);
     this.updateFormData = this.updateFormData.bind(this);
@@ -207,7 +209,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (nextProps.isNewVersionFlow && !this.state.formData[this.state.currentTab - 1][this.state.formData[this.state.currentTab - 1].activeTab].tabKey) {
           this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
-        if (type === 'embedded' || this.props.schema.channel.toUpperCase() === 'EMAIL') {
+        if (type === 'embedded' || ( this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
           this.validateForm();
         }
         if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
@@ -253,6 +255,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (nextProps.modal && (!_.isEqual(nextProps.modal, this.props.modal) || _.isEmpty(this.state.modal))) {
       this.setState({modal: nextProps.modal});
     }
+    if (nextProps.isDrawerRequired !== this.props.isDrawerRequired) {
+      this.setState({
+        isDrawerVisible: nextProps.isDrawerRequired,
+      });
+    }
   }
 
   onEdit() {
@@ -484,38 +491,74 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     //validation for LINE
-    if (this.props.schema.channel === 'LINE') {
+    if (channel === LINE) {
       
-      if (this.state.formData['0']['message-editor'] !== undefined ) {
-        const content = this.state.formData['0']['message-editor'];
+      if (this.state.formData['message-editor'] !== undefined ) {
+        const content = this.state.formData['0']['message-editor'] || '';
         
-        const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+        const tagValidationResponse = this.validateTags((content), tags, injectedTags);
         
         if (tagValidationResponse.valid) {
-          errorData['0']['message-editor'] = false;
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              'message-editor': false,
+            }
+          };
         } else {
-          
-          errorData['0']['message-editor'] = true;
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              'message-editor': true,
+            }
+          };
           isValid = false;
         }
         if (content.trim() === '') {
-          
-          errorData['0']['message-editor'] = true;
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              'message-editor': true,
+            }
+          };
           isValid = false;
         }
       }
 
-      if ( (this.state.formData['0'].image !== undefined) && (this.state.formData['0'].imagePreview !== undefined)){
-        const imgContentLength = this.state.formData['0'].image.length;
-        const imgContentLengthPreview = this.state.formData['0'].imagePreview.length;
+      if (this.state.formData['image-upload-line'] !== undefined) {
+        const {
+          formData: {
+            0: {
+              image,
+              imagePreview,
+            }
+          }
+        } = this.state;
+        const imgContentLength = image ? image.length : 0;
+        const imgContentLengthPreview = imagePreview ? imagePreview.length : 0;
         if ( (imgContentLength < 1) && (imgContentLengthPreview < 1) ) {
           
-          errorData['0'].image = true;
-          errorData['0'].imagePreview = true;
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              image: true,
+              imagePreview: true,
+            }
+          };
           isValid = false;
         }else{
-          errorData['0'].image = false;
-          errorData['0'].imagePreview = false;
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              image: false,
+              imagePreview: false,
+            }
+          };
         }
       }
       if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
@@ -1149,7 +1192,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         //   this.formElements.push(col.id);
         // }
         if (!col.onlyDisplay && !ifError) {
-          if (col.id.indexOf('tagList-') === -1) {
+          if (col.id && col.id.indexOf('tagList-') === -1) {
             this.formElements.push(col.id);
           }
 
@@ -1349,7 +1392,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           delete tempFormData[key];
         } else if (typeof element === "object") {
           _.forEach(element, (innerElement, innerKey) => {
-            if (innerKey !== "tabKey" && innerKey !== "base" && innerKey !== 'name' && innerKey !== 'imagePreview' && this.formElements.indexOf(innerKey) === -1) {
+            if (innerKey !== "tabKey" && innerKey !== "base" && innerKey !== 'name' && innerKey !== 'imagePreview' && innerKey !== 'image' && this.formElements.indexOf(innerKey) === -1) {
               delete tempFormData[key][innerKey];
             }
           });
@@ -1921,7 +1964,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       return;
     } else if (event === 'markFinalVersion' || event === 'duplicateVersion' || event === 'deleteVersion' || event === 'renameVersion') {
       this.setState({ popoverVisible: false });
-      if ((event !== 'deleteVersion' && !this.props.isNewVersionFlow) || ((event === 'deleteVersion') && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
+      if ((event !== 'deleteVersion' && !this.props.isNewVersionFlow) || ((event === 'deleteVersion') && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
         val.injectedEvents[event].call(this.props.parent, data, this.state.currentTab);
       } else {
         this.setState({currentEvent: val.injectedEvents[event], currentEventData: data});
@@ -2100,8 +2143,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     img.src = _URL.createObjectURL(file);
     img.onload = () => {
       const fileParams = {
-        width: this.width,
-        height: this.height,
+        width: this.width || img.width,
+        height: this.height || img.height,
         error: file.size / (1e+6) > 3,
       };
       this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
@@ -2532,6 +2575,80 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
+  onGalleryClick = (event) => {
+    event.stopPropagation();
+    this.props.setDrawerVisibility(true);
+  }
+
+  onReUpload = () => {
+    const { formData } = this.state;
+    this.props.onChange({
+      ...formData,
+      0: {
+        ...formData[0],
+        image: undefined,
+        imagePreview: undefined,
+      },
+      base: {
+        ...formData.base,
+        image: undefined,
+        imagePreview: undefined,
+      },
+    });
+  }
+
+  getUploadVariants = (isImage, val) => {
+    if (this.props.schema && this.props.schema.channel === 'LINE') {
+      if (!isImage) {
+        return (
+          <>
+            <CapUploader.CapDragger
+              customRequest={(data) => this.capUploaderCustomRequest(data, val)}
+              {...val.componentProps}
+              className="form-builder-dragger"
+            >
+              <CapHeading className="dragger-title" type="h7">
+                <FormattedMessage {...messages.dragAndDrop} />
+              </CapHeading>
+              <CapHeading className="dragger-or" type="label6">
+                <FormattedMessage {...messages.or} />
+              </CapHeading>
+              <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}}>
+                <FormattedMessage {...messages.uploadComputer} />
+              </CapButton>
+              <CapButton
+                className="dragger-button"
+                type="secondary"
+                style={{marginLeft: CAP_SPACE_08}}
+                onClick={this.onGalleryClick}
+              >
+                <FormattedMessage {...messages.uploadGallery} />
+              </CapButton>
+            </CapUploader.CapDragger>
+            <CapHeading type="h6" style={{marginTop: CAP_SPACE_12 }}>
+              <FormattedMessage {...messages.imageDimenstionDescription} />
+            </CapHeading>
+          </>
+        );
+      }
+      return (
+        <CapButton
+          className="dragger-button"
+          type="flat"
+          style={{top: 0, position: 'absolute', right: 0, color: FONT_COLOR_05 }}
+          onClick={this.onReUpload}
+        >
+          <FormattedMessage {...messages.imageReUpload} />
+        </CapButton>
+      );
+    }
+    return (
+      <CapButton disabled={val.disabled ? val.disabled : false} type="flat" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? FONT_COLOR_04 : FONT_COLOR_05}`}}>
+        {val.label}
+      </CapButton>
+    );
+  }
+
   renderMultiColSection(section, childIndex) {
     const fields = [];
     let contentSections = [];
@@ -2578,7 +2695,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           );
           return true;
         }
-
         switch (type) {
           case "input":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
@@ -2717,11 +2833,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case 'upload':
+            const isImage = self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image;
             ifError = (this.state.checkValidation || this.props.startValidation) && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const ImageComponent = (props) => (
               <div key={`${val.id}-${this.state.currentTab}`}>
                 <div className={`image-container ${props.ifError ? 'error' : ''}`}>
-                  {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
+                  {isImage ?
                     <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
                     :
                     <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{props.placeholder}</span></div>
@@ -2736,9 +2853,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 {val.showPreview && <WithLabel key={`${val.id}-with-label`} {...rest} errorMessage={ifError && errorMessage} ifError={ifError}/>}
                 <form encType="multipart/form-data" id={val.id}>
                   <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept={val.supportedExtensions ? val.supportedExtensions : "image/*"} />
-                  <CapButton disabled={val.disabled ? val.disabled : false} type="flat" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? '#b3bac5' : '#2466ea'}`}}>
-                    {val.label}
-                  </CapButton>
+                  {this.getUploadVariants(isImage, val)}
                 </form>
               </CapColumn>
               );
@@ -2783,11 +2898,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case "tag-list":
+            let moduleFilterEnabled = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
+            const channel = _.get(this.props, 'schema.channel', "");
+            if (channel === 'EMAIL') {
+              moduleFilterEnabled = this.props.isFullMode;
+            }
             columns.push(
               <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
                 <TagList
                   key={`input-${val.id}`}
-                  moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                  moduleFilterEnabled={moduleFilterEnabled}
                   label={val.label ? val.label : ''}
                   onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
                   onContextChange={this.props.onContextChange}
@@ -2810,7 +2930,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     type={val.buttonType}
                     icon={val.icon}
                     disabled={val.disabled ? val.disabled : false}
-                    onClick={(data) => this.callChildEvent(data, val, val.submitAction)}>
+                    onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
                     {val.value}
                   </CapButton>
                 </CapColumn>
@@ -3296,6 +3416,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           loadingText={this.props.intl.formatMessage(messages.loadingEDMTemplates)}
           isLoading={this.props.getCmsTemplatesInProgress}
         />
+        {
+          this.props.capDrawerContent && (
+            <CapDrawer
+              content={this.props.capDrawerContent}
+              visible={this.state.isDrawerVisible}
+              width={380}
+              onClose={() => this.props.setDrawerVisibility(false)}
+            />
+          )
+        }
       </CapRow>
     );
   }
@@ -3346,6 +3476,9 @@ FormBuilder.propTypes = {
   handleDelete: PropTypes.func,
   intl: intlShape.isRequired,
   selectedOfferDetails: PropTypes.array,
+  setDrawerVisibility: PropTypes.bool,
+  capDrawerContent: PropTypes.array,
+  isFullMode: PropTypes.bool,
 };
 
 export default injectIntl(FormBuilder);

package/v2Components/FormBuilder/messages.js

@@ -58,4 +58,20 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.loadingEDMTemplates',
     defaultMessage: 'Loading EDM Templates',
   },
+  uploadComputer: {
+    id: 'creatives.componentsV2.FormBuilder.uploadComputer',
+    defaultMessage: 'Your computer',
+  },
+  uploadGallery: {
+    id: 'creatives.componentsV2.FormBuilder.uploadGallery',
+    defaultMessage: 'Gallery',
+  },
+  imageDimenstionDescription: {
+    id: 'creatives.componentsV2.FormBuilder.imageDimenstionDescription',
+    defaultMessage: 'Dimensions: 300px x 400px  Size: 30mb',
+  },
+  imageReUpload: {
+    id: 'creatives.componentsV2.FormBuilder.imageReUpload',
+    defaultMessage: 'Re upload',
+  },
 });

package/v2Components/TemplatePreview/index.js

@@ -157,12 +157,21 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <img className="preview-image sms" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div className="msgContainer">
-                <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
+                <div className="sms-icon" style={{ left: 10, borderRadius: '50%', width: '20px', height: '20px', background: '#2E89DF' }}></div>
                 <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
-                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
-                  { (content && content.bodyText) ? content.bodyText : ''}
+                  {
+                    content && Object.keys(content).map((item) => {
+                      if (item === 'bodyText' && content[item]) {
+                        return content[item];
+                      }
+                      if (item === 'bodyImage' && content[item]) {
+                        return <img src={content[item]} alt="brand-name" style={{maxWidth: '100%'}}/>;
+                      }
+                      return null;
+                    })
+                  }
                 </div>
               </div>
               { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }