Skip to content

Commit

Permalink
Merge pull request #503 from cristinafrombr/DEV-13687
Browse files Browse the repository at this point in the history 
feat(DEV-13687): Argon changes during invoice creation
  • Loading branch information
@saladNights
saladNights authored Jan 13, 2025
2 parents 9ce8f11 + e479fb7 commit fdefe8b
Show file tree
Hide file tree
Showing 11 changed files with 291 additions and 264 deletions.
5 changes: 5 additions & 0 deletions .changeset/new-bottles-tap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@monite/sdk-react': minor
---

feat(DEV-13687) Argon changes during invoice creation
40 changes: 19 additions & 21 deletions ...dk-react/src/components/receivables/InvoiceDetails/CreateReceivable/CreateReceivables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const CreateReceivablesBase = ({
isLoading: isEntityLoading,
isNonCompliantFlow,
} = useMyEntity();

const fallbackCurrency = 'USD';
const methods = useForm<CreateReceivablesFormProps>({
resolver: yupResolver(
getCreateInvoiceValidationSchema(
Expand Down Expand Up @@ -236,33 +236,31 @@ const CreateReceivablesBase = ({
onSubmit={handleSubmit(handleCreateReceivable)}
style={{ marginBottom: theme.spacing(7) }}
>
<Box>
<Typography
variant="h1"
sx={{ mb: 2 }}
data-testid={ActiveInvoiceTitleTestId.ActiveInvoiceTitleTestId}
>
{t(i18n)`Invoice`}{' '}
<Typography component="span" variant="h1" color="textSecondary">
#{INVOICE_DOCUMENT_AUTO_ID}
</Typography>
</Typography>
</Box>
<Stack direction="column" spacing={7}>
<BillToSection disabled={createReceivable.isPending} />
<Box>
<Typography
variant="h1"
sx={{ mb: 2 }}
data-testid={
ActiveInvoiceTitleTestId.ActiveInvoiceTitleTestId
}
>
{t(i18n)`Invoice`}{' '}
<Typography
component="span"
variant="h1"
color="textSecondary"
>
#{INVOICE_DOCUMENT_AUTO_ID}
</Typography>
</Typography>
<EntitySection disabled={createReceivable.isPending} />
</Box>
<ItemsSection
defaultCurrency={settings?.currency?.default}
defaultCurrency={
settings?.currency?.default || fallbackCurrency
}
actualCurrency={actualCurrency}
onCurrencyChanged={setActualCurrency}
isNonVatSupported={isNonVatSupported}
/>
<Box>
<EntitySection disabled={createReceivable.isPending} />
</Box>
<ReminderSection
disabled={createReceivable.isPending}
onUpdateOverdueReminder={onEditOverdueReminder}
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/receivables/InvoiceDetails/CreateReceivable/components/CountryInvoiceOption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function CountryInvoiceOption({ code }: CountryOptionProps) {
return (
<img
css={css`
margin-right: ${theme.spacing(1)};
margin: 0 ${theme.spacing(1)};
`}
loading="lazy"
width="25"
Expand Down
211 changes: 100 additions & 111 deletions ...t/src/components/receivables/InvoiceDetails/CreateReceivable/sections/CustomerSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,23 @@ import {
Dispatch,
SetStateAction,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { usePrevious } from 'react-use';

import { components } from '@/api';
import {
getCounterpartName,
getIndividualName,
} from '@/components/counterparts/helpers';
import { getCounterpartName } from '@/components/counterparts/helpers';
import { CountryInvoiceOption } from '@/components/receivables/InvoiceDetails/CreateReceivable/components/CountryInvoiceOption';
import { CreateCounterpartDialog } from '@/components/receivables/InvoiceDetails/CreateReceivable/sections/components/CreateCounterpartDialog';
import { useRootElements } from '@/core/context/RootElementsProvider';
import {
useCounterpartAddresses,
useCounterpartById,
useCounterpartContactList,
useCounterpartList,
useCounterpartVatList,
} from '@/core/queries';
import { getAPIErrorMessage } from '@/core/utils/getAPIErrorMessage';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import AddIcon from '@mui/icons-material/Add';
Expand Down Expand Up @@ -83,11 +78,6 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {

const counterpartId = watch('counterpart_id');

const {
data: counterpartContacts,
error: contactPersonError,
isLoading: isContactPersonsLoading,
} = useCounterpartContactList(counterpartId);
const { data: counterpartVats, isLoading: isCounterpartVatsLoading } =
useCounterpartVatList(counterpartId);
const { data: counterpart, isLoading: isCounterpartLoading } =
Expand All @@ -102,14 +92,33 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {

const [isCreateCounterpartOpened, setIsCreateCounterpartOpened] =
useState<boolean>(false);
const defaultContactName = counterpartContacts?.find(
(contact) => contact.is_default
);

const contactPersonDisplayableError =
usePrevious(contactPersonError) ?? contactPersonError;
const [isShippingAddressShown, setIsShippingAddressShown] =
useState<boolean>(false);

const className = 'Monite-CreateReceivable-CustomerSection';
const isHiddenForUS =
!_isCounterpartAddressesLoading &&
Array.isArray(counterpartAddresses?.data) &&
counterpartAddresses.data.length > 0 &&
counterpartAddresses.data[0]?.country === 'US';
const isAddressFormDisabled =
isCounterpartAddressesLoading ||
!counterpartId ||
disabled ||
counterpartAddresses?.data.length === 1;

useEffect(() => {
if (counterpartAddresses && counterpartAddresses.data.length === 1) {
setValue('default_shipping_address_id', counterpartAddresses.data[0].id);
setValue('default_billing_address_id', counterpartAddresses.data[0].id);
}
}, [counterpartAddresses, setValue]);

useEffect(() => {
if (counterpartVats && counterpartVats.data.length === 1) {
setValue('counterpart_vat_id_id', counterpartVats.data[0].id);
}
}, [counterpartVats, setValue]);

return (
<Stack spacing={2} className={className}>
Expand All @@ -126,40 +135,6 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {
/>
{counterpartId && (
<>
<Box>
<TextField
disabled
fullWidth
variant="standard"
label={t(i18n)`Contact person`}
value={
defaultContactName ? getIndividualName(defaultContactName) : ''
}
InputProps={{
startAdornment:
counterpartId && isContactPersonsLoading ? (
<CircularProgress size={20} />
) : null,
}}
/>
<Collapse in={Boolean(contactPersonError)}>
<FormHelperText>
{contactPersonDisplayableError &&
getAPIErrorMessage(i18n, contactPersonDisplayableError)}
</FormHelperText>
</Collapse>
<Collapse
in={
!contactPersonError &&
!isContactPersonsLoading &&
counterpartContacts?.length === 0
}
>
<FormHelperText>{t(
i18n
)`No contact persons available`}</FormHelperText>
</Collapse>
</Box>
<Controller
name="counterpart_vat_id_id"
control={control}
Expand All @@ -170,9 +145,10 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {
disabled={
isCounterpartVatsLoading ||
!counterpartVats?.data ||
counterpartVats?.data.length === 0 ||
counterpartVats?.data.length < 2 ||
disabled
}
hidden={isHiddenForUS}
error={Boolean(error)}
>
<InputLabel htmlFor={field.name}>{t(i18n)`VAT ID`}</InputLabel>
Expand Down Expand Up @@ -205,6 +181,7 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {
variant="standard"
label={t(i18n)`TAX ID`}
value={counterpart?.tax_id ?? ''}
hidden={isHiddenForUS}
InputProps={{
startAdornment: isCounterpartLoading ? (
<CircularProgress size={20} />
Expand All @@ -224,11 +201,13 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {
),
}}
/>
<Collapse
in={counterpart && !counterpart.tax_id && !isCounterpartLoading}
>
<FormHelperText>{t(i18n)`No TAX ID available`}</FormHelperText>
</Collapse>
{!isHiddenForUS && (
<Collapse
in={counterpart && !counterpart.tax_id && !isCounterpartLoading}
>
<FormHelperText>{t(i18n)`No TAX ID available`}</FormHelperText>
</Collapse>
)}
</Box>
<Controller
name="default_billing_address_id"
Expand All @@ -239,9 +218,7 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {
fullWidth
required
error={Boolean(error)}
disabled={
isCounterpartAddressesLoading || !counterpartId || disabled
}
disabled={isAddressFormDisabled}
>
<InputLabel id={field.name}>{t(
i18n
Expand All @@ -267,57 +244,69 @@ export const CustomerSection = ({ disabled }: SectionGeneralProps) => {
</FormControl>
)}
/>
<Controller
name="default_shipping_address_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl
variant="standard"
fullWidth
error={Boolean(error)}
disabled={
isCounterpartAddressesLoading || !counterpartId || disabled
}
>
<InputLabel htmlFor={field.name}>{t(
i18n
)`Shipping address`}</InputLabel>
<Select
{...field}
id={field.name}
labelId={field.name}
MenuProps={{ container: root }}
label={t(i18n)`Shipping address`}
startAdornment={
isCounterpartAddressesLoading ? (
<CircularProgress size={20} />
) : null
}
endAdornment={
<IconButton
sx={{
visibility: field.value ? 'visible' : 'hidden ',
mr: 2,
}}
size="small"
onClick={(event) => {
event.preventDefault();
setValue('default_shipping_address_id', '');
}}
>
<ClearIcon fontSize="small" />
</IconButton>
}
{!isShippingAddressShown && (
<Button
sx={{ alignSelf: 'baseline' }}
startIcon={<AddIcon />}
onClick={() => setIsShippingAddressShown(true)}
>
{t(i18n)`Shipping address`}
</Button>
)}
{isShippingAddressShown && (
<Controller
name="default_shipping_address_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl
variant="standard"
fullWidth
error={Boolean(error)}
disabled={isAddressFormDisabled}
>
{counterpartAddresses?.data.map((address) => (
<MenuItem key={address.id} value={address.id}>
<CounterpartAddressView address={address} />
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<InputLabel htmlFor={field.name}>{t(
i18n
)`Shipping address`}</InputLabel>
<Select
{...field}
id={field.name}
labelId={field.name}
MenuProps={{ container: root }}
label={t(i18n)`Shipping address`}
startAdornment={
isCounterpartAddressesLoading ? (
<CircularProgress size={20} />
) : null
}
endAdornment={
counterpartAddresses &&
counterpartAddresses?.data.length > 1 && (
<IconButton
sx={{
visibility: field.value ? 'visible' : 'hidden ',
mr: 2,
}}
size="small"
onClick={(event) => {
event.preventDefault();
setValue('default_shipping_address_id', '');
}}
>
<ClearIcon fontSize="small" />
</IconButton>
)
}
>
{counterpartAddresses?.data.map((address) => (
<MenuItem key={address.id} value={address.id}>
<CounterpartAddressView address={address} />
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
)}
</>
)}
</Stack>
Expand Down
14 changes: 12 additions & 2 deletions ...act/src/components/receivables/InvoiceDetails/CreateReceivable/sections/EntitySection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
import { CreateReceivablesFormProps } from '@/components/receivables/InvoiceDetails/CreateReceivable/validation';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Box, FormControl, TextField } from '@mui/material';
import { Box, FormControl, TextField, Typography } from '@mui/material';

import type { SectionGeneralProps } from './Section.types';

Expand All @@ -21,7 +21,17 @@ export const EntitySection = ({ disabled }: EntitySectionProps) => {
const { control } = useFormContext<CreateReceivablesFormProps>();

return (
<Box>
<Box
sx={{ borderBottom: '1px solid', borderBottomColor: 'divider' }}
pb={10}
>
<Typography
variant="caption"
color="textSecondary"
sx={{ lineHeight: 2 }}
>
{t(i18n)`Memo`}
</Typography>
<Controller
name="memo"
control={control}
Expand Down
Loading

0 comments on commit fdefe8b

Please sign in to comment.