From 818f292831f8fda5dbdaa4eec5b515dd5925a052 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Mon, 28 Sep 2020 19:00:30 +0300 Subject: [PATCH] newsletter form func --- gatsby-config.js | 6 +++ package-lock.json | 39 +++++++++++++++++++- package.json | 1 + src/components/Newsletter/Newsletter.js | 45 +++++++++++++++++++++-- src/components/Newsletter/Newsletter.scss | 8 ++++ 5 files changed, 95 insertions(+), 4 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 89db1ab..7731857 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -56,6 +56,12 @@ module.exports = { defer: false, }, }, + { + resolve: 'gatsby-plugin-mailchimp', + options: { + endpoint: process.env.MAILCHIMP_ENDPOINT, + }, + }, "gatsby-plugin-sitemap", { resolve: "gatsby-plugin-robots-txt", diff --git a/package-lock.json b/package-lock.json index 1e13d20..fdd89a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "devthread.ru", - "version": "0.1.0", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -7055,6 +7055,11 @@ } } }, + "email-validator": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz", + "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==" + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -9148,6 +9153,15 @@ "resolved": "https://registry.npmjs.org/gatsby-plugin-firebase/-/gatsby-plugin-firebase-0.2.0-beta.4.tgz", "integrity": "sha512-F1uh9T5dY38aeNvKzqj+3K655dce1QS70wuG4bhV9L3cnTJR2vitTWyIoCvRJJfPs7Xq7LgjUDmHDrEos4S3gQ==" }, + "gatsby-plugin-mailchimp": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/gatsby-plugin-mailchimp/-/gatsby-plugin-mailchimp-5.2.2.tgz", + "integrity": "sha512-O9JizVPJAe5YT1QAHZNRh1xUVdPnfayfIRhsBULiK2629TQRvEzzQxTDbt/WZU02cVm8415Fx2CneaxYKLt0ag==", + "requires": { + "email-validator": "^2.0.4", + "jsonp": "^0.2.1" + } + }, "gatsby-plugin-manifest": { "version": "2.4.17", "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.17.tgz", @@ -13254,6 +13268,29 @@ "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=" }, + "jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=", + "requires": { + "debug": "^2.1.3" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", diff --git a/package.json b/package.json index 2ab656c..4aa79bb 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "gatsby-plugin-amp": "^0.2.2", "gatsby-plugin-feed": "^2.5.11", "gatsby-plugin-firebase": "^0.2.0-beta.4", + "gatsby-plugin-mailchimp": "^5.2.2", "gatsby-plugin-manifest": "^2.4.17", "gatsby-plugin-netlify-cms": "^4.3.9", "gatsby-plugin-netlify-cms-paths": "^1.3.0", diff --git a/src/components/Newsletter/Newsletter.js b/src/components/Newsletter/Newsletter.js index e0e9a96..ba78b3f 100644 --- a/src/components/Newsletter/Newsletter.js +++ b/src/components/Newsletter/Newsletter.js @@ -1,8 +1,45 @@ import React from "react" +import addToMailchimp from 'gatsby-plugin-mailchimp' const Newsletter = () => { - const submitHandler = e => { - e.preventDefault() + const [email, setEmail] = React.useState('') + const [success, setSuccess] = React.useState(false) + const [error, setError] = React.useState({ isError: false, message: '' }) + + const submitHandler = async (e) => { + try { + e.preventDefault() + + if (!email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) { + setError({ isError: true, message: 'Заполните поле в формате E-mail!' }) + setSuccess(false) + window.setTimeout(() => setError({ isError: false, message: '' }), 5000) + return + } + + setError({ isError: false, message: '' }) + + const data = await addToMailchimp(email) + + if (data.result !== 'success') { + setError({ isError: true, message: `Произошла ошибка, возможно "${email}" уже подписан на рассылку. Попробуйте запрос позже.` }) + window.setTimeout(() => setError({ isError: false, message: '' }), 5000) + console.log(data.msg) + return + } + + setSuccess(true) + window.setTimeout(() => setSuccess(false), 5000) + } catch (error) { + console.log(error) + setSuccess(false) + } + } + + const handleChangeEmail = (e) => { + const email = e.target.value.trim().toLowerCase() + + setEmail(email) } return ( @@ -19,10 +56,12 @@ const Newsletter = () => {

- +
+ {success ?

✔️ Вы успешно подписались на рыссылку!

: null} + {error.isError ?

{error.message}

: null} ) diff --git a/src/components/Newsletter/Newsletter.scss b/src/components/Newsletter/Newsletter.scss index 24e661a..0bd7174 100644 --- a/src/components/Newsletter/Newsletter.scss +++ b/src/components/Newsletter/Newsletter.scss @@ -51,6 +51,14 @@ } } } + &__error { + color: tomato; + margin-top: 15px; + } + &__success { + color: rgb(101, 190, 101); + margin-top: 15px; + } } }