feat(web): typed error states for AVM v2 valuation page (cherry-pick of b6a5a2c)
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 8s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m6s
Deploy / Build API Image (push) Failing after 26s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 13s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 43s
Security Scanning / Trivy Scan — Web Image (push) Failing after 40s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 45s
Security Scanning / Trivy Filesystem Scan (push) Failing after 36s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Security Gate (push) Failing after 1s
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 8s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m6s
Deploy / Build API Image (push) Failing after 26s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 13s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 43s
Security Scanning / Trivy Scan — Web Image (push) Failing after 40s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 45s
Security Scanning / Trivy Filesystem Scan (push) Failing after 36s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Security Gate (push) Failing after 1s
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
- Map API 429/402/503 errors to Vietnamese banners (rate-limit,
quota-exhausted, model-unavailable) via getValuationErrorMessage helper
in dashboard/valuation/page.tsx.
- Error banner now carries role="alert" + data-testid="valuation-error"
for a11y and Playwright test targeting.
- Add e2e/web/valuation.spec.ts covering happy-path render, rate-limit
banner, and PDF export button visibility.
Partial cherry-pick of TEC-2736 — skipped the sibling commit 4ee0129
(image upload progress + AVM v2 form fields) because its v2 schema
additions (distanceToHospitalKm, floodZoneRisk, hasElevator, ...) are
not yet modelled in master's valuation-api.ts Zod schema. Parking on
the task/tec-2725 branch for later.
Also fix 3 DI regressions from earlier cherry-picks: the branches were
authored before the mass type-only import cleanup, so they brought back
`type LoggerService` (analytics) and `type EventBus` (auth) on DI
constructor params. Removed the `type` modifier so emitDecoratorMetadata
sees runtime references.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -12,6 +12,7 @@ import { ValuationForm } from '@/components/valuation/valuation-form';
|
||||
import { ValuationHistory } from '@/components/valuation/valuation-history';
|
||||
import { ValuationResults } from '@/components/valuation/valuation-results';
|
||||
import { ValueDriversChart } from '@/components/valuation/value-drivers-chart';
|
||||
import { ApiError } from '@/lib/api-client';
|
||||
import { useAvmV2Flag } from '@/lib/hooks/use-avm-v2-flag';
|
||||
import {
|
||||
useValuationPredict,
|
||||
@@ -20,6 +21,38 @@ import {
|
||||
} from '@/lib/hooks/use-valuation';
|
||||
import type { ValuationRequest, ValuationResult } from '@/lib/valuation-api';
|
||||
|
||||
function getValuationErrorMessage(error: unknown): { title: string; detail: string } {
|
||||
if (error instanceof ApiError) {
|
||||
if (error.status === 429) {
|
||||
return {
|
||||
title: 'Quá nhiều yêu cầu',
|
||||
detail: 'Bạn đã gửi quá nhiều yêu cầu định giá. Vui lòng đợi một lát rồi thử lại.',
|
||||
};
|
||||
}
|
||||
if (error.status === 402 || /quota|subscription/i.test(error.message)) {
|
||||
return {
|
||||
title: 'Đã hết hạn mức',
|
||||
detail:
|
||||
'Gói đăng ký hiện tại đã hết lượt định giá AI. Hãy nâng cấp hoặc thử lại vào chu kỳ sau.',
|
||||
};
|
||||
}
|
||||
if (error.status === 503 || /model|unavailable/i.test(error.message)) {
|
||||
return {
|
||||
title: 'Dịch vụ AI tạm thời không khả dụng',
|
||||
detail: 'Mô hình định giá đang bận hoặc bảo trì. Vui lòng thử lại sau vài phút.',
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: 'Không thể định giá',
|
||||
detail: error.message || 'Đã xảy ra lỗi không xác định. Vui lòng thử lại sau.',
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: 'Không thể định giá',
|
||||
detail: 'Vui lòng kiểm tra kết nối mạng và thử lại.',
|
||||
};
|
||||
}
|
||||
|
||||
const ValuationHistoryChart = dynamic(
|
||||
() =>
|
||||
import('@/components/valuation/valuation-history-chart').then(
|
||||
@@ -131,11 +164,19 @@ export default function ValuationPage() {
|
||||
isLoading={predictMutation.isPending}
|
||||
/>
|
||||
|
||||
{predictMutation.isError && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
Không thể định giá. Vui lòng thử lại sau.
|
||||
</div>
|
||||
)}
|
||||
{predictMutation.isError && (() => {
|
||||
const { title, detail } = getValuationErrorMessage(predictMutation.error);
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-testid="valuation-error"
|
||||
className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive"
|
||||
>
|
||||
<p className="font-semibold">{title}</p>
|
||||
<p className="mt-1 text-destructive/90">{detail}</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{currentResult && (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user