@capillarytech/creatives-library 7.6.1 → 7.6.2

package/v2Containers/Facebook/constants.js

@@ -4,12 +4,36 @@
  *
  */
 
-const prefix = 'app/Facebook';
+const prefix = 'app/v2Containers/Facebook';
 
 export const GET_MARKETING_OBJECTIVES = `${prefix}/GET_MARKETING_OBJECTIVES`;
 export const SET_MARKETING_OBJECTIVES_SUCCESS = `${prefix}/SET_MARKETING_OBJECTIVES_SUCCESS`;
 export const SET_MARKETING_OBJECTIVES_FAILURE = `${prefix}/SET_MARKETING_OBJECTIVES_FAILURE`;
+export const UPLOAD_FB_AD_ASSET_REQUEST = `${prefix}/UPLOAD_ASSET_REQUEST`;
+export const UPLOAD_FB_AD_ASSET_SUCCESS = `${prefix}/UPLOAD_ASSET_SUCCESS`;
+export const UPLOAD_FB_AD_ASSET_FAILURE = `${prefix}/UPLOAD_ASSET_FAILURE`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_REQUEST = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_REQUEST`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_FAILURE = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_FAILURE`;
 
+
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST`;
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS`;
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE`;
+
+export const EDIT_FACEBOOK_AD_TEMPLATE_REQUEST = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_REQUEST`;
+export const EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS`;
+export const EDIT_FACEBOOK_AD_TEMPLATE_FAILURE = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_FAILURE`;
+
+export const CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST = `${prefix}/Edit/CLEAR_EDIT_RESPONSE_REQUEST`;
+export const CLEAR_FACEBOOK_AD_DATA = `${prefix}/Edit/CLEAR_DATA`;
+export const CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST = `${prefix}/Create/CLEAR_EDIT_RESPONSE_REQUEST`;
+export const CLEAR_FACEBOOK_AD_ASSET = `${prefix}/CLEAR_ASSET`;
+
+
+export const GET_ORG_OU_LIST_REQUEST = `${prefix}/GET_ORG_OU_LIST_REQUEST`;
+export const GET_ORG_OU_LIST_SUCCESS = `${prefix}/GET_ORG_OU_LIST_SUCCESS`;
+export const GET_ORG_OU_LIST_FAILURE = `${prefix}/GET_ORG_OU_LIST_FAILURE`;
 // marketing objectives constants
 
 export const VALUE_APP_INSTALLS = 'VALUE_APP_INSTALLS';

package/v2Containers/Facebook/index.js

@@ -24,7 +24,8 @@ import styles, { CampaignDetailCapColumn } from './Facebook.style';
 import * as actions from './actions';
 import withStyles from '../../hoc/withStyles';
 import MarketingObjective from '../../v2Components/MarketingObjective';
