Skip to content

Commit

Permalink
feat: update net payment term and display payment due date
Browse files Browse the repository at this point in the history
  • Loading branch information
ansmonjol committed Jul 31, 2023
1 parent fd5eba9 commit 0498efb
Show file tree
Hide file tree
Showing 14 changed files with 790 additions and 38 deletions.
20 changes: 20 additions & 0 deletions ditto/base.json
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,26 @@
"text_636df520279a9e1b3c68cc67": "API keys & ID",
"text_636df520279a9e1b3c68cc75": "Organization ID",
"text_636df520279a9e1b3c68cc7d": "Organization ID copied to clipboard",
"text_64c7a89b6c67eb6c98898167": "Net payment term",
"text_64c7a89b6c67eb6c98898182": "The duration within which a customer is expected to remit payment after the invoice is issued.\r\nNeed flexibility by customer? Set it up on a customer that will override the one above.",
"text_64c7a89b6c67eb6c988980eb": "The duration within which a customer is expected to remit payment after the invoice is issued. Note that it may impact all invoices already in draft.",
"text_64c7a89b6c67eb6c98898109": "Net payment term",
"text_64c7a89b6c67eb6c98898125": "0 days (at issuing date)",
"text_64c7a89b6c67eb6c9889815f": "{{days}} day|{{days}} days",
"text_64c7a89b6c67eb6c988981ae": "Custom period",
"text_64c7a89b6c67eb6c988981e0": "Edit net payment term",
"text_64c7a89b6c67eb6c98898181": "Net payment term successfully edited",
"text_64c7a89b6c67eb6c9889822d": "Add a net payment term",
"text_64c7a89b6c67eb6c98898241": "{{days}} day (from organization)|{{days}} days (from organization)",
"text_64c7a89b6c67eb6c9889824d": "This customer inherits this net payment term from the <a href={{link}}>general settings</a>. Add it on this customer to overwrite the general setting.",
"text_64c7a89b6c67eb6c98898073": "Add net payment term",
"text_64c7a89b6c67eb6c9889831d": "Net payment term applied only for this customer.",
"text_64c7a89b6c67eb6c98898350": "Net payment term successfully added",
"text_64c7a89b6c67eb6c988980db": "You’re about to delete the net payment term",
"text_64c7a89b6c67eb6c988980f9": "After deleting this net payment term, {{customerName}}’s draft and upcoming invoices will automatically adopt the one defined at the organization level. Are you sure to delete it?",
"text_64c7a89b6c67eb6c98898133": "Yes, delete",
"text_64c7a89b6c67eb6c98898357": "Net payment term successfully deleted",
"text_64c7b3014f5c4639c4a51ab0": "Search or select a net payment term",
"text_64aeb7b998c4322918c84204": "Payment methods",
"text_64aeb7b998c4322918c84208": "Card",
"text_64aeb7b998c4322918c8420c": "SEPA Direct Debit",
Expand Down
4 changes: 4 additions & 0 deletions ditto/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,11 @@ sources:
fileName: Add missing keys
- name: 👍 [Ready for dev] - Settings / Customers - Lago x Stripe SDD
id: 64aeb7b7d5628db33254c4bb
fileName: 👍 [Ready for dev] - Settings / Customers - Lago x Stripe SDD
- name: 👍 [Ready for dev] - Plans - Add tax to plans
id: 64be91077c9f2900a38f3ad3
fileName: 👍 [Ready for dev] - Plans - Add tax to plans
- name: 👍 [Ready for dev] - Settings - Net payment term
id: 64c7a896197f1907cbc6371c
format: flat
variants: true
2 changes: 2 additions & 0 deletions ditto/de.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"__variant-name": "German",
"__variant-description": "",
"text_641d6ae1d947c400671e6abb": "Etwas ist schiefgelaufen",
"text_641d6aee014c8d00c1425cdd": "Bitte aktualisieren Sie die Seite oder kontaktieren Sie uns, wenn der Fehler weiterhin besteht.",
"text_641d6b00ef96c1008754734d": "Seite aktualisieren",
Expand Down
2 changes: 2 additions & 0 deletions ditto/fr.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"__variant-name": "French",
"__variant-description": "",
"text_641d6ae1d947c400671e6abb": "Quelque chose n'a pas fonctionné",
"text_641d6aee014c8d00c1425cdd": "Veuillez actualiser la page ou nous contacter si l'erreur persiste.",
"text_641d6b00ef96c1008754734d": "Actualiser la page",
Expand Down
8 changes: 7 additions & 1 deletion ditto/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ module.exports = {
"project_634ea0e94c99df2bb59820d9": {
"base": require('./-ready-for-dev---settings---customers---lago-gocardless-connection__base.json')
},
"project_64c7a896197f1907cbc6371c": {
"base": require('./-ready-for-dev---settings---net-payment-term__base.json')
},
"project_64aeb7b7d5628db33254c4bb": {
"base": require('./-ready-for-dev---settings--customers---lago-x-stripe-sdd__base.json')
},
Expand Down Expand Up @@ -186,7 +189,10 @@ module.exports = {
"base": require('./customers---edit--delete-a-customer__base.json')
},
"ditto_component_library": {
"base": require('./ditto-component-library__base.json')
"base": require('./ditto-component-library__base.json'),
"de": require('./ditto-component-library__de.json'),
"fr": require('./ditto-component-library__fr.json'),
"nb": require('./ditto-component-library__nb.json')
},
"project_623b3ac9459a5d00df324533": {
"base": require('./documentation-asset__base.json')
Expand Down
2 changes: 2 additions & 0 deletions ditto/nb.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"__variant-name": "Norwegian",
"__variant-description": "",
"text_641d6ae1d947c400671e6abb": "Noe gikk galt",
"text_641d6aee014c8d00c1425cdd": "Oppdater siden eller kontakt oss hvis feilen vedvarer.",
"text_641d6b00ef96c1008754734d": "Oppdater siden",
Expand Down
117 changes: 115 additions & 2 deletions src/components/customers/CustomerSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
CustomerForDeleteVatRateDialogFragmentDoc,
DeleteCustomerDocumentLocaleFragmentDoc,
DeleteCustomerGracePeriodFragmentDoc,
DeleteCustomerNetPaymentTermFragmentDoc,
EditCustomerDocumentLocaleFragmentDoc,
EditCustomerInvoiceGracePeriodFragmentDoc,
EditCustomerVatRateFragmentDoc,
Expand All @@ -33,6 +34,11 @@ import { PremiumWarningDialog, PremiumWarningDialogRef } from '~/components/Prem
import ErrorImage from '~/public/images/maneki/error.svg'
import { DocumentLocales } from '~/core/translations/documentLocales'
import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
import { GenericPlaceholder } from '~/components/GenericPlaceholder'
import {
EditNetPaymentTermDialog,
EditNetPaymentTermDialogRef,
} from '~/components/settings/EditNetPaymentTermDialog'

import {
EditCustomerInvoiceGracePeriodDialog,
Expand All @@ -51,8 +57,10 @@ import {
EditCustomerDocumentLocaleDialogRef,
} from './EditCustomerDocumentLocaleDialog'
import { DeleteCustomerDocumentLocaleDialog } from './DeleteCustomerDocumentLocaleDialog'

import { GenericPlaceholder } from '../GenericPlaceholder'
import {
DeleteOrganizationNetPaymentTermDialog,
DeleteOrganizationNetPaymentTermDialogRef,
} from './DeleteCustomerNetPaymentTermDialog'

gql`
fragment CustomerAppliedTaxRatesForSettings on Customer {
Expand All @@ -69,6 +77,7 @@ gql`
customer(id: $id) {
id
invoiceGracePeriod
netPaymentTerm
billingConfiguration {
id
documentLocale
Expand All @@ -82,10 +91,12 @@ gql`
...DeleteCustomerGracePeriod
...DeleteCustomerDocumentLocale
...CustomerForDeleteVatRateDialog
...DeleteCustomerNetPaymentTerm
}
organization {
id
netPaymentTerm
billingConfiguration {
id
invoiceGracePeriod
Expand All @@ -100,6 +111,7 @@ gql`
${DeleteCustomerGracePeriodFragmentDoc}
${DeleteCustomerDocumentLocaleFragmentDoc}
${CustomerForDeleteVatRateDialogFragmentDoc}
${DeleteCustomerNetPaymentTermFragmentDoc}
`

interface CustomerSettingsProps {
Expand All @@ -122,6 +134,9 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
const editCustomerDocumentLocale = useRef<EditCustomerDocumentLocaleDialogRef>(null)
const deleteCustomerDocumentLocale = useRef<DeleteCustomerGracePeriodeDialogRef>(null)
const premiumWarningDialogRef = useRef<PremiumWarningDialogRef>(null)
const editNetPaymentTermDialogRef = useRef<EditNetPaymentTermDialogRef>(null)
const deleteOrganizationNetPaymentTermDialogRef =
useRef<DeleteOrganizationNetPaymentTermDialogRef>(null)

{
!!error && !loading && (
Expand Down Expand Up @@ -213,6 +228,95 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
)}
</InfoBlock>

<InlineSectionTitle>
<Typography variant="subhead" color="grey700">
{translate('text_64c7a89b6c67eb6c98898109')}
</Typography>
{typeof customer?.netPaymentTerm !== 'number' ? (
<Button
disabled={loading}
variant="quaternary"
onClick={() => editNetPaymentTermDialogRef?.current?.openDialog(customer)}
>
{translate('text_64c7a89b6c67eb6c9889822d')}
</Button>
) : (
<Popper
PopperProps={{ placement: 'bottom-end' }}
opener={<Button disabled={loading} icon="dots-horizontal" variant="quaternary" />}
>
{({ closePopper }) => (
<MenuPopper>
<Button
disabled={loading}
startIcon="pen"
variant="quaternary"
align="left"
onClick={() => {
editNetPaymentTermDialogRef?.current?.openDialog(customer)
closePopper()
}}
>
{translate('text_63aa15caab5b16980b21b0b8')}
</Button>
<Button
disabled={loading}
startIcon="trash"
variant="quaternary"
align="left"
onClick={() => {
deleteOrganizationNetPaymentTermDialogRef?.current?.openDialog()
closePopper()
}}
>
{translate('text_63aa15caab5b16980b21b0ba')}
</Button>
</MenuPopper>
)}
</Popper>
)}
</InlineSectionTitle>

<InfoBlock $hasSeparator $loading={loading}>
{loading ? (
<>
<Skeleton variant="text" width={320} height={12} marginBottom={theme.spacing(4)} />
<Skeleton variant="text" width={160} height={12} />
</>
) : (
<>
<Typography variant="body" color="grey700">
{typeof customer?.netPaymentTerm !== 'number'
? translate(
'text_64c7a89b6c67eb6c98898241',
{
days: organization?.netPaymentTerm,
},
organization?.netPaymentTerm
)
: customer?.netPaymentTerm === 0
? translate('text_64c7a89b6c67eb6c98898125')
: translate(
'text_64c7a89b6c67eb6c9889815f',
{
days: customer?.netPaymentTerm,
},
customer?.netPaymentTerm
)}
</Typography>
<Typography
variant="caption"
color="grey600"
html={
typeof customer?.netPaymentTerm !== 'number'
? translate('text_64c7a89b6c67eb6c9889824d', { link: INVOICE_SETTINGS_ROUTE })
: translate('text_64c7a89b6c67eb6c9889831d')
}
/>
</>
)}
</InfoBlock>

<InlineSectionTitle>
<Typography variant="subhead" color="grey700">
{translate('text_638dff9779fb99299bee912e')}
Expand Down Expand Up @@ -410,6 +514,14 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
ref={deleteCustomerDocumentLocale}
customer={customer}
/>
<EditNetPaymentTermDialog
ref={editNetPaymentTermDialogRef}
description={translate('text_64c7a89b6c67eb6c988980eb')}
/>
<DeleteOrganizationNetPaymentTermDialog
ref={deleteOrganizationNetPaymentTermDialogRef}
customer={customer}
/>
</>
)}
<PremiumWarningDialog ref={premiumWarningDialogRef} />
Expand All @@ -428,6 +540,7 @@ const InfoBlock = styled.div<{ $loading?: boolean; $hasSeparator?: boolean }>`
padding-top: ${({ $loading }) => ($loading ? theme.spacing(1) : 0)};
padding-bottom: ${({ $loading, $hasSeparator }) =>
$loading ? theme.spacing(9) : $hasSeparator ? theme.spacing(8) : 0};
margin-bottom: ${theme.spacing(8)};
box-shadow: ${({ $hasSeparator }) => ($hasSeparator ? theme.shadows[7] : 'none')};
> *:not(:last-child) {
Expand Down
81 changes: 81 additions & 0 deletions src/components/customers/DeleteCustomerNetPaymentTermDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { gql } from '@apollo/client'
import { forwardRef } from 'react'

import { Typography, DialogRef } from '~/components/designSystem'
import {
useDeleteCustomerNetPaymentTermMutation,
DeleteCustomerNetPaymentTermFragment,
} from '~/generated/graphql'
import { WarningDialog, WarningDialogRef } from '~/components/WarningDialog'
import { useInternationalization } from '~/hooks/core/useInternationalization'
import { addToast } from '~/core/apolloClient'

gql`
fragment DeleteCustomerNetPaymentTerm on Customer {
id
externalId
name
netPaymentTerm
}
mutation deleteCustomerNetPaymentTerm($input: UpdateCustomerInput!) {
updateCustomer(input: $input) {
id
...DeleteCustomerNetPaymentTerm
}
}
`

export interface DeleteOrganizationNetPaymentTermDialogRef extends WarningDialogRef {}

interface DeleteOrganizationNetPaymentTermDialogProps {
customer: DeleteCustomerNetPaymentTermFragment
}

export const DeleteOrganizationNetPaymentTermDialog = forwardRef<
DialogRef,
DeleteOrganizationNetPaymentTermDialogProps
>(({ customer }: DeleteOrganizationNetPaymentTermDialogProps, ref) => {
const [deleteCustomerNetPaymentTerm] = useDeleteCustomerNetPaymentTermMutation({
onCompleted(data) {
if (data && data.updateCustomer) {
addToast({
message: translate('text_64c7a89b6c67eb6c98898357'),
severity: 'success',
})
}
},
})
const { translate } = useInternationalization()

return (
<WarningDialog
ref={ref}
title={translate('text_64c7a89b6c67eb6c988980db')}
description={
<Typography
html={translate('text_64c7a89b6c67eb6c988980f9', {
customerName: `<span class="line-break-anywhere">${customer.name}</span>`,
})}
/>
}
onContinue={async () =>
await deleteCustomerNetPaymentTerm({
variables: {
input: {
id: customer.id,
netPaymentTerm: null,
// TODO: API should not require those fields on customer update
// To be tackled as improvement
externalId: customer.externalId,
name: customer.name || '',
},
},
})
}
continueText={translate('text_64c7a89b6c67eb6c98898133')}
/>
)
})

DeleteOrganizationNetPaymentTermDialog.displayName = 'DeleteOrganizationNetPaymentTermDialog'
2 changes: 1 addition & 1 deletion src/components/designSystem/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const Dialog = forwardRef<DialogRef, DialogProps>(
PaperProps={{ className: 'dialogPaper' }}
transitionDuration={80}
>
<Title $hasDescription={!!description} variant="headline" forceBreak>
<Title $hasDescription={!!description} variant="headline">
{title}
</Title>
{description && <Description>{description}</Description>}
Expand Down
Loading

0 comments on commit 0498efb

Please sign in to comment.