feat: wallet Shop applet — tile grid + BUY-ITEM microbutton + Stripe.js wiring — Chunk 4 of [[project-wallet-shop-expansion]]. The shop applet (slug wallet-shop, seeded in Chunk 2) now renders the catalog as a horizontal grid of .shop-tile icons: tithe-1 ($1, fa-piggy-bank), tithe-5 ($4, fa-piggy-bank w. ×5 badge), band-1 ($20, fa-ring). Each tile hosts a hover-portaled tooltip carrying name + description + price + a .tt-microbutton-portal w. a .btn-primary BUY ITEM button — clicking opens #id_guard_portal w. "Buy {name} for ${price}?" prompt; confirming triggers Stripe.js confirmCardPayment then POSTs to /shop/confirm + reloads. Items where the user's owned-count has hit max_owned (eg. BAND, owned=1, cap=1) render w. .btn-disabled + × glyph + "Already owned" microtooltip text — visible-but-unbuyable per the locked decision. View context — wallet view + toggle_wallet_applets view both pass shop_items (decorated w. per-user .available via the new _shop_items_for(user) helper) + default_payment_method_id + stripe_publishable_key. SCSS — .wallet-shop (flex column wrapping .shop-grid flex row), .shop-tile (inline-flex tooltip target), .shop-badge (2rem circle, --quaUser glyph on --quiUser bg, top-right corner per spec), .tt-microbutton-portal (column-flex, BUY btn + 'Already owned' caption styling). JS in wallet-shop.js exposes a singleton WalletShop module (matching the project's Brief / SeaDeal / StageCard module pattern) w. a tested initWalletShop() method — uses event delegation on the shop root (so portal-relocated buy btns still hit the handler) + a DOM-keyed data-shop-wired flag (not a module-level boolean) so per-test fixture rebuilds re-wire cleanly. Wired into wallet.html after wallet.js. **TDD** — 5 Jasmine specs in WalletShopSpec.js: T1 click-on-enabled-BUY opens guard w. correct prompt; T2 click-on-disabled-BUY no-op; T3 onConfirm POSTs shop_item_slug to /shop/buy; T4 init idempotent (calling twice doesn't double-wire); T5 missing-root no-throw. **2 Jasmine traps caught**: (a) spyOn(window, 'fetch') collides if another spec already spied on fetch — switched to save+restore via per-test _origFetch capture; (b) T3 async pollution — sync assertion passed, afterEach restored window.Stripe=undefined, then _doBuy's async continuation hit Stripe(pubKey) and threw "Unhandled promise rejection". Fixed by T3-local fetch mock returning a never-resolving promise so the chain pauses at the first await. **3 new FTs** in test_dash_wallet.py: tiles + icons + ×5 badge + tooltip prose; BUY click opens guard portal + NVM dismisses; BAND-already-owned shows disabled BUY w. 'Already owned' microtext (reads via textContent since .tt is display: none). FT trap caught: TransactionTestCase wipes both migration-seeded Applets + ShopItems → setUp must re-seed both manually (mirrors test_shop_views.py's _seed_starting_items pattern). 1208 IT/UT + 9 wallet FTs + 5 Jasmine specs green

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

src/apps/dashboard/views.py

@@ -155,6 +155,18 @@ def toggle_applets(request):
         })
     return redirect("home")
 
+def _shop_items_for(user):
+    """Decorate the active ShopItem catalog w. per-user availability so the
+    template can render `.btn-disabled` + 'Already owned' microtooltip
+    for `max_owned`-capped items the user already holds. Items are returned
+    in `display_order` ASC (matches the seeded `tithe-1` < `tithe-5` < `band-1`)."""
+    items = []
+    for item in ShopItem.objects.filter(active=True).order_by("display_order", "slug"):
+        item.available = item.is_available_for(user)
+        items.append(item)
+    return items
+
+
 @login_required(login_url="/")
 @ensure_csrf_cookie
 def wallet(request):
@@ -162,12 +174,17 @@ def wallet(request):
         token_type=Token.FREE, expires_at__gt=timezone.now()
     ).order_by("expires_at"))
     tithe_tokens = list(request.user.tokens.filter(token_type=Token.TITHE))
+    shop_items = _shop_items_for(request.user)
+    default_pm = request.user.payment_methods.order_by("-pk").first()
     return render(request, "apps/dashboard/wallet.html", {
         "wallet": request.user.wallet,
         "pass_token": request.user.tokens.filter(token_type=Token.PASS).first() if request.user.is_staff else None,
         "band": request.user.tokens.filter(token_type=Token.BAND).first(),
         "coin": request.user.tokens.filter(token_type=Token.COIN).first(),
         "carte": request.user.tokens.filter(token_type=Token.CARTE).first(),
+        "shop_items": shop_items,
+        "default_payment_method_id": default_pm.stripe_pm_id if default_pm else "",
+        "stripe_publishable_key": settings.STRIPE_PUBLISHABLE_KEY,
         "free_tokens": free_tokens,
         "tithe_tokens": tithe_tokens,
         "free_count": len(free_tokens),
@@ -199,6 +216,7 @@ def toggle_wallet_applets(request):
     checked = request.POST.getlist("applets")
     apply_applet_toggle(request.user, "wallet", checked)
     if request.headers.get("HX-Request"):
+        default_pm = request.user.payment_methods.order_by("-pk").first()
         return render(request, "apps/wallet/_partials/_applets.html", {
             "applets": applet_context(request.user, "wallet"),
             "wallet": request.user.wallet,
@@ -206,6 +224,9 @@ def toggle_wallet_applets(request):
             "band": request.user.tokens.filter(token_type=Token.BAND).first(),
             "coin": request.user.tokens.filter(token_type=Token.COIN).first(),
             "carte": request.user.tokens.filter(token_type=Token.CARTE).first(),
+            "shop_items": _shop_items_for(request.user),
+            "default_payment_method_id": default_pm.stripe_pm_id if default_pm else "",
+            "stripe_publishable_key": settings.STRIPE_PUBLISHABLE_KEY,
             "free_tokens": list(request.user.tokens.filter(token_type=Token.FREE)),
             "tithe_tokens": list(request.user.tokens.filter(token_type=Token.TITHE)),
         })