Support row-level spend/merchant targets in referral rewards

components/Referral/ReferralFriendRow.tsx

@@ -148,6 +148,7 @@ interface StagePresentation {
 interface ReferralFriendRowProps {
   item: ReferralRewardListItem;
   index: number;
+  /** Program-level targets, for rows the API sends without their own bar. */
   spendTargetUsd: number;
   merchantTarget: number;
   /** Called when a countdown reaches zero, so the screen can re-fetch. */
@@ -157,10 +158,15 @@ interface ReferralFriendRowProps {
 export default function ReferralFriendRow({
   item,
   index,
-  spendTargetUsd,
-  merchantTarget,
+  spendTargetUsd: programSpendTargetUsd,
+  merchantTarget: programMerchantTarget,
   onPayoutDue,
 }: ReferralFriendRowProps) {
+  // The row's own bar when the API sends one: a friend who qualified before the
+  // target moved is measured against the bar they cleared, not today's.
+  const spendTargetUsd = item.spendTargetUsd ?? programSpendTargetUsd;
+  const merchantTarget = item.merchantTarget ?? programMerchantTarget;
+
   const countdown = useReferralCountdown(
     item.stage === ReferralFriendStage.REWARD_UNLOCKING ? item.payoutEtaAt : null,
   );

lib/types.ts

@@ -3034,6 +3034,15 @@ export interface ReferralRewardListItem {
   paidAt?: string;
   spendUsd: number;
   merchantCount: number;
+  /**
+   * The bar this row is measured against. For a friend who has qualified it is
+   * the bar they cleared, which can be lower than today's — the target moved
+   * from $75 to $150 while rewards were still in their payout delay, and
+   * "$80/$150 spent" next to "Qualified" reads as a mistake. Absent on backends
+   * that predate it, where the program-level target applies.
+   */
+  spendTargetUsd?: number;
+  merchantTarget?: number;
   hasActiveCard: boolean;
   rewardUsd: number;
   /**