355 lines
10 KiB
TypeScript
355 lines
10 KiB
TypeScript
|
import { format } from "date-fns";
|
||
|
|
import { it } from "date-fns/locale";
|
||
|
|
import { CalendarIcon, Trash2 } from "lucide-react";
|
||
|
|
import toast from "react-hot-toast";
|
||
|
|
import { z } from "zod/v4";
|
||
|
|
import { Confirm } from "~/components/confirm";
|
||
|
|
import {
|
||
|
|
CredenzaBody,
|
||
|
|
CredenzaClose,
|
||
|
|
CredenzaFooter,
|
||
|
|
} from "~/components/custom_ui/credenza";
|
||
|
|
import {
|
||
|
|
Form,
|
||
|
|
FormControl,
|
||
|
|
FormDescription,
|
||
|
|
FormField,
|
||
|
|
FormItem,
|
||
|
|
FormLabel,
|
||
|
|
FormMessage,
|
||
|
|
} from "~/components/custom_ui/form";
|
||
|
|
import { MultiSelect } from "~/components/custom_ui/multiselect";
|
||
|
|
import { Button } from "~/components/ui/button";
|
||
|
|
import { Calendar } from "~/components/ui/calendar";
|
||
|
|
import {
|
||
|
|
Popover,
|
||
|
|
PopoverContent,
|
||
|
|
PopoverTrigger,
|
||
|
|
} from "~/components/ui/popover";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "~/components/ui/select";
|
||
|
|
import { Switch } from "~/components/ui/switch";
|
||
|
|
import { PAYMENT_TYPES, type PaymentType } from "~/i18n/stripe";
|
||
|
|
import { cn, formatCurrency } from "~/lib/utils";
|
||
|
|
import { useZodForm } from "~/lib/zodForm";
|
||
|
|
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
|
||
|
|
import type { Ordini } from "~/schemas/public/Ordini";
|
||
|
|
import PaymentStatusEnum from "~/schemas/public/PaymentStatusEnum";
|
||
|
|
import type { Prezziario } from "~/schemas/public/Prezziario";
|
||
|
|
import { zPrezziarioId } from "~/server/utils/zod_types";
|
||
|
|
import { api } from "~/utils/api";
|
||
|
|
|
||
|
|
type FormProps = {
|
||
|
|
prezziario: Prezziario[];
|
||
|
|
data: Ordini;
|
||
|
|
close: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const FormEditOrder = ({ prezziario, data, close }: FormProps) => {
|
||
|
|
const schema = z.object({
|
||
|
|
packid: zPrezziarioId,
|
||
|
|
isActive: z.boolean(),
|
||
|
|
type: z.enum(OrderTypeEnum),
|
||
|
|
created_at: z.date(),
|
||
|
|
amount_cent: z.number(),
|
||
|
|
sconto: z.number().min(0).max(100),
|
||
|
|
paid_at: z.date().nullable(),
|
||
|
|
paymentmethod: z.enum(PAYMENT_TYPES).nullable(),
|
||
|
|
paymentstatus: z.enum(PaymentStatusEnum).nullable(),
|
||
|
|
});
|
||
|
|
type FormValues = z.infer<typeof schema>;
|
||
|
|
|
||
|
|
z.config(z.locales.it());
|
||
|
|
|
||
|
|
const form = useZodForm(schema, {
|
||
|
|
defaultValues: {
|
||
|
|
...data,
|
||
|
|
paymentmethod: (data.paymentmethod as PaymentType) || null,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const utils = api.useUtils();
|
||
|
|
const { mutate: updateOrder } = api.servizio.updateOrder.useMutation({
|
||
|
|
onError: (error) => {
|
||
|
|
toast.error(`Errore durante la modifica: ${error.message}`);
|
||
|
|
},
|
||
|
|
onSuccess: async () => {
|
||
|
|
toast.success("Ordine aggiornato con successo!");
|
||
|
|
await utils.servizio.invalidate();
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const { mutate: remove } = api.servizio.removeOrder.useMutation({
|
||
|
|
onError: (error) => {
|
||
|
|
toast.error(`Errore durante la rimozione ordine: ${error.message}`);
|
||
|
|
},
|
||
|
|
onSuccess: async () => {
|
||
|
|
toast.success("Ordine rimosso con successo!");
|
||
|
|
await utils.servizio.invalidate();
|
||
|
|
close();
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const { watch } = form;
|
||
|
|
|
||
|
|
const scontoWch = watch(["sconto", "amount_cent"]);
|
||
|
|
function onSubmit(fields: FormValues) {
|
||
|
|
updateOrder({
|
||
|
|
ordineId: data.ordine_id,
|
||
|
|
data: fields,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Form {...form}>
|
||
|
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||
|
|
<CredenzaBody className="max-h-[80vh] w-full pb-5">
|
||
|
|
<div className="space-y-8 px-0.5">
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="packid"
|
||
|
|
render={({ field }) => {
|
||
|
|
const pack = prezziario.find(
|
||
|
|
(p) => p.idprezziario === field.value,
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<FormItem className="w-full">
|
||
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
||
|
|
<FormLabel htmlFor="select-pack">Servizio</FormLabel>
|
||
|
|
<FormMessage />
|
||
|
|
</div>
|
||
|
|
<FormControl>
|
||
|
|
<MultiSelect
|
||
|
|
defaultValue={
|
||
|
|
field.value
|
||
|
|
? {
|
||
|
|
label: pack?.nome_it || "",
|
||
|
|
value: field.value,
|
||
|
|
}
|
||
|
|
: undefined
|
||
|
|
}
|
||
|
|
elementId="select-pack"
|
||
|
|
elementName="packid"
|
||
|
|
isMulti={false}
|
||
|
|
onValueChange={(value) => {
|
||
|
|
const selected = zPrezziarioId.safeParse(
|
||
|
|
value.value,
|
||
|
|
);
|
||
|
|
if (selected.success) {
|
||
|
|
field.onChange(selected.data);
|
||
|
|
const selectedPrezzo = prezziario.find(
|
||
|
|
(p) => p.idprezziario === selected.data,
|
||
|
|
);
|
||
|
|
if (selectedPrezzo) {
|
||
|
|
form.setValue(
|
||
|
|
"amount_cent",
|
||
|
|
selectedPrezzo.prezzo_cent,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.error(
|
||
|
|
"Invalid packid selected",
|
||
|
|
value.value,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
options={prezziario.map((p) => ({
|
||
|
|
label: `${p.idprezziario} - ${p.nome_it} (${formatCurrency(p.prezzo_cent / 100)})`,
|
||
|
|
value: p.idprezziario,
|
||
|
|
}))}
|
||
|
|
placeholder="Seleziona..."
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="type"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
||
|
|
<FormLabel htmlFor="titolo">Tipologia</FormLabel>
|
||
|
|
<FormMessage />
|
||
|
|
</div>
|
||
|
|
<FormControl>
|
||
|
|
<Select
|
||
|
|
defaultValue={field.value || ""}
|
||
|
|
onValueChange={field.onChange}
|
||
|
|
>
|
||
|
|
<FormControl>
|
||
|
|
<SelectTrigger className="w-full">
|
||
|
|
<SelectValue placeholder="Seleziona tipologia" />
|
||
|
|
</SelectTrigger>
|
||
|
|
</FormControl>
|
||
|
|
<SelectContent id="select-color">
|
||
|
|
{Object.values(OrderTypeEnum).map((option) => (
|
||
|
|
<SelectItem key={option} value={option}>
|
||
|
|
{option}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="created_at"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem className="flex w-full flex-col">
|
||
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
||
|
|
<FormLabel htmlFor="created_at">Data Ordine</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="created_at"
|
||
|
|
variant={"outline"}
|
||
|
|
>
|
||
|
|
{field.value ? (
|
||
|
|
format(field.value, "PPP", {
|
||
|
|
locale: it,
|
||
|
|
})
|
||
|
|
) : (
|
||
|
|
<span>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={new Date()}
|
||
|
|
endMonth={new Date(2050, 12)}
|
||
|
|
locale={it}
|
||
|
|
mode="single"
|
||
|
|
onSelect={field.onChange}
|
||
|
|
selected={field.value || undefined}
|
||
|
|
/>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="isActive"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem className="w-full">
|
||
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
||
|
|
<FormLabel htmlFor="isActive">Pagato</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Switch
|
||
|
|
className="data-[state=checked]:bg-neutral-700"
|
||
|
|
defaultChecked={field.value}
|
||
|
|
id="isActive"
|
||
|
|
onCheckedChange={field.onChange}
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<FormDescription>
|
||
|
|
Imposta se il servizio è pagato
|
||
|
|
</FormDescription>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="sconto"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
||
|
|
<FormLabel htmlFor="sconto">Sconto</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Select
|
||
|
|
defaultValue={String(field.value)}
|
||
|
|
name="sconto"
|
||
|
|
onValueChange={(value) => {
|
||
|
|
field.onChange(Number.parseInt(value));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="w-45">
|
||
|
|
<SelectValue placeholder="Sconto" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{[
|
||
|
|
0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
|
||
|
|
65, 70, 75, 80, 85, 90, 95, 100,
|
||
|
|
].map((v) => {
|
||
|
|
return (
|
||
|
|
<SelectItem key={v} value={String(v)}>
|
||
|
|
{v}%
|
||
|
|
</SelectItem>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</div>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{scontoWch && scontoWch[0] !== 0 ? (
|
||
|
|
<span>
|
||
|
|
Prezzo scontato:{" "}
|
||
|
|
{formatCurrency(
|
||
|
|
((1 - scontoWch[0] / 100) * scontoWch[1]) / 100,
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<span>Prezzo: {formatCurrency(scontoWch[1] / 100)}</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</CredenzaBody>
|
||
|
|
|
||
|
|
<CredenzaFooter className="flex w-full sm:justify-between">
|
||
|
|
<Confirm
|
||
|
|
description="Sei sicuro di voler eliminare l'ordine?"
|
||
|
|
onConfirm={() => {
|
||
|
|
remove({ ordineId: data.ordine_id });
|
||
|
|
}}
|
||
|
|
title="Elimina ordine"
|
||
|
|
>
|
||
|
|
<Button aria-label="Elimina Ordine" variant="destructive">
|
||
|
|
<Trash2 className="size-6" />
|
||
|
|
Elimina Ordine
|
||
|
|
</Button>
|
||
|
|
</Confirm>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Button type="submit" variant="success">
|
||
|
|
Salva
|
||
|
|
</Button>
|
||
|
|
<CredenzaClose asChild>
|
||
|
|
<Button aria-label="Close Credenza" variant="outline">
|
||
|
|
Chiudi
|
||
|
|
</Button>
|
||
|
|
</CredenzaClose>
|
||
|
|
</div>
|
||
|
|
</CredenzaFooter>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|