feat(catalog): one-click report on empty/error catalog states — no form
Some checks failed
QA Gate (P0/P1) / Test affected app (pull_request) Has been cancelled

'Çalışmadı mı? Bildir' opened the Sentry feedback dialog; most users
bail at a form. Now a single click captures a catalog_issue_reported
PostHog event with the vehicle/category context (vin, vehicle_label,
category_name, source, page) and flips to 'Bildirildi — teşekkürler'.
The identified person already carries the reporter's email; the Süper
Panel lists these under /analytics/reported-categories. The automatic
Sentry degradation report (with session replay) still fires via
useReportCatalogDegradation — unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 16:00:23 +03:00
parent fd789574fd
commit c972a17670
3 changed files with 28 additions and 10 deletions

View File

@@ -1,13 +1,13 @@
import { useTranslation } from "@/lib/i18n";
import { capture } from "@/lib/posthog";
import {
type CatalogIssueContext,
type CatalogIssueKind,
openCatalogFeedback,
reportCatalogDegradation,
} from "@/lib/sentry";
import { Button } from "@sase/ui";
import { Flag } from "lucide-react";
import { useEffect } from "react";
import { Check, Flag } from "lucide-react";
import { useEffect, useState } from "react";
/**
* Fire-and-forget: when `active` becomes true, report the catalog degradation the
@@ -34,10 +34,12 @@ export function useReportCatalogDegradation(
}
/**
* "Çalışmadı mı? Bildir" — opens the Sentry feedback dialog pre-tagged with this
* vehicle/category. Shown on empty/error catalog states so a parts shop can
* report a missing/wrong catalog in one click (with the session replay attached)
* instead of emailing.
* "Çalışmadı mı? Bildir" — one-click report, no form. Captures a
* `catalog_issue_reported` PostHog event carrying the vehicle/category context
* (the identified person already carries the user's email), which the Süper
* Panel surfaces under /analytics/reported-categories. The Sentry degradation
* report with session replay still fires automatically via the hook above —
* this button is the explicit "a human cared enough to press it" signal.
*/
export function ReportCatalogIssueButton({
ctx,
@@ -47,17 +49,31 @@ export function ReportCatalogIssueButton({
className?: string;
}) {
const { t } = useTranslation();
const [reported, setReported] = useState(false);
return (
<Button
type="button"
variant="ghost"
size="sm"
className={className}
onClick={() => void openCatalogFeedback(ctx)}
disabled={reported}
onClick={() => {
if (reported) return;
capture("catalog_issue_reported", {
vehicle_id: ctx.vehicleId,
vehicle_label: ctx.vehicleLabel,
category_id: ctx.categoryId,
category_name: ctx.categoryName,
source: ctx.source,
vin: ctx.vin,
page: window.location.pathname + window.location.search,
});
setReported(true);
}}
data-faro-user-action-name="report-catalog-issue"
>
<Flag className="mr-1.5 h-4 w-4" />
{t("vehicle.reportIssue")}
{reported ? <Check className="mr-1.5 h-4 w-4" /> : <Flag className="mr-1.5 h-4 w-4" />}
{reported ? t("vehicle.reportIssueDone") : t("vehicle.reportIssue")}
</Button>
);
}

View File

@@ -743,6 +743,7 @@
"noCategoriesHint": "The vehicle was decoded but the catalog may not be ready yet. Reach out to support to expedite it.",
"drillHint": "Parts live inside the subcategories — open a category to drill down to its part lists.",
"reportIssue": "Not working? Report it",
"reportIssueDone": "Reported — thanks",
"noAttrs": "No detailed info available for this vehicle.",
"labelModel": "Model",
"labelYear": "Model year",

View File

@@ -743,6 +743,7 @@
"noCategoriesHint": "Araç decode edildi ama parça kataloğu henüz hazırlanmamış olabilir. Destek ekibimize bildirirseniz katalog hızlandırılır.",
"drillHint": "Parçalar alt kategorilerin içinde yer alır. Bir kategoriye girerek ilerleyin — her grup, içindeki parça listesine kadar açılır.",
"reportIssue": "Çalışmadı mı? Bildir",
"reportIssueDone": "Bildirildi — teşekkürler",
"noAttrs": "Bu araç için ayrıntı bilgisi bulunamadı.",
"labelModel": "Model",
"labelYear": "Model yılı",