@kahitsan/ksui 0.38.0 → 0.38.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.38.0",
+  "version": "0.38.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/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 {
@@ -112,10 +112,11 @@ describe("VoucherPicker dialog", () => {
     await waitFor(() => expect(getByTestId("voucher-picker-result-1")).toBeTruthy());
     expect(getByTestId("voucher-picker-popup").closest("dialog")).not.toBeNull();
 
-    // Staging a row must not reach the consumer yet.
+    // Staging a row must not reach the consumer yet; the footer no longer
+    // repeats the code (it's in the listing), so the confirm enabling is the signal.
     fireEvent.click(getByTestId("voucher-picker-result-1"));
     expect(onChange).not.toHaveBeenCalled();
-    expect(getByTestId("voucher-picker-draft-summary").textContent).toContain("SAVE20");
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(false);
 
     fireEvent.click(getByTestId("voucher-picker-confirm"));
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ id: 1, code: "SAVE20" }));
@@ -147,9 +148,10 @@ describe("VoucherPicker dialog", () => {
     await waitFor(() => expect(getByTestId("voucher-picker-result-1")).toBeTruthy());
 
     fireEvent.click(getByTestId("voucher-picker-result-1"));
-    expect(getByTestId("voucher-picker-draft-summary").textContent).toContain("SAVE20");
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(false);
 
     fireEvent.click(getByTestId("voucher-picker-result-1"));
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(true);
     expect(getByTestId("voucher-picker-draft-summary").textContent).toContain("No voucher selected");
   });
 
@@ -175,6 +177,68 @@ describe("VoucherPicker dialog", () => {
     expect(mark!.textContent?.toLowerCase()).toBe("partner");
   });
 
+  it("shows the voucher description in the row and the footer draft", 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"));
+    // The footer shows the description under the summary, beside the buttons.
+    expect(getByTestId("voucher-picker-draft-description").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";
@@ -183,6 +185,10 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
   const [total, setTotal] = createSignal(0);
   // Staged choice. `props.selected` only changes on Confirm.
   const [draft, setDraft] = createSignal<VoucherOption | null>(null);
+  // Footer description popup: clamped to two lines, "More" only when it overflows.
+  const [descOpen, setDescOpen] = createSignal(false);
+  const [descOverflowing, setDescOverflowing] = createSignal(false);
+  let descEl: HTMLSpanElement | undefined;
 
   // Signal, not a plain ref: the sentinel mounts only once the first page
   // reveals there are more, which is after the observer effect first runs.
@@ -368,10 +374,29 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
   });
 
   const metaLine = (v: VoucherOption): string =>
-    [formatVoucherDescription(v), formatExpiry(v.valid_until, today()), formatUsage(v)]
+    [formatExpiry(v.valid_until, today()), formatUsage(v)]
       .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;
+  });
+
+  // The footer clamps the description to two lines; offer "More" only when the
+  // text actually overflowed. Re-measured whenever the staged description changes.
+  createEffect(() => {
+    const notes = draftNotes();
+    const el = descEl;
+    if (!notes || !el) {
+      setDescOverflowing(false);
+      return;
+    }
+    setDescOverflowing(el.scrollHeight > el.clientHeight);
+  });
+
   const expiresSoon = (v: VoucherOption): boolean => {
     if (!v.valid_until) return false;
     const days = daysUntil(toDay(v.valid_until), today());
@@ -505,7 +530,12 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                             selected(),
                         }}
                       >
-                        <Ticket size={18} class="shrink-0 text-[var(--ks-success-fg,#34d399)]" aria-hidden="true" />
+                        <span class="flex flex-col items-center gap-1 shrink-0">
+                          <Ticket size={18} class="text-[var(--ks-success-fg,#34d399)]" aria-hidden="true" />
+                          <span class="text-[11px] leading-tight text-center text-[var(--ks-success-fg,#34d399)]">
+                            {formatVoucherDescription(v)}
+                          </span>
+                        </span>
                         <span class="flex-1 min-w-0">
                           <span class="block text-sm font-medium text-[var(--ks-fg,#ffffff)] truncate">
                             {highlightMatch(v.code, debouncedQuery())}
@@ -522,6 +552,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)}
@@ -548,7 +583,12 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                         class="w-full text-left px-3 py-3 mb-1 rounded-lg border border-transparent flex items-center gap-3 opacity-60 cursor-not-allowed"
                         aria-disabled="true"
                       >
