@capillarytech/creatives-library 6.8.6 → 6.8.8

package/app.js

@@ -76,7 +76,6 @@ Bugsnag.start({
   // eslint-disable-next-line no-undef
   apiKey: BUGSNAG_API_KEY,
   releaseStage: window.location.hostname,
-  enabledReleaseStages: ['production', 'staging'],
   plugins: [new BugsnagPluginReact()],
   onError: bugSnagErrorCallback,
 });

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

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

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -1,152 +1,152 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
-  position: absolute;
-  left: 53.5%;
-  top:28%;
-  background: white;
-  width: 19.5%;
-  text-align: left;
-  height: fit-content;
-  border-radius: 0.285rem;
-}
-
-.shell-lock-screen-android .lock-screen-preview{
-  .wechat-android-sender-id{
-    position: absolute;
-    top: 46%;
-    font-size: 10px;
-    left: 28%;
-  }
-  .wechat-android-title{
-    position: absolute;
-    top: 49%;
-    font-size: 10px;
-    left: 28%;
-    color: #5e6c84;
-  }
-  .wechat-android-action-buttons{
-    position: absolute;
-    left: 28%;
-    top: 53%;
-    font-size: 10px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-sender-id{
-    position: absolute;
-    top: 44%;
-    font-size: 10px;
-    left: 28.5%;
-  }
-  .wechat-ios-title{
-    position: absolute;
-    top: 47%;
-    font-size: 10px;
-    left: 28.5%;
-    color: #5e6c84;
-  }
-  .wechat-ios-action-reply{
-    position: absolute;
-    left: 35%;
-    top: 59%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-action-cancel{
-    position: absolute;
-    left: 34.5%;
-    top: 66%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-}
-
-.wechatMsgContainer{
-    position: absolute;
-    left: 30%;
-    top: 20%;
-    background: white;
-    width: 40%;
-    text-align: left;
-    height: fit-content;
-    border-radius: $CAP_SPACE_04;
-    .richmedia-template {
-        .richmedia-image-container {
-          width: 100%;
-          height: 102px;
-          position: relative;
-          img {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-          }
-        }
-        .name-container-with-abstract {
-          padding: $CAP_SPACE_12;
-          height: 68px;
-        }
-        .name-container {
-          position: absolute;
-          bottom: 0px;
-          height: 44px;
-          padding-top: 16px;
-          padding-left: 12px;
-          color: $CAP_WHITE;
-          opacity: 0.7;
-          width: 100%;
-          background-image: linear-gradient(to top,black 0% ,transparent 100%);
-        }
-        .additional-richmedia-container {
-          display: flex;
-          justify-content: space-between;
-          margin: 8px;
-          padding-bottom: 8px;
-          img {
-            border-radius: 4px;
-          }
-        }
-        .additional-richmedia-container:not(:last-child) {
-            border-bottom: 1px solid #dfe2e7;
-          }
-        div {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
-}
-.wechatMsgContainerOutbound{
-    position: absolute;
-    left: 35%;
-    top: 20%;
-    background: white;
-    width: 30%;
-    text-align: left;
-}
-.wechatMsgContainerCardLayout {
-    position: absolute;
-    left: 20%;
-    top: 20%;
-    background: white;
-    width: 60%;
-    text-align: left;
-}
-.overflow-handle-preview {
-    overflow-y: auto;
-}
-.overflow-handle-preview-outbound {
-    height: 330px;
-    overflow-y: auto;
-}
-.preview-overflow-wrap-fields {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    display: -webkit-box !important;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-align: left;
-    width: 200px;
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
+  position: absolute;
+  left: 53.5%;
+  top:28%;
+  background: white;
+  width: 19.5%;
+  text-align: left;
+  height: fit-content;
+  border-radius: 0.285rem;
+}
+
+.shell-lock-screen-android .lock-screen-preview{
+  .wechat-android-sender-id{
+    position: absolute;
+    top: 46%;
+    font-size: 10px;
+    left: 28%;
+  }
+  .wechat-android-title{
+    position: absolute;
+    top: 49%;
+    font-size: 10px;
+    left: 28%;
+    color: #5e6c84;
+  }
+  .wechat-android-action-buttons{
+    position: absolute;
+    left: 28%;
+    top: 53%;
+    font-size: 10px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-sender-id{
+    position: absolute;
+    top: 44%;
+    font-size: 10px;
+    left: 28.5%;
+  }
+  .wechat-ios-title{
+    position: absolute;
+    top: 47%;
+    font-size: 10px;
+    left: 28.5%;
+    color: #5e6c84;
+  }
+  .wechat-ios-action-reply{
+    position: absolute;
+    left: 35%;
+    top: 59%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-action-cancel{
+    position: absolute;
+    left: 34.5%;
+    top: 66%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+}
+
+.wechatMsgContainer{
+    position: absolute;
+    left: 30%;
+    top: 20%;
+    background: white;
+    width: 40%;
+    text-align: left;
+    height: fit-content;
+    border-radius: $CAP_SPACE_04;
+    .richmedia-template {
+        .richmedia-image-container {
+          width: 100%;
+          height: 102px;
+          position: relative;
+          img {
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+          }
+        }
+        .name-container-with-abstract {
+          padding: $CAP_SPACE_12;
+          height: 68px;
+        }
+        .name-container {
+          position: absolute;
+          bottom: 0px;
+          height: 44px;
+          padding-top: 16px;
+          padding-left: 12px;
+          color: $CAP_WHITE;
+          opacity: 0.7;
+          width: 100%;
+          background-image: linear-gradient(to top,black 0% ,transparent 100%);
+        }
+        .additional-richmedia-container {
+          display: flex;
+          justify-content: space-between;
+          margin: 8px;
+          padding-bottom: 8px;
+          img {
+            border-radius: 4px;
+          }
+        }
+        .additional-richmedia-container:not(:last-child) {
+            border-bottom: 1px solid #dfe2e7;
+          }
+        div {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+}
+.wechatMsgContainerOutbound{
+    position: absolute;
+    left: 35%;
+    top: 20%;
+    background: white;
+    width: 30%;
+    text-align: left;
+}
+.wechatMsgContainerCardLayout {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    background: white;
+    width: 60%;
+    text-align: left;
+}
+.overflow-handle-preview {
+    overflow-y: auto;
+}
+.overflow-handle-preview-outbound {
+    height: 330px;
+    overflow-y: auto;
+}
+.preview-overflow-wrap-fields {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: left;
+    width: 200px;
   }