@capillarytech/creatives-library 3.3.1 → 3.4.0

package/v2Containers/Facebook/sagas.js

@@ -0,0 +1,41 @@
+import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import {
+  GET_MARKETING_OBJECTIVES,
+  SET_MARKETING_OBJECTIVES_SUCCESS,
+  SET_MARKETING_OBJECTIVES_FAILURE,
+} from './constants';
+
+export function* fetchMarketingObjectives() {
+  try {
+    const response = yield call(Api.getMarketingObjectives, 'FACEBOOK');
+    const { errors, data } = response;
+    if (errors && errors.length) {
+      yield put({
+        type: SET_MARKETING_OBJECTIVES_FAILURE,
+        payload: errors,
+      });
+    } else {
+      yield put({
+        type: SET_MARKETING_OBJECTIVES_SUCCESS,
+        payload: data,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: SET_MARKETING_OBJECTIVES_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+function* watchFetchMarketingObjective() {
+  const watcher = yield takeLatest(GET_MARKETING_OBJECTIVES, fetchMarketingObjectives);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+export default [
+  watchFetchMarketingObjective,
+];

package/v2Containers/Facebook/selectors.js

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the facebook state domain
+ */
+const selectFacebookDomain = () => (state) => state.get('facebook');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by Facebook
+ */
+
+export const makeSelectMarketingObjectiveList = () => createSelector(
+  selectFacebookDomain(),
+  (substate) => substate && substate.get('marketinObjectivesData'),
+);

package/v2Containers/TemplatesV2/index.js

@@ -21,6 +21,7 @@ import messages from './messages';
 import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
+import Facebook from '../Facebook';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
@@ -33,32 +34,44 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   constructor(props) {
     super(props);
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    const {
+      intl,
+      channelsToHide = [],
+      channelsToDisable = [],
+      isFullMode,
+      onChannelChange,
+    } = props;
+
     const defaultPanes = {
-      sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
-      email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
-      weChat: {content: <div></div>, tab: props.intl.formatMessage(messages.wechat), key: 'wechat'},
+      sms: {content: <div></div>, tab: intl.formatMessage(messages.sms), key: 'sms'},
+      email: {content: <div></div>, tab: intl.formatMessage(messages.email), key: 'email'},
+      weChat: {content: <div></div>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      mPush: {content: <div></div>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
-    const channelsToHide = this.props.channelsToHide || [];
-    const channelsToDisable = this.props.channelsToDisable || [];
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
       }, []);
 
-    if (props.isFullMode ) {
-      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.gallery), key: 'assets'});
-    } else if (!channelsToHide.includes('callTask')) {
-      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
+    if (isFullMode ) {
+      filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets'});
+    } else {
+      if (!channelsToHide.includes('callTask')) {
+        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.callTask), key: 'call_task'});
+      }
+      if (!channelsToHide.includes('facebook')) {
+        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'});
+      }
     }
 
     filteredPanes = filteredPanes.map( (pane) => {
       if (channelsToDisable.includes(pane.key)) {
+        // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
       }
-    return pane;
+      return pane;
     });
 
     const channel = ['sms', 'email', 'mobilepush', 'call_task'];
@@ -78,7 +91,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       selectedChannel: defaultChannel,
       panes,
     };
-    !props.isFullMode && this.props.onChannelChange(defaultChannel);
+    if (!isFullMode) {
+      onChannelChange(defaultChannel);
+    }
   }
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
@@ -122,6 +137,17 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     />
   );
 
+  getFacebookComponent = () => {
+    const { messageDetails, cap, onFacebookSubmit } = this.props;
+    return (
+      <Facebook
+        messageDetails={messageDetails}
+        cap={cap}
+        onFacebookSubmit={onFacebookSubmit}
+      />
+    );
+  }
+
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
@@ -134,6 +160,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         return this.getCallTaskComponent();
       case 'assets':
         return this.getGalleryComponent(location);
+      case 'facebook':
+        return this.getFacebookComponent();
       default:
         return (<Templates
           key={channel}
@@ -182,16 +210,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <div className="component-wrapper">
-          {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <StyledCapTab
-            panes={this.state.panes}
-            onChange={this.channelChange}
-            activeKey={this.state.selectedChannel}
-            defaultActiveKey={this.state.selectedChannel}
-            isFullMode={isFullMode}
-          />
-        </div>
+          <div className="component-wrapper">
+            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
+              <StyledCapTab
+                panes={this.state.panes}
+                onChange={this.channelChange}
+                activeKey={this.state.selectedChannel}
+                defaultActiveKey={this.state.selectedChannel}
+                isFullMode={isFullMode}
+              />
+          </div>
       </div>
 
     );
@@ -213,6 +241,9 @@ TemplatesV2.propTypes = {
   channelsToHide: PropTypes.array,
   className: PropTypes.string.isRequired,
   channelsToDisable: PropTypes.array,
+  onFacebookSubmit: PropTypes.func,
+  messageDetails: PropTypes.object,
+  cap: PropTypes.object,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/messages.js

@@ -42,6 +42,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.callTask',
     defaultMessage: 'Call Task',
   },
+  facebook: {
+    id: 'creatives.containersV2.TemplatesV2.facebook',
+    defaultMessage: 'Facebook',
+  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',