@capillarytech/creatives-library 3.3.1 → 3.3.3

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/containers/Cap/messsages.js

@@ -0,0 +1,63 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  "sms": {
+    id: 'reon.components.Cap.sms',
+    defaultMessage: 'SMS',
+  },
+  "wechat": {
+    id: 'reon.components.Cap.wechat',
+    defaultMessage: 'WeChat',
+  },
+  "gallery": {
+    id: 'reon.components.Cap.gallery',
+    defaultMessage: 'Gallery',
+  },
+  "creativesDashboard": {
+    id: 'reon.components.Cap.creativesDashboard',
+    defaultMessage: 'Creatives',
+  },
+  "creatives": {
+    id: 'reon.components.Cap.creatives',
+    defaultMessage: 'Creatives',
+  },
+  "campaigns": {
+    id: 'reon.components.Cap.campaigns',
+    defaultMessage: 'Campaigns',
+  },
+  "loyalty": {
+    id: 'reon.components.Cap.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "member care": {
+    id: 'reon.components.Cap.memberCare',
+    defaultMessage: 'Member Care',
+  },
+  "workbench": {
+    id: 'reon.components.Cap.Workbench',
+    defaultMessage: 'WorkBench',
+  },
+  "store care": {
+    id: 'reon.components.Cap.storeCare',
+    defaultMessage: 'Store Care',
+  },
+  "store performance": {
+    id: 'reon.components.Cap.storePerformance',
+    defaultMessage: 'Store Performance',
+  },
+  "email": {
+    id: 'reon.components.Cap.email',
+    defaultMessage: 'Email',
+  },
+  "ebill": {
+    id: 'reon.components.Cap.ebill',
+    defaultMessage: 'Ebill',
+  },
+  "campaignsDashboard": {
+    id: 'reon.components.campaignsDashboard',
+    defaultMessage: 'Campaigns',
+  },
+  "campaignsHome": {
+    id: 'reon.components.campaignsHome',
+    defaultMessage: "Campaigns Home",
+  },
+});

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.3.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -13,6 +13,7 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "@babel/polyfill": "7.4.3",
+    "@capillarytech/cap-ui-utils": "1.0.6",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",
     "jquery": "^3.3.1",

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/Header/index.js

@@ -0,0 +1,46 @@
+/**
+*
+* Header
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+
+import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import messages from './messages';
+
+
+function Header(props) {
+  return (
+    <div>
+      <CapRow className="template-form-header">
+        <CapColumn span={10}>
+          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
+        </CapColumn>
+        <CapColumn span={2} offset={8}>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  templateNameHandler: PropTypes.func,
+  previewHandler: PropTypes.func,
+  cancelHandler: PropTypes.func,
+  saveHandler: PropTypes.func,
+  templateName: PropTypes.string,
+};
+
+export default Header;

package/v2Components/Header/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import Header from '../index';
+
+describe('<Header />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

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));