fix(web): include ward in address display across card views

- property-card.tsx: add ward between address and district in both
  card (line 189) and list (line 95) layouts
- transfer-listing-card.tsx: conditionally prepend ward to
  district/city when ward is non-null
- property-card.spec.tsx: update address test to assert ward is shown,
  add list-layout ward regression test (21/21 pass)

Standard format: {address}, {ward}, {district}, {city}
Compact (project-card, industrial-listing-card): district/city only —
intentional; ProjectSummary has no ward field.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-24 11:57:09 +07:00
parent d7c5b1ca2c
commit fbe28102a1
11 changed files with 118 additions and 17 deletions

View File

@@ -106,9 +106,15 @@ describe('PropertyCard', () => {
expect(screen.getByText(/3\.5 tỷ/)).toBeInTheDocument();
});
it('renders property address', () => {
it('renders property address including ward', () => {
render(<PropertyCard listing={makeListing()} />);
expect(screen.getByText(/208 Nguyễn Hữu Cảnh/)).toBeInTheDocument();
expect(screen.getByText(/Phường 22/)).toBeInTheDocument();
});
it('renders ward in list layout', () => {
render(<PropertyCard listing={makeListing()} layout="list" />);
expect(screen.getByText(/Phường 22/)).toBeInTheDocument();
});
it('renders transaction type badge for SALE', () => {

View File

@@ -92,7 +92,7 @@ export function PropertyCard({ listing, compact, layout = 'card' }: PropertyCard
{listing.property.title}
</h3>
<p className="mt-0.5 line-clamp-1 text-sm text-muted-foreground">
{listing.property.address}, {listing.property.district}, {listing.property.city}
{listing.property.address}, {listing.property.ward}, {listing.property.district}, {listing.property.city}
</p>
</div>
<p className="shrink-0 text-lg font-bold text-primary">
@@ -186,7 +186,7 @@ export function PropertyCard({ listing, compact, layout = 'card' }: PropertyCard
</p>
<h3 className="mt-1 line-clamp-1 font-medium">{listing.property.title}</h3>
<p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
{listing.property.address}, {listing.property.district}, {listing.property.city}
{listing.property.address}, {listing.property.ward}, {listing.property.district}, {listing.property.city}
</p>
<ul className="mt-3 flex flex-wrap gap-1.5" aria-label="Thông tin bất động sản">
<li>