@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

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

@@ -0,0 +1,19 @@
+import { getAllTemplates } from "../actions";
+import * as types from "../constants";
+
+describe("Test zalo list actions", () => {
+  it("has a type of GET_ALL_TEMPLATES_REQUEST action", () => {
+    const channel = "Zalo";
+    const queryParams = {
+      page: 1,
+      perPage: 25,
+    };
+    const expected = {
+      type: types.GET_ALL_TEMPLATES_REQUEST,
+      channel,
+      intlCopyOf: "test",
+      queryParams,
+    };
+    expect(getAllTemplates(channel, queryParams, "test")).toEqual(expected);
+  });
+});

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

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { Templates } from '../index';
 import mockdata from '../../mockdata';
 
-const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput } = mockdata;
+const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput, zaloTemplates: ZaloTemplateProp } = mockdata;
 
 jest.mock('../../CreativesContainer', () => ({
   __esModule: true,
@@ -57,6 +57,36 @@ describe('Test Templates container', () => {
     );
   };
 
+  const renderZaloFunction = (isFullMode) => {
+    renderedComponent = shallowWithIntl(
+      <Templates
+        route={{
+          name: 'Zalo',
+        }}
+        Templates={ZaloTemplateProp}
+        actions={{
+          getWeCrmAccounts,
+          setChannelAccount,
+          getAllTemplates,
+          getUserList,
+          getSenderDetails,
+        }}
+        location={{
+          pathname: '/Zalo',
+          query: {},
+          search: '',
+        }}
+        EmailCreate={{
+          duplicateTemplateInProgress: false,
+        }}
+        isFullMode={isFullMode}
+        intl={{
+          formatMessage: () => {},
+        }}
+      />,
+    );
+  };
+
   it('Should render correct component for whatsapp channel', () => {
     renderFunction();
     expect(renderedComponent).toMatchSnapshot();
@@ -97,6 +127,28 @@ describe('Test Templates container', () => {
       getCreativesParamsOutput,
     );
   });
+  it('Should render correct component for zalo channel', () => {
+    renderZaloFunction();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('Should render temlates when zalo templates are passed', () => {
+    renderZaloFunction();
+    renderedComponent.setProps({ TemplatesList: ZaloTemplateProp.templates });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('Should render temlates when Zalo templates are passed in full mode', () => {
+    renderZaloFunction(true);
+    renderedComponent.setProps({ TemplatesList: ZaloTemplateProp.templates });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('Should render illustration when no templates are passed', () => {
+    renderZaloFunction();
+    renderedComponent.setProps({
+      TemplatesList: [],
+      Templates: {},
+    });
+    expect(renderedComponent).toMatchSnapshot();
+  });
 
   const getFilterContainer = () => {
     const FilterContainer = () =>

package/v2Containers/Templates/tests/mockData.js

@@ -23,8 +23,52 @@ export const getCdnTransformationConfigSuccess = {
     }
 };
 
+export const getAllTemplatesListSuccess = {
+        "name": "Test2 QR - Thông báo thanh toán thành công",
+        "versions": {
+          "base": {
+            "content": {
+              "ZALO": {
+                "templateId": "268531",
+                "templateName": "Test QR - Thông báo thanh toán thành công",
+                "listParams": [
+                  {
+                    "name": "danh_xung",
+                    "require": true,
+                    "type": "STRING",
+                    "maxLength": 30,
+                    "minLength": 0,
+                    "acceptNull": false,
+                  },
+                  {
+                    "name": "name",
+                    "require": true,
+                    "type": "STRING",
+                    "maxLength": 30,
+                    "minLength": 0,
+                    "acceptNull": false,
+                  },
+                ],
+                "previewUrl": "https://account.zalo.cloud/znspreview/-e0cMil4NU5WUUAVzP7T_g=="
+              },
+            },
+          },
+        },
+        "type": "ZALO",
+  response: {
+    templates: [{name: '1', id: '2'}],
+        },
+        intlCopyOf: 'test',
+};
+
 export const getCdnTransformationConfigFailure = {
     "isError": true,
     "message": "Resource Not Found",
     "error": {}
-};
+};
+
+export const getAllTemplatesListFailure = {
+  "isError": true,
+  "message": "Resource Not Found",
+  "error": {},
+};

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

@@ -0,0 +1,50 @@
+import reducer, { initialState } from "../reducer";
+import * as types from "../constants";
+import * as mockData from "./mockData";
+
+describe("test reducer", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return the initial state", () => {
+    expect(reducer(undefined, {})).toEqual(initialState);
+  });
+
+  it("should handle GET_ALL_TEMPLATES_REQUEST", () => {
+    const action = {
+      type: types.GET_ALL_TEMPLATES_REQUEST,
+    };
+    expect(reducer(initialState, action).toJS()).toEqual({
+      ...initialState.toJS(),
+      getAllTemplatesInProgress: true,
+    });
+  });
+
+  it("should handle GET_ALL_TEMPLATES_SUCCESS", () => {
+    const action = {
+      type: types.GET_ALL_TEMPLATES_SUCCESS,
+      data: mockData.getAllTemplatesListSuccess,
+    };
+    const expectedResult = {
+      ...initialState.toJS(),
+      getAllTemplatesInProgress: false,
+      templateError: {},
+      weCRMtemplates: [],
+      templates: [undefined],
+      isSearch: undefined,
+    };
+    expect(reducer(initialState, action).toJS()).toEqual(expectedResult);
+  });
+
+  it("should handle GET_ALL_TEMPLATES_FAILURE", () => {
+    const action = {
+      type: types.GET_ALL_TEMPLATES_FAILURE,
+    };
+    expect(reducer(initialState, action).toJS()).toEqual({
+      ...initialState.toJS(),
+      getAllTemplatesInProgress: false,
+      templateError: undefined,
+    });
+  });
+});

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

@@ -1,5 +1,5 @@
 import { expectSaga } from 'redux-saga-test-plan';
-import { take, call, takeLatest, takeEvery } from 'redux-saga/effects';
+import { take, call, takeLatest, takeEvery, put } from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import * as api from '../../../services/api';
 import * as types from '../constants';
@@ -7,10 +7,15 @@ import * as cdnUtils from '../../../utils/cdnTransformation';
 
 import {
   getCdnTransformationConfig,
-  watchGetCdnTransformationConfig
+  getAllTemplates,
+  watchGetCdnTransformationConfig,
+  watchGetAllTemplates,
+  getSenderDetails,
 } from '../sagas';
 
 import * as mockData from './mockData';
+import { ZALO } from '../../CreativesContainer/constants';
+import { VIET_GUYS } from '../../Zalo/constants';
 
 describe('getCdnTransformationConfig saga', () => {
   it("handle valid response from api", () => {
@@ -73,4 +78,112 @@ describe('watchForGetJourneyList saga', () => {
         takeLatest(types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST, getCdnTransformationConfig),
       );
     });
-  });
+});
+
+describe('templateList saga', () => {
+  it('handle valid response from api', () => {
+    expectSaga(getAllTemplates, mockData.getAllTemplatesListSuccess)
+    .provide([
+      [
+        matchers.call.fn(api.getAllTemplates),
+        mockData.getAllTemplatesListSuccess,
+      ],
+    ]).put({
+        type: types.GET_ALL_TEMPLATES_SUCCESS,
+        data: mockData.getAllTemplatesListSuccess,
+        weCRMTemplate: mockData.getAllTemplatesListSuccess,
+        isReset: mockData.getAllTemplatesListSuccess?.queryParams?.page === 1,
+      })
+      .run();
+  });
+
+  it('handle valid response from api', () => {
+    mockData.getAllTemplatesListSuccess.intlCopyOf = '';
+    expectSaga(getAllTemplates, mockData.getAllTemplatesListSuccess)
+    .provide([
+      [
+        matchers.call.fn(api.getAllTemplates),
+        mockData.getAllTemplatesListSuccess,
+      ],
+    ]).put({
+        type: types.GET_ALL_TEMPLATES_SUCCESS,
+        data: mockData.getAllTemplatesListSuccess,
+        weCRMTemplate: mockData.getAllTemplatesListSuccess,
+        isReset: mockData.getAllTemplatesListSuccess?.queryParams?.page === 1,
+      })
+      .run();
+  });
+  it('handles error thrown from api', () => {
+    expectSaga(getAllTemplates, mockData.getAllTemplatesListFailure)
+      .provide([
+        [
+          call(api.getAllTemplates),
+          mockData.getAllTemplatesListFailure,
+        ],
+      ])
+      .put({
+        type: types.GET_ALL_TEMPLATES_FAILURE,
+        res: mockData.getAllTemplatesListFailure,
+      })
+      .run();
+  });
+});
+
+describe('watchForTemplates saga', () => {
+  const generator = watchGetAllTemplates();
+  it('should call watchers functions', () => {
+    expect(generator.next().value).toEqual(
+      takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates),
+    );
+  });
+});
+
+describe('getSenderDetails Saga', () => {
+  const channel = 'someChannel';
+  const orgUnitId = 'someOrgUnitId';
+  const action = { channel, orgUnitId };
+
+  it('should handle apiResponse with hostName', () => {
+    const apiResponse = {
+      entity: {
+        [channel]: [
+          {
+            domainProperties: {
+              hostName: 'example.com',
+            },
+          },
+        ],
+      },
+    };
+
+    const generator = getSenderDetails(action);
+    expect(generator.next().value).toEqual(call(api.getSenderDetails, channel, orgUnitId));
+    expect(generator.next(apiResponse).value).toEqual(
+      put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: 'example.com',
+      })
+    );
+  });
+
+  it('should handle apiResponse without hostName', () => {
+    const apiResponse = {
+      entity: {
+        [channel]: [
+          {
+            domainProperties: {},
+          },
+        ],
+      },
+    };
+
+    const generator = getSenderDetails(action);
+    expect(generator.next().value).toEqual(call(api.getSenderDetails, channel, orgUnitId));
+    expect(generator.next(apiResponse).value).toEqual(
+      put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: '',
+      })
+    );
+  });
+});

