@capillarytech/creatives-library 3.4.3 → 3.4.5

package/v2Containers/Facebook/index.js

@@ -1,358 +0,0 @@
-/*
- *
- * Facebook
- *
- */
-import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
-import { injectIntl, FormattedMessage, intlShape } from "react-intl";
-import {
-  CapHeading,
-  CapLabel,
-  CapRow,
-  CapColumn,
-  CapButton,
-  CapDrawer,
-  CapCustomCard,
-  CapIcon,
-} from '@capillarytech/cap-ui-library';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import messages from "./messages";
-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 {
-  VALUE_APP_INSTALLS,
-  VALUE_BRAND_AWARENESS,
-  VALUE_CONVERSIONS,
-  VALUE_LEAD_GENERATION,
-  VALUE_LOCAL_AWARENESS,
-  VALUE_MESSAGES,
-  VALUE_POST_ENGAGEMENT,
-  VALUE_PRODUCT_CATALOG_SALES,
-  VALUE_REACH,
-  VALUE_VIDEO_VIEWS,
-  VALUE_LINK_CLICKS,
-} from './constants';
-
-const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
-
-const panesMapList = {
-  [VALUE_APP_INSTALLS]: 'fbMarketingObjectiveAppInstallTitle',
-  [VALUE_BRAND_AWARENESS]: 'fbMarketingObjectiveBrandAwarenessTitle',
-  [VALUE_CONVERSIONS]: 'fbMarketingObjectiveConversionsTitle',
-  [VALUE_LEAD_GENERATION]: 'fbMarketingObjectiveLeadGenerationTitle',
-  [VALUE_LOCAL_AWARENESS]: 'fbMarketingObjectiveStoreTrafficTitle',
-  [VALUE_MESSAGES]: 'fbMarketingObjectiveMessagesTitle',
-  [VALUE_POST_ENGAGEMENT]: 'fbMarketingObjectiveEngagementTitle',
-  [VALUE_PRODUCT_CATALOG_SALES]: 'fbMarketingObjectiveCatalogSalesTitle',
-  [VALUE_REACH]: 'fbMarketingObjectiveReachTitle',
-  [VALUE_VIDEO_VIEWS]: 'fbMarketingObjectiveVideoViewsTitle',
-  [VALUE_LINK_CLICKS]: 'fbMarketingObjectiveTrafficTitle',
-};
-
-const getCategorizedMarketingObjectiveList = (marketingObjectivesList, formatMessage) => {
-  const marketingObjectives = [
-    {
-      label: formatMessage(messages.fbMarketingObjectiveAwareness),
-      panes: [
-        {
-          title: formatMessage(messages.fbMarketingObjectiveBrandAwarenessTitle),
-          content: formatMessage(messages.fbMarketingObjectiveBrandAwarenessDescription),
-          value: VALUE_BRAND_AWARENESS,
-          icon: <CapIcon type="speaker" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveReachTitle),
-          content: formatMessage(messages.fbMarketingObjectiveReachDescription),
-          value: VALUE_REACH,
-          icon: <CapIcon type="connect" />,
-        },
-      ],
-    },
-    {
-      label: formatMessage(messages.fbMarketingObjectiveConsideration),
-      panes: [
-        {
-          title: formatMessage(messages.fbMarketingObjectiveTrafficTitle),
-          content: formatMessage(messages.fbMarketingObjectiveTrafficDescription),
-          value: VALUE_LINK_CLICKS,
-          icon: <CapIcon type="pointer" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveEngagementTitle),
-          content: formatMessage(messages.fbMarketingObjectiveEngagementDescription),
-          value: VALUE_POST_ENGAGEMENT,
-          icon: <CapIcon type="group-chat" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveAppInstallTitle),
-          content: formatMessage(messages.fbMarketingObjectiveAppInstallDescription),
-          value: VALUE_APP_INSTALLS,
-          icon: <CapIcon type="apps" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveVideoViewsTitle),
-          content: formatMessage(messages.fbMarketingObjectiveVideoViewsDescription),
-          value: VALUE_VIDEO_VIEWS,
-          icon: <CapIcon type="video" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveLeadGenerationTitle),
-          content: formatMessage(messages.fbMarketingObjectiveLeadGenerationDescription),
-          value: VALUE_LEAD_GENERATION,
-          icon: <CapIcon type="funnel" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveMessagesTitle),
-          content: formatMessage(messages.fbMarketingObjectiveMessagesDescription),
-          value: VALUE_MESSAGES,
-          icon: <CapIcon type="message-filled" />,
-        },
-      ],
-    },
-    {
-      label: formatMessage(messages.fbMarketingObjectiveConversionsTitle),
-      panes: [
-        {
-          title: formatMessage(messages.fbMarketingObjectiveConversionsTitle),
-          content: formatMessage(messages.fbMarketingObjectiveConversionsDescription),
-          value: VALUE_CONVERSIONS,
-          icon: <CapIcon type="global" style={{fontSize: 20 }}/>,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveCatalogSalesTitle),
-          content: formatMessage(messages.fbMarketingObjectiveCatalogSalesDescription),
-          value: VALUE_PRODUCT_CATALOG_SALES,
-          icon: <CapIcon type="basket" />,
-        },
-        {
-          title: formatMessage(messages.fbMarketingObjectiveStoreTrafficTitle),
-          content: formatMessage(messages.fbMarketingObjectiveStoreTrafficDescription),
-          value: VALUE_LOCAL_AWARENESS,
-          icon: <CapIcon type="store-traffic" />,
-        },
-      ],
-    },
-  ];
-
-  return marketingObjectives.map(({ label, panes }) => ({
-    label,
-    panes: panes.filter((pane) => !!marketingObjectivesList.includes(pane.value)),
-  }));
-};
-
-const Facebook = (props) => {
-  const {
-    className,
-    templateData: {
-      selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
-    } = {},
-    cap: {
-      campaignDetails: {
-        name: fbCampaignValue,
-        socialRemoteCampaignId,
-        socialObjective,
-      } = {},
-      orgSettings: {
-        accountSettings: {
-          socialAccountSettings: {
-            facebookAccountSettings: [{
-              accountName,
-              accountId,
-            }] = [{}],
-          } = {},
-        } = {},
-      } = {},
-    } = {},
-    messageDetails: {
-      name: fbAdSetValue,
-      targetAudience: {
-        label: fbAudienceValue,
-      } = {},
-    } = {},
-    onFacebookSubmit,
-    marketingObjectiveList,
-    facebookActions,
-    intl,
-  } = props;
-
-  const [isDrawerVisible, setDrawerVisibility] = useState(false);
-  const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
-
-  useEffect(() => {
-    facebookActions.getMarketingObjectives();
-  }, []);
-
-  const categorizedMarketingObjectiveList = getCategorizedMarketingObjectiveList(marketingObjectiveList, intl.formatMessage);
-
-  const campaignDataList = [
-    {
-      label: 'fbCampaignName',
-      value: fbCampaignValue,
-    },
-    {
-      label: 'fbMarketingObjective',
-      value: selectedMarketingObjective ? intl.formatMessage(messages[panesMapList[selectedMarketingObjective]]) : '',
-      onChange: () => setDrawerVisibility(!isDrawerVisible),
-    },
-    {
-      label: 'fbAdSetName',
-      value: fbAdSetValue,
-    },
-    {
-      label: 'fbAudience',
-      value: fbAudienceValue || <FormattedMessage {...messages.fbNoAudienceSelected} />,
-    },
-  ];
-
-  const adSetParameters = ['fbAdsDetailOne', 'fbAdsDetailTwo', 'fbAdsDetailThree'];
-
-  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>
-
-          <div className="account-section-container">
-            <CapHeading type="h3">
-              <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
-            </CapHeading>
-            <CapLabel type="label1">
-              <FormattedMessage
-                {...messages.fbAdCampaignSetDetailsDescription}
-              />
-            </CapLabel>
-          </div>
-
-          <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"
-                        onClick={onChange}
-                      >
-                        <FormattedMessage {...messages.fbChange} />
-                      </CapButton>
-                    )}
-                  </CapHeading>
-                </CapRow>
-              </StyledCampaignDetailCapColumn>
-            ))}
-          </CapRow>
-          <CapDrawer
-            content={
-              <MarketingObjective
-                selectedMarketingObjective={selectedMarketingObjective}
-                onMarketingObjectiveSelect={onMarketingObjectiveSelect}
-                defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
-                onSubmit={setDrawerVisibility}
-                marketingObjectiveList={categorizedMarketingObjectiveList}
-              />
-            }
-            visible={isDrawerVisible}
-            width={372}
-            onClose={() => setDrawerVisibility(false)}
-          />
-        </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"
-                    />
-                  )}
-                />
-              </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
-        type="primary"
-        onClick={() =>
-          onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
-        }
-      >
-        <FormattedMessage {...messages.fbConfirm} />
-      </CapButton>
-    </div>
-  );
-};
-
-Facebook.propTypes = {
-  className: PropTypes.string.isRequired,
-  templateData: PropTypes.object,
-  cap: PropTypes.object,
-  messageDetails: PropTypes.object,
-  onFacebookSubmit: PropTypes.func.isRequired,
-  marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
-  facebookActions: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
-};
-
-Facebook.defaultProps = {
-  marketingObjectiveList: [],
-};
-
-const mapStateToProps = createStructuredSelector({
-  marketingObjectiveList: makeSelectMarketingObjectiveList(),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  facebookActions: bindActionCreators(actions, dispatch),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(Facebook, styles)));

