Bugfix/google login returns to donations first step

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<FormikConfig<FormikValues>, 'children' | 'validationSchema'> {
   label?: string
+  initialValues: OneTimeDonation
 }
 
-export function FormikStep({ children }: FormikStepProps) {
+export function FormikStep({ children, initialValues }: FormikStepProps) {
+  const { setStep } = useContext(StepsContext)
+  const formik = useFormikContext<OneTimeDonation>()
+  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<OneTimeDo
       {...props}
       validationSchema={currentChild.props.validationSchema}
       onSubmit={async (values, helpers) => {
+        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<OneTimeDo
                   color="error"
                   size="large"
                   onClick={() => {
+                    if (localStorage.getItem('googleLogin') !== null)
+                      localStorage.removeItem('googleLogin')
                     setStep((s) => s - 1)
                   }}>
                   {t('btns.back')}

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<OneTimeDonation>()
 
-  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 ? <CircularProgress color="inherit" size="1.5rem" /> : t('second-step.btn-login')}
       </Button>
       <Button
@@ -79,7 +80,7 @@ function LoginForm() {
         variant="outlined"
         fullWidth
         sx={{ marginTop: theme.spacing(3) }}
-        onClick={onGoogleLogin}>
+        onClick={googleLoginHandler}>
         <Box display="inline-flex" alignItems="center" marginRight={theme.spacing(2)}>
           <Google /> {t('common:nav.login-with')} Google
         </Box>

src/components/one-time-donation/OneTimeDonationPage.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { styled } from '@mui/material/styles'
@@ -76,6 +77,7 @@ const scrollWindow = () => {
 
 export default function OneTimeDonation({ slug }: { slug: string }) {
   const { data, isLoading } = useViewCampaign(slug)
+
   const matches = useMediaQuery('sm')
   // const paymentIntentMutation = useCreatePaymentIntent({
   //   amount: 100,
@@ -84,6 +86,17 @@ export default function OneTimeDonation({ slug }: { slug: string }) {
   // useEffect(() => {
   //   paymentIntentMutation.mutate()
   // }, [])
+
+  useEffect(() => {
+    if (slug !== localStorage.getItem('campaignName')) {
+      localStorage.removeItem('donationData')
+      localStorage.removeItem('step')
+      localStorage.setItem('campaignName', `${slug}`)
+    } else {
+      localStorage.setItem('campaignName', `${slug}`)
+    }
+  }, [slug])
+
   if (isLoading || !data) return <CenteredSpinner size="2rem" />
   const { campaign } = data
 

src/components/one-time-donation/Steps.tsx

@@ -135,6 +135,7 @@ export default function DonationStepper({ onStepChange }: DonationStepperProps)
       }
     }
   }
+
   const steps: StepType[] = [
     {
       label: 'amount',
@@ -157,10 +158,12 @@ export default function DonationStepper({ onStepChange }: DonationStepperProps)
       validate: null,
     },
   ]
-  const [step, setStep] = React.useState(0)
+
+  const [step, setStep] = React.useState(Number(localStorage.getItem('step')) || 0)
 
   React.useEffect(() => {
     onStepChange()
+    localStorage.setItem('step', `${step}`)
   }, [step])
 
   return (
@@ -170,7 +173,11 @@ export default function DonationStepper({ onStepChange }: DonationStepperProps)
       ) : (
         <FormikStepper onSubmit={onSubmit} initialValues={initialValues}>
           {steps.map(({ label, component, validate }) => (
-            <FormikStep key={label} label={t(`step-labels.${label}`)} validationSchema={validate}>
+            <FormikStep
+              initialValues={initialValues}
+              key={label}
+              label={t(`step-labels.${label}`)}
+              validationSchema={validate}>
               {component}
             </FormikStep>
           ))}

src/components/one-time-donation/steps/SecondStep.tsx

@@ -1,15 +1,15 @@
+import React, { useState } from 'react'
 import { TabContext, TabList } from '@mui/lab'
 import TabPanel from '@mui/lab/TabPanel'
 import { Box, Tab, Typography, useMediaQuery } from '@mui/material'
-import { OneTimeDonation } from 'gql/donations'
+import { useFormikContext } from 'formik'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
-import React, { useState } from 'react'
+import { OneTimeDonation } from 'gql/donations'
 import AnonymousMenu from '../AnonymousForm'
 import LoggedUserDialog from '../LoggedUserDialog'
 import LoginForm from '../LoginForm'
 import RegisterForm from '../RegisterDialog'
-import { useFormikContext } from 'formik'
 
 enum Tabs {
   Login = '1',
@@ -20,9 +20,9 @@ export default function SecondStep() {
   const { t } = useTranslation('one-time-donation')
   const mobile = useMediaQuery('(max-width:575px)')
   const { data: session } = useSession()
-
   const [value, setValue] = useState('1')
   const formik = useFormikContext<OneTimeDonation>()
+
   const handleChange = (event: React.SyntheticEvent, newTab: string) => {
     if (newTab === Tabs.Anonymous) {
       formik.setFieldValue('isAnonymous', true)

src/components/one-time-donation/steps/Success.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 import { Grid, Typography } from '@mui/material'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
@@ -14,6 +15,13 @@ type Props = {
 export default function Success({ campaignSlug, donationId }: Props) {
   const { t } = useTranslation('one-time-donation')
   const [field] = useField('payment')
+
+  useEffect(() => {
+    localStorage.removeItem('donationData')
+    localStorage.removeItem('step')
+    localStorage.removeItem('campaignName')
+  }, [])
+
   return (
     <Grid>
       <Grid container justifyContent="center">

src/pages/logout.tsx

@@ -15,6 +15,7 @@ export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
 
 const Logout = () => {
   useEffect(() => {
+    localStorage.removeItem('googleLogin')
     signOut({ callbackUrl })
   }, [])