-import { makeSelectMarketingObjectiveList } from './selectors';
+import { makeSelectMarketingObjectiveList, makeSelectFbAd, makeSelectTemplate } from './selectors';
+import Advertisement from './Advertisement';
 import {
   VALUE_APP_INSTALLS,
   VALUE_BRAND_AWARENESS,
@@ -149,9 +150,7 @@ const getCategorizedMarketingObjectiveList = (marketingObjectivesList, formatMes
 const Facebook = (props) => {
   const {
     className,
-    templateData: {
-      selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
-    } = {},
+    templateData,
     cap: {
       campaignDetails: {
         name: fbCampaignValue,
@@ -179,13 +178,25 @@ const Facebook = (props) => {
     marketingObjectiveList,
     facebookActions,
     intl,
+    isFullMode,
+    fbADData,
+    onCreateComplete,
+    params,
+    facebookTemplateData,
   } = props;
-
+  const {
+    selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
+  } = templateData || {};
   const [isDrawerVisible, setDrawerVisibility] = useState(false);
   const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
 
   useEffect(() => {
-    facebookActions.getMarketingObjectives();
+    if (!isFullMode) {
+      facebookActions.getMarketingObjectives();
+    } else {
+      const orgId = window.localStorage.getItem('orgID');
+      facebookActions.getOrgOUs(orgId);
+    }
   }, []);
 
   const categorizedMarketingObjectiveList = getCategorizedMarketingObjectiveList(marketingObjectiveList, intl.formatMessage);
@@ -215,141 +226,158 @@ const Facebook = (props) => {
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
   return (
-    <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>
+   !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>
 
-          <div className="account-section-container">
-            <CapHeading type="h3">
-              <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
-            </CapHeading>
-            <CapLabel type="label1">
-              <FormattedMessage
-                {...messages.fbAdCampaignSetDetailsDescription}
+         <div className="account-section-container">
+           <CapHeading type="h3">
+             <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
+           </CapHeading>
+           <CapLabel type="label1">
+             <FormattedMessage
+               {...messages.fbAdCampaignSetDetailsDescription}
               />
-            </CapLabel>
-          </div>
+           </CapLabel>
+         </div>
 
-          <CapRow span={12} type="flex">
-            {campaignDataList.map(({ label, value, onChange }, index) => (
-              <StyledCampaignDetailCapColumn
-                span={index % 2 === 0 ? 6 : 14}
-                key={label}
+         <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}
+               <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>
+                     <FormattedMessage {...messages.fbChange} />
+                   </CapButton>
                     )}
-                  </CapHeading>
-                </CapRow>
-              </StyledCampaignDetailCapColumn>
+                 </CapHeading>
+               </CapRow>
+             </StyledCampaignDetailCapColumn>
             ))}
-          </CapRow>
-          <CapDrawer
-            content={
-              <MarketingObjective
-                selectedMarketingObjective={selectedMarketingObjective}
-                onMarketingObjectiveSelect={onMarketingObjectiveSelect}
-                defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
-                onSubmit={setDrawerVisibility}
-                marketingObjectiveList={categorizedMarketingObjectiveList}
+         </CapRow>
+         <CapDrawer
+           content={
+             <MarketingObjective
+               selectedMarketingObjective={selectedMarketingObjective}
+               onMarketingObjectiveSelect={onMarketingObjectiveSelect}
+               defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
+               onSubmit={setDrawerVisibility}
+               marketingObjectiveList={categorizedMarketingObjectiveList}
               />
             }
-            visible={isDrawerVisible}
-            width={380}
-            onClose={() => setDrawerVisibility(false)}
+           visible={isDrawerVisible}
+           width={380}
+           onClose={() => setDrawerVisibility(false)}
           />
-        </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>
+       <div className="ad-section">
+         <div className="account-section-container">
+           <CapHeading type="h3">
+             <FormattedMessage {...messages.fbAdsTitle} />
+           </CapHeading>
+           <CapLabel type="label1">
+             <FormattedMessage {...messages.fbAdsDescription} />
+           </CapLabel>
+         </div>
 
-          <div>
-            <CapRow span={12} type="flex">
-              <CapColumn span={6}>
-                <CapCustomCard
-                  type="Facebook"
-                  FBDynamicComponent={() => (
-                    <CapIcon
-                      size="l"
-                      type="scenery"
-                      className="facebook-dynamic-content"
+         <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>
+             </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={() =>
+               </ul>
+             </CapColumn>
+           </CapRow>
+         </div>
+       </div>
+     </div>
+     <CapButton
+       className="facebook-confirm-button"
+       type="primary"
+       onClick={() =>
           onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
         }
       >
-        <FormattedMessage {...messages.fbConfirm} />
-      </CapButton>
-    </div>
+       <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>
   );
 };
 
 Facebook.propTypes = {
-  className: PropTypes.string.isRequired,
+  className: PropTypes.string,
   templateData: PropTypes.object,
   cap: PropTypes.object,
   messageDetails: PropTypes.object,
-  onFacebookSubmit: PropTypes.func.isRequired,
+  params: PropTypes.object,
+  onFacebookSubmit: PropTypes.func,
   marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
-  facebookActions: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
+  facebookActions: PropTypes.func,
+  intl: intlShape,
+  isFullMode: PropTypes.boolean,
+  fbADData: PropTypes.object,
+  onCreateComplete: PropTypes.func,
+  facebookTemplateData: PropTypes.object,
 };
 
 Facebook.defaultProps = {
-  marketingObjectiveList: [],
+  marketingObjectiveList: [""],
+
 };
 
 const mapStateToProps = createStructuredSelector({
   marketingObjectiveList: makeSelectMarketingObjectiveList(),
+  fbADData: makeSelectFbAd(),
+  facebookTemplateData: makeSelectTemplate(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/Facebook/reducer.js

@@ -8,14 +8,34 @@ import { fromJS } from 'immutable';
 import {
   SET_MARKETING_OBJECTIVES_SUCCESS,
   SET_MARKETING_OBJECTIVES_FAILURE,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  UPLOAD_FB_AD_ASSET_SUCCESS,
+  UPLOAD_FB_AD_ASSET_FAILURE,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS,
+  CREATE_FACEBOOK_AD_TEMPLATE_FAILURE,
+  CLEAR_FACEBOOK_AD_ASSET,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS,
+  EDIT_FACEBOOK_AD_TEMPLATE_FAILURE,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE,
+  CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_DATA,
+  GET_ORG_OU_LIST_REQUEST,
+  GET_ORG_OU_LIST_FAILURE,
+  GET_ORG_OU_LIST_SUCCESS,
 } from './constants';
 
 export const initialState = fromJS({
   marketinObjectives: {},
+  uploadedAssetData: {},
 });
 
 function facebookReducer(state = initialState, action) {
-  const { type, payload } = action;
+  const { type, payload, templateType} = action;
   switch (type) {
     case SET_MARKETING_OBJECTIVES_SUCCESS: {
       return state.set('marketinObjectivesData', payload).set('marketinObjectivesError', null);
@@ -23,6 +43,83 @@ function facebookReducer(state = initialState, action) {
     case SET_MARKETING_OBJECTIVES_FAILURE: {
       return state.set('marketinObjectivesData', []).set('marketinObjectivesError', payload);
     }
+    case UPLOAD_FB_AD_ASSET_REQUEST:
+      return state
+              .set('uploadAssetSuccess', false)
+              .set(templateType !== undefined ? `uploadAssetError${templateType}` : 'uploadAssetError', false, )
+              .set(templateType !== undefined ? `assetUploading${templateType}` : 'assetUploading', true);
+    case UPLOAD_FB_AD_ASSET_SUCCESS:
+      return state
+              .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
+              .set(templateType !== undefined ? `uploadAssetError${templateType}` : 'uploadAssetError', false, )
+              .set(templateType !== undefined ? `assetUploading${templateType}` : 'assetUploading', false)
+              .set(templateType !== undefined ? `uploadedAssetData${templateType}` : 'uploadedAssetData', action.data);
+    case UPLOAD_FB_AD_ASSET_FAILURE:
+      return state
+              .set('uploadAssetSuccess', false)
+              .set(templateType !== undefined ? `uploadAssetError${templateType}` : 'uploadAssetError', true, )
+              .set(templateType !== undefined ? `assetUploading${templateType}` : 'assetUploading', false);
+    case CREATE_FACEBOOK_AD_TEMPLATE_REQUEST:
+      return state
+              .set('createTemplateInProgress', true)
+              .set('createTemplateError', false)
+              .set('createTemplateErrorMessage', fromJS(""));
+    case CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS:
+      return state.set('createTemplateInProgress', false)
+              .set('response', action.data)
+              .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+              .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case CREATE_FACEBOOK_AD_TEMPLATE_FAILURE:
+      return state
+              .set('createTemplateInProgress', false)
+              .set('createTemplateError', true)
+              .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case CLEAR_FACEBOOK_AD_ASSET:
+      return state
+                .delete(templateType !== undefined ? `uploadedAssetData${templateType}` : 'uploadedAssetData');
+            // FOR EDIT
+    case EDIT_FACEBOOK_AD_TEMPLATE_REQUEST:
+      return state
+              .set('editTemplateInProgress', true)
+              .set('editTemplateError', false)
+              .set('editTemplateErrorMessage', fromJS(""));
+    case EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS:
+      return state.set('editTemplateInProgress', false)
+                .set('editResponse', action.data)
+                .set('editTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+                .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case EDIT_FACEBOOK_AD_TEMPLATE_FAILURE:
+      return state
+                .set('editTemplateInProgress', false)
+                .set('editTemplateError', true)
+                .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS:
+      return state.set('getTemplateDetailsInProgress', false)
+                .set('templateDetails', action.data);
+    case GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE:
+    case CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST:
+      return state.set('editResponse', {});
+    case CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    case CLEAR_FACEBOOK_AD_DATA:
+      return state
+                .delete('uploadedAssetData')
+                .delete('metaEntities')
+                .delete('templateDetails');
+    case GET_ORG_OU_LIST_REQUEST: {
+      return state.set('orgOuData', fromJS({ status: 'REQUEST' }));
+    }
+    case GET_ORG_OU_LIST_SUCCESS: {
+      return state.set(
+        'orgOuData',
+        fromJS({ status: 'SUCCESS', data: action.payload }),
+      );
+    }
+    case GET_ORG_OU_LIST_FAILURE: {
+      return state.set('orgOuData', fromJS({ status: 'FAILURE' }));
+    }
     default:
       return state;
   }

package/v2Containers/Facebook/sagas.js

@@ -5,6 +5,21 @@ import {
   GET_MARKETING_OBJECTIVES,
   SET_MARKETING_OBJECTIVES_SUCCESS,
   SET_MARKETING_OBJECTIVES_FAILURE,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  UPLOAD_FB_AD_ASSET_SUCCESS,
+  UPLOAD_FB_AD_ASSET_FAILURE,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS,
+  CREATE_FACEBOOK_AD_TEMPLATE_FAILURE,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_TEMPLATE_FACEBOOK_AD_SUCCESS,
+  EDIT_FACEBOOK_AD_TEMPLATE_FAILURE,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE,
+  GET_ORG_OU_LIST_FAILURE,
+  GET_ORG_OU_LIST_SUCCESS,
+  GET_ORG_OU_LIST_REQUEST,
 } from './constants';
 
 export function* fetchMarketingObjectives() {
@@ -29,13 +44,145 @@ export function* fetchMarketingObjectives() {
     });
   }
 }
+export function* getOrgOUs({ orgID } = {}) {
+  try {
+    const apiResponse = yield call(Api.getOrgOUs, { orgID });
+    if (apiResponse.status === 200) {
+      yield put({
+        type: GET_ORG_OU_LIST_SUCCESS,
+        payload: apiResponse.result,
+      });
+    } else {
+      yield put({
+        type: GET_ORG_OU_LIST_FAILURE,
+        payload: apiResponse,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: GET_ORG_OU_LIST_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+export function* uploadFbAdAsset(file, assetType, fileParams) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    let videoIdResponse = {};
+    if (file.assetType === 'video' && (result.status.code >= 200 && result.status.code < 300)) {
+      const {accessToken, actId, pageAccessToken, pageId} = file.videoData;
+      videoIdResponse = yield call(Api.getFacebookVideoId, {videoUrl: result.response.asset.metaInfo.secure_file_path, accessToken, actId, pageAccessToken, pageId});
+    }
+    if (result.status.isError) {
+      yield put({ type: UPLOAD_FB_AD_ASSET_FAILURE, error: result.status.message });
+    } else if (videoIdResponse.status?.isError) {
+      yield put({ type: UPLOAD_FB_AD_ASSET_FAILURE, error: result.status });
+    } else {
+      yield put({
+        type: UPLOAD_FB_AD_ASSET_SUCCESS,
+        data: {...result.response.asset, videoIdResponse: videoIdResponse.response},
+        statusCode: result.status ? result.status.code : '',
+        templateType: file.templateType,
+      });
+    }
+  } catch (error) {
+    yield put({ type: UPLOAD_FB_AD_ASSET_FAILURE, error });
+  }
+}
+export function* createFacebookADTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createFacebookADTemplate, { template });
+    if (result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    yield put({ type: CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: CREATE_FACEBOOK_AD_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+
+export function* editTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createFacebookADTemplate, {template});
+    if (result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    if (callback) {
+      callback(result.response);
+    }
+    yield put({ type: EDIT_TEMPLATE_FACEBOOK_AD_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+  } catch (error) {
+    yield put({ type: EDIT_FACEBOOK_AD_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+export function* getTemplateDetails({id, callback}) {
+  try {
+    const result = yield call(Api.getTemplateDetails, {id, channel: 'FACEBOOK'});
+    yield put({ type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS, data: result.response });
+    if (callback) {
+      callback(false);
+    }
+  } catch (error) {
+    yield put({ type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+
+function* watchCreateTemplate() {
+  const watcher = yield takeLatest(CREATE_FACEBOOK_AD_TEMPLATE_REQUEST, createFacebookADTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchEditTemplate() {
+  const watcher = yield takeLatest(EDIT_FACEBOOK_AD_TEMPLATE_REQUEST, editTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
 
 function* watchFetchMarketingObjective() {
   const watcher = yield takeLatest(GET_MARKETING_OBJECTIVES, fetchMarketingObjectives);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);
 }
+function* watchUploadFbADAsset() {
+  const watcher = yield takeLatest(UPLOAD_FB_AD_ASSET_REQUEST, uploadFbAdAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+export function* watchGetOrgOUs() {
+  yield takeLatest(GET_ORG_OU_LIST_REQUEST, getOrgOUs);
+}
 
 export default [
   watchFetchMarketingObjective,
+  watchUploadFbADAsset,
+  watchEditTemplate,
+  watchGetTemplateDetails,
+  watchCreateTemplate,
+  watchGetOrgOUs,
 ];
+

package/v2Containers/Facebook/selectors.js

@@ -5,6 +5,11 @@ import { createSelector } from 'reselect';
  */
 const selectFacebookDomain = () => (state) => state.get('facebook');
 
+const selectTemplateDomain = () => (state) => state.get('templates');
+export const makeSelectTemplate = () => createSelector(
+  selectTemplateDomain(),
+  (substate) => substate && substate.toJS()
+);
 /**
  * Other specific selectors
  */
@@ -18,3 +23,8 @@ export const makeSelectMarketingObjectiveList = () => createSelector(
   selectFacebookDomain(),
   (substate) => substate && substate.get('marketinObjectivesData'),
 );
+
+export const makeSelectFbAd = () => createSelector(
+  selectFacebookDomain(),
+  (substate) => substate && substate.toJS()
+);

package/v2Containers/LanguageProvider/actions.js

@@ -7,7 +7,7 @@
 import * as types from './constants';
 
 export function changeLocale(languageLocale) {
-  console.log('trying to change locale', languageLocale);
+  
   return {
     type: types.CHANGE_LOCALE,
     locale: languageLocale,