-                        <Ticket size={18} class="shrink-0 text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
+                        <span class="flex flex-col items-center gap-1 shrink-0">
+                          <Ticket size={18} class="text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
+                          <span class="text-[11px] leading-tight text-center text-[var(--ks-fg-subtle,#71717a)]">
+                            {formatVoucherDescription(entry.voucher)}
+                          </span>
+                        </span>
                         <span class="flex-1 min-w-0">
                           <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">
                             {highlightMatch(entry.voucher.code, debouncedQuery())}
@@ -556,6 +596,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}
@@ -586,16 +631,42 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
             {/* Bled to the card edges so the rule spans the full width, matching
                 the header. */}
             <div class="-mx-6 -mb-6 mt-4 px-5 sm:px-6 py-3 border-t border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] flex items-center justify-between gap-3 shrink-0">
-              <span
-                data-testid="voucher-picker-draft-summary"
-                class="text-xs text-[var(--ks-fg-subtle,#71717a)] min-w-0 truncate"
-              >
-                <Show when={draft()} fallback="No voucher selected">
-                  <span class="text-[var(--ks-fg,#ffffff)]">{draft()!.code}</span>
-                  {" · "}
-                  {discountLabel(draft()!).replace("−", "")} off
+              <div class="min-w-0 flex flex-col gap-1">
+                <Show
+                  when={draft()}
+                  fallback={
+                    <span
+                      data-testid="voucher-picker-draft-summary"
+                      class="text-xs text-[var(--ks-fg-subtle,#71717a)]"
+                    >
+                      No voucher selected
+                    </span>
+                  }
+                >
+                  <Show when={draftNotes()}>
+                    <span class="flex flex-col items-start gap-0.5 min-w-0">
+                      <span
+                        ref={descEl}
+                        data-testid="voucher-picker-draft-description"
+                        class="min-w-0 text-xs text-[var(--ks-fg-muted,#a1a1aa)] whitespace-pre-line line-clamp-2"
+                      >
+                        {draftNotes()}
+                      </span>
+                      <Show when={descOverflowing()}>
+                        <button
+                          type="button"
+                          data-testid="voucher-picker-expand-description"
+                          onClick={() => setDescOpen(true)}
+                          class="text-xs leading-tight text-[var(--ks-primary,#c9a961)] hover:underline transition-colors cursor-pointer"
+                          aria-label="Show full description"
+                        >
+                          See more
+                        </button>
+                      </Show>
+                    </span>
+                  </Show>
                 </Show>
-              </span>
+              </div>
               <div class="flex items-center gap-2 shrink-0">
                 <Show when={props.selected && draft()}>
                   <button
@@ -633,6 +704,43 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
           </div>
         </Modal>
       </Show>
+
+      {/* Full-description popup: "More" in the footer only appears when the
+          clamped text overflowed, but the popup itself is reachable whenever a
+          staged description exists. */}
+      <Show when={descOpen() && draftNotes()}>
+        <Modal onClose={() => setDescOpen(false)} size="md" ariaLabel="Voucher description">
+          <div data-testid="voucher-picker-description-popup" class="flex flex-col gap-4">
+            <div class="flex items-center justify-between gap-3">
+              <h2 class="m-0 text-base font-semibold text-[var(--ks-fg,#ffffff)]">
+                Voucher description
+              </h2>
+              <button
+                type="button"
+                data-testid="voucher-picker-close-description"
+                onClick={() => setDescOpen(false)}
+                class="w-8 h-8 flex items-center justify-center rounded text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] hover:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] transition-colors cursor-pointer shrink-0"
+                aria-label="Close"
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <p class="m-0 text-sm text-[var(--ks-fg,#ffffff)] whitespace-pre-line">
+              {draftNotes()}
+            </p>
+            <div class="flex justify-end">
+              <button
+                type="button"
+                data-testid="voucher-picker-description-close"
+                onClick={() => setDescOpen(false)}
+                class="px-4 py-2 rounded-lg text-sm font-medium bg-[var(--ks-primary,#c9a961)] text-[var(--ks-fg-on-accent,#0a0a0a)] hover:opacity-90 transition-opacity cursor-pointer"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </Modal>
+      </Show>
     </>
   );
 }