Circle payout updates (#119)

* Update payment details

* Disable new disbursement btn for inactive circle account

* Fix typo

src/components/NewDisbursementButton.tsx

@@ -2,22 +2,35 @@ import { Button, Icon } from "@stellar/design-system";
 import { useNavigate } from "react-router-dom";
 import { ShowForRoles } from "components/ShowForRoles";
 import { Routes } from "constants/settings";
+import { useCircleAccount } from "hooks/useCircleAccount";
 
-export const NewDisbursementButton = () => {
+export const NewDisbursementButton = ({
+  size = "sm",
+}: {
+  size?: "sm" | "md" | "xs";
+}) => {
   const navigate = useNavigate();
+  const { isCircleAccount, isCircleAccountPending } = useCircleAccount();
 
   const goToNewDisbursement = () => {
     navigate(Routes.DISBURSEMENT_NEW);
   };
 
+  const inactiveCircleAccount = isCircleAccount && isCircleAccountPending;
+  const disableMessage = inactiveCircleAccount
+    ? "Circle Account is not active"
+    : "";
+
   return (
     <ShowForRoles acceptedRoles={["owner", "financial_controller"]}>
       <Button
         variant="primary"
-        size="sm"
+        size={size}
         icon={<Icon.Add />}
         iconPosition="right"
         onClick={goToNewDisbursement}
+        disabled={inactiveCircleAccount}
+        title={disableMessage}
       >
         New disbursement
       </Button>

src/helpers/formatPaymentDetails.ts

@@ -13,6 +13,7 @@ export const formatPaymentDetails = (payment: ApiPayment): PaymentDetails => {
     totalAmount: payment.amount,
     assetCode: payment.asset.code,
     externalPaymentId: payment?.external_payment_id,
+    circleTransferRequestId: payment?.circle_transfer_request_id,
     status: payment.status,
     statusHistory: payment?.status_history
       .sort(

src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { Button, Heading, Icon } from "@stellar/design-system";
+import { Button, Heading } from "@stellar/design-system";
 
 import { AppDispatch } from "store";
 import { getDisbursementsAction } from "store/ducks/disbursements";
@@ -15,6 +15,7 @@ import { ShowForRoles } from "components/ShowForRoles";
 import { DisbursementsTable } from "components/DisbursementsTable";
 import { DashboardAnalytics } from "components/DashboardAnalytics";
 import { useIsUserRoleAccepted } from "hooks/useIsUserRoleAccepted";
+import { NewDisbursementButton } from "components/NewDisbursementButton";
 
 export const Home = () => {
   const { disbursements, userAccount } = useRedux(
@@ -59,13 +60,6 @@ export const Home = () => {
     navigate(Routes.DISBURSEMENTS);
   };
 
-  const goToNewDisbursement = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    event.preventDefault();
-    navigate(Routes.DISBURSEMENT_NEW);
-  };
-
   return (
     <>
       <SectionHeader>
@@ -102,14 +96,7 @@ export const Home = () => {
                 View all
               </Button>
               <ShowForRoles acceptedRoles={["owner", "financial_controller"]}>
-                <Button
-                  size="xs"
-                  variant="primary"
-                  icon={<Icon.Add />}
-                  onClick={goToNewDisbursement}
-                >
-                  New disbursement
-                </Button>
+                <NewDisbursementButton size="xs" />
               </ShowForRoles>
             </SectionHeader.Content>
           </SectionHeader.Row>

src/pages/PaymentDetails.tsx

@@ -268,6 +268,13 @@ export const PaymentDetails = () => {
                         : "-"}
                     </div>
                   </div>
+
+                  {formattedPayment.circleTransferRequestId ? (
+                    <div className="PaymentDetails__info">
+                      <label className="Label">Circle Transfer ID</label>
+                      <div>{formattedPayment.circleTransferRequestId}</div>
+                    </div>
+                  ) : null}
                 </div>
               </Card>
             </div>

src/types/index.ts

@@ -334,6 +334,7 @@ export type PaymentDetails = {
   status: PaymentStatus;
   statusHistory: PaymentDetailsStatusHistoryItem[];
   externalPaymentId?: string;
+  circleTransferRequestId?: string;
 };
 
 // =============================================================================
@@ -628,6 +629,7 @@ export type ApiPayment = {
   created_at: string;
   updated_at: string;
   external_payment_id?: string;
+  circle_transfer_request_id?: string;
 };
 
 export type ApiPayments = {