@capillarytech/creatives-library 3.10.0 → 3.11.0

package/v2Containers/MobilePush/Create/index.js

@@ -1714,6 +1714,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
+                onPreviewContentClicked={this.props.onPreviewContentClicked}
+                onTestContentClicked={this.props.onTestContentClicked}
+                templateData={this.props.templateData}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -1803,6 +1806,8 @@ Create.propTypes = {
   isGetFormData: PropTypes.bool,
   onValidationFail: PropTypes.func,
   getFormLibraryData: PropTypes.func,
+  onPreviewContentClicked: PropTypes.func,
+  onTestContentClicked: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Edit/index.js

@@ -1801,6 +1801,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
+                onPreviewContentClicked={this.props.onPreviewContentClicked}
+                onTestContentClicked={this.props.onTestContentClicked}
+                templateData={this.props.templateData}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -1893,6 +1896,8 @@ Edit.propTypes = {
   isGetFormData: PropTypes.bool,
   Create: PropTypes.object,
   onValidationFail: PropTypes.bool,
+  onPreviewContentClicked: PropTypes.func,
+  onTestContentClicked: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilepushWrapper/index.js

@@ -69,7 +69,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
     }
   }
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -112,6 +112,9 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               route={{ name: 'mobilepush' }}
               getDefaultTags={type}
               onValidationFail={onValidationFail}
+              onPreviewContentClicked={onPreviewContentClicked}
+              onTestContentClicked={onTestContentClicked}
+              templateData={templateData}
           />
 
 

package/v2Containers/Sms/Create/index.js

@@ -928,7 +928,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({startValidation: true}, this.showError);
   }
   render() {
-    console.log("this.props sms create: ", this.props);
     const schema = this.state.schema;
     const spinning = this.isSmsLoading();
     let tags = this.props.metaEntities && this.props.metaEntities.tags && this.props.metaEntities.tags.standard ? this.props.metaEntities.tags.standard : [];
@@ -976,6 +975,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
+                onTestContentClicked={this.props.onTestContentClicked}
+                onPreviewContentClicked={this.props.onPreviewContentClicked}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Sms/Edit/index.js

@@ -972,6 +972,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
+                onPreviewContentClicked={this.props.onPreviewContentClicked}
+                onTestContentClicked={this.props.onTestContentClicked}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Templates/_templates.scss

@@ -18,6 +18,28 @@
   }
 }
 
+.creatives-templates-list {
+  .pagination-container {
+    .LINE {
+      .ant-card-body {
+        background-color: $CAP_G09;
+        height: 320px;
+      }
+    
+      &.no-image .ant-card-meta {
+        height: 276px;
+        background: $CAP_WHITE;
+        padding: $CAP_SPACE_16 $CAP_SPACE_12;
+    
+        .ant-card-meta-description {
+          height: 250px;
+          word-wrap: break-word;
+        }
+      }
+    }
+  }
+}
+
 .card-title {
   line-height: 24px;
   font-size: 14px;
@@ -361,7 +383,8 @@
   overflow: hidden;
 }
 
-.wechat-filters {
+.wechat-filters,
+.line-filters {
   width: 100%;
   padding-left: 12px;
   .ant-radio-button-wrapper {

package/v2Containers/Templates/actions.js

@@ -52,6 +52,13 @@
    };
  }
 
+ export function setLineAccount(lineAccount) {
+  return {
+    type: types.SET_LINE_ACCOUNT,
+    lineAccount,
+  };
+}
+
  export function handleHtmlUpload(selectedTemplate) {
    return {
      type: types.SET_SELECTED_LAYOUT,

package/v2Containers/Templates/constants.js

@@ -43,3 +43,5 @@ export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
 export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";

package/v2Containers/Templates/index.js

@@ -50,7 +50,7 @@ import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
-import { CHANNEL_CREATE_TRACK_MAPPING, CHANNEL_EDIT_TRACK_MAPPING } from '../App/constants'
+import { CHANNEL_CREATE_TRACK_MAPPING, CHANNEL_EDIT_TRACK_MAPPING } from '../App/constants';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
@@ -77,6 +77,11 @@ const WECHAT_FILTERS = {
   MAPTEMPLATES: 'maptemplate',
 };
 
+const LINE_FILTERS = {
+  ALL: 'all',
+  TEXT: 'text',
+  IMAGE_VIDEO: 'image',
+};
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -104,6 +109,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       routeParams: null,
       activeMode: TEMPLATES_MODE,
       wechatFilter: WECHAT_FILTERS.ALL,
+      lineFilter: LINE_FILTERS.ALL,
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -154,6 +160,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         case LINE:
           channel = "Line";
+          if (!this.props.isFullMode) {
+            activeMode = ACCOUNT_SELECTION_MODE;
+            this.props.actions.getWeCrmAccounts(channel);
+          }
           break;
         default:
           channel = '';
@@ -166,7 +176,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   componentDidMount() {
-    
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
@@ -234,6 +243,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         channel = 'Ebill';
       } else if (nextProps.route.name.toLowerCase() === 'line') {
         channel = 'Line';
+        if (!this.props.isFullMode) {
+          this.setState({defaultAccount: true});
+          nextProps.actions.getWeCrmAccounts(channel);
+        }
       }
       this.setState({ channel }, () => {
         if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
@@ -416,6 +429,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
+      } else if (this.state.channel.toLowerCase() === 'line') {
+        this.props.actions.setLineAccount(this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
       }
       this.setState({activeMode: TEMPLATES_MODE});
       console.log("getAllTemplates params: ", params);
@@ -454,6 +469,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         } else {
           creativesParams._id = pathname.split('/')[3];
+          creativesParams.modeType = pathname.split('/')[4];
+          creativesParams.account = pathname.split('/')[5];
         }
         creativesParams.type = this.state.channel.toUpperCase();
       }
@@ -546,6 +563,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return templates;
     }
   }
+
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
@@ -554,6 +572,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (currentChannel === WECHAT) {
       filteredTemplates = this.filterWechatTemplates(templates);
     }
+    if (currentChannel === LINE) {
+      filteredTemplates = this.filterLineTemplates(templates);
+    }
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
         {
@@ -567,7 +588,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }}
               />,
           ],
