@capillarytech/creatives-library 3.9.21 → 3.10.0

package/components/TemplatePreview/index.js

@@ -8,145 +8,18 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
-import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip} from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape} from 'react-intl';
+import {CapColumn} from '@capillarytech/cap-react-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;
@@ -165,9 +38,7 @@ 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) => {
@@ -182,66 +53,34 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
         { channel && channel.toLowerCase() === 'sms' &&
-            (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 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>)
                 }
-                  </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">
-            <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            <img 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" ?
@@ -256,7 +95,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         {content.bodyText}
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <CapImage src={content.bodyImage} alt="" />
+                        <img src={content.bodyImage} alt="" />
                       </div>}
                       {content.actions.filter((action) => action.label).length ?
                         <div className="actions">
@@ -272,7 +111,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">
-                        <CapImage src={content.bodyImage} alt=""/>
+                        <img src={content.bodyImage} alt=""/>
                       </div>}
                       <div className="title">
                         {content.header}
@@ -291,11 +130,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
-              <CapImage className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              <div className="msgContainer line-preview">
+              <img className="preview-image" 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="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
-                  { (content && content.bodyImage) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
                   { (content && content.bodyText) ? content.bodyText : ''}
                 </div>
               </div>
@@ -310,18 +149,7 @@ 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', 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>
+                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</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,10 +10,6 @@ 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",
@@ -50,21 +46,4 @@ 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,6 +109,13 @@ 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() {
@@ -230,19 +237,18 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   uploadImages(e, {files}) {
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
-    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);
+    //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,
         };
-      }
+        that.props.actions.uploadAsset(files[file], 'image', fileParams);
+      };
     }
   }
 
@@ -375,10 +381,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>
@@ -388,49 +394,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} />
+          {!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>
                   </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>
-          </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> :
+            <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,7 +75,6 @@ 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,10 +43,6 @@ 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';
@@ -90,7 +86,6 @@ 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';
@@ -128,5 +123,4 @@ export { CapContainer,
   CreativesContainer,
   updateCharCount,
   FacebookContainer,
-  GalleryContainer,
 };

package/package.json

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

package/routes.js

@@ -630,8 +630,6 @@ 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);
@@ -650,7 +648,6 @@ export default function createRoutes(store) {
           weChatRichmediaTemplatesEditSagas, weChatRichmediaTemplatesEditReducer,
           galleryReducer, gallerySagas,
           facebookSagas, facebookReducer,
-          lineCreateSagas, lineCreateReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -666,7 +663,6 @@ 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);
@@ -680,7 +676,6 @@ 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, LINE} from '../v2Containers/CreativesContainer/constants';
+import {SMS, EMAIL, MOBILE_PUSH, WECHAT} from '../v2Containers/CreativesContainer/constants';
 export default function getSchema(channel) {
   let schemaPath = '../containers/';
   switch (channel.toUpperCase()) {
@@ -14,9 +14,6 @@ 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`);
   }