@kahitsan/ksui 0.47.0 → 0.47.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.47.0",
+  "version": "0.47.2",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/TransactionForm.payee-tin.test.tsx

@@ -2,7 +2,8 @@
 // and address, offers inputs when they are missing, and warns when withholding
 // is on but no TIN is known.
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { render, fireEvent, waitFor, screen } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
 import TransactionForm, { type TransactionFormProps } from "./TransactionForm";
 import { isValidTin } from "./payee-tin";
 
@@ -102,15 +103,19 @@ beforeEach(() => vi.unstubAllGlobals());
 afterEach(() => vi.unstubAllGlobals());
 
 describe("isValidTin", () => {
-  it("accepts 9 or 12 digits with or without dashes", () => {
+  it("accepts 9 digits with a 3 or 5 digit branch code, dashes optional", () => {
     expect(isValidTin("123456789")).toBe(true);
     expect(isValidTin("123-456-789")).toBe(true);
     expect(isValidTin("123-456-789-000")).toBe(true);
     expect(isValidTin("123456789000")).toBe(true);
+    expect(isValidTin("123-456-789-00043")).toBe(true);
+    expect(isValidTin("12345678900043")).toBe(true);
   });
   it("rejects other lengths and non-digits", () => {
     expect(isValidTin("12345678")).toBe(false);
     expect(isValidTin("1234567890")).toBe(false);
+    expect(isValidTin("1234567890001")).toBe(false);
+    expect(isValidTin("123456789000430")).toBe(false);
     expect(isValidTin("12a-456-789")).toBe(false);
   });
   it("treats blank as valid because the field is optional", () => {
@@ -221,4 +226,51 @@ describe("TransactionForm payee tax ID", () => {
     await Promise.resolve();
     expect(queryByTestId("form-payee-tin-input")).toBeNull();
   });
+
+  it("shows the newly picked payee's tax ID when switching payees", async () => {
+    const payees = [
+      { id: 1, name: "Alpha Mart", kind: "vendor", tin: "123-456-789-00043", address: "1 Main St" },
+      { id: 2, name: "Beta Shop", kind: "vendor", tin: null, address: null },
+    ];
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (url: string) => {
+        const one = /\/api\/payees\/(\d+)/.exec(String(url));
+        const body = one ? payees.find((p) => p.id === Number(one[1])) : { data: payees };
+        return new Response(JSON.stringify(body), { status: 200 });
+      }),
+    );
+    const [payee, setPayee] = createSignal("");
+    const [payeeId, setPayeeId] = createSignal<number | null>(null);
+    const { findByTestId, queryByTestId } = render(() => (
+      <TransactionForm
+        {...tinProps({
+          get payee() {
+            return payee();
+          },
+          setPayee,
+          get payeeId() {
+            return payeeId();
+          },
+          setPayeeId,
+        })}
+      />
+    ));
+    const pick = async (id: number) => {
+      fireEvent.click(await screen.findByTestId("form-payee-picker-trigger"));
+      fireEvent.input(await screen.findByTestId("form-payee-picker-input"), { target: { value: "a" } });
+      fireEvent.click(await screen.findByTestId(`form-payee-picker-result-${id}`));
+    };
+
+    await pick(1);
+    expect((await findByTestId("form-payee-tin-readonly")).textContent).toContain("123-456-789-00043");
+
+    await pick(2);
+    await findByTestId("form-payee-tin-input");
+    expect(queryByTestId("form-payee-tin-readonly")).toBeNull();
+
+    await pick(1);
+    expect((await findByTestId("form-payee-tin-readonly")).textContent).toContain("123-456-789-00043");
+    expect(queryByTestId("form-payee-tin-input")).toBeNull();
+  });
 });

package/src/components/composite/TransactionForm.tsx

@@ -7,7 +7,7 @@
 // advanced-fields toggle entirely, for a caller that locks `category` to one
 // value and never needs EWT/sharing (e.g. a "record my own expense" surface).
 
-import { createEffect, createSignal, Show, For } from "solid-js";
+import { batch, createEffect, createSignal, Show, For } from "solid-js";
 import X from "lucide-solid/icons/x";
 import Upload from "lucide-solid/icons/upload";
 import FileIcon from "lucide-solid/icons/file";
@@ -788,13 +788,16 @@ export default function TransactionForm(props: TransactionFormProps) {
                   icon={Store}
                   noun="payee"
                   placeholder={catConfig().payeePlaceholder!}
-                  onChange={(p) => {
-                    setSelectedPayee(p);
-                    props.setPayee(p ? p.name : "");
-                    props.setPayeeId(p ? p.id : null);
-                    props.setPayeeTin?.("");
-                    props.setPayeeAddress?.("");
-                  }}
+                  onChange={(p) =>
+                    // One batch so the sync effect never sees the new name with the old id.
+                    batch(() => {
+                      setSelectedPayee(p);
+                      props.setPayee(p ? p.name : "");
+                      props.setPayeeId(p ? p.id : null);
+                      props.setPayeeTin?.("");
+                      props.setPayeeAddress?.("");
+                    })
+                  }
                 />
               </FormField>
               <FormField label={props.category === "sale" ? "Invoice ID" : "Receipt / Ref #"}>
@@ -833,14 +836,14 @@ export default function TransactionForm(props: TransactionFormProps) {
                         value={props.payeeTin ?? ""}
                         onInput={(e) => props.setPayeeTin!(e.currentTarget.value)}
                         class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
-                        placeholder="000-000-000-000"
+                        placeholder="000-000-000-00000"
                       />
                       <Show when={!isValidTin(props.payeeTin ?? "")}>
                         <p
                           data-testid="form-payee-tin-error"
                           class="mt-1 text-[10px] text-[var(--ks-danger,#ef4444)]"
                         >
-                          A TIN has 9 digits, or 12 with the branch code.
+                          A TIN has 9 digits, plus a 3 or 5 digit branch code.
                         </p>
                       </Show>
                     </FormField>

package/src/components/composite/payee-tin.ts

@@ -1,14 +1,14 @@
 // Tax-ID helpers shared by the transaction form and its hosts, so both sides
 // apply the same rule before a TIN is saved.
 
-const TIN_PATTERN = /^\d{9}(\d{3})?$/;
+const TIN_PATTERN = /^\d{9}(\d{3}|\d{5})?$/;
 
 /** Trims the input and drops dashes and spaces: "123-456-789" -> "123456789". */
 export function normalizeTin(value: string): string {
   return value.replace(/[\s-]/g, "");
 }
 
-/** A TIN is 9 digits, or 12 with the branch code. Blank is valid (optional). */
+/** A TIN is 9 digits plus an optional 3 or 5 digit branch code. Blank is valid (optional). */
 export function isValidTin(value: string): boolean {
   const digits = normalizeTin(value);
   return digits === "" || TIN_PATTERN.test(digits);