chore: show human-readable error when something fails at newsletter subs

src/back/routes/newsletter.ts

@@ -6,13 +6,14 @@ import fetch from 'isomorphic-fetch'
 import isEmail from 'validator/lib/isEmail'
 
 import { ErrorService } from '../../services/ErrorService'
+import { NewsletterSubscriptionResult } from '../../shared/types/newsletter'
 import { ErrorCategory } from '../../utils/errorCategories'
 
 export default routes((router) => {
   router.post('/newsletter-subscribe', handleAPI(handleSubscription))
 })
 
-async function handleSubscription(req: Request) {
+async function handleSubscription(req: Request): Promise<NewsletterSubscriptionResult> {
   const email = req.body.email
   if (!isEmail(email)) {
     throw new RequestError('Invalid email', RequestError.BadRequest)
@@ -28,13 +29,16 @@ async function handleSubscription(req: Request) {
     },
     body: `{ "email": "${email}" }`,
   })
-
   const data = await response.json()
+
   if (data.errors) {
-    const errorMessage = 'Error subscribing to newsletter'
-    ErrorService.report(errorMessage, { email, error: JSON.stringify(data.errors), category: ErrorCategory.Newsletter })
-    throw new RequestError(errorMessage, RequestError.InternalServerError)
+    ErrorService.report('Error subscribing to newsletter', {
+      email,
+      error: JSON.stringify(data.errors),
+      category: ErrorCategory.Newsletter,
+    })
+    return { email, error: true, details: 'Invalid email' }
   }
 
-  return data
+  return { email, error: false, details: '' }
 }

src/clients/Governance.ts

@@ -35,6 +35,7 @@ import { SubscriptionAttributes } from '../entities/Subscription/types'
 import { Topic } from '../entities/SurveyTopic/types'
 import { ProjectHealth, UpdateAttributes, UpdateResponse } from '../entities/Updates/types'
 import { Vote, VotedProposal, Voter } from '../entities/Votes/types'
+import { NewsletterSubscriptionResult } from '../shared/types/newsletter'
 import Time from '../utils/date/Time'
 
 import { TransparencyBudget } from './DclData'
@@ -651,7 +652,7 @@ export class Governance extends API {
   }
 
   async subscribeToNewsletter(email: string) {
-    const response = await this.fetch<ApiResponse<string>>(
+    const response = await this.fetch<ApiResponse<NewsletterSubscriptionResult>>(
       `/newsletter-subscribe`,
       this.options().method('POST').json({
         email,

src/components/Modal/NewsletterSubscriptionModal/NewsletterSubscriptionModal.tsx

@@ -12,6 +12,7 @@ import isEmail from 'validator/lib/isEmail'
 import { Governance } from '../../../clients/Governance'
 import useAsyncTask from '../../../hooks/useAsyncTask'
 import useFormatMessage from '../../../hooks/useFormatMessage'
+import { NewsletterSubscriptionResult } from '../../../shared/types/newsletter'
 import { ANONYMOUS_USR_SUBSCRIPTION, NEWSLETTER_SUBSCRIPTION_KEY } from '../../Banner/Subscription/SubscriptionBanner'
 import Label from '../../Common/Typography/Label'
 import Text from '../../Common/Typography/Text'
@@ -20,34 +21,11 @@ import '../ProposalModal.css'
 
 import './NewsletterSubscriptionModal.css'
 
-type NewsletterSubscriptionResult = {
-  email: string
-  error: boolean
-  details: string | null
-}
-
 type Props = Omit<ModalProps, 'children'> & {
   onSubscriptionSuccess?: () => void
   subscribed: boolean
 }
 
-async function subscribe(email: string) {
-  try {
-    await Governance.get().subscribeToNewsletter(email)
-    return {
-      email,
-      error: false,
-      details: null,
-    }
-  } catch (err) {
-    return {
-      email,
-      error: true,
-      details: (err as any).body.detail,
-    }
-  }
-}
-
 export function NewsletterSubscriptionModal({ onSubscriptionSuccess, subscribed, ...props }: Props) {
   const [account] = useAuthContext()
   const t = useFormatMessage()
@@ -89,7 +67,7 @@ export function NewsletterSubscriptionModal({ onSubscriptionSuccess, subscribed,
 
   const [subscribing, handleAccept] = useAsyncTask(async () => {
     if (state.email && isEmail(state.email) && onSubscriptionSuccess) {
-      const subscriptionResult: NewsletterSubscriptionResult = await subscribe(state.email)
+      const subscriptionResult: NewsletterSubscriptionResult = await Governance.get().subscribeToNewsletter(state.email)
       if (subscriptionResult.error) {
         setState({
           isValid: false,

src/components/Modal/ProposalModal.css

@@ -26,6 +26,7 @@
 }
 
 .ProposalModal__Actions {
+  margin-top: 8px;
   width: 100%;
 }
 

src/shared/types/newsletter.ts

@@ -0,0 +1,5 @@
+export type NewsletterSubscriptionResult = {
+  email: string
+  error: boolean
+  details: string | null
+}