From f8eea59a54dc6641639c5e92ffec2dfbd665e4d4 Mon Sep 17 00:00:00 2001 From: Nazareno Oviedo Date: Wed, 13 Apr 2022 12:55:59 -0300 Subject: [PATCH] Mailchimp API (#40) --- index.d.ts | 1 + package.json | 1 + .../common/footer/footer.module.scss | 11 ++- src/components/common/footer/index.tsx | 83 ++++++++++++++++--- yarn.lock | 25 +++++- 5 files changed, 107 insertions(+), 14 deletions(-) diff --git a/index.d.ts b/index.d.ts index 2ac3040..b0ec2d9 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1 +1,2 @@ // declare module 'gsap/dist/ScrollSmoother' +declare module 'react-mailchimp-subscribe' diff --git a/package.json b/package.json index bb9a656..5d8d3ad 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "react-dom": "^18.0.0", "react-fast-marquee": "^1.3.1", "react-hook-form": "7.29.0", + "react-mailchimp-subscribe": "^2.1.3", "react-merge-refs": "^1.1.0", "react-query": "^3.34.19", "react-use-measure": "^2.1.1", diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index 68548ce..079408e 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -74,7 +74,7 @@ } } - form { + .form { @include respond-to('mobile') { width: 100%; } @@ -82,6 +82,15 @@ position: relative; margin: tovw(62px, 'default', 48px) auto 0; width: max-content; + + > div { + position: absolute; + bottom: -80%; + color: var(--color-white); + font-size: tovw(14px, 'default', 12px); + text-transform: uppercase; + font-family: var(--font-dm-mono); + } } input { diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index a3b2d36..077dc73 100644 --- a/src/components/common/footer/index.tsx +++ b/src/components/common/footer/index.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' +import MailchimpSubscribe from 'react-mailchimp-subscribe' import { ArrowLink } from '~/components/icons/arrow' import Line from '~/components/icons/line' @@ -18,6 +19,62 @@ import { } from './footer' import s from './footer.module.scss' +type FormProps = { + className?: string + message: string + onSubmitted?: ({ EMAIL }: { EMAIL: string }) => void + status: 'success' | 'error' | 'sending' + style?: React.CSSProperties +} + +const SimpleForm = ({ + className, + message, + onSubmitted, + status, + style +}: FormProps) => { + let input: HTMLInputElement | null + + const submit = () => { + if (!onSubmitted) return + input && + input.value.indexOf('@') > -1 && + onSubmitted({ + EMAIL: input.value + }) + } + + useEffect(() => { + if (!input) return + if (status === 'success') { + input.value = '' + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [status]) + + return ( +
+ {status === 'sending' &&
sending...
} + {status === 'error' && ( +
+ )} + {status === 'success' && ( +
+ )} + (input = node)} + type="email" + placeholder="Enter your email to stay updated" + /> + +
+ ) +} + export const Footer = () => { const router = useRouter() @@ -44,6 +101,9 @@ export const Footer = () => { } }, [router?.pathname]) + const url = + 'https://studio.us14.list-manage.com/subscribe/post?u=7a2779bd6fa5b8739b990d2b1&id=2286437d2a' + return ( <> {show && ( @@ -70,17 +130,18 @@ export const Footer = () => { > Sign-up to our
Newsletter -
- - -
+ + ( + subscribe(formData)} + status={status} + message={message} + /> + )} + /> )} diff --git a/yarn.lock b/yarn.lock index 04ba4da..76bc125 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2138,7 +2138,7 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, d dependencies: ms "2.1.2" -debug@^2.6.9: +debug@^2.1.3, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -3713,6 +3713,13 @@ jsonify@~0.0.0: resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73" integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM= +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" + jsonwebtoken@^8.5.1: version "8.5.1" resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d" @@ -4802,7 +4809,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.8.1: +prop-types@^15.5.10, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -4891,6 +4898,15 @@ react-is@^16.13.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-merge-refs@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06" @@ -5823,6 +5839,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-readable-stream@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"