@capillarytech/creatives-library 3.12.10 → 3.12.21

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -2385,6 +2385,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 showTestAndPreviewIcon
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
+                module={this.props.tagModule}
               />
             </CapColumn>
           );
@@ -2968,6 +2969,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   showTestAndPreviewIcon
                   onPreviewContentClicked={this.props.onPreviewContentClicked}
                   onTestContentClicked={this.props.onTestContentClicked}
+                  module={this.props.tagModule}
                 >
                 </TemplatePreview>
               </CapColumn>
@@ -3021,6 +3023,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onPreviewContentClicked={this.props.onPreviewContentClicked}
                   onTestContentClicked={this.props.onTestContentClicked}
                   templateDataRaw={this.props.templateData}
+                  module={this.props.location.query.module}
                 >
                 </TemplatePreview>
               </CapColumn>

package/v2Components/TemplatePreview/index.js

@@ -120,7 +120,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const channel = this.props.channel;
+    const { channel, showTestAndPreviewIcon, module} = this.props;
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -148,6 +148,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       });
     }
     const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
+    const showTestAndPreview = showTestAndPreviewIcon && 
+        channel !== WECHAT &&
+        ['outbound', 'library'].includes(module);
     return (
       <CapRow>
         {this.props.showCount && <CapColumn span={16}>
@@ -162,7 +165,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           </CapHeading>}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
-          {this.props.showTestAndPreviewIcon && this.props.channel !== WECHAT && (
+          {showTestAndPreview && (
             <div className="test-and-preview-container">
               <CapButton
                 style={{

package/v2Containers/Email/index.js

@@ -32,6 +32,7 @@ import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL } from '../App/constants';
+import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -2563,6 +2564,27 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     </div>
   );
 
+  showTestAndPreviewIcons = (action) => {
+    const previewContent = this.state.formData[0][this.state.formData[0].selectedLanguages[0]]['template-content'];
+    const previewSubject = this.state.formData['template-subject'];
+    const testOrPreviewProps = {channel: EMAIL, content: previewContent, subject: previewSubject};
+    const { onPreviewContentClicked, onTestContentClicked } = this.props;
+    return (
+      <CapButton
+        style={{
+          color: FONT_COLOR_05,
+          display: 'inline-block',
+          padding: '0 6px',
+        }}
+        type="flat"
+        onClick={() => action === 'PREVIEW' ? onPreviewContentClicked(testOrPreviewProps) : onTestContentClicked(testOrPreviewProps)}
+      >
+        <CapIcon type={action === 'PREVIEW' ? "eye" : "lab"}/>
+        {action === 'PREVIEW' ? <FormattedMessage {...messages.preview} /> : <FormattedMessage {...messages.testMessage} />}
+      </CapButton>
+    );
+  };
+
   render() {
     // const pageHeading = (this.state.isEdit) ? this.props.intl.formatMessage(messages.editHeading) : this.props.intl.formatMessage(messages.createHeading);
     // const actionComponents = '';
@@ -2571,7 +2593,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const previewHeader = (<h3>{this.props.intl.formatMessage(messages.h3emailPreview)}</h3>);
     const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = this.getImagePreviewContent();
-    const { selectedOfferDetails, onPreviewContentClicked, onTestContentClicked } = this.props;
+    const { selectedOfferDetails, getDefaultTags } = this.props;
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2579,35 +2601,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
       tags = this.props.supportedTags;
     }
-    const previewContent = this.state.formData[0][this.state.formData[0].selectedLanguages[0]]['template-content'];
-    const previewSubject = this.state.formData['template-subject'];
+    const showTestAndPreview = getDefaultTags === 'outbound';
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>
-          <div className="test-and-preview-container">
-            <CapButton
-              style={{
-                color: '#2466ea',
-                display: 'inline-block',
-                padding: '0 6px',
-              }}
-              type="flat"
-              onClick={() => this.props.onPreviewContentClicked({channel: EMAIL, content: previewContent, subject: previewSubject})}
-            >
-              <CapIcon type="eye"/><FormattedMessage {...messages.preview} />
-            </CapButton>
-            <CapButton
-              style={{
-                color: '#2466ea',
-                display: 'inline-block',
-                padding: '0 6px',
-              }}
-              type="flat"
-              onClick={() => this.props.onTestContentClicked({channel: EMAIL, content: previewContent, subject: previewSubject})}
-            >
-              <CapIcon type="lab"/><FormattedMessage {...messages.testMessage} />
-            </CapButton>
-          </div>
+          { showTestAndPreview &&
+            <div className="test-and-preview-container">
+              {this.showTestAndPreviewIcons('PREVIEW')}
+              {this.showTestAndPreviewIcons('TEST')}
+            </div>
+          }
           <Row>
             <Col>
               { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?

package/v2Containers/Line/Create/constants.js

@@ -19,6 +19,10 @@ export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/Line/Create/CLEAR
 export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
 export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_FAILURE';
 
+export const LINE_IMG_HEIGHT = 400;
+export const LINE_IMG_WIDTH = 300;
+export const LINE_IMG_SIZE = 30000000;
+
 
 // edit
 

package/v2Containers/Line/Create/index.js

@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux';
 import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
-import { CapSpin, CapHeading, CapRow, CapColumn } from '@capillarytech/cap-ui-library';
+import { CapSpin, CapHeading, CapRow, CapColumn, CapNotification } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import * as actions from './actions';
 import Gallery from '../../Assets/Gallery';
@@ -18,6 +18,11 @@ import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import './_lineCreate.scss';
 import withCreatives from '../../../hoc/withCreatives';
+import {
+  LINE_IMG_HEIGHT,
+  LINE_IMG_WIDTH,
+  LINE_IMG_SIZE,
+} from './constants';
 
 export class Line extends Component {
   constructor(props) {
@@ -867,15 +872,22 @@ export class Line extends Component {
 
   uploadImage = (pearmData) => {
     const data = pearmData;
-    if (data.file.size > 1000000) {
-      const message = getMessageObject(
-        'error',
-        this.props.intl.formatMessage(
-          messages['File size cannot be more than 1mb']
+    const {
+      file: {
+        size,
+      },
+      fileParams: {
+        height,
+        width,
+      },
+      type,
+    } = pearmData;
+    if (type === "wrong file" || size > LINE_IMG_SIZE || height > LINE_IMG_HEIGHT || width > LINE_IMG_WIDTH) {
+      CapNotification.error({
+        message: this.props.intl.formatMessage(
+          messages.lineImageIncorrectSize
         ),
-        true
-      );
-      this.props.globalActions.addMessageToQueue(message);
+      });
     } else {
       data.fileParams.isGeneratePreview = true;
       this.props.actions.uploadAsset(

package/v2Containers/Line/Create/messages.js

@@ -222,4 +222,8 @@ export default defineMessages({
     id: 'creatives.containers.Create.templateMessagePreviewPropsInductiveText',
     defaultMessage: 'The relevant image that complements the message context.',
   },
+  "lineImageIncorrectSize": {
+    id: 'creatives.containers.Create.lineImageIncorrectSize',
+    defaultMessage: 'Please upload the image with correct type, size and dimension',
+  },
 });

package/v2Containers/TagList/index.js

@@ -156,18 +156,20 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       };
     };
     offerDetails.forEach((offer) => {
-      const { id, couponName } = offer;
+      const { id, couponName, description, couponSeriesId } = offer;
+      const couponId = id || couponSeriesId;
       const couponSubTags = {};
       couponTagsKeys.forEach((couponTagKey) => {
-        const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], id);
+        const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], couponId);
         couponSubTags[couponTagKey] = couponSubTagsObj;
       });
-      const key = couponName || id;
+      const couponNameFinal = couponName || description;
+      const key = couponNameFinal || couponId;
       couponTags[key] = {
         'tag-header': true,
-        'name': couponName || id,
-        'desc': couponName || id,
-        'couponSeriesId': id,
+        'name': couponNameFinal || couponId,
+        'desc': couponNameFinal || couponId,
+        'couponSeriesId': couponId,
         'subtags': couponSubTags,
         'resolved': true,
         'couponTags': true,