handle cents

Author: ChaosExAnima

components/donate/DonateWidget.tsx

@@ -89,48 +89,70 @@ export function DonateWidget({
   const [currentAmount, setCurrentAmount] = useState(
     () => defaultAmount ?? amounts[frequency][currency][0]
   )
+  const [amountDisplay, setAmountDisplay] = useState(() =>
+    ((defaultAmount ?? amounts[frequency][currency][0]) / 100).toFixed(2)
+  )
   const [dirty, setDirty] = useState(false)
   const [loadingCheckout, setLoadingCheckout] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const intl = useIntl()
 
+  const updateAmount = useCallback((amount: number) => {
+    const intAmount = Math.round(amount)
+    if (isNaN(intAmount) || intAmount < 100) {
+      return
+    }
+    setCurrentAmount(intAmount)
+    setAmountDisplay((intAmount / 100).toFixed(2))
+  }, [])
+
   const handleChangeFrequency = useCallback(
     (toFrequency: DonationFrequency) => () => {
       setFrequency(toFrequency)
-      setCurrentAmount(amounts[toFrequency][currency][0])
+      updateAmount(amounts[toFrequency][currency][0])
       setDirty(false)
       setError(null)
     },
-    [amounts, currency]
+    [amounts, currency, updateAmount]
   )
   const handleChangeCurrency = useCallback(
     (toCurrency: Currency) => {
       setCurrency(toCurrency)
-      setCurrentAmount(amounts[frequency][toCurrency][0])
+      updateAmount(amounts[frequency][toCurrency][0])
       setDirty(false)
       setError(null)
     },
-    [amounts, frequency]
+    [amounts, frequency, updateAmount]
   )
   const handleChangeAmount: React.ChangeEventHandler<HTMLInputElement> =
     useCallback(
       (event) => {
-        setCurrentAmount(event.currentTarget.valueAsNumber * 100)
         setDirty(true)
-        if (event.currentTarget.valueAsNumber < 1) {
-          setError(intl.formatMessage(messages.amountError))
-        } else {
-          setError(null)
+        const { value, valueAsNumber } = event.currentTarget
+        setAmountDisplay(
+          value.replaceAll(/[^0-9\.]+/g, "") ||
+            valueAsNumber.toFixed(2) ||
+            (currentAmount / 100).toFixed(2)
+        )
+        if (isNaN(valueAsNumber) || valueAsNumber < 1) {
+          return
         }
+        setCurrentAmount(valueAsNumber * 100)
       },
-      [intl]
+      [currentAmount]
     )
-  const handleClickAmount = useCallback((amount: number) => {
-    setCurrentAmount(amount)
-    setDirty(false)
-    setError(null)
-  }, [])
+  const handleClickAmount = useCallback(
+    (amount: number) => {
+      updateAmount(amount)
+      setDirty(false)
+      setError(null)
+    },
+    [updateAmount]
+  )
+  const handleBlurAmount = useCallback(() => {
+    setAmountDisplay((currentAmount / 100).toFixed(2))
+  }, [currentAmount])
 
   const handleDonate = useCallback(() => {
     setLoadingCheckout(true)
@@ -191,10 +213,11 @@ export function DonateWidget({
         <Input
           className="rounded-l-none focus:shadow-none"
           type="number"
-          value={currentAmount / 100}
+          value={amountDisplay}
           onChange={handleChangeAmount}
+          onBlur={handleBlurAmount}
           min={1}
-          step={1}
+          step={0.01}
           aria-label={intl.formatMessage(messages.amountSelect)}
           disabled={loadingCheckout}
           fullWidth

pages/donate/index.tsx

@@ -32,7 +32,7 @@ export default function DonatePage({
       const params = new URLSearchParams({
         url: donation_url,
         frequency,
-        amount: amount.toString(),
+        amount: amount.toFixed(0),
         currency,
       })
       router.push(`/donate/checkout?${params.toString()}`)