Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update alignment of Bank details on Donation (mobile) #1628

Merged
merged 2 commits into from
Oct 26, 2023
Merged

Update alignment of Bank details on Donation (mobile) #1628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc809d6
Update bank details on donation
Oct 24, 2023
c7df6f1
Update reasoning
Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 31 additions & 43 deletions src/components/client/one-time-donation/steps/FirstStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
Expand Down Expand Up @@ -114,7 +104,7 @@ export default function FirstStep() {
])

return (
<Root>
<Grid>
<Typography variant="h4">{t('third-step.title')}</Typography>
<Box marginTop={theme.spacing(4)}>
<RadioButtonGroup
Expand All @@ -125,19 +115,19 @@ export default function FirstStep() {
</Box>
<Collapse unmountOnExit in={paymentField.value === 'bank'} timeout="auto">
<List component="div" disablePadding>
<Typography marginTop={theme.spacing(4)} variant="h6">
<Typography variant="h6" mt={4} mb={1}>
{t('third-step.bank-details')}
</Typography>
<Typography variant="body1" marginBottom={theme.spacing(1)}>
{t('third-step.bank-instructions1')}
</Typography>
<Typography variant="body1" marginBottom={theme.spacing(1)}>
<Typography variant="body1" mb={3}>
{t('third-step.bank-instructions2')}
</Typography>
<Divider className={classes.divider} />
<Grid container alignItems="center" xs={12}>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={4}>
<Typography paddingLeft={2}>{t('third-step.owner_name')}</Typography>
<Divider />
<Grid container alignItems="center" xs={12} mt={2} mb={2}>
<Grid my={1} pr={2} item justifyContent="flex-start" alignItems="center" xs={4}>
<BankDetailsLabel>{t('third-step.owner_name')}</BankDetailsLabel>
</Grid>
<Grid my={1} item xs={5} justifyContent="flex-start">
<Typography>{t('third-step.owner_value')}</Typography>
Expand All @@ -152,7 +142,7 @@ export default function FirstStep() {
/>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={4}>
<Typography paddingLeft={2}>{t('third-step.bank_name')}</Typography>
<BankDetailsLabel>{t('third-step.bank_name')}</BankDetailsLabel>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={5}>
<Typography>{t('third-step.bank_value')}</Typography>
Expand All @@ -167,7 +157,7 @@ export default function FirstStep() {
/>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={4}>
<Typography paddingLeft={2}>IBAN:</Typography>
<BankDetailsLabel>IBAN:</BankDetailsLabel>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={5}>
<Typography>{ibanNumber}</Typography>
Expand All @@ -182,7 +172,7 @@ export default function FirstStep() {
/>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={4}>
<Typography paddingLeft={2}>BIC:</Typography>
<BankDetailsLabel>BIC:</BankDetailsLabel>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={5}>
<Typography>{BIC}</Typography>
Expand All @@ -196,10 +186,8 @@ export default function FirstStep() {
color="info"
/>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={4}>
<Typography paddingLeft={2} my={1}>
{t('third-step.reason-donation')}
</Typography>
<Grid my={1} pr={2} item justifyContent="flex-start" alignItems="center" xs={4}>
<BankDetailsLabel>{t('third-step.reason-donation')}</BankDetailsLabel>
</Grid>
<Grid my={1} item justifyContent="flex-start" alignItems="center" xs={5}>
<Typography data-testid="payment-reference-field">
Expand All @@ -216,8 +204,8 @@ export default function FirstStep() {
/>
</Grid>
</Grid>
<Divider className={classes.divider} />
<Typography>{t('third-step.message-warning')}</Typography>
<Divider />
<Typography mt={2}>{t('third-step.message-warning')}</Typography>
</List>
</Collapse>
<Collapse unmountOnExit in={paymentField.value === 'card'} timeout="auto">
Expand Down Expand Up @@ -361,6 +349,6 @@ export default function FirstStep() {
</Grid>
</Grid>
</Collapse>
</Root>
</Grid>
)
}
4 changes: 3 additions & 1 deletion src/components/client/support-us-form/SupportUsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,9 @@ export default function SupportUsForm() {
/>
</Grid>
<Grid my={1} item xs={4}>
<BankDetailsLabel my={1}>{t('third-step.reason-donation')}</BankDetailsLabel>
<BankDetailsLabel my={1} pr={2}>
{t('third-step.reason-donation')}
</BankDetailsLabel>
</Grid>
<Grid my={1} item xs={5}>
<Typography>{bankAccountInfo.paymentReference}</Typography>
Expand Down
Loading