@capillarytech/creatives-library 6.9.2 → 6.9.7

package/components/TemplatePreview/_templatePreview.scss

@@ -616,4 +616,10 @@
   display: inline-block;
   background-color: #333333;
   margin-right: 4px;
+}
+
+.template-carousel.single-img {
+  .slick-track {
+    margin-left: 0;
+  }
 }

package/components/TemplatePreview/index.js

@@ -11,6 +11,7 @@ import _ from 'lodash';
 import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
 import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
+import Carousel from '../../v2Components/Carousel';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
@@ -27,6 +28,7 @@ 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';
+import { TEMPLATE, IMAGE_CAROUSEL, IMAGE_MAP_CAMEL_CASE, IMAGE, STICKER, TEXT } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   getWechatAndroidPreview = (content) => (
@@ -349,35 +351,36 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                             selectedSticker = {
                               stickerUrl: lineStickerPlaceholder,
                             },
+                            imageCarousel = [lineImgPlaceholder],
                           } = item || {};
-                          if (type === 'text') {
+                          const sectionStyle = {
+                            background: CAP_WHITE,
+                            color: FONT_COLOR_01,
+                            borderRadius: 8,
+                            position: 'static',
+                            margin: '6px 0 20px 28px',
+                            height: 'auto',
+                            minHeight: 'auto',
+                            overflow: 'initial',
+                            maxHeight: 'initial',
+                          };
+                          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'
-                                }}
+                                style={sectionStyle}
                               >
                                 <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
                               </div>
                             );
                           }
