refactor: move CustomerInvoiceDetails into pages folder (#1967)

* refactor: extract CustomerInvoiceDetailsTabsOptionsEnum

* refactor: extract createCreditNoteForInvoiceButtonProps

* refactor: move CustomerInvoiceDetails into pages folder

src/components/creditNote/utils.ts

@@ -1,5 +1,12 @@
 import { serializeAmount } from '~/core/serializers/serializeAmount'
-import { CreditNoteItemInput, CreditNoteTableItemFragment, CurrencyEnum } from '~/generated/graphql'
+import {
+  CreditNoteItemInput,
+  CreditNoteTableItemFragment,
+  CurrencyEnum,
+  Invoice,
+  InvoicePaymentStatusTypeEnum,
+  InvoiceTypeEnum,
+} from '~/generated/graphql'
 
 import { FeesPerInvoice, FromFee, GroupedFee } from './types'
 
@@ -118,3 +125,38 @@ export const CREDIT_NOTE_TYPE_TRANSLATIONS_MAP = {
   [CreditNoteType.CREDIT]: 'text_1727079454388x9q4uz6ah71',
   [CreditNoteType.REFUND]: 'text_17270794543889mcmuhfq70p',
 }
+
+const TRANSLATIONS_MAP_ISSUE_CREDIT_NOTE_DISABLED = {
+  unpaid: 'text_17290829949642fgof01loxo',
+  terminatedWallet: 'text_172908299496461z9ejmm2j7',
+  fullyCovered: 'text_1729082994964zccpjmtotdy',
+}
+
+export const createCreditNoteForInvoiceButtonProps = ({
+  paymentStatus,
+  invoiceType,
+  associatedActiveWalletPresent,
+  creditableAmountCents,
+  refundableAmountCents,
+}: Partial<Invoice>) => {
+  const isUnpaid =
+    paymentStatus === InvoicePaymentStatusTypeEnum.Pending ||
+    paymentStatus === InvoicePaymentStatusTypeEnum.Failed
+
+  const isAssociatedWithTerminatedWallet =
+    invoiceType === InvoiceTypeEnum.Credit && !associatedActiveWalletPresent
+
+  const disabledIssueCreditNoteButton =
+    creditableAmountCents === '0' && refundableAmountCents === '0'
+
+  const disabledIssueCreditNoteButtonLabel =
+    disabledIssueCreditNoteButton &&
+    TRANSLATIONS_MAP_ISSUE_CREDIT_NOTE_DISABLED[
+      isUnpaid ? 'unpaid' : isAssociatedWithTerminatedWallet ? 'terminatedWallet' : 'fullyCovered'
+    ]
+
+  return {
+    disabledIssueCreditNoteButton,
+    disabledIssueCreditNoteButtonLabel,
+  }
+}

src/components/customers/CustomerInvoicesList.tsx

@@ -4,6 +4,7 @@ import { generatePath, useNavigate } from 'react-router-dom'
 
 import { Chip, InfiniteScroll, Status, Table, Tooltip, Typography } from '~/components/designSystem'
 import { addToast, hasDefinedGQLError } from '~/core/apolloClient'
+import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/core/constants/NavigationEnum'
 import { invoiceStatusMapping, paymentStatusMapping } from '~/core/constants/statusInvoiceMapping'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CUSTOMER_INVOICE_DETAILS_ROUTE } from '~/core/router'
@@ -26,7 +27,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { usePermissions } from '~/hooks/usePermissions'
-import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/layouts/CustomerInvoiceDetails'
 
 import {
   UpdateInvoicePaymentStatusDialog,

src/components/invoices/InvoicesList.tsx

@@ -21,6 +21,7 @@ import {
 } from '~/components/invoices/FinalizeInvoiceDialog'
 import { VoidInvoiceDialog, VoidInvoiceDialogRef } from '~/components/invoices/VoidInvoiceDialog'
 import { addToast, hasDefinedGQLError } from '~/core/apolloClient'
+import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/core/constants/NavigationEnum'
 import { invoiceStatusMapping, paymentStatusMapping } from '~/core/constants/statusInvoiceMapping'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CUSTOMER_INVOICE_DETAILS_ROUTE, INVOICE_SETTINGS_ROUTE } from '~/core/router'
@@ -39,7 +40,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { usePermissions } from '~/hooks/usePermissions'
-import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/layouts/CustomerInvoiceDetails'
 
 import { Filters } from '../designSystem/Filters/Filters'
 import { AvailableFiltersEnum, AvailableQuickFilters } from '../designSystem/Filters/types'

src/core/constants/NavigationEnum.ts

@@ -0,0 +1,4 @@
+export enum CustomerInvoiceDetailsTabsOptionsEnum {
+  overview = 'overview',
+  creditNotes = 'credit-notes',
+}

src/core/router/CustomerRoutes.tsx

