import Notice, { type NoticeKind } from '@components/atoms/layout/notice';
import ContactForm, {
type ContactFormProps,
} from '@components/organisms/forms/contact-form';
import SocialMedia from '@components/organisms/widgets/social-media';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout from '@components/templates/page/page-layout';
import { meta } from '@content/pages/contact.mdx';
import { sendMail } from '@services/graphql/contact';
import styles from '@styles/pages/contact.module.scss';
import { type NextPageWithLayout } from '@ts/types/app';
import { loadTranslation } from '@utils/helpers/i18n';
import {
getSchemaJson,
getSinglePageSchema,
getWebPageSchema,
} from '@utils/helpers/schema-org';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useSettings from '@utils/hooks/use-settings';
import { GetStaticProps } from 'next';
import Head from 'next/head';
import { useRouter } from 'next/router';
import Script from 'next/script';
import { useState } from 'react';
import { useIntl } from 'react-intl';
const ContactPage: NextPageWithLayout = () => {
const { dates, intro, seo, title } = meta;
const intl = useIntl();
const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
title,
url: `/contact`,
});
const socialMediaTitle = intl.formatMessage({
defaultMessage: 'Find me elsewhere',
description: 'ContactPage: social media widget title',
id: 'Qh2CwH',
});
const { website } = useSettings();
const { asPath } = useRouter();
const webpageSchema = getWebPageSchema({
description: seo.description,
locale: website.locales.default,
slug: asPath,
title: seo.title,
updateDate: dates.update,
});
const contactSchema = getSinglePageSchema({
dates,
description: intro,
id: 'contact',
kind: 'contact',
locale: website.locales.default,
slug: asPath,
title,
});
const schemaJsonLd = getSchemaJson([webpageSchema, contactSchema]);
const widgets = [
,
];
const [status, setStatus] = useState('info');
const [statusMessage, setStatusMessage] = useState('');
const submitMail: ContactFormProps['sendMail'] = async (data, reset) => {
const { email, message, name, subject } = data;
const messageHTML = message.replace(/\r?\n/g, '
');
const body = `Message received from ${name} <${email}> on ${website.url}.
${messageHTML}`;
const replyTo = `${name} <${email}>`;
const mailData = {
body,
clientMutationId: 'contact',
replyTo,
subject,
};
const { message: mutationMessage, sent } = await sendMail(mailData);
if (sent) {
setStatus('success');
setStatusMessage(
intl.formatMessage({
defaultMessage:
'Thanks. Your message was successfully sent. I will answer it as soon as possible.',
description: 'Contact: success message',
id: '3Pipok',
})
);
reset();
} else {
const errorPrefix = intl.formatMessage({
defaultMessage: 'An error occurred:',
description: 'Contact: error message',
id: 'TpyFZ6',
});
const error = `${errorPrefix} ${mutationMessage}`;
setStatus('error');
setStatusMessage(error);
}
};
return (
<>
{`${seo.title} - ${website.name}`}
}
/>
);
};
ContactPage.getLayout = (page) =>
getLayout(page, { useGrid: true, withExtraPadding: true });
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const translation = await loadTranslation(locale);
return {
props: {
translation,
},
};
};
export default ContactPage;