package/v2Containers/Templates/tests/selector.test.js

@@ -0,0 +1,17 @@
+import { fromJS } from "immutable";
+import { makeSelectTemplatesResponse } from "../selectors";
+
+describe("Template selectors", () => {
+  const mockState = fromJS({
+    templates: [],
+  });
+
+  describe("makeSelectTemplatesResponse selector", () => {
+    it("should return the correct substate", () => {
+      const selected = makeSelectTemplatesResponse().resultFunc(
+        mockState.get("templates")
+      );
+      expect(selected).toEqual(mockState.getIn(["templates", "templates"]));
+    });
+  });
+});

package/v2Containers/TemplatesV2/index.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
@@ -29,9 +29,60 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
+import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
+import injectSaga from '../../utils/injectSaga';
+import injectReducer from '../../utils/injectReducer';
+
+import reducer from '../Templates/reducer';
+import v2CapReducer from '../Cap/reducer';
+import v2CreativesContainerReducer from '../CreativesContainer/reducer';
+import v2SmsCreateReducer from '../Sms/Create/reducer';
+import v2SmsEditReducer from '../Sms/Edit/reducer';
+import v2EmailReducer from '../Email/reducer';
+import v2CallTaskReducer from '../CallTask/reducer';
+import v2MobilePushCreateReducer from '../MobilePush/Create/reducer';
+import v2MobilePushEditReducer from '../MobilePush/Edit/reducer';
+import v2WechatMapTemplatesReducer from '../WeChat/MapTemplates/reducer';
+import v2WechatRichmediaTemplatesCreateReducer from '../WeChat/RichmediaTemplates/Create/reducer';
+import v2WechatRichmediaTemplatesEditReducer from '../WeChat/RichmediaTemplates/Edit/reducer';
+import v2AssetsGalleryReducer from '../Assets/Gallery/reducer';
+import v2FacebookReducer from '../Facebook/reducer';
+import v2LineContainerReducer from '../Line/Container/reducer';
+import v2ViberReducer from '../Viber/reducer';
+import v2CapFacebookPreviewReducer from '../CapFacebookPreview/reducer';
+import v2SmsTraiCreateReducer from '../SmsTrai/Create/reducer';
+import v2WhatsappReducer from '../Whatsapp/reducer';
+import v2ZaloReducer from '../Zalo/reducer';
+import v2InAppReducer from '../InApp/reducer';
+import v2RcsReducer from '../InApp/reducer';
+import leftNavReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
+
+import { v2TemplateSaga } from '../Templates/sagas';
+import { v2CapSagas } from '../Cap/sagas';
+import { v2SmsCreateSagas } from '../Sms/Create/sagas';
+import { v2SmsEditSagas } from '../Sms/Edit/sagas';
+import { v2EmailSagas } from '../Email/sagas';
+import { v2BeeEditionSagas } from '../BeeEditor/sagas';
+import { v2CallTaskSagas } from '../CallTask/sagas';
+import { v2MobilePushCreateSagas } from '../MobilePush/Create/sagas';
+import { v2MobilePushEditSagas } from '../MobilePush/Edit/sagas';
+import { v2WechatMapTemplatesSagas } from '../WeChat/MapTemplates/sagas';
+import { v2WechatRichmediaTemplatesCreateSagas } from '../WeChat/RichmediaTemplates/Create/sagas';
+import { v2WechatRichmediaTemplatesEditSagas } from '../WeChat/RichmediaTemplates/Edit/sagas';
+import { v2GallerySagas } from '../Assets/Gallery/sagas';
+import { v2FacebookSagas } from '../Facebook/sagas';
+import { v2LineContainerSagas } from '../Line/Container/sagas';
+import { v2ViberSagas } from '../Viber/sagas';
+import { v2CapFacebookPreviewSagas } from '../CapFacebookPreview/sagas';
+import { v2SmsTraiCreateSagas } from '../SmsTrai/Create/sagas';
+import { v2WhatsappSagas } from '../Whatsapp/sagas';
+import { v2ZaloSagas } from '../Zalo/saga';
+import { v2InAppSagas } from '../InApp/sagas';
+import { v2RcsSagas } from '../Rcs/sagas';
+import navigationSagas from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/saga';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -51,6 +102,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange,
       showDisabledFBInfo,
       enableNewChannels = [],
