// Hooks
import { useEffect, useState, useContext } from 'react'
import { useAccount } from 'shared/hooks/use-account.mjs'
import { useBackend } from 'shared/hooks/use-backend.mjs'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
// Context
import { LoadingContext } from 'shared/context/loading-context.mjs'
// Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Link from 'next/link'
// Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { BareLayout, ns as layoutNs } from 'site/components/layouts/bare.mjs'
import { WelcomeWrapper } from 'shared/components/wrappers/welcome.mjs'
import { Spinner } from 'shared/components/spinner.mjs'
import { Popout } from 'shared/components/popout.mjs'
import {
GdprProfileDetails,
GdprMeasurementsDetails,
ns as gdprNs,
} from 'shared/components/gdpr/details.mjs'
// Translation namespaces used on this page
const ns = Array.from(new Set([...pageNs, ...layoutNs, ...gdprNs, 'confirm', 'locales', 'themes']))
const SignupLinkExpired = () => Implement SignupLinkExpired compnonent
const Checkbox = ({ value, setter, label, children = null }) => (
setter(value ? false : true)}
>
setter(value ? false : true)}
/>
{label}
{children}
)
const ConfirmSignUpPage = () => {
// Context
const { loading } = useContext(LoadingContext)
const router = useRouter()
// Get confirmation ID and check from url
const [confirmationId, confirmationCheck] = router.asPath.slice(1).split('/').slice(2)
const page = {
path: ['confirm', 'emailchange', confirmationId],
}
const { token, setAccount, setToken } = useAccount()
const backend = useBackend(token)
const { t } = useTranslation(ns)
const [id, setId] = useState(false)
const [pDetails, setPDetails] = useState(false)
const [mDetails, setMDetails] = useState(false)
const [profile, setProfile] = useState(false)
const [measurements, setMeasurements] = useState(false)
const [openData, setOpenData] = useState(true)
const [ready, setReady] = useState(false)
const [error, setError] = useState(false)
const createAccount = async () => {
let consent = 0
if (profile) consent = 1
if (profile && measurements) consent = 2
if (profile && measurements && openData) consent = 3
if (consent > 0 && id) {
const result = await backend.confirmSignup({ consent, id })
if (result.success) {
setToken(result.data.token)
setAccount(result.data.account)
router.push('/welcome')
} else {
// Something went wrong
console.log('something went wrong')
}
}
}
useEffect(() => {
// Async inside useEffect requires this approach
const getConfirmation = async () => {
// Reach out to backend
const data = await backend.loadConfirmation({
id: confirmationId,
check: confirmationCheck,
})
if (data instanceof Error) setError(true)
setReady(true)
setId(confirmationId)
}
// Call async method
getConfirmation()
}, [backend, confirmationCheck, confirmationId])
// Short-circuit errors
if (error)
return (
)
const partA = (
<>
{t('gdpr:profileQuestion')}
{pDetails ? : null}
{profile ? (
) : (
<>
{t('gdpr:noConsentNoAccount')}
>
)}
>
)
const partB = (
<>
{t('gdpr:setQuestion')}
{mDetails ? : null}
{measurements ? (
) : (
)}
{mDetails && measurements ? (
) : null}
{measurements && !openData ? {t('openDataInfo')} : null}
{!measurements && (
<>
{t('gdpr:noConsentNoPatterns')}
>
)}
>
)
return (
{ready ? (
<>
{t('gdpr:privacyMatters')}
{t('gdpr:compliant')}
{t('gdpr:consentWhyAnswer')}
{partA}
{profile && partB}
>
) : (
)}
{profile && !measurements && (
)}
{profile && measurements && (
)}
FreeSewing Privacy Notice
)
}
export default ConfirmSignUpPage
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ns)),
},
}
}
export async function getStaticPaths() {
return {
paths: [],
fallback: true,
}
}