@capillarytech/creatives-library 7.6.1 → 7.6.2

package/v2Components/FormBuilder/index.js

@@ -2067,12 +2067,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // }
       return;
     }
-    console.log('Call Event ', event, data, this.props.parent);
+    
     // val.injectedEvents[event].call(this.props.parent, data);
     val.injectedEvents[event].call(this.props.parent, data, val.id);
   }
   openFileDialog = (e, parentID) => {
-    console.log("filedialog: ");
+    
     document.querySelector(`#${parentID} #fileName`).click();
   };
   handleOk = (ev) => {
@@ -3185,7 +3185,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               if (val.id.indexOf('template-content') > -1 && val.id !== 'template-content') {
                 langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
               }
-              console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
+              
               const currentLang = ((!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage) || 'en';
               const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] || '');
               columns.push(

package/v2Components/PreviewSideBar/index.js

@@ -47,10 +47,10 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
     this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
   render() {
-    console.log('preview sidebar', this.props);
+    
     let content = '';
     if ((this.props.channel || '').toLowerCase() === 'wechat') {
-      console.log('Template Infog ', this.props.templateData);
+      
       content = this.props.templateData.content;
     } else if ((this.props.channel || '').toLowerCase() === "mobilepush" && !_.isEmpty(this.props.templateData)) {
       const data = this.state.device === "android" ? this.props.templateData.versions.base.ANDROID : this.props.templateData.versions.base.IOS;
@@ -88,7 +88,7 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
     if ((this.props.channel || '').toLowerCase() === 'wechat') {
       path = this.props.templateData && this.props.templateData.definition && this.props.templateData.definition.msgcontent === "RICH_MEDIA_WECHAT" ? `/wechat/richmedia/edit/${this.props.templateData._id}` : `/wechat/edit/${this.props.templateData._id}`;
     }
-    console.log('final content is', content);
+    
     return (
       <SlideBox
         header={this.props.templateData && this.props.templateData.name ? this.props.templateData.name : ''}

package/v2Components/SmsTest/index.js

@@ -23,20 +23,20 @@ class SmsTest extends React.Component { // eslint-disable-line react/prefer-stat
   }
 
   onTemplateNameChange(name) {
-    console.log('Template name changed to ', name);
+    
   }
 
   onTemplateContentChange(content) {
-    console.log('Template content changed to ', content);
+    
   }
 
   onFormDataChange(formData) {
-    console.log('Form data changed is ', formData);
+    
   }
 
   saveFormData(formData) {
     //Logic to save in db etc
-    console.log('Saving form data', formData);
+    
   }
   render() {
     const schema = {

package/v2Components/TemplatePreview/index.js

@@ -16,7 +16,7 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
-import { VIBER } from '../../v2Containers/App/constants';
+import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
@@ -30,6 +30,7 @@ const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
+import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -145,7 +146,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         document.getElementById("msg_count").val = smsDetails.parts;
       }
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
-      //console.log('message text', smsText);
+      //
     }
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
     let iosActions = [];
@@ -260,7 +261,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
     return (
       <CapRow>
-        {this.props.showCount && <CapColumn span={16}>
+        {this.props.showCount && (channel && channel.toLowerCase() !== FACEBOOK) && <CapColumn span={16}>
           {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
             <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
             {smsDetails.unicode &&
@@ -637,6 +638,22 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
+            {channel && channel.toLowerCase() === FACEBOOK && (
+              <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
+                <CapFacebookPreview
+                  disablePreviewButton={false}
+                  selectedAd={content.selectedAd}
+                  previewData={content.previewData}
+                  primaryText={content.primaryText}
+                  callToAction={content.callToAction}
+                  displayLink={content.displayLink}
+                  orgUnitFacebookPageSettingsMap={{pageAccessToken: content.pageAccessToken,
+                    pageId: content.pageId}}
+                  accountId={content.accountId}
+                  accessToken={content.accessToken}
+              />
+              </div>
+        )}
           </div>
 
         </CapColumn>
@@ -660,6 +677,10 @@ TemplatePreview.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   showTestAndPreviewIcon: PropTypes.bool,
+  fbContent: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.any,
+  ]),
 };
 
 export default (injectIntl(TemplatePreview));

package/v2Components/Toastr/index.js

@@ -37,7 +37,7 @@ class Toastr extends React.Component { // eslint-disable-line react/prefer-state
     return (
       <StyledMessageContainer style={{ ...messagePositionConfig[this.props.position] }}>
         {this.props.messagesList.map((message) => {
-          console.log('Messages', message);
+          
           return <ToastrMessage key={message.messageId} timeout={this.props.timeout} messageId={message.messageId} title={message.title} text={message.text} type={message.type} handleMessageClose={this.closeMessagePopup} hideProgressBar={message.hideProgressBar} />;
         })}
       </StyledMessageContainer>

package/v2Containers/App/constants.js

@@ -25,6 +25,8 @@ export const EDIT = 'edit';
 export const PREVIEW = 'preview';
 
 export const VIBER = 'viber';
+export const FACEBOOK = 'facebook';
+
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
 export const TRACK_EDIT_MPUSH = 'editMpush';
@@ -54,3 +56,22 @@ export const BEE_PLUGIN = 'BEE_PLUGIN';
 export const NO_COMMUNICATION = 'NO_COMMUNICATION';
 export const FTP = 'FTP';
 export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';
+
+export const APPLY_NOW = <FormattedMessage {...globalMessages.applyNow} />;
+export const NO_CALL_TO_ACTION = <FormattedMessage {...globalMessages.noCallToAction} />;
+export const LEARN_MORE = <FormattedMessage {...globalMessages.learnMore} />;
+export const SHOP_NOW = <FormattedMessage {...globalMessages.shopNow} />;
+export const SIGN_UP = <FormattedMessage {...globalMessages.signUp} />;
+export const SUBSCRIBE = <FormattedMessage {...globalMessages.subscribe} />;
+export const WATCH_MORE = <FormattedMessage {...globalMessages.watchMore} />;
+
+
+export const FB_AD_CALL_TO_ACTION = {
+  NO_CALL_TO_ACTION,
+  APPLY_NOW,
+  LEARN_MORE,
+  SHOP_NOW,
+  SIGN_UP,
+  SUBSCRIBE,
+  WATCH_MORE,
+};

package/v2Containers/Assets/Gallery/sagas.js

@@ -24,7 +24,7 @@ export function* uploadAsset(file, assetType, fileParams) {
 export function* deleteAssetById(assetId, assetType) {
   try {
     const result = yield call(Api.deleteAssetById, assetId, assetType);
-    console.log({"delete Asset Id": result});
+    
     yield put({ type: types.DELETE_ASSET_SUCCESS, data: result.response });
   } catch (error) {
     yield put({ type: types.DELETE_ASSET_FAILURE, error });

package/v2Containers/Cap/actions.js

@@ -45,7 +45,7 @@ export function getUserData(callback) {
 }
 
 export function fetchSchemaForEntity(queryParams) {
-  console.log('fetch schema action');
+  
   return {
     type: types.GET_SCHEMA_FOR_ENTITY_REQUEST, queryParams,
   };

package/v2Containers/Cap/index.js

@@ -103,7 +103,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-    console.log('Setting final locale as', locale);
+    
     moment.locale(locale);
     window.addEventListener('storage', this.handleStorageChange, false);
     document.addEventListener(
@@ -404,7 +404,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
-    console.log('v2 locale loading', this.props.loader.localeLoading);
+    
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?

package/v2Containers/Cap/messages.js

@@ -113,4 +113,34 @@ export default defineMessages({
     id: `creatives.containersV2.newOrgName`,
     defaultMessage: '{newOrgName}',
   },
+  "applyNow": {
+    id: `creatives.containersV2.applyNow`,
+    defaultMessage: 'Apply now',
+  },
+  "noCallToAction": {
+    id: `creatives.containersV2.noCallToAction`,
+    defaultMessage: 'No call to action',
+  },
+  "learnMore": {
+    id: `creatives.containersV2.learnMore`,
+    defaultMessage: 'Learn More',
+  },
+  "shopNow": {
+    id: `creatives.containersV2.shopNow`,
+    defaultMessage: 'Shop Now',
+  },
+  "signUp": {
+    id: `creatives.containersV2.signUp`,
+    defaultMessage: 'Sign Up',
+  },
+  "subscribe": {
+    id: `creatives.containersV2.subscribe`,
+    defaultMessage: 'Subscribe',
+  },
+  "watchMore": {
+    id: `creatives.containersV2.watchMore`,
+    defaultMessage: 'Watch More',
+  },
+
 });
+

package/v2Containers/Cap/reducer.js

@@ -82,7 +82,7 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('fetchingSchema', false);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
       const stateMeta = state.get('metaEntities');
-      console.log('stateMeta', stateMeta);
+      
       return state
         .set('fetchingSchema', false)
         .set('metaEntities', {

package/v2Containers/Cap/sagas.js

@@ -106,9 +106,9 @@ export function* fetchUserInfo(option) {
 
 export function* fetchSchemaForEntity(queryParams) {
   try {
-    console.log('saga fetch Schema For Entity', queryParams);
+    
     const result = yield call(Api.fetchSchemaForEntity, queryParams);
-    console.log('cap saga', result);
+    
     // const sidebar = result.response.sidebar;
     yield put({ type: types.GET_SCHEMA_FOR_ENTITY_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', entityType: queryParams.queryParams.type });
   } catch (error) {
@@ -129,7 +129,7 @@ function* getTopbarMenuData() {
 
 
 function* watchFetchSchemaForEntity() {
-  console.log('inside watch get schema');
+  
   const watcher = yield takeLatest(types.GET_SCHEMA_FOR_ENTITY_REQUEST, fetchSchemaForEntity);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);

package/v2Containers/Cap/selectors.js

@@ -31,7 +31,7 @@ const setInjectedTags = () => createSelector(
     const { tags } = metaEntities;
     const customTags = tags && (tags.custom || {});
     const extendedTags = tags && (tags.extended || {});
-    console.log("selector cap: ", injectedTags, customTags, metaEntities, extendedTags);
+    
     return (injectedTags = _.merge({}, injectedTags, customTags, extendedTags));
   }
 );

package/v2Containers/CapFacebookPreview/actions.js

@@ -5,24 +5,12 @@
  */
 
 import {
-  GENERATE_IMAGE_PREVIEW_REQUEST,
-  GENERATE_VIDEO_PREVIEW_REQUEST,
-  GENERATE_CAROUSEL_PREVIEW_REQUEST,
+  GENERATE_PREVIEW_REQUEST,
   CLEAR_PREVIEW,
 } from './constants';
 
-export const getImagePreview = (previewData) => ({
-  type: GENERATE_IMAGE_PREVIEW_REQUEST,
-  previewData,
-});
-
-export const getVideoPreview = (previewData) => ({
-  type: GENERATE_VIDEO_PREVIEW_REQUEST,
-  previewData,
-});
-
-export const getCarouselPreview = (previewData) => ({
-  type: GENERATE_CAROUSEL_PREVIEW_REQUEST,
+export const getPreview = (previewData) => ({
+  type: GENERATE_PREVIEW_REQUEST,
   previewData,
 });
 

package/v2Containers/CapFacebookPreview/constants.js

@@ -5,17 +5,9 @@
  */
 
 
-export const GENERATE_IMAGE_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_IMAGE_PREVIEW_REQUEST';
-export const GENERATE_IMAGE_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_IMAGE_PREVIEW_SUCCESS';
-export const GENERATE_IMAGE_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_IMAGE_PREVIEW_FAILURE';
-
-export const GENERATE_VIDEO_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_VIDEO_PREVIEW_REQUEST';
-export const GENERATE_VIDEO_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_VIDEO_PREVIEW_SUCCESS';
-export const GENERATE_VIDEO_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_VIDEO_PREVIEW_FAILURE';
-
-export const GENERATE_CAROUSEL_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_CAROUSEL_PREVIEW_REQUEST';
-export const GENERATE_CAROUSEL_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_CAROUSEL_PREVIEW_SUCCESS';
-export const GENERATE_CAROUSEL_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_CAROUSEL_PREVIEW_FAILURE';
+export const GENERATE_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_PREVIEW_REQUEST';
+export const GENERATE_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_PREVIEW_SUCCESS';
+export const GENERATE_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_PREVIEW_FAILURE';
 
 export const CLEAR_PREVIEW = 'app/CapFacebookPreview/CLEAR_PREVIEW';
 

package/v2Containers/CapFacebookPreview/index.js

@@ -42,7 +42,7 @@ export const CapFacebookPreview = (props) => {
     selectedAd,
     primaryText,
     callToAction,
-    orgUnitFacebookPageSettingsMap,
+    orgUnitFacebookPageSettingsMap = {},
     accessToken,
     accountId,
   } = props;
@@ -222,11 +222,11 @@ export const CapFacebookPreview = (props) => {
             value: {link: webSiteLink},
           };
         }
-        facebookPreviewActions.getImagePreview(data);
+        facebookPreviewActions.getPreview(data);
       } else {
         data.params.creative.object_story_spec.video_data = {
           image_url: videoData.previewUrl,
-          videoUrl: videoData.videoSrc,
+          video_id: videoData.videoId,
           message: primaryText,
           link_description: linkDesc,
         };
@@ -236,7 +236,7 @@ export const CapFacebookPreview = (props) => {
             value: {link: webSiteLink},
           };
         }
-        facebookPreviewActions.getVideoPreview(data);
+        facebookPreviewActions.getPreview(data);
       }
     } else {
       const childData = previewData.map((obj) => {
@@ -254,7 +254,7 @@ export const CapFacebookPreview = (props) => {
         if (obj.subType === VIDEO) {
           arrayData = {
             ...arrayData,
-            videoUrl: obj.videoData.videoSrc,
+            video_id: obj.videoData.videoId,
             picture: obj.videoData.previewUrl,
           };
         } else {
@@ -273,7 +273,7 @@ export const CapFacebookPreview = (props) => {
           multi_share_end_card: false,
         },
       };
-      facebookPreviewActions.getCarouselPreview(data);
+      facebookPreviewActions.getPreview(data);
     }
     setDisableAfterPreviewGenerate(true);
   };

package/v2Containers/CapFacebookPreview/reducer.js

@@ -16,20 +16,14 @@ const initialState = fromJS({
 
 function capFacebookPreviewReducer(state = initialState, action) {
   switch (action.type) {
-    case types.GENERATE_IMAGE_PREVIEW_REQUEST:
-    case types.GENERATE_VIDEO_PREVIEW_REQUEST:
-    case types.GENERATE_CAROUSEL_PREVIEW_REQUEST:
+    case types.GENERATE_PREVIEW_REQUEST:
       return state.set('isFetchingPreview', true)
       .set('previewIframe', "")
       .set("previewIframeError", "");
-    case types.GENERATE_IMAGE_PREVIEW_SUCCESS:
-    case types.GENERATE_VIDEO_PREVIEW_SUCCESS:
-    case types.GENERATE_CAROUSEL_PREVIEW_SUCCESS:
+    case types.GENERATE_PREVIEW_SUCCESS:
       return state.set('isFetchingPreview', false)
       .set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
-    case types.GENERATE_IMAGE_PREVIEW_FAILURE:
-    case types.GENERATE_VIDEO_PREVIEW_FAILURE:
-    case types.GENERATE_CAROUSEL_PREVIEW_FAILURE:
+    case types.GENERATE_PREVIEW_FAILURE:
       return state.set('isFetchingPreview', false)
       .set('previewIframe', "")
       .set("previewIframeError", get(action, 'payload.message', ""));

package/v2Containers/CapFacebookPreview/sagas.js

@@ -3,70 +3,24 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 import * as Api from '../../services/api';
 import * as type from './constants';
 
-export function* getImageFacebookPreview(previewData) {
+export function* getFacebookPreview(previewData) {
   try {
-    const response = yield call(Api.getImageFacebookPreview, previewData );
+    const response = yield call(Api.getFacebookPreview, previewData );
     const { status, response: responsePreview } = response;
     if (status && status.isError) {
       yield put({
-        type: type.GENERATE_IMAGE_PREVIEW_FAILURE,
+        type: type.GENERATE_PREVIEW_FAILURE,
         payload: status,
       });
     } else {
       yield put({
-        type: type.GENERATE_IMAGE_PREVIEW_SUCCESS,
+        type: type.GENERATE_PREVIEW_SUCCESS,
         payload: responsePreview,
       });
     }
   } catch (error) {
     yield put({
-      type: type.GENERATE_IMAGE_PREVIEW_FAILURE,
-      payload: error,
-    });
-  }
-}
-
-export function* getVideoFacebookPreview(previewData) {
-  try {
-    const response = yield call(Api.getVideoFacebookPreview, previewData);
-    const { status, response: responsePreview } = response;
-    if (status && status.isError) {
-      yield put({
-        type: type.GENERATE_VIDEO_PREVIEW_FAILURE,
-        payload: status,
-      });
-    } else {
-      yield put({
-        type: type.GENERATE_VIDEO_PREVIEW_SUCCESS,
-        payload: responsePreview,
-      });
-    }
-  } catch (error) {
-    yield put({
-      type: type.GENERATE_VIDEO_PREVIEW_FAILURE,
-      payload: error,
-    });
-  }
-}
-
-export function* getCarouselFacebookPreview(previewData) {
-  try {
-    const response = yield call(Api.getCarouselFacebookPreview, previewData);
-    const { status, response: responsePreview } = response;
-    if (status && status.isError) {
-      yield put({
-        type: type.GENERATE_CAROUSEL_PREVIEW_FAILURE,
-        payload: status,
-      });
-    } else {
-      yield put({
-        type: type.GENERATE_CAROUSEL_PREVIEW_SUCCESS,
-        payload: responsePreview,
-      });
-    }
-  } catch (error) {
-    yield put({
-      type: type.GENERATE_CAROUSEL_PREVIEW_FAILURE,
+      type: type.GENERATE_PREVIEW_FAILURE,
       payload: error,
     });
   }
@@ -74,26 +28,13 @@ export function* getCarouselFacebookPreview(previewData) {
 
 
 function* watchImageFacebookPreview() {
-  const watcher = yield takeLatest(type.GENERATE_IMAGE_PREVIEW_REQUEST, getImageFacebookPreview);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
-}
-
-function* watchVideoFacebookPreview() {
-  const watcher = yield takeLatest(type.GENERATE_VIDEO_PREVIEW_REQUEST, getVideoFacebookPreview);
+  const watcher = yield takeLatest(type.GENERATE_PREVIEW_REQUEST, getFacebookPreview);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);
 }
 
-function* watchCarouselFacebookPreview() {
-  const watcher = yield takeLatest(type.GENERATE_CAROUSEL_PREVIEW_REQUEST, getCarouselFacebookPreview);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
-}
 
 export default [
   watchImageFacebookPreview,
-  watchVideoFacebookPreview,
-  watchCarouselFacebookPreview,
 ];
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -136,6 +136,7 @@ function SlideBoxContent(props) {
       onShowTemplates,
       handleClose,
       onFTPSubmit,
+      campaignSettings,
     } = 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};
@@ -164,6 +165,8 @@ function SlideBoxContent(props) {
 
 
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+  const isCreateFacebook = slidBoxContent === 'createTemplate' && channel === constants.FACEBOOK;
+
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
   let isEditSms = false;
@@ -185,7 +188,7 @@ function SlideBoxContent(props) {
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER);
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER || channel === constants.FACEBOOK);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
@@ -263,6 +266,44 @@ function SlideBoxContent(props) {
         };
         return template.content;
       }
+      case constants.FACEBOOK: {
+        const template = cloneDeep(templateDataObject.versions.base) || {};
+        const {FacebookAd = [], pageOrgUnitId} = template.content || {};
+        const {
+          type: fbType = "",
+          primaryText = "",
+          callToAction = "",
+          displayLink = "",
+        } = FacebookAd[0] || {};
+        const previewData = Object.values(template.content.FacebookAd).map((obj) => ({
+          imageData: obj.imgSrc ? {imageSrc: obj.imgSrc} : {},
+          linkDesc: obj.linkDesc,
+          linkHeadLine: obj.linkHeadLine,
+          subType: obj.subType,
+          videoData: obj.video ? { videoSrc: obj.video.originalContentUrl,
+            videoName: obj.video.videoName,
+            previewUrl: obj.video.previewImageUrl,
+            videoId: obj.video.videoId,
+
+          } : {},
+          webSiteLink: obj.webSiteLink,
+        }));
+        const facebookAccountSettings = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
+        const {accountId, employeeAccessToken: accessToken, orgUnitFacebookPageSettingsMap = {}} = facebookAccountSettings[0] || {};
+        const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap[pageOrgUnitId];
+        const fbContent = {
+          selectedAd: fbType,
+          previewData,
+          primaryText,
+          callToAction,
+          displayLink,
+          pageAccessToken,
+          pageId,
+          accountId,
+          accessToken,
+        };
+        return fbContent;
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
@@ -505,6 +546,22 @@ function SlideBoxContent(props) {
         onPreviewContentClicked={onPreviewContentClicked}
         onTestContentClicked={onTestContentClicked}/>
         }
+      {
+        isCreateFacebook && (
+          <Facebook
+            templateData={templateData}
+            messageDetails={messageDetails}
+            cap={cap}
+            onFacebookSubmit={onFacebookSubmit}
+            onCreateComplete={onCreateComplete}
+            setIsLoadingContent={setIsLoadingContent}
+            isFullMode={isFullMode}
+            createNew
+            getFormSubscriptionData={getFormData}
+
+          />
+        )
+      }
       {
         isEditFacebook && (
           <Facebook
@@ -512,7 +569,12 @@ function SlideBoxContent(props) {
             messageDetails={messageDetails}
             cap={cap}
             onFacebookSubmit={onFacebookSubmit}
+            onCreateComplete={onCreateComplete}
             isFullMode={isFullMode}
+            params={{
+              id: templateData._id,
+            }}
+            getFormSubscriptionData={getFormData}
           />
         )
       }
@@ -596,6 +658,7 @@ SlideBoxContent.propTypes = {
   onChannelChange: PropTypes.func,
   currentChannel: PropTypes.string,
   onEmailModeChange: PropTypes.func,
+  onFacebookAdModeChange: PropTypes.func,
   emailCreateMode: PropTypes.string,
   templateStep: PropTypes.string,
   onCreateNextStep: PropTypes.func,