+      currentOrgDetails = {},
+      cap = {},
     } = props;
 
     const defaultPanes = {
@@ -60,10 +113,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       weChat: {content: <></>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
       mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      inApp: { content: <div></div>, tab: intl.formatMessage(messages.inapp), key: INAPP },
       line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
       viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
       facebook: {content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'},
       whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: WHATSAPP },
+      zalo: { content: <div></div>, tab: intl.formatMessage(messages.zalo), key: ZALO },
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
@@ -85,10 +140,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
 
       // we only show channels which other than commonChannels
       // if it is coming in enableNewChannels array
-      filteredPanes.filter((item) => {
+      filteredPanes = filteredPanes.filter((item) => {
         const channel = item.key;
         if (!commonChannels.includes(channel)) {
-          return !enableNewChannels.includes(channel.toUpperCase());
+          return enableNewChannels.includes(channel.toUpperCase());
         }
         return true;
       });
@@ -112,6 +167,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       return pane;
     });
 
+    // This data will be available when it will be accessed in full mode
+    const { accessibleFeatures = [] } = currentOrgDetails || {};
+    // This data will be available when it will be accessed in library mode
+    const { currentOrgDetails: { accessibleFeatures: libModeAccessibleFeatures = [] } = {} } = cap || {};
+    const hideEngagementChannel = accessibleFeatures.includes(JP_LOCALE_HIDE_FEATURE) || libModeAccessibleFeatures.includes(JP_LOCALE_HIDE_FEATURE);
+    // Show only line and email channel content with both channel tabs if the JP_LOCALE_HIDE_FEATURE feature is enabled;
+    filteredPanes = hideEngagementChannel ? filteredPanes?.filter((pane) => [EMAIL, LINE, ASSETS].includes(pane?.key) && pane) : filteredPanes;
+    defaultChannel = hideEngagementChannel ? EMAIL : defaultChannel;
+
     const channel = ['sms', 'email', 'mobilepush', 'line', 'call_task'];
     if (!isEmpty(channelsToDisable)) {
       channel.some((ch) => {
@@ -136,7 +200,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
 
   componentDidMount() {
     const queryItems = getObjFromQueryParams(location.search);
-
     if (queryItems.channel === WHATSAPP) {
       this.channelChange(WHATSAPP);
     }
@@ -289,8 +352,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const { isFullMode, className, cap = {}, authData = {}} = this.props;
-    const { accessiblePermissions = []} = cap.user || authData.user || {};
+    const { isFullMode, className, cap = {}, Global = {}} = this.props;
+    const { accessiblePermissions = []} = cap.user || Global.user || {};
     let isCreativeAccessible = true;
     if (!accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
       isCreativeAccessible = false;
@@ -341,15 +404,19 @@ TemplatesV2.propTypes = {
   authData: PropTypes.object,
   FTPMode: PropTypes.string,
   messageStrategy: PropTypes.string,
+  currentOrgDetails: PropTypes.object,
 };
 
 TemplatesV2.defaultProps = {
   isFullMode: true,
+  currentOrgDetails: {},
 };
 
 const mapStateToProps = createStructuredSelector({
+  Global: makeSelectAuthenticated(),
   Templates: makeSelectTemplates(),
   TemplatesList: makeSelectTemplatesResponse(),
+  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -359,4 +426,109 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+const withTemplatesReducer = injectReducer({ key: 'templates', reducer });
+const withCapReducer = injectReducer({ key: 'cap', reducer: v2CapReducer });
+const withCreativesContainerReducer = injectReducer({ key: 'creativesContainer', reducer: v2CreativesContainerReducer });
+const withSmsCreateReducer = injectReducer({ key: 'create', reducer: v2SmsCreateReducer });
+const withSmsEditReducer = injectReducer({ key: 'edit', reducer: v2SmsEditReducer });
+const withEmailReducer = injectReducer({ key: 'email', reducer: v2EmailReducer });
+const withCallTaskReducer = injectReducer({ key: 'callTask', reducer: v2CallTaskReducer });
+const withMobilePushCreateReducer = injectReducer({ key: 'mobileCreate', reducer: v2MobilePushCreateReducer });
+const withMobilePushEditReducer = injectReducer({ key: 'mobileEdit', reducer: v2MobilePushEditReducer });
+const withWeChatMapTemplatesReducer = injectReducer({ key: 'weChatMapTemplate', reducer: v2WechatMapTemplatesReducer });
+const withWeChatRichmediaCreateReducer = injectReducer({ key: 'weChatRichmediaCreate', reducer: v2WechatRichmediaTemplatesCreateReducer });
+const withWeChatRichmediaEditReducer = injectReducer({ key: 'weChatRichmediaEdit', reducer: v2WechatRichmediaTemplatesEditReducer });
+const withGalleryReducer = injectReducer({ key: 'gallery', reducer: v2AssetsGalleryReducer });
+const withFacebookReducer = injectReducer({ key: 'facebook', reducer: v2FacebookReducer });
+const withLineContainerReducer = injectReducer({ key: 'lineCreate', reducer: v2LineContainerReducer });
+const withViberReducer = injectReducer({ key: 'viber', reducer: v2ViberReducer });
+const withCapFacebookPreviewReducer = injectReducer({ key: 'facebookPreview', reducer: v2CapFacebookPreviewReducer });
+const withSmsTraiCreateReducer = injectReducer({ key: 'smsTrai', reducer: v2SmsTraiCreateReducer });
+const withWhatsappReducer = injectReducer({ key: 'whatsapp', reducer: v2WhatsappReducer });
+const withZaloReducer = injectReducer({ key: 'zalo', reducer: v2ZaloReducer });
+const withInAppReducer = injectReducer({ key: 'inapp', reducer: v2InAppReducer });
+const withRcsReducer = injectReducer({ key: 'rcs', reducer: v2RcsReducer });
+const withNavigationReducer = injectReducer({ key: 'navigationBar', reducer: leftNavReducer });
+
+const withSaga = injectSaga({ key: 'templates', saga: v2TemplateSaga });
+const withCapSaga = injectSaga({ key: 'cap', saga: v2CapSagas });
+const withGallerySaga = injectSaga({ key: 'gallery', saga: v2GallerySagas });
+const withSmsCreateSaga = injectSaga({ key: 'create', saga: v2SmsCreateSagas });
+const withSmsEditSaga = injectSaga({ key: 'edit', saga: v2SmsEditSagas });
+const withEmailSaga = injectSaga({ key: 'email', saga: v2EmailSagas });
+const withBeeEditorSaga = injectSaga({ key: 'beeEditor', saga: v2BeeEditionSagas });
+const withCallTaskSagas = injectSaga({ key: 'callTask', saga: v2CallTaskSagas });
+const withMobilePushCreateSaga = injectSaga({ key: 'mobileCreate', saga: v2MobilePushCreateSagas });
+const withMobilePushEditSaga = injectSaga({ key: 'mobileEdit', saga: v2MobilePushEditSagas });
+const withWeChatMapTemplatesSagas = injectSaga({ key: 'weChatMapTemplate', saga: v2WechatMapTemplatesSagas });
+const withWeChatRichmediaCreateSaga = injectSaga({ key: 'weChatRichmediaCreate', saga: v2WechatRichmediaTemplatesCreateSagas });
+const withWeChatRichmediaEditSaga = injectSaga({ key: 'weChatRichmediaEdit', saga: v2WechatRichmediaTemplatesEditSagas });
+const withFacebookSagas = injectSaga({ key: 'facebook', saga: v2FacebookSagas });
+const withLineContainerSagas = injectSaga({ key: 'lineCreate', saga: v2LineContainerSagas });
+const withViberSagas = injectSaga({ key: 'viber', saga: v2ViberSagas });
+const withCapFacebookPreviewSagas = injectSaga({ key: 'facebookPreview', saga: v2CapFacebookPreviewSagas });
+const withSmsTraiCreateSagas = injectSaga({ key: 'smsTrai', saga: v2SmsTraiCreateSagas });
+const withWhatsappSagas = injectSaga({ key: 'whatsapp', saga: v2WhatsappSagas });
+const withZaloSagas = injectSaga({ key: 'zalo', saga: v2ZaloSagas });
+const withInAppSagas = injectSaga({ key: 'inapp', saga: v2InAppSagas });
+const withRcsSagas = injectSaga({ key: 'rcs', saga: v2RcsSagas });
+const withNavigationSaga = injectSaga({
+  key: 'navigation',
+  saga: function* navigationConfigSaga() {
+    yield all(navigationSagas.map(saga => saga.call()));
+  },
+});
+
+export default compose(
+  UserIsAuthenticated,
+  withSaga,
+  withCapSaga,
+  withGallerySaga,
+  withSmsCreateSaga,
+  withSmsEditSaga,
+  withEmailSaga,
+  withBeeEditorSaga,
+  withCallTaskSagas,
+  withMobilePushCreateSaga,
+  withMobilePushEditSaga,
+  withWeChatMapTemplatesSagas,
+  withWeChatRichmediaCreateSaga,
+  withWeChatRichmediaEditSaga,
+  withFacebookSagas,
+  withLineContainerSagas,
+  withViberSagas,
+  withCapFacebookPreviewSagas,
+  withSmsTraiCreateSagas,
+  withWhatsappSagas,
+  withZaloSagas,
+  withInAppSagas,
+  withRcsSagas,
+  withNavigationSaga,
+
+  withTemplatesReducer,
+  withCapReducer,
+  withCreativesContainerReducer,
+  withSmsCreateReducer,
+  withSmsEditReducer,
+  withEmailReducer,
+  withCallTaskReducer,
+  withMobilePushCreateReducer,
+  withMobilePushEditReducer,
+  withWeChatMapTemplatesReducer,
+  withWeChatRichmediaCreateReducer,
+  withWeChatRichmediaEditReducer,
+  withGalleryReducer,
+  withFacebookReducer,
+  withLineContainerReducer,
+  withViberReducer,
+  withCapFacebookPreviewReducer,
+  withSmsTraiCreateReducer,
+  withWhatsappReducer,
+  withZaloReducer,
+  withInAppReducer,
+  withRcsReducer,
+  withNavigationReducer,
+  withConnect,
+)(injectIntl(withStyles(TemplatesV2, styles)));

package/v2Containers/TemplatesV2/messages.js

@@ -78,4 +78,12 @@ export default defineMessages({
     id: `creatives.containersV2.TemplatesV2.facebookDisableinfo`,
     defaultMessage: 'Please integrate Facebook page ID & page name to enable this option.',
   },
+  zalo: {
+    id: `creatives.containersV2.TemplatesV2.zalo`,
+    defaultMessage: 'Zalo',
+  },
+  inapp: {
+    id: `creatives.containersV2.TemplatesV2.inapp`,
+    defaultMessage: 'In app message',
+  },
 });