@capillarytech/creatives-library 6.9.2 → 6.9.5

package/v2Components/TemplatePreview/assets/images/wechat_mobile_android.svg

@@ -1,20 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="220" height="472" fill="#101211" rx="26"/>
-        <rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
-        <rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
-        <path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
-        <path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
-        <rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
-        <rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
-        <circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
-        <circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
-        <text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
-            <tspan x="49.5" y="71">Muji India</tspan>
-        </text>
-        <circle cx="199" cy="63" r="1" fill="#000"/>
-        <circle cx="199" cy="70" r="1" fill="#000"/>
-        <circle cx="199" cy="66.5" r="1" fill="#000"/>
-        <path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="220" height="472" fill="#101211" rx="26"/>
+        <rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
+        <rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
+        <path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
+        <path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
+        <rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
+        <rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
+        <circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+        <circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+        <text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
+            <tspan x="49.5" y="71">Muji India</tspan>
+        </text>
+        <circle cx="199" cy="63" r="1" fill="#000"/>
+        <circle cx="199" cy="70" r="1" fill="#000"/>
+        <circle cx="199" cy="66.5" r="1" fill="#000"/>
+        <path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
+    </g>
+</svg>

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/v2Components/TemplatePreview/tests/index.test.js

@@ -1,10 +1,10 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import TemplatePreview from '../index';
-
-describe('<TemplatePreview />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import TemplatePreview from '../index';
+
+describe('<TemplatePreview />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

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/CreativesContainer/SlideBoxFooter.js

@@ -1,51 +1,51 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { CapButton } from '@capillarytech/cap-ui-library';
-import PropTypes from 'prop-types';
-import messages from './messages';
-function getFullModeSaveBtn(slidBoxContent) {
-  return slidBoxContent === "editTemplate" ?
-    <FormattedMessage {...messages.creativesTemplatesUpdate}/>
-    :
-    <FormattedMessage {...messages.creativesTemplatesSaveFullMode}/>;
-}
-function SlideBoxFooter(props) {
-  const { slidBoxContent, onSave, onEditTemplate, onCreateNextStep, isFullMode, fetchingCmsData} = props;
-  return (
-    <div>
-      <div>
-        {props.shouldShowDoneFooter() && (
-          <div>
-            <CapButton onClick={onSave} disabled={fetchingCmsData || false}>
-              {isFullMode ?
-                getFullModeSaveBtn(slidBoxContent)
-              :
-                <FormattedMessage {...messages.creativesTemplatesSave} />
-              }
-            </CapButton>
-            {/* {isFullMode && <CapButton type="secondary" onClick={onDiscard}><FormattedMessage {...messages.creativesTemplatesDiscard}/></CapButton>} */}
-          </div>)}
-        {props.shouldShowContinueFooter() &&
-          <CapButton onClick={onCreateNextStep}>
-            <FormattedMessage {...messages.continue} />
-          </CapButton>
-          }
-        {slidBoxContent === 'preview' && (
-          <CapButton onClick={onEditTemplate} type="secondary">
-            <FormattedMessage {...messages.creativesTemplatesEdit} />
-          </CapButton>
-          )}
-      </div>
-    </div>
-  );
-}
-SlideBoxFooter.propTypes = {
-  slidBoxContent: PropTypes.node,
-  onSave: PropTypes.func,
-  onEditTemplate: PropTypes.func,
-  onCreateNextStep: PropTypes.func,
-  shouldShowContinueFooter: PropTypes.func,
-  shouldShowDoneFooter: PropTypes.func,
-  isFullMode: PropTypes.bool,
-};
-export default SlideBoxFooter;
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { CapButton } from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+import messages from './messages';
+function getFullModeSaveBtn(slidBoxContent) {
+  return slidBoxContent === "editTemplate" ?
+    <FormattedMessage {...messages.creativesTemplatesUpdate}/>
+    :
+    <FormattedMessage {...messages.creativesTemplatesSaveFullMode}/>;
+}
+function SlideBoxFooter(props) {
+  const { slidBoxContent, onSave, onEditTemplate, onCreateNextStep, isFullMode} = props;
+  return (
+    <div>
+      <div>
+        {props.shouldShowDoneFooter() && (
+          <div>
+            <CapButton onClick={onSave}>
+              {isFullMode ?
+                getFullModeSaveBtn(slidBoxContent)
+              :
+                <FormattedMessage {...messages.creativesTemplatesSave} />
+              }
+            </CapButton>
+            {/* {isFullMode && <CapButton type="secondary" onClick={onDiscard}><FormattedMessage {...messages.creativesTemplatesDiscard}/></CapButton>} */}
+          </div>)}
+        {props.shouldShowContinueFooter() &&
+          <CapButton onClick={onCreateNextStep}>
+            <FormattedMessage {...messages.continue} />
+          </CapButton>
+          }
+        {slidBoxContent === 'preview' && (
+          <CapButton onClick={onEditTemplate} type="secondary">
+            <FormattedMessage {...messages.creativesTemplatesEdit} />
+          </CapButton>
+          )}
+      </div>
+    </div>
+  );
+}
+SlideBoxFooter.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSave: PropTypes.func,
+  onEditTemplate: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
+  shouldShowContinueFooter: PropTypes.func,
+  shouldShowDoneFooter: PropTypes.func,
+  isFullMode: PropTypes.bool,
+};
+export default SlideBoxFooter;

package/v2Containers/CreativesContainer/actions.js

@@ -1,27 +1,27 @@
-/*
- *
- * CreativesContainer actions
- *
- */
-
-import {
-  DEFAULT_ACTION,
-  HIDE_CONTAINER_LOADER,
-  SHOW_CONTANER_LOADER,
-} from './constants';
-
-export function defaultAction() {
-  return {
-    type: DEFAULT_ACTION,
-  };
-}
-export function showCreativesContainerLoader() {
-  return {
-    type: SHOW_CONTANER_LOADER,
-  };
-}
-export function hideCreativesContanerLoader() {
-  return {
-    type: HIDE_CONTAINER_LOADER,
-  };
-}
+/*
+ *
+ * CreativesContainer actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+  HIDE_CONTAINER_LOADER,
+  SHOW_CONTANER_LOADER,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}
+export function showCreativesContainerLoader() {
+  return {
+    type: SHOW_CONTANER_LOADER,
+  };
+}
+export function hideCreativesContanerLoader() {
+  return {
+    type: HIDE_CONTAINER_LOADER,
+  };
+}

package/v2Containers/CreativesContainer/constants.js

@@ -1,17 +1,17 @@
-/*
- *
- * CreativesContainer constants
- *
- */
-
-export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
-export const EMAIL = "EMAIL";
-export const SMS = "SMS";
-export const EBILL = "EBILL";
-export const LINE = "LINE";
-export const CALL_TASK = "CALL_TASK";
-export const MOBILE_PUSH = "MOBILEPUSH";
-export const WECHAT = "WECHAT";
-export const FACEBOOK = "FACEBOOK";
-export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
-export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
+/*
+ *
+ * CreativesContainer constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
+export const EMAIL = "EMAIL";
+export const SMS = "SMS";
+export const EBILL = "EBILL";
+export const LINE = "LINE";
+export const CALL_TASK = "CALL_TASK";
+export const MOBILE_PUSH = "MOBILEPUSH";
+export const WECHAT = "WECHAT";
+export const FACEBOOK = "FACEBOOK";
+export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
+export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -25,7 +25,6 @@ import * as globalActions from '../Cap/actions';
 import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
-import { makeSelectFetchingCmsData } from '../Email/selectors';
 
 const classPrefix = 'add-creatives-section';
 
@@ -166,8 +165,6 @@ class Creatives extends React.Component {
             iso_code: templateData.iso_code,
             language: templateData.language,
             drag_drop_id: templateData.drag_drop_id,
-            json_content: templateData.json_content,
-            id: templateData.id,
           };
           creativesTemplateData = {
             base: formData,
@@ -531,7 +528,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -620,12 +617,11 @@ class Creatives extends React.Component {
               emailCreateMode={emailCreateMode}
               shouldShowContinueFooter={this.shouldShowContinueFooter}
               shouldShowDoneFooter={this.shouldShowDoneFooter}
-              fetchingCmsData={fetchingCmsData}
             />
           }
           handleClose={this.handleCloseSlideBox}
           show={showSlideBox}
-          size="size-xl"
+          size="size-l"
         />
       </SlideBoxWrapper>
     );
@@ -663,7 +659,6 @@ const mapStatesToProps = () => createStructuredSelector({
   EmailLayout: selectEmailLayout(),
   isUploading: uploadSelector(),
   Templates: makeSelectTemplates(),
-  fetchingCmsData: makeSelectFetchingCmsData(),
 });
 function mapDispatchToProps(dispatch) {
   return {

package/v2Containers/CreativesContainer/index.scss

@@ -1,45 +1,45 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-$classPrefix: add-creatives-section;
-
-.#{$classPrefix} {
-    &.creatives-library-mode{
-        .sms-create-container,  .sms-email-container{
-            .ant-tabs-top-bar{
-                display: none;
-            }
-        }
-    }
-    .#{$classPrefix}-footer {
-        position: absolute;
-        bottom: 0;
-        left: 1px;
-        padding: 0 12px;
-        display: flex;
-        align-items: center;
-        height: 48px;
-        border-top: 1px solid $CAP_G07;
-
-        &.with-creative {
-            width: 100%;
-        }
-    }
-    .wechat-steps {
-        width: 40% !important;
-        left: 20%;
-        position: relative;
-        .ant-steps-item-title::after {
-            top: 8px;
-        }
-        .ant-steps-item-content {
-            vertical-align: middle;
-            padding-top: 4px;
-        }
-    }
-}
-
-.map-template-create {
-    .slidebox-header div:first-child {
-        width: 100%;
-    }
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: add-creatives-section;
+
+.#{$classPrefix} {
+    &.creatives-library-mode{
+        .sms-create-container,  .sms-email-container{
+            .ant-tabs-top-bar{
+                display: none;
+            }
+        }
+    }
+    .#{$classPrefix}-footer {
+        position: absolute;
+        bottom: 0;
+        left: 1px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        height: 48px;
+        border-top: 1px solid $CAP_G07;
+
+        &.with-creative {
+            width: 100%;
+        }
+    }
+    .wechat-steps {
+        width: 40% !important;
+        left: 20%;
+        position: relative;
+        .ant-steps-item-title::after {
+            top: 8px;
+        }
+        .ant-steps-item-content {
+            vertical-align: middle;
+            padding-top: 4px;
+        }
+    }
+}
+
+.map-template-create {
+    .slidebox-header div:first-child {
+        width: 100%;
+    }
 }