@capillarytech/creatives-library 6.8.7 → 6.8.8

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,