PaymentFailedAlert.tsx raw

   1  import { TriangleAlertIcon } from "lucide-react";
   2  import React from "react";
   3  import { toast } from "sonner";
   4  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   5  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
   6  import { LoadingButton } from "src/components/ui/custom/loading-button";
   7  import { useChannels } from "src/hooks/useChannels";
   8  import { sendEvent } from "src/utils/sendEvent";
   9  
  10  export function PaymentFailedAlert({
  11    invoice,
  12    errorMessage,
  13  }: {
  14    invoice: string;
  15    errorMessage: string;
  16  }) {
  17    const [sendingDetailsToAlby, setSendingDetailsToAlby] = React.useState(false);
  18    const { data: channels } = useChannels();
  19  
  20    async function sendDetailsToAlby() {
  21      setSendingDetailsToAlby(true);
  22      await sendEvent("payment_failed_details", {
  23        invoice,
  24        errorMessage,
  25        channels,
  26      });
  27      toast("Thanks for improving Alby Hub.");
  28      setSendingDetailsToAlby(false);
  29    }
  30  
  31    return (
  32      <Alert>
  33        <TriangleAlertIcon className="h-4 w-4" />
  34        <AlertTitle>Payment Failed</AlertTitle>
  35        <AlertDescription>
  36          <p>
  37            Try the payment again, read our payments guide, and optionally send
  38            details about the failed payment to help improve Alby Hub.
  39          </p>
  40          <div className="flex flex-wrap gap-2 mt-2">
  41            <ExternalLinkButton
  42              to="https://guides.getalby.com/user-guide/alby-hub/faq/what-to-do-if-i-cannot-send-a-payment"
  43              size={"sm"}
  44            >
  45              View Payments Guide
  46            </ExternalLinkButton>
  47            <LoadingButton
  48              size={"sm"}
  49              variant="secondary"
  50              loading={sendingDetailsToAlby}
  51              onClick={sendDetailsToAlby}
  52            >
  53              Send Details to Alby
  54            </LoadingButton>
  55          </div>
  56        </AlertDescription>
  57      </Alert>
  58    );
  59  }
  60