Skip to content

Commit 925d4dd

Browse files
authored
Merge pull request #4634 from topcoder-platform/develop
Contentful updates
2 parents 4890841 + 16b426b commit 925d4dd

File tree

20 files changed

+535
-166
lines changed

20 files changed

+535
-166
lines changed

.circleci/config.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ workflows:
231231
branches:
232232
only:
233233
- develop
234-
- tco21
234+
- feature-contentful
235235
# This is alternate dev env for parallel testing
236236
- "build-test":
237237
context : org-global
@@ -259,7 +259,7 @@ workflows:
259259
filters:
260260
branches:
261261
only:
262-
- staging-env-setup
262+
- feature-contentful
263263
# Production builds are exectuted
264264
# when PR is merged to the master
265265
# Don't change anything in this configuration
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders email preferences setting page correctly 1`] = `
4+
<div
5+
className="src-shared-components-Settings-Preferences-Email-___styles__EmailPreferences___2FUGT"
6+
>
7+
<h1
8+
className="src-shared-components-Settings-Preferences-Email-___styles__title___1q6eb"
9+
>
10+
E-Mail Preferences
11+
</h1>
12+
<div
13+
className="src-shared-components-Settings-Preferences-Email-___styles__sub-title___2Fh1W"
14+
>
15+
Your preferences
16+
</div>
17+
<div
18+
className="src-shared-components-Settings-Preferences-Email-___styles__preferences-container___38AVF"
19+
>
20+
<ToggleableItem
21+
checked={false}
22+
id="Pipeline"
23+
onToggle={[Function]}
24+
primaryText="Challenge Pipeline"
25+
secondaryText="Subscribe to this newsletter if you want to get updates on the types of challenges coming up in the future. To view these challenges at your leisure you can always visit the <a href=\\"https://www.topcoder.com/community/pipeline\\" style=\\"color:#0d61bf;text-decoration:underline\\">Challenge Pipeline</a> page."
26+
value="Pipeline"
27+
/>
28+
<ToggleableItem
29+
checked={false}
30+
id="Gig Work"
31+
onToggle={[Function]}
32+
primaryText="Gig Work"
33+
secondaryText="This newsletter gets sent out at various times, specifically when we have an opportunity of mass appeal. For more information you can visit the <a href=\\"https://www.topcoder.com/community/taas\\" style=\\"color:#0d61bf;text-decoration:underline\\">Gig Work</a> page."
34+
value="Gig Work"
35+
/>
36+
<ToggleableItem
37+
checked={false}
38+
id="Monthly Newsletter"
39+
onToggle={[Function]}
40+
primaryText="Monthly Newsletter"
41+
secondaryText="This newsletter gets sent out at the end of every month and contains a variety of important information across all of our tracks."
42+
value="Monthly Newsletter"
43+
/>
44+
<ToggleableItem
45+
checked={false}
46+
id="Marathon Match Reminders"
47+
onToggle={[Function]}
48+
primaryText="Marathon Match Reminders"
49+
secondaryText="Receive updates whenever a new marathon match is scheduled."
50+
value="Marathon Match Reminders"
51+
/>
52+
<ToggleableItem
53+
checked={false}
54+
id="Single Round Match Reminders"
55+
onToggle={[Function]}
56+
primaryText="Single Round Match (SRM) Reminders"
57+
secondaryText="Attention Competitive Programmers! If there is any newsletter you are subscribing too, it better be this one. Receive updates when a new SRM event is scheduled."
58+
value="Single Round Match Reminders"
59+
/>
60+
<ToggleableItem
61+
checked={false}
62+
id="TCO Tuesdays"
63+
onToggle={[Function]}
64+
primaryText="TCO Newsletter"
65+
secondaryText="For all the latest updates surrounding the <a href=\\"https://www.topcoder.com/community/member-programs/topcoder-open\\" style=\\"color:#0d61bf;text-decoration:underline\\">Topcoder Open</a> you should definitely be subscribing to this one. Expect an update in your mailbox every Tuesday!"
66+
value="TCO Tuesdays"
67+
/>
68+
</div>
69+
</div>
70+
`;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import Renderer from 'react-test-renderer/shallow';
3+
4+
import Email from 'components/Settings/Preferences/Email';
5+
6+
const rnd = new Renderer();
7+
8+
it('renders email preferences setting page correctly', () => {
9+
rnd.render((<Email email="[email protected]" preferences={[]} />));
10+
expect(rnd.getRenderOutput()).toMatchSnapshot();
11+
});

__tests__/shared/components/Settings/Preferences/__snapshots__/index.jsx.snap

-50
This file was deleted.

__tests__/shared/components/Settings/Preferences/index.jsx

-11
This file was deleted.

__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap

+15-6
Original file line numberDiff line numberDiff line change
@@ -149,18 +149,18 @@ exports[`Matches shallow shapshot 1`] = `
149149
className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
150150
>
151151
<a
152-
href="https://www.topcoder-dev.com/community/member-programs/topcoder-open"
152+
href="https://www.topcoder-dev.com/blog"
153153
>
154-
TCO
154+
Blog
155155
</a>
156156
</li>
157157
<li
158158
className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
159159
>
160160
<a
161-
href="https://www.topcoder-dev.com/community/member-programs"
161+
href="https://www.topcoder-dev.com/community/events"
162162
>
163-
Programs
163+
Events Calendar
164164
</a>
165165
</li>
166166
<li
@@ -172,6 +172,15 @@ exports[`Matches shallow shapshot 1`] = `
172172
Forums
173173
</a>
174174
</li>
175+
<li
176+
className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
177+
>
178+
<a
179+
href="https://www.topcoder-dev.com/community/member-programs"
180+
>
181+
Programs
182+
</a>
183+
</li>
175184
<li
176185
className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
177186
>
@@ -185,9 +194,9 @@ exports[`Matches shallow shapshot 1`] = `
185194
className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
186195
>
187196
<a
188-
href="https://www.topcoder-dev.com/blog"
197+
href="https://www.topcoder-dev.com/community/member-programs/topcoder-open"
189198
>
190-
Blog
199+
TCO
191200
</a>
192201
</li>
193202
<li