-          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
+          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
@@ -607,6 +628,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
+        case LINE: {
+          const {
+            content: {
+              messages: [{
+                text = '',
+                originalContentUrl = '',
+              }] = [{}],
+            } = {},
+          } = template.versions.base;
+          templateData.content = text;
+          templateData.url = originalContentUrl;
+          break;
+        }
         default:
           templateData.content = "";
       }
@@ -623,7 +657,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
               <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} style={{marginLeft: '16px'}}/>
             </div>)
-            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
@@ -645,7 +679,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
@@ -656,6 +690,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     </div>);
   }
+  filterLineTemplates = (templates) => {
+    const { lineFilter } = this.state;
+    if (LINE_FILTERS.ALL === lineFilter) {
+      return templates;
+    }
+    return templates.filter((template) => template.definition && template.definition.mode === lineFilter);
+  }
   skipTemplateSelection = (e) => {
     const type = this.props.location.query.type;
     const module = (type === 'embedded') ? this.props.location.query.module : 'default';
@@ -930,7 +971,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
   };
- 
+
   createTemplate(ev) {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
@@ -1089,7 +1130,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (this.state.channel.toLowerCase() === "email") {
       this.props.emailActions.duplicateTemplate(template._id, "EMAIL");
     } else if (this.state.channel.toLowerCase() === "line") {
-      this.props.lineActions.createTemplate(duplicateObj);
+      this.props.lineActions.createTemplate(duplicateObj, (response) => {
+        if (response && response.templateId) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+          this.getAllTemplates({params, resetPage: true});
+          this.props.lineActions.clearCreateResponse();
+        }
+      });
     }
   }
 
@@ -1131,7 +1179,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  handleEditClick(e, template, modeType, path) {
+  handleEditClick(e, template, modeType, path, options) {
     timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
@@ -1164,7 +1212,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       pathName = `/ebill/edit/${id}`;
     }
     if (this.state.channel.toLowerCase() === 'line') {
-      pathName = `/line/edit/${modeType}/${id}`;
+      const { messages } = template.versions.base.content;
+      const type = messages && messages[0] && messages[0].type;
+      pathName = `/line/edit/${id}/${type}`;
+      if (options && options.account) {
+        pathName += `/${options.account}`;
+      }
     }
     if (this.state.channel.toUpperCase() === WECHAT) {
       if (get(template, 'definition.msgcontent', '') === "RICH_MEDIA_WECHAT") {
@@ -1545,10 +1598,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { weCrmAccounts = [], fetchingWeCrmAccounts = false } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
+    const isLineChannel = channel === LINE;
 
-    if ((isWechatChannel || isMobilePushChannel) && !isEmpty(weCrmAccounts)) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -1581,11 +1635,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       });
     }
