@capillarytech/creatives-library 6.9.2 → 6.9.5

package/components/CapTagList/index.js

@@ -187,7 +187,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
               <Tree
-                styling={{height: '350px', overflow: 'auto'}}
+                styling={{'height': '350px', 'overflow': 'auto'}}
                 onSelect={this.handleOnSelect}
                 selectedKeys={this.state.tagValue}
                 expandedKeys={this.state.expandedKeys}

package/components/Edmeditor/index.js

@@ -44,7 +44,7 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
     console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
     return (
       this.props.edmSrc ?
-        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{height: "calc(100vh - 180px)"}}></iframe>)
+        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{"height": "calc(100vh - 180px)"}}></iframe>)
       : 'aaasass'
     );
   }

package/components/FormBuilder/index.js

@@ -912,6 +912,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   };
   saveForm(saveForm) {
+    
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;

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/containers/TagList/index.js

@@ -71,10 +71,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
-      const userLocale = this.props.userLocale;
       if (!tag['tag-header']) {
         mainTags[tag.value] = {
-          name: tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
+          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
           desc: tag.desc ? tag.desc : tag.label.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
@@ -83,9 +82,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         console.log('Inside ', tag.label);
         mainTags[tag.value] = {
           'tag-header': true,
-          "name": tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
-          "desc": tag.desc ? tag.desc : tag.label.en,
-          "subtags": tag.subtags,
+          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          desc: tag.desc ? tag.desc : tag.label.en,
+          subtags: tag.subtags,
         };
       }
     });

package/index.html

@@ -11,11 +11,6 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <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':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.9.2",
+  "version": "6.9.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -16,7 +16,6 @@
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
     "@capillarytech/cap-ui-utils": "1.2.6",
-    "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",
     "jquery": "^3.3.1",

package/services/api.js

@@ -319,38 +319,23 @@ export const getCmsTemplateSettings = (cmsType, projectId, cmsMode, langId, isEd
   return API.get(url);
 };
 
-export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, isEdmSupport) => {
-  const url = `${API_ENDPOINT}/cms/v2/getDetails/?type=${cmsType}&projectId=${projectId}&cmsMode=${cmsMode}&langId=${langId}&isEdmSupport=${isEdmSupport ? 1 : 0}`;
-  return API.get(url);
-};
-
-
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
 };
 
