Transform otherAmount select to input field

public/locales/bg/one-time-donation.json

@@ -22,7 +22,8 @@
     "amount": "Каква сума желаете да дарите?",
     "other": "Друга сума",
     "BGN": "лв.",
-    "transaction-limit": "Дарението не може да надхвърля сумата от"
+    "only-number": "Полето може да съдържа само цифри.",
+    "transaction-limit": "Дарението не може да надхвърля сумата от {{limit}}"
   },
   "second-step": {
     "login": "Влизане в профил",

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",

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 }) || []
             }
           />
-          <Collapse unmountOnExit in={amount.value === 'other'} timeout="auto">
+          <Fade unmountOnExit in={amount.value === 'other'} exit={false} timeout={200}>
             <Grid
               item
               xs={12}
               style={
                 !mobile
                   ? {
-                      float: 'right',
-                      marginTop: -50,
+                      paddingTop: 16,
                       width: '49%',
                     }
                   : { marginTop: theme.spacing(2) }
               }>
               <NumberInputField limit={STRIPE_LIMIT_BGN} />
             </Grid>
-          </Collapse>
+          </Fade>
           {amount.value ? (
             <Box sx={{ mt: 4 }}>
               <Grid container>

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 (
     <FormTextField
       name={name}
@@ -74,7 +80,7 @@ export default function NumberInputField({
           return
         }
         if (Number(amount) > 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: (
           <InputAdornment variant="filled" position="end">
             {t('first-step.BGN')}
           </InputAdornment>
         ),
       }}
+      autoFocus
     />
   )
 }