@capillarytech/creatives-library 6.7.0 → 6.8.0

package/assets/line-image-placeholder.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
+    <defs>
+        <path id="fmb5mu5hna" d="M22.607 7.974c.3.174.55.424.724.724l10.447 17.969H0l7.45-9.671c.673-.875 1.929-1.038 2.804-.364.137.105.259.227.364.364l2.525 3.277 6.73-11.575c.555-.955 1.78-1.28 2.734-.724zM5.333 0c2.946 0 5.334 2.388 5.334 5.333 0 2.946-2.388 5.334-5.334 5.334C2.388 10.667 0 8.279 0 5.333 0 2.388 2.388 0 5.333 0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd" transform="translate(3.333 6.667)">
+        <mask id="y1v9lb6dbb" fill="#fff">
+            <use xlink:href="#fmb5mu5hna"/>
+        </mask>
+        <use fill="#BCD0FA" xlink:href="#fmb5mu5hna"/>
+        <g fill="#B3BAC5" mask="url(#y1v9lb6dbb)">
+            <path d="M1 0H41V40H1z" transform="translate(-4 -7)"/>
+        </g>
+    </g>
+</svg>

package/assets/smiley-placeholder.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <g id="➍-creatives-line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="04b.23.17.creatives_line" transform="translate(-1199.000000, -210.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M1223,210 C1209.746,210 1199,220.746 1199,234 C1199,247.254 1209.746,258 1223,258 C1236.254,258 1247,247.254 1247,234 C1247,220.746 1236.254,210 1223,210 Z M1230,226 C1231.656,226 1233,227.342 1233,229 C1233,230.658 1231.656,232 1230,232 C1228.344,232 1227,230.658 1227,229 C1227,227.342 1228.344,226 1230,226 Z M1216,226 C1217.656,226 1219,227.342 1219,229 C1219,230.658 1217.656,232 1216,232 C1214.344,232 1213,230.658 1213,229 C1213,227.342 1214.344,226 1216,226 Z M1223.002,246 C1217.4,246 1213.254,242.308 1211,238.868 L1211.986,237.882 C1215.01,240.272 1218.334,241.744 1223.002,241.744 C1227.668,241.744 1230.99,240.272 1234.014,237.882 L1235,238.868 C1232.746,242.308 1228.602,246 1223.002,246 L1223.002,246 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

package/components/TemplatePreview/index.js

@@ -18,11 +18,15 @@ 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 lineMobileAndroid = require('../../assets/line.png');
+const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
+const lineStickerPlaceholder = require('../../assets/smiley-placeholder.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');
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08 } from '@capillarytech/cap-ui-library/styled/variables';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   getWechatAndroidPreview = (content) => (
@@ -147,6 +151,22 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     </div>
   );
 
