fix: random sign up breaks

content/i18n/react-i18next/en/components/subscribe.json

@@ -13,6 +13,10 @@
     "heading": "Thank you for signing up!",
     "description": "If you don't receive a confirmation email shortly, double check different email folders."
   },
+  "quarantined": {
+    "heading": "Almost there!",
+    "description": "Confirm you’re not a robot, and your email will be on its way."
+  },
   "error": {
     "heading": "Something went wrong",
     "description": "There was an issue trying to submit. Check your email and try again."

content/i18n/react-i18next/pl/components/subscribe.json

@@ -13,6 +13,10 @@
     "heading": "Dzięki za zapisanie się!",
     "description": "Jeżeli nie otrzymasz emaila potwierdzającego w krótkim czasie, sprawdź różne foldery poczty."
   },
+  "quarantined": {
+    "heading": "Już prawie!",
+    "description": "Potwierdź, że nie jesteś robotem, a twój email będzie w drodze."
+  },
   "error": {
     "heading": "Coś poszło nie tak",
     "description": "Podczas wysyłania wystąpił problem. Sprawdź email i spróbuj ponownie."

cypress/e2e/subscription.test.js

@@ -3,41 +3,64 @@ import { icon } from "../fixtures/theme.json"
 import { form, user } from "../fixtures/subscription.json"
 
 describe("Subscription tests", () => {
-  it("Tests whole sign up flow", () => {
+  beforeEach(() => {
     cy.visit("/blog/hello-world/")
     cy.findByTestId(icon).should("exist")
-
     cy.findByPlaceholderText(form.email)
       .as("email")
       .should("have.prop", "type", "email")
       .and("have.prop", "required")
-    cy.findByRole("button", { name: form.button }).as("button").click()
-    cy.get("input:invalid").should("have.length", 1)
-
-    cy.get("@email").type("wrong email")
-    cy.get("input:invalid").should("have.length", 1)
-    cy.get("@email").clear()
+    cy.findByRole("button", { name: form.button }).as("button")
+  })
 
-    cy.intercept("https://app.convertkit.com/**", req => {
-      req.destroy()
+  it("Tests success flow", () => {
+    cy.intercept(form.url, req => {
+      expect(req.body).to.include("email_address")
+      expect(req.body).to.include(user.email)
+      req.reply({
+        statusCode: 200,
+        body: {
+          status: "success",
+        },
+      })
     })
     cy.get("@email").type(user.email, { delay: 50 })
     cy.get("@button").click()
-    cy.findByText(form.error, { exact: false }).should("be.visible")
-    cy.get("@email").clear()
+    cy.findByText(form.success, { exact: false }).should("be.visible")
+  })
 
-    cy.intercept("https://app.convertkit.com/**", req => {
+  it("Tests additional security flow", () => {
+    cy.intercept(form.url, req => {
       expect(req.body).to.include("email_address")
       expect(req.body).to.include(user.email)
       req.reply({
         statusCode: 200,
         body: {
-          status: "success",
+          status: "quarantined",
+          url: "https://example.com",
         },
       })
     })
     cy.get("@email").type(user.email, { delay: 50 })
     cy.get("@button").click()
-    cy.findByText(form.success, { exact: false }).should("be.visible")
+    cy.findByText(form.quarantined, { exact: false }).should("be.visible")
+  })
+
+  it("Tests error flow", () => {
+    cy.get("@button").click()
+    cy.get("input:invalid").should("have.length", 1)
+
+    cy.get("@email").type("wrong email")
+    cy.get("input:invalid").should("have.length", 1)
+    cy.get("@email").clear()
+
+    cy.intercept(form.url, req => {
+      req.destroy()
+    })
+    cy.get("@email").type(user.email, { delay: 50 })
+    cy.get("@button").click()
+    cy.findByText(form.error, { exact: false }).as("error").should("be.visible")
+    cy.get("@email").click()
+    cy.get("@error").should("not.exist")
   })
 })

cypress/fixtures/subscription.json

@@ -2,8 +2,10 @@
   "form": {
     "email": "Your email",
     "button": "Subscribe",
+    "success": "Thank you",
+    "quarantined": "Almost there",
     "error": "wrong",
-    "success": "Thank you"
+    "url": "https://app.convertkit.com/**"
   },
   "user": {
     "email": "user@example.com"

src/components/subscribe.js

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"
 import {
   Button,
   Form,
-  H3,
+  H2,
   H6,
   Icon,
   Input,
@@ -26,14 +26,14 @@ const Subscribe = () => {
   return (
     <Section $featured id="newsletter">
       <Tile $justify="center">
-        <H3 as="h2">{t("heading")}</H3>
+        <H2>{t("heading")}</H2>
         <P>{t("description")}</P>
         <Ul>
           {t("topics", { returnObjects: true }).map((topic, index) => (
             <Li key={`topic-${index + 1}`}>{topic}</Li>
           ))}
         </Ul>
-        {state !== "success" ? (
+        {state === "success" || state === "quarantined" ? null : (
           <>
             <Form action={FORM_URL} method="post" onSubmit={handleSubmit}>
               <InputWrapper>
@@ -46,7 +46,7 @@ const Subscribe = () => {
                   type="email"
                   placeholder={t("email")}
                   aria-label={t("email")}
-                  disabled={state === "loading" ? true : false}
+                  disabled={state === "loading"}
                   onClick={() => setState("idle")}
                 ></Input>
               </InputWrapper>
@@ -57,7 +57,7 @@ const Subscribe = () => {
                 $animation={
                   state === "loading" ? "icon-spinning" : "icon-wobble"
                 }
-                disabled={state === "idle" ? false : true}
+                disabled={state !== "idle"}
                 type="submit"
               >
                 {t("button")}
@@ -68,15 +68,29 @@ const Subscribe = () => {
               </Tile>
             </Form>
           </>
-        ) : null}
-        {state === "success" || state === "error" ? (
-          <Callout type={state === "success" ? "success" : "danger"}>
+        )}
+        {state === "success" || state === "quarantined" || state === "error" ? (
+          <Callout
+            type={
+              state === "success"
+                ? "success"
+                : state === "quarantined"
+                ? "warning"
+                : "danger"
+            }
+          >
             <H6 as="h3">
-              {state === "success" ? t("success.heading") : t("error.heading")}
+              {state === "success"
+                ? t("success.heading")
+                : state === "quarantined"
+                ? t("quarantined.heading")
+                : t("error.heading")}
             </H6>
             <P>
               {state === "success"
                 ? t("success.description")
+                : state === "quarantined"
+                ? t("quarantined.description")
                 : t("error.description")}
             </P>
           </Callout>

src/hooks/useSubscribe.js

@@ -25,11 +25,24 @@ export const useSubscribe = () => {
       })
 
       const json = await response.json()
+      console.log(json)
+
+      if (json.status === "quarantined") {
+        try {
+          window.open(json.url, "_blank", "noopener,popup,height=512,width=512")
+          setState("quarantined")
+        } catch (error) {
+          setState("error")
+        } finally {
+          return
+        }
+      }
 
       if (json.status === "success") {
         setState("success")
         return
       }
+
       setState("error")
     } catch (error) {
       setState("error")