@capillarytech/creatives-library 6.8.3 → 6.8.5

package/v2Containers/CreativesContainer/sagas.js

@@ -1,11 +1,11 @@
-// import { take, call, put, select } from 'redux-saga/effects';
-
-// Individual exports for testing
-export function* defaultSaga() {
-  // See example in v2Containers/HomePage/sagas.js
-}
-
-// All sagas to be loaded
-export default [
-  defaultSaga,
-];
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in v2Containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/v2Containers/CreativesContainer/selectors.js

@@ -1,30 +1,30 @@
-import { createSelector } from 'reselect';
-
-/**
- * Direct selector to the creativesContainer state domain
- */
-const selectCreativesContainerDomain = () => (state) => state.get('creativesContainer');
-
-/**
- * Other specific selectors
- */
-
-
-/**
- * Default selector used by CreativesContainer
- */
-
-const makeSelectCreativesContainer = () => createSelector(
-  selectCreativesContainerDomain(),
-  (substate) => substate.toJS()
-);
-const isLoading = () => createSelector(
-  makeSelectCreativesContainer(),
-  (substate) => substate.containerLoader
-);
-
-export default makeSelectCreativesContainer;
-export {
-  selectCreativesContainerDomain,
-  isLoading,
-};
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the creativesContainer state domain
+ */
+const selectCreativesContainerDomain = () => (state) => state.get('creativesContainer');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by CreativesContainer
+ */
+
+const makeSelectCreativesContainer = () => createSelector(
+  selectCreativesContainerDomain(),
+  (substate) => substate.toJS()
+);
+const isLoading = () => createSelector(
+  makeSelectCreativesContainer(),
+  (substate) => substate.containerLoader
+);
+
+export default makeSelectCreativesContainer;
+export {
+  selectCreativesContainerDomain,
+  isLoading,
+};

package/v2Containers/CreativesContainer/tests/actions.test.js

