@capillarytech/creatives-library 3.10.0 → 3.11.0

package/components/TemplatePreview/index.js

@@ -8,18 +8,145 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, intlShape} from 'react-intl';
-import {CapColumn} from '@capillarytech/cap-react-ui-library';
+import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
+const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
+const wechatMobileAndroid = require('./assets/images/wechat_mobile_android.svg');
+const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
+const smsAndroidHomeScreen = require('./assets/images/home-screen-android.svg');
+const smsIosHomeScreen = require('./assets/images/home-screen-ios.svg');
 const wechatBody = require('./assets/images/WECHAT_5x.png');
 const smsBody = require('./assets/images/mobile.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  getWechatAndroidPreview = (content) => (
+    <div className="shell-lock-screen-android align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer wechat">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text">
+          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer wechat">
+          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            {content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getWechatIosPreview = (content) => (
+    <div className="shell-lock-screen-ios align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer wechat">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text-reply">
+          <FormattedMessage {...messages.reply}/>
+        </div>
+        <div className="action-text-cancel">
+          <FormattedMessage {...messages.cancel}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer wechat">
+          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            {content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getSmsAndroidPreview = (content) => (
+    <div className="shell-lock-screen-android align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer sms">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text">
+          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer sms">
+          <div className={"message-pop sms"}>
+            {content && content.length && content.map((msg) =>
+              <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                {msg}
+              </CapColumn>)
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getSmsIosPreview = (content) => (
+    <div className="shell-lock-screen-ios align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer sms">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text-reply">
+          <FormattedMessage {...messages.reply}/>
+        </div>
+        <div className="action-text-cancel">
+          <FormattedMessage {...messages.cancel}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image sms" src={smsMobileIos} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer sms">
+          <div className={"message-pop sms"}>
+            {content && content.length && content.map((msg) =>
+              <CapColumn className="message-pop-item align-left" style={{ background: '#ebecf0', color: '#091e42'}}>
+                {msg}
+              </CapColumn>)
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   render() {
     console.log('preview props', this.props);
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
@@ -38,7 +165,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
       //console.log('message text', smsText);
     }
+    const showLockScreenPreview = !!this.props.showLockScreenPreview;
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
+    const { containsUnicodeContent = false } = this.props;
     let iosActions = [];
     if (channel.toLowerCase() === "mobilepush") {
       iosActions = _.map(content.actions, (action) => {
@@ -53,34 +182,66 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
         { channel && channel.toLowerCase() === 'sms' &&
-          <div className="shell align-center" id="sms-preview">
-            <img className="preview-image sms" src={smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-            <div className="msgContainer sms">
-              <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />
-              <div className={"message-pop sms"}>
-                {content && content.length && content.map((msg) =>
-                  <CapColumn className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
-                    {msg}
-                  </CapColumn>)
+            (showLockScreenPreview ? (
+              <CapTab
+                panes={[
+                  {
+                    content: this.getSmsAndroidPreview(content),
+                    tab: <CapIcon type="android" size="m" />,
+                    key: 'android',
+                  },
+                  {
+                    content: this.getSmsIosPreview(content),
+                    tab: <CapIcon type="ios" size="m" />,
+                    key: 'ios',
+                  },
+                ]}
+                tabBarStyle={{margin: 'auto', width: '14%'}}
+              />
+            ) : (
+              <div className="shell align-center" id="sms-preview">
+                <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+                <div className="msgContainer sms">
+                  <div className={"message-pop sms"}>
+                    {content && content.length && content.map((msg) =>
+                      <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                        {msg}
+                      </CapColumn>)
                 }
+                  </div>
+                </div>
+              </div>)
+            )}
+        {channel && channel.toLowerCase() === 'wechat' &&
+          (showLockScreenPreview ? (
+            <CapTab
+              panes={[
+                {
+                  content: this.getWechatAndroidPreview(content),
+                  tab: <CapIcon type="android" size="m" />,
+                  key: 'android',
+                },
+                {
+                  content: this.getWechatIosPreview(content),
+                  tab: <CapIcon type="ios" size="m" />,
+                  key: 'ios',
+                },
+              ]}
+              tabBarStyle={{margin: 'auto', width: '14%'}}
+            />
+          ) : (
+            <div className="shell align-center" id="sms-preview">
+              <CapImage className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatMobileAndroid : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div className="msgContainer">
+                <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
+                </div>
               </div>
             </div>
-          </div>
-        }
-        {channel && channel.toLowerCase() === 'wechat' ?
-          ( <div className="shell align-center" id="sms-preview">
-            <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-            <div className="msgContainer">
-              {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />}
-              <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
-              </div>
-            </div>
-          </div>
-          ) : ''
-        }
+          )
+        )}
         { channel && (channel.toLowerCase() === 'mobilepush') &&
           (<div className="shell align-center" id="mobilepush-preview">
-            <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
                 <div className={`${this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
@@ -95,7 +256,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         {content.bodyText}
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <img src={content.bodyImage} alt="" />
+                        <CapImage src={content.bodyImage} alt="" />
                       </div>}
                       {content.actions.filter((action) => action.label).length ?
                         <div className="actions">
@@ -111,7 +272,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <img src={content.bodyImage} alt=""/>
+                        <CapImage src={content.bodyImage} alt=""/>
                       </div>}
                       <div className="title">
                         {content.header}
@@ -130,11 +291,11 @@ 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)}/>
-              <div className="msgContainer">
+              <CapImage className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div className="msgContainer line-preview">
                 <div className="sms-icon" style={{ width: '25px', height: '25px', 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.bodyImage) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
                   { (content && content.bodyText) ? content.bodyText : ''}
                 </div>
               </div>
@@ -149,7 +310,18 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 {smsDetails.unicode &&
                 <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.smsFormatType)}`}</div>
                 }
-                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</div>
+                <div style={{marginTop: '8px', fontSize: '16px', display: 'inline-flex'}} >
+                  {`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}
+                  {containsUnicodeContent &&
+                    <CapTooltip
+                      title={this.props.intl.formatMessage(
+                        messages.unicodeIconTooltip,
+                      )}
+                    >
+                      <CapIcon type="unicode" style={{ marginLeft: 4 }} />
+                    </CapTooltip>
+                  }
+                </div>
                 {smsDetails.optoutUrlPresent && <div style={{fontWeight: '100', fontSize: '12px'}}>
                   {`${this.props.intl.formatMessage(messages.includesOptoutTag)} (${smsDetails.optouturlLength} ${this.props.intl.formatMessage(messages.characters)})`}
                 </div>}

package/components/TemplatePreview/messages.js

@@ -10,6 +10,10 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.previewGenerationMessage',
     defaultMessage: "Preview is being generated",
   },
+  senderId: {
+    id: 'creatives.components.TemplatePreview.senderId',
+    defaultMessage: "Sender ID",
+  },
   sms: {
     id: 'creatives.components.TemplatePreview.sms',
     defaultMessage: "SMS",
@@ -46,4 +50,21 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.smsIcon',
     defaultMessage: 'Sms Icon',
   },
+  markAsRead: {
+    id: 'creatives.components.TemplatePreview.markAsRead',
+    defaultMessage: 'Mark as read',
+  },
+  reply: {
+    id: 'creatives.components.TemplatePreview.reply',
+    defaultMessage: 'Reply',
+  },
+  cancel: {
+    id: 'creatives.components.TemplatePreview.cancel',
+    defaultMessage: 'Cancel',
+  },
+  unicodeIconTooltip: {
+    id: `creatives.components.TemplatePreview.unicodeIconTooltip`,
+    defaultMessage:
+      'This message has unicode characters. This may affect the cost per message.',
+  },
 });

package/containers/Assets/Gallery/index.js

@@ -109,13 +109,6 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       const message = getMessageObject('error', this.props.intl.formatMessage(messages.assetDeleteFailed), true);
       this.props.globalActions.addMessageToQueue(message);
     }
-    if ( nextProps.Gallery.itemDeleted || !nextProps.Gallery.assetUploading) {
-      const params = {
-        name: this.state.searchText,
-        sortBy: 'Most Recent',
-      };
-      this.getAllAssets({params}, true);
-    }
   }
 
   componentWillUnmount() {
@@ -237,18 +230,19 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   uploadImages(e, {files}) {
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
-    //const file = files[0];
-    for (let file in files){
-      const img = new Image();
-      const that = this;
-      img.src = _URL.createObjectURL(files[file]);
-      img.onload = function () {
-        const fileParams = {
-          width: this.width,
-          height: this.height,
+    for (const file in files) {
+      if (files.hasOwnProperty(file)) {
+        const img = new Image();
+        const that = this;
+        img.src = _URL.createObjectURL(files[file]);
+        img.onload = function () {
+          const fileParams = {
+            width: this.width,
+            height: this.height,
+          };
+          that.props.actions.uploadAsset(files[file], 'image', fileParams);
         };
-        that.props.actions.uploadAsset(files[file], 'image', fileParams);
-      };
+      }
     }
   }
 
@@ -381,10 +375,10 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     return (
       <div>
         {/*<Spin spinning={this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets}>*/}
-          <Helmet
-            title={this.props.intl.formatMessage(messages.gallery)}
+        <Helmet
+          title={this.props.intl.formatMessage(messages.gallery)}
           />
-          {/* this.props.location.query.type !== 'embedded' && <Row style={{marginBottom: '16px'}}>
+        {/* this.props.location.query.type !== 'embedded' && <Row style={{marginBottom: '16px'}}>
             <Col>
               <Breadcrumb>
                 <Breadcrumb.Item>Campaigns</Breadcrumb.Item>
@@ -394,49 +388,49 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             </Col>
           </Row> */}
 
-          {!this.state.showEmbeddedPreview && <PageHeader pageHeading={pageHeading} actionComponents={actionComponents} />}
-
-          {this.state.showEmbeddedPreview ?
-            <div className="embedded-preview-wrapper">
-              <div className="embedded-preview-header" onClick={this.hideEmbeddedPreviewMode}>
-                <p className="embedded-preview-header-wrapper" style={{display: 'inline-flex'}}>
-                  <i className="material-icons">arrow_back</i>
-                  <span className="embedded-preview-header-text">
-                    <FormattedMessage {...messages.backToGallery} />
-                  </span>
-                </p>
-              </div>
-              <div style={{height: "75vh", width: '100%'}}>
-                <div style={{overflow: 'hidden', textAlign: 'center'}}>
-                  <div style={{ display: 'table', height: '75vh', width: '85vw', background: 'url(https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg)' }}>
-                    <div style={{ height: "75vh", display: 'table-cell', verticalAlign: 'middle' }}>
-                      <img style={{maxWidth: '100%', maxHeight: '100%'}} src={this.state.selectedAsset.metaInfo.secure_file_path ? this.state.selectedAsset.metaInfo.secure_file_path : this.state.selectedAsset.metaInfo.public_url} alt={this.state.selectedAsset.name} />
-                    </div>
+        {!this.state.showEmbeddedPreview && <PageHeader pageHeading={pageHeading} actionComponents={actionComponents} />}
+
+        {this.state.showEmbeddedPreview ?
+          <div className="embedded-preview-wrapper">
+            <div className="embedded-preview-header" onClick={this.hideEmbeddedPreviewMode}>
+              <p className="embedded-preview-header-wrapper" style={{display: 'inline-flex'}}>
+                <i className="material-icons">arrow_back</i>
+                <span className="embedded-preview-header-text">
+                  <FormattedMessage {...messages.backToGallery} />
+                </span>
+              </p>
+            </div>
+            <div style={{height: "75vh", width: '100%'}}>
+              <div style={{overflow: 'hidden', textAlign: 'center'}}>
+                <div style={{ display: 'table', height: '75vh', width: '85vw', background: 'url(https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg)' }}>
+                  <div style={{ height: "75vh", display: 'table-cell', verticalAlign: 'middle' }}>
+                    <img style={{maxWidth: '100%', maxHeight: '100%'}} src={this.state.selectedAsset.metaInfo.secure_file_path ? this.state.selectedAsset.metaInfo.secure_file_path : this.state.selectedAsset.metaInfo.public_url} alt={this.state.selectedAsset.name} />
                   </div>
-                  <a href={this.state.selectedAsset.metaInfo.public_url} target="_blank" style={{ position: 'fixed', right: '24px', bottom: '17vh' }} ><i className="material-icons" style={{ color: '#2E89DF', cursor: 'pointer' }}>fullscreen</i></a>
-                </div>
-                <div style={{ fontSize: '14px', color: '#333333', lineHeight: '24px', fontFamily: 'OpenSans', textAlign: 'center', paddingTop: '10px'}}>
-                  <p><span><FormattedMessage {...messages.dimensions} />: </span> <span>{`${this.state.selectedAsset.metaInfo.width}X${this.state.selectedAsset.metaInfo.height} px`}</span></p>
-                  <p><span><FormattedMessage {...messages.size} />: </span> <span>{this.state.selectedAsset.metaInfo.file_size}</span></p>
-                  <p><span><FormattedMessage {...messages.uploadedOn} />: </span> <span>{moment(this.state.selectedAsset.updatedAt).format('DD MMM YYYY hh:mm A')}</span></p>
-                  {/* <p><span>URL: </span> <span>{this.state.selectedAsset.metaInfo.publicUrl}</span></p> */}
                 </div>
+                <a href={this.state.selectedAsset.metaInfo.public_url} target="_blank" style={{ position: 'fixed', right: '24px', bottom: '17vh' }} ><i className="material-icons" style={{ color: '#2E89DF', cursor: 'pointer' }}>fullscreen</i></a>
+              </div>
+              <div style={{ fontSize: '14px', color: '#333333', lineHeight: '24px', fontFamily: 'OpenSans', textAlign: 'center', paddingTop: '10px'}}>
+                <p><span><FormattedMessage {...messages.dimensions} />: </span> <span>{`${this.state.selectedAsset.metaInfo.width}X${this.state.selectedAsset.metaInfo.height} px`}</span></p>
+                <p><span><FormattedMessage {...messages.size} />: </span> <span>{this.state.selectedAsset.metaInfo.file_size}</span></p>
+                <p><span><FormattedMessage {...messages.uploadedOn} />: </span> <span>{moment(this.state.selectedAsset.updatedAt).format('DD MMM YYYY hh:mm A')}</span></p>
+                {/* <p><span>URL: </span> <span>{this.state.selectedAsset.metaInfo.publicUrl}</span></p> */}
               </div>
-            </div> :
-            <Spin spinning={this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets}>
-              <Pagination onPageChange={() => { this.getAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
-                <CardGrid
-                  listItem={this.prepareData()}
-                  filterContent={filterContent}
-                  onHoverItem={this.handleOnHoverItem}
-                  onItemClick={this.handleOnHoverItem}
-                  colNumber={this.props.location.query.type === 'embedded' ? 2 : 4}
-                  enablePagination
+            </div>
+          </div> :
+          <Spin spinning={this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets}>
+            <Pagination onPageChange={() => { this.getAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
+              <CardGrid
+                listItem={this.prepareData()}
+                filterContent={filterContent}
+                onHoverItem={this.handleOnHoverItem}
+                onItemClick={this.handleOnHoverItem}
+                colNumber={this.props.location.query.type === 'embedded' ? 2 : 4}
+                enablePagination
                 />
-              </Pagination>
-            </Spin>
+            </Pagination>
+          </Spin>
           }
-          {this.state.showImagePreviewModal && this.renderAssetPreviewModal()}
+        {this.state.showImagePreviewModal && this.renderAssetPreviewModal()}
         {/*</Spin>*/}
       </div>
     );

package/containers/Cap/index.js

@@ -75,6 +75,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.props.locationActions.changeLocale(locale);
   }
 
+
   componentWillReceiveProps(nextProps) {
     const user = this.props.Global.user;
     const nextPropsUser = nextProps.Global.user;

package/index.js

@@ -43,6 +43,10 @@ import Facebook from './v2Containers/Facebook';
 import facebookReducer from './v2Containers/Facebook/reducer';
 import facebookSaga from './v2Containers/Facebook/sagas';
 
+import Gallery from './v2Containers/Assets/Gallery';
+import galleryReducer from './v2Containers/Assets/Gallery/reducer';
+import gallerySagas from './v2Containers/Assets/Gallery/sagas';
+
 import MobilepushCreate from './v2Containers/MobilePush/Create';
 import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
 import mobilepushCreateSaga from './v2Containers/MobilePush/Create/sagas';
@@ -86,6 +90,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const LineEditContainer = {LineEdit, lineEditReducer, lineEditSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
+const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 
 export {default as TagList} from './v2Containers/TagList/index';
 export {default as TagListSaga} from './v2Containers/TagList/sagas';
@@ -123,4 +128,5 @@ export { CapContainer,
   CreativesContainer,
   updateCharCount,
   FacebookContainer,
+  GalleryContainer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "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`);
   }