@capillarytech/creatives-library 6.9.2 → 6.9.7

package/v2Containers/Line/Container/ImageCarousel/style.js

@@ -0,0 +1,61 @@
+import { css } from 'styled-components';
+import {
+  CAP_G06,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  FONT_COLOR_02,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  padding: 0 ${CAP_SPACE_16} ${CAP_SPACE_16};
+  position: relative;
+
+  .carousel-content {
+    position: relative;
+    margin-top: 20px;
+  }
+
+  .image-container {
+    background-color: ${CAP_G06};
+    margin-top: 20px;
+  }
+
+  .choice-title {
+    margin-bottom: ${CAP_SPACE_24};
+    color: ${FONT_COLOR_02};
+  }
+
+  .image-template-title {
+    margin-top: ${CAP_SPACE_24};
+  }
+
+  .cap-tab-v2-wrapper {
+    .ant-tabs-bar.ant-tabs-top-bar {
+      padding: 0;
+    }
+  }
+
+  .extra-button-group {
+    button {
+      padding: 0;
+      margin-left: 6px;
+    }
+  }
+
+  .action-type-section {
+    margin: ${CAP_SPACE_24} 0;
+
+    .ant-input-group-addon {
+      background-color: transparent;
+    }
+  }
+
+  .title-textarea {
+    margin-top: ${CAP_SPACE_16};
+  }
+
+  .card-message-header {
+    margin-bottom: ${CAP_SPACE_16};
+  }
+`;
+

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

@@ -16,4 +16,5 @@ 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,
-  LINE_IMG_SIZE,
+  MAX_ALLOWED_TITLE_LENGTH,
   CUSTOM_ASSET_TYPE,
   DEFAULT_ASSET_TYPE,
   DEFAULT_TEMPLATES,
@@ -80,6 +80,8 @@ 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 = '',
@@ -88,7 +90,8 @@ export const LineImageMap = ({
                 baseSize = {},
                 selectedTemplate,
                 assetType,
-                actionLinks
+                actionLinks,
+                altText,
               } = content;
         if ( baseUrl && type === IMAGE_MAP) {
             updateImageStatus(true);
@@ -100,13 +103,14 @@ 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),
+                    isError: !imageSrc || !(isFullMode ? messageTitle : true)  || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
                     baseUrl: imageSrc,
                     messageTitle,
                     index,
@@ -116,10 +120,11 @@ export const LineImageMap = ({
                     messageContent: getActions(),
                     selectedTemplate: imageMapTemplate,
                     assetType,
-                    actionLinks
+                    actionLinks,
+                    altText,
                 });
             }
-    }, [errorMessageTitle, imageSrc, messageTitle, isImageError, imageMapTemplate, actionLinks, assetType, isImage, templateSchema]);
+    }, [errorMessageTitle, imageSrc, messageTitle, isImageError, imageMapTemplate, actionLinks, assetType, isImage, templateSchema, altText]);
 
     useEffect(() => {
         const imgSrc = get(Line, 'uploadedAssetData', false);
@@ -195,6 +200,15 @@ 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();
@@ -467,10 +481,12 @@ 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);
@@ -502,11 +518,20 @@ export const LineImageMap = ({
                             <CapButton
                             className="dragger-button"
                             type="flat"
-                            style={{ top:'-12px', position: 'absolute', right: 0, color: FONT_COLOR_05 }}
+                            style={{ top: 180 , 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,6 +27,10 @@ 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',
@@ -123,4 +127,12 @@ 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,7 +46,9 @@ export const LineWrapper = ({
             messageContent,
             messageTitle,
             baseUrl,
-            selectedTemplate
+            selectedTemplate,
+            template,
+            altText,
         } = content;
 
         const isTouched  = (
@@ -61,6 +63,8 @@ export const LineWrapper = ({
             || messageContent
             || baseUrl
             || selectedTemplate
+            || template
+            || altText
         );
         if (!isTouched) {
             updateActiveKey(type);

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

@@ -43,4 +43,8 @@ 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 } from '../constants';
+import { TEXT, IMAGE, IMAGE_MAP, STICKER, IMAGE_CAROUSEL, TEMPLATE } 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,20 +24,24 @@ export const getTabContent = ({ item, props }) => {
     case IMAGE_MAP: {
       return <LineImageMap {...props} />;
     }
+    case TEMPLATE: {
+      return <LineImageCarousel {...props} />;
+    }
   }
 };
 
 export const itemIcons = {
-  [TEXT]: 'chat-bubble',
-  [IMAGE]: 'picture',
-  [STICKER]: 'smile',
-  [IMAGE_MAP]: 'add-media', // to change
+  [TEXT]: 'text-message',
+  [IMAGE]: 'image-message',
+  [STICKER]: 'smiley-message',
+  [IMAGE_MAP]: 'rich-message',
+  [TEMPLATE]: 'carousel-message',
 };
 
 
 export const getTabPanes = (props) => {
-  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP];
-  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP];
+  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP, TEMPLATE];
+  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP, TEMPLATE];
   return (props.isFullMode ? tableKeysCreatives : tableKeys).map((item) => {
     const isSelected = props.activeKey === item;
     return {
@@ -47,14 +51,9 @@ export const getTabPanes = (props) => {
           title={props.formatMessage(messages[`${item}Label`])}
         >
           <CapIcon
-            type={itemIcons[item]}
-            size="s"
-            style={{ fontSize: FONT_SIZE_VL }}
-            theme={isSelected ? 'filled' : ''}
-            svgProps={{
-              fill: isSelected ? '#000' : CAP_WHITE,
-              stroke: isSelected ? CAP_WHITE : '#000',
-            }}
+            type={isSelected ? `${itemIcons[item]}-filled`: itemIcons[item]}
+            size="m"
+            style={{ margin: 0 }}
           />
         </CapTooltip>
       ),

package/v2Containers/Line/Container/_lineCreate.scss

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

package/v2Containers/Line/Container/actions.js

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

package/v2Containers/Line/Container/constants.js

@@ -2,8 +2,11 @@ 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,9 +16,13 @@ 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, STICKER, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE  } from './constants';
+import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, 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';
@@ -29,7 +33,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,
@@ -105,9 +109,11 @@ 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,
@@ -125,6 +131,8 @@ export const LineContainer = ({
                 baseUrl,
                 actionLinks,
                 baseSize,
+                template,
+                altText,
             };
             updateLineWrapperContent([lineContent]);
         }
@@ -148,7 +156,9 @@ export const LineContainer = ({
                 baseSize,
                 actionLinks,
                 assetType,
-                selectedTemplate
+                selectedTemplate,
+                template,
+                altText,
             }) => {
                 const obj = {
                     type,
@@ -160,7 +170,9 @@ export const LineContainer = ({
                     baseSize,
                     actionLinks,
                     assetType,
-                    selectedTemplate
+                    selectedTemplate,
+                    template,
+                    altText,
                 };
                 if (stickerUrl) {
                     obj.selectedSticker = {
@@ -322,7 +334,9 @@ export const LineContainer = ({
             baseSize,
             selectedTemplate,
             assetType,
-            actionLinks
+            actionLinks,
+            template,
+            altText,
         } = {}] = lineWrapperContents;
         let messageData = { type };
         messageData[messageType] = messageContent;
@@ -340,11 +354,15 @@ export const LineContainer = ({
         }
         if (baseUrl) {
             messageData.baseUrl = baseUrl;
-            messageData.altText = IMAGE_MAP;
+            messageData.altText = altText;
         }
         if (baseSize) {
             messageData.baseSize = baseSize;
         }
+        if (template) {
+            messageData.template = template;
+            messageData.altText = altText;
+        }
         return {
             versions: {
                     base: {
@@ -377,7 +395,9 @@ export const LineContainer = ({
             baseSize,
             selectedTemplate,
             assetType,
-            actionLinks
+            actionLinks,
+            template,
+            altText,
         }) => {
             let messageData = { type };
             messageData[messageType] = messageContent;
@@ -395,12 +415,16 @@ export const LineContainer = ({
             }
             if (baseUrl) {
                 messageData.baseUrl = baseUrl;
-                messageData.altText = IMAGE_MAP;
+                messageData.altText = altText;
                 messageData.baseSize = baseSize;
                 messageData.selectedTemplate = selectedTemplate;
                 messageData.assetType = assetType;
                 messageData.actionLinks = actionLinks;
             }
+            if (template) {
+                messageData.template = template;
+                messageData.altText = altText;
+            }
             return messageData;
         });
         return ({
@@ -415,10 +439,18 @@ 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();
             }
@@ -427,17 +459,17 @@ export const LineContainer = ({
 
     const getPreviewSection = () => {
         const accountName = get(lineData, 'selectedLineAccount.name', '');
-        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl }) => ({
+        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template }) => ({
             messageContent,
             previewImageUrl,
             selectedSticker,
             type,
-            baseUrl
+            baseUrl,
+            imageCarousel: get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) ),
         }));
 
         return (
             <TemplatePreview
-                // style={val.customStyling ? val.customStyling : {}}
                 channel="LINE"
                 content={templateContent}
                 LineAccountName={accountName[0]}
@@ -452,6 +484,12 @@ 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();
           });

package/v2Containers/Line/Container/reducer.js

@@ -42,14 +42,14 @@ function createReducer(state = initialState, action) {
       return state
         .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
         .set('assetUploading', false)
-        .set('uploadedAssetData', action.data);
+        .set(action.templateType ? `uploadedAssetData${action.templateType}` : 'uploadedAssetData', action.data);
     case types.UPLOAD_ASSET_FAILURE:
       return state
         .set('uploadAssetSuccess', false)
         .set('assetUploading', false);
     case types.CLEAR_ASSET:
       return state
-        .delete('uploadedAssetData');
+        .delete(action.templateType ? `uploadedAssetData${action.templateType}` : 'uploadedAssetData');
       // FOR EDIT
     case types.EDIT_TEMPLATE_REQUEST:
       return state

package/v2Containers/Line/Container/sagas.js

@@ -21,10 +21,10 @@ export function* createTemplate({ template, callback }) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }
 }
-export function* uploadAsset(file, assetType, fileParams) {
+export function* uploadAsset(file, assetType, fileParams ) {
   try {
     const result = yield call(Api.uploadFile, file, assetType, fileParams);
-    yield put({ type: types.UPLOAD_ASSET_SUCCESS, data: result.response.asset, statusCode: result.status ? result.status.code : '' });
+    yield put({ type: types.UPLOAD_ASSET_SUCCESS, data: result.response.asset, statusCode: result.status ? result.status.code : '', templateType: file.templateType });
   } catch (error) {
     yield put({ type: types.UPLOAD_ASSET_FAILURE, error });
   }

package/v2Containers/Line/Container/style.js

@@ -50,7 +50,8 @@ export default css`
 
     .text-template-title,
     .sticker-template-title,
-    .image-template-title {
+    .image-template-title,
+    .title-textarea {
       margin-bottom: ${CAP_SPACE_16};
     }
 `;

package/v2Containers/Templates/_templates.scss

@@ -36,6 +36,15 @@
           word-wrap: break-word;
         }
       }
+
+      &.carousel-img-section {
+        .ant-card-body {
+          padding: $CAP_SPACE_24 0;
+        }
+        .ant-card-meta {
+          padding: 0;
+        }
+      }
     }
   }
 }

package/v2Containers/Templates/index.js

@@ -82,6 +82,7 @@ const LINE_FILTERS = {
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
   IMAGE_MAP: 'imagemap',
+  IMAGE_CAROUSEL: 'template',
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -635,11 +636,34 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 stickerUrl = '',
                 animatedStickerUrl = '',
                 baseUrl = '',
+                template: carouselTemplate,
               }] = [{}],
             } = {},
           } = template.versions.base;
           templateData.content = text;
           templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
+          if (carouselTemplate) {
+            const carouselContent = get(carouselTemplate, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+            templateData.content = (
+              <div style={{ display: 'flex'}}>
+                {
+                  carouselContent.map(({
+                    imageUrl,
+                    actionLabel,
+                  }) => (
+                    <img
+                      width={208}
+                      height={279}
+                      src={imageUrl}
+                      alt={actionLabel}
+                      key={`${imageUrl}_${actionLabel}`}
+                    />
+                  ))
+                }
+              </div>
+            );
+            templateData.className = 'carousel-img-section';
+          }
           break;
         }
         default:
@@ -1789,7 +1813,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
               {
                 (() => {
-                  const { ALL, TEXT, IMAGE_VIDEO, STICKER, IMAGE_MAP } = LINE_FILTERS;
+                  const { ALL, TEXT, IMAGE_VIDEO, IMAGE_CAROUSEL, IMAGE_MAP } = LINE_FILTERS;
                   return (
                     <>
                       <CapRadio.Button value={ALL}><CapLabel type="label2">
@@ -1804,6 +1828,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapRadio.Button value={IMAGE_MAP}><CapLabel type="label2">
                         <FormattedMessage {...messages.imageMapTemplate} />
                       </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={IMAGE_CAROUSEL}><CapLabel type="label2">
+                        <FormattedMessage {...messages.imageCarouselTemplate} />
+                      </CapLabel></CapRadio.Button>
                     </>
                   );
                 })()

package/v2Containers/Templates/messages.js

@@ -242,6 +242,10 @@ export default defineMessages({
     id: `${scope}.imageMapTemplate`,
     defaultMessage: `Rich message`,
   },
+  "imageCarouselTemplate": {
+    id: `${scope}.imageCarouselTemplate`,
+    defaultMessage: `Card message`,
+  },
   "selectDefaultButton": {
     id: `${scope}.selectDefaultButton`,
     defaultMessage: `Select`,