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}