business-obligations-ui 0.4.1 → 0.5.0

package/README.md

@@ -106,11 +106,12 @@ const [choices] = useProfileChoices(); // { entityType, naics, employeeCount, se
 
 ## Conditionally applicable obligations
 
-`ObligationsList` takes an optional `conditional` list and shows it in its own section after the others: items that are
+`ObligationsList` takes an optional `conditional` list and shows each of them inside the group of the level that requires it (city, county, state or federal), after the items
+that do apply, dimmed and with what would bring it in: items that are
 not in `items` now, but would be if a detail that was left blank turned out a certain way. Each is a `ConditionalItem`,
 `{ item, when: [{ field, values }] }`, and its card says what would bring it in ("Applies if number of employees: 1, 2,
 3 …"). The package does not compute them; the playground does, from `analyzeInputs` and `evaluate`
-(`conditionalItems` in `apps/web/src/lib/plan.ts`). The list's filters apply to the section too.
+(`conditionalItems` in `apps/web/src/lib/plan.ts`). The list's filters apply to them too. Groups run from the most local level to the widest: city, county, state, federal.
 
 ## Bundle size
 

package/dist/index.cjs

@@ -1227,7 +1227,7 @@ function describeWhen(m, { field, values }) {
 }
 
 // src/plan/filters.ts
-var JURISDICTIONS = ["federal", "state", "county", "city"];
+var JURISDICTIONS = ["city", "county", "state", "federal"];
 var NO_OBLIGATION_FILTERS = {
   jurisdiction: "all",
   category: "all",
@@ -1258,6 +1258,7 @@ function ObligationsListBody({ items, conditional = [], asOf, filters, onFilters
   const shownConditional = conditional.filter(({ item }) => itemMatches(item, filters));
   const titleById = new Map(items.map((item) => [item.id, item.title]));
   const count = (jurisdiction) => items.filter((item) => itemMatches(item, { ...filters, jurisdiction })).length;
+  const conditionalCount = (jurisdiction) => shownConditional.filter(({ item }) => item.jurisdiction === jurisdiction).length;
   const categoryCount = (category) => items.filter((item) => itemMatches(item, { ...filters, category })).length;
   const hasFilters = filters.jurisdiction !== "all" || filters.category !== "all" || filters.query !== "" || filters.trust !== "all";
   const clearFilters = () => onFilters({ ...NO_OBLIGATION_FILTERS });
@@ -1321,7 +1322,7 @@ function ObligationsListBody({ items, conditional = [], asOf, filters, onFilters
       {
         size: "sm",
         theme: filters.jurisdiction === key ? "accent" : void 0,
-        disabled: count(key) === 0 && key !== "all",
+        disabled: count(key) + conditionalCount(key) === 0 && key !== "all",
         onPress: () => onFilters({ ...filters, jurisdiction: key }),
         "aria-pressed": filters.jurisdiction === key,
         children: [
@@ -1332,34 +1333,37 @@ function ObligationsListBody({ items, conditional = [], asOf, filters, onFilters
       },
       key
     )) }),
+    shownConditional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.Text, { fontSize: "sm", color: "placeholder-color", children: m.conditionalNote }),
     filtered.length === 0 && shownConditional.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.Text, { color: "placeholder-color", children: m.noMatch }) : JURISDICTIONS.map((jurisdiction) => {
-      const group = filtered.filter((item) => item.jurisdiction === jurisdiction).sort((a, b) => (a.nextDue ?? "9999-12-31").localeCompare(b.nextDue ?? "9999-12-31"));
-      if (!group.length) return null;
+      const byDue = (a, b) => (a.nextDue ?? "9999-12-31").localeCompare(b.nextDue ?? "9999-12-31");
+      const group = filtered.filter((item) => item.jurisdiction === jurisdiction).sort(byDue);
+      const maybe = shownConditional.filter(({ item }) => item.jurisdiction === jurisdiction).sort((a, b) => byDue(a.item, b.item));
+      if (!group.length && !maybe.length) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tamagui8.YStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tamagui8.XStack, { gap: "2", alignItems: "center", paddingTop: "3", paddingBottom: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tamagui8.XStack, { gap: "2", alignItems: "center", paddingTop: "3", paddingBottom: "1", flexWrap: "wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.Text, { render: "h2", fontSize: "lg", fontWeight: "600", margin: 0, children: m.jurisdictions[jurisdiction] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Chip, { tone: "info", children: group.length })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Chip, { tone: "info", children: group.length }),
+          maybe.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Chip, { tone: "warn", outline: true, children: [
+            "+",
+            maybe.length,
+            " ",
+            m.conditionalHeading.toLowerCase()
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.YStack, { gap: "3", children: group.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ObligationCard, { item, asOf, titleOf: (id) => titleById.get(id) }, item.id)) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tamagui8.YStack, { gap: "3", children: [
+          group.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ObligationCard, { item, asOf, titleOf: (id) => titleById.get(id) }, item.id)),
+          maybe.map(({ item, when }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.YStack, { opacity: 0.8, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            ObligationCard,
+            {
+              item,
+              asOf,
+              titleOf: (id) => titleById.get(id),
+              note: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.XStack, { gap: "1.5", flexWrap: "wrap", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Chip, { tone: "warn", outline: true, children: m.appliesIf(when.map((condition) => describeWhen(m, condition)).join("; ")) }) })
+            }
+          ) }, item.id))
+        ] })
       ] }, jurisdiction);
-    }),
-    shownConditional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tamagui8.YStack, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tamagui8.XStack, { gap: "2", alignItems: "center", paddingTop: "3", paddingBottom: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.Text, { render: "h2", fontSize: "lg", fontWeight: "600", margin: 0, children: m.conditionalHeading }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Chip, { tone: "info", children: shownConditional.length })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.Text, { fontSize: "sm", color: "placeholder-color", paddingBottom: "2", children: m.conditionalNote }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.YStack, { gap: "3", children: shownConditional.map(({ item, when }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        ObligationCard,
-        {
-          item,
-          asOf,
-          titleOf: (id) => titleById.get(id),
-          note: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tamagui8.XStack, { gap: "1.5", flexWrap: "wrap", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Chip, { tone: "warn", outline: true, children: m.appliesIf(when.map((condition) => describeWhen(m, condition)).join("; ")) }) })
-        },
-        item.id
-      )) })
-    ] })
+    })
   ] });
 }