+  renderLineMultiText = (content)  => {
+      let textCount = 0;
+      return content.map((item) => {
+        const { type, messageContent = '' } = item || {};
+        if (type === 'text' && messageContent) {
+          textCount += 1;
+          return (
+            <p style={{fontSize: 16, fontWeight: "bold", margin: 0}}>
+              text msg-{textCount}: ({messageContent.length}/{1600} characters)
+            </p>
+          )
+        }
+        return null
+      });
+    }
+
   render() {
     console.log('preview props', this.props);
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
@@ -292,14 +312,171 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           (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">
-                <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.bodyText) ? content.bodyText : ''}
-                </div>
-              </div>
-              { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
+              {
+                content && Array.isArray(content)
+                ? (
+                  <>
+                    <div
+                      className="msgContainer line-preview"
+                      style={{
+                        maxHeight: 300,
+                        overflow: 'scroll',
+                        flexDirection: 'column',
+                        marginLeft: 40,
+                        left: '20%',
+                      }}
+                    >
+                      <div
+                        className="sms-icon"
+                        style={{
+                          width: 25,
+                          height: 25,
+                          background: '#2E89DF',
+                          borderRadius: '50%',
+                          paddingTop: 2,
+                          top: 12,
+                        }}
+                      >
+                        {this.props.lineAccountName}
+                      </div>
+                      {
+                        content.map((item) => {
+                          const {
+                            type,
+                            messageContent,
+                            previewImageUrl = lineImgPlaceholder,
+                            baseUrl,
+                            selectedSticker = {
+                              stickerUrl: lineStickerPlaceholder,
+                            },
+                          } = item || {};
+                          if (type === 'text') {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  background: CAP_WHITE,
+                                  color: FONT_COLOR_01,
+                                  borderRadius: 8,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  height: 'auto'
+                                }}
+                              >
+                                <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
+                              </div>
+                            );
+                          }
+                        if ((type === 'image' && previewImageUrl)) {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  background: CAP_G08,
+                                  color: FONT_COLOR_01,
+                                  borderRadius: 8,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  height: 184,
+                                  display: 'flex',
+                                  justifyContent: 'center',
+                                  alignItems: 'center',
+                                }}
+                              >
+                                <CapImage
+                                  src={previewImageUrl}
+                                  alt="brand-name"
+                                  rest={{
+                                    style: {
+                                      maxWidth: '100%',
+                                      marginBottom: 5,
+                                    },
+                                  }}
+                                />
+                              </div>  
+                            );
+                          }
+                          if ((type === 'imageMap' && baseUrl)) {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  background: CAP_G08,
+                                  color: FONT_COLOR_01,
+                                  borderRadius: 8,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  height: 184,
+                                  display: 'flex',
+                                  justifyContent: 'center',
+                                  alignItems: 'center',
+                                }}
+                              >
+                                <CapImage
+                                  src={baseUrl ? `${baseUrl}/1040` : lineImgPlaceholder}
+                                  alt="brand-name"
+                                  rest={{
+                                    style: {
+                                      maxWidth: '100%',
+                                      marginBottom: 5,
+                                    },
+                                  }}
+                                />
+                              </div>  
+                            );
+                          }
+                          if (type === 'sticker' && selectedSticker) {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  background: 'transparent',
+                                  color: FONT_COLOR_01,
+                                  color: FONT_COLOR_01,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  display: 'flex',
+                                  justifyContent: 'center',
+                                  alignItems: 'center',
+                                }}
+                              >
+                                <CapImage 
+                                  src={selectedSticker.stickerUrl}
+                                  style={{maxWidth: '100%', marginBottom: 5 }}
+                                  rest={{
+                                    style: {
+                                      maxWidth: '100%',
+                                      marginBottom: 5,
+                                    },
+                                    height: 70,
+                                    onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
+                                    onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||  selectedSticker.stickerUrl),
+                                  }}
+                                />
+                              </div>  
+                            );
+                          }
+                          return null;
+                        })
+                      }
+                    </div>
+                    {this.renderLineMultiText(content)}
+                  </>
+                )
+                : (
+                  <>
+                    <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) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                        { (content && content.bodyText) ? content.bodyText : ''}
+                      </div>
+                    </div>
+                    { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
+                  </>
+                )
+              }
+              
             </div>
           ) : ''
         }

package/index.js

@@ -56,9 +56,9 @@ import mobilepushEditReducer from './v2Containers/MobilePush/Edit/reducer';
 import mobilepushEditSaga from './v2Containers/MobilePush/Edit/sagas';
 
 
-import LineCreate from './v2Containers/Line/Create';
-import lineCreateReducer from './v2Containers/Line/Create/reducer';
-import lineCreateSaga from './v2Containers/Line/Create/sagas';
+import LineCreate from './v2Containers/Line/Container';
+import lineCreateReducer from './v2Containers/Line/Container/reducer';
+import lineCreateSaga from './v2Containers/Line/Container/sagas';
 
 import LineEdit from './v2Containers/Line/Edit';
 import lineEditReducer from './v2Containers/Line/Edit/reducer';

package/package.json

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

package/routes.js

@@ -630,8 +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'),
+          import('v2Containers/Line/Container/sagas'),
+          import('v2Containers/Line/Container/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);

package/services/api.js

@@ -239,7 +239,7 @@ export const getTemplateDetails = ({id, channel}) => {
 
 export const getAllTemplates = ({channel, queryParams}) => {
   console.log('in api.js', channel, queryParams);
-  const url = `${API_ENDPOINT}/templates/${channel}?query=${JSON.stringify(queryParams)}`;
+  const url = `${API_ENDPOINT}/templates/${channel}?query=${encodeURIComponent(JSON.stringify(queryParams))}`;
   return request(url, getAPICallObject('GET'));
 };
 
@@ -368,3 +368,6 @@ export const getMarketingObjectives = (channel) =>
     `${CAMPAIGNS_API_ENDPOINT}/socialObjectives?channel=${channel}`,
     getAPICallObject('GET', null, false, true),
   );
+
+export const getAllLineStickers = () => 
+  request(`${API_ENDPOINT}/meta/sticker`, getAPICallObject('GET'))