@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/src/components/documents/create/document-add-item-form.tsx

@@ -1,7 +1,6 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 import { ChevronDown, ChevronUp, DollarSign, Minus, Percent, Plus, PlusIcon, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
-import type { Control, UseFormReturn } from "react-hook-form";
 import { useWatch } from "react-hook-form";
 
 import { ItemCombobox } from "@/ui/components/items/item-combobox";
@@ -18,12 +17,15 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/c
 import { Input } from "@/ui/components/ui/input";
 import { Textarea } from "@/ui/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { getEntityCountryCapabilities } from "@/ui/lib/country-capabilities";
+import { useEntities } from "@/ui/providers/entities-context";
 
 import DocumentAddItemTaxRateField from "./document-add-item-tax-rate-field";
 
 type DocumentAddItemFormProps = {
   index: number;
-  control: Control<any>;
+  control: any;
+  documentType?: "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
   entityId: string;
   currencyCode?: string;
   onRemove: () => void;
@@ -33,7 +35,7 @@ type DocumentAddItemFormProps = {
   showRemove: boolean;
   showMoveUp: boolean;
   showMoveDown: boolean;
-  form: UseFormReturn<any>;
+  form: any;
   t: (key: string) => string;
   /** When true, tax controls are disabled (e.g., for VIES reverse charge) */
   taxesDisabled?: boolean;
@@ -45,11 +47,13 @@ type DocumentAddItemFormProps = {
   initialIsGrossPrice?: boolean;
   /** Called when price mode changes - used to collect state at submit */
   onPriceModeChange?: (isGross: boolean) => void;
+  locale?: string;
 };
 
 export default function DocumentAddItemForm({
   index,
   control,
+  documentType,
   entityId,
   currencyCode: _currencyCode,
   onRemove,
@@ -66,12 +70,24 @@ export default function DocumentAddItemForm({
   maxTaxesPerItem = 1,
   initialIsGrossPrice = false,
   onPriceModeChange,
+  locale = "en",
 }: DocumentAddItemFormProps) {
+  const { activeEntity } = useEntities();
+  const countryCapabilities = getEntityCountryCapabilities(activeEntity);
   const itemType = useWatch({
     control,
     name: `items.${index}.type`,
   });
   const isSeparator = itemType === "separator";
+  const selectedSavedItemId = useWatch({
+    control,
+    name: `items.${index}.item_id`,
+  });
+  const itemClassification = useWatch({
+    control,
+    name: `items.${index}.classification`,
+  });
+  const lockPortugalSavedItemFields = countryCapabilities.isPortugal && !!selectedSavedItemId;
 
   const taxes = useWatch({
     control,
@@ -84,6 +100,12 @@ export default function DocumentAddItemForm({
     setIsGrossPrice(initialIsGrossPrice);
   }, [initialIsGrossPrice]);
 
+  useEffect(() => {
+    if (countryCapabilities.isPortugal && documentType === "advance_invoice" && !itemClassification) {
+      form.setValue(`items.${index}.classification`, "advance", { shouldDirty: true, shouldTouch: true });
+    }
+  }, [countryCapabilities.isPortugal, documentType, form, index, itemClassification]);
+
   const setPriceMode = (mode: string) => {
     const isGross = mode === "gross";
     setIsGrossPrice(isGross);
@@ -115,43 +137,68 @@ export default function DocumentAddItemForm({
     );
   };
 
+  const setInlineItemName = (nextName: string) => {
+    form.setValue(`items.${index}.name`, nextName, { shouldDirty: true, shouldTouch: true, shouldValidate: true });
+  };
+
   // Handle item selection from combobox
   const handleItemSelect = (item: Item | null, customName?: string) => {
+    const itemIdPath = `items.${index}.item_id`;
+    const itemNamePath = `items.${index}.name`;
+    const itemQuantityPath = `items.${index}.quantity`;
+    const itemPricePath = `items.${index}.price`;
+    const itemDescriptionPath = `items.${index}.description`;
+    const itemClassificationPath = `items.${index}.classification`;
+    const itemTaxesPath = `items.${index}.taxes`;
+    const rowValidationPaths = [itemNamePath, itemQuantityPath, itemPricePath, itemTaxesPath] as const;
     if (item) {
       // Selected a saved item - set item_id and prefill fields for visual feedback
-      form.setValue(`items.${index}.item_id`, item.id, { shouldDirty: true, shouldTouch: true });
-      form.setValue(`items.${index}.name`, item.name, { shouldDirty: true, shouldTouch: true });
+      form.setValue(itemIdPath, item.id, { shouldDirty: true, shouldTouch: true });
+      form.setValue(itemNamePath, item.name, { shouldDirty: true, shouldTouch: true, shouldValidate: true });
 
       // Prefill price (use gross_price if available, otherwise price)
       if (item.gross_price !== null && item.gross_price !== undefined) {
-        form.setValue(`items.${index}.price`, item.gross_price, { shouldDirty: true, shouldTouch: true });
+        form.setValue(itemPricePath, item.gross_price, { shouldDirty: true, shouldTouch: true, shouldValidate: true });
         setIsGrossPrice(true);
         onPriceModeChange?.(true);
       } else if (item.price !== null && item.price !== undefined) {
-        form.setValue(`items.${index}.price`, item.price, { shouldDirty: true, shouldTouch: true });
+        form.setValue(itemPricePath, item.price, { shouldDirty: true, shouldTouch: true, shouldValidate: true });
         setIsGrossPrice(false);
         onPriceModeChange?.(false);
       }
 
       // Prefill description
       if (item.description) {
-        form.setValue(`items.${index}.description`, item.description, { shouldDirty: true, shouldTouch: true });
+        form.setValue(itemDescriptionPath, item.description, { shouldDirty: true, shouldTouch: true });
+      }
+
+      if (item.classification) {
+        form.setValue(itemClassificationPath, item.classification, { shouldDirty: true, shouldTouch: true });
       }
 
       // Prefill taxes from item's tax_ids (or clear if item has no taxes)
       if (item.tax_ids && item.tax_ids.length > 0) {
         form.setValue(
-          `items.${index}.taxes`,
+          itemTaxesPath,
           item.tax_ids.map((tax_id) => ({ tax_id })),
           { shouldDirty: true, shouldTouch: true },
         );
       } else {
-        form.setValue(`items.${index}.taxes`, [], { shouldDirty: true, shouldTouch: true });
+        form.setValue(itemTaxesPath, [], { shouldDirty: true, shouldTouch: true });
+      }
+
+      form.clearErrors(rowValidationPaths as any);
+      if (form.formState.isSubmitted) {
+        void form.trigger();
       }
     } else if (customName) {
       // Custom name entered - clear item_id, just use the name
-      form.setValue(`items.${index}.item_id`, undefined, { shouldDirty: true, shouldTouch: true });
-      form.setValue(`items.${index}.name`, customName, { shouldDirty: true, shouldTouch: true });
+      form.setValue(itemIdPath, undefined, { shouldDirty: true, shouldTouch: true });
+      form.setValue(itemNamePath, customName, { shouldDirty: true, shouldTouch: true, shouldValidate: true });
+      form.clearErrors(itemNamePath);
+      if (form.formState.isSubmitted) {
+        void form.trigger();
+      }
     }
   };
 
@@ -168,7 +215,7 @@ export default function DocumentAddItemForm({
                 <FormItem>
                   <FormLabel className="text-muted-foreground text-xs">{t("Section header")}</FormLabel>
                   <FormControl>
-                    <Input placeholder={t("Section title...")} {...field} />
+                    <Input placeholder={t("Section title...")} {...field} value={field.value ?? ""} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -192,7 +239,7 @@ export default function DocumentAddItemForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Textarea placeholder={t("Description")} {...field} />
+                    <Textarea placeholder={t("Description")} {...field} value={field.value ?? ""} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -227,17 +274,23 @@ export default function DocumentAddItemForm({
           <FormField
             control={control}
             name={`items.${index}.name`}
-            render={({ field }) => (
+            render={({ field, fieldState }) => (
               <FormItem>
                 <FormControl>
                   <ItemCombobox
                     entityId={entityId}
-                    value={field.value}
+                    value={field.value ?? ""}
                     onSelect={handleItemSelect}
-                    onCommitInlineName={(nextName) => form.setValue(`items.${index}.name`, nextName)}
+                    onCommitInlineName={setInlineItemName}
+                    onInlineInputChange={setInlineItemName}
                     commitOnBlurMode={field.value ? "update-inline" : "create"}
-                    placeholder={t("Search or enter item name...")}
+                    placeholder="Search or enter item name..."
                     inputTestId={`document-item-input-${index}`}
+                    inputDataDemo={`marketing-demo-item-name-${index}`}
+                    t={t}
+                    locale={locale}
+                    disabled={lockPortugalSavedItemFields}
+                    ariaInvalid={!!fieldState.error}
                   />
                 </FormControl>
                 <FormMessage />
@@ -246,6 +299,40 @@ export default function DocumentAddItemForm({
           />
         </div>
 
+        {countryCapabilities.isPortugal && (
+          <div className="w-40">
+            <FormField
+              control={control}
+              name={`items.${index}.classification`}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-xs">{t("Classification")}</FormLabel>
+                  <FormControl>
+                    <select
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
+                      value={field.value ?? ""}
+                      onChange={(event) => field.onChange(event.target.value)}
+                      disabled={lockPortugalSavedItemFields}
+                    >
+                      <option value="" disabled>
+                        {t("Select classification")}
+                      </option>
+                      <option value="product" disabled={documentType === "advance_invoice"}>
+                        {t("Product")}
+                      </option>
+                      <option value="service" disabled={documentType === "advance_invoice"}>
+                        {t("Service")}
+                      </option>
+                      <option value="advance">{t("Advance")}</option>
+                    </select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        )}
+
         {showRemove && (
           <Button type="button" variant="ghost" size="icon" onClick={onRemove}>
             <Trash2 className="h-4 w-4" />
@@ -254,109 +341,59 @@ export default function DocumentAddItemForm({
       </div>
 
       {/* Middle row with unit, quantity, price, discount */}
-      <div className="grid w-full grid-cols-12 gap-4">
-        <FormField
-          control={control}
-          name={`items.${index}.quantity`}
-          render={({ field }) => (
-            <FormItem className="col-span-2">
-              <FormLabel>
-                {t("Quantity")} <span className="text-red-500">*</span>
-              </FormLabel>
-              <FormControl>
-                <Input type="number" {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={control}
-          name={`items.${index}.price`}
-          render={({ field }) => (
-            <FormItem className="col-span-3">
-              <FormLabel>
-                {isGrossPrice ? t("Gross price") : t("Price")} <span className="text-red-500">*</span>
-              </FormLabel>
-              <div className="flex">
+      <div className="pb-2">
+        <div className="grid grid-cols-2 gap-4 lg:grid-cols-12">
+          <FormField
+            control={control}
+            name={`items.${index}.quantity`}
+            render={({ field }) => (
+              <FormItem className="col-span-1 lg:col-span-2">
+                <FormLabel>
+                  {t("Quantity")} <span className="text-red-500">*</span>
+                </FormLabel>
                 <FormControl>
                   <Input
                     type="number"
-                    className="rounded-r-none"
+                    data-demo={
+                      index === 0
+                        ? "marketing-demo-item-quantity-0"
+                        : index === 1
+                          ? "marketing-demo-item-quantity-1"
+                          : undefined
+                    }
                     {...field}
                     value={field.value ?? ""}
                     onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
                   />
                 </FormControl>
-                <DropdownMenu>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <DropdownMenuTrigger asChild>
-                        <Button type="button" variant="outline" size="icon" className="rounded-l-none border-l-0">
-                          {isGrossPrice ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
-                        </Button>
-                      </DropdownMenuTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">
-                      {isGrossPrice ? t("Gross price (tax included)") : t("Net price (before tax)")}
-                    </TooltipContent>
-                  </Tooltip>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuRadioGroup value={isGrossPrice ? "gross" : "net"} onValueChange={setPriceMode}>
-                      <DropdownMenuRadioItem value="net">{t("Net price")}</DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="gross">{t("Gross price")}</DropdownMenuRadioItem>
-                    </DropdownMenuRadioGroup>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={control}
-          name={`items.${index}.unit`}
-          render={({ field }) => (
-            <FormItem className="col-span-2">
-              <FormLabel>{t("Unit")}</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={control}
-          name={`items.${index}.discounts`}
-          render={({ field }) => {
-            const discount = field.value?.[0] || { value: 0, type: "percent" };
-            const isPercent = discount.type !== "amount";
-
-            const setDiscount = (value: number | undefined, type: "percent" | "amount") => {
-              field.onChange(value !== undefined ? [{ value, type }] : []);
-            };
-
-            const _toggleType = () => {
-              setDiscount(discount.value, isPercent ? "amount" : "percent");
-            };
-
-            return (
-              <FormItem className="col-span-2">
-                <FormLabel>{t("Discount")}</FormLabel>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name={`items.${index}.price`}
+            render={({ field }) => (
+              <FormItem className="col-span-1 lg:col-span-3">
+                <FormLabel>
+                  {isGrossPrice ? t("Gross price") : t("Price")} <span className="text-red-500">*</span>
+                </FormLabel>
                 <div className="flex">
                   <FormControl>
                     <Input
                       type="number"
-                      placeholder="0"
                       className="rounded-r-none"
-                      value={discount.value || ""}
-                      onChange={(e) =>
-                        setDiscount(e.target.value ? Number(e.target.value) : undefined, discount.type || "percent")
+                      data-demo={
+                        index === 0
+                          ? "marketing-demo-item-price-0"
+                          : index === 1
+                            ? "marketing-demo-item-price-1"
+                            : undefined
                       }
+                      {...field}
+                      value={field.value ?? ""}
+                      onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
                     />
                   </FormControl>
                   <DropdownMenu>
@@ -364,63 +401,134 @@ export default function DocumentAddItemForm({
                       <TooltipTrigger asChild>
                         <DropdownMenuTrigger asChild>
                           <Button type="button" variant="outline" size="icon" className="rounded-l-none border-l-0">
-                            {isPercent ? <Percent className="h-4 w-4" /> : <DollarSign className="h-4 w-4" />}
+                            {isGrossPrice ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
                           </Button>
                         </DropdownMenuTrigger>
                       </TooltipTrigger>
                       <TooltipContent side="top">
-                        {isPercent ? t("Percentage discount") : t("Fixed amount discount")}
+                        {isGrossPrice ? t("Gross price (tax included)") : t("Net price (before tax)")}
                       </TooltipContent>
                     </Tooltip>
                     <DropdownMenuContent align="end">
-                      <DropdownMenuItem onClick={() => setDiscount(discount.value, "percent")}>
-                        <Percent className="mr-2 h-4 w-4" />
-                        {t("Percentage")}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setDiscount(discount.value, "amount")}>
-                        <DollarSign className="mr-2 h-4 w-4" />
-                        {t("Fixed amount")}
-                      </DropdownMenuItem>
+                      <DropdownMenuRadioGroup value={isGrossPrice ? "gross" : "net"} onValueChange={setPriceMode}>
+                        <DropdownMenuRadioItem value="net">{t("Net price")}</DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="gross">{t("Gross price")}</DropdownMenuRadioItem>
+                      </DropdownMenuRadioGroup>
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </div>
                 <FormMessage />
               </FormItem>
-            );
-          }}
-        />
-
-        <div className="col-span-3 space-y-2">
-          <FormLabel>{t("Tax")}</FormLabel>
-          {taxesDisabled ? (
-            <div className="rounded-md border border-muted-foreground/50 border-dashed bg-muted/50 p-2 text-muted-foreground text-sm">
-              {taxesDisabledMessage || t("Taxes disabled")}
-            </div>
-          ) : (
-            <>
-              {taxes?.map((_tax: any, taxIndex: number) => (
-                <DocumentAddItemTaxRateField
-                  // biome-ignore lint/suspicious/noArrayIndexKey: index is stable
-                  key={taxIndex}
-                  index={index}
-                  taxIndex={taxIndex}
-                  control={control}
-                  entityId={entityId}
-                  onRemove={() => removeTax(taxIndex)}
-                  onAddNewTax={onAddNewTax}
-                  showLabel={false}
-                  t={t}
-                />
-              ))}
-
-              {(!taxes || taxes.length < maxTaxesPerItem) && (
-                <Button type="button" variant="outline" size="sm" className="cursor-pointer" onClick={addTax}>
-                  <PlusIcon className="h-4 w-4" />
-                  {t("Add tax")}
-                </Button>
-              )}
-            </>
-          )}
+            )}
+          />
+
+          <FormField
+            control={control}
+            name={`items.${index}.unit`}
+            render={({ field }) => (
+              <FormItem className="col-span-1 lg:col-span-2">
+                <FormLabel>{t("Unit")}</FormLabel>
+                <FormControl>
+                  <Input {...field} value={field.value ?? ""} disabled={lockPortugalSavedItemFields} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name={`items.${index}.discounts`}
+            render={({ field }) => {
+              const discount = field.value?.[0] || { value: 0, type: "percent" };
+              const isPercent = discount.type !== "amount";
+
+              const setDiscount = (value: number | undefined, type: "percent" | "amount") => {
+                field.onChange(value !== undefined ? [{ value, type }] : []);
+              };
+
+              const _toggleType = () => {
+                setDiscount(discount.value, isPercent ? "amount" : "percent");
+              };
+
+              return (
+                <FormItem className="col-span-1 lg:col-span-2">
+                  <FormLabel>{t("Discount")}</FormLabel>
+                  <div className="flex">
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="0"
+                        className="rounded-r-none"
+                        value={discount.value || ""}
+                        onChange={(e) =>
+                          setDiscount(e.target.value ? Number(e.target.value) : undefined, discount.type || "percent")
+                        }
+                      />
+                    </FormControl>
+                    <DropdownMenu>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <DropdownMenuTrigger asChild>
+                            <Button type="button" variant="outline" size="icon" className="rounded-l-none border-l-0">
+                              {isPercent ? <Percent className="h-4 w-4" /> : <DollarSign className="h-4 w-4" />}
+                            </Button>
+                          </DropdownMenuTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent side="top">
+                          {isPercent ? t("Percentage discount") : t("Fixed amount discount")}
+                        </TooltipContent>
+                      </Tooltip>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => setDiscount(discount.value, "percent")}>
+                          <Percent className="mr-2 h-4 w-4" />
+                          {t("Percentage")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setDiscount(discount.value, "amount")}>
+                          <DollarSign className="mr-2 h-4 w-4" />
+                          {t("Fixed amount")}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          <div className="col-span-2 space-y-2 lg:col-span-3">
+            <FormLabel>{t("Tax")}</FormLabel>
+            {taxesDisabled ? (
+              <div className="rounded-md border border-muted-foreground/50 border-dashed bg-muted/50 p-2 text-muted-foreground text-sm">
+                {taxesDisabledMessage || t("Taxes disabled")}
+              </div>
+            ) : (
+              <>
+                {taxes?.map((_tax: any, taxIndex: number) => (
+                  <DocumentAddItemTaxRateField
+                    // biome-ignore lint/suspicious/noArrayIndexKey: index is stable
+                    key={taxIndex}
+                    index={index}
+                    taxIndex={taxIndex}
+                    control={control}
+                    entityId={entityId}
+                    onRemove={() => removeTax(taxIndex)}
+                    onAddNewTax={onAddNewTax}
+                    showLabel={false}
+                    t={t}
+                  />
+                ))}
+
+                {(!taxes || taxes.length < maxTaxesPerItem) && (
+                  <Button type="button" variant="outline" size="sm" className="cursor-pointer" onClick={addTax}>
+                    <PlusIcon className="h-4 w-4" />
+                    {t("Add tax")}
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
         </div>
       </div>
 
@@ -433,7 +541,12 @@ export default function DocumentAddItemForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Textarea placeholder={t("Description")} {...field} />
+                  <Textarea
+                    placeholder={t("Description")}
+                    {...field}
+                    value={field.value ?? ""}
+                    disabled={lockPortugalSavedItemFields}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>

package/src/components/documents/create/document-add-item-tax-rate-field.tsx

@@ -1,7 +1,6 @@
 import type { Tax } from "@spaceinvoices/js-sdk";
 import { Plus, Trash2 } from "lucide-react";
 import { useEffect } from "react";
-import type { Control } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import { Button } from "@/ui/components/ui/button";
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
@@ -36,7 +35,7 @@ function getCurrentRate(tax: Tax): number {
 type DocumentAddItemTaxRateFieldProps = {
   index: number;
   taxIndex: number;
-  control: Control<any>;
+  control: any;
   entityId: string;
   onRemove: () => void;
   onAddNewTax?: () => void;
@@ -54,8 +53,9 @@ export default function DocumentAddItemTaxRateField({
   t: translateFn,
   namespace,
   locale,
+  translationLocale,
 }: DocumentAddItemTaxRateFieldProps) {
-  const translate = createTranslation({ t: translateFn, namespace, locale, translations });
+  const translate = createTranslation({ t: translateFn, namespace, locale, translationLocale, translations });
   const { setValue } = useFormContext();
 
   // Fetch available taxes