Fixes some bugs and addresses feedback

ChaosExAnima · ChaosExAnima · commit ec88059d7ebe · 2025-06-18T12:10:00.000+02:00
diff --git a/components/donate/DonateCheckout.tsx b/components/donate/DonateCheckout.tsx
@@ -4,11 +4,11 @@ import Link from "next/link"
 import { ChangeEvent, FormEvent, useCallback, useState } from "react"
 import { FormattedMessage } from "react-intl"
 
-import LoadingIcon from "../public/icons/loading.svg?inline"
-import ArrowLeftIcon from "../public/ui/arrow-left.svg?inline"
+import LoadingIcon from "../../public/icons/loading.svg?inline"
+import ArrowLeftIcon from "../../public/ui/arrow-left.svg?inline"
 
-import { Button } from "./Button"
-import { Input } from "./Input"
+import { Button } from "../Button"
+import { Input } from "../Input"
 
 interface DonateCheckoutProps {
   backUrl?: string
@@ -24,11 +24,11 @@ export function DonateCheckout({
   const checkout = useCheckout()
 
   const [email, setEmail] = useState("")
-  const [message, setMessage] = useState<string | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
 
   const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setMessage(null)
+    setErrorMessage(null)
     setEmail(e.target.value)
   }, [])
 
@@ -39,9 +39,9 @@ export function DonateCheckout({
 
     const result = await checkout.updateEmail(email)
     if (result.type === "error") {
-      setMessage(result.error.message)
+      setErrorMessage(result.error.message)
     } else {
-      setMessage(null)
+      setErrorMessage(null)
     }
   }, [checkout, email])
 
@@ -53,7 +53,7 @@ export function DonateCheckout({
 
       const result = await checkout.updateEmail(email)
       if (result.type === "error") {
-        setMessage(result.error.message)
+        setErrorMessage(result.error.message)
         setIsLoading(false)
         return
       }
@@ -63,10 +63,11 @@ export function DonateCheckout({
       })
 
       if (confirmResult.type === "error") {
-        setMessage(confirmResult.error.message)
+        setErrorMessage(confirmResult.error.message)
         setIsLoading(false)
+      } else {
+        onComplete()
       }
-      onComplete()
     },
     [checkout, email, onComplete]
   )
@@ -142,7 +143,9 @@ export function DonateCheckout({
       </div>
 
       <div className="mt-4">
-        {message && <p className="text-error text-b3 mb-2">{message}</p>}
+        {errorMessage && (
+          <p className="text-error text-b3 mb-2">{errorMessage}</p>
+        )}
         <Button
           disabled={isLoading}
           dark
diff --git a/components/donate/DonateFooter.tsx b/components/donate/DonateFooter.tsx
@@ -0,0 +1,15 @@
+import { FormattedMessage } from "react-intl"
+
+import LogoPurple from "../../public/logos/logo-purple.svg?inline"
+
+export function DonateFooter() {
+  return (
+    <footer className="flex gap-2 items-center mt-3 text-b4 bg-gray-3 px-8 py-2">
+      <LogoPurple className="size-6" />
+      <FormattedMessage
+        id="donate_widget.footer"
+        defaultMessage="Donations go to Mastodon gGmbH"
+      />
+    </footer>
+  )
+}
diff --git a/components/donate/DonateWidget.tsx b/components/donate/DonateWidget.tsx
@@ -8,15 +8,15 @@ import {
 } from "react-intl"
 import { Select } from "@headlessui/react"
 
-import CheckIcon from "../public/icons/check.svg?inline"
-import { Button } from "./Button"
-
+import CheckIcon from "../../public/icons/check.svg?inline"
+import DropdownArrowIcon from "../../public/icons/dropdown-arrow.svg?inline"
 import type {
   Currency,
   CampaignResponse,
   DonationFrequency,
-} from "../types/api"
-import { Input } from "./Input"
+} from "../../types/api"
+import { Button } from "../Button"
+import { Input } from "../Input"
 
 export type OnDonateFn = (
   amount: number,
@@ -90,48 +90,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)
@@ -150,52 +172,59 @@ export function DonateWidget({
         {frequencies.map((freq) => (
           <Button
             key={freq}
-            className={classNames(
-              "rounded-none first:rounded-l-md last:rounded-r-md"
-            )}
+            className="rounded-none first:rounded-l-md last:rounded-r-md pr-6 group"
             dark={freq === frequency}
             onClick={handleChangeFrequency(freq)}
             disabled={loadingCheckout}
             fullWidth
           >
-            <CheckIcon className="fill-black w-auto h-4" />
+            <CheckIcon
+              className={classNames(
+                "fill-black w-auto h-4 transition-opacity",
+                frequency !== freq && "opacity-0 group-hover:opacity-100"
+              )}
+            />
             {intl.formatMessage(messages[freq])}
           </Button>
         ))}
       </div>
 
       <div className="flex focus-within:shadow-input rounded-md">
-        <Select
-          className={classNames(
-            "p-2 rounded-l-md outline-none transition-colors cursor-pointer disabled:cursor-default font-medium",
-            "text-white bg-blurple-500 hocus:bg-blurple-600",
-            "disabled:bg-gray-2 disabled:hocus:bg-gray-2"
-          )}
-          value={currency}
-          onChange={(e) => handleChangeCurrency(e.target.value as Currency)}
-          aria-label={intl.formatMessage(messages.currencySelect)}
-          disabled={loadingCheckout}
-        >
-          <option value="USD">
-            <FormattedMessage
-              id="donate_widget.currency.usd"
-              defaultMessage="USD"
-            />
-          </option>
-          <option value="EUR">
-            <FormattedMessage
-              id="donate_widget.currency.eur"
-              defaultMessage="EUR"
-            />
-          </option>
-        </Select>
+        <span className="relative">
+          <DropdownArrowIcon className="absolute left-0 top-[9px] fill-white pointer-events-none" />
+          <Select
+            className={classNames(
+              "h-full p-2 pl-6 rounded-l-md outline-none transition-colors cursor-pointer disabled:cursor-default font-medium",
+              "text-white bg-blurple-500 hocus:bg-blurple-600",
+              "disabled:bg-gray-2 disabled:hocus:bg-gray-2"
+            )}
+            value={currency}
+            onChange={(e) => handleChangeCurrency(e.target.value as Currency)}
+            aria-label={intl.formatMessage(messages.currencySelect)}
+            disabled={loadingCheckout}
+          >
+            <option value="USD">
+              <FormattedMessage
+                id="donate_widget.currency.usd"
+                defaultMessage="USD"
+              />
+            </option>
+            <option value="EUR">
+              <FormattedMessage
+                id="donate_widget.currency.eur"
+                defaultMessage="EUR"
+              />
+            </option>
+          </Select>
+        </span>
         <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
diff --git a/donate/DonatePopup.tsx b/donate/DonatePopup.tsx
@@ -77,7 +77,7 @@ export function DonatePopup({
         <DialogBackdrop className="fixed inset-0 bg-black/30" />
         <div
           className={classNames(
-            "fixed inset-0 flex w-screen items-end sm:items-center justify-center z-10",
+            "fixed inset-0 flex w-screen items-end sm:items-center justify-center z-20",
             "transition-transform"
           )}
         >
@@ -92,14 +92,14 @@ export function DonatePopup({
               className={classNames(
                 "w-full transition-transform",
                 currentStep === "loading" && "hidden",
-                currentStep === "choose" && "h-[28rem]",
+                currentStep === "choose" && "h-[30rem]",
                 currentStep === "checkout" && "h-[40rem]",
-                currentStep === "complete" && "h-[28rem]"
+                currentStep === "complete" && "h-[30rem]"
               )}
               ref={iframeRef}
             ></iframe>
             {currentStep === "loading" && (
-              <p className="flex gap-2 items-center justify-center text-gray-2 p-4 h-[28rem]">
+              <p className="flex gap-2 items-center justify-center text-gray-2 p-4 h-[30rem]">
                 <LoadingIcon className="motion-safe:animate-spin size-5" />
                 <FormattedMessage
                   id="donate_widget.loading"
diff --git a/pages/donate/checkout.tsx b/pages/donate/checkout.tsx
@@ -6,11 +6,12 @@ import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useMemo } from "react"
 import { z } from "zod"
 
-import { DonateCheckout } from "../../components/DonateCheckout"
+import { DonateCheckout } from "../../components/donate/DonateCheckout"
 import { sendMessage } from "../../donate/utils"
 import { CURRENCIES, DONATION_FREQUENCIES } from "../../types/api"
 
 import { themeSchema } from "../../donate/utils"
+import { DonateFooter } from "../../components/donate/DonateFooter"
 
 const primaryColor = "#6364ff"
 const hoverColor = "#563acc"
@@ -79,11 +80,19 @@ export default function DonateCheckoutPage({
         },
       }}
     >
-      <DonateCheckout
-        onComplete={handleDonate}
-        className={classNames(theme, "bg-white dark:bg-black p-8")}
-        backUrl={backUrl}
-      />
+      <div
+        className={classNames(
+          theme,
+          "bg-white dark:bg-black min-h-screen flex flex-col"
+        )}
+      >
+        <DonateCheckout
+          onComplete={handleDonate}
+          className="p-8 pb-2 grow"
+          backUrl={backUrl}
+        />
+        <DonateFooter />
+      </div>
     </CheckoutProvider>
   )
 }
diff --git a/pages/donate/complete.tsx b/pages/donate/complete.tsx
@@ -15,7 +15,7 @@ export default function DonateCompletePage() {
   }, [])
 
   return (
-    <div className="flex flex-col p-8 gap-2">
+    <div className="flex flex-col p-8 gap-2 justify-between min-h-screen">
       <h1 className="sh1">
         <FormattedMessage
           id="donate_widget.success.header"
diff --git a/pages/donate/index.tsx b/pages/donate/index.tsx
diff --git a/pages/sponsors.tsx b/pages/sponsors.tsx
diff --git a/public/icons/dropdown-arrow.svg b/public/icons/dropdown-arrow.svg
