Newsletter subscription PR fixes - and fix "To home page" button not closing dialog

src/components/FullscreenDialog/FullscreenDialog.tsx

@@ -0,0 +1,77 @@
+import { CloseIcon, IconButton } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { useEffect } from 'react'
+
+type FullscreenDialogProps = React.HTMLAttributes<HTMLDivElement> & {
+  isOpen: boolean
+  onClose: () => void
+  children: React.ReactNode
+}
+
+export default function FullscreenDialog({
+  isOpen,
+  onClose,
+  children,
+  ...props
+}: FullscreenDialogProps) {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <FullscreenDialogContainer {...props}>
+      <MainContentContainer>
+        <IconButton
+          className="fullscreen-dialog__close-button"
+          size="small"
+          onClick={() => onClose()}
+        >
+          <CloseIcon color="primary" />
+        </IconButton>
+        {children}
+      </MainContentContainer>
+    </FullscreenDialogContainer>
+  )
+}
+
+const MainContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 24px 0;
+  width: 430px;
+  max-width: 90%;
+
+  .fullscreen-dialog__close-button {
+    position: absolute;
+    top: 8px;
+    right: 30px;
+  }
+`
+
+const FullscreenDialogContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  background: rgb(var(--lsd-surface-primary));
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

src/components/FullscreenDialog/index.ts

@@ -0,0 +1 @@
+export { default as FullscreenDialog } from './FullscreenDialog'

src/components/NewsletterSubscriptionForm/NewsletterSubscriptionForm.tsx

@@ -0,0 +1,142 @@
+import {
+  Button,
+  CheckIcon,
+  ErrorIcon,
+  TextField,
+  Typography,
+} from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import Link from 'next/link'
+
+type NewsletterSubscriptionFormProps = React.HTMLAttributes<HTMLDivElement> & {
+  handleFormSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+  isSubmitting: boolean
+  errorMessage: string
+  successMessage: string
+  onClose: () => void
+}
+
+export default function NewsletterSubscriptionForm({
+  handleFormSubmit,
+  isSubmitting,
+  errorMessage,
+  successMessage,
+  onClose,
+}: NewsletterSubscriptionFormProps) {
+  const disabled = isSubmitting
+
+  return (
+    <>
+      {errorMessage && (
+        <MessageContainer>
+          <ErrorIcon color="primary" />
+          <SubmitionInfoMessage variant="body2">
+            {errorMessage}
+          </SubmitionInfoMessage>
+        </MessageContainer>
+      )}
+
+      {successMessage && (
+        <>
+          <MessageContainer>
+            <CheckIcon color="primary" />
+            <SubmitionInfoMessage variant="body2">
+              {successMessage}
+            </SubmitionInfoMessage>
+          </MessageContainer>
+          <Link href="/" onClick={onClose}>
+            <ToHomePageButton variant="filled">To home page</ToHomePageButton>
+          </Link>
+        </>
+      )}
+
+      <EmailSubscribeForm
+        onSubmit={handleFormSubmit}
+        hideForm={!!successMessage}
+      >
+        <StyledTextField
+          id="firstName"
+          inputProps={{ name: 'firstName', disabled }}
+          placeholder="First Name"
+          disabled={disabled}
+        />
+
+        <StyledTextField
+          id="lastName"
+          inputProps={{ name: 'lastName', disabled }}
+          placeholder="Last Name"
+          disabled={disabled}
+        />
+
+        <StyledTextField
+          id="email"
+          inputProps={{
+            name: 'email',
+            type: 'email',
+            required: true,
+            disabled,
+          }}
+          placeholder="Email address (required)"
+          disabled={disabled}
+        />
+
+        <SubscribeButton
+          variant="filled"
+          type="submit"
+          size="medium"
+          disabled={disabled}
+        >
+          {isSubmitting ? 'Subscribing...' : 'Subscribe'}
+        </SubscribeButton>
+      </EmailSubscribeForm>
+    </>
+  )
+}
+
+const ToHomePageButton = styled(Button)`
+  margin-top: 46px;
+  height: 40px;
+  width: 162px;
+  color: rgb(var(--lsd-text-secondary));
+`
+
+const MessageContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  border: 1px solid rgb(var(--lsd-border-primary));
+  padding: 14px;
+
+  margin-bottom: -6px;
+  margin-top: 40px;
+
+  width: 430px;
+  max-width: 93%;
+`
+
+const SubmitionInfoMessage = styled(Typography)`
+  padding-left: 14px;
+`
+
+const EmailSubscribeForm = styled.form<{
+  hideForm: boolean
+}>`
+  display: ${({ hideForm }) => (hideForm ? 'none' : 'flex')};
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  gap: 16px;
+  width: 100%;
+  margin-top: 50px;
+`
+
+const StyledTextField = styled(TextField)`
+  width: 100%;
+`
+
+const SubscribeButton = styled(Button)`
+  margin-top: 30px;
+  height: 40px;
+  width: 162px;
+`

src/components/NewsletterSubscriptionForm/index.ts

@@ -0,0 +1 @@
+export { default as NewsletterSubscriptionForm } from './NewsletterSubscriptionForm'

src/components/SubscribeButton/SubscribeButton.tsx

@@ -1,13 +1,13 @@
+import { NewsletterSubscriptionDialog } from '@/containers/NewsletterSubscriptionDialog'
 import { Tag, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { useState } from 'react'
-import { SubscribeDialogue } from '../SubscribeDialogue'
 
 export default function SubscribeButton() {
-  const [showDialogue, setShowDialogue] = useState(false)
+  const [showDialog, setShowDialog] = useState(false)
 
   const handleClick = () => {
-    setShowDialogue(!showDialogue)
+    setShowDialog(!showDialog)
   }
 
   return (
@@ -17,9 +17,9 @@ export default function SubscribeButton() {
           Subscribe
         </Typography>
       </CustomTag>
-      <SubscribeDialogue
-        isOpen={showDialogue}
-        onClose={() => setShowDialogue(false)}
+      <NewsletterSubscriptionDialog
+        isOpen={showDialog}
+        onClose={() => setShowDialog(false)}
       />
     </>
   )