fix: Grid2 migration

src/components/client/donation-flow/DonationFlowForm.tsx

@@ -6,14 +6,7 @@ import { useElements, useStripe } from '@stripe/react-stripe-js'
 import * as yup from 'yup'
 import { Form, Formik, FormikProps } from 'formik'
 import { PersistFormikValues } from 'formik-persist-values'
-import {
-  Box,
-  Button,
-  IconButton,
-  Tooltip,
-  Typography,
-  Unstable_Grid2 as Grid2,
-} from '@mui/material'
+import { Box, Button, IconButton, Tooltip, Typography, Grid2 } from '@mui/material'
 import { ArrowBack, Info } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
@@ -228,7 +221,7 @@ export function DonationFlowForm() {
       validateOnBlur={true}>
       {({ handleSubmit, values, errors, submitCount, isValid }) => (
         <Grid2 spacing={4} container justifyContent={'center'}>
-          <Grid2 sm={12} md={9} justifyContent={'center'}>
+          <Grid2 size={{ sm: 12, md: 9 }} justifyContent={'center'}>
             <Form onSubmit={handleSubmit} autoComplete="off">
               <ConfirmationDialog
                 isOpen={showCancelDialog}
@@ -252,14 +245,14 @@ export function DonationFlowForm() {
                 }}>
                 <ArrowBack sx={{ mr: 2 }} /> {t('action.back')}
               </Button>
-              <Grid2 container xs={12} md={7} direction={'column'}>
+              <Grid2 container size={{ xs: 12, md: 7 }} direction={'column'}>
                 <StepSplitter content="1" active={Boolean(values.amountChosen)} />
                 <Amount
                   disabled={values.payment === DonationFormPaymentMethod.BANK}
                   error={Boolean(errors.finalAmount) && Boolean(submitCount > 0)}
                 />
               </Grid2>
-              <Grid2 container xs={12} md={7} direction={'column'}>
+              <Grid2 container size={{ xs: 12, md: 7 }} direction={'column'}>
                 <StepSplitter content="2" active={Boolean(values.mode)} />
                 <PaymentModeSelect error={Boolean(errors.mode) && Boolean(submitCount > 0)} />
               </Grid2>
@@ -268,8 +261,8 @@ export function DonationFlowForm() {
                 display="flex"
                 container
                 justifyContent={'space-between'}
-                xs={12}>
-                <Grid2 container xs={12} md={7} direction={'column'}>
+                size={{ xs: 12 }}>
+                <Grid2 container size={{ xs: 12, md: 7 }} direction={'column'}>
                   <StepSplitter
                     content="3"
                     active={Boolean(values.amountChosen) && Boolean(values.payment)}
@@ -279,7 +272,7 @@ export function DonationFlowForm() {
                     error={Boolean(errors.payment) && submitCount > 0}
                   />
                 </Grid2>
-                <Grid2 container md={4} display={{ xs: 'none', md: 'flex' }}>
+                <Grid2 container size={{ md: 4 }} display={{ xs: 'none', md: 'flex' }}>
                   <AlertsColumn sectionsRefArray={[paymentMethodSectionRef]} />
                 </Grid2>
               </Grid2>
@@ -288,20 +281,20 @@ export function DonationFlowForm() {
                 container
                 justifyContent={'space-between'}
                 flexDirection={'row'}>
-                <Grid2 container xs={12} md={7} direction={'column'}>
+                <Grid2 container size={{ xs: 12, md: 7 }} direction={'column'}>
                   <StepSplitter content="4" active={Boolean(values.authentication)} />
                   <Authentication
                     sectionRef={authenticationSectionRef}
                     error={Boolean(errors.authentication) && submitCount > 0}
                   />
                   <StepSplitter />
                 </Grid2>
-                <Grid2 container md={4} display={{ xs: 'none', md: 'flex' }}>
+                <Grid2 container size={{ md: 4 }} display={{ xs: 'none', md: 'flex' }}>
                   <AlertsColumn sectionsRefArray={[authenticationSectionRef]} />
                 </Grid2>
               </Grid2>
-              <Grid2 container xs={12} gap={6} justifyContent={'space-between'} md={9}>
-                <Grid2 container direction={'column'} gap={1} md={6}>
+              <Grid2 container size={{ xs: 12, md: 9 }} gap={6} justifyContent={'space-between'}>
+                <Grid2 container direction={'column'} gap={1} size={{ md: 6 }}>
                   <Grid2 container display={{ xs: 'flex', md: 'none' }}>
                     <PaymentSummaryAlert
                       donationAmount={Number(values.finalAmount)}
@@ -337,7 +330,7 @@ export function DonationFlowForm() {
                     sx={{ maxWidth: 150 }}
                   />
                 </Grid2>
-                <Grid2 container md={4} display={{ xs: 'none', md: 'flex' }}>
+                <Grid2 container size={{ md: 4 }} display={{ xs: 'none', md: 'flex' }}>
                   <PaymentSummaryAlert
                     donationAmount={Number(values.finalAmount)}
                     sx={{ minWidth: 345, maxHeight: 175 }}

src/components/client/donation-flow/DonationFlowLayout.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-import { Typography, Box, Unstable_Grid2 as Grid2, useMediaQuery } from '@mui/material'
+import { Typography, Box, Grid2, useMediaQuery } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
 import {
@@ -72,7 +72,7 @@ function DonationFlowLayout({
           {/* A11Y TODO: Translate alt text */}
           <StyledBanner src={bannerSource} alt="Campaign banner image" sizes="100vw" fill />
         </StyledBannerWrapper>
-        <StyledBeneficiaryAvatarWrapper xs={12} justifyContent="center" p={4}>
+        <StyledBeneficiaryAvatarWrapper size={{ xs: 12 }} justifyContent="center" p={4}>
           <StyledBeneficiaryAvatar
             src={beneficiaryAvatarSource}
             alt={`Image of ${campaign.beneficiary.person?.firstName} ${campaign.beneficiary.person?.lastName}`}

src/components/client/donation-flow/DonationFlowStatusPage.tsx

@@ -12,7 +12,7 @@ import {
   Card,
   CardContent,
   CardActionArea,
-  Unstable_Grid2 as Grid2,
+  Grid2,
 } from '@mui/material'
 import { Email } from '@mui/icons-material'
 
@@ -162,19 +162,19 @@ export default function DonationFlowStatusPage({ slug }: { slug: string }) {
       </Stack>
       <StepSplitter />
       <Grid2 spacing={2} container>
-        <Grid2 xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <LinkCard
             href={routes.campaigns.viewCampaignBySlug(slug)}
             text={t('status.success.link.return')}
           />
         </Grid2>
-        <Grid2 xs={12} md={6}>
+        <Grid2>
           <LinkCard href={routes.campaigns.index} text={t('status.success.link.see')} />
         </Grid2>
-        <Grid2 xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <LinkCard href={routes.profile.index} text={t('status.success.link.donations')} />
         </Grid2>
-        <Grid2 xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <LinkCard href={routes.support} text={t('status.success.link.volunteer')} />
         </Grid2>
       </Grid2>
@@ -200,13 +200,13 @@ export default function DonationFlowStatusPage({ slug }: { slug: string }) {
       </Typography>
       <StepSplitter />
       <Grid2 spacing={2} container>
-        <Grid2 xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <LinkCard
             href={routes.campaigns.oneTimeDonation(slug)}
             text={t('status.fail.link.retry')}
           />
         </Grid2>
-        <Grid2 xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <LinkCard
             href={routes.campaigns.viewCampaignBySlug(slug)}
             text={t('status.fail.link.return')}

src/components/client/donation-flow/alerts/PaymentSummaryAlert.tsx

@@ -8,7 +8,7 @@ import { stripeFeeCalculator } from '../helpers/stripe-fee-calculator'
 import { CardRegion } from 'gql/donations.enums'
 import { useFormikContext } from 'formik'
 import { DonationFormData } from '../helpers/types'
-import Grid2 from '@mui/material/Unstable_Grid2'
+import { Grid2 } from '@mui/material'
 
 function PaymentSummaryAlert({
   donationAmount,
@@ -28,7 +28,7 @@ function PaymentSummaryAlert({
   return (
     <Grid2
       container
-      xs={12}
+      size={{ xs: 12 }}
       direction={'column'}
       sx={{
         borderRadius: 8,

src/components/client/donation-flow/common/RadioCardGroup.tsx

@@ -9,7 +9,9 @@ import {
   RadioGroup,
   RadioGroupProps,
   Stack,
+  Grid,
   Grid2,
+  Skeleton,
 } from '@mui/material'
 import { styled, lighten } from '@mui/material/styles'
 import theme from 'common/theme'
@@ -153,7 +155,7 @@ function RadioCardGroup({ options, name, columns, loading, error }: RadioCardGro
                 disabled={option.disabled}
                 loading={loading}
               />
-            </Grid>
+            </Grid2>
           ))}
         </Grid>
       </RadioGroup>

src/components/client/donation-flow/steps/Amount.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import * as yup from 'yup'
 import { useTranslation } from 'next-i18next'
-import { useMediaQuery, Collapse, Typography, Unstable_Grid2 as Grid2 } from '@mui/material'
+import { useMediaQuery, Collapse, Typography, Grid2 } from '@mui/material'
 import { useField, useFormikContext } from 'formik'
 
 import { CardRegion } from 'gql/donations.enums'
@@ -119,8 +119,7 @@ export default function Amount({ disabled, sectionRef, error }: SelectDonationAm
       />
       <Collapse unmountOnExit in={value === 'other'} timeout="auto">
         <Grid2
-          xs={12}
-          sm={6}
+          size={{ xs: 12, sm: 6 }}
           //Since we can't put the otherAmount field in the same grid as the radio buttons
           //if the amount of prices are not even and there is empty space to the right, we need to float it to the right
           style={

src/components/client/donation-flow/steps/PaymentModeSelect.tsx

@@ -1,4 +1,4 @@
-import { Typography, Unstable_Grid2 as Grid2 } from '@mui/material'
+import { Typography, Grid2 } from '@mui/material'
 import RadioButtonGroup from 'components/common/form/RadioButtonGroup'
 
 import React, { useEffect } from 'react'
@@ -37,7 +37,7 @@ export default function PaymentModeSelect({ error }: PaymentModeSelectProps) {
   return (
     <Grid2 container gap={5} id={ids['mode']} direction={'column'}>
       <Typography variant="h5">{t('donation-flow:step.payment-mode.title')}</Typography>
-      <Grid2 md={6} gap={3}>
+      <Grid2 size={{ md: 6 }} gap={3}>
         {error && <DonationFormSectionErrorText message={t('general.error.select-field')} />}
         <RadioButtonGroup name="mode" columns={1} options={options} error={error} />
       </Grid2>

src/components/client/donation-flow/steps/authentication/Authentication.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
-import { Box, Typography, Alert, useMediaQuery, Unstable_Grid2 as Grid2 } from '@mui/material'
+import { Box, Typography, Alert, useMediaQuery, Grid2 } from '@mui/material'
 import { useFormikContext } from 'formik'
 import { useSession } from 'next-auth/react'
 

src/components/client/donation-flow/steps/payment-method/BankPayment.tsx

@@ -1,14 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import {
-  Alert,
-  AlertTitle,
-  Divider,
-  List,
-  Typography,
-  Unstable_Grid2 as Grid2,
-  useMediaQuery,
-} from '@mui/material'
+import { Alert, AlertTitle, Divider, List, Typography, Grid2, useMediaQuery } from '@mui/material'
 
 import { ibanNumber } from 'common/iban'
 import theme from 'common/theme'
@@ -38,7 +30,7 @@ function BankPayment() {
       </Typography>
       <Divider />
       <Grid2 rowSpacing={2} my={2} container justifyContent="center">
-        <Grid2 display="flex" alignItems="center" justifyContent="space-between" xs={12}>
+        <Grid2 display="flex" alignItems="center" justifyContent="space-between" size={{ xs: 12 }}>
           <Typography>{bankAccountInfo.owner}</Typography>
           <CopyTextButton
             label={t('step.payment-method.bank.btn-copy')}
@@ -48,7 +40,7 @@ function BankPayment() {
             color="info"
           />
         </Grid2>
-        <Grid2 display="flex" alignItems="center" justifyContent="space-between" xs={12}>
+        <Grid2 display="flex" alignItems="center" justifyContent="space-between" size={{ xs: 12 }}>
           <Typography>{bankAccountInfo.bank}</Typography>
           <CopyTextButton
             label={t('step.payment-method.bank.btn-copy')}
@@ -58,7 +50,7 @@ function BankPayment() {
             color="info"
           />
         </Grid2>
-        <Grid2 display="flex" alignItems="center" justifyContent="space-between" xs={12}>
+        <Grid2 display="flex" alignItems="center" justifyContent="space-between" size={{ xs: 12 }}>
           <Typography>{ibanNumber}</Typography>
           <CopyTextButton
             label={t('step.payment-method.bank.btn-copy')}
@@ -75,7 +67,7 @@ function BankPayment() {
       </Typography>
       <Divider />
       <Grid2 my={1} container justifyContent="center">
-        <Grid2 display="flex" alignItems="center" justifyContent="space-between" xs={12}>
+        <Grid2 display="flex" alignItems="center" justifyContent="space-between" size={{ xs: 12 }}>
           <Typography data-testid="payment-reference-field" fontWeight="bold">
             {campaign.paymentReference}
           </Typography>

src/components/client/donation-flow/steps/payment-method/TaxesCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Trans, useTranslation } from 'next-i18next'
-import { Typography, Unstable_Grid2 as Grid2 } from '@mui/material'
+import { Typography, Grid2 } from '@mui/material'
 import { useField } from 'formik'
 
 import { CardRegion } from 'gql/donations.enums'
@@ -15,7 +15,7 @@ export const TaxesCheckbox = () => {
   return (
     <>
       <Grid2 container>
-        <Grid2 xs={12} sm={8}>
+        <Grid2 size={{ xs: 12, sm: 8 }}>
           <CheckboxField
             name="cardIncludeFees"
             label={
@@ -25,7 +25,7 @@ export const TaxesCheckbox = () => {
             }
           />
         </Grid2>
-        <Grid2 xs={12} sm={4} mb={2}>
+        <Grid2 mb={2} size={{ xs: 12, sm: 4 }}>
           <FormSelectField
             name="cardRegion"
             label={t('step.payment-method.field.card-region.title')}

src/components/common/form/AcceptPrivacyPolicyField.tsx

@@ -8,17 +8,20 @@ import CheckboxField, { CheckboxFieldProps } from 'components/common/form/Checkb
 export type AcceptGDPRFieldProps = {
   name: string
   showFieldError?: boolean
+  disabled?: boolean
 }
 
 export default function AcceptPrivacyPolicyField({
   name,
   showFieldError = true,
+  disabled,
   ...rest
 }: AcceptGDPRFieldProps) {
   const { t } = useTranslation()
   return (
     <CheckboxField
       name={name}
+      disabled={disabled}
       showFieldError={showFieldError}
       label={
         <Typography variant="body2">