@capillarytech/creatives-library 3.4.4 → 3.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/config/app.js +0 -2
- package/index.js +0 -6
- package/initialState.js +0 -3
- package/package.json +1 -2
- package/routes.js +1 -6
- package/services/api.js +9 -25
- package/translations/en.json +0 -56
- package/translations/zh.json +0 -56
- package/v2Components/NavigationBar/index.js +10 -5
- package/v2Components/NavigationBar/messages.js +0 -28
- package/v2Containers/App/constants.js +0 -30
- package/v2Containers/Cap/index.js +0 -5
- package/v2Containers/CreativesContainer/SlideBoxContent.js +0 -18
- package/v2Containers/CreativesContainer/constants.js +0 -1
- package/v2Containers/CreativesContainer/index.js +1 -10
- package/v2Containers/Email/index.js +1 -9
- package/v2Containers/Email/messages.js +0 -8
- package/v2Containers/EmailWrapper/index.js +1 -15
- package/v2Containers/MobilePush/Create/index.js +0 -8
- package/v2Containers/MobilePush/Edit/index.js +0 -8
- package/v2Containers/Sms/Create/index.js +1 -6
- package/v2Containers/Sms/Edit/index.js +1 -6
- package/v2Containers/Templates/index.js +3 -9
- package/v2Containers/TemplatesV2/index.js +22 -53
- package/v2Containers/TemplatesV2/messages.js +0 -4
- package/v2Containers/WeChat/MapTemplates/index.js +1 -9
- package/v2Containers/WeChat/RichmediaTemplates/Create/index.js +2 -9
- package/v2Components/MarketingObjective/MarketingObjective.style.js +0 -73
- package/v2Components/MarketingObjective/index.js +0 -107
- package/v2Components/MarketingObjective/messages.js +0 -23
- package/v2Containers/Facebook/Facebook.style.js +0 -75
- package/v2Containers/Facebook/actions.js +0 -13
- package/v2Containers/Facebook/constants.js +0 -25
- package/v2Containers/Facebook/index.js +0 -358
- package/v2Containers/Facebook/messages.js +0 -167
- package/v2Containers/Facebook/reducer.js +0 -31
- package/v2Containers/Facebook/sagas.js +0 -41
- package/v2Containers/Facebook/selectors.js +0 -20
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Marketing Objective Messages
|
|
3
|
-
*
|
|
4
|
-
* This contains all the text for the Facebook component.
|
|
5
|
-
*/
|
|
6
|
-
import { defineMessages } from 'react-intl';
|
|
7
|
-
|
|
8
|
-
const messagePrefix = 'creatives.containersV2.FacebookMarketingObjective';
|
|
9
|
-
|
|
10
|
-
export default defineMessages({
|
|
11
|
-
fbMarketingObjectiveTitle: {
|
|
12
|
-
id: `${messagePrefix}.fbMarketingObjectiveTitle`,
|
|
13
|
-
defaultMessage: 'Facebook Marketing Objective',
|
|
14
|
-
},
|
|
15
|
-
fbMarketingObjectiveDescription: {
|
|
16
|
-
id: `${messagePrefix}.fbMarketingObjectiveDescription`,
|
|
17
|
-
defaultMessage: 'Objectives help break reporting into a more granular level',
|
|
18
|
-
},
|
|
19
|
-
fbMarketingObjectiveDone: {
|
|
20
|
-
id: `${messagePrefix}.fbMarketingObjectiveDone`,
|
|
21
|
-
defaultMessage: 'Done',
|
|
22
|
-
},
|
|
23
|
-
});
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { css } from 'styled-components';
|
|
2
|
-
import {
|
|
3
|
-
CAP_SPACE_44,
|
|
4
|
-
CAP_SPACE_28,
|
|
5
|
-
CAP_SPACE_20,
|
|
6
|
-
CAP_SPACE_12,
|
|
7
|
-
CAP_SPACE_08,
|
|
8
|
-
CAP_G07,
|
|
9
|
-
CAP_G12,
|
|
10
|
-
CAP_G06,
|
|
11
|
-
FONT_COLOR_05,
|
|
12
|
-
} from '@capillarytech/cap-ui-library/styled/variables';
|
|
13
|
-
|
|
14
|
-
export default css`
|
|
15
|
-
margin-left: ${CAP_SPACE_44};
|
|
16
|
-
|
|
17
|
-
.is-scrollable-section {
|
|
18
|
-
height: calc(100vh - 220px);
|
|
19
|
-
overflow-y: auto;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.account-details-wrapper {
|
|
23
|
-
border-bottom: 1px solid ${CAP_G12};
|
|
24
|
-
margin-bottom: ${CAP_SPACE_20};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.account-name-section {
|
|
28
|
-
margin-bottom: ${CAP_SPACE_28};
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.account-section-container {
|
|
32
|
-
margin-bottom: ${CAP_SPACE_20};
|
|
33
|
-
max-width: 564px;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.ad-section {
|
|
37
|
-
margin-bottom: ${CAP_SPACE_44};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.dynamic-content-section {
|
|
41
|
-
max-width: 140px;
|
|
42
|
-
|
|
43
|
-
.facebook-dynamic-content {
|
|
44
|
-
color: ${CAP_G06};
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.parameter-list {
|
|
49
|
-
padding: ${CAP_SPACE_08} ${CAP_SPACE_28};
|
|
50
|
-
|
|
51
|
-
.parameter-list-item {
|
|
52
|
-
list-style: none;
|
|
53
|
-
margin-bottom: ${CAP_SPACE_28};
|
|
54
|
-
|
|
55
|
-
.parameter-index {
|
|
56
|
-
float: left;
|
|
57
|
-
margin-right: ${CAP_SPACE_12};
|
|
58
|
-
background: ${CAP_G07};
|
|
59
|
-
padding: 6px 10px;
|
|
60
|
-
border-radius: 50%;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.cap-button-v2 {
|
|
66
|
-
&.marketingObjective-change-button {
|
|
67
|
-
color: ${FONT_COLOR_05};
|
|
68
|
-
height: ${CAP_SPACE_20};
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
`;
|
|
72
|
-
|
|
73
|
-
export const CampaignDetailCapColumn = css`
|
|
74
|
-
margin-bottom: ${CAP_SPACE_20};
|
|
75
|
-
`;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
*
|
|
3
|
-
* Facebook constants
|
|
4
|
-
*
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
const prefix = 'app/Facebook';
|
|
8
|
-
|
|
9
|
-
export const GET_MARKETING_OBJECTIVES = `${prefix}/GET_MARKETING_OBJECTIVES`;
|
|
10
|
-
export const SET_MARKETING_OBJECTIVES_SUCCESS = `${prefix}/SET_MARKETING_OBJECTIVES_SUCCESS`;
|
|
11
|
-
export const SET_MARKETING_OBJECTIVES_FAILURE = `${prefix}/SET_MARKETING_OBJECTIVES_FAILURE`;
|
|
12
|
-
|
|
13
|
-
// marketing objectives constants
|
|
14
|
-
|
|
15
|
-
export const VALUE_APP_INSTALLS = 'VALUE_APP_INSTALLS';
|
|
16
|
-
export const VALUE_BRAND_AWARENESS = 'VALUE_BRAND_AWARENESS';
|
|
17
|
-
export const VALUE_CONVERSIONS = 'VALUE_CONVERSIONS';
|
|
18
|
-
export const VALUE_LEAD_GENERATION = 'VALUE_LEAD_GENERATION';
|
|
19
|
-
export const VALUE_LOCAL_AWARENESS = 'VALUE_LOCAL_AWARENESS';
|
|
20
|
-
export const VALUE_MESSAGES = 'VALUE_MESSAGES';
|
|
21
|
-
export const VALUE_PRODUCT_CATALOG_SALES = 'VALUE_PRODUCT_CATALOG_SALES';
|
|
22
|
-
export const VALUE_REACH = 'VALUE_REACH';
|
|
23
|
-
export const VALUE_VIDEO_VIEWS = 'VALUE_VIDEO_VIEWS';
|
|
24
|
-
export const VALUE_LINK_CLICKS = 'VALUE_LINK_CLICKS';
|
|
25
|
-
export const VALUE_POST_ENGAGEMENT = 'VALUE_POST_ENGAGEMENT';
|
|
@@ -1,358 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
*
|
|
3
|
-
* Facebook
|
|
4
|
-
*
|
|
5
|
-
*/
|
|
6
|
-
import PropTypes from "prop-types";
|
|
7
|
-
import React, { useState, useEffect } from "react";
|
|
8
|
-
import { injectIntl, FormattedMessage, intlShape } from "react-intl";
|
|
9
|
-
import {
|
|
10
|
-
CapHeading,
|
|
11
|
-
CapLabel,
|
|
12
|
-
CapRow,
|
|
13
|
-
CapColumn,
|
|
14
|
-
CapButton,
|
|
15
|
-
CapDrawer,
|
|
16
|
-
CapCustomCard,
|
|
17
|
-
CapIcon,
|
|
18
|
-
} from '@capillarytech/cap-ui-library';
|
|
19
|
-
import { createStructuredSelector } from 'reselect';
|
|
20
|
-
import { connect } from 'react-redux';
|
|
21
|
-
import { bindActionCreators } from 'redux';
|
|
22
|
-
import messages from "./messages";
|
|
23
|
-
import styles, { CampaignDetailCapColumn } from './Facebook.style';
|
|
24
|
-
import * as actions from './actions';
|
|
25
|
-
import withStyles from '../../hoc/withStyles';
|
|
26
|
-
import MarketingObjective from '../../v2Components/MarketingObjective';
|
|
27
|
-
import { makeSelectMarketingObjectiveList } from './selectors';
|
|
28
|
-
import {
|
|
29
|
-
VALUE_APP_INSTALLS,
|
|
30
|
-
VALUE_BRAND_AWARENESS,
|
|
31
|
-
VALUE_CONVERSIONS,
|
|
32
|
-
VALUE_LEAD_GENERATION,
|
|
33
|
-
VALUE_LOCAL_AWARENESS,
|
|
34
|
-
VALUE_MESSAGES,
|
|
35
|
-
VALUE_POST_ENGAGEMENT,
|
|
36
|
-
VALUE_PRODUCT_CATALOG_SALES,
|
|
37
|
-
VALUE_REACH,
|
|
38
|
-
VALUE_VIDEO_VIEWS,
|
|
39
|
-
VALUE_LINK_CLICKS,
|
|
40
|
-
} from './constants';
|
|
41
|
-
|
|
42
|
-
const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
|
|
43
|
-
|
|
44
|
-
const panesMapList = {
|
|
45
|
-
[VALUE_APP_INSTALLS]: 'fbMarketingObjectiveAppInstallTitle',
|
|
46
|
-
[VALUE_BRAND_AWARENESS]: 'fbMarketingObjectiveBrandAwarenessTitle',
|
|
47
|
-
[VALUE_CONVERSIONS]: 'fbMarketingObjectiveConversionsTitle',
|
|
48
|
-
[VALUE_LEAD_GENERATION]: 'fbMarketingObjectiveLeadGenerationTitle',
|
|
49
|
-
[VALUE_LOCAL_AWARENESS]: 'fbMarketingObjectiveStoreTrafficTitle',
|
|
50
|
-
[VALUE_MESSAGES]: 'fbMarketingObjectiveMessagesTitle',
|
|
51
|
-
[VALUE_POST_ENGAGEMENT]: 'fbMarketingObjectiveEngagementTitle',
|
|
52
|
-
[VALUE_PRODUCT_CATALOG_SALES]: 'fbMarketingObjectiveCatalogSalesTitle',
|
|
53
|
-
[VALUE_REACH]: 'fbMarketingObjectiveReachTitle',
|
|
54
|
-
[VALUE_VIDEO_VIEWS]: 'fbMarketingObjectiveVideoViewsTitle',
|
|
55
|
-
[VALUE_LINK_CLICKS]: 'fbMarketingObjectiveTrafficTitle',
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
const getCategorizedMarketingObjectiveList = (marketingObjectivesList, formatMessage) => {
|
|
59
|
-
const marketingObjectives = [
|
|
60
|
-
{
|
|
61
|
-
label: formatMessage(messages.fbMarketingObjectiveAwareness),
|
|
62
|
-
panes: [
|
|
63
|
-
{
|
|
64
|
-
title: formatMessage(messages.fbMarketingObjectiveBrandAwarenessTitle),
|
|
65
|
-
content: formatMessage(messages.fbMarketingObjectiveBrandAwarenessDescription),
|
|
66
|
-
value: VALUE_BRAND_AWARENESS,
|
|
67
|
-
icon: <CapIcon type="speaker" />,
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
title: formatMessage(messages.fbMarketingObjectiveReachTitle),
|
|
71
|
-
content: formatMessage(messages.fbMarketingObjectiveReachDescription),
|
|
72
|
-
value: VALUE_REACH,
|
|
73
|
-
icon: <CapIcon type="connect" />,
|
|
74
|
-
},
|
|
75
|
-
],
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
label: formatMessage(messages.fbMarketingObjectiveConsideration),
|
|
79
|
-
panes: [
|
|
80
|
-
{
|
|
81
|
-
title: formatMessage(messages.fbMarketingObjectiveTrafficTitle),
|
|
82
|
-
content: formatMessage(messages.fbMarketingObjectiveTrafficDescription),
|
|
83
|
-
value: VALUE_LINK_CLICKS,
|
|
84
|
-
icon: <CapIcon type="pointer" />,
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
title: formatMessage(messages.fbMarketingObjectiveEngagementTitle),
|
|
88
|
-
content: formatMessage(messages.fbMarketingObjectiveEngagementDescription),
|
|
89
|
-
value: VALUE_POST_ENGAGEMENT,
|
|
90
|
-
icon: <CapIcon type="group-chat" />,
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
title: formatMessage(messages.fbMarketingObjectiveAppInstallTitle),
|
|
94
|
-
content: formatMessage(messages.fbMarketingObjectiveAppInstallDescription),
|
|
95
|
-
value: VALUE_APP_INSTALLS,
|
|
96
|
-
icon: <CapIcon type="apps" />,
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
title: formatMessage(messages.fbMarketingObjectiveVideoViewsTitle),
|
|
100
|
-
content: formatMessage(messages.fbMarketingObjectiveVideoViewsDescription),
|
|
101
|
-
value: VALUE_VIDEO_VIEWS,
|
|
102
|
-
icon: <CapIcon type="video" />,
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
title: formatMessage(messages.fbMarketingObjectiveLeadGenerationTitle),
|
|
106
|
-
content: formatMessage(messages.fbMarketingObjectiveLeadGenerationDescription),
|
|
107
|
-
value: VALUE_LEAD_GENERATION,
|
|
108
|
-
icon: <CapIcon type="funnel" />,
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
title: formatMessage(messages.fbMarketingObjectiveMessagesTitle),
|
|
112
|
-
content: formatMessage(messages.fbMarketingObjectiveMessagesDescription),
|
|
113
|
-
value: VALUE_MESSAGES,
|
|
114
|
-
icon: <CapIcon type="message-filled" />,
|
|
115
|
-
},
|
|
116
|
-
],
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
label: formatMessage(messages.fbMarketingObjectiveConversionsTitle),
|
|
120
|
-
panes: [
|
|
121
|
-
{
|
|
122
|
-
title: formatMessage(messages.fbMarketingObjectiveConversionsTitle),
|
|
123
|
-
content: formatMessage(messages.fbMarketingObjectiveConversionsDescription),
|
|
124
|
-
value: VALUE_CONVERSIONS,
|
|
125
|
-
icon: <CapIcon type="global" style={{fontSize: 20 }}/>,
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
title: formatMessage(messages.fbMarketingObjectiveCatalogSalesTitle),
|
|
129
|
-
content: formatMessage(messages.fbMarketingObjectiveCatalogSalesDescription),
|
|
130
|
-
value: VALUE_PRODUCT_CATALOG_SALES,
|
|
131
|
-
icon: <CapIcon type="basket" />,
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
title: formatMessage(messages.fbMarketingObjectiveStoreTrafficTitle),
|
|
135
|
-
content: formatMessage(messages.fbMarketingObjectiveStoreTrafficDescription),
|
|
136
|
-
value: VALUE_LOCAL_AWARENESS,
|
|
137
|
-
icon: <CapIcon type="store-traffic" />,
|
|
138
|
-
},
|
|
139
|
-
],
|
|
140
|
-
},
|
|
141
|
-
];
|
|
142
|
-
|
|
143
|
-
return marketingObjectives.map(({ label, panes }) => ({
|
|
144
|
-
label,
|
|
145
|
-
panes: panes.filter((pane) => !!marketingObjectivesList.includes(pane.value)),
|
|
146
|
-
}));
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
const Facebook = (props) => {
|
|
150
|
-
const {
|
|
151
|
-
className,
|
|
152
|
-
templateData: {
|
|
153
|
-
selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
|
|
154
|
-
} = {},
|
|
155
|
-
cap: {
|
|
156
|
-
campaignDetails: {
|
|
157
|
-
name: fbCampaignValue,
|
|
158
|
-
socialRemoteCampaignId,
|
|
159
|
-
socialObjective,
|
|
160
|
-
} = {},
|
|
161
|
-
orgSettings: {
|
|
162
|
-
accountSettings: {
|
|
163
|
-
socialAccountSettings: {
|
|
164
|
-
facebookAccountSettings: [{
|
|
165
|
-
accountName,
|
|
166
|
-
accountId,
|
|
167
|
-
}] = [{}],
|
|
168
|
-
} = {},
|
|
169
|
-
} = {},
|
|
170
|
-
} = {},
|
|
171
|
-
} = {},
|
|
172
|
-
messageDetails: {
|
|
173
|
-
name: fbAdSetValue,
|
|
174
|
-
targetAudience: {
|
|
175
|
-
label: fbAudienceValue,
|
|
176
|
-
} = {},
|
|
177
|
-
} = {},
|
|
178
|
-
onFacebookSubmit,
|
|
179
|
-
marketingObjectiveList,
|
|
180
|
-
facebookActions,
|
|
181
|
-
intl,
|
|
182
|
-
} = props;
|
|
183
|
-
|
|
184
|
-
const [isDrawerVisible, setDrawerVisibility] = useState(false);
|
|
185
|
-
const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
|
|
186
|
-
|
|
187
|
-
useEffect(() => {
|
|
188
|
-
facebookActions.getMarketingObjectives();
|
|
189
|
-
}, []);
|
|
190
|
-
|
|
191
|
-
const categorizedMarketingObjectiveList = getCategorizedMarketingObjectiveList(marketingObjectiveList, intl.formatMessage);
|
|
192
|
-
|
|
193
|
-
const campaignDataList = [
|
|
194
|
-
{
|
|
195
|
-
label: 'fbCampaignName',
|
|
196
|
-
value: fbCampaignValue,
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
label: 'fbMarketingObjective',
|
|
200
|
-
value: selectedMarketingObjective ? intl.formatMessage(messages[panesMapList[selectedMarketingObjective]]) : '',
|
|
201
|
-
onChange: () => setDrawerVisibility(!isDrawerVisible),
|
|
202
|
-
},
|
|
203
|
-
{
|
|
204
|
-
label: 'fbAdSetName',
|
|
205
|
-
value: fbAdSetValue,
|
|
206
|
-
},
|
|
207
|
-
{
|
|
208
|
-
label: 'fbAudience',
|
|
209
|
-
value: fbAudienceValue || <FormattedMessage {...messages.fbNoAudienceSelected} />,
|
|
210
|
-
},
|
|
211
|
-
];
|
|
212
|
-
|
|
213
|
-
const adSetParameters = ['fbAdsDetailOne', 'fbAdsDetailTwo', 'fbAdsDetailThree'];
|
|
214
|
-
|
|
215
|
-
const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
|
|
216
|
-
|
|
217
|
-
return (
|
|
218
|
-
<div className={className}>
|
|
219
|
-
<div className="is-scrollable-section">
|
|
220
|
-
<div className="account-details-wrapper">
|
|
221
|
-
<div className="account-name-section">
|
|
222
|
-
<CapHeading type="h4">
|
|
223
|
-
<FormattedMessage {...messages.fbAccount} />
|
|
224
|
-
</CapHeading>
|
|
225
|
-
<CapHeading type="h3">{accountName}</CapHeading>
|
|
226
|
-
</div>
|
|
227
|
-
|
|
228
|
-
<div className="account-section-container">
|
|
229
|
-
<CapHeading type="h3">
|
|
230
|
-
<FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
|
|
231
|
-
</CapHeading>
|
|
232
|
-
<CapLabel type="label1">
|
|
233
|
-
<FormattedMessage
|
|
234
|
-
{...messages.fbAdCampaignSetDetailsDescription}
|
|
235
|
-
/>
|
|
236
|
-
</CapLabel>
|
|
237
|
-
</div>
|
|
238
|
-
|
|
239
|
-
<CapRow span={12} type="flex">
|
|
240
|
-
{campaignDataList.map(({ label, value, onChange }, index) => (
|
|
241
|
-
<StyledCampaignDetailCapColumn
|
|
242
|
-
span={index % 2 === 0 ? 6 : 14}
|
|
243
|
-
key={label}
|
|
244
|
-
>
|
|
245
|
-
<CapRow>
|
|
246
|
-
<CapLabel type="label2">
|
|
247
|
-
<FormattedMessage {...messages[label]} />
|
|
248
|
-
</CapLabel>
|
|
249
|
-
<CapHeading type="h4">
|
|
250
|
-
{value}
|
|
251
|
-
{!socialRemoteCampaignId && onChange && (
|
|
252
|
-
<CapButton
|
|
253
|
-
type="flat"
|
|
254
|
-
className="marketingObjective-change-button"
|
|
255
|
-
onClick={onChange}
|
|
256
|
-
>
|
|
257
|
-
<FormattedMessage {...messages.fbChange} />
|
|
258
|
-
</CapButton>
|
|
259
|
-
)}
|
|
260
|
-
</CapHeading>
|
|
261
|
-
</CapRow>
|
|
262
|
-
</StyledCampaignDetailCapColumn>
|
|
263
|
-
))}
|
|
264
|
-
</CapRow>
|
|
265
|
-
<CapDrawer
|
|
266
|
-
content={
|
|
267
|
-
<MarketingObjective
|
|
268
|
-
selectedMarketingObjective={selectedMarketingObjective}
|
|
269
|
-
onMarketingObjectiveSelect={onMarketingObjectiveSelect}
|
|
270
|
-
defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
|
|
271
|
-
onSubmit={setDrawerVisibility}
|
|
272
|
-
marketingObjectiveList={categorizedMarketingObjectiveList}
|
|
273
|
-
/>
|
|
274
|
-
}
|
|
275
|
-
visible={isDrawerVisible}
|
|
276
|
-
width={372}
|
|
277
|
-
onClose={() => setDrawerVisibility(false)}
|
|
278
|
-
/>
|
|
279
|
-
</div>
|
|
280
|
-
|
|
281
|
-
<div className="ad-section">
|
|
282
|
-
<div className="account-section-container">
|
|
283
|
-
<CapHeading type="h3">
|
|
284
|
-
<FormattedMessage {...messages.fbAdsTitle} />
|
|
285
|
-
</CapHeading>
|
|
286
|
-
<CapLabel type="label1">
|
|
287
|
-
<FormattedMessage {...messages.fbAdsDescription} />
|
|
288
|
-
</CapLabel>
|
|
289
|
-
</div>
|
|
290
|
-
|
|
291
|
-
<div>
|
|
292
|
-
<CapRow span={12} type="flex">
|
|
293
|
-
<CapColumn span={6}>
|
|
294
|
-
<CapCustomCard
|
|
295
|
-
type="Facebook"
|
|
296
|
-
FBDynamicComponent={() => (
|
|
297
|
-
<CapIcon
|
|
298
|
-
size="l"
|
|
299
|
-
type="scenery"
|
|
300
|
-
className="facebook-dynamic-content"
|
|
301
|
-
/>
|
|
302
|
-
)}
|
|
303
|
-
/>
|
|
304
|
-
</CapColumn>
|
|
305
|
-
<CapColumn span={16}>
|
|
306
|
-
<ul className="parameter-list">
|
|
307
|
-
{adSetParameters.map((parameter, index) => (
|
|
308
|
-
<li key={parameter} className="parameter-list-item">
|
|
309
|
-
<CapLabel type="label2" className="parameter-index">
|
|
310
|
-
{index + 1}
|
|
311
|
-
</CapLabel>
|
|
312
|
-
<CapHeading type="h5">
|
|
313
|
-
<FormattedMessage {...messages[parameter]} />
|
|
314
|
-
</CapHeading>
|
|
315
|
-
</li>
|
|
316
|
-
))}
|
|
317
|
-
</ul>
|
|
318
|
-
</CapColumn>
|
|
319
|
-
</CapRow>
|
|
320
|
-
</div>
|
|
321
|
-
</div>
|
|
322
|
-
</div>
|
|
323
|
-
<CapButton
|
|
324
|
-
type="primary"
|
|
325
|
-
onClick={() =>
|
|
326
|
-
onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
|
|
327
|
-
}
|
|
328
|
-
>
|
|
329
|
-
<FormattedMessage {...messages.fbConfirm} />
|
|
330
|
-
</CapButton>
|
|
331
|
-
</div>
|
|
332
|
-
);
|
|
333
|
-
};
|
|
334
|
-
|
|
335
|
-
Facebook.propTypes = {
|
|
336
|
-
className: PropTypes.string.isRequired,
|
|
337
|
-
templateData: PropTypes.object,
|
|
338
|
-
cap: PropTypes.object,
|
|
339
|
-
messageDetails: PropTypes.object,
|
|
340
|
-
onFacebookSubmit: PropTypes.func.isRequired,
|
|
341
|
-
marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
|
|
342
|
-
facebookActions: PropTypes.func.isRequired,
|
|
343
|
-
intl: intlShape.isRequired,
|
|
344
|
-
};
|
|
345
|
-
|
|
346
|
-
Facebook.defaultProps = {
|
|
347
|
-
marketingObjectiveList: [],
|
|
348
|
-
};
|
|
349
|
-
|
|
350
|
-
const mapStateToProps = createStructuredSelector({
|
|
351
|
-
marketingObjectiveList: makeSelectMarketingObjectiveList(),
|
|
352
|
-
});
|
|
353
|
-
|
|
354
|
-
const mapDispatchToProps = (dispatch) => ({
|
|
355
|
-
facebookActions: bindActionCreators(actions, dispatch),
|
|
356
|
-
});
|
|
357
|
-
|
|
358
|
-
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(Facebook, styles)));
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Facebook Messages
|
|
3
|
-
*
|
|
4
|
-
* This contains all the text for the Facebook component.
|
|
5
|
-
*/
|
|
6
|
-
import { defineMessages } from 'react-intl';
|
|
7
|
-
|
|
8
|
-
const messagePrefix = 'creatives.containersV2.Facebook';
|
|
9
|
-
|
|
10
|
-
export default defineMessages({
|
|
11
|
-
fbAccount: {
|
|
12
|
-
id: `${messagePrefix}.fbAccount`,
|
|
13
|
-
defaultMessage: 'Facebook Account',
|
|
14
|
-
},
|
|
15
|
-
fbAdCampaignSetDetailsTitle: {
|
|
16
|
-
id: `${messagePrefix}.fbAdCampaignSetDetailsTitle`,
|
|
17
|
-
defaultMessage: 'Ad campaign & ad set details',
|
|
18
|
-
},
|
|
19
|
-
fbAdCampaignSetDetailsDescription: {
|
|
20
|
-
id: `${messagePrefix}.fbAdCampaignSetDetailsDescription`,
|
|
21
|
-
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.',
|
|
22
|
-
},
|
|
23
|
-
fbCampaignName: {
|
|
24
|
-
id: `${messagePrefix}.fbCampaignName`,
|
|
25
|
-
defaultMessage: 'FB Campaign name',
|
|
26
|
-
},
|
|
27
|
-
fbMarketingObjective: {
|
|
28
|
-
id: `${messagePrefix}.fbMarketingObjective`,
|
|
29
|
-
defaultMessage: 'FB Marketing objective',
|
|
30
|
-
},
|
|
31
|
-
fbAdSetName: {
|
|
32
|
-
id: `${messagePrefix}.fbAdSetName`,
|
|
33
|
-
defaultMessage: 'Ad set name',
|
|
34
|
-
},
|
|
35
|
-
fbAudience: {
|
|
36
|
-
id: `${messagePrefix}.fbAudience`,
|
|
37
|
-
defaultMessage: 'Audience',
|
|
38
|
-
},
|
|
39
|
-
fbAdsTitle: {
|
|
40
|
-
id: `${messagePrefix}.fbAdsTitle`,
|
|
41
|
-
defaultMessage: 'Facebook ads',
|
|
42
|
-
},
|
|
43
|
-
fbAdsDescription: {
|
|
44
|
-
id: `${messagePrefix}.fbAdsDescription`,
|
|
45
|
-
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+.',
|
|
46
|
-
},
|
|
47
|
-
fbAdsDetailOne: {
|
|
48
|
-
id: `${messagePrefix}.fbAdsDetailOne`,
|
|
49
|
-
defaultMessage: 'Only FB campaign & ad set creation is supported in Engage+',
|
|
50
|
-
},
|
|
51
|
-
fbAdsDetailTwo: {
|
|
52
|
-
id: `${messagePrefix}.fbAdsDetailTwo`,
|
|
53
|
-
defaultMessage: 'You can proceed with an empty content block',
|
|
54
|
-
},
|
|
55
|
-
fbAdsDetailThree: {
|
|
56
|
-
id: `${messagePrefix}.fbAdsDetailThree`,
|
|
57
|
-
defaultMessage: 'You can create ads later in Facebook ad manager.',
|
|
58
|
-
},
|
|
59
|
-
fbConfirm: {
|
|
60
|
-
id: `${messagePrefix}.fbConfirm`,
|
|
61
|
-
defaultMessage: 'Confirm',
|
|
62
|
-
},
|
|
63
|
-
fbChange: {
|
|
64
|
-
id: `${messagePrefix}.fbChange`,
|
|
65
|
-
defaultMessage: 'Change',
|
|
66
|
-
},
|
|
67
|
-
fbNoAudienceSelected: {
|
|
68
|
-
id: `${messagePrefix}.fbNoAudienceSelected`,
|
|
69
|
-
defaultMessage: 'Not Selected',
|
|
70
|
-
},
|
|
71
|
-
fbMarketingObjectiveAwareness: {
|
|
72
|
-
id: `${messagePrefix}.fbMarketingObjectiveAwareness`,
|
|
73
|
-
defaultMessage: 'Awareness',
|
|
74
|
-
},
|
|
75
|
-
fbMarketingObjectiveBrandAwarenessTitle: {
|
|
76
|
-
id: `${messagePrefix}.fbMarketingObjectiveBrandAwarenessTitle`,
|
|
77
|
-
defaultMessage: 'Brand awareness',
|
|
78
|
-
},
|
|
79
|
-
fbMarketingObjectiveBrandAwarenessDescription: {
|
|
80
|
-
id: `${messagePrefix}.fbMarketingObjectiveBrandAwarenessDescription`,
|
|
81
|
-
defaultMessage: 'Increase awareness for your brand by reaching people who are more likely to be interested in it.',
|
|
82
|
-
},
|
|
83
|
-
fbMarketingObjectiveReachTitle: {
|
|
84
|
-
id: `${messagePrefix}.fbMarketingObjectiveReachTitle`,
|
|
85
|
-
defaultMessage: 'Reach',
|
|
86
|
-
},
|
|
87
|
-
fbMarketingObjectiveReachDescription: {
|
|
88
|
-
id: `${messagePrefix}.fbMarketingObjectiveReachDescription`,
|
|
89
|
-
defaultMessage: 'Show your ad to the maximum number of people.',
|
|
90
|
-
},
|
|
91
|
-
fbMarketingObjectiveConsideration: {
|
|
92
|
-
id: `${messagePrefix}.fbMarketingObjectiveConsideration`,
|
|
93
|
-
defaultMessage: 'Consideration',
|
|
94
|
-
},
|
|
95
|
-
fbMarketingObjectiveTrafficTitle: {
|
|
96
|
-
id: `${messagePrefix}.fbMarketingObjectiveTrafficTitle`,
|
|
97
|
-
defaultMessage: 'Traffic',
|
|
98
|
-
},
|
|
99
|
-
fbMarketingObjectiveTrafficDescription: {
|
|
100
|
-
id: `${messagePrefix}.fbMarketingObjectiveTrafficDescription`,
|
|
101
|
-
defaultMessage: 'Send more people to a destination such as a website, app or Messenger conversation.',
|
|
102
|
-
},
|
|
103
|
-
fbMarketingObjectiveEngagementTitle: {
|
|
104
|
-
id: `${messagePrefix}.fbMarketingObjectiveEngagementTitle`,
|
|
105
|
-
defaultMessage: 'Engagement',
|
|
106
|
-
},
|
|
107
|
-
fbMarketingObjectiveEngagementDescription: {
|
|
108
|
-
id: `${messagePrefix}.fbMarketingObjectiveEngagementDescription`,
|
|
109
|
-
defaultMessage: 'Get more post engagements',
|
|
110
|
-
},
|
|
111
|
-
fbMarketingObjectiveAppInstallTitle: {
|
|
112
|
-
id: `${messagePrefix}.fbMarketingObjectiveAppInstallTitle`,
|
|
113
|
-
defaultMessage: 'App Installs',
|
|
114
|
-
},
|
|
115
|
-
fbMarketingObjectiveAppInstallDescription: {
|
|
116
|
-
id: `${messagePrefix}.fbMarketingObjectiveAppInstallsDescription`,
|
|
117
|
-
defaultMessage: 'Get more people to install your app.',
|
|
118
|
-
},
|
|
119
|
-
fbMarketingObjectiveVideoViewsTitle: {
|
|
120
|
-
id: `${messagePrefix}.fbMarketingObjectiveVideoViewsTitle`,
|
|
121
|
-
defaultMessage: 'Video Views',
|
|
122
|
-
},
|
|
123
|
-
fbMarketingObjectiveVideoViewsDescription: {
|
|
124
|
-
id: `${messagePrefix}.fbMarketingObjectiveVideoViewsDescription`,
|
|
125
|
-
defaultMessage: 'Get more people to view your video content.',
|
|
126
|
-
},
|
|
127
|
-
fbMarketingObjectiveLeadGenerationTitle: {
|
|
128
|
-
id: `${messagePrefix}.fbMarketingObjectiveLeadGenerationTitle`,
|
|
129
|
-
defaultMessage: 'Lead Generation',
|
|
130
|
-
},
|
|
131
|
-
fbMarketingObjectiveLeadGenerationDescription: {
|
|
132
|
-
id: `${messagePrefix}.fbMarketingObjectiveLeadGenerationDescription`,
|
|
133
|
-
defaultMessage: 'Drive more sales leads, such as email addresses, from people interested in your brand or business.',
|
|
134
|
-
},
|
|
135
|
-
fbMarketingObjectiveMessagesTitle: {
|
|
136
|
-
id: `${messagePrefix}.fbMarketingObjectiveMessagesTitle`,
|
|
137
|
-
defaultMessage: 'Messages',
|
|
138
|
-
},
|
|
139
|
-
fbMarketingObjectiveMessagesDescription: {
|
|
140
|
-
id: `${messagePrefix}.fbMarketingObjectiveMessagesDescription`,
|
|
141
|
-
defaultMessage: 'Get more people to send messages to your business in Messenger.',
|
|
142
|
-
},
|
|
143
|
-
fbMarketingObjectiveConversionsTitle: {
|
|
144
|
-
id: `${messagePrefix}.fbMarketingObjectiveConversionsTitle`,
|
|
145
|
-
defaultMessage: 'Conversions',
|
|
146
|
-
},
|
|
147
|
-
fbMarketingObjectiveConversionsDescription: {
|
|
148
|
-
id: `${messagePrefix}.fbMarketingObjectiveConversionsDescription`,
|
|
149
|
-
defaultMessage: 'Drive valuable actions on your website, app or in Messenger.',
|
|
150
|
-
},
|
|
151
|
-
fbMarketingObjectiveCatalogSalesTitle: {
|
|
152
|
-
id: `${messagePrefix}.fbMarketingObjectiveCatalogSalesTitle`,
|
|
153
|
-
defaultMessage: 'Catalog Sales',
|
|
154
|
-
},
|
|
155
|
-
fbMarketingObjectiveCatalogSalesDescription: {
|
|
156
|
-
id: `${messagePrefix}.fbMarketingObjectiveCatalogSalesDescription`,
|
|
157
|
-
defaultMessage: 'Create ads that automatically show items from your catalog based on your target audience.',
|
|
158
|
-
},
|
|
159
|
-
fbMarketingObjectiveStoreTrafficTitle: {
|
|
160
|
-
id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficTitle`,
|
|
161
|
-
defaultMessage: 'Store Traffic',
|
|
162
|
-
},
|
|
163
|
-
fbMarketingObjectiveStoreTrafficDescription: {
|
|
164
|
-
id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficDescription`,
|
|
165
|
-
defaultMessage: 'Drive visits to your physical stores by showing ads to people who are nearby.',
|
|
166
|
-
},
|
|
167
|
-
});
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
*
|
|
3
|
-
* Faceboook reducer
|
|
4
|
-
*
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { fromJS } from 'immutable';
|
|
8
|
-
import {
|
|
9
|
-
SET_MARKETING_OBJECTIVES_SUCCESS,
|
|
10
|
-
SET_MARKETING_OBJECTIVES_FAILURE,
|
|
11
|
-
} from './constants';
|
|
12
|
-
|
|
13
|
-
export const initialState = fromJS({
|
|
14
|
-
marketinObjectives: {},
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
function facebookReducer(state = initialState, action) {
|
|
18
|
-
const { type, payload } = action;
|
|
19
|
-
switch (type) {
|
|
20
|
-
case SET_MARKETING_OBJECTIVES_SUCCESS: {
|
|
21
|
-
return state.set('marketinObjectivesData', payload).set('marketinObjectivesError', null);
|
|
22
|
-
}
|
|
23
|
-
case SET_MARKETING_OBJECTIVES_FAILURE: {
|
|
24
|
-
return state.set('marketinObjectivesData', []).set('marketinObjectivesError', payload);
|
|
25
|
-
}
|
|
26
|
-
default:
|
|
27
|
-
return state;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export default facebookReducer;
|