@capillarytech/creatives-library 7.6.13 → 7.7.1

package/index.js

@@ -76,8 +76,8 @@ import viberSaga from './v2Containers/Viber/sagas';
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import FacebookPreview from './v2Containers/CapFacebookPreview';
-import facebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
-import facebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
+import FacebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
+import FacebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
@@ -105,7 +105,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const ViberContainer = {Viber, viberReducer, viberSaga};
-const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, facebookPreviewSaga };
+const FacebookPreviewContainer = { FacebookPreview, FacebookPreviewReducer, FacebookPreviewSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.6.13",
+  "version": "7.7.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -19,6 +19,8 @@
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",
+    "flow": "^0.2.3",
+    "git": "^0.1.5",
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
     "normalizr": "^3.2.3",

package/v2Components/TemplatePreview/index.js

@@ -651,7 +651,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     pageId: content.pageId}}
                   accountId={content.accountId}
                   accessToken={content.accessToken}
-                  defaultGeneratePreview
               />
               </div>
         )}

package/v2Containers/CapFacebookPreview/index.js

@@ -45,7 +45,6 @@ export const CapFacebookPreview = (props) => {
     orgUnitFacebookPageSettingsMap = {},
     accessToken,
     accountId,
-    defaultGeneratePreview,
   } = props;
   const {
     formatMessage,
@@ -295,10 +294,11 @@ export const CapFacebookPreview = (props) => {
       <iframe
         src={src}
         key={random}
+        scrolling="yes"
         style={{border: "none"}}
         width={width}
-        scrolling="yes"
         height={height}
+        loading="lazy"
       />
       </>);
   };
@@ -317,9 +317,6 @@ export const CapFacebookPreview = (props) => {
 
   useEffect(() => {
     facebookPreviewActions.clearPreview();
-    if (defaultGeneratePreview) {
-      generatePreview();
-    }
   }, []);
 
   useEffect(() => {
@@ -338,6 +335,7 @@ export const CapFacebookPreview = (props) => {
       setDisableAfterPreviewGenerate(false);
     }
   }, [previewIframeError]);
+
   return (
     <CapSpin spinning={isFetchingPreview}>
       <div style={{display: 'inline-block'}}>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -137,10 +137,6 @@ function SlideBoxContent(props) {
       handleClose,
       onFTPSubmit,
       campaignSettings,
-      messageStrategy,
-      fbAdManager,
-      showDisabledFBInfo,
-      orgUnitId,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -338,9 +334,6 @@ function SlideBoxContent(props) {
         slidBoxContent={slidBoxContent}
         FTPMode="create"
         selectedOfferDetails={selectedOfferDetails}
-        messageStrategy={messageStrategy}
-        showDisabledFBInfo={showDisabledFBInfo}
-        orgUnitId={orgUnitId}
         />
       )}
       {isPreview && (
@@ -565,10 +558,7 @@ function SlideBoxContent(props) {
             isFullMode={isFullMode}
             createNew
             getFormSubscriptionData={getFormData}
-            messageStrategy={messageStrategy}
-            fbAdManager={fbAdManager}
-            onSelectTemplate={onSelectTemplate}
-            orgUnitId={orgUnitId}
+
           />
         )
       }
@@ -585,7 +575,6 @@ function SlideBoxContent(props) {
               id: templateData._id,
             }}
             getFormSubscriptionData={getFormData}
-            fbAdManager={fbAdManager}
           />
         )
       }
