Add "Created by" filter to Expected Funds

Author: gustavlrsn

components/dashboard/filters/CreatedByFilter.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { defineMessage } from 'react-intl';
+import { z } from 'zod';
+
+import type { FilterComponentProps, FilterConfig } from '@/lib/filters/filter-types';
+import { isMulti } from '@/lib/filters/schemas';
+import type { AccountHoverCardFieldsFragment } from '@/lib/graphql/types/v2/graphql';
+
+import ComboSelectFilter from './ComboSelectFilter';
+import { AccountRenderer } from './HostedAccountFilter';
+
+type FilterMeta = {
+  createdByUsers?: Partial<AccountHoverCardFieldsFragment>[];
+};
+
+const schema = isMulti(z.string()).optional();
+
+const resultNodeToOption = (account: Partial<AccountHoverCardFieldsFragment>) => ({
+  label: <AccountRenderer account={account as AccountHoverCardFieldsFragment & { slug: string }} inOptionsList />,
+  keywords: [account.name],
+  value: account.slug,
+});
+
+function CreatedByFilter({ meta, ...props }: FilterComponentProps<z.infer<typeof schema>, FilterMeta>) {
+  const options = React.useMemo(() => meta?.createdByUsers?.map(resultNodeToOption) || [], [meta?.createdByUsers]);
+
+  return <ComboSelectFilter options={options} isMulti {...props} />;
+}
+
+export const createdByFilter: FilterConfig<z.infer<typeof schema>> = {
+  schema: schema,
+  filter: {
+    labelMsg: defineMessage({ defaultMessage: 'Created by', id: 'Agreement.createdBy' }),
+    Component: CreatedByFilter,
+    valueRenderer: ({ value, ...props }) => <AccountRenderer account={{ slug: value }} {...props} />,
+  },
+  toVariables: (values, key) => ({ [key]: values.map(slug => ({ slug })) }),
+};

components/dashboard/filters/HostedAccountFilter.tsx

@@ -27,23 +27,21 @@ const hostedAccountFilterSearchQuery = gql`
   ${accountHoverCardFields}
 `;
 
