From e2570b3837a07fa1549aad947ec947c6f802b2bf Mon Sep 17 00:00:00 2001
From: Dimitar Filipov <grinndev@protonmail.com>
Date: Mon, 4 Sep 2023 20:21:30 +0300
Subject: [PATCH 1/3] transoform otherAmount select to input field

---
 .../client/one-time-donation/steps/FirstStep.tsx  | 15 +++++++++------
 src/components/common/form/NumberInputField.tsx   |  9 ++++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

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 }) || []
             }
           />
-          <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>
diff --git a/src/components/common/form/NumberInputField.tsx b/src/components/common/form/NumberInputField.tsx
index c68224ec5..c80e12310 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 (
     <FormTextField
       name={name}
@@ -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
     />
   )
 }

From 777fd9365d8950ae3f51d7a4e211ec4c6f93361c Mon Sep 17 00:00:00 2001
From: Dimitar Filipov <grinndev@protonmail.com>
Date: Tue, 5 Sep 2023 17:37:19 +0300
Subject: [PATCH 2/3] add 'only-number' missing translation and use
 interpolation for 'transaction-limit'

---
 public/locales/bg/one-time-donation.json | 3 ++-
 public/locales/en/one-time-donation.json | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

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

From 0c46718084084490fd1a81ccc5c20be46fc8ce7e Mon Sep 17 00:00:00 2001
From: Dimitar Filipov <grinndev@protonmail.com>
Date: Tue, 5 Sep 2023 17:37:32 +0300
Subject: [PATCH 3/3] use interpolation

---
 src/components/common/form/NumberInputField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/form/NumberInputField.tsx b/src/components/common/form/NumberInputField.tsx
index c80e12310..bad2e7833 100644
--- a/src/components/common/form/NumberInputField.tsx
+++ b/src/components/common/form/NumberInputField.tsx
@@ -80,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)