@capillarytech/creatives-library 6.8.8 → 6.9.0

package/v2Containers/Email/initialSchema.js

@@ -199,9 +199,24 @@ export const response = {
                               "getEditorInstanse",
                             ],
                           },
+                          // will remove once bee gets tested end to end
+                          // {
+                          //   id: "edmeditor",
+                          //   type: "edmeditor",
+                          //   metaType: "text",
+                          //   datatype: "string",
+                          //   required: true,
+                          //   onlyDisplay: true,
+                          //   standalone: false,
+                          //   width: 24,
+                          //   order: 2,
+                          //   customComponent: true,
+                          //   colStyle: { display: "none" },
+                          //   supportedEvents: [],
+                          // },
                           {
-                            id: "edmeditor",
-                            type: "edmeditor",
+                            id: "BEEeditor",
+                            type: "BEEeditor",
                             metaType: "text",
                             datatype: "string",
                             required: true,

package/v2Containers/Email/sagas.js

@@ -53,7 +53,7 @@ export function* getAllAssets(assetType, queryParams) {
 
 export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSupport}) {
   try {
-    const result = yield call(Api.getCmsTemplateSettings, cmsType, projectId, cmsMode, langId, isEdmSupport);
+    const result = yield call(Api.getCmsTemplateSettingsV2, cmsType, projectId, cmsMode, langId, isEdmSupport);
 
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
   } catch (error) {
@@ -63,7 +63,7 @@ export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSuppor
 
 export function* getCmsData({cmsType, projectId, langId}) {
   try {
-    const result = yield call(Api.getCmsTemplateData, cmsType, projectId, langId);
+    const result = yield call(Api.getCmsTemplateDataV2, cmsType, projectId, langId);
 
     yield put({ type: types.GET_CMS_EDITOR_DATA_SUCCESS, data: result.data.response.data, langId: result.data.response.langId });
   } catch (error) {

package/v2Containers/Email/selectors.js

@@ -26,9 +26,14 @@ const selectLoadingStatus = () => createSelector(
   selectEmailDomain(), (email) => email.createTemplateInProgress || (email.assetUploading !== undefined && email.assetUploading)
 );
 
+const makeSelectFetchingCmsData = () => createSelector(
+  selectEmailDomain(), (state) => state.get('fetchingCmsData')
+);
+
 export default makeSelectEmail;
 export {
   makeSelectEmail,
   makeSelectCreateResponse,
   selectLoadingStatus,
+  makeSelectFetchingCmsData,
 };

package/v2Containers/EmailWrapper/index.js

@@ -15,7 +15,13 @@ import styled from 'styled-components';
 import { CapRadioCard, CapNotification, CapInput, CapUploader, CapSpin, CapButton } from '@capillarytech/cap-ui-library';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector } from '../Templates/selectors';
+import {
+  selectEmailLayout,
+  selectCmsTemplates,
+  selectEdmEditor,
+  uploadSelector,
+  selectCmsTemplatesLoader,
+} from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
@@ -76,7 +82,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       //document.getElementById('upload-email-template').click();
     } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
       if (emailCreateMode === "editor" && !CmsTemplates) {
-        templatesActions.getEdmDefaultTemplates();
+        templatesActions.getDefaultBeeTemplates();
       }
     } else if (step === "createTemplateContent" && !this.state.selectedCreateMode) {
       if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
@@ -156,6 +162,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     const data = _.find(CmsTemplates, { _id: id });
 
     templatesActions.setEdmTemplate(data);
+    templatesActions.setBEETemplate(data);
     this.setState({
       selectedCreateMode: 'editor',
     });
@@ -188,6 +195,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       selectedOfferDetails,
       onPreviewContentClicked,
       onTestContentClicked,
+      cmsTemplatesLoader,
     } = this.props;
     const {
       templateName,
@@ -251,7 +259,13 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 onPreviewContentClicked={onPreviewContentClicked}
                 onTestContentClicked={onTestContentClicked}
               />}
-              {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor} />}
+              {!isShowEmailCreate && (
+                <CmsTemplatesComponent
+                  cmsTemplates={CmsTemplates}
+                  handleEdmDefaultTemplateSelection={this.useEditor}
+                  cmsTemplatesLoader={cmsTemplatesLoader}
+                />
+              )}
             </div>
           }
         </CapSpin>
