newsletter form func

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",

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",

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",

src/components/Newsletter/Newsletter.js

@@ -1,8 +1,45 @@
 import React from "react"
+import addToMailchimp from 'gatsby-plugin-mailchimp'
 
 const Newsletter = () => {
-  const submitHandler = e => {
+  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 = () => {
         </p>
         <form onSubmit={submitHandler} action="#" target="_blank">
           <div className="email-field">
-            <input placeholder="ваш e-mail" type="email" name="email" />
+            <input value={email} onChange={handleChangeEmail} placeholder="ваш e-mail" name="email" />
             <button>Подписаться</button>
           </div>
         </form>
+        {success ? <p className='newsletter-content__success'><span role="img" aria-label="checkMark">✔️</span> Вы успешно подписались на рыссылку!</p> : null}
+        {error.isError ? <p className='newsletter-content__error'>{error.message}</p> : null}
       </div>
     </div>
   )

src/components/Newsletter/Newsletter.scss

@@ -51,6 +51,14 @@
         }
       }
     }
+    &__error {
+      color: tomato;
+      margin-top: 15px;
+    }
+    &__success {
+      color: rgb(101, 190, 101);
+      margin-top: 15px;
+    }
   }
 }