@capillarytech/creatives-library 3.8.7 → 3.8.8

package/v2Containers/Assets/Gallery/index.js

@@ -316,29 +316,34 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         {
           key: `${currentChannel}-card-${template.name}`,
           title: <span title={template.name} >{template.name}</span>,
-          extra: [
-            <CapIcon
-              className="view-gallery"
-              style={{marginRight: '16px'}}
-              type="eye"
-              onClick={() => { this.openPreviewMode(template); }}
-              />,
-            <CapDropdown
-              overlay={
-                <CapMenu>
-                  <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
-                    <FormattedMessage {...messages.delete} />
-                  </CapMenu.Item>
-                </CapMenu>
-          }
-        >
-              <CapIcon type="more" />
-            </CapDropdown>,
-          ],
         };
+      if (!this.props.isLineAsset) {
+        templateData.extra = [
+          <CapIcon
+            className="view-gallery"
+            style={{marginRight: '16px'}}
+            type="eye"
+            onClick={() => { this.openPreviewMode(template); }}
+            />,
+          <CapDropdown
+            overlay={
+              <CapMenu>
+                <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
+                  <FormattedMessage {...messages.delete} />
+                </CapMenu.Item>
+              </CapMenu>
+        }
+      >
+            <CapIcon type="more" />
+          </CapDropdown>,
+        ];
+      }
       if (!this.props.isFullMode) {
         templateData.hoverOption = <CapButton onClick={(e) => handlers.selectAsset(e, template._id)}><FormattedMessage {...messages.select} /></CapButton>;
       }
+      if (this.props.isLineAsset) {
+        templateData.hoverOption = <CapButton onClick={() => this.props.onGalleryImageSelect(template)}><FormattedMessage {...messages.select} /></CapButton>;
+      }
       const secureFilePath = _.get(template, 'metaInfo.secure_file_path');
       templateData.url = secureFilePath || _.get(template, 'metaInfo.public_url');
       return templateData;
