Skip to content

Commit

Permalink
misc: refactor invoice list and extract code in separate component
Browse files Browse the repository at this point in the history 
Prepares the incoming credit note list implementation

# Conflicts:
#	src/generated/graphql.tsx
#	src/pages/InvoicesPage.tsx
  • Loading branch information
@ansmonjol
ansmonjol committed May 30, 2024
1 parent 00d27ca commit 50e5b7c
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 152 deletions.
72 changes: 11 additions & 61 deletions src/generated/graphql.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ export type AddOn = {
updatedAt: Scalars['ISO8601DateTime']['output'];
};


export type AddOnIntegrationMappingsArgs = {
integrationId?: InputMaybe<Scalars['ID']['input']>;
};

export type AddOnCollection = {
__typename?: 'AddOnCollection';
collection: Array<AddOn>;
Expand Down Expand Up @@ -192,6 +197,12 @@ export type BillableMetric = {
weightedInterval?: Maybe<WeightedIntervalEnum>;
};


/** Base billable metric */
export type BillableMetricIntegrationMappingsArgs = {
integrationId?: InputMaybe<Scalars['ID']['input']>;
};

export type BillableMetricCollection = {
__typename?: 'BillableMetricCollection';
collection: Array<BillableMetric>;
Expand Down Expand Up @@ -6336,15 +6347,6 @@ export type GetInvoicesListQueryVariables = Exact<{

export type GetInvoicesListQuery = { __typename?: 'Query', invoices: { __typename?: 'InvoiceCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number, totalCount: number }, collection: Array<{ __typename?: 'Invoice', id: string, status: InvoiceStatusTypeEnum, paymentStatus: InvoicePaymentStatusTypeEnum, number: string, issuingDate: any, totalAmountCents: any, currency?: CurrencyEnum | null, voidable: boolean, paymentDisputeLostAt?: any | null, customer: { __typename?: 'Customer', id: string, name?: string | null, applicableTimezone: TimezoneEnum } }> } };

export type GetCreditNotesListQueryVariables = Exact<{
limit?: InputMaybe<Scalars['Int']['input']>;
page?: InputMaybe<Scalars['Int']['input']>;
searchTerm?: InputMaybe<Scalars['String']['input']>;
}>;


export type GetCreditNotesListQuery = { __typename?: 'Query', creditNotes: { __typename?: 'CreditNoteCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number, totalCount: number }, collection: Array<{ __typename?: 'CreditNote', id: string, number: string, totalAmountCents: any, currency: CurrencyEnum, createdAt: any, canBeVoided: boolean, invoice?: { __typename?: 'Invoice', id: string, number: string, customer: { __typename?: 'Customer', id: string, applicableTimezone: TimezoneEnum, name?: string | null } } | null }> } };

export type RetryAllInvoicePaymentsMutationVariables = Exact<{
input: RetryAllInvoicePaymentsInput;
}>;
Expand Down Expand Up @@ -15198,58 +15200,6 @@ export type GetInvoicesListQueryHookResult = ReturnType<typeof useGetInvoicesLis
export type GetInvoicesListLazyQueryHookResult = ReturnType<typeof useGetInvoicesListLazyQuery>;
export type GetInvoicesListSuspenseQueryHookResult = ReturnType<typeof useGetInvoicesListSuspenseQuery>;
export type GetInvoicesListQueryResult = Apollo.QueryResult<GetInvoicesListQuery, GetInvoicesListQueryVariables>;
export const GetCreditNotesListDocument = gql`
query getCreditNotesList($limit: Int, $page: Int, $searchTerm: String) {
creditNotes(limit: $limit, page: $page, searchTerm: $searchTerm) {
metadata {
currentPage
totalPages
totalCount
}
collection {
id
...CreditNoteForCreditNoteList
...CreditNoteForCreditNoteListItem
}
}
}
${CreditNoteForCreditNoteListFragmentDoc}
${CreditNoteForCreditNoteListItemFragmentDoc}`;

/**
* __useGetCreditNotesListQuery__
*
* To run a query within a React component, call `useGetCreditNotesListQuery` and pass it any options that fit your needs.
* When your component renders, `useGetCreditNotesListQuery` 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 } = useGetCreditNotesListQuery({
* variables: {
* limit: // value for 'limit'
* page: // value for 'page'
* searchTerm: // value for 'searchTerm'
* },
* });
*/
export function useGetCreditNotesListQuery(baseOptions?: Apollo.QueryHookOptions<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>(GetCreditNotesListDocument, options);
}
export function useGetCreditNotesListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>(GetCreditNotesListDocument, options);
}
export function useGetCreditNotesListSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>(GetCreditNotesListDocument, options);
}
export type GetCreditNotesListQueryHookResult = ReturnType<typeof useGetCreditNotesListQuery>;
export type GetCreditNotesListLazyQueryHookResult = ReturnType<typeof useGetCreditNotesListLazyQuery>;
export type GetCreditNotesListSuspenseQueryHookResult = ReturnType<typeof useGetCreditNotesListSuspenseQuery>;
export type GetCreditNotesListQueryResult = Apollo.QueryResult<GetCreditNotesListQuery, GetCreditNotesListQueryVariables>;
export const RetryAllInvoicePaymentsDocument = gql`
mutation retryAllInvoicePayments($input: RetryAllInvoicePaymentsInput!) {
retryAllInvoicePayments(input: $input) {
Expand Down
112 changes: 21 additions & 91 deletions src/pages/InvoicesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { generatePath, useParams, useSearchParams } from 'react-router-dom'
import styled from 'styled-components'

import { Button, NavigationTab, Typography } from '~/components/designSystem'
import CreditNotesList from '~/components/invoices/CreditNotesList'
import {
UpdateInvoicePaymentStatusDialog,
UpdateInvoicePaymentStatusDialogRef,
Expand All @@ -19,13 +18,10 @@ import { SearchInput } from '~/components/SearchInput'
import { addToast, hasDefinedGQLError } from '~/core/apolloClient'
import { INVOICES_ROUTE, INVOICES_TAB_ROUTE } from '~/core/router'
import {
CreditNoteForCreditNoteListFragmentDoc,
CreditNoteForCreditNoteListItemFragmentDoc,
InvoiceListItemFragmentDoc,
InvoicePaymentStatusTypeEnum,
InvoiceStatusTypeEnum,
LagoApiError,
useGetCreditNotesListLazyQuery,
useGetInvoicesListLazyQuery,
useRetryAllInvoicePaymentsMutation,
} from '~/generated/graphql'
Expand Down Expand Up @@ -63,21 +59,6 @@ gql`
}
}
query getCreditNotesList($limit: Int, $page: Int, $searchTerm: String) {
creditNotes(limit: $limit, page: $page, searchTerm: $searchTerm) {
metadata {
currentPage
totalPages
totalCount
}
collection {
id
...CreditNoteForCreditNoteList
...CreditNoteForCreditNoteListItem
}
}
}
mutation retryAllInvoicePayments($input: RetryAllInvoicePaymentsInput!) {
retryAllInvoicePayments(input: $input) {
collection {
Expand All @@ -87,8 +68,6 @@ gql`
}
${InvoiceListItemFragmentDoc}
${CreditNoteForCreditNoteListFragmentDoc}
${CreditNoteForCreditNoteListItemFragmentDoc}
`

export enum InvoiceListStatusEnum {
Expand Down Expand Up @@ -150,30 +129,7 @@ const InvoicesPage = () => {
}),
},
})

const [
getCreditNotes,
{
data: dataCreditNotes,
loading: loadingCreditNotes,
error: errorCreditNotes,
fetchMore: fetchMoreCreditNotes,
variables: variableCreditNotes,
},
] = useGetCreditNotesListLazyQuery({
notifyOnNetworkStatusChange: true,
fetchPolicy: 'network-only',
nextFetchPolicy: 'network-only',
variables: {
limit: 20,
},
})

const { debouncedSearch: invoiceDebounceSearch, isLoading: invoiceIsLoading } =
useDebouncedSearch(getInvoices, loadingInvoices)
const { debouncedSearch: creditNoteDebounceSearch, isLoading: creditNoteIsLoading } =
useDebouncedSearch(getCreditNotes, loadingCreditNotes)

const { debouncedSearch, isLoading } = useDebouncedSearch(getInvoices, loadingInvoices)
const [retryAll] = useRetryAllInvoicePaymentsMutation({
context: { silentErrorCodes: [LagoApiError.PaymentProcessorIsCurrentlyHandlingPayment] },
onCompleted({ retryAllInvoicePayments }) {
Expand Down Expand Up @@ -215,18 +171,10 @@ const InvoicesPage = () => {
</Typography>

<HeaderRigthBlock>
{tab === InvoiceListTabEnum.invoices ? (
<SearchInput
onChange={invoiceDebounceSearch}
placeholder={translate('text_63c68131568d582a38233e84')}
/>
) : tab === InvoiceListTabEnum.creditNotes ? (
<SearchInput
onChange={creditNoteDebounceSearch}
placeholder={translate('text_63c6edd80c57d0dfaae3898e')}
/>
) : null}

<SearchInput
onChange={debouncedSearch}
placeholder={translate('text_63c68131568d582a38233e84')}
/>
{invoiceType === InvoiceListStatusEnum.pendingFailed &&
hasPermissions(['invoicesSend']) && (
<Button
Expand All @@ -247,7 +195,7 @@ const InvoicesPage = () => {
)}
</HeaderRigthBlock>
</PageHeader>
<LocalNavigationTab
<NavigationTab
tabs={[
{
title: translate('text_63ac86d797f728a87b2f9f85'),
Expand All @@ -259,43 +207,34 @@ const InvoicesPage = () => {
generatePath(INVOICES_TAB_ROUTE, { tab: InvoiceListTabEnum.invoices }),
],
onClick: () => {
// Set default tab search param
setSearchParams({ invoiceType: InvoiceListStatusEnum.all })
// reset invoice type url params when switching tabs
setSearchParams()
},
component: (
<InvoicesList
error={errorInvoices}
fetchMore={fetchMoreInvoices}
invoices={dataInvoices?.invoices?.collection}
invoiceType={invoiceType}
isLoading={invoiceIsLoading}
isLoading={isLoading}
metadata={dataInvoices?.invoices?.metadata}
variables={variableInvoices}
/>
),
hidden: !hasPermissions(['invoicesView']),
},
{
title: translate('text_636bdef6565341dcb9cfb125'),
link: generatePath(INVOICES_TAB_ROUTE, {
tab: InvoiceListTabEnum.creditNotes,
}),
onClick: () => {
// Reset invoice search term when switching tabs
setSearchParams()
},
component: (
<CreditNotesList
creditNotes={dataCreditNotes?.creditNotes?.collection}
error={errorCreditNotes}
fetchMore={fetchMoreCreditNotes}
isLoading={creditNoteIsLoading}
metadata={dataCreditNotes?.creditNotes?.metadata}
variables={variableCreditNotes}
/>
),
hidden: !hasPermissions(['creditNotesView']),
},
// NOTE: credit notes list will be added in a future release
// {
// title: translate('text_636bdef6565341dcb9cfb125'),
// link: generatePath(INVOICES_TAB_ROUTE, {
// tab: InvoiceListTabEnum.creditNotes,
// }),
// onClick: () => {
// // Reset invoice search term when switching tabs
// setSearchParams('')
// },
// hidden: !hasPermissions(['creditNotesView']),
// },
]}
/>

Expand All @@ -316,12 +255,3 @@ const HeaderRigthBlock = styled.div`
margin-right: ${theme.spacing(3)};
}
`

const LocalNavigationTab = styled(NavigationTab)`
/* Need to override this as the nav tab itself does not changes for md size */
.navigation-tab--horizontal {
${theme.breakpoints.down('md')} {
padding: ${theme.spacing(4)} ${theme.spacing(5)};
}
}
`

0 comments on commit 50e5b7c

Please sign in to comment.