Only the search route was emitting data-faro-user-action-name attributes, so
the vehicle detail and category detail pages were dark in our Faro user-action
funnels even though they sit on the critical post-decode path.
Added attributes for:
- Vehicle page back button (`vehicle-back`)
- Category page back button (`category-back`)
- Category error retry button (`category-retry`)
- Breadcrumb root vehicle link (`breadcrumb-vehicle`)
- Breadcrumb intermediate category links (`breadcrumb-category`)
- View toggle buttons (`category-view-grid|tree|columns`) — emitted from the
shared component so any future consumer inherits the tagging.
No behavioral change; pure observability.
Phase 8/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- VehicleAttributes wrapped in <dl> (was emitting <dt>/<dd> with no list
parent). Both the rich vinfoBasic branch and the DB-fallback branch now
share one layout instead of diverging into span-based and dt/dd-based
trees — easier to style and screen-reader friendly.
- New explicit empty state ("Bu araç için ayrıntı bilgisi bulunamadı") when
both branches resolve to nothing. Previously rendered an empty grid.
- Loading skeleton now mirrors the actual page structure (header chip + logo
+ 2-line title, info card with 6 attribute slots, categories card with 8
rows). The previous three plain rectangles caused a layout jump on resolve.
- Attribute rows use small-caps muted labels and tabular-nums values for
scannable data (engine codes, mileages, years).
Phase 7/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Category page: the previous error UI was a single flat red block with no
recovery path — users had to refresh the browser. Now it uses the standard
alert pattern (heading + detail + action), surfaces the actual error message
when one is available, and offers a Tekrar dene button wired to refetch().
Search page: removed the dedicated "Tekrar Dene" button inside the error
banner. The main Şase Çöz submit button sits immediately above and remains
enabled after an error — having two near-identical CTAs stacked on top of
each other was just noise. The error banner is now informational only.
Also drops the now-unused handleRetry function and RotateCcw import in the
search route.
Phase 6/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two unrelated polish items in the VIN search page bundled into one commit
because they touch the same file.
1. Hero card removed. The entire form lived inside a generic
`rounded-2xl border bg-background p-6 sm:p-8` container on a page that had
no other content competing for attention — the card added no hierarchy,
only a frame. The header is also no longer centered: icon sits to the left
of a left-aligned h2 + subtitle, breaking the AI-default centered hero.
2. I/O/Q auto-correction toast is now debounced. Each keystroke that produced
a correction fired its own toast, so a user holding the I key or pasting
"IIO" stacked three toasts on top of each other. Corrections now collect
in a ref-backed Set and a single consolidated toast fires 400ms after the
last edit, with cleanup on unmount.
Phase 5/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Both the vehicle detail page and the category detail page shipped their own
copy of a three-button view-mode toggle (Grid/Tree/Columns). They diverged
subtly and shared the same accessibility gaps: 28px tap targets, only `title`
attributes for screen readers, no `aria-pressed`, no focus ring.
- New `CategoryViewToggle` (apps/web/src/components/categories/) renders a
proper `role="group"` segmented control with `aria-pressed`, `aria-label`
per option, 36px tap targets, and a focus-visible ring.
- Active state is conveyed by an elevated background pill rather than just a
hover-grey, so the selected mode is legible without color contrast guessing.
- Both pages collapse to a single line: `<CategoryViewToggle … />`.
Phase 4/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Addresses long-term fix from insight cmpifhxfs000lvze9cy6ne0tx: users in
deep category trees had no orientation cue beyond a single back button.
- Breadcrumb derived from the cached /categories/tree/<vehicleId> response.
When the cache is warm (user came from the vehicle page), the full ancestry
renders; otherwise it falls back gracefully to "Vehicle → Current".
- Vehicle label fetched via the same query key already used by the vehicle
page, so the request is deduped.
- Back button now prefers the breadcrumb parent (resolved synchronously from
cache) over `data.parentId` (which is async). Clicking back before the
category payload loads no longer dumps the user to the vehicle root.
- H1 placeholder during load swapped from a stale "Kategori Detayı" string
to an inline pulse — prevents the title from briefly displaying wrong text
before the real name resolves. Uses a span-based pulse (Skeleton is a div
and would be invalid HTML inside an h1).
Phase 3/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Addresses insight cmpifhxfs000lvze9cy6ne0tx (P1 ux_friction, rage click on
/dashboard/vehicles/<id>/categories/<id>).
Before: each row had two competing click targets — a 20px chevron button and a
separate text button — both calling the same expand handler. Row height was
~28px (py-1.5), well below the 44px mobile guideline. No active/press feedback
made it hard to tell whether a tap registered, triggering rage clicks.
After:
- Whole row is a single button (non-leaf) or Link (leaf). One hit area, no
ambiguity about what gets the click.
- min-h-[44px], gap-3, px-3 py-2 — meets mobile guideline with breathing room.
- transition-colors + hover + active:bg-accent/80 give immediate tap feedback.
- focus-visible ring for keyboard nav, aria-expanded for screen readers.
- Chevron becomes a decorative span that rotates 90deg on expand instead of
swapping icons (no extra button), preserving the loading spinner in place.
Phase 2/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Strings displayed to users were missing Turkish characters (ö, ç, ğ, ş, ı, ü).
Affects vehicle detail header/info card, category detail page, view-mode tooltips,
and the "category not found" empty state in the tree component.
Phase 1/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pixel ID 1904240520247944 (sase.tr) created on ad account
act_1227112768351770. Lazy-injected like PostHog so it stays off
when VITE_META_PIXEL_ID is unset. Tracks PageView on every route
change, CompleteRegistration on email/Google signup, and
InitiateCheckout on Stripe button click (value in TRY).
Coolify env: set VITE_META_PIXEL_ID=1904240520247944 before next
deploy so it gets baked into the Vite build.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Removes the EFT (havale) payment surface across API, web, i18n, and docs.
Card payment via Stripe is now the only checkout path.
API (apps/api/src):
- Delete payments/bank-accounts/ module (controller + service + module)
- payments.service: drop EFT methods (createEftPayment, uploadEftReceipt,
approveEft, rejectEft, getActiveBankInfo, getPendingEftPayments) and the
BankAccountsService dependency
- payments.controller: drop /payments/eft, /payments/eft/:id/{receipt,approve,reject},
/payments/bank-info, /payments/pending; keep /payments/me
- payments.module: drop BankAccountsModule import
- admin.service: drop pending EFT counter from getDashboardStats; drop
getPendingPayments (admin EFT approval list)
- admin.controller: drop /admin/payments/pending endpoint
- admin.service.spec: drop the getPendingPayments + pendingPayments assertions
Web (apps/web/src):
- Delete components/payment/bank-transfer-card.tsx
- Delete routes/dashboard/admin/payments.tsx (EFT approval page); regenerate
routeTree.gen.ts
- subscription/index.tsx: drop EFT tab from PaymentMethodSection, drop the
paymentMethod state + handleEftCompleted, simplify ConfirmationCard to the
Stripe-only path, drop unused imports (Tabs, BankTransferCard, Building2)
- billing.tsx: drop "eft" from method filter chips; keep methodLabels.eft and
the legacy receipt download so historical EFT records still display
- dashboard.tsx + admin/index.tsx: drop /dashboard/admin/payments from the
sidebar + admin quick-link grid; trim unused icon imports; KEYS_6 → KEYS_5
for the now-5-card admin stats skeleton
- messages/{tr,en}.json: strip every EFT-only key under payment.* (eftTransfer,
eftConfirmationDescription, eftPaid, eftStatus, bank.*, uploadReceipt* etc.)
Schema (apps/api/src/database/schema):
- bankAccounts table + payments.bankAccountId column are kept as-is: legacy
EFT payments remain visible on the billing page and the schema preserves
historical records.
Docs:
- README.md: "Stripe (kart) + EFT" → "Stripe (kart)"
- CLAUDE.md: stack table + PaymentsModule row + payments table note + route
list updated; admin EFT approval route removed
Verification:
- pnpm typecheck: green (api + web + shared + config + ui)
- pnpm lint: green
- pnpm test: 20 web tests pass, 173 api tests pass
PL24's bomOverviewlist widget (PR-code-filtered overview tables like
"Alternatöre genel bakış · Start-Stop modu bulunan araçlar için
[PR:7L6,7L8]") returns parts but no illustration — upstream genuinely
has no schema for these. Previously the 60% left panel rendered the
text "Sema goruntusu bulunamadi", which reads like a failure and
wastes most of the layout for what is actually a complete result.
When schemaPic is null, skip the schema panel entirely and let the
parts list take the full container width. The parts panel already
handles its own header/empty state, so no other adjustment needed.
useTranslation returns a fresh `t` each render, so including it in the
useEffect deps caused the effect to re-fire continuously, resetting the
drill-down stack immediately after handleSelect pushed a child level.
Result: clicking a parent category in grid view did nothing — no API
call, no UI change, no navigation. Reproduced via Playwright on
dev.sase.tr.
Drop `t` from the dep array (key is static; locale changes mid-session
are rare and acceptable to render stale until the next prop change).
A user who picked a plan + brands, clicked the checkout button to
create the pending subscription, then closed the tab without paying
came back to a frozen "Mevcut Plan · Bekliyor" card with no payment
button and no way to edit. Status was "pending", which my conditional
treated as an active subscription and routed away from the stepper.
Frontend
- hasActiveSub narrowed to active|cancelled only. Pending users now
see the stepper again.
- New effect pre-fills selectedPlanKey, selectedBrandIds,
billingPeriod from the pending row on first render and jumps
straight to the payment step.
- New PendingPaymentBanner at the top of the stepper with
"Odemeye devam et" (scrolls + sets step=payment) and "Vazgec"
(calls cancel-pending then resets selection).
Backend
- subscriptions.service.create() auto-expires existing pending
rows for the user before inserting a new one — abandoned checkouts
no longer accumulate and a fresh attempt with a different plan
doesn't 409.
- New PATCH /subscriptions/cancel-pending + service method for
the banner's explicit cancel action.
i18n: subscription.pendingBanner.* (tr/en).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Subscription/checkout flow rewritten end-to-end. The plan-card "Devam Et"
button silently wiped brand selection on re-click and the actual proceed
button lived offscreen — fixed by collapsing plan/brands/payment/confirm
into a single vertical stepper with one sticky CTA.
Backend
- Stripe Hosted Checkout (`/payments/stripe/checkout`) + webhook
(`/payments/stripe/webhook`, raw body) replacing the stubbed Iyzico
module. Webhook activates subscription on `checkout.session.completed`,
expires the pending subscription on cancel/expire so users can retry.
- New `bank_accounts` table — multiple rows, single `is_active` enforced
by a partial unique index. Admin CRUD under `/admin/bank-accounts`
with multipart QR upload to MinIO; atomic `/activate` swap in a
transaction; `GET /payments/bank-info` returns the active row.
- `payments` gains `stripe_session_id`, `stripe_payment_intent_id`,
`bank_account_id`. EFT flow now reads the active bank account at
payment time and stores the FK for reconciliation.
- Env: `IYZICO_*` removed, `STRIPE_*` added (validated by zod schema).
- `main.ts` `rawBody: true` for Stripe signature verification.
- Drizzle 0003 snapshot id collision fixed (VIEW-only migration shared
prevId with 0002, blocking new generates).
Frontend
- `/dashboard/subscription` rewritten as a 4-step vertical stepper with
step-aware sticky bottom CTA; plan re-selection is idempotent and
preserves brand state. `/dashboard/subscription/pay` deleted; Stripe
returns to the same page via `?stripe=success|cancelled` and the UI
polls `/subscriptions/me` until the webhook activates the row.
- New components: `bank-transfer-card.tsx` (DB-driven IBAN + Kolay Adres
+ uploaded QR image + receipt upload) and `stripe-checkout-button.tsx`.
- Active subscription view, trial onboarding/urgency banner, downgrade
and cancel dialogs preserved.
- TR/EN i18n: new `subscription.steps.*`, `subscription.stickyCta.*`,
`payment.stripe.*`, `payment.bank.*`; provider label updated.
PostHog: `method: "iyzico"` → `"stripe"`; new events `iban_copied`,
`kolay_adres_copied`, `qr_viewed`, `eft_initiated`,
`stripe_redirect_returned`.
Deploy runs `db:migrate` which applies 0004_hot_quicksilver
(additive: new table + nullable columns; safe to apply on prod).
Operator must add `STRIPE_SECRET_KEY`, `STRIPE_PUBLISHABLE_KEY`,
`STRIPE_WEBHOOK_SECRET` to env and create the first
`bank_accounts` row via the admin endpoint before the bank tab works.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
useEffect and useCallback were declared after three `return null` guards,
so when a user's subscription transitioned into the trial+≤7-days window
React saw more hooks than the previous render and crashed with #310.
Hoisted all hooks above the single guard return; render and dismiss
behavior unchanged.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
