mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-01-14 21:48:20 +00:00
Mailchimp API (#40)
This commit is contained in:
Nazareno Oviedo
GitHub
parent
ca155fd187
commit
f8eea59a54
1
index.d.ts
vendored
1
index.d.ts
vendored
@ -1 +1,2 @@
|
||||
// declare module 'gsap/dist/ScrollSmoother'
|
||||
declare module 'react-mailchimp-subscribe'
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 (
|
||||
<div className={clsx(s['form'], className)} style={style}>
|
||||
{status === 'sending' && <div>sending...</div>}
|
||||
{status === 'error' && (
|
||||
<div dangerouslySetInnerHTML={{ __html: message }} />
|
||||
)}
|
||||
{status === 'success' && (
|
||||
<div dangerouslySetInnerHTML={{ __html: message }} />
|
||||
)}
|
||||
<input
|
||||
ref={(node) => (input = node)}
|
||||
type="email"
|
||||
placeholder="Enter your email to stay updated"
|
||||
/>
|
||||
<button onClick={submit}>
|
||||
<ArrowLink />
|
||||
<span className="sr-only">Send</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 <br /> Newsletter
|
||||
</Heading>
|
||||
<form action="">
|
||||
<input
|
||||
placeholder="Enter your email to stay updated"
|
||||
required
|
||||
type="email"
|
||||
/>
|
||||
<button>
|
||||
<ArrowLink />
|
||||
<span className="sr-only">Send</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<MailchimpSubscribe
|
||||
url={url}
|
||||
// @ts-ignore
|
||||
render={({ subscribe, status, message }) => (
|
||||
<SimpleForm
|
||||
onSubmitted={(formData) => subscribe(formData)}
|
||||
status={status}
|
||||
message={message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
25
yarn.lock
25
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user