+    const {
+      intl: {
+        formatMessage,
+      },
+    } = this.props;
+    let accountHeader = formatMessage(messages.mobilepushAccount);
+    let noAccountHeader = messages.noAccountsPresent;
+    switch (channel) {
+      case MOBILE_PUSH: {
+        accountHeader = formatMessage(messages.mobilepushAccount);
+        noAccountHeader = messages.noAccountsPresent;
+        break;
+      }
+      case WECHAT: {
+        accountHeader = formatMessage(messages.wechatAccount);
+        noAccountHeader = messages.noAccountsPresentWeChat;
+        break;
+      }
+      case LINE: {
+        accountHeader = formatMessage(messages.lineAccount);
+        noAccountHeader = messages.noAccountsPresentLine;
+        break;
+      }
+      default:
+        break;
+    }
     return (<CapSpin spinning={fetchingWeCrmAccounts}>
-      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...(channel === WECHAT ? messages.noAccountsPresentWeChat : messages.noAccountsPresent)} /> :
+      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...noAccountHeader} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
-          title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}
+          title={accountHeader}
           description={this.props.intl.formatMessage(messages.chooseAccount)}
           size="regular"
           className="select-account-header"
@@ -1631,10 +1711,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   setWechatFilter = (e) => this.setState({wechatFilter: e.target.value});
+  setLineFilter = (e) => this.setState({lineFilter: e.target.value});
 
   render() {
     const isFullMode = this.isFullMode();
-    const { activeMode, channel, wechatFilter } = this.state;
+    const { activeMode, channel, wechatFilter, lineFilter } = this.state;
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       return this.renderAccountSelection();
     }
@@ -1688,7 +1769,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </CapLabel></CapRadio.Button>
         </CapRadio.CapRadioGroup>
       }
-      
+      {
+        channel.toUpperCase() === LINE && <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
+          {
+            (() => {
+              const { ALL, TEXT, IMAGE_VIDEO } = LINE_FILTERS;
+              return (
+                <>
+                  <CapRadio.Button value={ALL}><CapLabel type="label2">
+                    <FormattedMessage {...messages.all} />
+                  </CapLabel></CapRadio.Button>
+                  <CapRadio.Button value={TEXT}><CapLabel type="label2">
+                    <FormattedMessage {...messages.textTemplate} />
+                  </CapLabel></CapRadio.Button>
+                  <CapRadio.Button value={IMAGE_VIDEO}><CapLabel type="label2">
+                    <FormattedMessage {...messages.imageTemplate} />
+                  </CapLabel></CapRadio.Button>
+                </>
+              );
+            })()
+          }
+        </CapRadio.CapRadioGroup>
+      }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton
           className={`create-new-${channelLowerCase}`}
@@ -1744,6 +1846,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               channel={route.name.toUpperCase()}
               handleCloseCreatives={this.onCreateComplete}
               selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
+              selectedAccount={this.state.selectedAccount}
             />
           }
           </CapRow>

package/v2Containers/Templates/messages.js

@@ -126,6 +126,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentWeChat`,
     defaultMessage: "Wechat accounts are not setup for your brand",
   },
+  "noAccountsPresentLine": {
+    id: `${scope}.noAccountsPresentLine`,
+    defaultMessage: "Line accounts are not setup for your brand",
+  },
   "noTemplatesMessage": {
     id: `${scope}.noTemplatesMessage`,
     defaultMessage: "No templates available",
@@ -326,6 +330,10 @@ export default defineMessages({
     id: `${scope}.mobilepushAccount`,
     defaultMessage: 'Mobilepush account',
   },
+  "lineAccount": {
+    id: `${scope}.lineAccount`,
+    defaultMessage: 'Line account',
+  },
   "all": {
     id: `${scope}.all`,
     defaultMessage: 'All',

package/v2Containers/Templates/reducer.js

@@ -71,6 +71,8 @@ function templatesReducer(state = initialState, action) {
     case types.SET_WECHAT_ACCOUNT:
       return state
         .set('selectedWeChatAccount', fromJS(action.weChatAccount));
+    case types.SET_LINE_ACCOUNT:
+      return state.set('selectedLineAccount', fromJS(action.lineAccount));
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')

package/v2Containers/TemplatesV2/index.js

@@ -43,11 +43,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     } = props;
 
     const defaultPanes = {
-      sms: {content: <div></div>, tab: intl.formatMessage(messages.sms), key: 'sms'},
-      email: {content: <div></div>, tab: intl.formatMessage(messages.email), key: 'email'},
-      weChat: {content: <div></div>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
+      sms: {content: <></>, tab: intl.formatMessage(messages.sms), key: 'sms'},
+      email: {content: <></>, tab: intl.formatMessage(messages.email), key: 'email'},
+      weChat: {content: <></>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      mPush: {content: <div></div>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {

package/v2Containers/TemplatesV2/messages.js

@@ -54,4 +54,8 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.wechat',
     defaultMessage: 'Wechat',
   },
+  line: {
+    id: 'creatives.containersV2.TemplatesV2.line',
+    defaultMessage: 'Line',
+  },
 });