Set up newsletter

Author: akd-io

website/.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CONVERTKIT_API_KEY=GHAdhoS_vF2IDp-9z0YdqA
+NEXT_PUBLIC_CONVERTKIT_FORM_ID=5191913

website/components/Section.tsx

@@ -1,10 +1,14 @@
-import { Box, Flex } from "@chakra-ui/react"
+import { Flex } from "@chakra-ui/react"
 import { ComponentProps, FC } from "react"
 
 type SectionProps = ComponentProps<typeof Flex> & {
-  innerProps?: ComponentProps<typeof Box>
+  innerProps?: ComponentProps<typeof Flex>
 }
-export const Section: FC<SectionProps> = ({ boxProps, children, ...props }) => {
+export const Section: FC<SectionProps> = ({
+  innerProps,
+  children,
+  ...props
+}) => {
   return (
     <Flex
       direction="column"
@@ -19,7 +23,7 @@ export const Section: FC<SectionProps> = ({ boxProps, children, ...props }) => {
         width="100%"
         maxWidth="800"
         alignItems="center"
-        {...boxProps}
+        {...innerProps}
       >
         {children}
       </Flex>

website/templates/LandingPage/LandingPageTemplate.tsx

@@ -1,10 +1,11 @@
 import { Box, Flex } from "@chakra-ui/react"
-import { css, Global } from "@emotion/react"
+import { Global, css } from "@emotion/react"
 import { ComponentProps, FC } from "react"
 import { Section } from "../../components/Section"
-import { Description } from "./components/DescriptionSection"
+import { Description } from "./components/Description"
 import { Footer } from "./components/Footer"
 import { HeaderSection } from "./components/Header"
+import { Newsletter } from "./components/NewsletterSection"
 import { TechnologiesForm } from "./components/TechnologiesForm"
 
 const globalStyles = css`
@@ -46,6 +47,9 @@ const LandingPageTemplate = () => {
             </Card>
           </Section>
         </Flex>
+        <Section paddingTop="20px">
+          <Newsletter />
+        </Section>
         <Footer />
       </Flex>
     </>

…ngPage/components/DescriptionSection.tsx …s/LandingPage/components/Description.tsxwebsite/templates/LandingPage/components/DescriptionSection.tsx renamed to website/templates/LandingPage/components/Description.tsx website/templates/LandingPage/components/DescriptionSection.tsx renamed to website/templates/LandingPage/components/Description.tsx

@@ -9,8 +9,7 @@ export const Footer: React.FC = () => {
     <Section
       as="footer"
       innerProps={{
-        alignItems: "left",
-        gap: "32px",
+        gap: "24px",
       }}
     >
       <SocialIcons />

website/templates/LandingPage/components/Footer.tsx

@@ -0,0 +1,99 @@
+import { Button, Flex, Heading, Input, Text } from "@chakra-ui/react"
+import { FC, useState } from "react"
+import { SubmitHandler, useForm } from "react-hook-form"
+
+const NEXT_PUBLIC_CONVERTKIT_API_KEY =
+  process.env.NEXT_PUBLIC_CONVERTKIT_API_KEY
+if (!NEXT_PUBLIC_CONVERTKIT_API_KEY) {
+  throw new Error("Missing NEXT_PUBLIC_CONVERTKIT_API_KEY environment variable")
+}
+const NEXT_PUBLIC_CONVERTKIT_FORM_ID =
+  process.env.NEXT_PUBLIC_CONVERTKIT_FORM_ID
+if (!NEXT_PUBLIC_CONVERTKIT_FORM_ID) {
+  throw new Error("Missing NEXT_PUBLIC_CONVERTKIT_FORM_ID environment variable")
+}
+
+type NewsletterFormData = {
+  email: string
+}
+
+export const Newsletter: FC = () => {
+  const [state, setState] = useState<
+    "showForm" | "loading" | "submitSuccess" | "submitError"
+  >("showForm")
+
+  const { register, handleSubmit } = useForm<NewsletterFormData>()
+
+  const onSubmit: SubmitHandler<NewsletterFormData> = async (data) => {
+    const { email } = data
+    setState("loading")
+    const response = await fetch(
+      `https://api.convertkit.com/v3/forms/${NEXT_PUBLIC_CONVERTKIT_FORM_ID}/subscribe`,
+      {
+        body: JSON.stringify({
+          api_key: NEXT_PUBLIC_CONVERTKIT_API_KEY,
+          email,
+          tags: [
+            3868813, // Tag ID of "create-next-stack-com"
+          ],
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      }
+    )
+    if (response.status === 200) {
+      setState("submitSuccess")
+    } else {
+      setState("submitError")
+    }
+  }
+
+  return (
+    <Flex
+      width="100%"
+      direction="column"
+      alignItems={["left", "center"]}
+      gap="10px"
+    >
+      <Heading>Join the Newsletter</Heading>
+      <Text>Stay up to date with new feature releases!</Text>
+      {state === "submitSuccess" && (
+        <Text padding="16px">Thank you for subscribing to the newsletter!</Text>
+      )}
+      {state !== "submitSuccess" ? (
+        <Flex
+          as="form"
+          onSubmit={handleSubmit(onSubmit)}
+          gap="10px"
+          direction={["column", "row"]}
+          padding="12px 0"
+        >
+          <Input
+            {...register("email")}
+            type="email"
+            placeholder="Email Address"
+            background="white"
+            disabled={state === "loading"}
+          />
+          <Button
+            type="submit"
+            variant="solid"
+            colorScheme="purple"
+            minWidth=""
+            isLoading={state === "loading"}
+          >
+            Subscribe
+          </Button>
+        </Flex>
+      ) : null}
+      {state === "submitError" && (
+        <Text>Something went wrong. Please try again later.</Text>
+      )}
+      <Text fontSize="0.8em">
+        {"We won't send you spam. Unsubscribe at any time."}
+      </Text>
+    </Flex>
+  )
+}