All files / src/pages/PaymentFormsList PaymentFormsDetails.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { DonationsBanner } from "@components/DonationList";
import { Ticker } from "@components/Ticker";
import { useParams } from "react-router-dom";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { PortalRootContainer } from "@components/Layout/Layout";
import { useBreadcrumbs } from "@components/CustomBreadcrumbsPage/hooks/useBreadcrumbs";
import { ConnectionErrorState } from "@common/EmptyState";
import { useGetPaymentFormById } from "@hooks/payment-forms/useListPaymentForms";
import FundraisersDonationsTableV2 from "@components/DonationList/Table/FundraisersDonationsTableV2";
 
export function PaymentFormsDetails() {
  const { id } = useParams();
  const { data, error, isLoading } = useGetPaymentFormById(id as string);
  useBreadcrumbs({
    product_id: data?.id,
    imgSrc: data?.imageURL,
    title: data?.name,
  });
  if (isLoading) return <LoadingSpinner />;
  if (error && !isLoading) return <ConnectionErrorState />;
 
  return (
    <PortalRootContainer>
      <Ticker />
      <DonationsBanner data={data} />
      <FundraisersDonationsTableV2
        title="Payment Forms"
        id={id}
        selectable={false}
      />
    </PortalRootContainer>
  );
}