integrate newsletter modal with mailchimp

Blazity · Oct 17, 2021 · 1a882ba · 1a882ba
1 parent 9c31bdb
commit 1a882ba
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 18 deletions.
diff --git a/components/Icon.tsx b/components/Icon.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 export type IconProps = HTMLProps<HTMLButtonElement> & { _ref?: Ref<HTMLButtonElement> };
 
 export default function Icon({ _ref, ...rest }: any) {
-  return <IconWrapper {...rest} {...(_ref && { ref: _ref })} />;
+  return <IconWrapper type="button" {...rest} {...(_ref && { ref: _ref })} />;
 }
 
 const IconWrapper = styled.button`

diff --git a/views/ContactPage/MailSentState.tsx → components/MailSentState.tsx b/views/ContactPage/MailSentState.tsx → components/MailSentState.tsx
diff --git a/components/NewsletterModal.tsx b/components/NewsletterModal.tsx
@@ -1,38 +1,72 @@
+import { FormEventHandler, useState } from 'react';
+import MailchimpSubscribe, { DefaultFormFields } from 'react-mailchimp-subscribe';
 import styled from 'styled-components';
 import useEscClose from 'hooks/useEscKey';
 import { media } from 'utils/media';
 import Button from './Button';
 import CloseIcon from './CloseIcon';
 import Container from './Container';
 import Input from './Input';
+import MailSentState from './MailSentState';
 import Overlay from './Overlay';
 
 export interface NewsletterModalProps {
   onClose: () => void;
 }
 
 export default function NewsletterModal({ onClose }: NewsletterModalProps) {
+  const [email, setEmail] = useState('');
+
   useEscClose({ onClose });
 
+  function onSubmit(event: HTMLFormElement, enrollNewsletter: (props: DefaultFormFields) => void) {
+    event.preventDefault();
+    console.log({ email });
+    if (email) {
+      enrollNewsletter({ EMAIL: email });
+    }
+  }
+
   return (
-    <Overlay>
-      <Container>
-        <Card>
-          <CloseIconContainer>
-            <CloseIcon onClick={onClose} />
-          </CloseIconContainer>
-          <Title>Are you ready to enroll to the best newsletter ever?</Title>
-          <Row>
-            <CustomInput placeholder="Enter your email..." />
-            <CustomButton>Submit</CustomButton>
-          </Row>
-        </Card>
-      </Container>
-    </Overlay>
+    <MailchimpSubscribe
+      url="https://bstefanski.us5.list-manage.com/subscribe/post?u=66b4c22d5c726ae22da1dcb2e&id=679fb0eec9"
+      render={({ subscribe, status, message }) => {
+        const hasSignedUp = status === 'success';
+        return (
+          <Overlay>
+            <Container>
+              <Card onSubmit={(event: HTMLFormElement) => onSubmit(event, subscribe)}>
+                <CloseIconContainer>
+                  <CloseIcon onClick={onClose} />
+                </CloseIconContainer>
+                {hasSignedUp && <MailSentState />}
+                {!hasSignedUp && (
+                  <>
+                    <Title>Are you ready to enroll to the best newsletter ever?</Title>
+                    <Row>
+                      <CustomInput
+                        value={email}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+                        placeholder="Enter your email..."
+                        required
+                      />
+                      <CustomButton as="button" type="submit" disabled={hasSignedUp}>
+                        Submit
+                      </CustomButton>
+                    </Row>
+                    {message && <ErrorMessage dangerouslySetInnerHTML={{ __html: message }} />}
+                  </>
+                )}
+              </Card>
+            </Container>
+          </Overlay>
+        );
+      }}
+    />
   );
 }
 
-const Card = styled.div`
+const Card = styled.form`
   display: flex;
   position: relative;
   flex-direction: column;
@@ -42,6 +76,7 @@ const Card = styled.div`
   border-radius: 0.6rem;
   max-width: 70rem;
   overflow: hidden;
+  color: rgb(var(--text));
 
   ${media('<=tablet')} {
     padding: 7.5rem 2.5rem;
@@ -72,6 +107,13 @@ const Title = styled.div`
   }
 `;
 
+const ErrorMessage = styled.p`
+  color: rgb(var(--errorColor));
+  font-size: 1.5rem;
+  margin: 1rem 0;
+  text-align: center;
+`;
+
 const Row = styled.div`
   display: flex;
   justify-content: center;

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react-animate-height": "^2.0.23",
     "react-dom": "17.0.2",
     "react-hook-form": "^7.17.4",
+    "react-mailchimp-subscribe": "^2.1.3",
     "react-schemaorg": "^2.0.0",
     "react-share": "^4.4.0",
     "reading-time": "^1.5.0",
@@ -38,6 +39,7 @@
     "@fec/remark-a11y-emoji": "^3.1.0",
     "@next/bundle-analyzer": "^11.1.2",
     "@types/react": "^17.0.20",
+    "@types/react-mailchimp-subscribe": "^2.1.1",
     "@types/styled-components": "^5.1.14",
     "@types/swiper": "^5.4.3",
     "@typescript-eslint/eslint-plugin": "^4.31.0",

diff --git a/views/ContactPage/FormSection.tsx b/views/ContactPage/FormSection.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import { media } from 'utils/media';
-import MailSentState from './MailSentState';
+import MailSentState from '../../components/MailSentState';
 
 interface EmailPayload {
   name: string;

diff --git a/yarn.lock b/yarn.lock
@@ -1560,6 +1560,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/react-mailchimp-subscribe@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-mailchimp-subscribe/-/react-mailchimp-subscribe-2.1.1.tgz#e42b6d84aab84881d0b0868667a6b9ba38059425"
+  integrity sha512-ic6ruLaDdlgwj94CeML/FGHiMacXB92bZbmJimNKVzrc147/hORPCy3nZ4MHGKBiZNVqi4NBmX1pN6i3Kbg1JA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.20":
   version "17.0.20"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.20.tgz#a4284b184d47975c71658cd69e759b6bd37c3b8c"
@@ -5464,7 +5471,7 @@ progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.6.1, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5596,6 +5603,15 @@ react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-mailchimp-subscribe@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/react-mailchimp-subscribe/-/react-mailchimp-subscribe-2.1.3.tgz#2f195f20b98c9be9608fac95d1f4f5bcb2d81929"
+  integrity sha512-ZRuPZMnX/9pHQLnAQavsgB5xIF+gNqjNCCq1vvTs23cn+93W2oOp17qjg3LpDBEt1HJi6IHXMwpKXn0taY8FHw==
+  dependencies:
+    jsonp "^0.2.1"
+    prop-types "^15.5.10"
+    to-querystring "^1.0.4"
+
 react-portalize@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-portalize/-/react-portalize-2.1.0.tgz#47693e69c692cf788a8b44cdaa05d3c8f566502a"
@@ -6431,6 +6447,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+to-querystring@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/to-querystring/-/to-querystring-1.1.1.tgz#98de5b00c79768a98ca48a2c09a960238d960265"
+  integrity sha512-ZgIacl9TXAoT7sGXUYjQiy0MW7Tf/7CJQLt757hYHfXXc8JBzOVBMx4DckqKUO4hi36J72/m8UcH/GCHK+n97g==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"