diff --git a/README.md b/README.md index 03b37fb..4700e76 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,9 @@ NEXTAUTH_SECRET="" EMAIL_SERVER="smtp://" FROM_EMAIL="investors@tincre.com" NEXTAUTH_URL=http://localhost:3000 +CONVERTKIT_API_URL=https://api.convertkit.com/v3/ +CONVERTKIT_API_KEY= +CONVERTKIT_FORM_ID= ``` ### Tests @@ -43,6 +46,13 @@ repository. In addition, you'll need to edit `siteMetadata.js` for proper SEO up > ℹ We are upgrading and standardizing the naming conventions so that they may be updated without examining the component codebase. ℹ +### Newsletter signup + +The `Footer` component includes a signup for a newsletter through ConvertKit. + +Feel free to replace or add to the functionality in `pages/api/convertkit.js` +for additional providers (such as Buttowndown or Mailchip). + ### Database Infrastructure We generally use PostgreSQL databases via ORMs at Tincre. diff --git a/components/Footer.jsx b/components/Footer.jsx index 738b4a3..49d52e8 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -1,7 +1,41 @@ import FooterColumn from "./FooterColumn"; import Image from "next/image"; +import { useState, useRef } from "react"; export default function Footer({ entityTitle, logoSrc, footerItems, socials }) { + const inputEl = useRef(null); + const [inputError, setInputError] = useState(false); + const [message, setMessage] = useState(""); + const [subscribed, setSubscribed] = useState(false); + + const subscribe = async (e) => { + e.preventDefault(); + + const res = await fetch(`/api/convertkit`, { + body: JSON.stringify({ + email: inputEl.current.value, + }), + headers: { + "Content-Type": "application/json", + }, + method: "POST", + }); + + const { error } = await res.json(); + if (error) { + setInputError(true); + setMessage( + "Your e-mail address is invalid or you are already subscribed!" + ); + return; + } + + inputEl.current.value = ""; + setInputError(false); + setSubscribed(true); + setMessage("Successfully! 🎉 You are now subscribed."); + }; + return (