@capillarytech/creatives-library 6.8.7 → 6.8.8

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/package.json

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