354 lines
10 KiB
TypeScript
354 lines
10 KiB
TypeScript
import { format } from "date-fns";
|
|
import { enUS, it } from "date-fns/locale";
|
|
import { CalendarIcon, X } from "lucide-react";
|
|
import { z } from "zod/v4";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "~/components/custom_ui/form";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Calendar } from "~/components/ui/calendar";
|
|
import { Label } from "~/components/ui/label";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "~/components/ui/popover";
|
|
import { Switch } from "~/components/ui/switch";
|
|
import { cn } from "~/lib/utils";
|
|
import { useZodForm } from "~/lib/zodForm";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import type { Servizio } from "~/schemas/public/Servizio";
|
|
|
|
const Schema = z.object({
|
|
decorrenza: z.date().nullable(),
|
|
isInterrotto: z.boolean(),
|
|
isOkAcconto: z.boolean(),
|
|
isOkConsulenza: z.boolean(),
|
|
isOkSaldo: z.boolean(),
|
|
isSent: z.boolean(),
|
|
skipPayment: z.boolean(),
|
|
skipControlloDoc: z.boolean(),
|
|
skipDocMotivazione: z.boolean(),
|
|
});
|
|
|
|
export type FormValues = z.infer<typeof Schema>;
|
|
|
|
export const FormEditServizio = ({
|
|
initialData,
|
|
onSubmit,
|
|
}: {
|
|
initialData: Servizio | undefined;
|
|
onSubmit: (fields: FormValues) => void;
|
|
}) => {
|
|
// This can come from your database or API.
|
|
let defaultValues: FormValues;
|
|
|
|
if (initialData) {
|
|
defaultValues = {
|
|
...initialData,
|
|
};
|
|
} else {
|
|
defaultValues = {
|
|
decorrenza: null,
|
|
isInterrotto: false,
|
|
isOkAcconto: false,
|
|
isOkConsulenza: false,
|
|
isOkSaldo: false,
|
|
isSent: false,
|
|
skipPayment: false,
|
|
skipControlloDoc: false,
|
|
skipDocMotivazione: false,
|
|
};
|
|
}
|
|
const { locale, t } = useTranslation();
|
|
|
|
z.config(z.locales[locale]());
|
|
|
|
const form = useZodForm(Schema, {
|
|
defaultValues: defaultValues,
|
|
});
|
|
|
|
const DatePickerLocale = locale === "it" ? it : enUS;
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form className="space-y-8 px-0.5" onSubmit={form.handleSubmit(onSubmit)}>
|
|
<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
|
|
<FormField
|
|
control={form.control}
|
|
name="isSent"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="isSent">Inviato</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="isSent"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
|
|
<FormDescription>
|
|
La mail di benvenuto al cliente è stata inviata
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="isInterrotto"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="isInterrotto">Interrotto</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="isInterrotto"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
|
|
<FormDescription>Il servizio è interrotto</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
|
|
<FormField
|
|
control={form.control}
|
|
name="decorrenza"
|
|
render={({ field }) => (
|
|
<FormItem className="flex w-full flex-col">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="decorrenza">
|
|
Decorrenza Servizio
|
|
</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
className={cn(
|
|
"h-10.5 w-full pl-3 text-left font-medium",
|
|
!field.value && "text-muted-foreground",
|
|
"rounded-lg border border-neutral-300 shadow-xs outline-hidden file:border-0 file:bg-transparent file:font-medium file:text-sm disabled:cursor-not-allowed disabled:opacity-50 dark:focus:border-transparent",
|
|
)}
|
|
id="decorrenza"
|
|
variant={"outline"}
|
|
>
|
|
{field.value ? (
|
|
format(field.value, "PPP", {
|
|
locale: DatePickerLocale,
|
|
})
|
|
) : (
|
|
<span>{t.anagrafica.scegli_data}</span>
|
|
)}
|
|
<CalendarIcon className="ml-auto size-4 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="start" className="w-auto p-0">
|
|
<Calendar
|
|
autoFocus
|
|
captionLayout="dropdown"
|
|
defaultMonth={field.value || new Date()}
|
|
endMonth={new Date(2050, 12)}
|
|
locale={DatePickerLocale}
|
|
mode="single"
|
|
onSelect={field.onChange}
|
|
selected={field.value || undefined}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<div className="flex flex-col items-start gap-2">
|
|
<Label htmlFor="reset_decorrenza">Reset Decorrenza</Label>
|
|
<Button
|
|
id="reset_decorrenza"
|
|
onClick={() => form.setValue("decorrenza", null)}
|
|
type="button"
|
|
variant="destructive"
|
|
>
|
|
<X className="size-5" />
|
|
Reset Decorrenza
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
|
|
<FormField
|
|
control={form.control}
|
|
name="isOkAcconto"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="isOkAcconto">Acconto Pagato</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="isOkAcconto"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
|
|
<FormDescription>
|
|
I'acconto è stato pagato o attivato manualmente
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="isOkSaldo"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="isOkSaldo">Saldo Pagato</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="isOkSaldo"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
|
|
<FormDescription>
|
|
Il saldo è stato pagato o attivato manualmente
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="isOkConsulenza"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="isOkConsulenza">
|
|
Consulenza Pagata
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="isOkConsulenza"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
|
|
<FormDescription>
|
|
La consulenza è stata pagata o attivata manualmente
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
|
|
<FormField
|
|
control={form.control}
|
|
name="skipPayment"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="skipPayment">Salta Pagamento</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="skipPayment"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
<FormDescription>
|
|
Salta la richiesta di pagamento al cliente (per tutti i
|
|
pagamenti)
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="skipControlloDoc"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="skipControlloDoc">
|
|
Salta controllo documento
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="skipControlloDoc"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
<FormDescription>
|
|
Salta la richiesta del documento del cliente al momento dello
|
|
sblocco contatti
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="skipDocMotivazione"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="skipDocMotivazione">
|
|
Salta documento motivazione
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
id="skipDocMotivazione"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
|
|
<FormDescription>
|
|
Salta l'invio del documento di motivazione al cliente al
|
|
momento della conferma annuncio
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<Button type="submit">Salva</Button>
|
|
</form>
|
|
</Form>
|
|
);
|
|
};
|