dotechbro/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

close dialog after someone clicks subscribe
All checks were successful
Build and Deploy Docker Image / build (push) Successful in 38s
Details

Browse source
This commit is contained in:
Mike 2024-10-21 21:16:18 -04:00
parent c0a174c9d9
commit 15b99a82f8
1 changed files with 98 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/MailingListDialog.jsx
View file

@ -1,38 +1,38 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import Dialog from '@mui/material/Dialog'; import Dialog from "@mui/material/Dialog";
import DialogActions from '@mui/material/DialogActions'; import DialogActions from "@mui/material/DialogActions";
import DialogContent from '@mui/material/DialogContent'; import DialogContent from "@mui/material/DialogContent";
import DialogContentText from '@mui/material/DialogContentText'; import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from "@mui/material/DialogTitle";
import Button from '@mui/material/Button'; import Button from "@mui/material/Button";
import TextField from '@mui/material/TextField'; import TextField from "@mui/material/TextField";
const MailingListDialog = ({ open, onClose }) => { const MailingListDialog = ({ open, onClose }) => {
const [name, setName] = useState(''); const [name, setName] = useState("");
const [email, setEmail] = useState(''); const [email, setEmail] = useState("");
const [error, setError] = useState(''); const [error, setError] = useState("");
const [success, setSuccess] = useState(''); const [success, setSuccess] = useState("");
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); e.preventDefault();
setError(''); setError("");
setSuccess(''); setSuccess("");
const form = document.createElement('form'); const form = document.createElement("form");
form.action = 'https://tech.us9.list-manage.com/subscribe/post'; form.action = "https://tech.us9.list-manage.com/subscribe/post";
form.method = 'POST'; form.method = "POST";
form.target = '_blank'; form.target = "_blank";
const hiddenFields = { const hiddenFields = {
u: 'aaf43cf1740b320b738dade27', u: "aaf43cf1740b320b738dade27",
id: '344e2f39e6', id: "344e2f39e6",
MERGE1: name, MERGE1: name,
MERGE0: email, MERGE0: email,
}; };
Object.keys(hiddenFields).forEach((key) => { Object.keys(hiddenFields).forEach((key) => {
const input = document.createElement('input'); const input = document.createElement("input");
input.type = 'hidden'; input.type = "hidden";
input.name = key; input.name = key;
input.value = hiddenFields[key]; input.value = hiddenFields[key];
form.appendChild(input); form.appendChild(input);
@ -42,9 +42,10 @@ const MailingListDialog = ({ open, onClose }) => {
form.submit(); form.submit();
document.body.removeChild(form); document.body.removeChild(form);
setSuccess('Thank you for subscribing!'); setSuccess("Thank you for subscribing!");
setName(''); setName("");
setEmail(''); setEmail("");
onClose();
}; };
return ( return (
@ -76,10 +77,19 @@ const MailingListDialog = ({ open, onClose }) => {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
<DialogContentText className="mt-2 text-xs text-gray-600"> <DialogContentText className="mt-2 text-xs text-gray-600">
We promise not to sell your information or email you more than once or twice a month. We promise not to sell your information or email you more than once or
twice a month.
</DialogContentText> </DialogContentText>
{error && <DialogContentText className="mt-2 text-xs text-red-600">{error}</DialogContentText>} {error && (
{success && <DialogContentText className="mt-2 text-xs text-green-600">{success}</DialogContentText>} <DialogContentText className="mt-2 text-xs text-red-600">
{error}
</DialogContentText>
)}
{success && (
<DialogContentText className="mt-2 text-xs text-green-600">
{success}
</DialogContentText>
)}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={onClose} color="primary"> <Button onClick={onClose} color="primary">
@ -94,3 +104,4 @@ const MailingListDialog = ({ open, onClose }) => {
}; };
export default MailingListDialog; export default MailingListDialog;