feat(billing-summary): billing summary page

apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/billing-summary.tsx

@@ -1,9 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { SettingsBillingSummary } from '@qovery/domains/organizations/feature'
 
 export const Route = createFileRoute('/_authenticated/organization/$organizationId/settings/billing-summary')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/_authenticated/organization/$organizationId/settings/billing-summary"!</div>
+  return <SettingsBillingSummary />
 }

libs/domains/organizations/feature/src/index.ts

@@ -94,6 +94,7 @@ export * from './lib/settings-cloud-credentials/settings-cloud-credentials'
 export * from './lib/settings-git-repository-access/settings-git-repository-access'
 export * from './lib/settings-helm-repositories/settings-helm-repositories'
 export * from './lib/settings-container-registries/settings-container-registries'
+export * from './lib/settings-billing-summary/settings-billing-summary'
 export * from './lib/settings-webhook/settings-webhook'
 export * from './lib/settings-api-token/settings-api-token'
 export * from './lib/settings-danger-zone/settings-danger-zone'

libs/domains/organizations/feature/src/lib/hooks/use-credit-cards/use-credit-cards.ts

@@ -3,12 +3,14 @@ import { queries } from '@qovery/state/util-queries'
 
 export interface UseCreditCardsProps {
   organizationId: string
+  enabled?: boolean
   suspense?: boolean
 }
 
