From ae219412a9f6a8c5df34e29b72b682c37074bcc0 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Sun, 28 Jun 2026 14:55:07 +0300
Subject: [PATCH 1/4] feat(giveback): add Causes management tab
New "Causes" tab to manage your backed causes: your picks sit up top as
compact rows, with a category-filterable discovery grid below. Add/remove
auto-saves via a new toggleAndSave on useGivebackCauseSelection, which
reads the freshest selection through a ref (no stale closure on rapid
toggles) and rolls back the optimistic change if the save fails.
- GivebackCauseCard gains a buttonToggle variant (corner + toggles, card
isn't a big tap target) for the discovery grid
- Shared GivebackTabHeading primitive for consistent tab headers
- GivebackFilterChip restyled as a bordered tag pill
- Tab nav now scrolls horizontally on narrow screens
The old 'why'/Campaign tab stays for now; it is removed in the final
restructure PR.
---
.../giveback/components/GivebackCauseCard.tsx | 174 ++++++-----
.../components/GivebackCausesPanel.tsx | 280 ++++++++++++++++++
.../components/GivebackFilterChip.tsx | 11 +-
.../giveback/components/GivebackPage.tsx | 4 +
.../components/GivebackTabHeading.tsx | 43 +++
.../giveback/components/GivebackTabNav.tsx | 8 +-
.../hooks/useGivebackCauseSelection.spec.tsx | 41 +++
.../hooks/useGivebackCauseSelection.ts | 33 +++
8 files changed, 521 insertions(+), 73 deletions(-)
create mode 100644 packages/shared/src/features/giveback/components/GivebackCausesPanel.tsx
create mode 100644 packages/shared/src/features/giveback/components/GivebackTabHeading.tsx
diff --git a/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx b/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx
index 73b265badc7..d26496f9ffe 100644
--- a/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx
+++ b/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx
@@ -8,9 +8,10 @@ import {
TypographyTag,
TypographyType,
} from '../../../components/typography/Typography';
-import { OpenLinkIcon, VIcon } from '../../../components/icons';
+import { OpenLinkIcon, PlusIcon, VIcon } from '../../../components/icons';
import { IconSize } from '../../../components/Icon';
import { CauseEmblem } from './CauseEmblem';
+import { anchorDefaultRel } from '../../../lib/strings';
import type { ContributionCause } from '../types';
interface GivebackCauseCardProps {
@@ -19,6 +20,10 @@ interface GivebackCauseCardProps {
index: number;
selected: boolean;
onToggle: (id: string) => void;
+ // When true, only the corner "+" button toggles selection (the card itself
+ // isn't a big toggle target). Used on the manage tab's "more causes" grid; the
+ // onboarding funnel leaves it false so the whole card is tappable.
+ buttonToggle?: boolean;
}
export const GivebackCauseCard = ({
@@ -26,81 +31,116 @@ export const GivebackCauseCard = ({
index,
selected,
onToggle,
-}: GivebackCauseCardProps): ReactElement => (
-
- {/* Full-card overlay drives the toggle so the "Learn more" link can live
- inside the card without nesting interactives. */}
-
-);
+ {cause.url && (
+ event.stopPropagation()}
+ className="group/learn relative z-1 inline-flex w-fit items-center gap-1 font-bold text-text-link underline-offset-2 typo-footnote hover:underline focus-visible:underline"
+ >
+ Learn more
+
+
+ )}
+
+ );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackCausesPanel.tsx b/packages/shared/src/features/giveback/components/GivebackCausesPanel.tsx
new file mode 100644
index 00000000000..ec4d8b40288
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackCausesPanel.tsx
@@ -0,0 +1,280 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+ Typography,
+ TypographyColor,
+ TypographyTag,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import {
+ MiniCloseIcon,
+ OpenLinkIcon,
+ PlusIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { anchorDefaultRel } from '../../../lib/strings';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent } from '../../../lib/log';
+import { useGivebackCauseSelection } from '../hooks/useGivebackCauseSelection';
+import type { ContributionCause } from '../types';
+import { GivebackFilterChip } from './GivebackFilterChip';
+import { GivebackCauseCard } from './GivebackCauseCard';
+import { GivebackTabHeading } from './GivebackTabHeading';
+import { CauseEmblem } from './CauseEmblem';
+
+const ALL_FILTER = 'all';
+
+interface CauseWithIndex {
+ cause: ContributionCause;
+ index: number;
+}
+
+// On the management tab each cause is a compact row (not the tall onboarding
+// card): emblem, name, an optional "learn more", and a select toggle on the
+// right. The toggles line up in a single right-hand column so the whole list
+// scans cleanly and stays short - the onboarding funnel keeps the rich cards.
+const CauseRow = ({
+ cause,
+ index,
+ selected,
+ onToggle,
+ onLearnMore,
+}: {
+ cause: ContributionCause;
+ index: number;
+ selected: boolean;
+ onToggle: (id: string) => void;
+ onLearnMore: (id: string) => void;
+}): ReactElement => (
+
+
+
+
+ {cause.title}
+
+ {cause.category && (
+
+ {cause.category}
+
+ )}
+
+ {cause.url && (
+ onLearnMore(cause.id)}
+ className="flex size-8 shrink-0 items-center justify-center rounded-10 text-text-tertiary transition-colors hover:bg-surface-hover hover:text-text-primary"
+ >
+
+
+ )}
+
+
+);
+
+interface GivebackCausesPanelProps {
+ // Scrolls the tab strip to the top when the filter changes, so the narrowed
+ // "more causes" list always starts in view.
+ onFilter?: () => void;
+}
+
+// Manage-your-causes tab: the ones you back sit up top, everything else is right
+// below ready to add. Adding/removing auto-saves.
+export const GivebackCausesPanel = ({
+ onFilter,
+}: GivebackCausesPanelProps): ReactElement => {
+ const { logEvent } = useLogContext();
+ const { causes, isLoading, selectedIds, toggleAndSave, selectedCount } =
+ useGivebackCauseSelection(true);
+ const [activeFilter, setActiveFilter] = useState(ALL_FILTER);
+
+ const selectFilter = (filter: string) => {
+ setActiveFilter(filter);
+ onFilter?.();
+ };
+
+ const categories = useMemo(
+ () =>
+ Array.from(
+ new Set(
+ causes
+ .map((cause) => cause.category)
+ .filter((category): category is string => Boolean(category)),
+ ),
+ ),
+ [causes],
+ );
+
+ const matchesFilter = (cause: { category?: string | null }) =>
+ activeFilter === ALL_FILTER || cause.category === activeFilter;
+
+ const indexed = useMemo(
+ () => causes.map((cause, index) => ({ cause, index })),
+ [causes],
+ );
+ // Your causes always show every pick, regardless of the filter; the filter
+ // only narrows the "more causes to explore" list below.
+ const selectedCauses = indexed.filter(({ cause }) =>
+ selectedIds.has(cause.id),
+ );
+ const otherCauses = indexed.filter(
+ ({ cause }) => !selectedIds.has(cause.id) && matchesFilter(cause),
+ );
+ // Unfiltered: keeps the filter strip visible even when the active category has
+ // no unselected causes, so the user can always switch back.
+ const hasOtherCauses = indexed.some(
+ ({ cause }) => !selectedIds.has(cause.id),
+ );
+
+ const onLearnMore = (causeId: string) =>
+ logEvent({ event_name: LogEvent.ClickGivebackCause, target_id: causeId });
+
+ // Auto-saved on every toggle, so each add/remove is also logged here.
+ const onToggle = (causeId: string) => {
+ toggleAndSave(causeId);
+ logEvent({
+ event_name: LogEvent.SaveGivebackCauses,
+ extra: JSON.stringify({ cause_id: causeId, origin: 'causes_tab' }),
+ });
+ };
+
+ if (isLoading) {
+ return (
+
+ ) : (
+
+
+ You haven't backed any causes yet
+
+
+ Pick one below and your next action starts funding it.
+
+
+ )}
+
+
+ {/* Filters sit just above the discovery grid they control (and below your
+ own causes), so the connection is obvious. */}
+ {hasOtherCauses && (
+
+
+ More causes to explore
+
+ {categories.length > 0 && (
+
+ selectFilter(ALL_FILTER)}
+ />
+ {categories.map((category) => (
+ selectFilter(category)}
+ />
+ ))}
+
+ )}
+ {otherCauses.length > 0 ? (
+ // Richer detail cards (like the funnel) so people have enough context
+ // to decide; only the "+" adds, so the card isn't a big toggle.
+