@@ -289,6 +303,7 @@ const mapStateToProps = createStructuredSelector({
   CmsTemplates: selectCmsTemplates(),
   SelectedEdmDefaultTemplate: selectEdmEditor(),
   isUploading: uploadSelector(),
+  cmsTemplatesLoader: selectCmsTemplatesLoader(),
 });
 
 function mapDispatchToProps(dispatch) {

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,16 +87,14 @@ 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', '');
-            if (imsSrc) {
-                updateUploadedAssetList({
-                    ...uploadedAssetList,
-                    [index]: {
-                        imgPreview,
-                        imgSrc,
-                    },
-                });
-                actions.clearAsset();
-            }
+            updateUploadedAssetList({
+                ...uploadedAssetList,
+                [index]: {
+                    imgPreview,
+                    imgSrc,
+                },
+            });
+            actions.clearAsset();
         }
     }, [Line.uploadedAssetData]);
 
@@ -150,16 +148,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);
     }
 
@@ -409,7 +407,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,

package/v2Containers/Line/Container/ImageMap/constants.js

@@ -16,5 +16,4 @@ export const DEFAULT_TEMPLATES = [
 ];
 export const CUSTOM_TEMPLATES = [
     "custom"
-];
-export const MAX_ALLOWED_TITLE_LENGTH = 100;
+];

package/v2Containers/Line/Container/ImageMap/index.js

