OneTimeDonationPage: Render DonationStepper only on client (#1543)

* OneTimeDonationPage: Render DonationStepper only on client
sessionStorage is not available on SSR

* SecondStep: Go to anonymous tab if isAnonymous is true
Now that the flow is saved inside sessionstorage, we need this for consistency reasons

src/components/client/one-time-donation/AnonymousForm.tsx

@@ -3,10 +3,13 @@ import { useTranslation } from 'next-i18next'
 import { Grid, Typography } from '@mui/material'
 import EmailField from 'components/common/form/EmailField'
 import { useSession } from 'next-auth/react'
+import { useFormikContext } from 'formik'
+import { OneTimeDonation } from 'gql/donations'
 
 export default function AnonymousForm() {
   const { t } = useTranslation('one-time-donation')
   const { data: session } = useSession()
+  const formik = useFormikContext<OneTimeDonation>()
   const isLogged = session?.accessToken ? true : false
   return (
     <>
@@ -23,7 +26,13 @@ export default function AnonymousForm() {
             name="personsEmail"
             label="Email"
             fullWidth
-            value={isLogged ? session?.user?.email : null}
+            value={
+              isLogged
+                ? session?.user?.email
+                : formik.values.personsEmail
+                ? formik.values.personsEmail
+                : ''
+            }
             disabled={isLogged ? true : false}
           />
         </Grid>

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

@@ -8,7 +8,7 @@ import { beneficiaryCampaignPictureUrl } from 'common/util/campaignImageUrls'
 import Layout from 'components/client/layout/Layout'
 import { useViewCampaign } from 'common/hooks/campaigns'
 import CenteredSpinner from 'components/common/CenteredSpinner'
-import DonationStepper from '../Steps'
+import dynamic from 'next/dynamic'
 
 import {
   BeneficiaryAvatar,
@@ -24,6 +24,8 @@ const scrollWindow = () => {
   window.scrollTo({ top: 200, behavior: 'smooth' })
 }
 
+const DonationStepper = dynamic(() => import('../Steps'), { ssr: false })
+
 export default function OneTimeDonation({ slug }: { slug: string }) {
   const { data, isLoading } = useViewCampaign(slug)
   // const paymentIntentMutation = useCreatePaymentIntent({

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

@@ -21,8 +21,8 @@ export default function SecondStep() {
   const mobile = useMediaQuery('(max-width:575px)')
   const { data: session } = useSession()
 
-  const [value, setValue] = useState('1')
   const formik = useFormikContext<OneTimeDonation>()
+  const [value, setValue] = useState(formik.values.isAnonymous ? '3' : '1')
   const handleChange = (event: React.SyntheticEvent, newTab: string) => {
     if (newTab === Tabs.Anonymous) {
       formik.setFieldValue('isAnonymous', true)