@@ -1,18 +1,18 @@
-
-import {
-  defaultAction,
-} from '../actions';
-import {
-  DEFAULT_ACTION,
-} from '../constants';
-
-describe('CreativesContainer actions', () => {
-  describe('Default Action', () => {
-    it('has a type of DEFAULT_ACTION', () => {
-      const expected = {
-        type: DEFAULT_ACTION,
-      };
-      expect(defaultAction()).toEqual(expected);
-    });
-  });
-});
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('CreativesContainer actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/v2Containers/CreativesContainer/tests/index.test.js

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

package/v2Containers/CreativesContainer/tests/reducer.test.js

@@ -1,9 +1,9 @@
-
-import { fromJS } from 'immutable';
-import creativesContainerReducer from '../reducer';
-
-describe('creativesContainerReducer', () => {
-  it('returns the initial state', () => {
-    expect(creativesContainerReducer(undefined, {})).toEqual(fromJS({}));
-  });
-});
+
+import { fromJS } from 'immutable';
+import creativesContainerReducer from '../reducer';
+
+describe('creativesContainerReducer', () => {
+  it('returns the initial state', () => {
+    expect(creativesContainerReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/v2Containers/CreativesContainer/tests/sagas.test.js

@@ -1,15 +1,15 @@
-/**
- * Test  sagas
- */
-
-/* eslint-disable redux-saga/yield-effects */
-// import { take, call, put, select } from 'redux-saga/effects';
-// import { defaultSaga } from '../sagas';
-
-// const generator = defaultSaga();
-
-describe('defaultSaga Saga', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

package/v2Containers/CreativesContainer/tests/selectors.test.js

@@ -1,10 +1,10 @@
-// import { fromJS } from 'immutable';
-// import { makeSelectCreativesContainerDomain } from '../selectors';
-
-// const selector = makeSelectCreativesContainerDomain();
-
-describe('makeSelectCreativesContainerDomain', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});
+// import { fromJS } from 'immutable';
+// import { makeSelectCreativesContainerDomain } from '../selectors';
+
+// const selector = makeSelectCreativesContainerDomain();
+
+describe('makeSelectCreativesContainerDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

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

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import Pagination from '../../../../v2Components/Pagination';
+import messages from './messages';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -10,10 +14,22 @@ export const LineDrawer = ({
     cardDataList,
     isDrawer,
     searchPlaceholder,
+    intl: {
+        formatMessage,
+    },
+    Templates
 }) => {
 
     const [currentPage, updateCurrentPage] = useState(0);
     const [searchText, updateSearchText] = useState('');
+    const [isSearching, updateSearchStatus] = useState(false);
+
+    useEffect(() => {
+        const { getAllTemplatesInProgress } = Templates || {};
+        if (getAllTemplatesInProgress !== undefined) {
+            updateSearchStatus(getAllTemplatesInProgress);
+        }
+    }, [Templates]);
 
     useEffect(() => {
         if (!isDrawer) {
@@ -22,6 +38,9 @@ export const LineDrawer = ({
         }
     }, [isDrawer]);
 
+    useEffect(() => {
+    }, [cardDataList]);
+
     let delayTimer = 0;
 
     const getAllLineTemplate = ({params = {} , getNextPage, resetPage}, isReRender = false) => {
@@ -67,7 +86,7 @@ export const LineDrawer = ({
     }
 
     return (
-        <>
+        <CapSpin spinning={isSearching} tip={formatMessage(messages.gettingAllTemplates)} style={{width: '100%'}}>
             <CapInput.Search
                 className="search-text"
                 style={{width: 324}}
@@ -77,6 +96,15 @@ export const LineDrawer = ({
                 onClear={() => searchTemplate('')}
             />
             <Pagination onPageChange={() => { getAllLineTemplate({getNextPage: true}); }} paginationSelector="pagination-container">
+                {
+                    !cardDataList.length
+                    ? (
+                        <CapHeading type="h6" style={{ textAlign: 'center', padding: 20 }}>
+                            <FormattedMessage {...messages.noTemplatesFound} />
+                        </CapHeading>
+                    )
+                    : null
+                }
                 <div className="pagination-container">
                     <CapCustomCardList
                         key={'LINE-card-list'}
@@ -86,8 +114,8 @@ export const LineDrawer = ({
                     />
                 </div>
             </Pagination>
-        </>
+        </CapSpin>
         )
 }
 
-export default LineDrawer;
+export default injectIntl(LineDrawer);

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

@@ -0,0 +1,20 @@
+
+
+/*
+ * LineDrawer Messages
+ *
+ * This contains all the text for the LineDrawer component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineDrawer`;
+
+export default defineMessages({
+  "noTemplatesFound": {
+    id: `${scope}.noTemplatesFound`,
+    defaultMessage: 'No templates found',
+  },
+  "gettingAllTemplates": {
+    id: `${scope}.gettingAllTemplates`,
+    defaultMessage: "Getting all templates...",
+  },
+});

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

@@ -39,6 +39,9 @@ export const LineImage = ({
     activeKey,
     Templates,
     getAllTemplates,
+    uploadedAssetList,
+    updateUploadedAssetList,
+    deleteUploadedImgList,
 }) => {
     if (activeKey !== 'image') {
         return null;
@@ -81,17 +84,40 @@ export const LineImage = ({
     }, [errorMessageTitle, imageSrc, messageTitle, isImageError]);
 
     useEffect(() => {
-        const imgSrc = get(Line, 'uploadedAssetData.metaInfo.secure_file_path', '');
-        const imgPreview = get(Line, 'uploadedAssetData.metaInfo.secure_file_path_preview', '');
+        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();
+        }
+    }, [Line.uploadedAssetData]);
+
+    useEffect(() => {
+        const imgSrc = get(uploadedAssetList[index], 'imgSrc', '');
+        const imgPreview = get(uploadedAssetList[index], 'imgPreview', '');
 
         if (imgSrc) {
             updateImageSrc(imgSrc);
             updateImageStatus(true);
-        }
-        if (imgPreview)  {
             updateImagePreview(imgPreview);
+
+            updateMessageState({
+                isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
+                originalContentUrl: imgSrc,
+                previewImageUrl: imgPreview,
+                messageTitle,
+                index,
+                type: 'image',
+                messageType: 'originalContentUrl',
+            });
         }
-    }, [Line]);
+    }, [uploadedAssetList]);
 
     const submitAction = (data, incorrectFile) => {
         const {
@@ -105,8 +131,9 @@ export const LineImage = ({
             type,
         } = data;
         if (incorrectFile || size > LINE_IMG_SIZE || height > LINE_IMG_HEIGHT || width > LINE_IMG_WIDTH) {
-            updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize))
+            updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize));
         } else {
+            updateImageErrorMessage('');
             data.fileParams.isGeneratePreview = true;
             actions.uploadAsset(
                 data.file,
@@ -207,6 +234,7 @@ export const LineImage = ({
         if (!isFullMode) {
             updateCreateNew(false);
         }
+        deleteUploadedImgList(index);
         updateImageSrc('');
         updateImagePreview('');
         updateMessageState({
@@ -363,6 +391,7 @@ export const LineImage = ({
                 getAllTemplates={getAllTemplates}
                 cardDataList={cardDataList}
                 isDrawer={isTemplateDrawerRequired}
+                Templates={Templates}
                 searchPlaceholder={formatMessage(messages.searchImages)}
             />
         </>

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

@@ -1,7 +1,7 @@
 export const LINE_ASSET_WIDTH = 1040;
 export const LINE_ASSET_HEIGHT = 1040;
 export const LINE_CUSTOM_ASSET_HEIGHT_MIN = 520;
-export const LINE_CUSTOM_ASSET_HEIGHT_MAX= 1040;
+export const LINE_CUSTOM_ASSET_HEIGHT_MAX= 2080;
 export const DEFAULT_ASSET_TYPE = 'default';
 export const CUSTOM_ASSET_TYPE = 'custom';
 export const DEFAULT_TEMPLATES = [

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

@@ -164,11 +164,12 @@ export const LineImageMap = ({
             type,
         } = data;
         const validWidth = width === LINE_ASSET_WIDTH;
-        const validHeight = assetType === CUSTOM_ASSET_TYPE ? ( LINE_CUSTOM_ASSET_HEIGHT_MIN <= height && height <= LINE_CUSTOM_ASSET_HEIGHT_MAX) : height === LINE_ASSET_HEIGHT;
-        if (incorrectFile || size > LINE_IMG_SIZE || !validWidth || !validHeight) {
-            updateImageErrorMessage(formatMessage(messages.lineImageMapIncorrectSize))
+        const isCustom = assetType === CUSTOM_ASSET_TYPE;
+        const validHeight = isCustom ? ( LINE_CUSTOM_ASSET_HEIGHT_MIN <= height && height <= LINE_CUSTOM_ASSET_HEIGHT_MAX) : height === LINE_ASSET_HEIGHT;
+        if (incorrectFile || !validWidth || !validHeight) {
+            updateImageErrorMessage(formatMessage(messages.lineImageMapIncorrectSize));
         } else {
-            updateImageErrorMessage('')
+            updateImageErrorMessage('');
             data.fileParams.isGeneratePreview = true;
             updateBaseSize({
               height,
@@ -176,7 +177,7 @@ export const LineImageMap = ({
             });
             actions.uploadAsset(
                 data.file,
-                data.type,
+                isCustom ? `${data.type}?assetType=${CUSTOM_ASSET_TYPE}` : data.type,
                 data.fileParams,
             );
         }
@@ -323,12 +324,12 @@ export const LineImageMap = ({
                     <CapHeading className="dragger-or" type="label6">
                         <FormattedMessage {...messages.or} />
                     </CapHeading>
-                    <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}}>
+                    <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}} disabled={!imageMapTemplate}>
                         <FormattedMessage {...messages.uploadComputer} />
                     </CapButton>
                 </CapUploader.CapDragger>
                 <CapLabel type="label9" style={{marginTop: CAP_SPACE_12 }}>
-                    {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2040 px'})}
+                    {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2080 px'})}
                 </CapLabel>
                 <CapDivider />
             </>);
@@ -337,7 +338,7 @@ export const LineImageMap = ({
           <>
             <CapImage className="base-image-preview" src={`${imageSrc}/1040`} />
             <CapLabel type="label9" style={{marginTop: CAP_SPACE_12 }}>
-              {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2040 px'})}
+              {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2080 px'})}
             </CapLabel>
             <CapDivider />
           </>

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

@@ -15,6 +15,8 @@ import messages from './messages';
 import style from './style';
 import withStyles from '../../../../hoc/withStyles';
 
+import { validateTags } from '../../../../utils/tagValidations';
+
 const { TextArea } = CapInput;
 const {CapCustomCardList} = CapCustomCard;
 
@@ -71,7 +73,7 @@ export const LineText = ({
     useEffect(() => {
         if (messageContent && (isFullMode ? messageTitle : true)) {
             updateMessageState({
-                isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? messageTitle : true) || (errorMessageTextarea && errorMessageTitle)),
+                isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? messageTitle : true) || (errorMessageTextarea || errorMessageTitle)),
                 messageContent,
                 messageTitle,
                 index,
@@ -116,10 +118,19 @@ export const LineText = ({
 
     const updateTextContentError = (value) => {
         let errorMessage = false;
+        const { valid } = validateTags({
+            content: value,
+            tagsParam: tags,
+            injectedTagsParams: injectedTags,
+            location,
+            tagModule: 'outbound',
+        }) || {};
         if (value === '') {
             errorMessage = formatMessage(messages.emptyTitleErrorMessage);
         } else if (value.length > charLimit) {
             errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
+        } else if (!valid && !isFullMode) {
+            errorMessage = formatMessage(messages.invalidTagError);
         }
         updateErrorMessageTextArea(errorMessage);
     }
@@ -128,7 +139,7 @@ export const LineText = ({
         updateTextMessageContent(value);
         updateTextContentError(value);
         updateMessageState({
-            isError: (value.length > charLimit) || (!value || !(isFullMode ? messageTitle : true) || (!value && errorMessageTitle)),
+            isError: (value.length > charLimit) || (!value || !(isFullMode ? messageTitle : true) || (!value || errorMessageTitle)),
             messageContent: value,
             messageTitle,
             index,
@@ -149,7 +160,7 @@ export const LineText = ({
         updateTextMessageTitle(value);
         updateTextTitleError(value);
         updateMessageState({
-            isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? value : true) || (!value && errorMessageTextarea)),
+            isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? value : true) || (!value || errorMessageTextarea)),
             messageContent,
             messageTitle: value,
             index,
@@ -158,7 +169,11 @@ export const LineText = ({
         });
     }
 
-    const onTagSelect = (data) => updateTextMessageContent(`${messageContent}{{${data}}}`);
+    const onTagSelect = (data) => {
+        const messageData = `${messageContent}{{${data}}}`;
+        updateTextMessageContent(messageData);
+        updateTextContentError(messageData);
+    }
 
     const setNewContent = () => updateCreateNew(true);
 
@@ -296,6 +311,7 @@ export const LineText = ({
                 isDrawer={isDrawerRequired}
                 className="drawer-head"
                 searchPlaceholder={formatMessage(messages.searchText)}
+                Templates={Templates}
             />
         </>
         );

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

@@ -71,4 +71,8 @@ export default defineMessages({
     id: `${scope}.searchText`,
     defaultMessage: 'Search Text',
   },
+  "invalidTagError": {
+    id: `${scope}.invalidTagError`,
+    defaultMessage: 'Please check the message content for unsupported/missing tags',
+  },
 });

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

@@ -71,6 +71,7 @@ export const LineWrapper = ({
             });
         } else {
             togglePopup(true);
+            rest.deleteUploadedImgList(index);
             updateSelectedKey(type);
             updateActiveKey(activeKey);
         }

package/v2Containers/Line/Container/index.js

@@ -62,6 +62,7 @@ export const LineContainer = ({
     const [isEditFlow, checkEditFlow] = useState(false);
     const [isEditLoading, updateEditLoading] = useState(false);
     const [accountSelectFlow, updateAccountSelectFlow] = useState(false);
+    const [uploadedAssetList, updateUploadedAssetList] = useState({});
     const [selectedAccount, updateSelectedAccount] = useState('');
 
     useEffect(() => {
@@ -71,6 +72,7 @@ export const LineContainer = ({
             const queryParams = {"sortBy":"Most Recent","page":1,"perPage":25};
             templateActions.getAllTemplates('Line', queryParams);
         }
+        return () => actions.clearAsset();
     }, []);
 
     const onAccountSelect = (account) => {
@@ -174,6 +176,12 @@ export const LineContainer = ({
         }
     }, [templateData]);
 
+    const deleteUploadedImgList = (selectedIndex) => {
+        const newUploadedAssetList = { ...uploadedAssetList };
+        delete newUploadedAssetList[selectedIndex];
+        updateUploadedAssetList(newUploadedAssetList);
+    }
+
     const addLineWrappers = () => {
         updateLineWrapperContent([...lineWrapperContents, ...initialWrapperContent])
     }
@@ -181,6 +189,11 @@ export const LineContainer = ({
     const deleteWrapper = index => {
         const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
         if (selectedIndex > -1) {
+            // change uploaded img sequence
+            const newUploadedAssetList = { ...uploadedAssetList };
+            delete newUploadedAssetList[index];
+            updateUploadedAssetList(newUploadedAssetList);
+
             const newLineWrapperContents = [...lineWrapperContents];
             newLineWrapperContents.splice(selectedIndex, 1);
             updateLineWrapperContent(newLineWrapperContents);
@@ -191,6 +204,14 @@ export const LineContainer = ({
         const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
         const selectedElement = lineWrapperContents.find((el, i) => i === index);
         if (selectedIndex > -1) {
+            // change uploaded img sequence
+            const newUploadedAssetList = { ...uploadedAssetList };
+            const selectedUploadedAsset = uploadedAssetList[index];
+            const newPositionUploadedAsset = uploadedAssetList[index - 1];
+            newUploadedAssetList[index - 1] = selectedUploadedAsset;
+            newUploadedAssetList[index] = newPositionUploadedAsset;
+            updateUploadedAssetList(newUploadedAssetList);
+
             const newLineWrapperContents = [...lineWrapperContents];
             newLineWrapperContents.splice(selectedIndex, 1);
             newLineWrapperContents.splice(selectedIndex - 1, 0, selectedElement);
@@ -202,6 +223,14 @@ export const LineContainer = ({
         const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
         const selectedElement = lineWrapperContents.find((el, i) => i === index);
         if (selectedIndex > -1) {
+            // change uploaded img sequence
+            const newUploadedAssetList = { ...uploadedAssetList };
+            const selectedUploadedAsset = uploadedAssetList[index];
+            const newPositionUploadedAsset = uploadedAssetList[index + 1];
+            newUploadedAssetList[index + 1] = selectedUploadedAsset;
+            newUploadedAssetList[index] = newPositionUploadedAsset;
+            updateUploadedAssetList(newUploadedAssetList);
+
             const newLineWrapperContents = [...lineWrapperContents];
             newLineWrapperContents.splice(selectedIndex, 1);
             newLineWrapperContents.splice(selectedIndex + 1, 0, selectedElement);
@@ -258,6 +287,9 @@ export const LineContainer = ({
                     lineWrappers={lineWrapperContents.length}
                     Templates={Templates}
                     getAllTemplates={templateActions.getAllTemplates}
+                    uploadedAssetList={uploadedAssetList}
+                    deleteUploadedImgList={deleteUploadedImgList}
+                    updateUploadedAssetList={updateUploadedAssetList}
                 />
             );
         });
@@ -505,7 +537,7 @@ export const LineContainer = ({
         <div className={className}>
             <CapSpin spinning={isLoading}>
                 <CapRow>
-                    <CapColumn span={14}>
+                    <CapColumn span={14} style={{ zIndex: 1 }}>
                         {getAccountSection()}
                         <CapHeader
                             title={formatMessage(messages.lineCreativeTitle)}