Approve payout screen

packages/admin/src/graphql/index.ts

@@ -599,6 +599,7 @@ export type Mutation = {
   /** Refresh the common members from the events. Returns the new common member count */
   refreshCommonMembers?: Maybe<Scalars['Int']>;
   executePayouts?: Maybe<Payout>;
+  approvePayout?: Maybe<Scalars['Boolean']>;
   updatePaymentData?: Maybe<Scalars['Boolean']>;
   updatePaymentsCommonId?: Maybe<Scalars['Boolean']>;
   createIntention?: Maybe<Intention>;
@@ -620,6 +621,13 @@ export type MutationExecutePayoutsArgs = {
 };
 
 
+export type MutationApprovePayoutArgs = {
+  payoutId: Scalars['ID'];
+  index: Scalars['Int'];
+  token: Scalars['String'];
+};
+
+
 export type MutationUpdatePaymentDataArgs = {
   id: Scalars['ID'];
   trackId?: Maybe<Scalars['ID']>;
@@ -857,6 +865,42 @@ export type UpdatePaymentDataMutation = (
   & Pick<Mutation, 'updatePaymentData'>
 );
 
+export type GetConfirmPayoutDataQueryVariables = Exact<{
+  payoutId: Scalars['ID'];
+}>;
+
+
+export type GetConfirmPayoutDataQuery = (
+  { __typename?: 'Query' }
+  & { payout?: Maybe<(
+    { __typename?: 'Payout' }
+    & Pick<Payout, 'amount'>
+    & { proposals?: Maybe<Array<Maybe<(
+      { __typename?: 'Proposal' }
+      & Pick<Proposal, 'id'>
+      & { description: (
+        { __typename?: 'ProposalDescription' }
+        & Pick<ProposalDescription, 'title' | 'description'>
+      ), fundingRequest?: Maybe<(
+        { __typename?: 'ProposalFunding' }
+        & Pick<ProposalFunding, 'amount'>
+      )> }
+    )>>> }
+  )> }
+);
+
+export type ApprovePayoutMutationVariables = Exact<{
+  payoutId: Scalars['ID'];
+  token: Scalars['String'];
+  index: Scalars['Int'];
+}>;
+
+
+export type ApprovePayoutMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'approvePayout'>
+);
+
 export type GetProposalsSelectedForBatchQueryVariables = Exact<{
   ids: Array<Scalars['String']> | Scalars['String'];
 }>;
@@ -1605,6 +1649,81 @@ export function useUpdatePaymentDataMutation(baseOptions?: Apollo.MutationHookOp
 export type UpdatePaymentDataMutationHookResult = ReturnType<typeof useUpdatePaymentDataMutation>;
 export type UpdatePaymentDataMutationResult = Apollo.MutationResult<UpdatePaymentDataMutation>;
 export type UpdatePaymentDataMutationOptions = Apollo.BaseMutationOptions<UpdatePaymentDataMutation, UpdatePaymentDataMutationVariables>;
+export const GetConfirmPayoutDataDocument = gql`
+    query GetConfirmPayoutData($payoutId: ID!) {
+  payout(id: $payoutId) {
+    amount
+    proposals {
+      id
+      description {
+        title
+        description
+      }
+      fundingRequest {
+        amount
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetConfirmPayoutDataQuery__
+ *
+ * To run a query within a React component, call `useGetConfirmPayoutDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetConfirmPayoutDataQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetConfirmPayoutDataQuery({
+ *   variables: {
+ *      payoutId: // value for 'payoutId'
+ *   },
+ * });
+ */
+export function useGetConfirmPayoutDataQuery(baseOptions: Apollo.QueryHookOptions<GetConfirmPayoutDataQuery, GetConfirmPayoutDataQueryVariables>) {
+        return Apollo.useQuery<GetConfirmPayoutDataQuery, GetConfirmPayoutDataQueryVariables>(GetConfirmPayoutDataDocument, baseOptions);
+      }
+export function useGetConfirmPayoutDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetConfirmPayoutDataQuery, GetConfirmPayoutDataQueryVariables>) {
+          return Apollo.useLazyQuery<GetConfirmPayoutDataQuery, GetConfirmPayoutDataQueryVariables>(GetConfirmPayoutDataDocument, baseOptions);
+        }
+export type GetConfirmPayoutDataQueryHookResult = ReturnType<typeof useGetConfirmPayoutDataQuery>;
+export type GetConfirmPayoutDataLazyQueryHookResult = ReturnType<typeof useGetConfirmPayoutDataLazyQuery>;
+export type GetConfirmPayoutDataQueryResult = Apollo.QueryResult<GetConfirmPayoutDataQuery, GetConfirmPayoutDataQueryVariables>;
+export const ApprovePayoutDocument = gql`
+    mutation ApprovePayout($payoutId: ID!, $token: String!, $index: Int!) {
+  approvePayout(payoutId: $payoutId, token: $token, index: $index)
+}
+    `;
+export type ApprovePayoutMutationFn = Apollo.MutationFunction<ApprovePayoutMutation, ApprovePayoutMutationVariables>;
+
+/**
+ * __useApprovePayoutMutation__
+ *
+ * To run a mutation, you first call `useApprovePayoutMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useApprovePayoutMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [approvePayoutMutation, { data, loading, error }] = useApprovePayoutMutation({
+ *   variables: {
+ *      payoutId: // value for 'payoutId'
+ *      token: // value for 'token'
+ *      index: // value for 'index'
+ *   },
+ * });
+ */
+export function useApprovePayoutMutation(baseOptions?: Apollo.MutationHookOptions<ApprovePayoutMutation, ApprovePayoutMutationVariables>) {
+        return Apollo.useMutation<ApprovePayoutMutation, ApprovePayoutMutationVariables>(ApprovePayoutDocument, baseOptions);
+      }
+export type ApprovePayoutMutationHookResult = ReturnType<typeof useApprovePayoutMutation>;
+export type ApprovePayoutMutationResult = Apollo.MutationResult<ApprovePayoutMutation>;
+export type ApprovePayoutMutationOptions = Apollo.BaseMutationOptions<ApprovePayoutMutation, ApprovePayoutMutationVariables>;
 export const GetProposalsSelectedForBatchDocument = gql`
     query getProposalsSelectedForBatch($ids: [String!]!) {
   proposals(ids: $ids) {

packages/admin/src/graphql/schema.graphql

@@ -409,7 +409,8 @@ type Mutation {
     commonId: ID!
   ): Int
   executePayouts(input: ExecutePayoutInput!): Payout
-  updatePaymentData(id: ID!, trackId: ID = "5f398531-0f9b-42ec-8dd0-99896ac47e74"): Boolean
+  approvePayout(payoutId: ID!, index: Int!, token: String!): Boolean
+  updatePaymentData(id: ID!, trackId: ID = "7f4fe0bd-590a-455d-b3cd-fe6045d36066"): Boolean
   updatePaymentsCommonId: Boolean
   createIntention(input: CreateIntentionInput!): Intention
 }

packages/admin/src/graphql/schema.json

@@ -4188,6 +4188,67 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "approvePayout",
+            "description": null,
+            "args": [
+              {
+                "name": "payoutId",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "ID",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "index",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "Int",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "token",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "SCALAR",
+              "name": "Boolean",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "updatePaymentData",
             "description": null,
@@ -4216,7 +4277,7 @@
                   "name": "ID",
                   "ofType": null
                 },
-                "defaultValue": "\"f9ba4c76-91f6-4f8d-83d0-278cc034f77a\"",
+                "defaultValue": "\"8185aa06-1fe0-44e7-936e-cd262fdc22f9\"",
                 "isDeprecated": false,
                 "deprecationReason": null
               }

packages/admin/src/pages/financials/payments/index.tsx

@@ -113,7 +113,7 @@ export const PaymentsHomepage: NextPage = () => {
 
             <Spacer/>
 
-            <Text h3>Hanging payments ({payments?.hangingPayments})</Text>
+            <Text h3>Hanging payments ({payments?.hangingPayments.length})</Text>
 
             {(payments?.hangingPayments).map((payment) => (
               <React.Fragment key={payment.id}>