diff --git a/public/locales/bg/one-time-donation.json b/public/locales/bg/one-time-donation.json index 7d16edac0..727c46af8 100644 --- a/public/locales/bg/one-time-donation.json +++ b/public/locales/bg/one-time-donation.json @@ -22,7 +22,8 @@ "amount": "Каква сума желаете да дарите?", "other": "Друга сума", "BGN": "лв.", - "transaction-limit": "Дарението не може да надхвърля сумата от" + "only-number": "Полето може да съдържа само цифри.", + "transaction-limit": "Дарението не може да надхвърля сумата от {{limit}}" }, "second-step": { "login": "Влизане в профил", diff --git a/public/locales/en/one-time-donation.json b/public/locales/en/one-time-donation.json index 3ff4a0150..0ad6991aa 100644 --- a/public/locales/en/one-time-donation.json +++ b/public/locales/en/one-time-donation.json @@ -22,7 +22,8 @@ "amount": "How much would you like to donate?", "other": "Other amount", "BGN": "BGN", - "transaction-limit": "Donation can't exceed the sum of " + "only-number": "This field can contain only numbers.", + "transaction-limit": "Donation can't exceed the sum of {{limit}}" }, "second-step": { "login": "Log in", diff --git a/src/components/client/one-time-donation/steps/FirstStep.tsx b/src/components/client/one-time-donation/steps/FirstStep.tsx index 028e6987e..c170e38c6 100644 --- a/src/components/client/one-time-donation/steps/FirstStep.tsx +++ b/src/components/client/one-time-donation/steps/FirstStep.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react' import { styled } from '@mui/material/styles' import { Trans, useTranslation } from 'next-i18next' import { useField, useFormikContext } from 'formik' -import { Box, Collapse, Divider, Grid, List, Typography } from '@mui/material' +import { Box, Collapse, Divider, Fade, Grid, List, Typography } from '@mui/material' import EventRepeatIcon from '@mui/icons-material/EventRepeat' import theme from 'common/theme' import RadioButtonGroup from 'components/common/form/RadioButtonGroup' @@ -240,25 +240,28 @@ export default function FirstStep() { label: moneyPublic(Number(v)), value: String(Number(v)), })) - .concat({ label: t('first-step.other'), value: 'other' }) || [] + .concat({ + label: t('first-step.other'), + value: 'other', + hidden: amount.value === 'other', + } as { label: string; value: string; hidden?: boolean }) || [] } /> - + - + {amount.value ? ( diff --git a/src/components/common/form/NumberInputField.tsx b/src/components/common/form/NumberInputField.tsx index c68224ec5..bad2e7833 100644 --- a/src/components/common/form/NumberInputField.tsx +++ b/src/components/common/form/NumberInputField.tsx @@ -1,3 +1,5 @@ +import { useEffect } from 'react' + import { InputAdornment } from '@mui/material' import FormTextField from './FormTextField' @@ -18,6 +20,10 @@ export default function NumberInputField({ const [, meta, { setValue, setError }] = useField(name) const decimalSeparator = (1.1).toLocaleString(i18n.lang).charAt(1) + useEffect(() => { + setValue(1) + }, []) + return ( limit) { - setError(`${t('first-step.transaction-limit')} ${moneyPublic(limit, 'BGN', 1)}`) + setError(t('first-step.transaction-limit', { limit: moneyPublic(limit, 'BGN', 1) })) return } else if (Number(amount) < 1) { setValue(1) @@ -89,13 +95,14 @@ export default function NumberInputField({ max: limit, inputMode: 'decimal', }, - style: { padding: 7 }, + style: { padding: 5 }, endAdornment: ( {t('first-step.BGN')} ), }} + autoFocus /> ) }