package/v2Containers/Facebook/messages.js

@@ -1,167 +0,0 @@
-/*
- * Facebook Messages
- *
- * This contains all the text for the Facebook component.
- */
-import { defineMessages } from 'react-intl';
-
-const messagePrefix = 'creatives.containersV2.Facebook';
-
-export default defineMessages({
-  fbAccount: {
-    id: `${messagePrefix}.fbAccount`,
-    defaultMessage: 'Facebook Account',
-  },
-  fbAdCampaignSetDetailsTitle: {
-    id: `${messagePrefix}.fbAdCampaignSetDetailsTitle`,
-    defaultMessage: 'Ad campaign & ad set details',
-  },
-  fbAdCampaignSetDetailsDescription: {
-    id: `${messagePrefix}.fbAdCampaignSetDetailsDescription`,
-    defaultMessage: '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.',
-  },
-  fbCampaignName: {
-    id: `${messagePrefix}.fbCampaignName`,
-    defaultMessage: 'FB Campaign name',
-  },
-  fbMarketingObjective: {
-    id: `${messagePrefix}.fbMarketingObjective`,
-    defaultMessage: 'FB Marketing objective',
-  },
-  fbAdSetName: {
-    id: `${messagePrefix}.fbAdSetName`,
-    defaultMessage: 'Ad set name',
-  },
-  fbAudience: {
-    id: `${messagePrefix}.fbAudience`,
-    defaultMessage: 'Audience',
-  },
-  fbAdsTitle: {
-    id: `${messagePrefix}.fbAdsTitle`,
-    defaultMessage: 'Facebook ads',
-  },
-  fbAdsDescription: {
-    id: `${messagePrefix}.fbAdsDescription`,
-    defaultMessage: '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+.',
-  },
-  fbAdsDetailOne: {
-    id: `${messagePrefix}.fbAdsDetailOne`,
-    defaultMessage: 'Only FB campaign & ad set creation is supported in Engage+',
-  },
-  fbAdsDetailTwo: {
-    id: `${messagePrefix}.fbAdsDetailTwo`,
-    defaultMessage: 'You can proceed with an empty content block',
-  },
-  fbAdsDetailThree: {
-    id: `${messagePrefix}.fbAdsDetailThree`,
-    defaultMessage: 'You can create ads later in Facebook ad manager.',
-  },
-  fbConfirm: {
-    id: `${messagePrefix}.fbConfirm`,
-    defaultMessage: 'Confirm',
-  },
-  fbChange: {
-    id: `${messagePrefix}.fbChange`,
-    defaultMessage: 'Change',
-  },
-  fbNoAudienceSelected: {
-    id: `${messagePrefix}.fbNoAudienceSelected`,
-    defaultMessage: 'Not Selected',
-  },
-  fbMarketingObjectiveAwareness: {
-    id: `${messagePrefix}.fbMarketingObjectiveAwareness`,
-    defaultMessage: 'Awareness',
-  },
-  fbMarketingObjectiveBrandAwarenessTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveBrandAwarenessTitle`,
-    defaultMessage: 'Brand awareness',
-  },
-  fbMarketingObjectiveBrandAwarenessDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveBrandAwarenessDescription`,
-    defaultMessage: 'Increase awareness for your brand by reaching people who are more likely to be interested in it.',
-  },
-  fbMarketingObjectiveReachTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveReachTitle`,
-    defaultMessage: 'Reach',
-  },
-  fbMarketingObjectiveReachDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveReachDescription`,
-    defaultMessage: 'Show your ad to the maximum number of people.',
-  },
-  fbMarketingObjectiveConsideration: {
-    id: `${messagePrefix}.fbMarketingObjectiveConsideration`,
-    defaultMessage: 'Consideration',
-  },
-  fbMarketingObjectiveTrafficTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveTrafficTitle`,
-    defaultMessage: 'Traffic',
-  },
-  fbMarketingObjectiveTrafficDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveTrafficDescription`,
-    defaultMessage: 'Send more people to a destination such as a website, app or Messenger conversation.',
-  },
-  fbMarketingObjectiveEngagementTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveEngagementTitle`,
-    defaultMessage: 'Engagement',
-  },
-  fbMarketingObjectiveEngagementDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveEngagementDescription`,
-    defaultMessage: 'Get more post engagements',
-  },
-  fbMarketingObjectiveAppInstallTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveAppInstallTitle`,
-    defaultMessage: 'App Installs',
-  },
-  fbMarketingObjectiveAppInstallDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveAppInstallsDescription`,
-    defaultMessage: 'Get more people to install your app.',
-  },
-  fbMarketingObjectiveVideoViewsTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveVideoViewsTitle`,
-    defaultMessage: 'Video Views',
-  },
-  fbMarketingObjectiveVideoViewsDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveVideoViewsDescription`,
-    defaultMessage: 'Get more people to view your video content.',
-  },
-  fbMarketingObjectiveLeadGenerationTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveLeadGenerationTitle`,
-    defaultMessage: 'Lead Generation',
-  },
-  fbMarketingObjectiveLeadGenerationDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveLeadGenerationDescription`,
-    defaultMessage: 'Drive more sales leads, such as email addresses, from people interested in your brand or business.',
-  },
-  fbMarketingObjectiveMessagesTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveMessagesTitle`,
-    defaultMessage: 'Messages',
-  },
-  fbMarketingObjectiveMessagesDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveMessagesDescription`,
-    defaultMessage: 'Get more people to send messages to your business in Messenger.',
-  },
-  fbMarketingObjectiveConversionsTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveConversionsTitle`,
-    defaultMessage: 'Conversions',
-  },
-  fbMarketingObjectiveConversionsDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveConversionsDescription`,
-    defaultMessage: 'Drive valuable actions on your website, app or in Messenger.',
-  },
-  fbMarketingObjectiveCatalogSalesTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveCatalogSalesTitle`,
-    defaultMessage: 'Catalog Sales',
-  },
-  fbMarketingObjectiveCatalogSalesDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveCatalogSalesDescription`,
-    defaultMessage: 'Create ads that automatically show items from your catalog based on your target audience.',
-  },
-  fbMarketingObjectiveStoreTrafficTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficTitle`,
-    defaultMessage: 'Store Traffic',
-  },
-  fbMarketingObjectiveStoreTrafficDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficDescription`,
-    defaultMessage: 'Drive visits to your physical stores by showing ads to people who are nearby.',
-  },
-});

package/v2Containers/Facebook/reducer.js

@@ -1,31 +0,0 @@
-/*
- *
- * Faceboook reducer
- *
- */
-
-import { fromJS } from 'immutable';
-import {
-  SET_MARKETING_OBJECTIVES_SUCCESS,
-  SET_MARKETING_OBJECTIVES_FAILURE,
-} from './constants';
-
-export const initialState = fromJS({
-  marketinObjectives: {},
-});
-
-function facebookReducer(state = initialState, action) {
-  const { type, payload } = action;
-  switch (type) {
-    case SET_MARKETING_OBJECTIVES_SUCCESS: {
-      return state.set('marketinObjectivesData', payload).set('marketinObjectivesError', null);
-    }
-    case SET_MARKETING_OBJECTIVES_FAILURE: {
-      return state.set('marketinObjectivesData', []).set('marketinObjectivesError', payload);
-    }
-    default:
-      return state;
-  }
-}
-
-export default facebookReducer;

package/v2Containers/Facebook/sagas.js

@@ -1,41 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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'),
-);