Merge pull request #1365 from flmel/fix/newsletter

fix: subscribe form

src/components/scrollToTop.tsx

@@ -14,7 +14,6 @@ const fadeIn = keyframes`
 const ScrollToTopButton = styled(Button)<{ isVisible: boolean }>`
   position: fixed;
   bottom: 15px;
-  right: 30px;
   cursor: pointer;
   z-index: 1000;
   animation: ${fadeIn} 0.5s;

src/config.ts

@@ -104,7 +104,7 @@ export const googleCalendarApiKey = process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_
 export const devhubCommunityCalendarId = process.env.NEXT_PUBLIC_DEVHUB_COMMUNITY_CALENDAR_ID ?? '';
 export const mailchimpApiKey = process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY ?? '';
 export const mailchimpRegion = process.env.NEXT_PUBLIC_MAILCHIMP_REGION ?? '';
-export const mailchimpAudienceId = process.env.NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID ?? '';
+export const newsletterAudienceId = process.env.NEXT_PUBLIC_NEWSLETTER_AUDIENCE_ID ?? '';
 export const EVMWalletChain = evmWalletChains[networkId];
 
 export const commitModalBypassAuthorIds = (process.env.NEXT_PUBLIC_COMMIT_MODAL_BYPASS_AUTHOR_IDS ?? '')

src/pages/api/newsletter/subscribe.ts

@@ -1,7 +1,7 @@
 import mailchimp from '@mailchimp/mailchimp_marketing';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { mailchimpApiKey, mailchimpAudienceId, mailchimpRegion } from '../../../config';
+import { mailchimpApiKey, mailchimpRegion, newsletterAudienceId } from '../../../config';
 
 mailchimp.setConfig({
   apiKey: mailchimpApiKey,
@@ -13,7 +13,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { email } = req.body;
 
     try {
-      const response = await mailchimp.lists.addListMember(mailchimpAudienceId, {
+      const response = await mailchimp.lists.addListMember(newsletterAudienceId, {
         email_address: email,
         status: 'pending',
       });
@@ -25,13 +25,20 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         success: true,
         message: 'Form submitted successfully! Please confirm your email',
       });
-    } catch (error) {
+    } catch (error: any) {
       console.error('Error adding to list:', error);
 
-      res.status(500).json({
-        success: false,
-        message: 'An error occurred while processing your request.',
-      });
+      if (error.status === 400 && error.response.body.title === 'Member Exists') {
+        res.status(500).json({
+          success: false,
+          message: 'Email already subscribed.',
+        });
+      } else {
+        res.status(500).json({
+          success: false,
+          message: 'An error occurred while processing your request.',
+        });
+      }
     }
   }
 }

src/pages/newsletter.tsx

@@ -107,6 +107,7 @@ const NewsPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { id } = router.query;
   const [isFormSubmitted, setIsFormSubmitted] = useState(false);
+  const [responseError, setResponseError] = useState<string | null>(null);
 
   const { data: campaigns, isLoading: campaignLoading } = useSWR('/api/newsletter', fetcher);
   const issueId = useMemo(() => id || campaigns?.[0]?.id, [id, campaigns]);
@@ -123,6 +124,7 @@ const NewsPage: NextPageWithLayout = () => {
 
   const onSubmit: SubmitHandler<SubscribeForm> = async (data) => {
     try {
+      setResponseError(null);
       const response = await fetch('/api/newsletter/subscribe', {
         method: 'POST',
         headers: {
@@ -134,17 +136,19 @@ const NewsPage: NextPageWithLayout = () => {
       });
 
       await response;
+      const responseData = await response.json();
 
       if (response.ok) {
         setIsFormSubmitted(true);
+      } else {
+        setResponseError(responseData?.message || 'Failed to subscribe. Please try again.');
       }
     } catch (error) {
       console.error(error);
     }
   };
 
   if (campaignLoading) return;
-  console.log('CAMP', campaigns);
   if ('error' in campaigns) return <Section grow="available"> Failed to load newsletter </Section>;
 
   return (
@@ -166,7 +170,7 @@ const NewsPage: NextPageWithLayout = () => {
         <Flex style={{ flexDirection: 'column' }}>
           <Fixed>
             <GreenBox style={{ padding: '15px' }}>
-              <h3>
+              <h3 style={{ marginBottom: '0.5rem' }}>
                 <Text size="text-l">Subscribe to the newsletter</Text>
               </h3>
               {isFormSubmitted ? (
@@ -181,12 +185,15 @@ const NewsPage: NextPageWithLayout = () => {
                 <>
                   <Form onSubmit={handleSubmit(onSubmit)}>
                     {errors.email && <span style={{ color: 'red' }}> This field is required!</span>}
+                    {responseError && <span style={{ color: 'red' }}>{responseError}</span>}
                     <SubscribeForm gap="none">
                       <input
                         {...register('email', { required: true })}
                         placeholder="[email protected]"
                         type="email"
-                        className=""
+                        onChange={() => {
+                          setResponseError(null);
+                        }}
                       />
                       <Button
                         label="Subscribe"
@@ -235,8 +242,8 @@ const NewsPage: NextPageWithLayout = () => {
             <hr />
           </Fixed>
         </Flex>
+        <ScrollToTop />
       </Grid>
-      <ScrollToTop />
     </Section>
   );
 };