import { useRef } from 'react' ; import { GetServerSideProps , NextPage } from 'next' ; import { PageWrapper } from '../src/frontend/components/PageWrapper' ; import { Container , Wrapper , SectionHeading , } from '../src/frontend/components/Layout.style' ; import { HighlightMessage } from '../src/frontend/Registration/Registration.style' ; import ButtonSolidLink from '@weco/common/views/components/ButtonSolidLink/ButtonSolidLink' ; import Layout10 from '@weco/common/views/components/Layout10/Layout10' ; import Space from '@weco/common/views/components/styled/Space' ; import { getServerData } from '@weco/common/server-data' ; import { AppErrorProps } from '@weco/common/views/pages/_app' ; import { removeUndefinedProps } from '@weco/common/utils/json' ; import { ServerData } from '@weco/common/server-data/types' ; import { useUser } from '@weco/common/views/components/UserProvider/UserProvider' ; import { abortErrorHandler , useAbortSignalEffect , } from '@weco/common/hooks/useAbortSignalEffect' ; const ValidatedPage = ( { success , message , isNewSignUp } ) => { const { state : userState , reload : reloadUserSession } = useUser ( ) ; const urlUsed = message === 'This URL can be used only once' ; const userWasRefreshed = useRef ( false ) ; useAbortSignalEffect ( abortSignal => { if ( success && userState === 'signedin' && ! userWasRefreshed . current ) { reloadUserSession ( abortSignal ) . catch ( abortErrorHandler ) ; userWasRefreshed . current = true ; } } , [ success , userState , userWasRefreshed ] ) ; return ( < PageWrapper title = { `Email verified` } > < Layout10 > < Space v = { { size : 'xl' , properties : [ 'margin-top' ] } } > < Container > < Wrapper > { success || urlUsed ? ( < > < SectionHeading as = "h1" > Email verified < /SectionHeading> < p > Thank you for verifying your email address . < /p> { isNewSignUp && ( < div data - test - id = "new-sign-up" > < p > The library team will review your application and will confirm your membership within the next 72 hours . In the meantime , you can browse through { ' ' } < a href = "/collections" > our digital collections < /a> or sign in to your account below . < /p> < HighlightMessage > < strong > Reminder : < /strong> you will need to email a form of personal identification ( ID ) and proof of address to the Library team in order to confirm your details . < /HighlightMessage> < /div>)} < ButtonSolidLink link = "/account" text = { userState === 'signedin' ? 'View your library account' : 'Sign in' } /> < />) : (<> < SectionHeading as = "h1" > Failed to verify email < /SectionHeading> < p > { message } < /p> < p > If you need help , please { ' ' } < a href = "https://wellcomelibrary.org/using-the-library/services-and-facilities/contact-us/" target = "_blank" rel = "noopener noreferrer" > contact us < /a> < /p> < />)} < /Wrapper> < /Container> < /Space> < /Layout10> < /PageWrapper>); } ; type Props = { serverData : ServerData ; success : boolean ; message : string | string [ ] ; isNewSignUp : boolean ; } ; export const getServerSideProps = async ( context ) => { const { query } = context ; const { success , message , supportSignUp } = query ; const serverData = await getServerData ( context ) ; return { props : removeUndefinedProps ( { serverData , success : success === 'true' , message : message || null , isNewSignUp : supportSignUp === 'true' , } ) , } ; } ; export default ValidatedPage ;