) => {
+ event.preventDefault();
+ setFormState('submitting');
+
+ try {
+ const token = captchaRef.current?.getResponse();
+
+ await axios.post(`/api/newsletter-subscribe?${qs.stringify({
+ email: (event.target as any)[0].value,
+ token,
+ })}`)
+
+ captchaRef.current?.reset();
+ setFormState('success');
+ } catch (error: any) {
+ setFormState(null);
+ captchaRef.current?.reset();
+
+ const toastErrorConfig = {
+ duration: 1500,
+ isClosable: true,
+ status: 'error' as 'error',
+ };
+
+ if(error.response.data?.title === 'Invalid Captcha') {
+ toast({
+ description: 'We\'re having trouble verifying you\'re a human. Please try again.',
+ ...toastErrorConfig
+ });
+
+ return;
+ }
+
+ if(error.response.data?.title === 'Member Exists') {
+ toast({
+ description: 'You are already subscribed to the newsletter.',
+ ...toastErrorConfig
+ });
+
+ return;
+ }
+
+ toast({
+ description: 'There was an issue subscribing you to the newsletter.',
+ ...toastErrorConfig
+ });
+ }
+ }
+
+ return (
+ <>
+ {!hideHeader && (
+ <>
+
+ Starknet Dev News ✨🗞️
+
+
+
+ Receive notifications on Starknet version updates and network status.
+
+
+ )}
+
+ {formState !== 'success' ? (
+
+ ) : (
+
+
+ Thank you and may the STARK be with you ✨🗞️
+
+
+ )}
+
+ )
+};
diff --git a/workspaces/website/src/pages/(components)/roadmap/RoadmapSubscribeForm.tsx b/workspaces/website/src/pages/(components)/roadmap/RoadmapSubscribeForm.tsx
index 4be498e7c3..f4c69ad63a 100644
--- a/workspaces/website/src/pages/(components)/roadmap/RoadmapSubscribeForm.tsx
+++ b/workspaces/website/src/pages/(components)/roadmap/RoadmapSubscribeForm.tsx
@@ -2,25 +2,15 @@
* Module dependencies.
*/
-import { Button } from '@ui/Button';
import {
- FormControl,
- FormLabel,
- Input,
Modal,
ModalOverlay,
ModalContent,
ModalCloseButton,
Container,
- useToast,
} from '@chakra-ui/react';
-import { Heading } from '@ui/Typography/Heading';
-import { Text } from '@ui/Typography/Text';
-import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
-import { useRef, useState } from 'react';
-import axios from 'axios';
-import qs from 'qs';
+import { NewsletterForm } from './NewsletterForm';
/**
* `RoadmapSubscribeForm` props.
@@ -43,63 +33,9 @@ function RoadmapSubscribeForm({
isOpen,
setIsOpen,
}: RoadmapSubscribeFormProps) {
- const toast = useToast();
- const [formState, setFormState] = useState<'submitting' | 'success' | null>(null);
- const captchaRef = useRef(null);
-
const handleClose = () => {
setIsOpen(false);
- setFormState(null);
};
-
- const handleSubmit = async (event: React.FormEvent) => {
- event.preventDefault();
- setFormState('submitting');
-
- try {
- const token = captchaRef.current?.getResponse();
-
- await axios.post(`/api/newsletter-subscribe?${qs.stringify({
- email: (event.target as any)[0].value,
- token,
- })}`)
-
- captchaRef.current?.reset();
- setFormState('success');
- } catch (error: any) {
- setFormState(null);
- captchaRef.current?.reset();
-
- const toastErrorConfig = {
- duration: 1500,
- isClosable: true,
- status: 'error' as 'error',
- };
-
- if(error.response.data?.title === 'Invalid Captcha') {
- toast({
- description: 'We\'re having trouble verifying you\'re a human. Please try again.',
- ...toastErrorConfig
- });
-
- return;
- }
-
- if(error.response.data?.title === 'Member Exists') {
- toast({
- description: 'You are already subscribed to the newsletter.',
- ...toastErrorConfig
- });
-
- return;
- }
-
- toast({
- description: 'There was an issue subscribing you to the newsletter.',
- ...toastErrorConfig
- });
- }
- }
return (
@@ -114,67 +50,7 @@ function RoadmapSubscribeForm({
- {formState !== 'success' ? (
- <>
-
- Starknet Dev News ✨🗞️
-
-
-
- Receive notifications on Starknet version updates and network status.
-
-
-
-
- ) : (
-
-
- Thank you and may the STARK be with you ✨🗞️
-
-
- )}
+
diff --git a/workspaces/website/src/pages/PagePage.tsx b/workspaces/website/src/pages/PagePage.tsx
index 6004b995c4..14009d5d62 100644
--- a/workspaces/website/src/pages/PagePage.tsx
+++ b/workspaces/website/src/pages/PagePage.tsx
@@ -4,16 +4,19 @@ import CMSPage from "./(components)/CMSPage";
export interface Props {
readonly data: PageType;
+ env: {
+ CLOUDFLARE_RECAPTCHA_KEY: string;
+ }
}
-export default function Page({
- data,
-}: Props): JSX.Element {
+export default function Page(props: Props): JSX.Element {
const { locale } = usePageContext();
+ const { data, env } = props;
return (
);
diff --git a/workspaces/website/src/pages/pages.page.server.tsx b/workspaces/website/src/pages/pages.page.server.tsx
index cac605417a..5c0cc6fc79 100644
--- a/workspaces/website/src/pages/pages.page.server.tsx
+++ b/workspaces/website/src/pages/pages.page.server.tsx
@@ -8,10 +8,16 @@ export async function onBeforeRender(pageContext: PageContextServer) {
const locale = pageContext.locale ?? defaultLocale;
const slug = pageContext.routeParams["*"] || "home";
const data = await getPageBySlug(slug, locale, pageContext.context);
+ const env = {
+ CLOUDFLARE_RECAPTCHA_KEY: import.meta.env.VITE_CLOUDFLARE_RECAPTCHA_KEY,
+ };
return {
pageContext: {
- pageProps: { data } satisfies Props,
+ pageProps: {
+ data,
+ env
+ } satisfies Props,
documentProps: {
title: slug == "home" ? undefined : data.title,
} satisfies DocumentProps,
diff --git a/workspaces/website/src/pages/pages.page.tsx b/workspaces/website/src/pages/pages.page.tsx
index c214a470d0..27fa859cb5 100644
--- a/workspaces/website/src/pages/pages.page.tsx
+++ b/workspaces/website/src/pages/pages.page.tsx
@@ -1,10 +1,10 @@
import PagePage, { Props } from "src/pages/PagePage";
import NotFound from "@ui/NotFound/NotFound";
-export function Page({ data }: Props): JSX.Element {
+export function Page({ data, env }: Props): JSX.Element {
if (data == null) {
return ;
}
- return ;
+ return ;
}
diff --git a/workspaces/website/src/pages/subscribe-newsletter/NewsletterPage.tsx b/workspaces/website/src/pages/subscribe-newsletter/NewsletterPage.tsx
new file mode 100644
index 0000000000..161536e5ad
--- /dev/null
+++ b/workspaces/website/src/pages/subscribe-newsletter/NewsletterPage.tsx
@@ -0,0 +1,41 @@
+
+/**
+ * Module dependencies.
+ */
+
+import { Box } from "@chakra-ui/react";
+import { PageLayout } from "@ui/Layout/PageLayout";
+import { SEOTexts } from "@starknet-io/cms-data/src/seo";
+import { NewsletterForm } from "../(components)/roadmap/NewsletterForm";
+
+/**
+ * `Props` type.
+ */
+
+export interface Props {
+ readonly env: {
+ readonly CLOUDFLARE_RECAPTCHA_KEY: string;
+ };
+ readonly seo: SEOTexts['newsletter'];
+}
+
+/**
+ * Export `NewsletterPage` component.
+ */
+
+export function NewsletterPage({ env, seo }: Props) {
+ return (
+
+
+