diff --git a/src/components/SubscriptionForm/SubscriptionForm.tsx b/src/components/SubscriptionForm/SubscriptionForm.tsx index e7bf8928..2a721259 100644 --- a/src/components/SubscriptionForm/SubscriptionForm.tsx +++ b/src/components/SubscriptionForm/SubscriptionForm.tsx @@ -1,9 +1,12 @@ +'use client'; + import { useRef, useState } from 'react'; import Link from 'next/link'; -import useNewsletterStats from '@hooks/useNewsletterStats'; import posthog from 'posthog-js'; import Button from '@components/Button'; +import { useLocalStorage } from '@hooks/useLocalStorage'; +import useNewsletterStats from '@hooks/useNewsletterStats'; import { trpc } from '@utils/trpc'; type SubscriptionFormProps = { @@ -12,11 +15,19 @@ type SubscriptionFormProps = { buttonText?: string; }; +type SubscriptionRecord = { + email?: string; + firstName?: string; + date?: string; +}; + const SubscriptionForm: React.FC = ({ tags: _, source, buttonText = 'Subscribe', }) => { + const [subscriptionRecord, setSubscriptionRecord] = + useLocalStorage('tiny-improvements-subscribed', {}); const [getHoneypottedNerd, setGetHoneypottedNerd] = useState(false); const addSubscriberMutation = trpc.mailingList.subscribe.useMutation({ onSuccess: () => { @@ -30,6 +41,12 @@ const SubscriptionForm: React.FC = ({ email, firstName, }); + + setSubscriptionRecord({ + email, + firstName, + date: new Date().toISOString(), + }); }, onError: (error) => { const email = emailRef.current?.value; @@ -98,12 +115,16 @@ const SubscriptionForm: React.FC = ({ ); } - if (addSubscriberMutation.isSuccess || getHoneypottedNerd) { + if ( + addSubscriberMutation.isSuccess || + getHoneypottedNerd || + subscriptionRecord?.date + ) { return (
-

- 🪩 Success! Thanks so much for subscribing. Don't forget to check - your spam folder for emails from{' '} +

+ 🪩 Thanks so much for subscribing. Don't forget to check your + spam folder for emails from{' '} hello@mikebifulco.com.

@@ -115,7 +136,9 @@ const SubscriptionForm: React.FC = ({