@capillarytech/creatives-library 3.10.0 → 3.11.0

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, CapImage, 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);
@@ -2154,7 +2197,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         //
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         // const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
-        const content = <img src={imgSrc || ''} alt="" />;
+        const content = <CapImage src={imgSrc || ''} alt="" />;
 
         temp.content = (
           <div
@@ -2339,8 +2382,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 content={content}
                 charCounterEnabled={val.charCounterEnabled}
                 unicodeEnabled={unicodeEnabled}
-              >
-              </TemplatePreview>
+                showTestAndPreviewIcon
+                onPreviewContentClicked={this.props.onPreviewContentClicked}
+                onTestContentClicked={this.props.onTestContentClicked}
+              />
             </CapColumn>
           );
           break;
@@ -2532,6 +2577,81 @@ 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,
+      },
+      reUpload: true,
+    });
+  }
+
+  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 +2698,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]);
@@ -2706,7 +2825,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <div>
                   <div className={`image-container ${ifError ? 'error' : ''}`}>
                     {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
-                      <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={val.alt} style={val.style}/>
+                      <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={val.alt} style={val.style}/>
                       :
                       <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{val.placeholder}</span></div>
                     }
@@ -2717,13 +2836,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case 'upload':
+            const {
+              formData: {
+                [`${self.state.currentTab - 1}`]: {
+                  image,
+                } = {},
+              } = {},
+            } = self.state;
+            const isImage = !!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 ?
-                    <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
-                    :
+
+                  {isImage ?
+                    <CapImage 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>
                   }
                 </div>
@@ -2736,9 +2864,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 +2909,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 +2941,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>
@@ -2834,6 +2965,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   content={content}
                   charCounterEnabled={val.charCounterEnabled}
                   unicodeEnabled={unicodeEnabled}
+                  showTestAndPreviewIcon
+                  onPreviewContentClicked={this.props.onPreviewContentClicked}
+                  onTestContentClicked={this.props.onTestContentClicked}
                 >
                 </TemplatePreview>
               </CapColumn>
@@ -2883,6 +3017,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     ],
                     appName: val.content.appName,
                   }}
+                  showTestAndPreviewIcon
+                  onPreviewContentClicked={this.props.onPreviewContentClicked}
+                  onTestContentClicked={this.props.onTestContentClicked}
+                  templateDataRaw={this.props.templateData}
                 >
                 </TemplatePreview>
               </CapColumn>
@@ -3296,6 +3434,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 +3494,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/MobilePushPreviewV2/index.js

@@ -7,16 +7,10 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { CapButton } from '@capillarytech/cap-ui-library';
-// import styled from 'styled-components';
-
-import { FormattedMessage } from 'react-intl';
-import { Button } from 'antd';
+import { CapTab, CapIcon } from '@capillarytech/cap-ui-library';
 import { get, map, isEmpty} from 'lodash';
 import TemplatePreview from '../TemplatePreview';
 import '../PreviewSideBar/_previewsidebar.scss';
-import messages from './messages';
-const ButtonGroup = Button.Group;
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -24,8 +18,11 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.goToEdit = this.goToEdit.bind(this);
     this.goToDuplicate = this.goToDuplicate.bind(this);
     this.changeDevice = this.changeDevice.bind(this);
-    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent');
-    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent');
+    this.getPreview = this.getPreview.bind(this);
+    this.setContent = this.setContent.bind(this);
+    this.goToDuplicate = this.goToDuplicate.bind(this);
+    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent.title');
+    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent.title');
     let device = "android";
     if (hasAndroid) {
       device = 'android';
@@ -38,7 +35,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     };
   }
 
