@capillarytech/creatives-library 7.6.1 → 7.6.2

package/v2Containers/CreativesContainer/index.js

@@ -51,6 +51,7 @@ class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
+
     };
     this.creativesTemplateSteps = {
       1: 'modeSelection',
@@ -104,7 +105,6 @@ class Creatives extends React.Component {
       if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH || currentChannel.toUpperCase() === constants.WECHAT) {
         templateStep = prevState.templateStep + 2;
       }
-
       return {
         templateStep,
       };
@@ -114,6 +114,8 @@ class Creatives extends React.Component {
   onEmailModeChange = (mode) => {
     this.setState({ emailCreateMode: mode});
   }
+
+
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode});
   }
@@ -479,17 +481,19 @@ class Creatives extends React.Component {
       showFooter = true;
     }
 
-
     if (showFooter) {
-      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection') || (channel === constants.WECHAT && currentStep === 'modeSelection'))) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
+       ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
-      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection') || (channel === constants.WECHAT && currentStep === 'modeSelection'))) {
+      } else if (slidBoxContent === "editTemplate" &&
+      ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel) &&
+      currentStep === 'modeSelection')) {
         showFooter = showFooter && !this.state.isLoadingContent;
       }
     }
 
     const isLineViberChannel = templateData && [constants.LINE, constants.VIBER].includes(templateData);
-    if ([constants.LINE, constants.VIBER].includes(channel) || isLineViberChannel) {
+    if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
 
@@ -573,6 +577,13 @@ class Creatives extends React.Component {
     }
     return false;
   }
+  shouldShowHeader = () => {
+    const {currentChannel} = this.state;
+    if (currentChannel === constants.FACEBOOK) {
+      return false;
+    }
+    return true;
+  }
   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, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor} = this.props;
