Fix newsletter signup form actions and source metadata

Author: pimterry

src/app/(thank-you-pages)/app-purchase-thank-you/page.tsx

@@ -59,8 +59,7 @@ export default function AppPurchaseThankYouPage() {
                     <ContentCard
                       title="Join the mailing list now, so you don't miss new features & releases"
                       text="There's a lot of new HTTP Toolkit features coming soon, like full scripting support, gRPC & GraphQL integration, and request diffing tools. Keep yourself up to date:"
-                      $isNewsletter
-                      action={NEWSLETTER_URLS.download}
+                      newsletter={{ action: NEWSLETTER_URLS.default, source: 'app-purchase-thank-you' }}
                     />
                   </Stack>
                 </StyledTextContent>

src/app/(thank-you-pages)/web-purchase-thank-you/page.tsx

@@ -67,8 +67,7 @@ export default function WebPurchaseThankYouPage() {
                     <ContentCard
                       title="Join the mailing list now, so you don't miss new features & releases"
                       text="There's a lot of new HTTP Toolkit features coming soon, like full scripting support, gRPC & GraphQL integration, and request diffing tools. Keep yourself up to date:"
-                      $isNewsletter
-                      action={NEWSLETTER_URLS.download}
+                      newsletter={{ action: NEWSLETTER_URLS.default, source: 'web-purchase-thank-you' }}
                     />
                   </Stack>
                 </StyledTextContent>

src/app/download/[slug]/page.tsx

@@ -104,8 +104,7 @@ export default async function DownloadPage({ params }: DownloadPageProps) {
             <ContentCard
                 title="Join the mailing list now, so you don't miss new features & releases"
                 text="There's a lot of new HTTP Toolkit features coming soon, like full scripting support, gRPC & GraphQL integration, and request diffing tools. Keep yourself up to date:"
-                $isNewsletter
-                action={NEWSLETTER_URLS.download}
+                newsletter={{ action: NEWSLETTER_URLS.default, source: 'download-thank-you' }}
               />
           </StyledDownloadaColumns>
         </Container>

src/components/modules/content-card/content-card.types.ts

@@ -8,5 +8,8 @@ export interface ContentCardProps extends StyledContentCardProps {
   title: string;
   text?: string;
   button?: ButtonProps;
-  action?: string;
+  newsletter?: {
+    action: string;
+    source: string;
+  }
 }

src/components/modules/content-card/form/index.tsx

@@ -3,13 +3,12 @@
 import { Input } from '../../input';
 import { StyledNewsletterSuccess } from '../../newsletter/newsletter.styles';
 import { StyledContentCardForm } from '../content-card.styles';
-import type { ContentCardProps } from '../content-card.types';
 
 import { Button } from '@/components/elements/button';
 import { Text } from '@/components/elements/text';
 import { useNewsletterSubmit } from '@/lib/hooks/use-newsletter-submit';
 
-export const ContentCardForm = ({ action }: Pick<ContentCardProps, 'action'>) => {
+export const NewsletterForm = ({ action, source }: { action: string, source: string }) => {
   const [isSuccess, handleSubmit] = useNewsletterSubmit();
   return (
     <>
@@ -24,6 +23,10 @@ export const ContentCardForm = ({ action }: Pick<ContentCardProps, 'action'>) =>
         <div className="visually-hidden">
           <label htmlFor="extra-info">An extra form field you should ignore</label>
           <input type="text" id="extra-info" name="first-name" tab-index="-1" autoComplete="nope" />
+
+          { source &&
+              <input type="hidden" name="attributes[source]" value={source} />
+          }
         </div>
         <Input id="email" placeholder="Email address" type="email" required />
         <Button as="button" type="submit" $variant="primary" $small>

src/components/modules/content-card/index.tsx

@@ -1,13 +1,13 @@
 import { StyledContentCardContent, StyledContentCardTitle, StyledContentCardWrapper } from './content-card.styles';
 import type { ContentCardProps } from './content-card.types';
-import { ContentCardForm } from './form';
+import { NewsletterForm } from './form';
 
 import { Button } from '@/components/elements/button';
 import { Text } from '@/components/elements/text';
 
-export const ContentCard = ({ title, text, button, action, $isNewsletter }: ContentCardProps) => {
+export const ContentCard = ({ title, text, button, newsletter }: ContentCardProps) => {
   return (
-    <StyledContentCardWrapper $isNewsletter={$isNewsletter}>
+    <StyledContentCardWrapper $isNewsletter={!!newsletter}>
       <StyledContentCardContent>
         <StyledContentCardTitle fontSize="l" fontWeight="bold" color="white" textAlign="left">
           {title}
@@ -18,7 +18,7 @@ export const ContentCard = ({ title, text, button, action, $isNewsletter }: Cont
           </Text>
         )}
       </StyledContentCardContent>
-      {$isNewsletter && <ContentCardForm action={action} />}
+      {!!newsletter && <NewsletterForm action={newsletter.action} source={newsletter.source} />}
       {button?.href && (
         <Button as="link" target="_blank" $variant="secondary" {...button}>
           {button.children}