-                        if ((type === 'image' && previewImageUrl)) {
+                        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,
+                                  ...sectionStyle,
+                                  minHeight: 184,
                                   display: 'flex',
                                   justifyContent: 'center',
                                   alignItems: 'center',
@@ -396,17 +399,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
-                          if ((type === 'imageMap' && baseUrl)) {
+                          if ((type === IMAGE_MAP_CAMEL_CASE && 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,
+                                  ...sectionStyle,
+                                  minHeight: 184,
                                   display: 'flex',
                                   justifyContent: 'center',
                                   alignItems: 'center',
@@ -425,16 +424,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
-                          if (type === 'sticker' && selectedSticker) {
+                          if (type === STICKER && selectedSticker) {
                             return (
                               <div
                                 className="message-pop align-left"
                                 style={{
+                                  ...sectionStyle,
                                   background: 'transparent',
-                                  color: FONT_COLOR_01,
-                                  color: FONT_COLOR_01,
-                                  position: 'static',
-                                  margin: '6px 0 20px 28px',
                                   display: 'flex',
                                   justifyContent: 'center',
                                   alignItems: 'center',
@@ -456,6 +452,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
+                          if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
+                            return (
+                              <div
+                                style={{
+                                  margin: '40px 0 8px',
+                                }}
+                              >
+                                <Carousel imageCarousel={imageCarousel}/>
+                              </div>
+                            )
+                          }
                           return null;
                         })
                       }

package/config/app.js

@@ -14,7 +14,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
+    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',
     arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',

package/index.html

@@ -13,8 +13,6 @@
     <script src="https://use.typekit.net/ifw1ntv.js"></script>
 
     <script src="https://app-rsrc.getbee.io/plugin/BeePlugin.js" type="text/javascript"></script>
-    <!-- Roboto Font -->
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
 
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

package/package.json

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

package/v2Components/Carousel/index.js

@@ -0,0 +1,120 @@
+import React, { Component } from "react";
+import { Carousel, Icon } from 'antd';
+import './style.scss';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
+import { CAP_WHITE, CAP_G08 } from '@capillarytech/cap-ui-library/styled/variables';
+
+const arrowStyle = {
+  background: 'rgba(0, 0, 0, 0.1)',
+  display: 'block',
+  position: 'absolute',
+  color: CAP_WHITE,
+  padding: 0,
+  height: 24,
+  width: 24,
+  borderRadius: '50%',
+}
+
+const Arrow = props => {
+  const { className, style, onClick, extraStyle, type } = props
+  return (
+    <CapButton
+      className={className}
+      onClick={onClick}
+      type="flat"
+      style={{
+        ...style,
+        ...arrowStyle,
+        ...extraStyle,
+      }}
+    >
+      <CapIcon
+        type={type}
+      />
+    </CapButton>
+  )
+}
+
+const settings = {
+  nextArrow: (
+    <Arrow
+      extraStyle={{
+        right: 10,
+      }}
+      type="chevron-right"
+    />
+  ),
+  prevArrow: (
+    <Arrow
+      extraStyle={{
+        left: 8,
+        zIndex: 1,
+      }}
+      type="chevron-left"
+    />
+  ),
+}
+
+const CarouselComponent = ({
+  imageCarousel,
+}) => {
+  let carousel = React.createRef();
+  const next = () => carousel.next();
+  const previous = () => carousel.prev();
+
+  const prop = {
+    dots: false,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 0.5,
+    arrows: true,
+    swipeToSlide: true,
+    focusOnSelect: true,
+    rows: 1,
+  };
+
+  const imageCarouselLength = imageCarousel.length;
+
+  return (
+    <div style={{ position: 'relative' }} className={`template-carousel ${imageCarouselLength ? 'single-img' : ''}`}>
+      <Carousel ref={node => (carousel = node)} {...prop} {...settings}>
+        {
+          imageCarousel.map(({
+            actionLabel,
+            imageUrl = lineImgPlaceholder
+          }) => (
+            <div className="carousel-section">
+              <CapImage
+                src={imageUrl}
+                alt="brand-name"
+                rest={{
+                  style: {
+                    maxWidth: '100%',
+                  },
+                }}
+              />
+              <span
+                style={{
+                  position: 'relative',
+                  bottom: 90,
+                  background: 'rgba(94, 108, 132, 0.33)',
+                  borderRadius: '42%',
+                  padding: '0 12px',
+                  color: CAP_WHITE,
+                }}
+              >
+                {actionLabel}
+              </span>
+            </div>
+          ))
+        }
+      </Carousel>
+    </div>
+  );
+}
+
+export default CarouselComponent;

package/v2Components/Carousel/style.scss

@@ -0,0 +1,40 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.template-carousel {
+  .slick-slide {
+    width: 120px !important;
+    margin-right: 6px;
+  }
+  
+  .slick-track {
+    margin-left: 56px;
+  }
+  
+  &.single-img {
+    .slick-track {
+      margin-left: 0;
+    }
+  }
+  
+  .slick-list {
+    height: 180px;
+  }
+  
+  .carousel-section {
+    height: 160px;
+    line-height: 160px;
+    text-align: center;
+    width: 120px !important;
+    border-radius: 12px;
+    background-color: $CAP_G09,
+  }
+  
+  .ant-carousel .slick-slide {
+    .carousel-section {
+      img {
+        display: inline-block;
+        padding: 0 4px;
+      }
+    }
+  }
+}

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -44,6 +44,7 @@
     }
     &.line-preview {
       margin-left: $CAP_SPACE_16;
+      width: 40%;
 
       .message-pop {
         width: 80%;

package/v2Components/TemplatePreview/index.js

@@ -15,6 +15,7 @@ import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
+import Carousel from '../Carousel';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
@@ -23,6 +24,7 @@ const lineStickerPlaceholder = require('../../assets/smiley-placeholder.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';
+import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -313,7 +315,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <div
                 className="msgContainer line-preview"
                 style={{
-                  maxHeight: 300,
+                  maxHeight: 330,
                   overflow: 'scroll',
                   flexDirection: 'column',
                   marginLeft: 40,
@@ -343,35 +345,36 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         selectedSticker = {
                           stickerUrl: lineStickerPlaceholder,
                         },
+                        imageCarousel = [lineImgPlaceholder],
                       } = item || {};
-                      if (type === 'text') {
+                      const sectionStyle = {
+                        background: CAP_WHITE,
+                        color: FONT_COLOR_01,
+                        borderRadius: 8,
+                        position: 'static',
+                        margin: '6px 0 20px 28px',
+                        height: 'auto',
+                        minHeight: 'auto',
+                        overflow: 'initial',
+                        maxHeight: 'initial',
+                      };
+                      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'
-                            }}
+                            style={sectionStyle}
                           >
                             <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
                           </div>
                         );
                       }
-                      if ((type === 'image' && previewImageUrl)) {
+                      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,
+                              ...sectionStyle,
+                              minHeight: 184,
                               display: 'flex',
                               justifyContent: 'center',
                               alignItems: 'center',
@@ -390,17 +393,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                           </div>  
                         );
                       }
-                      if ((type === 'imagemap' && baseUrl)) {
+                      if ((type === IMAGE_MAP && 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,
+                              ...sectionStyle,
+                              minHeight: 184,
                               display: 'flex',
                               justifyContent: 'center',
                               alignItems: 'center',
@@ -419,16 +418,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                           </div>  
                         );
                       }
-                      if (type === 'sticker' && selectedSticker) {
+                      if (type === STICKER && selectedSticker) {
                         return (
                           <div
                             className="message-pop align-left"
                             style={{
+                              ...sectionStyle,
                               background: 'transparent',
-                              color: FONT_COLOR_01,
-                              color: FONT_COLOR_01,
-                              position: 'static',
-                              margin: '6px 0 20px 10px',
                               display: 'flex',
                               justifyContent: 'center',
                               alignItems: 'center',
@@ -450,6 +446,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                           </div>  
                         );
                       }
+                      if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
+                        return (
+                          <div
+                            style={{
+                              margin: '32px 0',
+                            }}
+                          >
+                            <Carousel imageCarousel={imageCarousel}/>
+                          </div>
+                        )
+                      }
                       return null;
                     })
                   }

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -175,7 +175,8 @@ function SlideBoxContent(props) {
           animatedStickerUrl,
           stickerId,
           packageId,
-          baseUrl
+          baseUrl,
+          template,
         }) => {
           let previewContent = {};
           previewContent.messageContent = text;
@@ -187,6 +188,8 @@ function SlideBoxContent(props) {
             packageId,
           };
           previewContent.baseUrl = baseUrl;
+          previewContent.imageCarousel = get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+
           const getType = () => {
             if (text) {
               return 'text';
@@ -200,6 +203,9 @@ function SlideBoxContent(props) {
             if (baseUrl) {
               return 'imagemap';
             }
+            if (template) {
+              return 'image_carousel';
+            }
           };
           previewContent.type = getType();
           return previewContent;

package/v2Containers/Line/Container/Image/index.js

@@ -72,7 +72,7 @@ export const LineImage = ({
     useEffect(() => {
         if (imageSrc && (isFullMode ? messageTitle: true) && imagePreview) {
                 updateMessageState({
-                    isError: !imageSrc || !(isFullMode ? messageTitle : true) || (isImageError && errorMessageTitle),
+                    isError: !imageSrc || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
                     originalContentUrl: imageSrc,
                     previewImageUrl: imagePreview,
                     messageTitle,
@@ -87,14 +87,16 @@ export const LineImage = ({
         if (Line.uploadedAssetData && Object.keys(Line.uploadedAssetData).length) {
             const imgSrc = get(Line, 'uploadedAssetData.metaInfo.secure_file_path', '');
             const imgPreview = get(Line, 'uploadedAssetData.metaInfo.secure_file_path_preview', '');
-            updateUploadedAssetList({
-                ...uploadedAssetList,
-                [index]: {
-                    imgPreview,
-                    imgSrc,
-                },
-            });
-            actions.clearAsset();
+            if (imsSrc) {
+                updateUploadedAssetList({
+                    ...uploadedAssetList,
+                    [index]: {
+                        imgPreview,
+                        imgSrc,
+                    },
+                });
+                actions.clearAsset();
+            }
         }
     }, [Line.uploadedAssetData]);
 
@@ -148,16 +150,16 @@ export const LineImage = ({
         let errorMessage = false;
         if (value === '') {
             errorMessage = formatMessage(messages.emptyTitleErrorMessage);
-            updateMessageState({
-                isError: true,
-                originalContentUrl: imageSrc,
-                previewImageUrl: imagePreview,
-                messageTitle: '',
-                index,
-                type: 'image',
-                messageType: 'originalContentUrl',
-            });
         }
+        updateMessageState({
+            isError: !imageSrc || !(isFullMode ? value : true) || isImageError || !value,
+            originalContentUrl: imageSrc,
+            previewImageUrl: imagePreview,
+            messageTitle: value,
+            index,
+            type: 'image',
+            messageType: 'originalContentUrl',
+        });
         updateErrorMessageTitle(errorMessage);
     }
 
@@ -407,7 +409,7 @@ export const LineImage = ({
             updateImageSrc(image);
             updateImagePreview(imagePreview);
             updateMessageState({
-                isError: !image || !(isFullMode ? messageTitle : true) || (isImageError && errorMessageTitle),
+                isError: !image || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
                 originalContentUrl: image,
                 previewImageUrl: imagePreview,
                 messageTitle,