feat: update Counter component to conditionally apply disabled styles and enhance FormServizio with improved disabled state handling

apps/infoalloggi/src/components/counter.tsx

@@ -1,5 +1,6 @@
 import { Minus, Plus } from "lucide-react";
 import Input from "~/components/ui/input";
+import { cn } from "~/lib/utils";
 export const Counter = ({
 	value,
 	setValue,
@@ -26,7 +27,10 @@ export const Counter = ({
 
 			<div className="flex items-center rounded-md border px-1">
 				<button
-					className="flex size-10 cursor-pointer items-center justify-center leading-10 transition hover:opacity-75 disabled:opacity-50"
+					className={cn(
+						"flex size-10 cursor-pointer items-center justify-center leading-10 transition hover:opacity-75 disabled:opacity-50",
+						disabled && "cursor-default",
+					)}
 					disabled={disabled}
 					onClick={() => handleChange(-1)}
 					type="button"
@@ -50,7 +54,10 @@ export const Counter = ({
 				/>
 
 				<button
-					className="flex size-10 cursor-pointer items-center justify-center leading-10 transition hover:opacity-75 disabled:opacity-50"
+					className={cn(
+						"flex size-10 cursor-pointer items-center justify-center leading-10 transition hover:opacity-75 disabled:opacity-50",
+						disabled && "cursor-default",
+					)}
 					disabled={disabled}
 					onClick={() => handleChange(1)}
 					type="button"

apps/infoalloggi/src/components/servizio/servizio_actions.tsx

@@ -1,4 +1,4 @@
-import { add, addBusinessDays, isBefore } from "date-fns";
+import { add, isBefore } from "date-fns";
 import {
 	Bug,
 	ChevronDown,
@@ -116,7 +116,7 @@ const UserActions = () => {
 	if (isAdmin || canUserEdit) {
 		return (
 			<>
-				<EditParametri />
+				 <EditParametri /> 
 				<InterruzioneServizio />
 			</>
 		);
@@ -699,6 +699,7 @@ const EditParametri = () => {
 	);
 };
 
+
 const EditServizioAdmin = () => {
 	const { servizioId, userId, servizio } = useServizio();
 	const [open, setOpen] = useState(false);

apps/infoalloggi/src/forms/FormServizio.tsx

@@ -22,7 +22,6 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "~/components/ui/popover";
-import { Separator } from "~/components/ui/separator";
 import { Slider } from "~/components/ui/slider";
 import { Switch } from "~/components/ui/switch";
 import { cn } from "~/lib/utils";
@@ -202,6 +201,7 @@ export const FormServizio = ({
 							<FormControl>
 								<Slider
 									defaultValue={[field.value]}
+									disabled={isLimited}
 									id="budgetslider"
 									max={2000}
 									min={0}
@@ -212,7 +212,9 @@ export const FormServizio = ({
 									value={[form.getValues("budget")]}
 								/>
 							</FormControl>
-							<FormDescription>{t.parametri.budget_desc}</FormDescription>
+							{!isLimited && (
+								<FormDescription>{t.parametri.budget_desc}</FormDescription>
+							)}
 						</FormItem>
 					)}
 				/>
@@ -245,6 +247,7 @@ export const FormServizio = ({
 													}
 												: undefined
 										}
+										disabled={isLimited}
 										elementId="select-mesi"
 										elementName="entro_mese"
 										isMulti={false}
@@ -297,7 +300,10 @@ export const FormServizio = ({
 													}
 												: undefined
 										}
-										disabled={tipologia !== TipologiaPosizioneEnum.Transitorio}
+										disabled={
+											isLimited ||
+											tipologia !== TipologiaPosizioneEnum.Transitorio
+										}
 										elementId="permanenza"
 										elementName="permanenza"
 										isMulti={false}
@@ -313,11 +319,12 @@ export const FormServizio = ({
 										placeholder="Seleziona..."
 									/>
 								</FormControl>
-								{tipologia === TipologiaPosizioneEnum.Transitorio && (
-									<FormDescription>
-										{t.parametri.permanenza_desc}
-									</FormDescription>
-								)}
+								{tipologia === TipologiaPosizioneEnum.Transitorio &&
+									!isLimited && (
+										<FormDescription>
+											{t.parametri.permanenza_desc}
+										</FormDescription>
+									)}
 							</FormItem>
 						)}
 					/>
@@ -339,6 +346,7 @@ export const FormServizio = ({
 								</div>
 								<FormControl>
 									<Counter
+										disabled={isLimited}
 										name="n_adulti"
 										onlyPositive
 										setValue={(value) => field.onChange(Number(value))}
@@ -364,6 +372,7 @@ export const FormServizio = ({
 								</div>
 								<FormControl>
 									<Counter
+										disabled={isLimited}
 										name="n_minori"
 										onlyPositive
 										setValue={(value) => field.onChange(Number(value))}
@@ -387,6 +396,7 @@ export const FormServizio = ({
 									<Switch
 										className="data-[state=checked]:bg-neutral-700"
 										defaultChecked={field.value}
+										disabled={isLimited}
 										id="arredato"
 										onCheckedChange={field.onChange}
 									/>
@@ -546,6 +556,7 @@ export const FormServizio = ({
 
 								<MultiSelect
 									defaultValue={undefined}
+									disabled={isLimited}
 									elementId="select-reddito"
 									elementName="reddito"
 									isMulti={false}
@@ -566,7 +577,9 @@ export const FormServizio = ({
 					<Label htmlFor="altrePrefDialogButton">
 						{t.parametri.altriparams_label}
 					</Label>
-					<FormDescription>{t.parametri.altriparams_desc}</FormDescription>
+					{!isLimited && (
+						<FormDescription>{t.parametri.altriparams_desc}</FormDescription>
+					)}
 					<div className="mt-2 flex flex-wrap gap-2">
 						{altrePrefMapping.map((pair) => {
 							if (pair) {
@@ -579,8 +592,12 @@ export const FormServizio = ({
 											<FormItem>
 												<FormControl>
 													<Badge
-														className={cn("cursor-pointer text-sm")}
+														className={cn(
+															"text-sm",
+															isLimited ? "cursor-default" : "cursor-pointer",
+														)}
 														onClick={() => {
+															if (isLimited) return;
 															field.onChange(!field.value);
 														}}
 														variant={field.value ? "default" : "secondary"}
@@ -596,8 +613,9 @@ export const FormServizio = ({
 						})}
 					</div>
 				</div>
+				{/*
 				<Separator />
-				{!isLimited && (
+				 {!isLimited && (
 					<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
 						<FormField
 							control={form.control}
@@ -677,9 +695,8 @@ export const FormServizio = ({
 							)}
 						/>
 					</div>
-				)}
-
-				<Button type="submit">Salva</Button>
+				)} */}
+				{!isLimited && <Button type="submit">Salva</Button>}
 			</form>
 		</Form>
 	);

apps/infoalloggi/src/server/services/servizio.service.ts

@@ -40,7 +40,7 @@ export const addServizio = async (data: NewServizio) => {
 					type: OrderTypeEnum.Acconto,
 					amount_cent: acconto.prezzo_cent,
 					packid: acconto.idprezziario,
-					isActive: data.skipPayment || false,
+					isActive: false,
 				})
 				.execute();
 			return servizio;