feat: favorite items and notify when a favorite is sold (#34)

Customers can favorite and unfavorite items from the storefront, opt in to being told when a favorite is sold to someone else, and manage that preference from their account page.

The opt-in is a consent of its own rather than the existing marketing flag. Being told that a specific item you asked about has gone is a narrower thing than agreeing to marketing, and folding one into the other would leave marketing_consent_text no longer describing what was actually agreed to. It is recorded the same way as the marketing consent — flag, timestamp, and the exact wording shown — and accepting it does not set marketing_consent.

The prompt appears only after a customer has actually favorited something, so the reason for asking is concrete rather than an abstract marketing ask, and it says plainly that it is separate from marketing email. Declining keeps the favorite.

Notifications fire when an item reaches sold, either through checkout or an admin marking it sold, and never to the buyer — telling someone the item they just bought is unavailable reads as a bug. Reserved is deliberately not a trigger: reservations expire and get released, so a "gone" email would often be about an item still for sale. Disabled accounts are excluded, per #33.

completeCheckout now returns the sold item ids and the buyer so its three call sites can notify after COMMIT. Sending inside the transaction would email people about a sale that then rolled back, and would hold the transaction open for SMTP. Each message is sent independently so one bad address cannot stop the rest, and the sale has already succeeded regardless.

Favoriting while signed out opens the existing inline register/login modal, exactly as Add to Cart does, and completes the favorite on success.

Also fixes a latent bug in the same component: while the session was still resolving, `customer` is null for a signed-in visitor too, so clicking Add to Cart or the new heart in that window prompted them to sign in again. Both now ignore clicks until the session has resolved, and the control shows as loading meanwhile.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/ItemCard.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
-import { Card, Badge, Typography, Carousel, Button, message, Tag } from 'antd';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Card, Badge, Typography, Carousel, Button, message, Tag, Modal, Tooltip } from 'antd';
+import { LeftOutlined, RightOutlined, HeartOutlined, HeartFilled } from '@ant-design/icons';
 import type { CarouselRef } from 'antd/es/carousel';
 import { Item } from '../api';
 import MarkdownView from './MarkdownView';
@@ -8,6 +8,8 @@ import { addToCart } from '../cart/cartApi';
 import { useCart } from '../cart/CartContext';
 import { useCustomerAuth } from '../customer/CustomerAuthContext';
 import AuthPromptModal from '../customer/AuthPromptModal';
+import { useFavorites } from '../customer/FavoritesContext';
+import { addFavorite, removeFavorite, setFavoriteAlerts } from '../customer/favoritesApi';
 
 const { Text, Title } = Typography;
 
@@ -20,10 +22,16 @@ export default function ItemCard({ item, onChanged }: Props) {
   const carouselRef = useRef<CarouselRef>(null);
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [adding, setAdding] = useState(false);
-  const { customer } = useCustomerAuth();
+  const [favoriting, setFavoriting] = useState(false);
+  // Which action to run once the auth modal succeeds — the modal is shared by
+  // Add to Cart and the heart.
+  const [pendingAction, setPendingAction] = useState<'cart' | 'favorite'>('cart');
+  const { customer, loading: authLoading, refresh: refreshCustomer } = useCustomerAuth();
   const { itemIds, refresh: refreshCart } = useCart();
+  const { itemIds: favoriteIds, refresh: refreshFavorites } = useFavorites();
 
   const inMyCart = itemIds.has(item.id);
+  const isFavorite = favoriteIds.has(item.id);
 
   async function doAddToCart() {
     setAdding(true);
@@ -40,13 +48,71 @@ export default function ItemCard({ item, onChanged }: Props) {
   }
 
   function handleAddClick() {
+    // Until the session has resolved, `customer` is null for a signed-in
+    // visitor too, and prompting them to sign in again would be wrong.
+    if (authLoading) return;
     if (!customer) {
+      setPendingAction('cart');
       setAuthModalOpen(true);
       return;
     }
     doAddToCart();
   }
 
+  // Asked only once a customer has actually favorited something, so the reason
+  // for asking is concrete rather than an abstract marketing prompt. This is a
+  // consent of its own — accepting it does not sign anyone up for marketing.
+  function offerAlerts() {
+    Modal.confirm({
+      title: 'Want to know if this sells?',
+      content:
+        'Every piece is one of a kind, so a favorite can be bought by someone else at any time. ' +
+        'We can email you if that happens, so you are not left waiting on something that has gone. ' +
+        'This is only about items you favorite — it is separate from any marketing email.',
+      okText: 'Yes, email me',
+      cancelText: 'No thanks',
+      onOk: async () => {
+        try {
+          await setFavoriteAlerts(true);
+          refreshCustomer();
+          message.success('We will let you know');
+        } catch (err) {
+          message.error((err as Error).message);
+        }
+      }
+    });
+  }
+
+  async function doToggleFavorite() {
+    setFavoriting(true);
+    const wasFavorite = isFavorite;
+    try {
+      if (wasFavorite) {
+        await removeFavorite(item.id);
+      } else {
+        await addFavorite(item.id);
+      }
+      refreshFavorites();
+    } catch (err) {
+      message.error((err as Error).message);
+      return;
+    } finally {
+      setFavoriting(false);
+    }
+
+    if (!wasFavorite && customer && !customer.favorite_alerts) offerAlerts();
+  }
+
+  function handleFavoriteClick() {
+    if (authLoading) return;
+    if (!customer) {
+      setPendingAction('favorite');
+      setAuthModalOpen(true);
+      return;
+    }
+    doToggleFavorite();
+  }
+
   const hasMultiple = item.images.length > 1;
 
   const cover = item.images.length ? (
@@ -87,7 +153,20 @@ export default function ItemCard({ item, onChanged }: Props) {
 
   const card = (
     <Card hoverable cover={cover} className="item-card">
-      <Title level={5} style={{ marginBottom: 4 }}>{item.name}</Title>
+      <div className="item-card-title">
+        <Title level={5} style={{ marginBottom: 4 }}>{item.name}</Title>
+        <Tooltip title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}>
+          <Button
+            type="text"
+            shape="circle"
+            loading={favoriting || authLoading}
+            aria-pressed={isFavorite}
+            aria-label={isFavorite ? `Remove ${item.name} from favorites` : `Add ${item.name} to favorites`}
+            icon={isFavorite ? <HeartFilled style={{ color: '#c41d7f' }} /> : <HeartOutlined />}
+            onClick={handleFavoriteClick}
+          />
+        </Tooltip>
+      </div>
       {item.category_name && <Text type="secondary" className="item-category">{item.category_name}</Text>}
       <MarkdownView content={item.description} />
       {item.tags.length > 0 && (
@@ -102,7 +181,11 @@ export default function ItemCard({ item, onChanged }: Props) {
       <AuthPromptModal
         open={authModalOpen}
         onClose={() => setAuthModalOpen(false)}
-        onSuccess={() => { setAuthModalOpen(false); doAddToCart(); }}
+        onSuccess={() => {
+          setAuthModalOpen(false);
+          if (pendingAction === 'favorite') doToggleFavorite();
+          else doAddToCart();
+        }}
       />
     </Card>
   );