@capillarytech/creatives-library 3.3.1 → 3.4.0

package/config/app.js

@@ -4,6 +4,7 @@
 const config = {
   production: {
     api_endpoint: '/arya/api/v1/creatives',
+    campaigns_api_endpoint: '/iris/v2/campaigns',
     auth_endpoint: '/arya/api/v1/auth',
     arya_endpoint: '/arya/api/v1',
     login_url: 'auth/login',
@@ -14,6 +15,7 @@ const config = {
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',
+    campaigns_api_endpoint: 'https://nightly.capillary.in/iris/v2/campaigns',
     auth_endpoint: 'https://nightly.capillary.in/arya/api/v1/auth',
     arya_endpoint: 'https://nightly.capillary.in/arya/api/v1',
     subscription_api_endpoint: 'https://nightly.capillary.in/arya/api/v1/org-settings/subscription',

package/index.js

@@ -39,6 +39,10 @@ import WeChatRichMediaEdit from './v2Containers/WeChat/RichmediaTemplates/Edit';
 import weChatRichMediaEditReducer from './v2Containers/WeChat/RichmediaTemplates/Edit/reducer';
 import weChatRichMediaEditSaga from './v2Containers/WeChat/RichmediaTemplates/Edit/sagas';
 
+import Facebook from './v2Containers/Facebook';
+import facebookReducer from './v2Containers/Facebook/reducer';
+import facebookSaga from './v2Containers/Facebook/sagas';
+
 import MobilepushCreate from './v2Containers/MobilePush/Create';
 import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
 import mobilepushCreateSaga from './v2Containers/MobilePush/Create/sagas';
@@ -81,6 +85,7 @@ const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepu
 const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const LineEditContainer = {LineEdit, lineEditReducer, lineEditSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
+const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 
 export {default as TagList} from './v2Containers/TagList/index';
 export {default as TagListSaga} from './v2Containers/TagList/sagas';
@@ -117,4 +122,5 @@ export { CapContainer,
   TemplatesV2Container,
   CreativesContainer,
   updateCharCount,
+  FacebookContainer,
 };

package/initialState.js

@@ -42,5 +42,8 @@ export default {
   },
   creativesContainer: {
 
+  },
+  facebook: {
+
   },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/routes.js

@@ -628,6 +628,8 @@ export default function createRoutes(store) {
           import('v2Containers/WeChat/RichmediaTemplates/Edit/reducer'),
           import('v2Containers/Assets/Gallery/reducer'),
           import('v2Containers/Assets/Gallery/sagas'),
+          import('v2Containers/Facebook/sagas'),
+          import('v2Containers/Facebook/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -635,7 +637,7 @@ export default function createRoutes(store) {
         importModules.then(([reducer,
           sagas, component,
           capReducer, capSagas,
-           creativesContainerReducer,
+          creativesContainerReducer,
           smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga,
           emailReducer, emailSaga,
           callTaskReducer, callTaskSagas,
@@ -645,6 +647,7 @@ export default function createRoutes(store) {
           weChatRichmediaTemplatesCreateSagas, weChatRichmediaTemplatesCreateReducer,
           weChatRichmediaTemplatesEditSagas, weChatRichmediaTemplatesEditReducer,
           galleryReducer, gallerySagas,
+          facebookSagas, facebookReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -659,6 +662,7 @@ export default function createRoutes(store) {
           injectReducer('weChatRichmediaCreate', weChatRichmediaTemplatesCreateReducer.default);
           injectReducer('weChatRichmediaEdit', weChatRichmediaTemplatesEditReducer.default);
           injectReducer('gallery', galleryReducer.default);
+          injectReducer('facebook', facebookReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -671,6 +675,7 @@ export default function createRoutes(store) {
           injectSagas(weChatMapTemplatesSagas.default);
           injectSagas(weChatRichmediaTemplatesCreateSagas.default);
           injectSagas(weChatRichmediaTemplatesEditSagas.default);
+          injectSagas(facebookSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -8,11 +8,13 @@ import pathConfig from '../config/path';
 import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
 let API_ENDPOINT = config.development.api_endpoint;
+let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
 let SUBSCRIPTION_API_ENDPOINT = config.development.subscription_api_endpoint;
 if (process.env.NODE_ENV === 'production') {
   API_ENDPOINT = config.production.api_endpoint;
+  CAMPAIGNS_API_ENDPOINT = config.production.campaigns_api_endpoint;
   API_AUTH_ENDPOINT = config.production.auth_endpoint;
   ARYA_ENDPOINT = config.production.arya_endpoint;
   SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
@@ -75,7 +77,7 @@ function request(url, options) {
     .then(parseJSON);
 }
 
-function getAPICallObject(method, body, isFileUpload = false) {
+function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false) {
   const token = loadItem('token');
   const orgID = loadItem('orgID');
   const user = loadItem('user');
@@ -88,16 +90,24 @@ function getAPICallObject(method, body, isFileUpload = false) {
     };
   }
 
-  if (user && user.refID) {
-    headers['X-CAP-REMOTE-USER'] = user.refID;
-  }
+  if (loadCampaignHeaders) {
+    headers['X-CAP-ORG'] = orgID;
 
-  if (process.env.NODE_ENV !== 'production' && orgID !== undefined) {
-    headers['X-CAP-API-AUTH-ORG-ID'] = orgID;
-  }
+    if (token !== undefined) {
+      headers['X-CAP-CT'] = token;
+    }
+  } else {
+    if (user && user.refID) {
+      headers['X-CAP-REMOTE-USER'] = user.refID;
+    }
 
-  if (process.env.NODE_ENV !== 'production' && token !== undefined) {
-    headers.Authorization = `Bearer ${token}`;
+    if (process.env.NODE_ENV !== 'production' && orgID !== undefined) {
+      headers['X-CAP-API-AUTH-ORG-ID'] = orgID;
+    }
+
+    if (process.env.NODE_ENV !== 'production' && token !== undefined) {
+      headers.Authorization = `Bearer ${token}`;
+    }
   }
 
   const requestObj = {
@@ -339,3 +349,9 @@ export const getUnsubscribeUrl = () => {
   const url = `${SUBSCRIPTION_API_ENDPOINT}/unsubscribeUrl`;
   return request(url, getAPICallObject('POST', body));
 };
+
+export const getMarketingObjectives = (channel) =>
+  request(
+    `${CAMPAIGNS_API_ENDPOINT}/socialObjectives?channel=${channel}`,
+    getAPICallObject('GET', null, false, true),
+  );

package/translations/en.json

@@ -992,6 +992,48 @@
   "creatives.containersV2.EmailWrapper.useEditorDesc": "Create using in-built template",
   "creatives.containersV2.EmailWrapper.zipUpload": "Upload zip file",
   "creatives.containersV2.EmailWrapper.zipUploadDesc": "Upload compressed file (Zip) containing HTML & images",
+  "creatives.containersV2.Facebook.fbAccount": "Facebook Account",
+  "creatives.containersV2.Facebook.fbAdCampaignSetDetailsDescription": "Once this message is approved, a campaign and an ad set will be created on Facebook Ad Manager with the same name as the current campaign and message name.",
+  "creatives.containersV2.Facebook.fbAdCampaignSetDetailsTitle": "Ad campaign & ad set details",
+  "creatives.containersV2.Facebook.fbAdSetName": "Ad set name",
+  "creatives.containersV2.Facebook.fbAdsDescription": "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+.",
+  "creatives.containersV2.Facebook.fbAdsDetailOne": "Only FB campaign & ad set creation is supported in Engage+",
+  "creatives.containersV2.Facebook.fbAdsDetailThree": "You can create ads later in Facebook ad manager.",
+  "creatives.containersV2.Facebook.fbAdsDetailTwo": "You can proceed with an empty content block",
+  "creatives.containersV2.Facebook.fbAdsTitle": "Facebook ads",
+  "creatives.containersV2.Facebook.fbAudience": "Audience",
+  "creatives.containersV2.Facebook.fbCampaignName": "FB Campaign name",
+  "creatives.containersV2.Facebook.fbChange": "Change",
+  "creatives.containersV2.Facebook.fbConfirm": "Confirm",
+  "creatives.containersV2.Facebook.fbMarketingObjective": "FB Marketing objective",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveAppInstallTitle": "App Installs",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveAppInstallsDescription": "Get more people to install your app.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveAwareness": "Awareness",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveBrandAwarenessDescription": "Increase awareness for your brand by reaching people who are more likely to be interested in it.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveBrandAwarenessTitle": "Brand awareness",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveCatalogSalesDescription": "Create ads that automatically show items from your catalog based on your target audience.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveCatalogSalesTitle": "Catalog Sales",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveConsideration": "Consideration",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveConversionsDescription": "Drive valuable actions on your website, app or in Messenger.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveConversionsTitle": "Conversions",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveEngagementDescription": "Get more post engagements",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveEngagementTitle": "Engagement",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveLeadGenerationDescription": "Drive more sales leads, such as email addresses, from people interested in your brand or business.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveLeadGenerationTitle": "Lead Generation",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveMessagesDescription": "Get more people to send messages to your business in Messenger.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveMessagesTitle": "Messages",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveReachDescription": "Show your ad to the maximum number of people.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveReachTitle": "Reach",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveStoreTrafficDescription": "Drive visits to your physical stores by showing ads to people who are nearby.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveStoreTrafficTitle": "Store Traffic",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveTrafficDescription": "Send more people to a destination such as a website, app or Messenger conversation.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveTrafficTitle": "Traffic",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveVideoViewsDescription": "Get more people to view your video content.",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveVideoViewsTitle": "Video Views",
+  "creatives.containersV2.Facebook.fbNoAudienceSelected": "Not Selected",
+  "creatives.containersV2.FacebookMarketingObjective.fbMarketingObjectiveDescription": "Objectives help break reporting into a more granular level",
+  "creatives.containersV2.FacebookMarketingObjective.fbMarketingObjectiveDone": "Done",
+  "creatives.containersV2.FacebookMarketingObjective.fbMarketingObjectiveTitle": "Facebook Marketing Objective",
   "creatives.containersV2.Line.Create.Campaigns": "Campaigns",
   "creatives.containersV2.Line.Create.Creatives": "Creatives",
   "creatives.containersV2.Line.Create.Image": "Image",
@@ -1318,6 +1360,7 @@
   "creatives.containersV2.TemplatesV2.creativesDesc": "These are pre-built templates which you could use to customize your message content.",
   "creatives.containersV2.TemplatesV2.edit": "Edit",
   "creatives.containersV2.TemplatesV2.email": "Email",
+  "creatives.containersV2.TemplatesV2.facebook": "Facebook",
   "creatives.containersV2.TemplatesV2.gallery": "Gallery",
   "creatives.containersV2.TemplatesV2.header": "This is TemplatesV2 container !",
   "creatives.containersV2.TemplatesV2.pushNotification": "Push notification",
@@ -1387,6 +1430,8 @@
   "creatives.containersV2.richMedia.Create.delete": "delete",
   "creatives.containersV2.richMedia.Create.deleteContent": "Do you really want to delete? All your temporary changes will be lost!",
   "creatives.containersV2.richMedia.Create.emptyTemplateName": "Cannot leave template name empty",
+  "creatives.containersV2.richMedia.Create.existingMedia": "Existing media",
+  "creatives.containersV2.richMedia.Create.existingMediaHeader": "Rich media templates",
   "creatives.containersV2.richMedia.Create.fileContentFailed": "Failed to get File content",
   "creatives.containersV2.richMedia.Create.formEmpty": "Cannot leave form empty",
   "creatives.containersV2.richMedia.Create.header": "This is Create container !",
@@ -1404,6 +1449,7 @@
   "creatives.containersV2.richMedia.Create.resolutionText": "Resolution 360 x 200",
   "creatives.containersV2.richMedia.Create.sameTemplateExists": "Template with the same name exists",
   "creatives.containersV2.richMedia.Create.saveSuccess": "Template saved successfully",
+  "creatives.containersV2.richMedia.Create.searchText": "Search Templates",
   "creatives.containersV2.richMedia.Create.somethingWentWrong": "Something went wrong!!",
   "creatives.containersV2.richMedia.Create.sourceIdentMissing": "Please provide source account identifier",
   "creatives.containersV2.richMedia.Create.sourceLinkEmpty": "Cannot leave source link field empty",
@@ -1421,6 +1467,7 @@
   "creatives.containersV2.richMedia.Create.visibility": "visibility",
   "creatives.containersV2.richMedia.Create.wrongFormatFile": "Wrong file upoaded. Please upload image file",
   "creatives.containersV2.richMedia.Create.wrongUrl": "Enter correct URL",
+  "creatives.containersV2.richMedia.create.templateNameAlreadyExists": "Template name already exists",
   "customdatepicker.cancel": "Cancel",
   "customdatepicker.done": "Done",
   "reon.components.Cap.Workbench": "WorkBench",

package/translations/zh.json

@@ -992,6 +992,48 @@
   "creatives.containersV2.EmailWrapper.useEditorDesc": "",
   "creatives.containersV2.EmailWrapper.zipUpload": "",
   "creatives.containersV2.EmailWrapper.zipUploadDesc": "",
+  "creatives.containersV2.Facebook.fbAccount": "",
+  "creatives.containersV2.Facebook.fbAdCampaignSetDetailsDescription": "",
+  "creatives.containersV2.Facebook.fbAdCampaignSetDetailsTitle": "",
+  "creatives.containersV2.Facebook.fbAdSetName": "",
+  "creatives.containersV2.Facebook.fbAdsDescription": "",
+  "creatives.containersV2.Facebook.fbAdsDetailOne": "",
+  "creatives.containersV2.Facebook.fbAdsDetailThree": "",
+  "creatives.containersV2.Facebook.fbAdsDetailTwo": "",
+  "creatives.containersV2.Facebook.fbAdsTitle": "",
+  "creatives.containersV2.Facebook.fbAudience": "",
+  "creatives.containersV2.Facebook.fbCampaignName": "",
+  "creatives.containersV2.Facebook.fbChange": "",
+  "creatives.containersV2.Facebook.fbConfirm": "",
+  "creatives.containersV2.Facebook.fbMarketingObjective": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveAppInstallTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveAppInstallsDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveAwareness": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveBrandAwarenessDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveBrandAwarenessTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveCatalogSalesDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveCatalogSalesTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveConsideration": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveConversionsDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveConversionsTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveEngagementDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveEngagementTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveLeadGenerationDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveLeadGenerationTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveMessagesDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveMessagesTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveReachDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveReachTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveStoreTrafficDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveStoreTrafficTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveTrafficDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveTrafficTitle": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveVideoViewsDescription": "",
+  "creatives.containersV2.Facebook.fbMarketingObjectiveVideoViewsTitle": "",
+  "creatives.containersV2.Facebook.fbNoAudienceSelected": "",
+  "creatives.containersV2.FacebookMarketingObjective.fbMarketingObjectiveDescription": "",
+  "creatives.containersV2.FacebookMarketingObjective.fbMarketingObjectiveDone": "",
+  "creatives.containersV2.FacebookMarketingObjective.fbMarketingObjectiveTitle": "",
   "creatives.containersV2.Line.Create.Campaigns": "",
   "creatives.containersV2.Line.Create.Creatives": "",
   "creatives.containersV2.Line.Create.Image": "",
@@ -1318,6 +1360,7 @@
   "creatives.containersV2.TemplatesV2.creativesDesc": "",
   "creatives.containersV2.TemplatesV2.edit": "",
   "creatives.containersV2.TemplatesV2.email": "",
+  "creatives.containersV2.TemplatesV2.facebook": "",
   "creatives.containersV2.TemplatesV2.gallery": "",
   "creatives.containersV2.TemplatesV2.header": "",
   "creatives.containersV2.TemplatesV2.pushNotification": "",
@@ -1387,6 +1430,8 @@
   "creatives.containersV2.richMedia.Create.delete": "",
   "creatives.containersV2.richMedia.Create.deleteContent": "",
   "creatives.containersV2.richMedia.Create.emptyTemplateName": "",
+  "creatives.containersV2.richMedia.Create.existingMedia": "",
+  "creatives.containersV2.richMedia.Create.existingMediaHeader": "",
   "creatives.containersV2.richMedia.Create.fileContentFailed": "",
   "creatives.containersV2.richMedia.Create.formEmpty": "",
   "creatives.containersV2.richMedia.Create.header": "",
@@ -1404,6 +1449,7 @@
   "creatives.containersV2.richMedia.Create.resolutionText": "",
   "creatives.containersV2.richMedia.Create.sameTemplateExists": "",
   "creatives.containersV2.richMedia.Create.saveSuccess": "",
+  "creatives.containersV2.richMedia.Create.searchText": "",
   "creatives.containersV2.richMedia.Create.somethingWentWrong": "",
   "creatives.containersV2.richMedia.Create.sourceIdentMissing": "",
   "creatives.containersV2.richMedia.Create.sourceLinkEmpty": "",
@@ -1421,6 +1467,7 @@
   "creatives.containersV2.richMedia.Create.visibility": "",
   "creatives.containersV2.richMedia.Create.wrongFormatFile": "",
   "creatives.containersV2.richMedia.Create.wrongUrl": "",
+  "creatives.containersV2.richMedia.create.templateNameAlreadyExists": "",
   "customdatepicker.cancel": "",
   "customdatepicker.done": "",
   "reon.components.Cap.Workbench": "",

package/v2Components/MarketingObjective/MarketingObjective.style.js

@@ -0,0 +1,73 @@
+import { css } from 'styled-components';
+import {
+  CAP_SPACE_16,
+  CAP_PRIMARY,
+  CAP_G06,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  .ant-radio-group.cap-radioCard-v2 {
+    .ant-radio-button-wrapper {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .icon-container {
+      background-color: transparent;
+
+      .anticon {
+        color: ${CAP_G06};
+      }
+
+      &.green-color {
+        background-color: transparent;
+
+        .anticon {
+          color: ${CAP_PRIMARY.base};
+        }
+      }
+    }
+  }
+
+  .radio-group-heading {
+    margin-top: ${CAP_SPACE_16};
+  }
+
+  .submit-button-section {
+    margin-top: ${CAP_SPACE_16};
+  }
+
+  .ant-radio-button-wrapper-checked {
+    &:not(.ant-radio-button-wrapper-disabled) {
+      box-shadow: none;
+    }
+  }
+
+  .ant-radio-group.cap-radioCard-v2 {
+    .ant-radio-button-wrapper-checked .radio-card-checked {
+      display: none;
+    }
+  }
+
+  .non-selected-radio-group {
+    .ant-radio-button-wrapper {
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
+  .selected-radio-group {
+    .ant-radio-button-wrapper-checked {
+      &:not(.ant-radio-button-wrapper-disabled) {
+        box-shadow: -1px 0 0 0 ${CAP_PRIMARY.base};
+      }
+    }
+
+    .ant-radio-group.cap-radioCard-v2 {
+      .ant-radio-button-wrapper-checked .radio-card-checked {
+        display: block;
+      }
+    }
+  }
+`;

package/v2Components/MarketingObjective/index.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from "react-intl";
+import {
+  CapHeading,
+  CapRadioCard,
+  CapLabel,
+  CapButton,
+  CapSpin,
+} from '@capillarytech/cap-ui-library';
+import messages from './messages';
+import styles from './MarketingObjective.style';
+import withStyles from '../../hoc/withStyles';
+
+const renderMarketingObjectiveList = ({
+  onMarketingObjectiveChange,
+  marketingObjectiveSelectedOption,
+  defaultmarketingObjective,
+  marketingObjectiveList = [],
+}) => {
+  const marketingList = (marketingObjective) => {
+    const { label, panes = [] } = marketingObjective;
+    const selectedPaneExists = panes.some((item) => item.value === marketingObjectiveSelectedOption);
+    const modifiedPanes = !selectedPaneExists
+      ? [...panes, {
+        value: marketingObjectiveSelectedOption,
+      }]
+      : panes;
+    return (
+      <div key={label} className={selectedPaneExists ? 'selected-radio-group' : 'non-selected-radio-group'}>
+        <CapHeading type="h4" className="radio-group-heading">{label}</CapHeading>
+        <CapRadioCard
+          onChange={({ target: { value } }) => onMarketingObjectiveChange(value)}
+          panes={modifiedPanes}
+          cardWidth="324px"
+          cardHeight="auto"
+          selected={marketingObjectiveSelectedOption}
+          defaultValue={defaultmarketingObjective}
+        />
+      </div>
+    );
+  };
+
+  return marketingObjectiveList.map((marketinObjective) => marketingList(marketinObjective));
+};
+
+const MarketingObjective = ({
+  onMarketingObjectiveSelect,
+  selectedMarketingObjective,
+  defaultmarketingObjective,
+  onSubmit,
+  className,
+  marketingObjectiveList,
+}) => {
+  const [marketingObjectiveSelectedOption, onMarketingObjectiveChange] = useState(selectedMarketingObjective || defaultmarketingObjective);
+
+  useEffect(() => {
+    [...document.querySelectorAll('.non-selected-radio-group .ant-radio-group')].forEach((node) => {
+      const paneToSelect = node.lastChild;
+      paneToSelect.click();
+    });
+  }, [marketingObjectiveSelectedOption]);
+
+  const onSubmitAction = () => {
+    onMarketingObjectiveSelect(marketingObjectiveSelectedOption);
+    onSubmit(false);
+  };
+
+  return (
+    <div className={className}>
+      <>
+        <CapHeading type="h3">
+          <FormattedMessage {...messages.fbMarketingObjectiveTitle} />
+        </CapHeading>
+        <CapLabel type="label1">
+          <FormattedMessage {...messages.fbMarketingObjectiveDescription} />
+        </CapLabel>
+      </>
+      <CapSpin spinning={!marketingObjectiveList.length}>
+        {renderMarketingObjectiveList({
+          onMarketingObjectiveChange,
+          marketingObjectiveSelectedOption,
+          defaultmarketingObjective,
+          marketingObjectiveList,
+        })}
+      </CapSpin>
+      <CapButton
+        type="primary"
+        className="submit-button-section"
+        onClick={() => onSubmitAction(false)}
+      >
+        <FormattedMessage {...messages.fbMarketingObjectiveDone} />
+      </CapButton>
+    </div>
+  );
+};
+
+MarketingObjective.propTypes = {
+  onMarketingObjectiveSelect: PropTypes.func,
+  selectedMarketingObjective: PropTypes.string,
+  defaultmarketingObjective: PropTypes.string,
+  onSubmit: PropTypes.func,
+  className: PropTypes.string,
+  marketingObjectiveList: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default injectIntl(withStyles(MarketingObjective, styles));

package/v2Components/MarketingObjective/messages.js

@@ -0,0 +1,23 @@
+/*
+ * Marketing Objective Messages
+ *
+ * This contains all the text for the Facebook component.
+ */
+import { defineMessages } from 'react-intl';
+
+const messagePrefix = 'creatives.containersV2.FacebookMarketingObjective';
+
+export default defineMessages({
+  fbMarketingObjectiveTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveTitle`,
+    defaultMessage: 'Facebook Marketing Objective',
+  },
+  fbMarketingObjectiveDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveDescription`,
+    defaultMessage: 'Objectives help break reporting into a more granular level',
+  },
+  fbMarketingObjectiveDone: {
+    id: `${messagePrefix}.fbMarketingObjectiveDone`,
+    defaultMessage: 'Done',
+  },
+});

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -12,6 +12,7 @@ import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
+import Facebook from '../Facebook';
 import { RICH_MEDIA, MAP_TEMPLATE, CREATE } from '../WeChat/Wrapper/constants';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
@@ -30,6 +31,7 @@ function getWechatTemplateType(mode, templateData, weChatTemplateType = '') {
   }
   return weChatTemplateType;
 }
+
 function SlideBoxContent(props) {
   const {
       slidBoxContent,
@@ -67,6 +69,7 @@ function SlideBoxContent(props) {
       selectedWeChatAccount,
       weChatMaptemplateStep,
       onWeChatMaptemplateStepChange,
+      onFacebookSubmit,
     } = 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};
@@ -87,6 +90,7 @@ function SlideBoxContent(props) {
   let isMpushPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
+  let isEditFacebook = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
@@ -95,6 +99,7 @@ function SlideBoxContent(props) {
     isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
     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;
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
@@ -116,6 +121,8 @@ function SlideBoxContent(props) {
         channelsToHide={channelsToHide}
         forwardedTags={forwardedTags}
         channelsToDisable={channelsToDisable}
+        messageDetails={messageDetails}
+        onFacebookSubmit={onFacebookSubmit}
         />
         )}
       {isPreview && (
@@ -302,6 +309,16 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         selectedOfferDetails={selectedOfferDetails}/>
         }
+      {
+        isEditFacebook && (
+          <Facebook
+            templateData={templateData}
+            messageDetails={messageDetails}
+            cap={cap}
+            onFacebookSubmit={onFacebookSubmit}
+          />
+        )
+      }
     </CreativesWrapper>
   );
 }
@@ -341,5 +358,6 @@ SlideBoxContent.propTypes = {
   selectedWeChatAccount: PropTypes.object,
   onWeChatMaptemplateStepChange: PropTypes.func,
   weChatMaptemplateStep: PropTypes.string,
+  onFacebookSubmit: PropTypes.func,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/constants.js

@@ -12,5 +12,6 @@ export const LINE = "LINE";
 export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
 export const WECHAT = "WECHAT";
+export const FACEBOOK = "FACEBOOK";
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -207,6 +207,14 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.FACEBOOK: {
+          creativesTemplateData = {
+            selectedMarketingObjective: templateData.selectedMarketingObjective,
+            edit: true,
+            type: channel,
+          };
+          break;
+        }
         default:
           break;
       }
@@ -465,7 +473,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, getCreativesData} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -530,6 +538,7 @@ class Creatives extends React.Component {
               weChatMaptemplateStep={weChatMaptemplateStep}
               selectedWeChatAccount={selectedWeChatAccount}
               onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
+              onFacebookSubmit={getCreativesData}
             />
           }
           footer={this.shouldShowFooter() &&