@@ -15,8 +15,7 @@ const CustomerDraftInvoicesList = lazyLoad(
     ),
 )
 const CustomerInvoiceDetails = lazyLoad(
-  () =>
-    import(/* webpackChunkName: 'customer-invoice-details' */ '~/layouts/CustomerInvoiceDetails'),
+  () => import(/* webpackChunkName: 'customer-invoice-details' */ '~/pages/CustomerInvoiceDetails'),
 )
 
 const CustomerRequestOverduePayment = lazyLoad(

src/pages/CreateCreditNote.tsx

@@ -27,6 +27,7 @@ import {
 import { Checkbox, ComboBoxField, TextInputField } from '~/components/form'
 import { WarningDialog, WarningDialogRef } from '~/components/WarningDialog'
 import { hasDefinedGQLError } from '~/core/apolloClient'
+import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/core/constants/NavigationEnum'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CUSTOMER_INVOICE_DETAILS_ROUTE } from '~/core/router'
 import { deserializeAmount } from '~/core/serializers/serializeAmount'
@@ -45,7 +46,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useCreateCreditNote } from '~/hooks/useCreateCreditNote'
-import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/layouts/CustomerInvoiceDetails'
 import { HEADER_TABLE_HEIGHT, PageHeader, theme } from '~/styles'
 import { Content, Main, Side, Subtitle, Title } from '~/styles/mainObjectsForm'
 

src/pages/CreditNoteDetails.tsx

@@ -28,6 +28,7 @@ import {
   buildNetsuiteCreditNoteUrl,
   buildXeroCreditNoteUrl,
 } from '~/core/constants/externalUrls'
+import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/core/constants/NavigationEnum'
 import formatCreditNotesItems from '~/core/formats/formatCreditNotesItems'
 import {
   composeChargeFilterDisplayName,
@@ -63,7 +64,6 @@ import {
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useLocationHistory } from '~/hooks/core/useLocationHistory'
 import { usePermissions } from '~/hooks/usePermissions'
-import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/layouts/CustomerInvoiceDetails'
 import ErrorImage from '~/public/images/maneki/error.svg'
 import { MenuPopper, PageHeader, theme } from '~/styles'
 import { SectionHeader } from '~/styles/customer'

src/layouts/CustomerInvoiceDetails.tsx → src/pages/CustomerInvoiceDetails.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef } from 'react'
 import { generatePath, Outlet, useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { createCreditNoteForInvoiceButtonProps } from '~/components/creditNote/utils'
 import {
   Alert,
   Avatar,
@@ -33,6 +34,7 @@ import {
 import { VoidInvoiceDialog, VoidInvoiceDialogRef } from '~/components/invoices/VoidInvoiceDialog'
 import { PremiumWarningDialog, PremiumWarningDialogRef } from '~/components/PremiumWarningDialog'
 import { addToast, LagoGQLError } from '~/core/apolloClient'
+import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/core/constants/NavigationEnum'
 import { invoiceStatusMapping, paymentStatusMapping } from '~/core/constants/statusInvoiceMapping'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import {
@@ -66,7 +68,6 @@ import {
   InvoicePaymentStatusTypeEnum,
   InvoiceStatusTypeEnum,
   InvoiceTaxStatusTypeEnum,
-  InvoiceTypeEnum,
   LagoApiError,
   NetsuiteIntegration,
   NetsuiteIntegrationInfosForInvoiceOverviewFragmentDoc,
@@ -237,11 +238,6 @@ gql`
   ${SalesforceIntegrationInfosForInvoiceOverviewFragmentDoc}
 `
 
-export enum CustomerInvoiceDetailsTabsOptionsEnum {
-  overview = 'overview',
-  creditNotes = 'credit-notes',
-}
-
 const getErrorMessageFromErrorDetails = (
   errors: AllInvoiceDetailsForCustomerInvoiceDetailsFragment['errorDetails'],
 ): string | undefined => {
@@ -271,41 +267,6 @@ const getErrorMessageFromErrorDetails = (
   }
 }
 
-export const TRANSLATIONS_MAP_ISSUE_CREDIT_NOTE_DISABLED = {
-  unpaid: 'text_17290829949642fgof01loxo',
-  terminatedWallet: 'text_172908299496461z9ejmm2j7',
-  fullyCovered: 'text_1729082994964zccpjmtotdy',
-}
-
-export const createCreditNoteForInvoiceButtonProps = ({
-  paymentStatus,
-  invoiceType,
-  associatedActiveWalletPresent,
-  creditableAmountCents,
-  refundableAmountCents,
-}: Partial<Invoice>) => {
-  const isUnpaid =
-    paymentStatus === InvoicePaymentStatusTypeEnum.Pending ||
-    paymentStatus === InvoicePaymentStatusTypeEnum.Failed
-
-  const isAssociatedWithTerminatedWallet =
-    invoiceType === InvoiceTypeEnum.Credit && !associatedActiveWalletPresent
-
-  const disabledIssueCreditNoteButton =
-    creditableAmountCents === '0' && refundableAmountCents === '0'
-
-  const disabledIssueCreditNoteButtonLabel =
-    disabledIssueCreditNoteButton &&
-    TRANSLATIONS_MAP_ISSUE_CREDIT_NOTE_DISABLED[
-      isUnpaid ? 'unpaid' : isAssociatedWithTerminatedWallet ? 'terminatedWallet' : 'fullyCovered'
-    ]
-
-  return {
-    disabledIssueCreditNoteButton,
-    disabledIssueCreditNoteButtonLabel,
-  }
-}
-
 const CustomerInvoiceDetails = () => {
   const { translate } = useInternationalization()
   const { customerId, invoiceId } = useParams()

src/pages/InvoiceCreditNoteList.tsx

@@ -4,6 +4,7 @@ import { generatePath, useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
 import CreditNotesTable from '~/components/creditNote/CreditNotesTable'
+import { createCreditNoteForInvoiceButtonProps } from '~/components/creditNote/utils'
 import {
   VoidCreditNoteDialog,
   VoidCreditNoteDialogRef,
@@ -20,7 +21,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
-import { createCreditNoteForInvoiceButtonProps } from '~/layouts/CustomerInvoiceDetails'
 import ErrorImage from '~/public/images/maneki/error.svg'
 import { NAV_HEIGHT, theme } from '~/styles'