config/default.js

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ module.exports = {
7171

7272
/* Holds params to signup for different newsletters. */
7373
NEWSLETTER_SIGNUP: {
74+
DEFAUL_LIST_ID: '28bfd3c062',
7475
COGNITIVE: {
7576
APIKEY: '',
7677
URL: '',

docs/contentful/custom-inline-components-in-markdown-fields.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,10 @@ other types too.
8080
| --- | --- | --- |
8181
| label | Subscribe for Newsletter | Optional. Custom label to show on the button. |
8282
| listId | | ID of MailChimp list to subscribe. |
83-
| interests | empty string | Optional. commas separated string of group ids to which user should be subscribed |
84-
83+
| tags | | ID of MailChimp tags to subscribe. |
84+
| buttonTheme | primary-green-md | Theme key(`tc-` is omitted) for the button. See https://community-app.topcoder.com/examples/contentful/contentblock/3k7k1JpnSvIRrJYWs4izYi |
85+
| title | Sign up for the Topcoder Newsletter | Modal title |
86+
| desc | Do you want to subscribe to this newsletter? | Modal description |
8587

8688
- #### VideoModalButton
8789
*Example:* `<VideoModalButton videoTitle="Video Title" videoUrl="Video URL" />`
+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* Actions for the Newsletter preference container.
3+
*/
4+
5+
/* global fetch */
6+
import _ from 'lodash';
7+
import { createActions } from 'redux-actions';
8+
import { config } from 'topcoder-react-utils';
9+
10+
const PROXY_ENDPOINT = `${config.URL.COMMUNITY_APP}/api/mailchimp`;
11+
12+
// Fetching member's newsletter preferences init
13+
function fetchDataInit(email) {
14+
return email;
15+
}
16+
17+
// Fetching member's newsletter preferences
18+
async function fetchDataDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID) {
19+
/* NOTE: In the real life in most cases you don't want to use fetch() directly
20+
* in an action. You want to create a service for your calls and use it here.
21+
* However, in this example, to keep it a bit more compact, we use fetch()
22+
* directly here. */
23+
try {
24+
let error = false;
25+
const subs = await fetch(`${PROXY_ENDPOINT}/${listId}/members/${emailHash}`, {
26+
method: 'GET',
27+
headers: {
28+
'Content-Type': 'application/json',
29+
},
30+
})
31+
.then((result) => {
32+
if (result.status !== 200) error = true;
33+
return result.json();
34+
});
35+
36+
return {
37+
email: emailHash,
38+
preferences: subs.tags,
39+
error,
40+
};
41+
} catch (error) {
42+
return {
43+
email: emailHash,
44+
error,
45+
};
46+
}
47+
}
48+
49+
// Updates member newsletter subscription
50+
async function updateSubscriptionsDone(
51+
emailHash, tagId, status, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID,
52+
) {
53+
/* NOTE: In the real life in most cases you don't want to use fetch() directly
54+
* in an action. You want to create a service for your calls and use it here.
55+
* However, in this example, to keep it a bit more compact, we use fetch()
56+
* directly here. */
57+
try {
58+
let error = false;
59+
const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${emailHash}/tags`;
60+
61+
const data = {
62+
tags: [
63+
{ name: tagId, status: status ? 'active' : 'inactive' },
64+
],
65+
};
66+
67+
const formData = JSON.stringify(data);
68+
// use proxy for avoid 'Access-Control-Allow-Origin' bug
69+
await fetch(fetchUrl, {
70+
method: 'POST',
71+
headers: {
72+
'Content-Type': 'application/json',
73+
},
74+
body: formData,
75+
})
76+
.then((result) => {
77+
if (!result.ok) error = true;
78+
return result.json();
79+
});
80+
81+
return {
82+
id: tagId,
83+
checked: status,
84+
email: emailHash,
85+
error,
86+
};
87+
} catch (error) {
88+
return {
89+
id: tagId,
90+
checked: status,
91+
email: emailHash,
92+
error,
93+
};
94+
}
95+
}
96+
97+
export default createActions({
98+
NEWSLETTER_PREFERENCES: {
99+
FETCH_DATA_INIT: fetchDataInit,
100+
FETCH_DATA_DONE: fetchDataDone,
101+
UPDATE_TAG_INIT: _.identity,
102+
UPDATE_TAG_DONE: updateSubscriptionsDone,
103+
},
104+
});

src/shared/components/NewsletterSignupForMembers/ConfirmModal/index.jsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,15 @@ function ConfirmModal({
3434
skipConfirmSignup,
3535
token,
3636
theme,
37+
title,
38+
desc,
3739
}) {
3840
let text;
3941
if (token) {
4042
text = (
4143
<div className={modalStyle.modalMsg}>
42-
<h4>Sign up for the Topcoder Newsletter</h4>
43-
<p style={{ 'font-size': '24px' }}>Do you want to subscribe to this newsletter?</p>
44+
<h4>{title}</h4>
45+
<p style={{ fontSize: '24px' }}>{desc}</p>
4446
</div>
4547
);
4648
if (skipConfirmSignup) {
@@ -49,7 +51,7 @@ function ConfirmModal({
4951
} else {
5052
text = customTcAuthModalText || (
5153
<div className={modalStyle.modalMsg}>
52-
<h4>Sign up for the Topcoder Newsletter</h4>
54+
<h4>{title}</h4>
5355
<p>
5456
You must be a Topcoder member before you can signup for Newsletter.
5557
To signup, login if you are already a member. If not, register first.
@@ -84,7 +86,7 @@ function ConfirmModal({
8486
button: buttonThemes.tc['primary-green-md'],
8587
}}
8688
>
87-
SIGNUP
89+
Ok
8890
</PrimaryButton>
8991
</div>
9092
) : (
@@ -130,6 +132,8 @@ ConfirmModal.propTypes = {
130132
skipConfirmSignup: PT.bool.isRequired,
131133
theme: PT.shape().isRequired,
132134
token: PT.string,
135+
title: PT.string.isRequired,
136+
desc: PT.string.isRequired,
133137
};
134138

135139
export default themr('NewsletterSignupForMembers-Modal', defaultStyle)(ConfirmModal);

0 commit comments

Comments
 (0)