diff --git a/src/components/client/one-time-donation/steps/FirstStep.tsx b/src/components/client/one-time-donation/steps/FirstStep.tsx
index 755eba70d..8e177fbc8 100644
--- a/src/components/client/one-time-donation/steps/FirstStep.tsx
+++ b/src/components/client/one-time-donation/steps/FirstStep.tsx
@@ -1,46 +1,36 @@
import React, { useContext, useEffect } from 'react'
-import { styled } from '@mui/material/styles'
+import { useSession } from 'next-auth/react'
import { Trans, useTranslation } from 'next-i18next'
+import getConfig from 'next/config'
+import dynamic from 'next/dynamic'
import { useField, useFormikContext } from 'formik'
+import { OneTimeDonation } from 'gql/donations'
+import { CardRegion } from 'gql/donations.enums'
+
+import { PayPalScriptProvider } from '@paypal/react-paypal-js'
import { Box, Collapse, Divider, Fade, Grid, List, Typography } from '@mui/material'
import EventRepeatIcon from '@mui/icons-material/EventRepeat'
+import { useMediaQuery } from '@mui/material'
+
import theme from 'common/theme'
-import RadioButtonGroup from 'components/common/form/RadioButtonGroup'
import { moneyPublic, moneyPublicDecimals2, toMoney } from 'common/util/money'
import { BIC, ibanNumber } from 'common/iban'
+import { isAdmin } from 'common/util/roles'
+import RadioButtonGroup from 'components/common/form/RadioButtonGroup'
import { CopyTextButton } from 'components/common/CopyTextButton'
-import { StepsContext } from '../helpers/stepperContext'
-import { useMediaQuery } from '@mui/material'
-import { OneTimeDonation } from 'gql/donations'
import ExternalLink from 'components/common/ExternalLink'
-import { stripeFeeCalculator, stripeIncludeFeeCalculator } from '../helpers/stripe-fee-calculator'
import CheckboxField from 'components/common/form/CheckboxField'
import FormSelectField from 'components/common/form/FormSelectField'
-import { CardRegion } from 'gql/donations.enums'
-import { PayPalScriptProvider } from '@paypal/react-paypal-js'
-import { isAdmin } from 'common/util/roles'
-import { useSession } from 'next-auth/react'
-import getConfig from 'next/config'
-
-import dynamic from 'next/dynamic'
import NumberInputField from 'components/common/form/NumberInputField'
+import { StepsContext } from '../helpers/stepperContext'
+import { stripeFeeCalculator, stripeIncludeFeeCalculator } from '../helpers/stripe-fee-calculator'
+
+import { BankDetailsLabel } from 'components/client/support-us-form/SupportUs.styled'
+
const PaypalDonationButton = dynamic(() => import('../helpers/paypalDonationButton'), {
ssr: false,
})
-const PREFIX = 'FirstStep'
-
-const classes = {
- divider: `${PREFIX}-divider`,
-}
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled('div')(() => ({
- [`& .${classes.divider}`]: {
- border: `1px solid ${theme.palette.common.black}`,
- },
-}))
-
export default function FirstStep() {
const { data: session } = useSession()
const { t } = useTranslation('one-time-donation')
@@ -114,7 +104,7 @@ export default function FirstStep() {
])
return (
-
+
{t('third-step.title')}
-
+
{t('third-step.bank-details')}
{t('third-step.bank-instructions1')}
-
+
{t('third-step.bank-instructions2')}
-
-
-
- {t('third-step.owner_name')}
+
+
+
+ {t('third-step.owner_name')}
{t('third-step.owner_value')}
@@ -152,7 +142,7 @@ export default function FirstStep() {
/>
- {t('third-step.bank_name')}
+ {t('third-step.bank_name')}
{t('third-step.bank_value')}
@@ -167,7 +157,7 @@ export default function FirstStep() {
/>
- IBAN:
+ IBAN:
{ibanNumber}
@@ -182,7 +172,7 @@ export default function FirstStep() {
/>
- BIC:
+ BIC:
{BIC}
@@ -196,10 +186,8 @@ export default function FirstStep() {
color="info"
/>
-
-
- {t('third-step.reason-donation')}
-
+
+ {t('third-step.reason-donation')}
@@ -216,8 +204,8 @@ export default function FirstStep() {
/>
-
- {t('third-step.message-warning')}
+
+ {t('third-step.message-warning')}
@@ -361,6 +349,6 @@ export default function FirstStep() {
-
+
)
}
diff --git a/src/components/client/support-us-form/SupportUsForm.tsx b/src/components/client/support-us-form/SupportUsForm.tsx
index 1f80d76e4..b789bb30f 100644
--- a/src/components/client/support-us-form/SupportUsForm.tsx
+++ b/src/components/client/support-us-form/SupportUsForm.tsx
@@ -90,7 +90,9 @@ export default function SupportUsForm() {
/>
- {t('third-step.reason-donation')}
+
+ {t('third-step.reason-donation')}
+
{bankAccountInfo.paymentReference}