-  setContent = (templateData, device) => {
+  setContent(templateData, device) {
     const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
     const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
@@ -59,12 +56,21 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     return content;
   }
+  getPreview(device) {
+    return (
+      <TemplatePreview
+        device={device}
+        channel={this.props.channel}
+        content={this.state.content || ''}
+        templateData={this.props.templateData}
+      />
+    );
+  }
   goToDuplicate() {
     this.props.onDuplicateClick(this.props.templateData);
     this.props.handleClose();
   }
-  changeDevice(ev) {
-    const device = ev.target.value;
+  changeDevice(device) {
     const content = this.setContent(this.props.templateData, device);
     this.setState({device, content });
   }
@@ -72,38 +78,40 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
   render() {
-    const {templateData, channel} = this.props;
-
-    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
-    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
-
-    const {device, content} = this.state;
+    const {templateData} = this.props;
+    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
+    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
+    const hasBothAndroidAndIos = hasAndroid && hasIos;
 
     return (
-
       <div>
         <div className="devices">
-          {!isEmpty(templateData) && hasAndroid && hasIos &&
-          <ButtonGroup onClick={this.changeDevice}>
-            <CapButton type={device === "android" ? "primary" : "secondary"} value={"android"}><FormattedMessage {...messages.android} /></CapButton>
-            <CapButton type={device === "iphone" ? "primary" : "secondary"} value={"iphone"}><FormattedMessage {...messages.ios} /></CapButton>
-          </ButtonGroup>}
+          {!isEmpty(templateData) &&
+            ( hasBothAndroidAndIos ? (
+              <CapTab
+                panes={[
+                  {
+                    content: this.getPreview('android'),
+                    tab: <CapIcon type="android" size="m" />,
+                    key: 'android',
+                  },
+                  {
+                    content: this.getPreview('iphone'),
+                    tab: <CapIcon type="ios" size="m" />,
+                    key: 'iphone',
+                  },
+                ]}
+                onChange={(activeKey) => this.changeDevice(activeKey)}
+                tabBarStyle={{margin: 'auto', width: '38%'}}
+              />
+            ) : (
+              (hasAndroid || hasIos) && this.getPreview(hasAndroid ? 'android' : 'ios')
+            ))
+          }
         </div>
-        <TemplatePreview
-          device={device === "android" ? "android" : "iphone"}
-          channel={channel}
-          content={content || ''}
-          templateData={templateData}
-              >
-        </TemplatePreview>
-
-
       </div>
-
-
     );
   }
-
 }
 
 MobilePushPreviewV2.propTypes = {

package/v2Components/MobilePushPreviewV2/messages.js

@@ -10,12 +10,4 @@ export default defineMessages({
     id: 'creatives.componentsv2.MobilePushPreviewV2.header',
     defaultMessage: 'This is the MobilePushPreviewV2 component !',
   },
-  android: {
-    id: 'creatives.componentsv2.MobilePushPreviewV2.android',
-    defaultMessage: 'Android',
-  },
-  ios: {
-    id: 'creatives.componentsv2.MobilePushPreviewV2.ios',
-    defaultMessage: 'IOS',
-  },
 });

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -1,5 +1,69 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
+.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
+  position: absolute;
+  left: 53.5%;
+  top:28%;
+  background: white;
+  width: 19.5%;
+  text-align: left;
+  height: fit-content;
+  border-radius: 0.285rem;
+}
+
+.shell-lock-screen-android .lock-screen-preview{
+  .wechat-android-sender-id{
+    position: absolute;
+    top: 46%;
+    font-size: 10px;
+    left: 28%;
+  }
+  .wechat-android-title{
+    position: absolute;
+    top: 49%;
+    font-size: 10px;
+    left: 28%;
+    color: #5e6c84;
+  }
+  .wechat-android-action-buttons{
+    position: absolute;
+    left: 28%;
+    top: 53%;
+    font-size: 10px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-sender-id{
+    position: absolute;
+    top: 44%;
+    font-size: 10px;
+    left: 28.5%;
+  }
+  .wechat-ios-title{
+    position: absolute;
+    top: 47%;
+    font-size: 10px;
+    left: 28.5%;
+    color: #5e6c84;
+  }
+  .wechat-ios-action-reply{
+    position: absolute;
+    left: 35%;
+    top: 59%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-action-cancel{
+    position: absolute;
+    left: 34.5%;
+    top: 66%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+}
+
 .wechatMsgContainer{
     position: absolute;
     left: 30%;