346 lines
13 KiB
TypeScript
346 lines
13 KiB
TypeScript
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
|
||
|
|
import { TaxesMultiSelectField } from "@erp/core/components";
|
||
|
|
import { SelectField, TextAreaField, TextField } from "@repo/rdx-ui/components";
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
Form,
|
||
|
|
FormControl,
|
||
|
|
FormField,
|
||
|
|
FormItem,
|
||
|
|
FormLabel,
|
||
|
|
FormMessage,
|
||
|
|
RadioGroup,
|
||
|
|
RadioGroupItem,
|
||
|
|
} from "@repo/shadcn-ui/components";
|
||
|
|
|
||
|
|
import { useUnsavedChangesNotifier } from "@erp/core/hooks";
|
||
|
|
import { GetCustomerByIdResponseDTO } from "@erp/customer-invoices/common";
|
||
|
|
import { useTranslation } from "../../i18n";
|
||
|
|
import { CustomerData, CustomerDataUpdateUpdateSchema } from "../../schemas";
|
||
|
|
|
||
|
|
interface CustomerFormProps {
|
||
|
|
formId: string;
|
||
|
|
data?: GetCustomerByIdResponseDTO;
|
||
|
|
isPending?: boolean;
|
||
|
|
/**
|
||
|
|
* Callback function to handle form submission.
|
||
|
|
* @param data - The customer data submitted by the form.
|
||
|
|
*/
|
||
|
|
onSubmit?: (data: CustomerData) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CustomerEditForm = ({ formId, data, onSubmit, isPending }: CustomerFormProps) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
const form = useForm<CustomerData>({
|
||
|
|
resolver: zodResolver(CustomerDataUpdateUpdateSchema),
|
||
|
|
defaultValues: data,
|
||
|
|
disabled: isPending,
|
||
|
|
});
|
||
|
|
|
||
|
|
useUnsavedChangesNotifier({
|
||
|
|
isDirty: form.formState.isDirty,
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleSubmit = (data: CustomerData) => {
|
||
|
|
console.log("Datos del formulario:", data);
|
||
|
|
onSubmit?.(data);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleError = (errors: any) => {
|
||
|
|
console.error("Errores en el formulario:", errors);
|
||
|
|
// Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCancel = () => {
|
||
|
|
form.reset(data);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form {...form}>
|
||
|
|
<form id={formId} onSubmit={form.handleSubmit(handleSubmit, handleError)}>
|
||
|
|
<div className='w-full grid grid-cols-1 space-y-8 space-x-8 xl:grid-cols-2'>
|
||
|
|
{/* Información básica */}
|
||
|
|
<Card className='shadow-none'>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>{t("form_groups.basic_info.title")}</CardTitle>
|
||
|
|
<CardDescription>{t("form_groups.basic_info.description")}</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name='is_company'
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem className='space-y-3'>
|
||
|
|
<FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<RadioGroup
|
||
|
|
onValueChange={field.onChange}
|
||
|
|
defaultValue={field.value ? "1" : "0"}
|
||
|
|
className='flex gap-6'
|
||
|
|
>
|
||
|
|
<FormItem className='flex items-center space-x-2'>
|
||
|
|
<FormControl>
|
||
|
|
<RadioGroupItem value={"1"} />
|
||
|
|
</FormControl>
|
||
|
|
<FormLabel className='font-normal'>
|
||
|
|
{t("form_fields.customer_type.company")}
|
||
|
|
</FormLabel>
|
||
|
|
</FormItem>
|
||
|
|
|
||
|
|
<FormItem className='flex items-center space-x-2'>
|
||
|
|
<FormControl>
|
||
|
|
<RadioGroupItem value={"0"} />
|
||
|
|
</FormControl>
|
||
|
|
<FormLabel className='font-normal'>
|
||
|
|
{t("form_fields.customer_type.individual")}
|
||
|
|
</FormLabel>
|
||
|
|
</FormItem>
|
||
|
|
</RadioGroup>
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='name'
|
||
|
|
required
|
||
|
|
label={t("form_fields.name.label")}
|
||
|
|
placeholder={t("form_fields.name.placeholder")}
|
||
|
|
description={t("form_fields.name.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='trade_name'
|
||
|
|
label={t("form_fields.trade_name.label")}
|
||
|
|
placeholder={t("form_fields.trade_name.placeholder")}
|
||
|
|
description={t("form_fields.trade_name.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='reference'
|
||
|
|
label={t("form_fields.reference.label")}
|
||
|
|
placeholder={t("form_fields.reference.placeholder")}
|
||
|
|
description={t("form_fields.reference.description")}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Dirección */}
|
||
|
|
<Card className='shadow-none'>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>{t("form_groups.address.title")}</CardTitle>
|
||
|
|
<CardDescription>{t("form_groups.address.description")}</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
|
||
|
|
<TextField
|
||
|
|
className='xl:col-span-2'
|
||
|
|
control={form.control}
|
||
|
|
name='street'
|
||
|
|
required
|
||
|
|
label={t("form_fields.street.label")}
|
||
|
|
placeholder={t("form_fields.street.placeholder")}
|
||
|
|
description={t("form_fields.street.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='city'
|
||
|
|
required
|
||
|
|
label={t("form_fields.city.label")}
|
||
|
|
placeholder={t("form_fields.city.placeholder")}
|
||
|
|
description={t("form_fields.city.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='postal_code'
|
||
|
|
required
|
||
|
|
label={t("form_fields.postal_code.label")}
|
||
|
|
placeholder={t("form_fields.postal_code.placeholder")}
|
||
|
|
description={t("form_fields.postal_code.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='province'
|
||
|
|
required
|
||
|
|
label={t("form_fields.province.label")}
|
||
|
|
placeholder={t("form_fields.province.placeholder")}
|
||
|
|
description={t("form_fields.province.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SelectField
|
||
|
|
control={form.control}
|
||
|
|
name='country'
|
||
|
|
required
|
||
|
|
label={t("form_fields.country.label")}
|
||
|
|
placeholder={t("form_fields.country.placeholder")}
|
||
|
|
description={t("form_fields.country.description")}
|
||
|
|
items={[
|
||
|
|
{ value: "ES", label: "España" },
|
||
|
|
{ value: "FR", label: "Francia" },
|
||
|
|
{ value: "DE", label: "Alemania" },
|
||
|
|
{ value: "IT", label: "Italia" },
|
||
|
|
{ value: "PT", label: "Portugal" },
|
||
|
|
{ value: "US", label: "Estados Unidos" },
|
||
|
|
{ value: "MX", label: "México" },
|
||
|
|
{ value: "AR", label: "Argentina" },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Contacto */}
|
||
|
|
<Card className='shadow-none'>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>{t("form_groups.contact_info.title")}</CardTitle>
|
||
|
|
<CardDescription>{t("form_groups.contact_info.description")}</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='email_primary'
|
||
|
|
label={t("form_fields.email_primary.label")}
|
||
|
|
placeholder={t("form_fields.email_primary.placeholder")}
|
||
|
|
description={t("form_fields.email_primary.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='email_secondary'
|
||
|
|
label={t("form_fields.email_secondary.label")}
|
||
|
|
placeholder={t("form_fields.email_secondary.placeholder")}
|
||
|
|
description={t("form_fields.email_secondary.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='phone_primary'
|
||
|
|
label={t("form_fields.phone_primary.label")}
|
||
|
|
placeholder={t("form_fields.phone_primary.placeholder")}
|
||
|
|
description={t("form_fields.phone_primary.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='phone_secondary'
|
||
|
|
label={t("form_fields.phone_secondary.label")}
|
||
|
|
placeholder={t("form_fields.phone_secondary.placeholder")}
|
||
|
|
description={t("form_fields.phone_secondary.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='mobile_primary'
|
||
|
|
label={t("form_fields.mobile_primary.label")}
|
||
|
|
placeholder={t("form_fields.mobile_primary.placeholder")}
|
||
|
|
description={t("form_fields.mobile_primary.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='mobile_secondary'
|
||
|
|
label={t("form_fields.mobile_secondary.label")}
|
||
|
|
placeholder={t("form_fields.mobile_secondary.placeholder")}
|
||
|
|
description={t("form_fields.mobile_secondary.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
control={form.control}
|
||
|
|
name='fax'
|
||
|
|
label={t("form_fields.fax.label")}
|
||
|
|
placeholder={t("form_fields.fax.placeholder")}
|
||
|
|
description={t("form_fields.fax.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
className='xl:col-span-2'
|
||
|
|
control={form.control}
|
||
|
|
name='website'
|
||
|
|
label={t("form_fields.website.label")}
|
||
|
|
placeholder={t("form_fields.website.placeholder")}
|
||
|
|
description={t("form_fields.website.description")}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Configuraciones Adicionales */}
|
||
|
|
<Card className='shadow-none'>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>{t("form_groups.additional_config.title")}</CardTitle>
|
||
|
|
<CardDescription>{t("form_groups.additional_config.description")}</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
|
||
|
|
<TaxesMultiSelectField
|
||
|
|
control={form.control}
|
||
|
|
name='default_tax'
|
||
|
|
required
|
||
|
|
label={t("form_fields.default_tax.label")}
|
||
|
|
placeholder={t("form_fields.default_tax.placeholder")}
|
||
|
|
description={t("form_fields.default_tax.description")}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SelectField
|
||
|
|
control={form.control}
|
||
|
|
name='lang_code'
|
||
|
|
required
|
||
|
|
label={t("form_fields.lang_code.label")}
|
||
|
|
placeholder={t("form_fields.lang_code.placeholder")}
|
||
|
|
description={t("form_fields.lang_code.description")}
|
||
|
|
items={[
|
||
|
|
{ value: "es", label: "Español" },
|
||
|
|
{ value: "en", label: "Inglés" },
|
||
|
|
{ value: "fr", label: "Francés" },
|
||
|
|
{ value: "de", label: "Alemán" },
|
||
|
|
{ value: "it", label: "Italiano" },
|
||
|
|
{ value: "pt", label: "Portugués" },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SelectField
|
||
|
|
control={form.control}
|
||
|
|
name='currency_code'
|
||
|
|
required
|
||
|
|
label={t("form_fields.currency_code.label")}
|
||
|
|
placeholder={t("form_fields.currency_code.placeholder")}
|
||
|
|
description={t("form_fields.currency_code.description")}
|
||
|
|
items={[
|
||
|
|
{ value: "EUR", label: "Euro" },
|
||
|
|
{ value: "USD", label: "Dólar estadounidense" },
|
||
|
|
{ value: "GBP", label: "Libra esterlina" },
|
||
|
|
{ value: "ARS", label: "Peso argentino" },
|
||
|
|
{ value: "MXN", label: "Peso mexicano" },
|
||
|
|
{ value: "JPY", label: "Yen japonés" },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextAreaField
|
||
|
|
className=''
|
||
|
|
control={form.control}
|
||
|
|
name='legal_record'
|
||
|
|
required
|
||
|
|
label={t("form_fields.legal_record.label")}
|
||
|
|
placeholder={t("form_fields.legal_record.placeholder")}
|
||
|
|
description={t("form_fields.legal_record.description")}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
<Button type='submit'>Submit</Button>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
);
|
||
|
|
};
|