Update newsletter

strawberry-graphql · Nov 1, 2019 · 2f485d8 · 2f485d8
1 parent 91f2647
commit 2f485d8
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-helmet": "^5.2.1",
+    "react-use-mailchimp": "^0.4.0",
     "styled-components": "^4.4.0",
     "theme-ui": "^0.2.46",
     "typescript": "^3.6.4"

diff --git a/src/components/newsletter-section.tsx b/src/components/newsletter-section.tsx
@@ -2,6 +2,93 @@
 import { jsx } from "theme-ui";
 import { Box, Heading, Text, Input, Button, Flex } from "@theme-ui/components";
 import { ArrowRightIcon } from "./icons/arrow-right";
+import { useMailchimp } from "react-use-mailchimp";
+import { useState } from "react";
+
+const url =
+  "https://twitter.us4.list-manage.com/subscribe/post?u=4ad955ae4a0b2d7c67f48323e&amp;id=5e44c190e6";
+
+const Loading = () => (
+  <Box
+    sx={{
+      fontSize: 3,
+      animation: "spin 2s linear infinite",
+    }}
+  >
+    🍓
+  </Box>
+);
+
+const Form: React.SFC = () => {
+  const [email, setEmail] = useState("");
+  const [mailchimp, subscribe] = useMailchimp({
+    url,
+  });
+  const { loading, error, data } = mailchimp;
+
+  const canSubmit = email.trim() !== "" && !loading;
+
+  if (data && data.result === "success") {
+    return <Text sx={{ fontSize: 3 }}>🎉 Thanks for subscribing! 🎉</Text>;
+  }
+
+  if (error) {
+    return (
+      <Text
+        sx={{ fontSize: 3 }}
+        dangerouslySetInnerHTML={{ __html: error }}
+      ></Text>
+    );
+  }
+
+  return (
+    <Flex
+      as="form"
+      sx={{
+        height: 58,
+        color: "primary",
+        borderRadius: 40,
+        backgroundColor: "white",
+      }}
+      onSubmit={e => {
+        e.preventDefault();
+        if (!loading) {
+          subscribe({ EMAIL: email });
+        }
+      }}
+    >
+      <Input
+        sx={{
+          color: "primary",
+          p: 3,
+          border: "none",
+          borderTopLeftRadius: 40,
+          borderBottomLeftRadius: 40,
+        }}
+        onChange={e => setEmail(e.target.value)}
+        value={email}
+        type="email"
+        placeholder="my@email.com"
+      />
+      <Button
+        type="submit"
+        disabled={!canSubmit}
+        sx={{
+          borderRadius: "100%",
+          backgroundColor: "muted",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          alignSelf: "center",
+          width: 58,
+          height: 58,
+        }}
+      >
+        {loading ? <Loading /> : <ArrowRightIcon />}
+      </Button>
+    </Flex>
+  );
+};
 
 export const NewsletterSection: React.SFC = () => (
   <Box
@@ -32,45 +119,13 @@ export const NewsletterSection: React.SFC = () => (
         textAlign: "center",
       }}
     >
-      <Heading sx={{ mb: 4 }}>Newsletter</Heading>
-      <Text sx={{ mb: 4 }}>BlaBlaBlaBlaBla</Text>
+      <Heading sx={{ mb: 4 }}>Newsletter 💌</Heading>
+      <Text sx={{ mb: 4 }}>
+        Do you want to receive the latest updates on Strawberry? Subscribe to
+        our newsletter!
+      </Text>
 
-      <Flex
-        as="form"
-        sx={{
-          height: 58,
-          color: "primary",
-          borderRadius: 40,
-          backgroundColor: "white",
-        }}
-      >
-        <Input
-          sx={{
-            color: "primary",
-            p: 3,
-            border: "none",
-            borderTopLeftRadius: 40,
-            borderBottomLeftRadius: 40,
-          }}
-          type="email"
-          placeholder="my@email.com"
-        />
-        <Button
-          type="submit"
-          sx={{
-            borderRadius: "100%",
-            backgroundColor: "muted",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            alignSelf: "center",
-            width: 58,
-            height: 58,
-          }}
-        >
-          <ArrowRightIcon />
-        </Button>
-      </Flex>
+      <Form />
     </Box>
   </Box>
 );
diff --git a/src/helpers/wrap-page-element.tsx b/src/helpers/wrap-page-element.tsx
@@ -7,6 +7,19 @@ const reset = css`
     margin: 0;
     padding: 0;
   }
+
+  a {
+    color: inherit;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
 `;
 
 export const wrapPageElement = ({ element }) => (

diff --git a/yarn.lock b/yarn.lock
@@ -5114,7 +5114,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -9415,6 +9415,13 @@ jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
+jsonp@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  integrity sha1-pltPoPEL2nGaBUQep7lMVfPhW64=
+  dependencies:
+    debug "^2.1.3"
+
 jsontoxml@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jsontoxml/-/jsontoxml-1.0.1.tgz#07fff7f6bfbfa1097d779aec7f041b5046075e70"
@@ -12458,6 +12465,14 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-use-mailchimp@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-use-mailchimp/-/react-use-mailchimp-0.4.0.tgz#2ca980560c784a11ceee43e65db3286207ba3326"
+  integrity sha512-1AMujJdS28Bzl/TN0RTB/Td2aPNdXRFm+vN0+ha47bxmimecoogQg9Z9sBjmQWNHtFHP4tDK1KeYwE2nkI5zbw==
+  dependencies:
+    jsonp "0.2.1"
+    to-querystring "1.1.0"
+
 react@15:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
@@ -14527,6 +14542,11 @@ to-object-path@^0.3.0:
   dependencies:
     kind-of "^3.0.2"
 
+to-querystring@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/to-querystring/-/to-querystring-1.1.0.tgz#31efbcebb332bcb2522de36129b4234179399fbd"
+  integrity sha512-nlYTDlLrE9+JJlEcoqEvOytgReSG4z8+hdHeSO8+WF4VLzF7sY5KFyIGvCEWJc0bROdMJsyhOnbPEb5R2LOI8A==
+
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"