@capillarytech/creatives-library 7.6.0 → 7.6.1

package/v2Containers/Facebook/index.js

@@ -24,8 +24,7 @@ import styles, { CampaignDetailCapColumn } from './Facebook.style';
 import * as actions from './actions';
 import withStyles from '../../hoc/withStyles';
 import MarketingObjective from '../../v2Components/MarketingObjective';
-import { makeSelectMarketingObjectiveList, makeSelectFbAd, makeSelectTemplate } from './selectors';
-import Advertisement from './Advertisement';
+import { makeSelectMarketingObjectiveList } from './selectors';
 import {
   VALUE_APP_INSTALLS,
   VALUE_BRAND_AWARENESS,
@@ -150,7 +149,9 @@ const getCategorizedMarketingObjectiveList = (marketingObjectivesList, formatMes
 const Facebook = (props) => {
   const {
     className,
-    templateData,
+    templateData: {
+      selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
+    } = {},
     cap: {
       campaignDetails: {
         name: fbCampaignValue,
@@ -178,25 +179,13 @@ 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(() => {
-    if (!isFullMode) {
-      facebookActions.getMarketingObjectives();
-    } else {
-      const orgId = window.localStorage.getItem('orgID');
-      facebookActions.getOrgOUs(orgId);
-    }
+    facebookActions.getMarketingObjectives();
   }, []);
 
   const categorizedMarketingObjectiveList = getCategorizedMarketingObjectiveList(marketingObjectiveList, intl.formatMessage);
@@ -226,158 +215,141 @@ const Facebook = (props) => {
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
   return (
-   !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={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>) : <div style={{height: '1200px'}}>
-     <Advertisement
-       isFullMode={isFullMode}
-       actions={facebookActions}
-       fbADData={fbADData}
-       onCreateComplete={onCreateComplete}
-       templateData={templateData}
-       params={params}
-       facebookTemplateData={facebookTemplateData}
-     /></div>
+        <FormattedMessage {...messages.fbConfirm} />
+      </CapButton>
+    </div>
   );
 };
 
 Facebook.propTypes = {
-  className: PropTypes.string,
+  className: PropTypes.string.isRequired,
   templateData: PropTypes.object,
   cap: PropTypes.object,
   messageDetails: PropTypes.object,
-  params: PropTypes.object,
-  onFacebookSubmit: PropTypes.func,
+  onFacebookSubmit: PropTypes.func.isRequired,
   marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
-  facebookActions: PropTypes.func,
-  intl: intlShape,
-  isFullMode: PropTypes.boolean,
-  fbADData: PropTypes.object,
-  onCreateComplete: PropTypes.func,
-  facebookTemplateData: PropTypes.object,
+  facebookActions: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
 };
 
 Facebook.defaultProps = {
-  marketingObjectiveList: [""],
-
+  marketingObjectiveList: [],
 };
 
 const mapStateToProps = createStructuredSelector({
   marketingObjectiveList: makeSelectMarketingObjectiveList(),
-  fbADData: makeSelectFbAd(),
-  facebookTemplateData: makeSelectTemplate(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/Facebook/reducer.js

@@ -8,34 +8,14 @@ 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, templateType} = action;
+  const { type, payload } = action;
   switch (type) {
     case SET_MARKETING_OBJECTIVES_SUCCESS: {
       return state.set('marketinObjectivesData', payload).set('marketinObjectivesError', null);
@@ -43,80 +23,6 @@ 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 ? `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 ? `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 ? `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,21 +5,6 @@ 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() {
@@ -44,134 +29,13 @@ 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);
-    yield put({
-      type: UPLOAD_FB_AD_ASSET_SUCCESS,
-      data: result.response.asset,
-      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,11 +5,6 @@ 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
  */
@@ -23,8 +18,3 @@ export const makeSelectMarketingObjectiveList = () => createSelector(
   selectFacebookDomain(),
   (substate) => substate && substate.get('marketinObjectivesData'),
 );
-
-export const makeSelectFbAd = () => createSelector(
-  selectFacebookDomain(),
-  (substate) => substate && substate.toJS()
-);