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

183
src/components/MailingListDialog.jsx
View file

@ -1,96 +1,107 @@
import React, { useState } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import React, { useState } from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
const MailingListDialog = ({ open, onClose }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
setError('');
setSuccess('');
const handleSubmit = (e) => {
e.preventDefault();
setError("");
setSuccess("");
const form = document.createElement('form');
form.action = 'https://tech.us9.list-manage.com/subscribe/post';
form.method = 'POST';
form.target = '_blank';
const form = document.createElement("form");
form.action = "https://tech.us9.list-manage.com/subscribe/post";
form.method = "POST";
form.target = "_blank";
const hiddenFields = {
u: 'aaf43cf1740b320b738dade27',
id: '344e2f39e6',
MERGE1: name,
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('');
const hiddenFields = {
u: "aaf43cf1740b320b738dade27",
id: "344e2f39e6",
MERGE1: name,
MERGE0: email,
};
return (
<Dialog open={open} onClose={onClose}>
<DialogTitle>Join Our Mailing List</DialogTitle>
<DialogContent>
<DialogContentText>
Stay updated with the latest news and updates from Do Tech Bro.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Name"
type="text"
fullWidth
variant="outlined"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<TextField
margin="dense"
id="email"
label="Email Address"
type="email"
fullWidth
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>
);
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("");
onClose();
};
return (
<Dialog open={open} onClose={onClose}>
<DialogTitle>Join Our Mailing List</DialogTitle>
<DialogContent>
<DialogContentText>
Stay updated with the latest news and updates from Do Tech Bro.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Name"
type="text"
fullWidth
variant="outlined"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<TextField
margin="dense"
id="email"
label="Email Address"
type="email"
fullWidth
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;