@kahitsan/ksui 0.38.0 → 0.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.38.0",
+  "version": "0.38.1",
   "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/VoucherPicker.test.tsx

@@ -14,7 +14,7 @@ function mockPagedFetch(rows: VoucherOption[]) {
     const limit = Number(parsed.searchParams.get("limit") ?? "25");
     const search = (parsed.searchParams.get("search") ?? "").toLowerCase();
     const matched = search
-      ? rows.filter((r) => r.code.toLowerCase().includes(search))
+      ? rows.filter((r) => `${r.code} ${r.notes ?? ""}`.toLowerCase().includes(search))
       : rows;
     const start = (page - 1) * limit;
     return {
@@ -175,6 +175,67 @@ describe("VoucherPicker dialog", () => {
     expect(mark!.textContent?.toLowerCase()).toBe("partner");
   });
 
+  it("shows the voucher description in the row and the staged summary", async () => {
+    mockPagedFetch([
+      voucher({ id: 50, code: "PARTNER_ACES", notes: "BISCAST ACES outreach discount" }),
+    ]);
+    const { getByTestId } = render(() => (
+      <VoucherPicker selected={null} onChange={vi.fn()} subtotal={1000} packageIds={[]} />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+
+    await waitFor(() => expect(getByTestId("voucher-picker-result-50")).toBeTruthy());
+    expect(getByTestId("voucher-picker-result-50").textContent).toContain(
+      "BISCAST ACES outreach discount",
+    );
+
+    fireEvent.click(getByTestId("voucher-picker-result-50"));
+    expect(getByTestId("voucher-picker-draft-summary").textContent).toContain(
+      "BISCAST ACES outreach discount",
+    );
+  });
+
+  it("finds a voucher by its description and highlights the match in it", async () => {
+    const { calls } = mockPagedFetch([
+      voucher({ id: 51, code: "PARTNER_UAPGA", notes: "UAPGA Camarines Chapter discount" }),
+      voucher({ id: 52, code: "GENERIC" }),
+    ]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker selected={null} onChange={vi.fn()} subtotal={1000} packageIds={[]} />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-result-51")).toBeTruthy());
+
+    fireEvent.input(getByTestId("voucher-picker-search"), {
+      target: { value: "camarines" },
+    });
+
+    await waitFor(() => expect(calls.some((u) => u.includes("search=camarines"))).toBe(true));
+    await waitFor(() => expect(queryByTestId("voucher-picker-result-52")).toBeNull());
+
+    const row = getByTestId("voucher-picker-result-51");
+    const mark = row.querySelector("mark");
+    expect(mark).not.toBeNull();
+    expect(mark!.textContent?.toLowerCase()).toBe("camarines");
+  });
+
+  it("skips the description line for a blank description", async () => {
+    mockPagedFetch([
+      voucher({ id: 53, code: "PLAIN", notes: "   " }),
+      voucher({ id: 54, code: "PLAIN" }),
+    ]);
+    const { getByTestId } = render(() => (
+      <VoucherPicker selected={null} onChange={vi.fn()} subtotal={1000} packageIds={[]} />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+
+    await waitFor(() => expect(getByTestId("voucher-picker-result-53")).toBeTruthy());
+    // Identical rows — a whitespace-only description must render nothing extra.
+    expect(getByTestId("voucher-picker-result-53").textContent).toBe(
+      getByTestId("voucher-picker-result-54").textContent,
+    );
+  });
+
   it("shows when a voucher expires", async () => {
     const soon = new Date(Date.now() + 3 * 86400000).toISOString().slice(0, 10);
     mockPagedFetch([voucher({ id: 9, code: "ENDINGSOON", valid_until: soon })]);

package/src/components/composite/VoucherPicker.tsx

@@ -31,6 +31,8 @@ export interface VoucherOption {
   usage_count?: number | null;
   /** Total redemptions allowed; null/absent means unlimited. */
   usage_limit_total?: number | null;
+  /** Free-text description; absent on endpoints that don't expose it. */
+  notes?: string | null;
 }
 
 const DEFAULT_FETCH_URL = "/api/vouchers?status=active&limit=200";
@@ -372,6 +374,13 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
       .filter(Boolean)
       .join(" · ");
 
+  // Staged description, trimmed — the footer read it twice, and a signal call
+  // in JSX doesn't narrow across re-evaluations.
+  const draftNotes = createMemo(() => {
+    const n = draft()?.notes?.trim();
+    return n ? n : null;
+  });
+
   const expiresSoon = (v: VoucherOption): boolean => {
     if (!v.valid_until) return false;
     const days = daysUntil(toDay(v.valid_until), today());
@@ -522,6 +531,11 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                               {metaLine(v)}
                             </span>
                           </span>
+                          <Show when={v.notes && v.notes.trim()}>
+                            <span class="block text-xs text-[var(--ks-fg-subtle,#71717a)] truncate">
+                              {highlightMatch(v.notes!, debouncedQuery())}
+                            </span>
+                          </Show>
                         </span>
                         <span class="text-sm text-[var(--ks-success-fg,#34d399)] shrink-0 font-mono">
                           {discountLabel(v)}
@@ -556,6 +570,11 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                           <span class="block text-xs text-[var(--ks-fg-subtle,#71717a)] truncate">
                             {metaLine(entry.voucher)}
                           </span>
+                          <Show when={entry.voucher.notes && entry.voucher.notes.trim()}>
+                            <span class="block text-xs text-[var(--ks-fg-subtle,#71717a)] truncate">
+                              {highlightMatch(entry.voucher.notes!, debouncedQuery())}
+                            </span>
+                          </Show>
                         </span>
                         <span class="text-xs text-[var(--ks-warning-fg,#fbbf24)] shrink-0 text-right max-w-[45%] truncate">
                           {entry.reason}
@@ -592,6 +611,10 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
               >
                 <Show when={draft()} fallback="No voucher selected">
                   <span class="text-[var(--ks-fg,#ffffff)]">{draft()!.code}</span>
+                  <Show when={draftNotes()}>
+                    {" · "}
+                    <span class="text-[var(--ks-fg-muted,#a1a1aa)]">{draftNotes()}</span>
+                  </Show>
                   {" · "}
                   {discountLabel(draft()!).replace("−", "")} off
                 </Show>