Feature contentful

.circleci/config.yml

@@ -231,7 +231,7 @@ workflows:
             branches:
               only:
                 - develop
-                - tco21
+                - feature-contentful
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -259,7 +259,7 @@ workflows:
           filters:
             branches:
               only:
-                - staging-env-setup
+                - feature-contentful
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders email preferences setting page correctly 1`] = `
+<div
+  className="src-shared-components-Settings-Preferences-Email-___styles__EmailPreferences___2FUGT"
+>
+  <h1
+    className="src-shared-components-Settings-Preferences-Email-___styles__title___1q6eb"
+  >
+    E-Mail Preferences
+  </h1>
+  <div
+    className="src-shared-components-Settings-Preferences-Email-___styles__sub-title___2Fh1W"
+  >
+    Your preferences
+  </div>
+  <div
+    className="src-shared-components-Settings-Preferences-Email-___styles__preferences-container___38AVF"
+  >
+    <ToggleableItem
+      checked={false}
+      id="Pipeline"
+      onToggle={[Function]}
+      primaryText="Challenge Pipeline"
+      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."
+      value="Pipeline"
+    />
+    <ToggleableItem
+      checked={false}
+      id="Gig Work"
+      onToggle={[Function]}
+      primaryText="Gig Work"
+      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."
+      value="Gig Work"
+    />
+    <ToggleableItem
+      checked={false}
+      id="Monthly Newsletter"
+      onToggle={[Function]}
+      primaryText="Monthly Newsletter"
+      secondaryText="This newsletter gets sent out at the end of every month and contains a variety of important information across all of our tracks."
+      value="Monthly Newsletter"
+    />
+    <ToggleableItem
+      checked={false}
+      id="Marathon Match Reminders"
+      onToggle={[Function]}
+      primaryText="Marathon Match Reminders"
+      secondaryText="Receive updates whenever a new marathon match is scheduled."
+      value="Marathon Match Reminders"
+    />
+    <ToggleableItem
+      checked={false}
+      id="Single Round Match Reminders"
+      onToggle={[Function]}
+      primaryText="Single Round Match (SRM) Reminders"
+      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."
+      value="Single Round Match Reminders"
+    />
+    <ToggleableItem
+      checked={false}
+      id="TCO Tuesdays"
+      onToggle={[Function]}
+      primaryText="TCO Newsletter"
+      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!"
+      value="TCO Tuesdays"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Email from 'components/Settings/Preferences/Email';
+
+const rnd = new Renderer();
+
+it('renders email preferences setting page correctly', () => {
+  rnd.render((<Email email="[email protected]" preferences={[]} />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});

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

@@ -149,18 +149,18 @@ exports[`Matches shallow shapshot 1`] = `
             className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
           >
             <a
-              href="https://www.topcoder-dev.com/community/member-programs/topcoder-open"
+              href="https://www.topcoder-dev.com/blog"
             >
-              TCO
+              Blog
             </a>
           </li>
           <li
             className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
           >
             <a
-              href="https://www.topcoder-dev.com/community/member-programs"
+              href="https://www.topcoder-dev.com/community/events"
             >
-              Programs
+              Events Calendar
             </a>
           </li>
           <li
@@ -172,6 +172,15 @@ exports[`Matches shallow shapshot 1`] = `
               Forums
             </a>
           </li>
+          <li
+            className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
+          >
+            <a
+              href="https://www.topcoder-dev.com/community/member-programs"
+            >
+              Programs
+            </a>
+          </li>
           <li
             className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
           >
@@ -185,9 +194,9 @@ exports[`Matches shallow shapshot 1`] = `
             className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
           >
             <a
-              href="https://www.topcoder-dev.com/blog"
+              href="https://www.topcoder-dev.com/community/member-programs/topcoder-open"
             >
-              Blog
+              TCO
             </a>
           </li>
           <li

config/default.js

@@ -71,6 +71,7 @@ module.exports = {
 
   /* Holds params to signup for different newsletters. */
   NEWSLETTER_SIGNUP: {
+    DEFAUL_LIST_ID: '28bfd3c062',
     COGNITIVE: {
       APIKEY: '',
       URL: '',

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

@@ -80,8 +80,10 @@ other types too.
   | ---       | ---                      | ---                                                                               |
   | label     | Subscribe for Newsletter | Optional. Custom label to show on the button.                                     |
   | listId    |                          | ID of MailChimp list to subscribe.                                                |
-  | interests | empty string             | Optional. commas separated string of group ids to which user should be subscribed |
-
+  | tags      |                          | ID of MailChimp tags to subscribe.                                                |
+  | buttonTheme | primary-green-md | Theme key(`tc-` is omitted) for the button. See https://community-app.topcoder.com/examples/contentful/contentblock/3k7k1JpnSvIRrJYWs4izYi |
+  | title | Sign up for the Topcoder Newsletter | Modal title |
+  | desc | Do you want to subscribe to this newsletter? | Modal description |
 
 - #### VideoModalButton
   *Example:* `<VideoModalButton videoTitle="Video Title" videoUrl="Video URL" />`

src/shared/actions/newsletterPreferences.js

@@ -0,0 +1,104 @@
+/**
+ * Actions for the Newsletter preference container.
+ */
+
+/* global fetch */
+import _ from 'lodash';
+import { createActions } from 'redux-actions';
+import { config } from 'topcoder-react-utils';
+
+const PROXY_ENDPOINT = `${config.URL.COMMUNITY_APP}/api/mailchimp`;
+
+// Fetching member's newsletter preferences init
+function fetchDataInit(email) {
+  return email;
+}
+
+// Fetching member's newsletter preferences
+async function fetchDataDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID) {
+  /* NOTE: In the real life in most cases you don't want to use fetch() directly
+   * in an action. You want to create a service for your calls and use it here.
+   * However, in this example, to keep it a bit more compact, we use fetch()
+   * directly here. */
+  try {
+    let error = false;
+    const subs = await fetch(`${PROXY_ENDPOINT}/${listId}/members/${emailHash}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((result) => {
+        if (result.status !== 200) error = true;
+        return result.json();
+      });
+
+    return {
+      email: emailHash,
+      preferences: subs.tags,
+      error,
+    };
+  } catch (error) {
+    return {
+      email: emailHash,
+      error,
+    };
+  }
+}
+
+// Updates member newsletter subscription
+async function updateSubscriptionsDone(
+  emailHash, tagId, status, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID,
+) {
+  /* NOTE: In the real life in most cases you don't want to use fetch() directly
+   * in an action. You want to create a service for your calls and use it here.
+   * However, in this example, to keep it a bit more compact, we use fetch()
+   * directly here. */
+  try {
+    let error = false;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${emailHash}/tags`;
+
+    const data = {
+      tags: [
+        { name: tagId, status: status ? 'active' : 'inactive' },
+      ],
+    };
+
+    const formData = JSON.stringify(data);
+    // use proxy for avoid 'Access-Control-Allow-Origin' bug
+    await fetch(fetchUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: formData,
+    })
+      .then((result) => {
+        if (!result.ok) error = true;
+        return result.json();
+      });
+
+    return {
+      id: tagId,
+      checked: status,
+      email: emailHash,
+      error,
+    };
+  } catch (error) {
+    return {
+      id: tagId,
+      checked: status,
+      email: emailHash,
+      error,
+    };
+  }
+}
+
+export default createActions({
+  NEWSLETTER_PREFERENCES: {
+    FETCH_DATA_INIT: fetchDataInit,
+    FETCH_DATA_DONE: fetchDataDone,
+    UPDATE_TAG_INIT: _.identity,
+    UPDATE_TAG_DONE: updateSubscriptionsDone,
+  },
+});

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

@@ -34,13 +34,15 @@ function ConfirmModal({
   skipConfirmSignup,
   token,
   theme,
+  title,
+  desc,
 }) {
   let text;
   if (token) {
     text = (
       <div className={modalStyle.modalMsg}>
-        <h4>Sign up for the Topcoder Newsletter</h4>
-        <p style={{ 'font-size': '24px' }}>Do you want to subscribe to this newsletter?</p>
+        <h4>{title}</h4>
+        <p style={{ fontSize: '24px' }}>{desc}</p>
       </div>
     );
     if (skipConfirmSignup) {
@@ -49,7 +51,7 @@ function ConfirmModal({
   } else {
     text = customTcAuthModalText || (
       <div className={modalStyle.modalMsg}>
-        <h4>Sign up for the Topcoder Newsletter</h4>
+        <h4>{title}</h4>
         <p>
           You must be a Topcoder member before you can signup for Newsletter.
           To signup, login if you are already a member. If not, register first.
@@ -84,7 +86,7 @@ function ConfirmModal({
               button: buttonThemes.tc['primary-green-md'],
             }}
           >
-            SIGNUP
+            Ok
           </PrimaryButton>
         </div>
       ) : (
@@ -130,6 +132,8 @@ ConfirmModal.propTypes = {
   skipConfirmSignup: PT.bool.isRequired,
   theme: PT.shape().isRequired,
   token: PT.string,
+  title: PT.string.isRequired,
+  desc: PT.string.isRequired,
 };
 
 export default themr('NewsletterSignupForMembers-Modal', defaultStyle)(ConfirmModal);