-export const AccountRenderer = ({
-  account,
-  inOptionsList,
-}: {
+export const AccountRenderer = (props: {
   account: Partial<AccountHoverCardFieldsFragment> & {
     slug: Account['slug'];
   };
   inOptionsList?: boolean; // For positioning the HoverCard to the right to prevent blocking options list
 }) => {
   const { data } = useQuery<AccountFilterQuery>(accountFilterQuery, {
-    variables: { slug: account.slug },
+    variables: { slug: props.account.slug },
     fetchPolicy: 'cache-first',
 
     // skip query if there is already a field from the hover card data (such as description),
     // to prevent fetching all accounts when used in the combo select filter that already queries for these fields
-    skip: !!account.description && !!account.type,
+    skip: !!props.account.description && !!props.account.type,
   });
+  const account = data?.account ?? props.account;
 
   const trigger = (
     <div className="flex h-full w-full max-w-48 items-center justify-between gap-2 overflow-hidden">
@@ -61,7 +59,7 @@ export const AccountRenderer = ({
   return (
     <AccountHoverCard
       account={data.account}
-      {...(inOptionsList && { hoverCardContentProps: { side: 'right', sideOffset: 24 } })}
+      {...(props.inOptionsList && { hoverCardContentProps: { side: 'right', sideOffset: 24 } })}
       trigger={trigger}
     />
   );

components/dashboard/sections/contributions/HostExpectedFunds.tsx

@@ -6,22 +6,27 @@ import type { z } from 'zod';
 
 import type { FilterComponentConfigs, FiltersToVariables, Views } from '../../../../lib/filters/filter-types';
 import { gql } from '../../../../lib/graphql/helpers';
+import type {
+  AccountHoverCardFieldsFragment,
+  DashboardOrdersQueryVariables,
+} from '../../../../lib/graphql/types/v2/graphql';
 import { ExpectedFundsFilter, OrderStatus } from '../../../../lib/graphql/types/v2/schema';
 import useQueryFilter from '../../../../lib/hooks/useQueryFilter';
 import { FEATURES, requiresUpgrade } from '@/lib/allowed-features';
-import type { DashboardOrdersQueryVariables } from '@/lib/graphql/types/v2/graphql';
 
 import { UpgradePlanCTA } from '@/components/platform-subscriptions/UpgradePlanCTA';
 
+import { accountHoverCardFields } from '../../../AccountHoverCard';
 import { Button } from '../../../ui/Button';
 import { DashboardContext } from '../../DashboardContext';
 import DashboardHeader from '../../DashboardHeader';
+import { createdByFilter } from '../../filters/CreatedByFilter';
 import { expectedDateFilter } from '../../filters/DateFilter';
 import type { DashboardSectionProps } from '../../types';
 
 import ContributionsTable from './ContributionsTable';
 import CreatePendingContributionModal from './CreatePendingOrderModal';
-import type { FilterMeta } from './filters';
+import type { FilterMeta as BaseFilterMeta } from './filters';
 import {
   ContributionAccountingCategoryKinds,
   filters as baseFilters,
@@ -39,7 +44,7 @@ enum ContributionsTab {
 }
 
 const hostExpectedFundsMetadataQuery = gql`
-  query HostExpectedFundsMetadata($slug: String!, $expectedFundsFilter: ExpectedFundsFilter) {
+  query HostExpectedFundsMetadata($slug: String!) {
     account(slug: $slug) {
       id
       slug
@@ -58,25 +63,15 @@ const hostExpectedFundsMetadataQuery = gql`
           hostFeePercent
         }
       }
-      PENDING: orders(
-        filter: INCOMING
-        expectedFundsFilter: $expectedFundsFilter
-        status: [PENDING]
-        hostContext: ALL
-      ) {
+      PENDING: orders(filter: INCOMING, expectedFundsFilter: ONLY_PENDING, status: [PENDING], hostContext: ALL) {
         totalCount
       }
-      EXPIRED: orders(
-        filter: INCOMING
-        expectedFundsFilter: $expectedFundsFilter
-        status: [EXPIRED]
-        hostContext: ALL
-      ) {
+      EXPIRED: orders(filter: INCOMING, expectedFundsFilter: ONLY_PENDING, status: [EXPIRED], hostContext: ALL) {
         totalCount
       }
       PAID: orders(
         filter: INCOMING
-        expectedFundsFilter: $expectedFundsFilter
+        expectedFundsFilter: ONLY_PENDING
         status: [PAID]
         includeIncognito: true
         hostContext: ALL
@@ -85,28 +80,45 @@ const hostExpectedFundsMetadataQuery = gql`
       }
       CANCELED: orders(
         filter: INCOMING
-        expectedFundsFilter: $expectedFundsFilter
+        expectedFundsFilter: ONLY_PENDING
         status: [CANCELLED]
         includeIncognito: true
         hostContext: ALL
       ) {
         totalCount
       }
+      orders(filter: INCOMING, expectedFundsFilter: ONLY_PENDING, hostContext: ALL) {
+        createdByUsers {
+          id
+          ...AccountHoverCardFields
+        }
+      }
     }
   }
+  ${accountHoverCardFields}
 `;
 
 const schema = baseSchema.extend({
   expectedDate: expectedDateFilter.schema,
+  createdBy: createdByFilter.schema,
 });
+
+type FilterMeta = BaseFilterMeta & {
+  createdByUsers?: Partial<AccountHoverCardFieldsFragment>[];
+};
+
 type FilterValues = z.infer<typeof schema>;
+
 const toVariables: FiltersToVariables<FilterValues, DashboardOrdersQueryVariables, FilterMeta> = {
-  ...baseToVariables,
+  ...(baseToVariables as FiltersToVariables<FilterValues, DashboardOrdersQueryVariables, FilterMeta>),
   expectedDate: expectedDateFilter.toVariables,
+  createdBy: createdByFilter.toVariables,
 };
+
 const filters: FilterComponentConfigs<FilterValues, FilterMeta> = {
   ...baseFilters,
   expectedDate: expectedDateFilter.filter,
+  createdBy: createdByFilter.filter,
 };
 
 function HostExpectedFunds({ accountSlug }: DashboardSectionProps) {
@@ -116,6 +128,12 @@ function HostExpectedFunds({ accountSlug }: DashboardSectionProps) {
   const isUpgradeRequired = requiresUpgrade(account, FEATURES.EXPECTED_FUNDS);
   const [showCreatePendingOrderModal, setShowCreatePendingOrderModal] = React.useState(false);
 
+  const { data: metadata, refetch: refetchMetadata } = useQuery(hostExpectedFundsMetadataQuery, {
+    variables: { slug: accountSlug },
+    fetchPolicy: typeof window !== 'undefined' ? 'cache-and-network' : 'cache-first',
+    skip: isUpgradeRequired,
+  });
+
   const views: Views<z.infer<typeof schema>> = [
     {
       id: ContributionsTab.ALL,
@@ -158,6 +176,7 @@ function HostExpectedFunds({ accountSlug }: DashboardSectionProps) {
     hostSlug: account.isHost ? account.slug : undefined,
     includeUncategorized: true,
     accountingCategoryKinds: ContributionAccountingCategoryKinds,
+    createdByUsers: metadata?.account?.orders?.createdByUsers,
   };
 
   const queryFilter = useQueryFilter({
@@ -168,16 +187,6 @@ function HostExpectedFunds({ accountSlug }: DashboardSectionProps) {
     filters,
   });
 
-  const { data: metadata, refetch: refetchMetadata } = useQuery(hostExpectedFundsMetadataQuery, {
-    variables: {
-      slug: accountSlug,
-      expectedFundsFilter: ExpectedFundsFilter.ONLY_PENDING,
-    },
-
-    fetchPolicy: typeof window !== 'undefined' ? 'cache-and-network' : 'cache-first',
-    skip: isUpgradeRequired,
-  });
-
   const { data, loading, error, refetch } = useQuery(dashboardOrdersQuery, {
     variables: {
       slug: accountSlug,

components/dashboard/sections/contributions/queries.ts

@@ -28,6 +28,7 @@ export const dashboardOrdersQuery = gql`
     $expectedFundsFilter: ExpectedFundsFilter
     $orderBy: ChronologicalOrderInput
     $tier: [TierReferenceInput!]
+    $createdBy: [AccountReferenceInput]
   ) {
     account(slug: $slug) {
       id
@@ -55,6 +56,7 @@ export const dashboardOrdersQuery = gql`
         chargedDateFrom: $chargedDateFrom
         chargedDateTo: $chargedDateTo
         tier: $tier
+        createdBy: $createdBy
       ) {
         totalCount
         nodes {