@capillarytech/creatives-library 7.7.1 → 7.7.3

package/v2Containers/Facebook/index.js

@@ -4,7 +4,7 @@
  *
  */
 import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { injectIntl, FormattedMessage, intlShape } from "react-intl";
 import {
   CapHeading,
@@ -15,7 +15,10 @@ import {
   CapDrawer,
   CapCustomCard,
   CapIcon,
+  CapRadioGroup,
+  CapTooltip,
 } from '@capillarytech/cap-ui-library';
+import Templates from '../Templates';
 import { createStructuredSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -38,6 +41,8 @@ import {
   VALUE_REACH,
   VALUE_VIDEO_VIEWS,
   VALUE_LINK_CLICKS,
+  AD_MANAGER,
+  CREATIVE,
 } from './constants';
 
 const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
@@ -183,12 +188,25 @@ const Facebook = (props) => {
     onCreateComplete,
     params,
     facebookTemplateData,
+    messageStrategy,
+    router,
+    handlePeviewTemplate,
+    renderNewCardGrid,
+    onSelectTemplate,
+    createNew,
+    fbAdManager,
+    getFormSubscriptionData,
+    showDisabledFBInfo,
+    orgUnitId,
   } = props;
   const {
     selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
   } = templateData || {};
   const [isDrawerVisible, setDrawerVisibility] = useState(false);
   const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
+  const [adManager, setAdManager] = useState(AD_MANAGER);
+  const [showTemplateList, setTemplateList] = useState(false);
+
 
   useEffect(() => {
     if (!isFullMode) {
@@ -225,131 +243,188 @@ const Facebook = (props) => {
 
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
-  return (
-   !isFullMode ? (<div className={className}>
-     <div className="is-scrollable-section" >
-       <div className="account-details-wrapper">
-         <div className="account-name-section">
-           <CapHeading type="h4">
-             <FormattedMessage {...messages.fbAccount} />
-           </CapHeading>
-           <CapHeading type="h3">{accountName}</CapHeading>
-         </div>
+  const radioOptions = [{
+    label: showDisabledFBInfo ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisabledFBInfo,
+  }, {
+    label: intl.formatMessage(messages.fbAdManager), value: AD_MANAGER,
+  }];
 
-         <div className="account-section-container">
-           <CapHeading type="h3">
-             <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
-           </CapHeading>
-           <CapLabel type="label1">
-             <FormattedMessage
-               {...messages.fbAdCampaignSetDetailsDescription}
-              />
-           </CapLabel>
-         </div>
+  const onChangeAdManager = useCallback(({ target: { value } }) => {
+    setAdManager(value);
+  }, [setAdManager]);
 
-         <CapRow span={12} type="flex">
-           {campaignDataList.map(({ label, value, onChange }, index) => (
-             <StyledCampaignDetailCapColumn
-               span={index % 2 === 0 ? 6 : 14}
-               key={label}
-              >
-               <CapRow>
-                 <CapLabel type="label2">
-                   <FormattedMessage {...messages[label]} />
-                 </CapLabel>
-                 <CapHeading type="h4">
-                   {value}
-                   {!socialRemoteCampaignId && onChange && (
-                   <CapButton
-                     type="flat"
-                     className="marketingObjective-change-button facebook-marketing-objective-change"
-                     onClick={onChange}
-                      >
-                     <FormattedMessage {...messages.fbChange} />
-                   </CapButton>
-                    )}
-                 </CapHeading>
-               </CapRow>
-             </StyledCampaignDetailCapColumn>
-            ))}
-         </CapRow>
-         <CapDrawer
-           content={
-             <MarketingObjective
-               selectedMarketingObjective={selectedMarketingObjective}
-               onMarketingObjectiveSelect={onMarketingObjectiveSelect}
-               defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
-               onSubmit={setDrawerVisibility}
-               marketingObjectiveList={categorizedMarketingObjectiveList}
-              />
-            }
-           visible={isDrawerVisible}
-           width={380}
-           onClose={() => setDrawerVisibility(false)}
-          />
-       </div>
+  const onFacebookAdManagerContinue = useCallback(() => {
+    if (adManager === AD_MANAGER) {
+      onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId });
+    } else {
+      setTemplateList(true);
+    }
+  }, [
+    selectedMarketingObjective,
+    accountId,
+    adManager,
+    setAdManager,
+    setTemplateList,
+    showTemplateList,
+  ]);
+  const query = {type: 'embedded', module: 'library'};
+  const location = {pathname: `/FACEBOOK`, search: '', query};
+  return (showTemplateList ? (
+    <Templates
+      key={"FACEBOOK"}
+      location={location}
+      route={{name: "FACEBOOK"}}
+      router={router}
+      isFullMode={isFullMode}
+      createNew={createNew}
+      onSelectTemplate={onSelectTemplate}
+      renderNewCardGrid={renderNewCardGrid}
+      handlePeviewTemplate={handlePeviewTemplate}
+      fbAdManager={CREATIVE}
+    />
+  ) :
+    (!isFullMode && fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" ) ?
+      (<div className={className}>
+
+        <div className="is-scrollable-section" >
+          <div className="account-details-wrapper">
+            <div className="account-name-section">
+              <CapHeading type="h4">
+                <FormattedMessage {...messages.fbAccount} />
+              </CapHeading>
+              <CapHeading type="h3">{accountName}</CapHeading>
+            </div>
 
-       <div className="ad-section">
-         <div className="account-section-container">
-           <CapHeading type="h3">
-             <FormattedMessage {...messages.fbAdsTitle} />
-           </CapHeading>
-           <CapLabel type="label1">
-             <FormattedMessage {...messages.fbAdsDescription} />
-           </CapLabel>
-         </div>
+            <div className="account-section-container">
+              <CapHeading type="h3">
+                <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
+              </CapHeading>
+              <CapLabel type="label1">
+                <FormattedMessage
+                  {...messages.fbAdCampaignSetDetailsDescription}
+                />
+              </CapLabel>
+            </div>
 
-         <div>
-           <CapRow span={12} type="flex">
-             <CapColumn span={6}>
-               <CapCustomCard
-                 type="Facebook"
-                 FBDynamicComponent={() => (
-                   <CapIcon
-                     size="l"
-                     type="scenery"
-                     className="facebook-dynamic-content"
-                    />
-                  )}
+            <CapRow span={12} type="flex">
+              {campaignDataList.map(({ label, value, onChange }, index) => (
+                <StyledCampaignDetailCapColumn
+                  span={index % 2 === 0 ? 6 : 14}
+                  key={label}
+                >
+                  <CapRow>
+                    <CapLabel type="label2">
+                      <FormattedMessage {...messages[label]} />
+                    </CapLabel>
+                    <CapHeading type="h4">
+                      {value}
+                      {!socialRemoteCampaignId && onChange && (
+                      <CapButton
+                        type="flat"
+                        className="marketingObjective-change-button facebook-marketing-objective-change"
+                        onClick={onChange}
+                        >
+                        <FormattedMessage {...messages.fbChange} />
+                      </CapButton>
+                      )}
+                    </CapHeading>
+                  </CapRow>
+                </StyledCampaignDetailCapColumn>
+              ))}
+            </CapRow>
+            <CapDrawer
+              content={
+                <MarketingObjective
+                  selectedMarketingObjective={selectedMarketingObjective}
+                  onMarketingObjectiveSelect={onMarketingObjectiveSelect}
+                  defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
+                  onSubmit={setDrawerVisibility}
+                  marketingObjectiveList={categorizedMarketingObjectiveList}
                 />
-             </CapColumn>
-             <CapColumn span={16}>
-               <ul className="parameter-list">
-                 {adSetParameters.map((parameter, index) => (
-                   <li key={parameter} className="parameter-list-item">
-                     <CapLabel type="label2" className="parameter-index">
-                       {index + 1}
-                     </CapLabel>
-                     <CapHeading type="h5">
-                       <FormattedMessage {...messages[parameter]} />
-                     </CapHeading>
-                   </li>
-                  ))}
-               </ul>
-             </CapColumn>
-           </CapRow>
-         </div>
-       </div>
-     </div>
-     <CapButton
-       className="facebook-confirm-button"
-       type="primary"
-       onClick={() =>
-          onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
-        }
-      >
-       <FormattedMessage {...messages.fbConfirm} />
-     </CapButton>
-   </div>) : <div style={{height: '1200px'}}>
-     <Advertisement
-       isFullMode={isFullMode}
-       actions={facebookActions}
-       fbADData={fbADData}
-       onCreateComplete={onCreateComplete}
-       templateData={templateData}
-       params={params}
-       facebookTemplateData={facebookTemplateData}
-     /></div>
+              }
+              visible={isDrawerVisible}
+              width={380}
+              onClose={() => setDrawerVisibility(false)}
+            />
+          </div>
+
+          <div className="ad-section">
+            <CapHeading type="h4" style={{marginBottom: 17}}>
+              <FormattedMessage
+                {...messages.adManagerHeading}
+            />
+            </CapHeading>
+            <CapRadioGroup
+              style={{paddingBottom: '18px'}}
+              options={radioOptions}
+              onChange={onChangeAdManager}
+              value={adManager}
+              key={`fb-ad-creatives`}
+          />
+            {adManager === AD_MANAGER ? <>
+              <div className="account-section-container">
+                <CapLabel type="label1">
+                  <FormattedMessage {...messages.fbAdsDescription} />
+                </CapLabel>
+              </div>
+
+
+              <CapRow span={12} type="flex">
+                <CapColumn span={6}>
+                  <CapCustomCard
+                    type="Facebook"
+                    FBDynamicComponent={() => (
+                      <CapIcon
+                        size="l"
+                        type="scenery"
+                        className="facebook-dynamic-content"
+                      />
+                    )}
+                  />
+                </CapColumn>
+                <CapColumn span={16}>
+                  <ul className="parameter-list">
+                    {adSetParameters.map((parameter, index) => (
+                      <li key={parameter} className="parameter-list-item">
+                        <CapLabel type="label2" className="parameter-index">
+                          {index + 1}
+                        </CapLabel>
+                        <CapHeading type="h5">
+                          <FormattedMessage {...messages[parameter]} />
+                        </CapHeading>
+                      </li>
+                    ))}
+                  </ul>
+                </CapColumn>
+              </CapRow></> : <CapLabel type="label1"><FormattedMessage {...messages.capAdManagerHeading}/></CapLabel>}
+
+          </div>
+        </div>
+        <CapButton
+          className="facebook-confirm-button"
+          type="primary"
+          onClick={onFacebookAdManagerContinue}
+        >
+          <FormattedMessage {...messages.fbContinue} />
+        </CapButton>
+      </div>
+      ) :
+      <div style={{height: '1200px'}}>
+        <Advertisement
+          isFullMode={isFullMode}
+          actions={facebookActions}
+          fbADData={fbADData}
+          onCreateComplete={onCreateComplete}
+          templateData={templateData}
+          params={params}
+          facebookTemplateData={facebookTemplateData}
+          messageStrategy={messageStrategy}
+          getFormSubscriptionData={getFormSubscriptionData}
+          selectedMarketingObjective={selectedMarketingObjective}
+          fbAdManager={fbAdManager}
+          orgUnitId={orgUnitId}
+        />
+      </div>
   );
 };
 
@@ -367,11 +442,12 @@ Facebook.propTypes = {
   fbADData: PropTypes.object,
   onCreateComplete: PropTypes.func,
   facebookTemplateData: PropTypes.object,
+  messageStrategy: PropTypes.string,
+  getFormSubscriptionData: PropTypes.func,
 };
 
 Facebook.defaultProps = {
   marketingObjectiveList: [""],
-
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Facebook/messages.js

@@ -42,7 +42,7 @@ export default defineMessages({
   },
   fbAdsDescription: {
     id: `${messagePrefix}.fbAdsDescription`,
-    defaultMessage: 'You may create ads in Facebook Ad Manager under the below mentioned ad set. The performance of these ads will be reported here in Engage+.',
+    defaultMessage: 'Proceed with empty content block & you can create ads in Facebook Ad Manager under the  mentioned ad set.',
   },
   fbAdsDetailOne: {
     id: `${messagePrefix}.fbAdsDetailOne`,
@@ -56,9 +56,9 @@ export default defineMessages({
     id: `${messagePrefix}.fbAdsDetailThree`,
     defaultMessage: 'You can create ads later in Facebook ad manager.',
   },
-  fbConfirm: {
-    id: `${messagePrefix}.fbConfirm`,
-    defaultMessage: 'Confirm',
+  fbContinue: {
+    id: `${messagePrefix}.fbContinue`,
+    defaultMessage: 'Continue',
   },
   fbChange: {
     id: `${messagePrefix}.fbChange`,
@@ -164,4 +164,24 @@ export default defineMessages({
     id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficDescription`,
     defaultMessage: 'Drive visits to your physical stores by showing ads to people who are nearby.',
   },
+  capFbAdManager: {
+    id: `${messagePrefix}.capFbAdManager`,
+    defaultMessage: 'Capillary Facebook ad manager',
+  },
+  fbAdManager: {
+    id: `${messagePrefix}.fbAdManager`,
+    defaultMessage: 'Facebook ad manager',
+  },
+  adManagerHeading: {
+    id: `${messagePrefix}.adManagerHeading`,
+    defaultMessage: "Where do you want to create your Facebook ad creative?",
+  },
+  capAdManagerHeading: {
+    id: `${messagePrefix}.capAdManagerHeading`,
+    defaultMessage: "You can create Facebook ads creative in Engage+ Facebook ad Manager.",
+  },
+  facebookDisableinfo: {
+    id: `${messagePrefix}.facebookDisableinfo`,
+    defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
+  },
 });

package/v2Containers/Templates/index.js

@@ -62,6 +62,8 @@ import {
 } from '../App/constants';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/constants';
 
+import {CREATIVE} from '../Facebook/constants';
+
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -321,7 +323,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       const fbSetting = get(nextProps.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { accountName = "",
-         orgUnitFacebookPageSettingsMap = {},
+          orgUnitFacebookPageSettingsMap = {},
         } = fbSetting[0] || {};
       let pageAccessToken = false;
       if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
@@ -508,7 +510,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
-      
+
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -1136,12 +1138,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channel = this.state.channel.toLowerCase();
     //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
     let routeParams = {};
+    const {fbAdManager} = this.props;
     const isLibraryMode = this.isEnabledInLibraryModule("callCreateFromProps");
-    if(!isLibraryMode) {
+    if (!isLibraryMode) {
       timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
     }
     if (isLibraryMode) {
-      this.props.createNew();
+      if (this.props.fbAdManager === CREATIVE) {
+        this.props.createNew(fbAdManager);
+      } else {
+        this.props.createNew();
+      }
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
@@ -1411,7 +1418,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      this.props.onSelectTemplate(id);
+      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
     } else {
       timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
       if (this.state.channel.toLowerCase() === 'ebill') {
@@ -1424,6 +1431,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   }
 
+  selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
+
+
   handlePreviewClick(template, modeType) {
     this.togglePreview();
     const templateInfo = cloneDeep(template);
@@ -1801,9 +1811,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isLineChannel = channel === LINE;
+    const isFacebookChannel = channel === FACEBOOK;
 
 
-    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts) && !isFacebookChannel ) {
       forEach(weCrmAccounts, (account) => {
         if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
@@ -1943,28 +1954,33 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
-    let showForFacebook = true;
+    let showFbAds = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
-      if (isEmpty(this.props.Templates.campaignSettings)) {
-        showForFacebook = false;
-      }
-      const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
-      const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
-      let pageAccessToken = false;
-      if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
-        Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
-          if (obj.pageAccessToken) {
-            pageAccessToken = true;
+      const campaignSettings = this.props.Templates.campaignSettings;
+      if (campaignSettings && isEmpty(campaignSettings?.accountSettings)) {
+        showFbAds = true;
+      } else if (!isEmpty(campaignSettings?.accountSettings)) {
+        const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
+        const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
+        let pageAccessToken = false;
+        if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
+          Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
+            if (obj.pageAccessToken) {
+              pageAccessToken = true;
+            }
+          });
+          if (!pageAccessToken) {
+            showFbAds = true;
           }
-        });
-        if (!pageAccessToken) {
-          showForFacebook = false;
+        } else {
+          showFbAds = true;
         }
       }
     }
+
     const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
       (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
-      (channel.toLowerCase() === FACEBOOK_CHANNEL && showForFacebook)
+      (channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)
     );
 
 

package/v2Containers/Templates/messages.js

@@ -372,6 +372,6 @@ export default defineMessages({
   },
   "noAccountsPresentFacebook": {
     id: `${scope}.noAccountsPresentFacebook`,
-    defaultMessage: "Facebook accounts or Facebook Page are not setup for your brand",
+    defaultMessage: "Please setup the Facebook account & Facebook page to start creating content in Capillary's FB content creator.",
   },
 });

package/v2Containers/Templates/reducer.js

@@ -9,7 +9,7 @@ import * as types from './constants';
 
 const initialState = fromJS({
   getAllTemplatesInProgress: false,
-  fetchingOrgLevelCampaignSettings: true,
+  fetchingOrgLevelCampaignSettings: false,
   templates: [],
   deleteResponse: {},
   deleteTemplateInProgress: false,

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
@@ -45,6 +45,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       channelsToDisable = [],
       isFullMode,
       onChannelChange,
+      showDisabledFBInfo,
     } = props;
 
     const defaultPanes = {
@@ -80,6 +81,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (channelsToDisable.includes(pane.key)) {
         // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
+        if (pane.key === 'facebook' && showDisabledFBInfo) {
+          pane.tab = (<CapTooltip
+            title={
+            intl.formatMessage(messages.facebookDisableinfo)
+          }
+        >
+            {intl.formatMessage(messages.facebook)}
+          </CapTooltip>);
+        }
       }
       return pane;
     });
@@ -148,13 +158,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, isFullMode } = this.props;
+    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
     return (
       <Facebook
         {...this.props}
         messageDetails={messageDetails}
         cap={cap}
         onFacebookSubmit={onFacebookSubmit}
+        messageStrategy={messageStrategy}
+        showDisabledFBInfo={showDisabledFBInfo}
+        orgUnitId={orgUnitId}
       />
     );
   }
@@ -178,19 +191,21 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
-    if (!this.props.isFullMode) {
+    const {isFullMode, messageStrategy} = this.props;
+    if (!isFullMode) {
       query = {type: 'embedded', module: 'library'};
       switch (channel) {
         case 'line':
           return this.getLineComponent();
         case 'ftp':
           return this.getFTPComponent();
-        case 'facebook':
-          return this.getFacebookComponent();
         default:
           break;
       }
     }
+    if (messageStrategy !== "X_ENGAGE" && channel === 'facebook' && !isFullMode) {
+      return this.getFacebookComponent();
+    }
     const location = {pathname: `/${channel}`, search: '', query};
     switch (channel) {
       case 'call_task':
@@ -205,9 +220,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           router={this.props.router}
           isFullMode={this.props.isFullMode}
           createNew={this.props.createNew}
-          onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
+          onSelectTemplate={this.props.onSelectTemplate}
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
+          messageStrategy={this.props.messageStrategy}
     />);
     }
   }
@@ -287,6 +303,7 @@ TemplatesV2.propTypes = {
   cap: PropTypes.object,
   authData: PropTypes.object,
   FTPMode: PropTypes.string,
+  messageStrategy: PropTypes.string,
 };
 
 TemplatesV2.defaultProps = {