From dcd8fa2b41892bf0cd2b3277e4f7f8e3393aacf6 Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 3 Aug 2023 11:22:32 +0300 Subject: [PATCH 1/2] OneTimeDonationPage: Render DonationStepper only on client sessionStorage is not available on SSR --- .../OneTimeDonationPage/OneTimeDonationPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/client/one-time-donation/OneTimeDonationPage/OneTimeDonationPage.tsx b/src/components/client/one-time-donation/OneTimeDonationPage/OneTimeDonationPage.tsx index f645c393b..253f45501 100644 --- a/src/components/client/one-time-donation/OneTimeDonationPage/OneTimeDonationPage.tsx +++ b/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({ From b743219304f07727952ecfdc1f19fe244593731c Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 3 Aug 2023 11:23:14 +0300 Subject: [PATCH 2/2] SecondStep: Go to anonymous tab if isAnonymous is true Now that the flow is saved inside sessionstorage, we need this for consistency reasons --- .../client/one-time-donation/AnonymousForm.tsx | 11 ++++++++++- .../client/one-time-donation/steps/SecondStep.tsx | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/client/one-time-donation/AnonymousForm.tsx b/src/components/client/one-time-donation/AnonymousForm.tsx index a56f02dc8..28df309a0 100644 --- a/src/components/client/one-time-donation/AnonymousForm.tsx +++ b/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() 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} /> diff --git a/src/components/client/one-time-donation/steps/SecondStep.tsx b/src/components/client/one-time-donation/steps/SecondStep.tsx index e32111432..d72e72b51 100644 --- a/src/components/client/one-time-donation/steps/SecondStep.tsx +++ b/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() + const [value, setValue] = useState(formik.values.isAnonymous ? '3' : '1') const handleChange = (event: React.SyntheticEvent, newTab: string) => { if (newTab === Tabs.Anonymous) { formik.setFieldValue('isAnonymous', true)