diff --git a/src/components/one-time-donation/FormikStepper.tsx b/src/components/one-time-donation/FormikStepper.tsx index 3a270b8fa..3036845ed 100644 --- a/src/components/one-time-donation/FormikStepper.tsx +++ b/src/components/one-time-donation/FormikStepper.tsx @@ -2,7 +2,7 @@ import React, { PropsWithChildren, useCallback, useContext, useEffect } from 're import { styled } from '@mui/material/styles' import { useTranslation } from 'next-i18next' import { useRouter } from 'next/router' -import { Form, Formik, FormikConfig, FormikValues } from 'formik' +import { Form, Formik, FormikConfig, FormikValues, useFormikContext } from 'formik' import { LoadingButton } from '@mui/lab' import { Box, Button, Grid, Step, StepLabel, Stepper, useMediaQuery } from '@mui/material' import { StepsContext } from './helpers/stepperContext' @@ -25,9 +25,48 @@ const StyledStepper = styled('div')(() => ({ export interface FormikStepProps extends Pick, 'children' | 'validationSchema'> { label?: string + initialValues: OneTimeDonation } -export function FormikStep({ children }: FormikStepProps) { +export function FormikStep({ children, initialValues }: FormikStepProps) { + const { setStep } = useContext(StepsContext) + const formik = useFormikContext() + const { data: session } = useSession() + + useEffect(() => { + if (localStorage.getItem('campaignName') === null) return + + if (localStorage.getItem('donationData') === null) { + formik.setFormikState((prevState) => { + return { + ...prevState, + values: initialValues, + } + }) + setStep(0) + } else { + const localDonationData: OneTimeDonation = JSON.parse( + localStorage.getItem('donationData') || '', + ) + + if (session && session.accessToken) { + localDonationData.isAnonymous = false + localStorage.setItem('donationData', JSON.stringify(localDonationData)) + } + + formik.setFormikState((prevState) => { + return { + ...prevState, + values: localDonationData, + } + }) + + if (localStorage.getItem('googleLogin') !== null) { + setStep(2) + } + } + }, [session]) + return <>{children} } @@ -74,6 +113,10 @@ export function FormikStepper({ children, ...props }: GenericFormProps { + localStorage.setItem('donationData', JSON.stringify(values)) + + if (localStorage.getItem('googleLogin') !== null) localStorage.removeItem('googleLogin') + if (isLastStep()) { values.isAnonymous = isLogged() === false ? true : values.isAnonymous ?? !isLogged() await props.onSubmit(values, helpers) @@ -117,6 +160,8 @@ export function FormikStepper({ children, ...props }: GenericFormProps { + if (localStorage.getItem('googleLogin') !== null) + localStorage.removeItem('googleLogin') setStep((s) => s - 1) }}> {t('btns.back')} diff --git a/src/components/one-time-donation/LoginForm.tsx b/src/components/one-time-donation/LoginForm.tsx index 615af598a..15ad206ab 100644 --- a/src/components/one-time-donation/LoginForm.tsx +++ b/src/components/one-time-donation/LoginForm.tsx @@ -11,17 +11,18 @@ import { StepsContext } from './helpers/stepperContext' import { AlertStore } from 'stores/AlertStore' import PasswordField from 'components/common/form/PasswordField' -const onGoogleLogin = () => { - const resp = signIn('google') -} - function LoginForm() { const { t } = useTranslation('one-time-donation') const [loading, setLoading] = useState(false) const { setStep } = useContext(StepsContext) const formik = useFormikContext() - const onClick = async () => { + const googleLoginHandler = () => { + signIn('google') + localStorage.setItem('googleLogin', 'true') + } + + const regularLoginHandler = async () => { try { setLoading(true) @@ -70,7 +71,7 @@ function LoginForm() { variant="contained" fullWidth sx={{ marginTop: theme.spacing(3) }} - onClick={onClick}> + onClick={regularLoginHandler}> {loading ? : t('second-step.btn-login')}