import Head from 'next/head';
import { useRouter } from 'next/router';
import { useState } from 'react';
import styled from 'styled-components';
import Layout from '../../components/Layout';
import Form from '../../components/styles/Form';
import fetchJson from '../../lib/fetchJson';
import useForm from '../../lib/useForm';
import useUser from '../../lib/useUser';
import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
const RSVPStyles = styled.div`
display: grid;
`;
const ErrorContactStyles = styled.p`
font-weight: bold;
a {
text-decoration: underline;
}
`;
export default function RsvpPage() {
const router = useRouter();
const { inputs, handleChange } = useForm({
firstName: '',
lastName: '',
});
const [errorMsg, setErrorMsg] = useState('');
const [errorCount, setErrorCount] = useState(0);
const [loading, setLoading] = useState(false);
const { user } = useUser({ redirectTo: '/login' });
if (!user || user.isLoggedIn === false) {
return Loading...;
}
async function handleSubmit(firstName, lastName) {
const body = {
firstName,
lastName,
};
try {
const res = await fetchJson('/api/rsvp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (res.status === 'SUCCESS') {
handleUmamiEvent('Fetch RSVP SUCCESS', 'success-fetch-rsvp');
router.push({
pathname: `/rsvp/${res.groupId}`,
});
} else {
handleUmamiEvent('Fetch RSVP FAILURE', 'failure-fetch-rsvp');
setErrorCount(errorCount + 1);
setErrorMsg('Unable to RSVP');
}
} catch (error) {
// console.error('An unexpected error happened:', error);
setErrorCount(errorCount + 1);
setErrorMsg('Unable to find your RSVP');
}
}
return (
N & N | RSVP
RSVP to our wedding
);
}