resources/assets/components/pages/AccountPage/Subscriptions/Subscriptions.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import EmailSubscriptions from './EmailSubscriptions';
 import CancelEmailSubscription from './CancelEmailSubscription';
+import LegacyEmailSubscriptions from '../../../utilities/EmailSubscription/LegacyEmailSubscriptions';
 
 const Subscriptions = props => (
   <div className="grid-wide">
     <h1 className="text-xl">Email Subscriptions</h1>
+
     <p className="text-gray-600">
       Our newsletters can help you stay informed, stay entertained, and even
       help you win scholarships.
     </p>
 
-    <EmailSubscriptions {...props} />
-    <div>
-      <CancelEmailSubscription {...props} />
-    </div>
+    <LegacyEmailSubscriptions {...props} />
+
+    <CancelEmailSubscription {...props} />
   </div>
 );
 

resources/assets/components/pages/AccountPage/Subscriptions/EmailSubscriptionItem.js → resources/assets/components/utilities/EmailSubscription/LegacyEmailSubscriptionItem.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
-import Spinner from '../../../artifacts/Spinner/Spinner';
-import ToggleButton from '../../../utilities/Button/ToggleButton';
+import Spinner from '../../artifacts/Spinner/Spinner';
+import ToggleButton from '../Button/ToggleButton';
 import {
   EMAIL_SUBSCRIPTION_QUERY,
   EMAIL_SUBSCRIPTION_MUTATION,
-} from '../../../utilities/NewsletterSubscription/ToggleSubscriptionButton';
+} from '../NewsletterSubscription/ToggleSubscriptionButton';
 
-const EmailSubscriptionItem = ({
+const LegacyEmailSubscriptionItem = ({
   attributes,
   topic,
   name,
@@ -75,7 +75,7 @@ const EmailSubscriptionItem = ({
   );
 };
 
-EmailSubscriptionItem.propTypes = {
+LegacyEmailSubscriptionItem.propTypes = {
   attributes: PropTypes.object,
   topic: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
@@ -84,8 +84,8 @@ EmailSubscriptionItem.propTypes = {
   descriptionHeader: PropTypes.string.isRequired,
 };
 
-EmailSubscriptionItem.defaultProps = {
+LegacyEmailSubscriptionItem.defaultProps = {
   attributes: null,
 };
 
-export default EmailSubscriptionItem;
+export default LegacyEmailSubscriptionItem;

resources/assets/components/pages/AccountPage/Subscriptions/EmailSubscriptions.js → resources/assets/components/utilities/EmailSubscription/LegacyEmailSubscriptions.js

@@ -1,51 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import NewsletterImages from './NewsletterImages';
-import EmailSubscriptionItem from './EmailSubscriptionItem';
+import LegacyNewsletterImages from './LegacyNewsletterImages';
+import LegacyEmailSubscriptionItem from './LegacyEmailSubscriptionItem';
 
-const EmailSubscriptions = () => (
+const LegacyEmailSubscriptions = () => (
   <div className="gallery-grid gallery-grid-quartet my-6 -mx-3">
-    <EmailSubscriptionItem
+    <LegacyEmailSubscriptionItem
       attributes={{ 'data-testid': 'community-newsletter-subscription' }}
       topic="COMMUNITY"
       name="What You're Doing"
-      image={NewsletterImages.CommunityNewsletter}
+      image={LegacyNewsletterImages.CommunityNewsletter}
       descriptionHeader="Sent every Tuesday"
       description="A roundup of photos, writing, and stories of impact from the DoSomething community and members like you."
     />
-    <EmailSubscriptionItem
+    <LegacyEmailSubscriptionItem
       attributes={{ 'data-testid': 'news-newsletter-subscription' }}
       topic="NEWS"
       name="The Breakdown"
-      image={NewsletterImages.NewsNewsletter}
+      image={LegacyNewsletterImages.NewsNewsletter}
       descriptionHeader="Sent every Wednesday"
       description="Don’t just read the news…*change* the news. Our current events newsletter has headlines, along with immediate ways to impact them."
     />
-    <EmailSubscriptionItem
+    <LegacyEmailSubscriptionItem
       attributes={{ 'data-testid': 'lifestyle-newsletter-subscription' }}
       topic="LIFESTYLE"
       name="The Boost"
-      image={NewsletterImages.LifestyleNewsletter}
+      image={LegacyNewsletterImages.LifestyleNewsletter}
       descriptionHeader="Sent every Thursday"
       description="Stories of incredible young people, actionable how-tos, inspirational playlists, and other content to live your best life and help others do the same."
     />
-    <EmailSubscriptionItem
+    <LegacyEmailSubscriptionItem
       attributes={{ 'data-testid': 'scholarships-newsletter-subscription' }}
       topic="SCHOLARSHIPS"
       name="Pays to Do Good"
-      image={NewsletterImages.ScholarshipNewsletter}
+      image={LegacyNewsletterImages.ScholarshipNewsletter}
       descriptionHeader="Sent monthly every first Friday"
       description="Alerts on new ways to earn scholarships by doing social good, plus announcements of scholarship winners."
     />
   </div>
 );
 
-EmailSubscriptions.propTypes = {
+LegacyEmailSubscriptions.propTypes = {
   user: PropTypes.shape({
     emailSubscriptionTopics: PropTypes.arrayOf(PropTypes.string),
     id: PropTypes.string,
   }).isRequired,
 };
 
-export default EmailSubscriptions;
+export default LegacyEmailSubscriptions;

resources/assets/components/utilities/EmailSubscription/LegacyNewsletterImages.js

@@ -0,0 +1,13 @@
+import CommunityNewsletter from './LegacyNewsletters/community.svg';
+import NewsNewsletter from './LegacyNewsletters/news.svg';
+import LifestyleNewsletter from './LegacyNewsletters/lifestyle.svg';
+import ScholarshipNewsletter from './LegacyNewsletters/scholarships.svg';
+
+const LegacyNewsletterImages = {
+  CommunityNewsletter,
+  NewsNewsletter,
+  LifestyleNewsletter,
+  ScholarshipNewsletter,
+};
+
+export default LegacyNewsletterImages;