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

src/back/routes/newsletter.ts

@@ -7,12 +7,13 @@ import isEmail from 'validator/lib/isEmail'
 
 import { ErrorService } from '../../services/ErrorService'
 import { ErrorCategory } from '../../utils/errorCategories'
+import { NewsletterSubscriptionResult } from '../types/newsletter'
 
 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/back/types/newsletter.ts

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

src/clients/Governance.ts

@@ -4,6 +4,7 @@ import env from 'decentraland-gatsby/dist/utils/env'
 import snakeCase from 'lodash/snakeCase'
 
 import { AirdropOutcome } from '../back/types/AirdropJob'
+import { NewsletterSubscriptionResult } from '../back/types/newsletter'
 import { SpecState } from '../components/Debug/UploadBadgeSpec'
 import { GOVERNANCE_API } from '../constants'
 import { BadgeCreationResult, RevokeOrReinstateResult, UserBadges } from '../entities/Badges/types'
@@ -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

@@ -9,6 +9,7 @@ import { Header } from 'decentraland-ui/dist/components/Header/Header'
 import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 import isEmail from 'validator/lib/isEmail'
 
+import { NewsletterSubscriptionResult } from '../../../back/types/newsletter'
 import { Governance } from '../../../clients/Governance'
 import useAsyncTask from '../../../hooks/useAsyncTask'
 import useFormatMessage from '../../../hooks/useFormatMessage'
@@ -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%;
 }