feat: wallet Shop polish — microtooltip extraction, Shop-first ordering, DRY tooltip styling, writs rebalance, "no expiry" on all items. Visual-pass tweaks landing atop the 5-chunk Shop rollout (commits 8e476f5 → d28cf7b). **Microtooltip extraction**: .tt-microbutton-portal (Chunk 4's wrap-inside-.tt) replaced w. a sibling .tt-micro div on each .shop-tile. wallet.js's initWalletTooltips clones BOTH into separate portals on hover — .tt → #id_tooltip_portal (main card), .tt-micro → #id_mini_tooltip_portal (small italic pill at bottom-right of main, mirroring Game Kit's Equipped/Unequipped/In-Use mini portal). Hover persistence covers both portals + the source tile w. a 200ms grace timer cancelled by mouseenter on any of the 3 zones. Capped items (BAND-owned) render NO btn at all — just "Already owned" microtext (mirrors Game Kit's status-only "Equipped" pill rather than the disabled-× pattern that lived in Chunk 4). **Tooltip-pin on guard open**: WalletTooltips.pin() / .unpin() exposed on window; wallet-shop.js's BUY click calls pin() before showGuard() + both onConfirm / onDismiss callbacks call unpin() → the item tooltip stays visible behind the guard's "Buy {name} for ${price}?" prompt instead of orphaning. **Shop-first applet ordering**: new Applet.display_order field (default 100, lower = earlier; PK tie-break preserves legacy insertion-order for the existing 3 applets); seed migration sets wallet-shop.display_order=10 so Shop renders atop Balances/Tokens/Payment. applet_context() updated to .order_by("display_order", "pk"). New WalletAppletOrderTest (2 ITs) pins Shop-first DOM order + view-context list. **DRY tooltip styling**: shop tooltip now uses the same 4-slot .tt-title / .tt-description / .tt-shoptalk / .tt-expiry classes as the Tokens row. New ShopItem.shoptalk field for the italic flavor line (band-1 = "Unlimited free entry (BYOB)" split out of description; tithes blank). New ShopItem.tooltip_expiry() method returns "no expiry" — eternal-stock convention (all current items; seasonal listings could override later). **Writs rebalance**: locked 2026-05-22 — tithe-1 144→12 writs, tithe-5 750→60 writs. Description text updated in lockstep ("1 Tithe Token + 12 Writs" / "5 Tithe Tokens + 60 Writs"). **Badge tweak**: ×N badge shrunk 2rem → 1.5rem + nudged further off-tile (top: -0.7rem, right: -1rem) so most of the underlying icon stays visible. **SCSS**: .tt-micro hidden in source DOM (portal-only); #id_mini_tooltip_portal mostly mirrors gameboard's mini at _gameboard.scss:140 but allows BUY-btn label to wrap onto multiple lines (white-space: normal on .tt-buy-btn); .tt-already-owned styled w. --secUser italic at 0.85rem to match Game Kit pills. **Migrations** — 5 new: lyric/0010_repricing_tithe_writs (writs + description), lyric/0011_shopitem_shoptalk (schema), lyric/0012_seed_shop_shoptalk (band split), applets/0012_applet_display_order (schema), applets/0013_wallet_shop_display_order (Shop atop). All idempotent. **TDD** — 5 new ITs across test_shop_models.py (shoptalk default + per-item assertions, tooltip_expiry method, updated tithe writs values, WalletAppletOrderTest), 1 new FT (test_shop_buy_guard_portal_pins_item_tooltip — programmatically dispatches mouseenter/mouseleave to exercise the pin/unpin race), 3 new Jasmine specs (T6 pin-on-click, T7 unpin-on-confirm, T8 unpin-on-dismiss). Existing FT band-owned assertion switched to .tt-micro (no .tt-buy-btn present), Jasmine T2 rewritten to assert no btn renders. **3 traps caught** mid-build: (a) multi-line {# #} comment leaked into DOM again (cf [[feedback-django-comments-single-line-only]]) — pinned the trap; (b) spyOn(window, 'fetch') Jasmine double-spy collision (cf trapped previously); (c) async pollution where afterEach restores window.Stripe=undefined before _doBuy's continuation hits it — fixed by per-test never-resolving fetch mock. 1211 IT/UT + 9 wallet FTs green; Jasmine SpecRunner verified visually (FT hangs Selenium-side on spec count). Pipeline will sweep all FTs
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -10,6 +10,9 @@
|
||||
{% include "apps/wallet/_partials/_applets.html" %}
|
||||
</div>
|
||||
<div id="id_tooltip_portal" class="token-tooltip"></div>
|
||||
{# Microtooltip for the Shop applet's BUY-ITEM btn / 'Already owned' note. #}
|
||||
{# Mirrors gameboard.html's mini portal (Equipped/Unequipped/In-Use). #}
|
||||
<div id="id_mini_tooltip_portal" class="token-tooltip token-tooltip--mini"></div>
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<script src="{% static "apps/dashboard/wallet.js" %}"></script>
|
||||
<script src="{% static "apps/dashboard/wallet-shop.js" %}"></script>
|
||||
|
||||
@@ -20,26 +20,39 @@
|
||||
<span class="shop-badge">{{ item.badge_text }}</span>
|
||||
{% endif %}
|
||||
<div class="tt">
|
||||
{# DRY-reuses the Tokens row's 4-slot tooltip pattern — same #}
|
||||
{# `.tt-title/.tt-description/.tt-shoptalk/.tt-expiry` SCSS #}
|
||||
{# classes so shop + token tooltips render as the same widget.#}
|
||||
<h4 class="tt-title">{{ item.name }}</h4>
|
||||
<p class="tt-description">{{ item.description }}</p>
|
||||
{% if item.shoptalk %}
|
||||
<p class="tt-shoptalk"><em>{{ item.shoptalk }}</em></p>
|
||||
{% endif %}
|
||||
<p class="tt-price">{{ item.price_display }}</p>
|
||||
<div class="tt-microbutton-portal">
|
||||
{% if item.available %}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary tt-buy-btn"
|
||||
data-shop-item-slug="{{ item.slug }}"
|
||||
>BUY ITEM</button>
|
||||
{% else %}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary tt-buy-btn btn-disabled"
|
||||
data-shop-item-slug="{{ item.slug }}"
|
||||
aria-disabled="true"
|
||||
>×</button>
|
||||
<p class="tt-already-owned"><em>Already owned</em></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="tt-expiry">{{ item.tooltip_expiry }}</p>
|
||||
</div>
|
||||
{% comment %}
|
||||
Sibling-of-.tt microtooltip — mirrors Game Kit's
|
||||
Equipped/Unequipped/In-Use mini portal pattern. wallet.js's
|
||||
tooltip handler clones this into #id_mini_tooltip_portal on
|
||||
hover; staying separate keeps the BUY-ITEM btn visually
|
||||
distinct from the main name+price card.
|
||||
{% endcomment %}
|
||||
<div class="tt-micro">
|
||||
{% if item.available %}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary tt-buy-btn"
|
||||
data-shop-item-slug="{{ item.slug }}"
|
||||
data-item-name="{{ item.name }}"
|
||||
data-price-cents="{{ item.price_cents }}"
|
||||
>BUY ITEM</button>
|
||||
{% else %}
|
||||
{# Capped item — no BUY btn at all (parity w. Game Kit's #}
|
||||
{# 'In-Use: X' / 'Equipped' microtext pattern, which never #}
|
||||
{# pairs status text w. a disabled action btn). #}
|
||||
<span class="tt-already-owned">Already owned</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user