@@ -582,7 +593,7 @@ class Creatives extends React.Component {
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
           header={
-            <SlideBoxHeader
+            this.shouldShowHeader() && <SlideBoxHeader
               key="creatives-container-slidebox-header"
               channel={currentChannel}
               messages={this.props.messages}
@@ -599,8 +610,7 @@ class Creatives extends React.Component {
               weChatTemplateType={weChatTemplateType}
               showPrefix={!isUploading} // not show back button when email template is being uploaded
               templateStep={this.creativesTemplateSteps[templateStep]}
-            />
-          }
+            />}
           content={
             <SlideBoxContent
               key="creatives-container-slidebox-content"
@@ -609,6 +619,7 @@ class Creatives extends React.Component {
               onPreviewTemplate={this.onPreviewTemplate}
               slidBoxContent={slidBoxContent}
               templateData={templateData}
+              campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
               getFormData={this.getFormData}

package/v2Containers/Ebill/actions.js

@@ -14,7 +14,7 @@ export function createTemplate(template) {
 }
 
 export function getTemplateDetails(id, channel) {
-  console.log('getting template', id, channel);
+  
   return {
     type: types.GET_TEMPLATE_DETAILS_REQUEST,
     id,

package/v2Containers/Ebill/index.js

@@ -585,13 +585,13 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       type: 'LAYOUT',
     };
     this.props.globalActions.fetchSchemaForEntity(query);
-    console.log('Form Data After 2', this.state.formData, this.props.Ebill.cmsData);
+    
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      console.log('isTagLoaded', this.isTagLoaded);
+      
       const query = {
         layout: 'EBILL',
         type: 'TAG',
@@ -627,18 +627,18 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       this.props.globalActions.addMessageToQueue(message);
     }
 
-    console.log('Form Data After ', nextProps.Ebill.cmsData, this.props.Ebill.cmsData);
+    
     if (nextProps.Ebill.cmsData !== '' && !_.isEqual(nextProps.Ebill.cmsData, this.props.Ebill.cmsData)) {
       const formData = _.cloneDeep(this.state.formData);
       formData[this.state.currentTab - 1][`ebill-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] = nextProps.Ebill.cmsData.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, "\"");
-      console.log('Manoj Form Data After 21', formData);
+      
       this.setState({formData});
     }
 
     if (nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && this.state.formData[this.state.currentTab - 1] && this.state.formData[this.state.currentTab - 1][`ebill-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] !== '') {
       const formData = _.cloneDeep(this.state.formData);
       formData[this.state.currentTab - 1][`ebill-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] = nextProps.Templates.selectedEmailLayout;
-      console.log('Manoj Form Data After 01', formData);
+      
       this.setState({formData});
     }
 
@@ -654,7 +654,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   }
 
   onTagSelect = (data, currentTab, value) => {
-    console.log('On Tag selection ', data, currentTab, value);
+    
     if (this.state.isDragDrop) {
       const msg = {
         action: "InsertToCursor",
@@ -669,12 +669,12 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   };
 
   onTabChange = (data, formData) => {
-    console.log('inside parent ontabchange', data, this.state);
+    
     this.setState({currentTab: data, formData});
   };
 
   onFormDataChange = (formData, tabCount, currentTab) => {
-    console.log('Form data changed is ', formData, tabCount, currentTab);
+    
     const tmpFormData = _.cloneDeep(formData);
     if (this.props.Templates.selectedEmailLayout !== '' && tmpFormData['0']['ebill-editor'] === '') {
       tmpFormData['0']['ebill-editor'] = this.props.Templates.selectedEmailLayout;
@@ -687,18 +687,18 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   };
 
   onTagSelect = (data, currentTab) => {
-    console.log('parent data tag', data, currentTab);
+    
     const editorId = currentTab > 1 ? `ebill-editor${currentTab}` : 'ebill-editor';
     this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   };
 
   onTemplateNameChange = (name) => {
-    console.log('Template name changed to ', name);
+    
   };
 
   onTemplateContentChange = (content) => {
-    console.log('Template content changed to ', content);
+    
   };
 
   setEditState = (data) => {
@@ -719,7 +719,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       }
       if (type === 'embedded' || count > 0) {
         setTimeout( () => {
-          console.log('removing standalone');
+          
           if (type === 'embedded') {
             that.removeStandAlone();
           } else {
@@ -735,13 +735,13 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       formData[0].base = true;
     }
     formData.base = data.versions.base;
-    console.log('form data after discarding ', formData);
+    
     this.setState({tabCount, formData, editData: data, currentTab: 1}, () => {
     });
   };
 
   getMappedEvent = (id, event) => {
-    console.log('Map ', this.map, id, event);
+    
     return this.map[id][event];
   };
 
@@ -769,11 +769,11 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   saveFormData = (formData) => {
     //Logic to save in db etc
     // const isValidated = this.validateFormData(formData);
-    // console.log('whyyyy');
+    // 
     // if (!isValidated) {
     //   return;
     // }
-    console.log('Saving form data', formData, this.state.tabCount);
+    
     const obj = {};
     obj.versions = {
       base: {},
@@ -790,11 +790,11 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
     });
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
-    console.log('HTML file ', obj.versions.history);
+    
     _.forEach(obj.versions.history, (index, version) => {
-      console.log('Encoding ', index, version);
+      
     });
-    console.log('obj', obj);
+    
     this.props.actions.createTemplate(obj);
   };
 
@@ -811,17 +811,17 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       }
     }
     if (isValid) {
-      console.log('isValid');
+      
       return true;
     }
     const message = getMessageObject('error', this.props.intl.formatMessage(messages.templateDataNotValid), true);
     this.props.globalActions.addMessageToQueue(message);
-    console.log('not valid');
+    
     return false;
   };
 
   handleOnTagsContextChange = (data) => {
-    console.log('parent tags context', data);
+    
     const query = {
       layout: 'EBILL',
       type: 'TAG',
@@ -905,7 +905,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
 
 
   injectEvents(schema) {
-    console.log('now injecting events', schema);
+    
     const temp = schema;
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
@@ -913,7 +913,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    console.log('final injected schema', schema);
+    
     this.setState({schema}, () => {
       const type = this.props.location.query.type;
       if (type === 'embedded') {
@@ -955,7 +955,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
           console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-        console.log('should translate multicol', temp);
+        
         if (temp.type === 'icon') {
           return true;
         }
@@ -986,7 +986,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-        console.log('should translate multicol action', temp);
+        
         if (temp.type === 'icon') {
           return true;
         }
@@ -1020,7 +1020,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       _.forEach(inputField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
       });
-      console.log('should translate collabel', temp);
+      
       if (temp.type === 'icon') {
         return true;
       }
@@ -1049,7 +1049,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       _.forEach(actionField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
       });
-      console.log('should translate collabel action', temp);
+      
       if (temp.type === 'icon') {
         return true;
       }
@@ -1099,7 +1099,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   }
 
   cloneColLabel(sectionObj, tabIndex) {
-    console.log('cloning cloneColLabel', sectionObj, tabIndex);
+    
     const section = _.cloneDeep(sectionObj);
     const inputFields = _.forEach(section.inputFields, (inputField) => {
       const inputF = inputField;
@@ -1108,12 +1108,12 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       return inputF;
     });
     section.inputFields = inputFields;
-    console.log('cloned ifs are', section);
+    
     return section;
   }
 
   cloneMultiCol(sectionObj, tabIndex) {
-    console.log('cloning multicol ', sectionObj, tabIndex);
+    
     const section = _.cloneDeep(sectionObj);
     const inputFields = _.forEach(section.inputFields, (inputField) => {
       const inputF = inputField;
@@ -1127,7 +1127,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       return inputF;
     });
     section.inputFields = inputFields;
-    console.log('cloned cols are', section);
+    
     return section;
   }
 
@@ -1145,13 +1145,13 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       } else if (childSection.type === 'parent') {
         sect = this.cloneParent(childSection, tabIndex);
       }
-      console.log('returning cloned parent section', sect);
+      
       childSections.push(sect);
       return true;
     });
     console.log('returning cloned parent section final 1', JSON.stringify(childSections));
     parentsect.childSections = childSections;
-    console.log('returning cloned parent section final', parentsect);
+    
     return _.cloneDeep(parentsect);
   }
 

package/v2Containers/Ebill/sagas.js

@@ -7,7 +7,7 @@ import * as types from './constants';
 export function* createTemplate(template) {
   let errorMsg = "";
   try {
-    console.log('Template data ', template);
+    
     const result = yield call(Api.createEbillTemplate, template);
     if ((result.message && typeof result.message === 'string') || result.status.code === 500) {
       errorMsg = result.message;
@@ -20,7 +20,7 @@ export function* createTemplate(template) {
 
 export function* getTemplateDetails(id, channel) {
   try {
-    console.log('saga get Template details', id);
+    
     const result = yield call(Api.getTemplateDetails, id, channel);
     // const sidebar = result.response.sidebar;
     yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
@@ -32,7 +32,7 @@ export function* getTemplateDetails(id, channel) {
 export function* getCmsData({cmsType, projectId}) {
   try {
     const result = yield call(Api.getCmsData, cmsType, projectId);
-    console.log('CMS Data ', result);
+    
     yield put({ type: types.GET_CMS_EDITOR_DATA_SUCCESS, data: decodeURIComponent(result.data.response.cmsData.htmlContent) });
   } catch (error) {
     yield put({ type: types.GET_CMS_EDITOR_DATA_FAILURE, error });

package/v2Containers/Email/reducer.js

@@ -14,7 +14,7 @@ const initialState = fromJS({
 });
 
 function emailReducer(state = initialState, action) {
-  //console.log('email reducer', action);
+  //
   switch (action.type) {
     case types.CREATE_TEMPLATE_REQUEST:
       return state

package/v2Containers/EmailWrapper/index.js

@@ -132,9 +132,9 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
 
       if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
-        templatesActions.handleZipUpload(file, () => { //handle upload success
+        templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
           this.setState({ modeContent: { file } }, showNextStep);
-          this.stopTimerGA();
+          stopTimerGA();
         }, this.handleZipUploadError);
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();
@@ -145,7 +145,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
           });
           // showNextStep();
         };
-        reader.readAsText(file);
+        reader.readAsText(file.originFileObj);
       } else {
         const message = {
           key: "email-upload-error",
@@ -229,7 +229,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
               <div>
                 {emailCreateMode === "upload" &&
                   <div style={{ marginLeft: '8px' }}>
-                    <CapUploader customRequest={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+                    <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
                       <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
                     </CapUploader>
                     {!_.isEmpty(EmailLayout) &&

package/v2Containers/Facebook/Advertisement/index.js

@@ -54,7 +54,7 @@ import {
   IMAGE_VIDEO,
   NO_CALL_TO_ACTION,
 } from './constant';
-
+import cloneDeep from 'lodash/cloneDeep';
 export const Advertisement = (props) => {
   const CarouselContainer = styled.div`
     width: ${(styledProps) => styledProps.width || '22px'};
@@ -122,11 +122,28 @@ export const Advertisement = (props) => {
     type,
     fileParams,
     indexFile) => {
+    let videoData = {};
+    if (type === 'video') {
+      const {
+        orgUnitFacebookPageSettingsMap = {},
+        employeeAccessToken: accessToken = "",
+        accountId = "",
+       } = selectedFacebookAccount;
+      const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
+      videoData = {
+        accessToken,
+        actId: accountId,
+        pageAccessToken,
+        pageId: pId,
+      };
+    }
     actions.uploadFbAdAsset(file,
         type,
         fileParams,
-        indexFile);
-  }, []);
+        indexFile,
+        videoData,
+        );
+  }, [pageId]);
 
   const paramObj = params || {};
 
@@ -142,7 +159,7 @@ export const Advertisement = (props) => {
 
   useEffect(() => {
     if ((params && params.id) || (templateData || {}).edit) {
-      const { FacebookAd = [], pageId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
+      const { FacebookAd = [], pageOrgUnitId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(fbADData, 'templateDetails.name');
       const editFBContent = Object.values(FacebookAd);
       if (editPageId) {
@@ -182,6 +199,7 @@ export const Advertisement = (props) => {
               videoName,
               videoHeight,
               videoWidth,
+              videoId,
             } = obj.video;
             data.videoData = {
               videoSrc,
@@ -189,6 +207,7 @@ export const Advertisement = (props) => {
               videoHeight,
               videoWidth,
               previewUrl,
+              videoId,
             };
           }
           newCarouselData[index] = {...defaultCarouselContent, ...data};
@@ -248,14 +267,16 @@ export const Advertisement = (props) => {
   }, [selectedAd]);
 
   const updateOnImageReUpload = useCallback(() => {
-    const newCarouselData = [...carouselData];
+    const newCarouselData = cloneDeep(carouselData);
     newCarouselData[activeIndex].imageData.imageSrc = '';
     updateCarouselData(newCarouselData);
   }, [carouselData, activeIndex]);
 
   const setUpdateImageSrc = useCallback((val) => {
-    const newCarouselData = [...carouselData];
-    newCarouselData[activeIndex].imageData.imageSrc = val;
+    const newCarouselData = cloneDeep(carouselData);
+    newCarouselData[activeIndex].imageData = {
+      imageSrc: val,
+    };
     updateCarouselData(newCarouselData);
     actions.clearFbAdAsset(activeIndex);
   }, [carouselData, activeIndex]);
@@ -314,6 +335,7 @@ export const Advertisement = (props) => {
           videoHeight,
           videoWidth,
           previewUrl,
+          videoId,
         } = obj.videoData;
         data.video = {
           previewImageUrl: previewUrl,
@@ -322,6 +344,7 @@ export const Advertisement = (props) => {
           baseUrl: previewUrl.replace('/1040', ''),
           videoHeight,
           videoWidth,
+          videoId,
         };
       }
       messageData.push(data);
@@ -332,7 +355,7 @@ export const Advertisement = (props) => {
         base: {
           content: {
             FacebookAd: {...messageData},
-            pageId,
+            pageOrgUnitId: pageId,
           },
         },
       },
@@ -780,7 +803,7 @@ export const Advertisement = (props) => {
   }, [pageId]);
 
   const selectedFacebookAccount = get(facebookTemplateData, 'selectedFacebookAccount', {});
-  const {orgUnitFacebookPageSettingsMap = {}, accessToken = "", accountId = "" } = selectedFacebookAccount;
+  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
 
   const getPageAccessOrgs = useCallback(() => {
     const {status, data } = fbADData.orgOuData || {};
@@ -865,17 +888,17 @@ export const Advertisement = (props) => {
                 >
                  {editNameState ? <CapInput
                    type="input"
-                   style={{display: 'inline-block'}}
+                   className="cap-input-edit-name"
                    onBlur={onEditFocusOut}
                    defaultValue={messageTitle || ''}
                    /> : messageTitle
                   }
-                 {!editNameState && <CapLink
-                   style={{display: "inline-flex"}}
-                   title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
-                   onClick={onClickEditName}
-                  />}
                </CapHeading>
+               {!editNameState && <CapLink
+                 className="cap-link-edit-name"
+                 title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
+                 onClick={onClickEditName}
+                  />}
              </div>
              <CapColumn span={12}>
                {isFullMode && <><CapHeading

package/v2Containers/Facebook/Advertisement/index.scss

@@ -18,7 +18,16 @@ $classPrefix: add-facebook-ad-section;
         white-space: nowrap;
         min-width: 112px;
         max-width: 920px;
+        display: inline-block;
     }
+    .cap-input-edit-name{
+        width: 500px;
+    }
+    .cap-link-edit-name{
+        display: inline-block;
+        margin-bottom: 4px;
+    }
+
     .cap-header-facebook-ad{
         position: fixed;
         top: 27px;

package/v2Containers/Facebook/Advertisement/messages.js

@@ -17,7 +17,7 @@ export default defineMessages({
   },
   imageVideoDesc: {
     id: `${messagePrefix}.imageVideoDesc`,
-    defaultMessage: 'Create an Ad with one image or video, or a slideshow with multiple images',
+    defaultMessage: 'Create an Ad with one image or video',
   },
   carouselTitle: {
     id: `${messagePrefix}.carouselTitle`,
@@ -93,7 +93,7 @@ export default defineMessages({
   },
   video_slideshow: {
     id: `${messagePrefix}.video_slideshow`,
-    defaultMessage: 'Video/Slideshow',
+    defaultMessage: 'Video',
   },
   doneButtonLabel: {
     id: `${messagePrefix}.doneButtonLabel`,

package/v2Containers/Facebook/actions.js

@@ -6,8 +6,71 @@
 
 import {
   GET_MARKETING_OBJECTIVES,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  CLEAR_FACEBOOK_AD_ASSET,
+  CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_DATA,
+  CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+  GET_ORG_OU_LIST_REQUEST,
 } from './constants';
 
 export const getMarketingObjectives = () => ({
   type: GET_MARKETING_OBJECTIVES,
 });
+
+export const uploadFbAdAsset = (file, assetType, fileParams, templateType, videoData) => ({
+  type: UPLOAD_FB_AD_ASSET_REQUEST,
+  file,
+  assetType,
+  fileParams,
+  templateType,
+  videoData,
+});
+
+export const createTemplate = (template, callback) => ({
+  type: CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  template,
+  callback,
+});
+
+export const getOrgOUs = (orgID) => ({
+  type: GET_ORG_OU_LIST_REQUEST,
+  orgID,
+});
+
+// FOR EDIT
+
+export const editTemplate = (template, callback) => ({
+  type: EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  template,
+  callback,
+});
+
+export const getTemplateDetails = (id, callback) => ({
+  type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  id,
+  channel: 'FACEBOOK',
+  callback,
+});
+
+export const clearData = () => ({
+  type: CLEAR_FACEBOOK_AD_DATA,
+});
+
+export const clearEditResponse = () => ({
+  type: CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+});
+
+
+export const clearCreateResponse = () => ({
+  type: CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+});
+
+export const clearFbAdAsset = (templateType) => ({
+  type: CLEAR_FACEBOOK_AD_ASSET,
+  templateType,
+});
+