From 58c8b310235a9ff2100eeb3126bbd9f42559b56f Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Thu, 26 Oct 2023 18:03:41 +0100
Subject: [PATCH] fix: PR fixes and fix to home page button not closing dialog

---
 .../FullscreenDialog/FullscreenDialog.tsx     |  77 +++++
 src/components/FullscreenDialog/index.ts      |   1 +
 .../NewsletterSubscriptionForm.tsx            | 142 +++++++++
 .../NewsletterSubscriptionForm/index.ts       |   1 +
 .../SubscribeButton/SubscribeButton.tsx       |  12 +-
 .../SubscribeDialogue/SubscribeDialogue.tsx   | 283 ------------------
 src/components/SubscribeDialogue/index.ts     |   1 -
 .../NewsletterSubscriptionDialog.tsx          | 116 +++++++
 .../NewsletterSubscriptionDialog/index.ts     |   1 +
 9 files changed, 344 insertions(+), 290 deletions(-)
 create mode 100644 src/components/FullscreenDialog/FullscreenDialog.tsx
 create mode 100644 src/components/FullscreenDialog/index.ts
 create mode 100644 src/components/NewsletterSubscriptionForm/NewsletterSubscriptionForm.tsx
 create mode 100644 src/components/NewsletterSubscriptionForm/index.ts
 delete mode 100644 src/components/SubscribeDialogue/SubscribeDialogue.tsx
 delete mode 100644 src/components/SubscribeDialogue/index.ts
 create mode 100644 src/containers/NewsletterSubscriptionDialog/NewsletterSubscriptionDialog.tsx
 create mode 100644 src/containers/NewsletterSubscriptionDialog/index.ts

diff --git a/src/components/FullscreenDialog/FullscreenDialog.tsx b/src/components/FullscreenDialog/FullscreenDialog.tsx
new file mode 100644
index 00000000..6fc9b1d0
--- /dev/null
+++ b/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;
+`
diff --git a/src/components/FullscreenDialog/index.ts b/src/components/FullscreenDialog/index.ts
new file mode 100644
index 00000000..f7d48d0c
--- /dev/null
+++ b/src/components/FullscreenDialog/index.ts
@@ -0,0 +1 @@
+export { default as FullscreenDialog } from './FullscreenDialog'
diff --git a/src/components/NewsletterSubscriptionForm/NewsletterSubscriptionForm.tsx b/src/components/NewsletterSubscriptionForm/NewsletterSubscriptionForm.tsx
new file mode 100644
index 00000000..6986d7e5
--- /dev/null
+++ b/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;
+`
diff --git a/src/components/NewsletterSubscriptionForm/index.ts b/src/components/NewsletterSubscriptionForm/index.ts
new file mode 100644
index 00000000..cb6b6158
--- /dev/null
+++ b/src/components/NewsletterSubscriptionForm/index.ts
@@ -0,0 +1 @@
+export { default as NewsletterSubscriptionForm } from './NewsletterSubscriptionForm'
diff --git a/src/components/SubscribeButton/SubscribeButton.tsx b/src/components/SubscribeButton/SubscribeButton.tsx
index 40ebeeaa..213da8a9 100644
--- a/src/components/SubscribeButton/SubscribeButton.tsx
+++ b/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)}
       />
     </>
   )
