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

185
src/components/MailingListDialog.jsx
View file

@ -1,96 +1,107 @@
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) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = hiddenFields[key];
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
setSuccess('Thank you for subscribing!');
setName('');
setEmail('');
}; };
return ( Object.keys(hiddenFields).forEach((key) => {
<Dialog open={open} onClose={onClose}> const input = document.createElement("input");
<DialogTitle>Join Our Mailing List</DialogTitle> input.type = "hidden";
<DialogContent> input.name = key;
<DialogContentText> input.value = hiddenFields[key];
Stay updated with the latest news and updates from Do Tech Bro. form.appendChild(input);
</DialogContentText> });
<TextField
autoFocus document.body.appendChild(form);
margin="dense" form.submit();
id="name" document.body.removeChild(form);
label="Name"
type="text" setSuccess("Thank you for subscribing!");
fullWidth setName("");
variant="outlined" setEmail("");
value={name} onClose();
onChange={(e) => setName(e.target.value)} };
/>
<TextField return (
margin="dense" <Dialog open={open} onClose={onClose}>
id="email" <DialogTitle>Join Our Mailing List</DialogTitle>
label="Email Address" <DialogContent>
type="email" <DialogContentText>
fullWidth Stay updated with the latest news and updates from Do Tech Bro.
variant="outlined" </DialogContentText>
value={email} <TextField
onChange={(e) => setEmail(e.target.value)} autoFocus
/> margin="dense"
<DialogContentText className="mt-2 text-xs text-gray-600"> id="name"
We promise not to sell your information or email you more than once or twice a month. label="Name"
</DialogContentText> type="text"
{error && <DialogContentText className="mt-2 text-xs text-red-600">{error}</DialogContentText>} fullWidth
{success && <DialogContentText className="mt-2 text-xs text-green-600">{success}</DialogContentText>} variant="outlined"
</DialogContent> value={name}
<DialogActions> onChange={(e) => setName(e.target.value)}
<Button onClick={onClose} color="primary"> />
Cancel <TextField
</Button> margin="dense"
<Button onClick={handleSubmit} color="primary"> id="email"
Subscribe label="Email Address"
</Button> type="email"
</DialogActions> fullWidth
</Dialog> variant="outlined"
); value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<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.
</DialogContentText>
{error && (
<DialogContentText className="mt-2 text-xs text-red-600">
{error}
</DialogContentText>
)}
{success && (
<DialogContentText className="mt-2 text-xs text-green-600">
{success}
</DialogContentText>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
Cancel
</Button>
<Button onClick={handleSubmit} color="primary">
Subscribe
</Button>
</DialogActions>
</Dialog>
);
}; };
export default MailingListDialog; export default MailingListDialog;