@@ -347,7 +352,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: "100%"}}>
         {!isLoading && <div>
-          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className="pagination-container">
+          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
             {!_.isEmpty(searchText) && _.isEmpty(templates) && (
               <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
@@ -421,21 +426,25 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         <div style={{ marginTop: '8px', width: '50%'}}>
           <CapInput.Search
             className="search-text"
-            style={{width: '210px'}}
+            style={{width: `${this.props.isLineAsset ? '324px' : '210px'}`}}
             placeholder={this.props.intl.formatMessage(messages.search)}
             value={this.state.searchText}
             onChange={(e) => this.searchAsset(e.target.value)}
             onClear={() => this.searchAsset('')}
           />
         </div>
-        <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
-          <form encType="multipart/form-data" id="myForm">
-            <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
-            <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
-              <FormattedMessage {...messages.upload} />
-            </CapButton>
-          </form>
-        </div>
+        {
+          !this.props.isLineAsset && (
+            <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
+              <form encType="multipart/form-data" id="myForm">
+                <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
+                <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+                  <FormattedMessage {...messages.upload} />
+                </CapButton>
+              </form>
+            </div>
+          )
+        }
       </div>
     ) : <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>;
     const isLoading = this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets;
@@ -496,6 +505,8 @@ Gallery.propTypes = {
   location: PropTypes.object,
   intl: intlShape.isRequired,
   isFullMode: PropTypes.bool,
+  isLineAsset: PropTypes.bool,
+  onGalleryImageSelect: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -11,12 +11,14 @@ import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
+import LineEdit from '../Line/Create';
 import WechatWrapper from '../WeChat/Wrapper';
 import Facebook from '../Facebook';
 import { RICH_MEDIA, MAP_TEMPLATE, CREATE } from '../WeChat/Wrapper/constants';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
+import CreateLineWrapper from '../Line/CreateWrapper';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -41,6 +43,7 @@ function SlideBoxContent(props) {
       location,
       isGetFormData,
       getFormData,
+      onCreateComplete,
       messageDetails,
       onCreateNew,
       currentChannel,
@@ -80,9 +83,11 @@ function SlideBoxContent(props) {
   };
   let channel = currentChannel;//for create mode
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+  const isCreateLine = slidBoxContent === 'createTemplate' && channel === constants.LINE;
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
   let isEditSms = false;
+  let isEditLine = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
   let isPreview = false;
@@ -95,16 +100,42 @@ function SlideBoxContent(props) {
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
+    isEditLine = slidBoxContent === 'editTemplate' && channel === constants.LINE;
     isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
     isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isPreview = slidBoxContent === 'preview' && channel === constants.SMS;
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
   }
 
+  const getChannelPreviewContent = (templateDataObject) => {
+    switch (templateDataObject.type.toUpperCase()) {
+      case constants.SMS:
+        return get(templateDataObject, `versions.base['sms-editor']`);
+      case constants.LINE: {
+        const content = get(templateDataObject, `versions.base.content.messages[0]`, {});
+        let previewContent = {};
+        if (content.text) {
+          previewContent = {
+            bodyText: content.text,
+          };
+        }
+        if (content.originalContentUrl) {
+          previewContent = {
+            ...previewContent,
+            bodyImage: content.previewImageUrl,
+          };
+        }
+        return previewContent;
+      }
+      default:
+        return get(templateDataObject, `versions.base.content`);
+    }
+  };
+
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -127,10 +158,10 @@ function SlideBoxContent(props) {
         )}
       {isPreview && (
       <TemplatePreview
-        content={templateData.type.toUpperCase() === constants.SMS ? get(templateData, `versions.base['sms-editor']`) : get(templateData, `versions.base.content`)}
+        content={getChannelPreviewContent(templateData)}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={templateData.type.toLowerCase()}
-        charCounterEnabled
+        charCounterEnabled={channel === constants.SMS}
         templateData={templateData}
         showCount
         forwardedTags={forwardedTags}
@@ -319,6 +350,29 @@ function SlideBoxContent(props) {
           />
         )
       }
+      {
+        isEditLine && (
+          <LineEdit
+            location={creativesLocationProps}
+            params={{
+              id: templateData._id,
+              mode: templateData.modeType || (templateData.definition && templateData.definition.mode),
+            }}
+            route={{ name: (templateData.modeType || (templateData.definition && templateData.definition.mode)) === 'image' ? 'edit_image' : 'edit_text' }}
+            onCreateComplete={onCreateComplete}
+            isFullMode={props.isFullMode}
+          />
+        )
+      }
+      {
+        isCreateLine && (
+          <CreateLineWrapper
+            location={creativesLocationProps}
+            onCreateComplete={onCreateComplete}
+            isFullMode={props.isFullMode}
+          />
+        )
+      }
     </CreativesWrapper>
   );
 }
@@ -359,5 +413,6 @@ SlideBoxContent.propTypes = {
   onWeChatMaptemplateStepChange: PropTypes.func,
   weChatMaptemplateStep: PropTypes.string,
   onFacebookSubmit: PropTypes.func,
+  onCreateComplete: PropTypes.func,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -503,6 +503,7 @@ class Creatives extends React.Component {
             <SlideBoxContent
               key="creatives-container-slidebox-content"
               onSelectTemplate={this.onSelectTemplate}
+              onCreateComplete={getCreativesData}
               onPreviewTemplate={this.onPreviewTemplate}
               slidBoxContent={slidBoxContent}
               templateData={templateData}

package/v2Containers/EmailWrapper/index.js

@@ -20,7 +20,7 @@ import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
-import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants'
+import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants';
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const { timeTracker } = GA;
@@ -110,16 +110,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
-  stopTimerGA=()=>{
+  stopTimerGA=() => {
     // stop timer
-    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING['email'], {
+    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
       category: 'Creatives',
       action: 'Create',
       label: 'uploadZip',
     });
   }
   handleFileUpload = (file) => {
-    
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
     if (!isUploading) {
       const fileExtension = file.name.split('.').pop();
@@ -131,7 +130,6 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
           this.setState({ modeContent: { file } }, showNextStep);
           stopTimerGA();
         }, this.handleZipUploadError);
-        
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();
         reader.onload = () => {

package/v2Containers/Line/Create/_lineCreate.scss

@@ -1,11 +1,19 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
 .line-row{
   margin-bottom: 16px;
 }
-.image-container{
+.slidebox-content-container {
+  overflow-x: hidden;
+}
+.line-image {
+  position: relative;
+}
+.image-container {
   display: flex;
-  height: 150px;
-  width: 320px;
-  border: solid 1px #C2C2C2;
+  & > div {
+    min-width: 516px;
+  }
   border-radius: 5px;
   .image-placeholder{
     line-height: 150px;
@@ -18,21 +26,34 @@
     width: auto !important;
   }
 }
-//.ant-tabs-bar{
-//  margin-bottom: 0 !important;
-//  display: flex;
-//  align-items: center;
-//  flex-direction: row-reverse;
-//  justify-content: flex-end;
-//}
-//.ant-tabs-tabpane{
-//  padding: 16px 16px 16px 0;
-//  border: solid 1px #D6D6D6;
-//}
-//.ant-radio-wrapper{
-//  font-size: 14px;
-//  font-family: 'open-sans';
-//}
+
+.pagination-container.gallery-upload {
+  height: calc(100vh - 60px);
+
+  .cap-custom-card-list-col {
+    max-width: 156px;
+    max-height: 156px;
+    display: inline-block;
+    margin-left: $CAP_SPACE_04;
+    margin-right: $CAP_SPACE_04;
+  }
+
+  .ant-card-body {
+    padding-top: 0;
+
+    .ant-card-meta-description img {
+      height: 80px;
+      width: auto;
+    }
+  }
+}
+
+.gallery-image {
+  height: 156px;
+  width: 156px;
+  border-radius: 4px;
+  margin: 3px;
+}
 
 .sms-text {
   img {

package/v2Containers/Line/Create/actions.js

@@ -6,10 +6,12 @@
 
 import * as types from './constants';
 
-export function createTemplate(template) {
+export function createTemplate(template, callback) {
   console.log('action trigereed createtemplate');
   return {
-    type: types.CREATE_TEMPLATE_REQUEST, template,
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    callback,
   };
 }
 
@@ -48,9 +50,10 @@ export function clearAsset() {
 export function editTemplate(template) {
   console.log('action trigereed editTemplate line @@@');
   return {
-    type: types.EDIT_TEMPLATE_REQUEST, template,
+    type: types.EDIT_TEMPLATE_REQUEST,
+    template,
   };
-};
+}
 
 export function getTemplateDetails(id) {
   console.log('getting template line @@@', id);
@@ -59,14 +62,14 @@ export function getTemplateDetails(id) {
     id,
     channel: 'LINE',
   };
-};
+}
 
 export function clearEditResponse() {
   console.log('clearEditResponse');
   return {
     type: types.CLEAR_EDIT_RESPONSE_REQUEST,
   };
-};
+}
 
 export function clearData() {
   return {
@@ -80,11 +83,11 @@ export function getLineTemplatesList(channel, queryParams) {
     channel,
     queryParams,
   };
-};
+}
 
 export function setSelectedTemplate(templateData) {
   return {
     type: types.SET_SELECTED_TEMPLATE,
     data: templateData,
   };
-};
+}