+
-
+
{props.memberTier && (
-
+
{props.memberTier.name}
)}
@@ -217,103 +233,140 @@ function SubscriberDate(props: { createdAt: string }) {
);
}
-// Persisted tier selections can reference tiers that were since deleted or
-// deactivated; only the ones still offered should filter (and count as active).
-const useSelectedTiers = (tiers: { id: string }[]) => {
- let { memberTiers } = useDashboardState();
- return memberTiers.filter((id) => tiers.some((t) => t.id === id));
+const useTierFilter = (tiers: Tier[]) => {
+ let { membersOnly, memberTiers } = useDashboardState();
+ let selected = memberTiers.filter((id) => tiers.some((t) => t.id === id));
+ let paidTiers = tiers.filter((t) => !t.is_free);
+ let selectedPaidTiers = selected.filter((id) =>
+ paidTiers.some((t) => t.id === id),
+ );
+ return {
+ membersOnly,
+ selected,
+ paidTiers,
+ selectedPaidTiers,
+ freeSelected: tiers.some((t) => t.is_free && selected.includes(t.id)),
+ tierNarrowed:
+ selectedPaidTiers.length > 0 &&
+ selectedPaidTiers.length < paidTiers.length,
+ };
};
const SubscriberStatusFilter = (props: {
membershipsEnabled: boolean;
- tiers: { id: string; name: string }[];
+ tiers: Tier[];
}) => {
- let { subscriberStatus, membersOnly, memberTiers } = useDashboardState();
+ let { subscriberStatus, memberTiers } = useDashboardState();
let setState = useSetDashboardState();
- let selectedTiers = useSelectedTiers(props.tiers);
+ let {
+ membersOnly,
+ selected,
+ paidTiers,
+ selectedPaidTiers,
+ freeSelected,
+ tierNarrowed,
+ } = useTierFilter(props.tiers);
+
let count =
Object.values(subscriberStatus).filter(Boolean).length +
- (membersOnly ? 1 : 0) +
- selectedTiers.length;
+ (freeSelected ? 1 : 0) +
+ (membersOnly ? (tierNarrowed ? selectedPaidTiers.length : 1) : 0);
+
+ const setMemberTiers = (ids: string[]) =>
+ setState({
+ memberTiers: ids,
+ // Paid stays on as long as any tier under it is, so unchecking the last
+ // child unchecks the parent.
+ membersOnly: paidTiers.some((t) => ids.includes(t.id)),
+ });
+
+ const statusCheckbox = (status: SubscriberStatus, label: string) => (
+ {
+ e.preventDefault();
+ setState({
+ subscriberStatus: {
+ ...subscriberStatus,
+ [status]: !subscriberStatus[status],
+ },
+ });
+ }}
+ >
+ {label}
+
+ );
+
+ const tierCheckbox = (tier: Tier, className?: string) => (
+ {
+ e.preventDefault();
+ let ids = selected.includes(tier.id)
+ ? memberTiers.filter((id) => id !== tier.id)
+ : [...memberTiers.filter((id) => id !== tier.id), tier.id];
+ if (tier.is_free) return setState({ memberTiers: ids });
+ setMemberTiers(ids);
+ }}
+ >
+ {tier.name}
+
+ );
return (
-
+
+
}
>
-
- setState({
- subscriberStatus: {
- ...subscriberStatus,
- subscribed: !!e.target.checked,
- },
- })
- }
- >
- Subscribed
-
+ {statusCheckbox("subscribed", "Subscribed")}
+ {statusCheckbox("unconfirmed", "Unconfirmed")}
+ {statusCheckbox("unsubscribed", "Unsubscribed")}
+
+ {props.membershipsEnabled && (
+ <>
+
-
- setState({
- subscriberStatus: {
- ...subscriberStatus,
- unconfirmed: !!e.target.checked,
- },
- })
- }
- >
- Unconfirmed
-
-
- setState({
- subscriberStatus: {
- ...subscriberStatus,
- unsubscribed: !!e.target.checked,
- },
- })
- }
- >
- Unsubscribed
-
-
-
setState({ membersOnly: !!e.target.checked })}
- >
- Members
-
- {props.membershipsEnabled &&
- props.tiers.map((tier) => (
-
+ {props.tiers
+ .filter((t) => t.is_free)
+ .map((tier) => tierCheckbox(tier))}
+
+ {
+ e.preventDefault();
+ let checked = !(membersOnly && !tierNarrowed);
+ let withoutPaid = memberTiers.filter(
+ (id) => !paidTiers.some((t) => t.id === id),
+ );
setState({
- memberTiers: e.target.checked
- ? [...memberTiers.filter((id) => id !== tier.id), tier.id]
- : memberTiers.filter((id) => id !== tier.id),
- })
- }
+ // Set directly rather than derived from the tiers below: a
+ // publication can have members with no paid tier left to check.
+ membersOnly: checked,
+ memberTiers: checked
+ ? [...withoutPaid, ...paidTiers.map((t) => t.id)]
+ : withoutPaid,
+ });
+ }}
>
- {tier.name}
-
- ))}
-
+ Paid Members
+
+ {props.tiers
+ .filter((t) => !t.is_free)
+ .map((tier) => tierCheckbox(tier, "pl-6!"))}
+
+ )}
+
);
};
diff --git a/app/(app)/(identity)/lish/[did]/[publication]/dashboard/subs/page.tsx b/app/(app)/(identity)/lish/[did]/[publication]/dashboard/subs/page.tsx
index 8631023a..b22c55fc 100644
--- a/app/(app)/(identity)/lish/[did]/[publication]/dashboard/subs/page.tsx
+++ b/app/(app)/(identity)/lish/[did]/[publication]/dashboard/subs/page.tsx
@@ -140,7 +140,7 @@ export default async function SubsPage(props: {
a.monthly_price_cents - b.monthly_price_cents ||
a.sort_order - b.sort_order,
)
- .map((t) => ({ id: t.id, name: t.name }));
+ .map((t) => ({ id: t.id, name: t.name, is_free: t.is_free }));
return (
) => void;
children: React.ReactNode;
className?: string;
small?: boolean;
}) {
+ let ref = useRef(null);
+ let indeterminate = !props.checked && !!props.indeterminate;
+ // Only settable on the DOM node, and it's what exposes the mixed state to
+ // assistive tech.
+ useEffect(() => {
+ if (ref.current) ref.current.indeterminate = indeterminate;
+ }, [indeterminate]);
+ let marked = props.checked || indeterminate;
return (
-
)}
diff --git a/components/Menu.tsx b/components/Menu.tsx
index 76a93602..fa6c2ca9 100644
--- a/components/Menu.tsx
+++ b/components/Menu.tsx
@@ -3,10 +3,12 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { theme } from "tailwind.config";
import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
import { PopoverArrow } from "./Icons/PopoverArrow";
+import { CheckboxChecked } from "./Icons/CheckboxChecked";
+import { CheckboxEmpty } from "./Icons/CheckboxEmpty";
+import { CheckboxIndeterminate } from "./Icons/CheckboxIndeterminate";
import { PopoverOpenContext } from "./Popover/PopoverContext";
import { useState } from "react";
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
-import { Drop } from "node_modules/@tiptap/core/dist/extensions";
export const Menu = (props: {
open?: boolean;
@@ -121,15 +123,38 @@ export const CheckboxMenuItem = (props: {
className?: string;
onSelect?: (e: Event) => void;
checked?: boolean;
+ // Renders as a Checkbox — a box in the margin and plain type — rather than
+ // the filled pill, for dense multi-select lists like filters.
+ compact?: boolean;
+ // A parent whose children are only partly checked. Selecting it reports
+ // unchecked, so callers select the whole group.
+ indeterminate?: boolean;
}) => {
+ let indeterminate = !props.checked && !!props.indeterminate;
+ let marked = props.checked || indeterminate;
+ let iconClassName = `shrink-0 mt-1 ${marked ? "text-accent-contrast" : "text-tertiary"}`;
return (
+ {props.compact &&
+ (indeterminate ? (
+
+ ) : props.checked ? (
+
+ ) : (
+
+ ))}
{props.children}
);