-export const getCmsTemplateDataV2 = (cmsType, projectId, langId) => {
-  const url = `${API_ENDPOINT}/cms/v2/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
-  return API.get(url);
-};
-
 export const getCmsData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getCmsData?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
 };
 
+
 export const getEdmTemplates = () => {
   console.log('in api.js');
   const url = `${API_ENDPOINT}/templates/email/default`;
   return request(url, getAPICallObject('GET'));
 };
 
-export const getDefaultBeeTemplates = () => {
-  const url = `${API_ENDPOINT}/templates/v2/email/default`;
-  return request(url, getAPICallObject('GET'));
-}
-
 // All about line
 
 export const createLineTemplate = ({template}) => {

package/v2Components/CapTagList/index.js

@@ -156,72 +156,50 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   render() {
-    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps } = this.props;
-    const tg = tags;
-    const {formatMessage} = intl;
-    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible } = this.state;
+    const tg = this.props.tags;
     const options = [
       {
         value: "All",
-        label: formatMessage(messages.all),
+        label: this.props.intl.formatMessage(messages.all),
         key: 'all',
       },
       {
         value: "Outbound",
-        label: formatMessage(messages.outbound),
+        label: this.props.intl.formatMessage(messages.outbound),
         key: 'outbound',
       },
       {
         value: "Loyalty",
-        label: formatMessage(messages.loyalty),
+        label: this.props.intl.formatMessage(messages.loyalty),
         key: 'loyalty',
       },
     ];
-    const contentSection = (<div>
-      <CapSpin tip={formatMessage(messages.gettingTags)} spinning={this.props.loading}>
-        <Search
-          style={{ marginBottom: 8, width: '250px'}}
-          placeholder={formatMessage(messages.search)}
-          onChange={this.onChange} />
-        {moduleFilterEnabled ?
-          <CapSelect
-            getPopupContainer={(triggerNode) => triggerNode.parentNode}
-            style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}}
-            onChange={this.props.onContextChange}
-            defaultValue={formatMessage(messages.all)}
-            options={options}>
-          </CapSelect> : ''}
-        <CapTree
-          styling={{height: '350px', overflow: 'auto'}}
-          onSelect={this.handleOnSelect}
-          selectedKeys={tagValue}
-          expandedKeys={expandedKeys}
-          autoExpandParent={autoExpandParent}
-          onExpand={this.onExpand}
-      >
-          {this.renderTags(tg, searchValue)}
-        </CapTree>
-      </CapSpin>
-    </div>);
     return (
-      <>
-        {hidePopover ? <CapModal
-          visible={this.props.visibleTaglist}
-          footer={[]}
-          {...modalProps}
-          >
-          {contentSection}
-        </CapModal> :
+      <div>
         <CapPopover
-          visible={visible}
+          visible={this.state.visible}
           onVisibleChange={this.togglePopoverVisibility}
-          content={contentSection}
+          content={<div>
+            <CapSpin tip={this.props.intl.formatMessage(messages.gettingTags)} spinning={this.props.loading}>
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props.intl.formatMessage(messages.search)} onChange={this.onChange} />
+              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue={this.props.intl.formatMessage(messages.all)} options={options}>
+              </CapSelect> : ''}
+              <CapTree
+                styling={{height: '350px', overflow: 'auto'}}
+                onSelect={this.handleOnSelect}
+                selectedKeys={this.state.tagValue}
+                expandedKeys={this.state.expandedKeys}
+                autoExpandParent={this.state.autoExpandParent}
+                onExpand={this.onExpand}
+              >
+                {this.renderTags(tg, this.state.searchValue)}
+              </CapTree>
+            </CapSpin>
+          </div>}
           trigger="click"
-          placement="topLeft"
-          >
-          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
+          placement="bottomRight">
+          <CapButton isAddBtn type="flat">{this.props.label !== '' ? this.props.label : ''}</CapButton>
         </CapPopover>
-        }
         <CapModal
           visible={this.state.showModal}
           title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
@@ -237,7 +215,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           <p>{this.props.intl.formatMessage(messages.numberOfDaysBeforeExpiry)}</p>
           <CapInput onChange={this.handleDynamicDateChange} value={this.state.dynamicDateValue} size="default"></CapInput>
         </CapModal>
-      </>
+      </div>
     );
   }
 }
@@ -250,13 +228,6 @@ CapTagList.propTypes = {
   loading: PropTypes.bool,
   moduleFilterEnabled: PropTypes.bool,
   intl: intlShape.isRequired,
-  visibleTaglist: PropTypes.bool,
-  hidePopover: PropTypes.bool,
-  modalProps: PropTypes.any,
-};
-
-CapTagList.defaultValue = {
-  hidePopover: false,
 };
 
 export default injectIntl(CapTagList);

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/CmsTemplatesComponent/index.js

@@ -7,23 +7,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // import styled from 'styled-components';
-import {CapButton, CapCustomCard, CapSpin} from '@capillarytech/cap-ui-library';
+import {CapButton, CapCustomCard} from '@capillarytech/cap-ui-library';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 const {CapCustomCardList} = CapCustomCard;
 function CmsTemplatesComponent(props) {
-  const cardDataList = (props.cmsTemplates || []).map((template) => (
+  const cardDataList = props.cmsTemplates.map((template) => (
     {
       key: template.name,
       title: template.name,
       url: template.versions.base.preview_http_url,
       hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
     }));
-  return (<CapSpin spinning={props.cmsTemplatesLoader}>
+  return (<div>
     <div className="pagination-container">
       <CapCustomCardList cardList={cardDataList} type="Email" />
     </div>
-  </CapSpin>);
+  </div>);
 }
 
 CmsTemplatesComponent.propTypes = {

package/v2Components/Edmeditor/index.js

@@ -44,7 +44,7 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
     console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
     return (
       this.props.edmSrc ?
-        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{height: "calc(100vh - 180px)"}}></iframe>)
+        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{"height": "calc(100vh - 180px)"}}></iframe>)
       : 'aaasass'
     );
   }

package/v2Components/EmailPreview/_emailPreview.scss

@@ -9,8 +9,8 @@
 
   #emailPreivew-container {
     position: relative;
-    left: 18vw;
-    width: 82vw;
+    left: 20vw;
+    width: 80vw;
     height: 100vh;
     background: rgba(255,255,255,1);
     // padding: 0 24px 0 24px;