@@ -26,7 +26,7 @@ import messages from './messages';
 import {
   LINE_ASSET_WIDTH,
   LINE_ASSET_HEIGHT,
-  MAX_ALLOWED_TITLE_LENGTH,
+  LINE_IMG_SIZE,
   CUSTOM_ASSET_TYPE,
   DEFAULT_ASSET_TYPE,
   DEFAULT_TEMPLATES,
@@ -80,8 +80,6 @@ export const LineImageMap = ({
     const [isImageError, updateImageErrorMessage] = useState(false);
     const [templateSchema, updateTemplateSchema] = useState([]);
     const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
-    const [altText, updateTitle] = useState('');
-    const [errorTitle, updateErrorTitle] = useState(false);
 
     useEffect(() => {
         const { messageTitle = '',
@@ -90,8 +88,7 @@ export const LineImageMap = ({
                 baseSize = {},
                 selectedTemplate,
                 assetType,
-                actionLinks,
-                altText,
+                actionLinks
               } = content;
         if ( baseUrl && type === IMAGE_MAP) {
             updateImageStatus(true);
@@ -103,14 +100,13 @@ export const LineImageMap = ({
             updateActionLinks(actionLinks);
             updateTemplateSchema(TEMPLATES_JSON[selectedTemplate]);
             updateBaseSize(baseSize);
-            updateTitle(altText);
         }
     }, [content]);
 
     useEffect(() => {
         if (imageSrc && (isFullMode ? messageTitle: true) && imageMapTemplate && actionLinks) {
                 updateMessageState({
-                    isError: !imageSrc || !(isFullMode ? messageTitle : true)  || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
+                    isError: !imageSrc || !(isFullMode ? messageTitle : true)  || !imageMapTemplate || (isImageError && errorMessageTitle),
                     baseUrl: imageSrc,
                     messageTitle,
                     index,
@@ -120,11 +116,10 @@ export const LineImageMap = ({
                     messageContent: getActions(),
                     selectedTemplate: imageMapTemplate,
                     assetType,
-                    actionLinks,
-                    altText,
+                    actionLinks
                 });
             }
-    }, [errorMessageTitle, imageSrc, messageTitle, isImageError, imageMapTemplate, actionLinks, assetType, isImage, templateSchema, altText]);
+    }, [errorMessageTitle, imageSrc, messageTitle, isImageError, imageMapTemplate, actionLinks, assetType, isImage, templateSchema]);
 
     useEffect(() => {
         const imgSrc = get(Line, 'uploadedAssetData', false);
@@ -200,15 +195,6 @@ export const LineImageMap = ({
         updateErrorMessageTitle(errorMessage);
     }
 
-    const onTitleChange = ({ target: { value } }) => {
-        updateTitle(value);
-        let errorMessage = false;
-        if (value === '') {
-            errorMessage = formatMessage(messages.emptyAltTextErrorMessage);
-        }
-        updateErrorTitle(errorMessage);
-    }
-
     const uploadImages = (e, {files}) => {
         if (e) {
             e.preventDefault();
@@ -481,12 +467,10 @@ export const LineImageMap = ({
         const baseSize = get(template, 'versions.base.content.messages[0].baseSize', '');
         const selectedTemplate = get(template, 'definition.selectedTemplate', '');
         const assetType = get(template, 'definition.assetType', '');
-        const altText = get(template, 'versions.base.content.messages[0].altText', '');
         const actionLinks = get(template, 'definition.actionLinks', {});
         updateImageStatus(true);
         updateCreateNew(true);
         updateImageSrc(baseUrl);
-        updateTitle(altText);
         updateBaseSize(baseSize);
         updateImageMapTemplate(selectedTemplate);
         updateAssetType(assetType);
@@ -518,20 +502,11 @@ export const LineImageMap = ({
                             <CapButton
                             className="dragger-button"
                             type="flat"
-                            style={{ top: 180 , position: 'absolute', right: 0, color: FONT_COLOR_05 }}
+                            style={{ top:'-12px', position: 'absolute', right: 0, color: FONT_COLOR_05 }}
                             onClick={onReUpload}
                             >
                             <FormattedMessage {...messages.imageReUpload} />
                         </CapButton>}
-                        <CapInput.TextArea
-                            maxLength={MAX_ALLOWED_TITLE_LENGTH}
-                            label={<FormattedMessage {...messages.titleLabel} />}
-                            inductiveText={<FormattedMessage {...messages.titleDescription} />}
-                            onChange={onTitleChange}
-                            value={altText}
-                            errorMessage={errorTitle}
-                            className="title-textarea"
-                        />
                         <CapHeading type="h4">{formatMessage(messages.uploadImageLabel)}</CapHeading>
                         <CapLabel type="label1" style={{paddingTop: CAP_SPACE_12, paddingBottom: CAP_SPACE_08}}>{formatMessage(messages.uploadImageDesc)}</CapLabel>
                         <CapError key={`${id}-with-label`}>{isImageError}</CapError>

package/v2Containers/Line/Container/ImageMap/messages.js

@@ -27,10 +27,6 @@ export default defineMessages({
     id: `${scope}.emptyTitleErrorMessage`,
     defaultMessage: 'Template title can not be empty',
   },
-  "emptyAltTextErrorMessage": {
-    id: `${scope}.emptyAltTextErrorMessage`,
-    defaultMessage: 'Title can not be empty',
-  },
   "imageDimenstionDescription": {
     id: `${scope}.imageDimenstionDescription`,
     defaultMessage: 'Dimensions: {dimensions} Size: Up to 10MB',
@@ -127,12 +123,4 @@ export default defineMessages({
     id: `${scope}.select`,
     defaultMessage: 'Select',
   },
-  "titleLabel": {
-    id: `${scope}.titleLabel`,
-    defaultMessage: 'Title',
-  },
-  "titleDescription": {
-    id: `${scope}.titleDescription`,
-    defaultMessage: 'The title is shown in push notifications and in the user\'s chat list.',
-  },
 });

package/v2Containers/Line/Container/Wrapper/index.js

@@ -46,9 +46,7 @@ export const LineWrapper = ({
             messageContent,
             messageTitle,
             baseUrl,
-            selectedTemplate,
-            template,
-            altText,
+            selectedTemplate
         } = content;
 
         const isTouched  = (
@@ -63,8 +61,6 @@ export const LineWrapper = ({
             || messageContent
             || baseUrl
             || selectedTemplate
-            || template
-            || altText
         );
         if (!isTouched) {
             updateActiveKey(type);

package/v2Containers/Line/Container/Wrapper/messages.js

@@ -43,8 +43,4 @@ export default defineMessages({
     id: `${scope}.imagemapLabel`,
     defaultMessage: 'Rich message',
   },
-  "templateLabel": {
-    id: `${scope}.templateLabel`,
-    defaultMessage: 'Card message',
-  },
 });

package/v2Containers/Line/Container/Wrapper/utils.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import { CAP_WHITE, FONT_SIZE_VL } from '@capillarytech/cap-ui-library/styled/variables';
 
-import { TEXT, IMAGE, IMAGE_MAP, STICKER, IMAGE_CAROUSEL, TEMPLATE } from '../constants';
+import { TEXT, IMAGE, IMAGE_MAP, STICKER } from '../constants';
 import LineText from '../Text';
 import LineImage from '../Image';
 import LineSticker from '../Sticker';
 import LineImageMap from '../ImageMap';
-import LineImageCarousel from '../ImageCarousel';
 import messages from './messages';
 
 export const getTabContent = ({ item, props }) => {
@@ -24,24 +24,20 @@ export const getTabContent = ({ item, props }) => {
     case IMAGE_MAP: {
       return <LineImageMap {...props} />;
     }
-    case TEMPLATE: {
-      return <LineImageCarousel {...props} />;
-    }
   }
 };
 
 export const itemIcons = {
-  [TEXT]: 'text-message',
-  [IMAGE]: 'image-message',
-  [STICKER]: 'smiley-message',
-  [IMAGE_MAP]: 'rich-message',
-  [TEMPLATE]: 'carousel-message',
+  [TEXT]: 'chat-bubble',
+  [IMAGE]: 'picture',
+  [STICKER]: 'smile',
+  [IMAGE_MAP]: 'add-media', // to change
 };
 
 
 export const getTabPanes = (props) => {
-  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP, TEMPLATE];
-  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP, TEMPLATE];
+  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP];
+  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP];
   return (props.isFullMode ? tableKeysCreatives : tableKeys).map((item) => {
     const isSelected = props.activeKey === item;
     return {
@@ -51,9 +47,14 @@ export const getTabPanes = (props) => {
           title={props.formatMessage(messages[`${item}Label`])}
         >
           <CapIcon
-            type={isSelected ? `${itemIcons[item]}-filled`: itemIcons[item]}
-            size="m"
-            style={{ margin: 0 }}
+            type={itemIcons[item]}
+            size="s"
+            style={{ fontSize: FONT_SIZE_VL }}
+            theme={isSelected ? 'filled' : ''}
+            svgProps={{
+              fill: isSelected ? '#000' : CAP_WHITE,
+              stroke: isSelected ? CAP_WHITE : '#000',
+            }}
           />
         </CapTooltip>
       ),

package/v2Containers/Line/Container/_lineCreate.scss

@@ -37,7 +37,7 @@
   bottom: 20px;
 }
 .cancel-msg {
-  margin-left: 100px;
+  margin-left: 120px;
 }
 
 .image-container {
@@ -53,7 +53,7 @@
     object-fit: cover;
     max-width: 100%;
     max-height: 100%;
-    height: 152px !important;
+    height: auto !important;
     width: auto !important;
   }
 }

package/v2Containers/Line/Container/actions.js

@@ -28,20 +28,18 @@ export function defaultAction() {
   };
 }
 
-export function uploadAsset(file, assetType, fileParams, templateType) {
+export function uploadAsset(file, assetType, fileParams) {
   return {
     type: types.UPLOAD_ASSET_REQUEST,
     file,
     assetType,
     fileParams,
-    templateType,
   };
 }
 
-export function clearAsset(templateType) {
+export function clearAsset() {
   return {
     type: types.CLEAR_ASSET,
-    templateType,
   };
 }
 

package/v2Containers/Line/Container/constants.js

@@ -2,11 +2,8 @@ export const TEXT = 'text';
 export const STICKER = 'sticker';
 export const IMAGE = 'image';
 export const IMAGE_MAP = 'imagemap';
-export const IMAGE_CAROUSEL = 'image_carousel';
-export const TEMPLATE = 'template';
 export const MAX_LINE_WRAPPER_LIMIT = 5;
 export const MAX_LINE_WRAPPER_LIMIT_FULL_MODE = 1;
-export const IMAGE_MAP_CAMEL_CASE = 'imageMap';
 
 /*
  *

package/v2Containers/Line/Container/index.js

@@ -16,13 +16,9 @@ import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapRadioCard from '@capillarytech/cap-ui-library/CapRadioCard';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-// GA
-import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/constants';
-
 import LineWrapper from './Wrapper';
 import messages from './messages';
-import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE  } from './constants';
+import { TEXT, IMAGE, IMAGE_MAP, STICKER, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE  } from './constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
@@ -33,7 +29,7 @@ import * as compActions from './actions';
 import * as templateActionsConfig from '../../Templates/actions';
 import withCreatives from '../../../hoc/withCreatives';
 
-const { stopTimer } = GA.timeTracker;
+
 
 export const LineContainer = ({
     isFullMode,
@@ -109,11 +105,9 @@ export const LineContainer = ({
             const messageTitle = get(Line, 'templateDetails.name');
             const baseUrl = get(Line, `templateDetails.versions.base.content.messages.0.baseUrl`);
             const baseSize = get(Line, `templateDetails.versions.base.content.messages.0.baseSize`);
-            const altText = get(Line, `templateDetails.versions.base.content.messages.0.altText`);
             const selectedTemplate = get(Line, 'templateDetails.selectedTemplate');
             const assetType = get(Line, 'templateDetails.assetType');
             const actionLinks = get(Line, 'templateDetails.actionLinks');
-            const template = get(Line, `templateDetails.versions.base.content.messages.0.template`);
             const lineContent = {
                 type,
                 messageContent,
@@ -131,8 +125,6 @@ export const LineContainer = ({
                 baseUrl,
                 actionLinks,
                 baseSize,
-                template,
-                altText,
             };
             updateLineWrapperContent([lineContent]);
         }
@@ -156,9 +148,7 @@ export const LineContainer = ({
                 baseSize,
                 actionLinks,
                 assetType,
-                selectedTemplate,
-                template,
-                altText,
+                selectedTemplate
             }) => {
                 const obj = {
                     type,
@@ -170,9 +160,7 @@ export const LineContainer = ({
                     baseSize,
                     actionLinks,
                     assetType,
-                    selectedTemplate,
-                    template,
-                    altText,
+                    selectedTemplate
                 };
                 if (stickerUrl) {
                     obj.selectedSticker = {
@@ -334,9 +322,7 @@ export const LineContainer = ({
             baseSize,
             selectedTemplate,
             assetType,
-            actionLinks,
-            template,
-            altText,
+            actionLinks
         } = {}] = lineWrapperContents;
         let messageData = { type };
         messageData[messageType] = messageContent;
@@ -354,15 +340,11 @@ export const LineContainer = ({
         }
         if (baseUrl) {
             messageData.baseUrl = baseUrl;
-            messageData.altText = altText;
+            messageData.altText = IMAGE_MAP;
         }
         if (baseSize) {
             messageData.baseSize = baseSize;
         }
-        if (template) {
-            messageData.template = template;
-            messageData.altText = altText;
-        }
         return {
             versions: {
                     base: {
@@ -395,9 +377,7 @@ export const LineContainer = ({
             baseSize,
             selectedTemplate,
             assetType,
-            actionLinks,
-            template,
-            altText,
+            actionLinks
         }) => {
             let messageData = { type };
             messageData[messageType] = messageContent;
@@ -415,16 +395,12 @@ export const LineContainer = ({
             }
             if (baseUrl) {
                 messageData.baseUrl = baseUrl;
-                messageData.altText = altText;
+                messageData.altText = IMAGE_MAP;
                 messageData.baseSize = baseSize;
                 messageData.selectedTemplate = selectedTemplate;
                 messageData.assetType = assetType;
                 messageData.actionLinks = actionLinks;
             }
-            if (template) {
-                messageData.template = template;
-                messageData.altText = altText;
-            }
             return messageData;
         });
         return ({
@@ -439,18 +415,10 @@ export const LineContainer = ({
         });
     }
 
-    const getLineType = lineWrapperContents => get(lineWrapperContents, '0.type', TEXT);
-
     const onCreateLine = () => {
         actions.createTemplate(
             formatSubmitPayload(lineWrapperContents),
             () => {
-              // stop timer for create line
-              stopTimer(TRACK_CREATE_LINE, {
-                category: 'Creatives',
-                action: TRACK_CREATE_LINE,
-                label: getLineType(lineWrapperContents),
-              });
               createCallback();
               onCreateComplete();
             }
@@ -459,17 +427,17 @@ export const LineContainer = ({
 
     const getPreviewSection = () => {
         const accountName = get(lineData, 'selectedLineAccount.name', '');
-        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template }) => ({
+        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl }) => ({
             messageContent,
             previewImageUrl,
             selectedSticker,
             type,
-            baseUrl,
-            imageCarousel: get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) ),
+            baseUrl
         }));
 
         return (
             <TemplatePreview
+                // style={val.customStyling ? val.customStyling : {}}
                 channel="LINE"
                 content={templateContent}
                 LineAccountName={accountName[0]}
@@ -484,12 +452,6 @@ export const LineContainer = ({
                 _id: params.id,
             },
             () => {
-                // stop timer for edit line
-                stopTimer(TRACK_EDIT_LINE, {
-                    category: 'Creatives',
-                    action: TRACK_EDIT_LINE,
-                    label: getLineType(lineWrapperContents),
-                });
                 editCallback();
                 onCreateComplete();
           });