DonateCheckout.tsx

import { PaymentElement, useCheckout } from "@stripe/react-stripe-js"
import classNames from "classnames"
import Link from "next/link"
import { ChangeEvent, FormEvent, useCallback, useEffect, 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 ExternalLinkIcon from "../../public/ui/external-link.svg?inline"

import { Button } from "../Button"
import { Input } from "../Input"
import { isInIframe } from "../../donate/utils"

interface DonateCheckoutProps {
  backUrl?: string
  className?: string
  onComplete: () => void
}

export function DonateCheckout({
  className,
  backUrl,
  onComplete,
}: DonateCheckoutProps) {
  const checkout = useCheckout()

  const [email, setEmail] = useState("")
  const [errorMessage, setErrorMessage] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)

  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    setErrorMessage(null)
    setEmail(e.target.value)
  }, [])

  const handleEmailBlur = useCallback(async () => {
    if (!email) {
      return
    }

    const result = await checkout.updateEmail(email)
    if (result.type === "error") {
      setErrorMessage(result.error.message)
    } else {
      setErrorMessage(null)
    }
  }, [checkout, email])

  const handleCheckout = useCallback(
    async (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault()

      setIsLoading(true)

      const result = await checkout.updateEmail(email)
      if (result.type === "error") {
        setErrorMessage(result.error.message)
        setIsLoading(false)
        return
      }

      const confirmResult = await checkout.confirm({
        redirect: "if_required", // Only redirect if required
      })

      if (confirmResult.type === "error") {
        setErrorMessage(confirmResult.error.message)
        setIsLoading(false)
      } else {
        onComplete()
      }
    },
    [checkout, email, onComplete]
  )

  // Determine if we are in an external iframe in client-side.
  const [isExternal, setIsExternal] = useState(false)
  useEffect(() => {
    setIsExternal(
      isInIframe() && window.parent.location.host !== window.location.host
    )
  }, [])

  return (
    <form className={className} onSubmit={handleCheckout}>
      <header className="mb-4 flex flex-col gap-2">
        <div className="border dark:border-gray-1 p-4 rounded-md">
          <h3 className="text-b1">
            {checkout.recurring ? (
              <FormattedMessage
                id="donate_widget.checkout.header.recurring"
                defaultMessage="You are donating {total} every {frequency}"
                values={{
                  total: checkout.total.total.amount,
                  frequency: checkout.recurring.interval,
                }}
              />
            ) : (
              <FormattedMessage
                id="donate_widget.checkout.header.one_time"
                defaultMessage="You are donating {total} once"
                values={{
                  total: checkout.total.total.amount,
                }}
              />
            )}
          </h3>
          {checkout.recurring && (
            <p className="text-b4 mt-2 text-gray-1 dark:text-gray-2">
              <FormattedMessage
                id="donate_widget.checkout.header.recurring_info"
                defaultMessage="You will be charged {total} today and every following {frequency}. You can cancel your recurring donation at any time."
                values={{
                  total: checkout.total.total.amount,
                  frequency: checkout.recurring.interval,
                }}
              />
            </p>
          )}
        </div>
        {backUrl && (
          <Link
            href={backUrl}
            className="text-gray-1 dark:text-gray-2 text-b3 mt-2 flex gap-1 items-center -order-1"
          >
            <ArrowLeftIcon className="size-4 fill-current" />
            <FormattedMessage
              id="donate_widget.checkout.header.back"
              defaultMessage="Edit your donation"
            />
          </Link>
        )}
      </header>

      <div className="flex flex-col gap-4 mb-4">
        <label className="w-full">
          <FormattedMessage
            id="donate_widget.checkout.email"
            defaultMessage="Email"
          >
            {(text) => <p className="mb-2">{text}</p>}
          </FormattedMessage>
          <Input
            type="email"
            value={email}
            onChange={handleChange}
            placeholder="[email protected]"
            onBlur={handleEmailBlur}
            disabled={isLoading}
            fullWidth
          />
        </label>

        <div className="w-full">
          <h4 className="mb-2">
            <FormattedMessage
              id="donate_widget.checkout.payment"
              defaultMessage="Payment"
            />
          </h4>
          <PaymentElement className="" />
        </div>
      </div>

      {errorMessage && (
        <p className="text-error text-b3 mb-2">{errorMessage}</p>
      )}
      <Button
        disabled={isLoading}
        dark
        className={classNames(
          "flex gap-2 items-center justify-center",
          isLoading && "text-gray-2"
        )}
        fullWidth
        type="submit"
      >
        <DonateCheckoutButtonText isLoading={isLoading} />
        {isExternal && <ExternalLinkIcon className="fill-current" />}
      </Button>
      {isExternal && (
        <p className="text-b4 text-center mt-2 text-gray-1 dark:text-gray-2">
          <FormattedMessage
            id="donate_widget.checkout.external_notice"
            defaultMessage="You will be redirected to {url} for secure payment."
            values={{
              url: typeof window !== "undefined" ? window.location.host : "",
            }}
          />
        </p>
      )}
    </form>
  )
}

function DonateCheckoutButtonText({ isLoading }: { isLoading: boolean }) {
  const checkout = useCheckout()
  if (isLoading) {
    return (
      <>
        <LoadingIcon className="motion-safe:animate-spin size-5" />
        <FormattedMessage
          id="donate_widget.checkout.submitting"
          defaultMessage="Submitting…"
        />
      </>
    )
  }

  if (checkout.recurring) {
    return (
      <FormattedMessage
        id="donate_widget.checkout.subscribe_button"
        defaultMessage="Subscribe for {total} every {frequency}"
        values={{
          total: checkout.total.total.amount,
          frequency: checkout.recurring.interval,
        }}
      />
    )
  }

  return (
    <FormattedMessage
      id="donate_widget.checkout.pay_button"
      defaultMessage="Pay {total} now"
      values={{
        total: checkout.total.total.amount,
      }}
    />
  )
}