@@ -698,9 +687,5 @@ SlideBoxContent.propTypes = {
   saveMessage: PropTypes.func,
   selectedAccount: PropTypes.object,
   onFTPSubmit: PropTypes.func,
-  messageStrategy: PropTypes.string,
-  fbAdManager: PropTypes.string,
-  showDisabledFBInfo: PropTypes.boolean,
-  orgUnitId: PropTypes.any,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -25,9 +25,6 @@ import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { makeSelectFetchingCmsData } from '../Email/selectors';
-import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
-import { CREATIVE } from '../Facebook/constants';
-
 
 const classPrefix = 'add-creatives-section';
 
@@ -54,6 +51,7 @@ class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
+
     };
     this.creativesTemplateSteps = {
       1: 'modeSelection',
@@ -76,12 +74,8 @@ class Creatives extends React.Component {
     this.setState({templateNameExists: false});
   }
 
-  onSelectTemplate = (template, fbAdManager) => {
-    const data = {slidBoxContent: 'editTemplate', templateData: template};
-    if (fbAdManager) {
-      data.fbAdManager = fbAdManager;
-    }
-    this.setState(data);
+  onSelectTemplate = (template) => {
+    this.setState({ slidBoxContent: 'editTemplate', templateData: template });
   };
   onPreviewTemplate = (template) => {
     const templateData = template;
@@ -93,12 +87,8 @@ class Creatives extends React.Component {
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
   };
-  onCreateNew = (fbAdManager) => {
-    const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
-    if (fbAdManager) {
-      data.fbAdManager = fbAdManager;
-    }
-    this.setState(data);
+  onCreateNew = () => {
+    this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
   };
 
   onShowTemplates = () => {
@@ -230,61 +220,11 @@ class Creatives extends React.Component {
           break;
         }
         case constants.FACEBOOK: {
-          if (templateData.fbContentType === CREATIVE) {
-            const {
-              creativeType = "",
-              selectedFacebookAccount = {},
-              facebookCreativeList: fbCreativeList = [],
-            } = templateData || {};
-            const fBContent = fbCreativeList;
-            const facebookCreativeList = [];
-            fBContent.forEach((obj) => {
-              const data = cloneDeep(obj);
-              const {subType, linkDescription, imageLink, websiteLink, videoId, videoName, videoUrl} = obj || {};
-              delete data.linkDescription;
-              delete data.websiteLink;
-              data.linkDesc = linkDescription;
-              data.webSiteLink = websiteLink;
-              data.type = creativeType;
-              switch (subType) {
-                case IMAGE:
-                  data.imgSrc = imageLink;
-                  delete data.imageLink;
-                  break;
-                case VIDEO:
-                  data.video = {
-                    previewImageUrl: imageLink,
-                    videoId,
-                    videoSrc: videoUrl,
-                    videoName,
-                  };
-                  delete data.imageLink;
-                  break;
-                default:
-                  break;
-              }
-              facebookCreativeList.push(data);
-            });
-            creativesTemplateData = {
-              versions: {
-                base: {
-                  content: {
-                    FacebookAd: {...facebookCreativeList},
-                    pageOrgUnitId: this.props.orgUnitId,
-                  },
-                },
-              },
-              type: constants.FACEBOOK,
-              edit: true,
-              selectedFacebookAccount,
-            };
-          } else {
-            creativesTemplateData = {
-              selectedMarketingObjective: templateData.selectedMarketingObjective,
-              edit: true,
-              type: channel,
-            };
-          }
+          creativesTemplateData = {
+            selectedMarketingObjective: templateData.selectedMarketingObjective,
+            edit: true,
+            type: channel,
+          };
           break;
         }
         case constants.LINE: {
@@ -436,50 +376,6 @@ class Creatives extends React.Component {
           };
         }
         break;
-      case constants.FACEBOOK: {
-        if (template.value) {
-          const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
-          const type = FacebookAd[0].type;
-          const {accountId} = this.props.Templates.selectedFacebookAccount || template.value || {};
-          const facebookCreativeList = [];
-          const fBContent = Object.values(FacebookAd);
-          fBContent.forEach((obj) => {
-            const data = cloneDeep(obj);
-            const {subType, linkDesc, imgSrc, webSiteLink, video} = obj;
-            delete data.type;
-            delete data.linkDesc;
-            delete data.webSiteLink;
-            data.linkDescription = linkDesc;
-            data.websiteLink = webSiteLink;
-
-            switch (subType) {
-              case IMAGE:
-                data.imageLink = imgSrc;
-                delete data.imgSrc;
-                break;
-              case VIDEO:
-                data.imageLink = video.previewImageUrl;
-                data.videoId = video.videoId;
-                data.videoUrl = video.videoSrc;
-                data.videoName = video.videoName;
-                delete data.video;
-                break;
-              default:
-                break;
-            }
-            facebookCreativeList.push(data);
-          });
-          templateData = {
-            fbContentType: CREATIVE,
-            creativeType: type,
-            facebookCreativeList,
-            channel: constants.FACEBOOK,
-            accountId,
-            selectedMarketingObjective: template.value.selectedMarketingObjective,
-          };
-        }
-      }
-        break;
       default:
         break;
     }
@@ -682,8 +578,8 @@ class Creatives extends React.Component {
     return false;
   }
   shouldShowHeader = () => {
-    const {currentChannel, slidBoxContent} = this.state;
-    if (currentChannel.toUpperCase() === constants.FACEBOOK && slidBoxContent === 'createTemplate') {
+    const {currentChannel} = this.state;
+    if (currentChannel === constants.FACEBOOK) {
       return false;
     }
     return true;
@@ -726,7 +622,6 @@ class Creatives extends React.Component {
               campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
-              showDisabledFBInfo={this.props.showDisabledFBInfo}
               getFormData={this.getFormData}
               onCallTaskSubmit={this.onCallTaskSubmit}
               onCreateNew={this.onCreateNew}
@@ -742,7 +637,6 @@ class Creatives extends React.Component {
               onEnterTemplateName={this.onEnterTemplateName}
               onRemoveTemplateName={this.onRemoveTemplateName}
               onResetStep={this.resetStep}
-              fbAdManager={this.state.fbAdManager}
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
@@ -767,8 +661,6 @@ class Creatives extends React.Component {
               handleClose={this.handleCloseSlideBox}
               onFTPSubmit={getCreativesData}
               editor={editor}
-              messageStrategy={this.props.strategy}
-              orgUnitId={this.props.orgUnitId}
           />
           }
           footer={this.shouldShowFooter() &&
@@ -821,8 +713,6 @@ Creatives.propTypes = {
   selectedWeChatAccount: PropTypes.object,
   Templates: PropTypes.object,
   selectedAccount: PropTypes.object,
-  strategy: PropTypes.string,
-  orgUnitId: PropTypes.number,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),

package/v2Containers/Facebook/Advertisement/index.js

@@ -84,12 +84,10 @@ export const Advertisement = (props) => {
     actions,
     fbADData = {},
     onCreateComplete,
-    templateData = {},
+    templateData,
     params,
     getFormSubscriptionData,
     facebookTemplateData,
-    selectedMarketingObjective,
-    orgUnitId,
   } = props;
   const {
     formatMessage,
@@ -132,7 +130,7 @@ export const Advertisement = (props) => {
         orgUnitFacebookPageSettingsMap = {},
         employeeAccessToken: accessToken = "",
         accountId = "",
-       } = selectedFacebookAccount || {};
+       } = selectedFacebookAccount;
       const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
       videoData = {
         accessToken,
@@ -162,7 +160,7 @@ export const Advertisement = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-    if (params?.id || templateData?.edit) {
+    if ((params && params.id) || (templateData || {}).edit) {
       const { FacebookAd = [], pageOrgUnitId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(fbADData, 'templateDetails.name');
       const editFBContent = Object.values(FacebookAd);
@@ -221,7 +219,6 @@ export const Advertisement = (props) => {
     }
   }, [fbADData[`templateDetails`] || templateData]);
 
-
   const CustomToolTip = useCallback((msg) => <CapTooltipWithInfo
     infoIconProps={{svgProps: {width: 12, height: 12}, style: {marginLeft: 5}}}
     title={msg}
@@ -354,7 +351,8 @@ export const Advertisement = (props) => {
       }
       messageData.push(data);
     });
-    let finalResponse = {
+
+    return {
       versions: {
         base: {
           content: {
@@ -366,17 +364,12 @@ export const Advertisement = (props) => {
       type: "FACEBOOK",
       name: messageTitle,
     };
-    if (!isFullMode) {
-      finalResponse = {...finalResponse, selectedMarketingObjective, accountId};
-    }
-    return finalResponse;
   }, [carouselData,
     pageId,
     messageTitle,
     primaryText,
     callToAction,
-    displayLink,
-    selectedMarketingObjective]);
+    displayLink]);
 
   const onCreateFacebookAd = useCallback( () => {
     actions.createTemplate(
@@ -452,7 +445,6 @@ export const Advertisement = (props) => {
     updateMessageTitle(val);
   }, [messageTitle]);
 
-
   const isDisableDone = useCallback((isPreview) => {
     let flag = false;
     if (primaryText === "" ) {
@@ -502,7 +494,8 @@ export const Advertisement = (props) => {
     selectedAd,
   ]
 );
-  const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
+
+  const isDisableContinue = () => messageTitle.trim() === "" || selectedAd === "";
 
   const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
 
@@ -811,8 +804,8 @@ export const Advertisement = (props) => {
     setPageId(value);
   }, [pageId]);
 
-  const selectedFacebookAccount = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.selectedFacebookAccount;
-  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount || {};
+  const selectedFacebookAccount = get(facebookTemplateData, 'selectedFacebookAccount', {});
+  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
 
   const getPageAccessOrgs = useCallback(() => {
     const {status, data } = fbADData.orgOuData || {};
@@ -822,20 +815,7 @@ export const Advertisement = (props) => {
     const orgName = (
       proxyOrgList.find(({ orgID }) => orgID === Number(orgId)) || {}
     ).orgName;
-    if (!status) {
-      // !status is the case of library
-      //if org id is the parent org
-      if (orgUnitFacebookPageSettingsMap[-1] && !pageId) {
-        setPageId(-1);
-      }
-      if (orgUnitFacebookPageSettingsMap[-1]) {
-        pageAccessOrgsOptions.push({label: orgName, value: -1});
-      }
-      // if we are coming from default startegy and calling templates from facebook/index.js
-      if (!pageId && orgUnitId && orgUnitFacebookPageSettingsMap[orgUnitId]) {
-        setPageId(orgUnitId);
-      }
-    } else if (status === 'SUCCESS') {
+    if (status === 'SUCCESS') {
       Object.keys(data).forEach((obj) => {
         if ((orgUnitFacebookPageSettingsMap[data[obj]] || {}).pageAccessToken) {
           pageAccessOrgsOptions.push({label: obj, value: data[obj]});
@@ -856,7 +836,7 @@ export const Advertisement = (props) => {
   const options = getPageAccessOrgs() || [];
   const { data = {} } = fbADData.orgOuData || {};
   const selectedPageName = Object.keys(data).find((key) => data[key] === pageId);
-  return ( (step === 'modeSelection' && (isEmpty(templateData) || templateData?.mode === "create")) ?
+  return ( (step === 'modeSelection') ?
        ( <CapSpin spinning={adSpinLoader} className="add-facebook-ad-section">
          <div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
            <CapHeader
@@ -865,27 +845,25 @@ export const Advertisement = (props) => {
              className={"cap-header-facebook-ad"}
             />
          </div>
-         {isFullMode && <>
-           <CapInput
-             id={`fbAd_input`}
-             onChange={onTextTitleChange}
-             className="text-template-title"
-             defaultValue={messageTitle || ''}
-             value={messageTitle || ''}
-             style={{marginBottom: 27, width: '762px'}}
-             size="default"
-             label={formatMessage(messages.creativeName)}
-              />
-           <CapSelect
-             label={formatMessage(messages.facebookPage)}
-             key={"select-facebook-page"}
-             onChange={onChangeFacebookPage}
-             options={options}
-             defaultValue={(options[0] || {} ).value}
-             value={pageId || (options[0] || {} ).value}
-             style={{marginBottom: 27, width: '372px'}}
-          ></CapSelect>
-        </>}
+         <CapInput
+           id={`fbAd_input`}
+           onChange={onTextTitleChange}
+           className="text-template-title"
+           defaultValue={messageTitle || ''}
+           value={messageTitle || ''}
+           style={{marginBottom: 27, width: '762px'}}
+           size="default"
+           label={formatMessage(messages.creativeName)}
+            />
+         {isFullMode && <CapSelect
+           label={formatMessage(messages.facebookPage)}
+           key={"select-facebook-page"}
+           onChange={onChangeFacebookPage}
+           options={options}
+           defaultValue={(options[0] || {} ).value}
+           value={pageId || (options[0] || {} ).value}
+           style={{marginBottom: 27, width: '372px'}}
+        ></CapSelect>}
          <CapHeading
            type="h4"
            style={{marginBottom: 11}}
@@ -909,15 +887,8 @@ export const Advertisement = (props) => {
          </FbAdFooter>
        </CapSpin> ) : (
          <CapSpin spinning={spinLoader}>
-           {!isFullMode && isEmpty(templateData) && <div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
-             <CapHeader
-               inline
-               title={formatMessage(messages.newFacebookCreatives)}
-               className={"cap-header-facebook-ad"}
-            />
-           </div>}
            <CapRow className="add-facebook-ad-section" >
-             {isFullMode && <div className="cap-header-facebook-ad">
+             <div className="cap-header-facebook-ad">
                <CapHeading
                  type="h2"
                  className="truncate-text"
@@ -935,7 +906,7 @@ export const Advertisement = (props) => {
                  title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
                  onClick={onClickEditName}
                   />}
-             </div>}
+             </div>
              <CapColumn span={12}>
                {isFullMode && <><CapHeading
                  type="h4"
@@ -1010,8 +981,8 @@ Advertisement.propTypes = {
   facebookTemplateData: PropTypes.object,
   templateData: PropTypes.object,
   params: PropTypes.object,
-  selectedMarketingObjective: PropTypes.any,
 
 };
 
 export default injectIntl(Advertisement);
+

package/v2Containers/Facebook/Advertisement/index.scss

@@ -30,7 +30,7 @@ $classPrefix: add-facebook-ad-section;
 
     .cap-header-facebook-ad{
         position: fixed;
-        top: 58px;
+        top: 27px;
         z-index: 1000;
         .title-desc-container{
             padding-left: 10px;

package/v2Containers/Facebook/Facebook.style.js

@@ -50,7 +50,7 @@ export default css`
 
     .parameter-list-item {
       list-style: none;
-      margin-bottom: 60px;
+      margin-bottom: ${CAP_SPACE_28};
   
       .parameter-index {
         float: left;

package/v2Containers/Facebook/constants.js

@@ -47,7 +47,3 @@ export const VALUE_REACH = 'VALUE_REACH';
 export const VALUE_VIDEO_VIEWS = 'VALUE_VIDEO_VIEWS';
 export const VALUE_LINK_CLICKS = 'VALUE_LINK_CLICKS';
 export const VALUE_POST_ENGAGEMENT = 'VALUE_POST_ENGAGEMENT';
-
-
-export const AD_MANAGER = "AD_MANAGER";
-export const CREATIVE = "CREATIVE";

package/v2Containers/Facebook/index.js

@@ -4,7 +4,7 @@
  *
  */
 import PropTypes from "prop-types";
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { injectIntl, FormattedMessage, intlShape } from "react-intl";
 import {
   CapHeading,
@@ -15,10 +15,7 @@ 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';
@@ -41,8 +38,6 @@ import {
   VALUE_REACH,
   VALUE_VIDEO_VIEWS,
   VALUE_LINK_CLICKS,
-  AD_MANAGER,
-  CREATIVE,
 } from './constants';
 
 const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
@@ -188,25 +183,12 @@ 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) {
@@ -243,188 +225,131 @@ const Facebook = (props) => {
 
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
-  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,
-  }];
-
-  const onChangeAdManager = useCallback(({ target: { value } }) => {
-    setAdManager(value);
-  }, [setAdManager]);
-
-  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="account-section-container">
-              <CapHeading type="h3">
-                <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
-              </CapHeading>
-              <CapLabel type="label1">
-                <FormattedMessage
-                  {...messages.fbAdCampaignSetDetailsDescription}
-                />
-              </CapLabel>
-            </div>
+  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>
 
-            <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>
+         <div className="account-section-container">
+           <CapHeading type="h3">
+             <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
+           </CapHeading>
+           <CapLabel type="label1">
+             <FormattedMessage
+               {...messages.fbAdCampaignSetDetailsDescription}
+              />
+           </CapLabel>
+         </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`}
+         <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)}
           />
-            {adManager === AD_MANAGER ? <>
-              <div className="account-section-container">
-                <CapLabel type="label1">
-                  <FormattedMessage {...messages.fbAdsDescription} />
-                </CapLabel>
-              </div>
+       </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>
 
-              <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>
+         <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>
+         </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>
   );
 };
 
@@ -442,12 +367,11 @@ 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: 'Proceed with empty content block & you can create ads in Facebook Ad Manager under the  mentioned ad set.',
+    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+.',
   },
   fbAdsDetailOne: {
     id: `${messagePrefix}.fbAdsDetailOne`,
@@ -56,9 +56,9 @@ export default defineMessages({
     id: `${messagePrefix}.fbAdsDetailThree`,
     defaultMessage: 'You can create ads later in Facebook ad manager.',
   },
-  fbContinue: {
-    id: `${messagePrefix}.fbContinue`,
-    defaultMessage: 'Continue',
+  fbConfirm: {
+    id: `${messagePrefix}.fbConfirm`,
+    defaultMessage: 'Confirm',
   },
   fbChange: {
     id: `${messagePrefix}.fbChange`,
@@ -164,24 +164,4 @@ 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,8 +62,6 @@ 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';
@@ -323,7 +321,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)) {
@@ -510,7 +508,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
-
+      
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -1138,17 +1136,12 @@ 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) {
-      if (this.props.fbAdManager === CREATIVE) {
-        this.props.createNew(fbAdManager);
-      } else {
-        this.props.createNew();
-      }
+      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()}`,
@@ -1418,7 +1411,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
+      this.props.onSelectTemplate(id);
     } else {
       timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
       if (this.state.channel.toLowerCase() === 'ebill') {
@@ -1431,9 +1424,6 @@ 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);
@@ -1811,10 +1801,9 @@ 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) && !isFacebookChannel ) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
       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'))) {
@@ -1954,33 +1943,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
-    let showFbAds = false;
+    let showForFacebook = true;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
-      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 (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;
           }
-        } else {
-          showFbAds = true;
+        });
+        if (!pageAccessToken) {
+          showForFacebook = false;
         }
       }
     }
-
     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 && showFbAds)
+      (channel.toLowerCase() === FACEBOOK_CHANNEL && showForFacebook)
     );
 
 

package/v2Containers/Templates/reducer.js

@@ -9,7 +9,7 @@ import * as types from './constants';
 
 const initialState = fromJS({
   getAllTemplatesInProgress: false,
-  fetchingOrgLevelCampaignSettings: false,
+  fetchingOrgLevelCampaignSettings: true,
   templates: [],
   deleteResponse: {},
   deleteTemplateInProgress: false,
@@ -67,7 +67,9 @@ function templatesReducer(state = initialState, action) {
     case types.GET_WECRM_ACCOUNTS_REQUEST:
       return state
         .set('fetchingWeCrmAccounts', true)
-        .set('weCrmAccountFetchingError', false);
+        .set('weCrmAccountFetchingError', false)
+        .remove('selectedWeChatAccount')
+        .remove('weCrmAccounts');
     case types.GET_WECRM_ACCOUNTS_SUCCESS:
       return state
         .set('fetchingWeCrmAccounts', 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, CapTooltip } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
@@ -45,7 +45,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       channelsToDisable = [],
       isFullMode,
       onChannelChange,
-      showDisabledFBInfo,
     } = props;
 
     const defaultPanes = {
@@ -81,15 +80,6 @@ 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;
     });
@@ -158,16 +148,13 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
+    const { messageDetails, cap, onFacebookSubmit, isFullMode } = this.props;
     return (
       <Facebook
         {...this.props}
         messageDetails={messageDetails}
         cap={cap}
         onFacebookSubmit={onFacebookSubmit}
-        messageStrategy={messageStrategy}
-        showDisabledFBInfo={showDisabledFBInfo}
-        orgUnitId={orgUnitId}
       />
     );
   }
@@ -191,21 +178,19 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
-    const {isFullMode, messageStrategy} = this.props;
-    if (!isFullMode) {
+    if (!this.props.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':
@@ -220,10 +205,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           router={this.props.router}
           isFullMode={this.props.isFullMode}
           createNew={this.props.createNew}
-          onSelectTemplate={this.props.onSelectTemplate}
+          onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
-          messageStrategy={this.props.messageStrategy}
     />);
     }
   }
@@ -303,7 +287,6 @@ TemplatesV2.propTypes = {
   cap: PropTypes.object,
   authData: PropTypes.object,
   FTPMode: PropTypes.string,
-  messageStrategy: PropTypes.string,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/messages.js

@@ -66,8 +66,4 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.line',
     defaultMessage: 'Line',
   },
-  facebookDisableinfo: {
-    id: `creatives.containersV2.TemplatesV2.facebookDisableinfo`,
-    defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
-  },
 });