131 lines
4.3 KiB
TypeScript
131 lines
4.3 KiB
TypeScript
import { TaxesMultiSelectField } from "@erp/core/components";
|
|
import {
|
|
Description,
|
|
Field,
|
|
FieldGroup,
|
|
Fieldset,
|
|
Legend,
|
|
TextAreaField,
|
|
TextField,
|
|
} from "@repo/rdx-ui/components";
|
|
import {
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
RadioGroup,
|
|
RadioGroupItem,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { useFormContext, useWatch } from "react-hook-form";
|
|
import { useTranslation } from "../../i18n";
|
|
import { CustomerFormData } from "../../schemas";
|
|
|
|
export const CustomerBasicInfoFields = () => {
|
|
const { t } = useTranslation();
|
|
const { control } = useFormContext<CustomerFormData>();
|
|
|
|
const isCompany = useWatch({
|
|
control,
|
|
name: "is_company",
|
|
defaultValue: "true",
|
|
});
|
|
|
|
return (
|
|
<Fieldset>
|
|
<Legend>Identificación</Legend>
|
|
<Description>descripción</Description>
|
|
<FieldGroup className='grid grid-cols-1 gap-8 lg:grid-cols-4'>
|
|
<Field className='lg:col-span-2'>
|
|
<TextField
|
|
control={control}
|
|
name='name'
|
|
required
|
|
label={t("form_fields.name.label")}
|
|
placeholder={t("form_fields.name.placeholder")}
|
|
description={t("form_fields.name.description")}
|
|
/>
|
|
</Field>
|
|
<Field className='lg:col-span-2'>
|
|
<FormField
|
|
control={control}
|
|
name='is_company'
|
|
render={({ field }) => (
|
|
<FormItem className='space-y-3'>
|
|
<FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
|
|
<FormControl>
|
|
<RadioGroup
|
|
onValueChange={(value: string) => {
|
|
field.onChange(value === "false" ? "false" : "true");
|
|
}}
|
|
defaultValue={field.value ? "true" : "false"}
|
|
className='flex items-center gap-8'
|
|
>
|
|
<FormItem className='flex items-center space-x-2'>
|
|
<FormControl>
|
|
<RadioGroupItem id='rgi-company' value='true' />
|
|
</FormControl>
|
|
<FormLabel className='cursor-pointer' htmlFor='rgi-company'>
|
|
{t("form_fields.customer_type.company")}
|
|
</FormLabel>
|
|
</FormItem>
|
|
<FormItem className='flex items-center space-x-2'>
|
|
<FormControl>
|
|
<RadioGroupItem id='rgi-individual' value='false' />
|
|
</FormControl>
|
|
<FormLabel className='cursor-pointer' htmlFor='rgi-individual'>
|
|
{t("form_fields.customer_type.individual")}
|
|
</FormLabel>
|
|
</FormItem>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</Field>
|
|
|
|
{isCompany === "false" ? (
|
|
<TextField
|
|
className='lg:col-span-full'
|
|
control={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
|
|
className='lg:col-span-2 lg:col-start-1'
|
|
control={control}
|
|
name='reference'
|
|
label={t("form_fields.reference.label")}
|
|
placeholder={t("form_fields.reference.placeholder")}
|
|
description={t("form_fields.reference.description")}
|
|
/>
|
|
<TaxesMultiSelectField
|
|
className='lg:col-span-2'
|
|
control={control}
|
|
name='default_taxes'
|
|
required
|
|
label={t("form_fields.default_taxes.label")}
|
|
placeholder={t("form_fields.default_taxes.placeholder")}
|
|
description={t("form_fields.default_taxes.description")}
|
|
/>
|
|
|
|
<TextAreaField
|
|
className='lg:col-span-full'
|
|
control={control}
|
|
name='legal_record'
|
|
label={t("form_fields.legal_record.label")}
|
|
placeholder={t("form_fields.legal_record.placeholder")}
|
|
description={t("form_fields.legal_record.description")}
|
|
/>
|
|
</FieldGroup>
|
|
</Fieldset>
|
|
);
|
|
};
|