-export function useCreditCards({ organizationId, suspense = false }: UseCreditCardsProps) {
+export function useCreditCards({ organizationId, enabled = true, suspense = false }: UseCreditCardsProps) {
   return useQuery({
     ...queries.organizations.creditCards({ organizationId }),
+    enabled,
     suspense,
   })
 }

libs/domains/organizations/feature/src/lib/hooks/use-current-cost/use-current-cost.ts

@@ -3,11 +3,15 @@ import { queries } from '@qovery/state/util-queries'
 
 export interface UseCurrentCostProps {
   organizationId: string
+  enabled?: boolean
+  suspense?: boolean
 }
 
-export function useCurrentCost({ organizationId }: UseCurrentCostProps) {
+export function useCurrentCost({ organizationId, enabled = true, suspense = false }: UseCurrentCostProps) {
   return useQuery({
     ...queries.organizations.currentCost({ organizationId }),
+    enabled,
+    suspense,
   })
 }
 

libs/domains/organizations/feature/src/lib/hooks/use-invoices/use-invoices.ts

@@ -3,11 +3,15 @@ import { queries } from '@qovery/state/util-queries'
 
 export interface UseInvoicesProps {
   organizationId: string
+  enabled?: boolean
+  suspense?: boolean
 }
 
-export function useInvoices({ organizationId }: UseInvoicesProps) {
+export function useInvoices({ organizationId, enabled = true, suspense = false }: UseInvoicesProps) {
   return useQuery({
     ...queries.organizations.invoices({ organizationId }),
+    enabled,
+    suspense,
   })
 }
 

libs/domains/organizations/feature/src/lib/settings-billing-summary/invoices-list-feature/invoices-list-feature.spec.tsx

@@ -0,0 +1,152 @@
+import { type Invoice, InvoiceStatusEnum } from 'qovery-typescript-axios'
+import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
+import * as invoiceUrlHooks from '../../hooks/use-invoice-url/use-invoice-url'
+import * as invoiceHooks from '../../hooks/use-invoices/use-invoices'
+import InvoicesListFeature, { InvoicesList, type InvoicesListProps, getListOfYears } from './invoices-list-feature'
+
+const useInvoicesSpy = jest.spyOn(invoiceHooks, 'useInvoices')
+const useInvoiceUrlSpy = jest.spyOn(invoiceUrlHooks, 'useInvoiceUrl')
+
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useParams: () => ({ organizationId: '1' }),
+}))
+
+const invoicesMock: Invoice[] = [
+  {
+    status: InvoiceStatusEnum.UNKNOWN,
+    currency_code: 'EUR',
+    created_at: '2018-01-01T00:00:00.000Z',
+    id: '1',
+    total: 100,
+    total_in_cents: 10000,
+  },
+  {
+    status: InvoiceStatusEnum.UNKNOWN,
+    currency_code: 'EUR',
+    created_at: '2021-01-01T00:00:00.000Z',
+    id: '2',
+    total: 100,
+    total_in_cents: 10000,
+  },
+  {
+    status: InvoiceStatusEnum.UNKNOWN,
+    currency_code: 'EUR',
+    created_at: '2021-01-01T00:00:00.000Z',
+    id: '22',
+    total: 100,
+    total_in_cents: 10000,
+  },
+  {
+    status: InvoiceStatusEnum.UNKNOWN,
+    currency_code: 'EUR',
+    created_at: '2020-01-01T00:00:00.000Z',
+    id: '3',
+    total: 100,
+    total_in_cents: 10000,
+  },
+  {
+    status: InvoiceStatusEnum.UNKNOWN,
+    currency_code: 'EUR',
+    created_at: '2023-01-01T00:00:00.000Z',
+    id: '4',
+    total: 100,
+    total_in_cents: 10000,
+  },
+]
+
+const listProps: InvoicesListProps = {
+  onFilterByYear: jest.fn(),
+  yearsForSorting: [
+    {
+      label: '2021',
+      value: '2021',
+    },
+    {
+      label: '2018',
+      value: '2018',
+    },
+  ],
+  invoices: invoicesMock.slice(0, 3),
+  downloadOne: jest.fn(),
+}
+
+describe('InvoicesList', () => {
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<InvoicesList {...listProps} />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should print three rows', () => {
+    renderWithProviders(<InvoicesList {...listProps} />)
+    expect(screen.getAllByTestId('download-invoice-btn')).toHaveLength(3)
+  })
+
+  it('should have two options in years', () => {
+    renderWithProviders(<InvoicesList {...listProps} />)
+    screen.getByRole('option', { name: '2021' })
+    screen.getByRole('option', { name: '2018' })
+  })
+
+  it('should call onFilterByYear on select change', async () => {
+    const { userEvent } = renderWithProviders(<InvoicesList {...listProps} />)
+    const select = screen.getByTestId('year-select')
+
+    await userEvent.selectOptions(select, '2018')
+
+    expect(listProps.onFilterByYear).toHaveBeenCalledWith('2018')
+  })
+
+  it('should render empty state when there are no invoices', () => {
+    renderWithProviders(<InvoicesList invoices={[]} />)
+    screen.getByText("You don't have any invoices yet.")
+  })
+})
+
+describe('InvoicesListFeature', () => {
+  const mutateAsyncMock = jest.fn()
+
+  beforeEach(() => {
+    mutateAsyncMock.mockReset()
+    useInvoicesSpy.mockReturnValue({
+      data: invoicesMock,
+    })
+    useInvoiceUrlSpy.mockReturnValue({
+      mutateAsync: mutateAsyncMock,
+    })
+  })
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<InvoicesListFeature />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should dispatch fetchInvoices', () => {
+    renderWithProviders(<InvoicesListFeature />)
+    expect(useInvoicesSpy).toHaveBeenCalledWith({
+      organizationId: '1',
+      suspense: true,
+    })
+  })
+
+  it('should download invoice', async () => {
+    const linkClickSpy = jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => undefined)
+    const { userEvent } = renderWithProviders(<InvoicesListFeature />)
+    const button = screen.getAllByTestId('download-invoice-btn')[0]
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(mutateAsyncMock).toHaveBeenCalledWith({ organizationId: '1', invoiceId: '1' })
+    })
+
+    linkClickSpy.mockRestore()
+  })
+})
+
+describe('getListOfYears', () => {
+  it('should return an array of years', () => {
+    const result = getListOfYears(invoicesMock)
+    expect(result).toEqual([2023, 2021, 2020, 2018])
+  })
+})