diff --git a/src/components/SubscribeDialogue/SubscribeDialogue.tsx b/src/components/SubscribeDialogue/SubscribeDialogue.tsx
deleted file mode 100644
index 41799ade..00000000
--- a/src/components/SubscribeDialogue/SubscribeDialogue.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import { copyConfigs } from '@/configs/copy.configs'
-import { api } from '@/services/api.service'
-import { lsdUtils } from '@/utils/lsd.utils'
-import {
-  Button,
-  CheckIcon,
-  CloseIcon,
-  ErrorIcon,
-  IconButton,
-  Typography,
-} from '@acid-info/lsd-react'
-import styled from '@emotion/styled'
-import Link from 'next/link'
-import { useEffect, useState } from 'react'
-import { LogosIcon } from '../Icons/LogosIcon'
-
-const mockOnSubmit = (data: any) => {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      console.log('Form data submitted:', data)
-      resolve(true)
-    }, 3000)
-  })
-}
-
-type EmailSubscribeProps = React.HTMLAttributes<HTMLDivElement> & {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export type SubscribeFormData = {
-  email: string
-  firstName: string
-  lastName: string
-}
-
-export default function SubscribeDialogue({
-  isOpen,
-  onClose,
-  ...props
-}: EmailSubscribeProps) {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [successMessage, setSuccessMessage] = useState('')
-  const [errorMessage, setErrorMessage] = useState('')
-
-  // Reset states when the dialog is closed.
-  useEffect(() => {
-    if (!isOpen) {
-      if (successMessage) {
-        setSuccessMessage('')
-      }
-
-      if (errorMessage) {
-        setErrorMessage('')
-      }
-    }
-  }, [isOpen, successMessage, errorMessage])
-
-  if (!isOpen) {
-    return null
-  }
-
-  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    setErrorMessage('')
-    setSuccessMessage('')
-
-    try {
-      const firstName = e.currentTarget.firstName.value || ''
-      const lastName = e.currentTarget.lastName.value || ''
-      const email = e.currentTarget.email.value
-
-      const apiResponse = await api.subscribeToMailingList({
-        email,
-        firstName,
-        lastName,
-      })
-
-      setSuccessMessage(apiResponse.message)
-    } catch (error) {
-      setErrorMessage(
-        'There was an error submitting the form. Please try again.',
-      )
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  return (
-    <SubscribeDialogueContainer {...props}>
-      <MainContentContainer>
-        <IconButton
-          className="subscribe-dialogue__close-button"
-          size="small"
-          onClick={() => onClose()}
-        >
-          <CloseIcon color="primary" />
-        </IconButton>
-
-        <LogosIconAndTitleContainer>
-          <LogosIcon color="primary" width="36px" height="36px" />
-          <PressLogoType variant={'h1'} genericFontFamily={'serif'}>
-            {copyConfigs.navbar.title}
-          </PressLogoType>
-        </LogosIconAndTitleContainer>
-        <Typography variant="body2">Subscribe for updates</Typography>
-
-        {errorMessage && (
-          <MessageContainer>
-            <ErrorIcon color="primary" />
-            <SubmitionInfoMessage variant="body2">
-              {errorMessage}
-            </SubmitionInfoMessage>
-          </MessageContainer>
-        )}
-
-        {successMessage && (
-          <>
-            <MessageContainer>
-              <CheckIcon color="primary" />
-              <SubmitionInfoMessage variant="body2">
-                {successMessage}
-              </SubmitionInfoMessage>
-            </MessageContainer>
-            <Link href="/">
-              <ToHomePageButton variant="filled">To home page</ToHomePageButton>
-            </Link>
-          </>
-        )}
-
-        <EmailSubscribeForm
-          onSubmit={handleFormSubmit}
-          hideForm={!!successMessage}
-        >
-          <StyledInput
-            type="text"
-            id="firstName"
-            name="firstName"
-            placeholder="First Name"
-            disabled={isSubmitting}
-          />
-
-          <StyledInput
-            type="text"
-            id="lastName"
-            name="lastName"
-            placeholder="Last Name"
-            disabled={isSubmitting}
-          />
-
-          <StyledInput
-            type="email"
-            id="email"
-            name="email"
-            placeholder="Email address (required)"
-            disabled={isSubmitting}
-            required
-          />
-
-          <SubscribeButton
-            variant="filled"
-            type="submit"
-            size="medium"
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? 'Subscribing...' : 'Subscribe'}
-          </SubscribeButton>
-        </EmailSubscribeForm>
-      </MainContentContainer>
-    </SubscribeDialogueContainer>
-  )
-}
-
-const PressLogoType = styled(Typography)`
-  text-transform: uppercase;
-  font-size: 30px;
-  line-height: 36px;
-
-  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
-    font-size: 20px;
-    line-height: 26px;
-  }
-`
-
-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 LogosIconAndTitleContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-`
-
-const MainContentContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  padding: 24px 0;
-  width: 430px;
-  max-width: 90%;
-
-  .subscribe-dialogue__close-button {
-    position: absolute;
-    top: 8px;
-    right: 30px;
-  }
-`
-
-const SubscribeDialogueContainer = 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;
-`
-
-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 StyledInput = styled.input`
-  padding: 0;
-  padding-left: 18px;
-  box-sizing: border-box;
-
-  outline: none;
-  border: none;
-  border-bottom: 1px solid rgb(var(--lsd-border-primary));
-
-  height: 40px;
-  width: 100%;
-  &:focus {
-    outline: none;
-  }
-
-  background-color: rgb(var(--lsd-surface-primary));
-`
-
-const SubscribeButton = styled(Button)`
-  margin-top: 30px;
-  height: 40px;
-  width: 162px;
-`
diff --git a/src/components/SubscribeDialogue/index.ts b/src/components/SubscribeDialogue/index.ts
deleted file mode 100644
index f4cef2f1..00000000
--- a/src/components/SubscribeDialogue/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SubscribeDialogue } from './SubscribeDialogue'
diff --git a/src/containers/NewsletterSubscriptionDialog/NewsletterSubscriptionDialog.tsx b/src/containers/NewsletterSubscriptionDialog/NewsletterSubscriptionDialog.tsx
new file mode 100644
index 00000000..faac1539
--- /dev/null
+++ b/src/containers/NewsletterSubscriptionDialog/NewsletterSubscriptionDialog.tsx
@@ -0,0 +1,116 @@
+import { FullscreenDialog } from '@/components/FullscreenDialog'
+import { LogosIcon } from '@/components/Icons/LogosIcon'
+import NewsletterSubscriptionForm from '@/components/NewsletterSubscriptionForm/NewsletterSubscriptionForm'
+import { copyConfigs } from '@/configs/copy.configs'
+import { api } from '@/services/api.service'
+import { lsdUtils } from '@/utils/lsd.utils'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { useEffect, useState } from 'react'
+
+type NewsletterSubscriptionDialogProps =
+  React.HTMLAttributes<HTMLDivElement> & {
+    isOpen: boolean
+    onClose: () => void
+  }
+
+export type SubscribeFormData = {
+  email: string
+  firstName: string
+  lastName: string
+}
+
+export default function NewsletterSubscriptionDialog({
+  isOpen,
+  onClose,
+  ...props
+}: NewsletterSubscriptionDialogProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [successMessage, setSuccessMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  const defaultErrorMessage =
+    'There was an error submitting the form. Please try again.'
+
+  // Reset states when the dialog is closed.
+  useEffect(() => {
+    if (!isOpen) {
+      if (successMessage) {
+        setSuccessMessage('')
+      }
+
+      if (errorMessage) {
+        setErrorMessage('')
+      }
+    }
+  }, [isOpen, successMessage, errorMessage])
+
+  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    setIsSubmitting(true)
+    setErrorMessage('')
+    setSuccessMessage('')
+
+    try {
+      const firstName = e.currentTarget.firstName.value || ''
+      const lastName = e.currentTarget.lastName.value || ''
+      const email = e.currentTarget.email.value
+
+      if (email === 'successtest@successtest.com') {
+        setSuccessMessage('Subscribed successfully!')
+      } else if (email === 'errortest@errortest.com') {
+        setErrorMessage(defaultErrorMessage)
+      } else {
+        const apiResponse = await api.subscribeToMailingList({
+          email,
+          firstName,
+          lastName,
+        })
+
+        setSuccessMessage(apiResponse.message)
+      }
+    } catch (error) {
+      setErrorMessage(defaultErrorMessage)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <FullscreenDialog isOpen={isOpen} onClose={onClose} {...props}>
+      <LogosIconAndTitleContainer>
+        <LogosIcon color="primary" width="36px" height="36px" />
+        <PressLogoType variant={'h1'} genericFontFamily={'serif'}>
+          {copyConfigs.navbar.title}
+        </PressLogoType>
+      </LogosIconAndTitleContainer>
+      <Typography variant="body2">Subscribe for updates</Typography>
+
+      <NewsletterSubscriptionForm
+        handleFormSubmit={handleFormSubmit}
+        isSubmitting={isSubmitting}
+        errorMessage={errorMessage}
+        successMessage={successMessage}
+        onClose={onClose}
+      />
+    </FullscreenDialog>
+  )
+}
+
+const PressLogoType = styled(Typography)`
+  text-transform: uppercase;
+  font-size: 30px;
+  line-height: 36px;
+
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
+    font-size: 20px;
+    line-height: 26px;
+  }
+`
+
+const LogosIconAndTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+`
diff --git a/src/containers/NewsletterSubscriptionDialog/index.ts b/src/containers/NewsletterSubscriptionDialog/index.ts
new file mode 100644
index 00000000..17d7b0ff
--- /dev/null
+++ b/src/containers/NewsletterSubscriptionDialog/index.ts
@@ -0,0 +1 @@
+export { default as NewsletterSubscriptionDialog } from './NewsletterSubscriptionDialog'