fix(deploy): tag rollback images before pull, prune after smoke test
Previously, `docker image prune` ran immediately after deploying new containers, potentially deleting the old images needed for rollback if smoke tests subsequently failed. Now the deploy pipeline: 1. Tags current images as :rollback before pulling new versions 2. Only runs `docker image prune` after smoke tests pass 3. Uses explicit :rollback tags for rollback instead of relying on Docker layer cache (which is fragile) Applied to: - scripts/deploy-production.sh (manual deploy script) - .github/workflows/deploy.yml (staging + production CI jobs) - docs/deployment.md (updated rollback documentation) Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -0,0 +1,279 @@
|
||||
import { ListingEntity } from '@modules/listings/domain/entities/listing.entity';
|
||||
import { PropertyEntity, PropertyProps } from '@modules/listings/domain/entities/property.entity';
|
||||
import { type IListingRepository } from '@modules/listings/domain/repositories/listing.repository';
|
||||
import { type IPropertyRepository } from '@modules/listings/domain/repositories/property.repository';
|
||||
import { Price } from '@modules/listings/domain/value-objects/price.vo';
|
||||
import { Address } from '@modules/listings/domain/value-objects/address.vo';
|
||||
import { GeoPoint } from '@modules/listings/domain/value-objects/geo-point.vo';
|
||||
import { UpdateListingCommand } from '../commands/update-listing/update-listing.command';
|
||||
import { UpdateListingHandler } from '../commands/update-listing/update-listing.handler';
|
||||
|
||||
function createListing(
|
||||
id = 'listing-1',
|
||||
sellerId = 'seller-1',
|
||||
agentId: string | null = null,
|
||||
status: 'DRAFT' | 'PENDING_REVIEW' | 'ACTIVE' = 'DRAFT',
|
||||
): ListingEntity {
|
||||
const price = Price.create(2_000_000_000n).unwrap();
|
||||
const listing = ListingEntity.createNew(id, 'prop-1', sellerId, 'SALE', price, 80, agentId ?? undefined);
|
||||
if (status === 'PENDING_REVIEW') listing.submitForReview();
|
||||
if (status === 'ACTIVE') {
|
||||
listing.submitForReview();
|
||||
listing.approve();
|
||||
}
|
||||
listing.clearDomainEvents();
|
||||
return listing;
|
||||
}
|
||||
|
||||
function createProperty(id = 'prop-1'): PropertyEntity {
|
||||
const address = Address.create('123 Đường Lê Lợi', 'Phường Bến Thành', 'Quận 1', 'Hồ Chí Minh').unwrap();
|
||||
const location = GeoPoint.create(10.7769, 106.7009).unwrap();
|
||||
const props: PropertyProps = {
|
||||
propertyType: 'APARTMENT',
|
||||
title: 'Căn hộ 3PN view sông',
|
||||
description: 'Căn hộ cao cấp nội thất đầy đủ',
|
||||
address,
|
||||
location,
|
||||
areaM2: 80,
|
||||
usableAreaM2: 72,
|
||||
bedrooms: 3,
|
||||
bathrooms: 2,
|
||||
floors: null,
|
||||
floor: 15,
|
||||
totalFloors: 30,
|
||||
direction: 'EAST',
|
||||
yearBuilt: 2020,
|
||||
legalStatus: 'Sổ hồng',
|
||||
amenities: ['Hồ bơi', 'Gym'],
|
||||
nearbyPOIs: null,
|
||||
metroDistanceM: 500,
|
||||
projectName: 'Vinhomes Central Park',
|
||||
};
|
||||
return PropertyEntity.createNew(id, props);
|
||||
}
|
||||
|
||||
describe('UpdateListingHandler', () => {
|
||||
let handler: UpdateListingHandler;
|
||||
let mockListingRepo: { [K in keyof IListingRepository]: ReturnType<typeof vi.fn> };
|
||||
let mockPropertyRepo: { [K in keyof IPropertyRepository]: ReturnType<typeof vi.fn> };
|
||||
let mockEventBus: { publish: ReturnType<typeof vi.fn> };
|
||||
let mockCache: {
|
||||
invalidate: ReturnType<typeof vi.fn>;
|
||||
invalidateByPrefix: ReturnType<typeof vi.fn>;
|
||||
};
|
||||
let mockLogger: { error: ReturnType<typeof vi.fn>; warn: ReturnType<typeof vi.fn>; log: ReturnType<typeof vi.fn> };
|
||||
|
||||
beforeEach(() => {
|
||||
mockListingRepo = {
|
||||
findById: vi.fn(),
|
||||
findByIdWithProperty: vi.fn(),
|
||||
save: vi.fn(),
|
||||
update: vi.fn().mockResolvedValue(undefined),
|
||||
search: vi.fn(),
|
||||
findByStatus: vi.fn(),
|
||||
findBySellerId: vi.fn(),
|
||||
};
|
||||
|
||||
mockPropertyRepo = {
|
||||
findById: vi.fn(),
|
||||
save: vi.fn(),
|
||||
update: vi.fn().mockResolvedValue(undefined),
|
||||
addMedia: vi.fn(),
|
||||
findMediaByPropertyId: vi.fn(),
|
||||
deleteMedia: vi.fn(),
|
||||
countMediaByPropertyId: vi.fn(),
|
||||
};
|
||||
|
||||
mockEventBus = { publish: vi.fn() };
|
||||
mockCache = {
|
||||
invalidate: vi.fn().mockResolvedValue(undefined),
|
||||
invalidateByPrefix: vi.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
mockLogger = {
|
||||
error: vi.fn(),
|
||||
warn: vi.fn(),
|
||||
log: vi.fn(),
|
||||
};
|
||||
|
||||
handler = new UpdateListingHandler(
|
||||
mockListingRepo as any,
|
||||
mockPropertyRepo as any,
|
||||
mockEventBus as any,
|
||||
mockCache as any,
|
||||
mockLogger as any,
|
||||
);
|
||||
});
|
||||
|
||||
describe('ownership checks', () => {
|
||||
it('allows the seller to update their listing', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1', 'Tiêu đề mới');
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.listingId).toBe('listing-1');
|
||||
expect(result.updatedFields).toContain('title');
|
||||
});
|
||||
|
||||
it('allows the assigned agent to update the listing', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1', 'agent-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'agent-1', 'Tiêu đề mới');
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.listingId).toBe('listing-1');
|
||||
});
|
||||
|
||||
it('rejects update from unauthorized user', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'stranger', 'Tiêu đề mới');
|
||||
|
||||
await expect(handler.execute(command)).rejects.toThrow(/người bán|môi giới/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('content updates', () => {
|
||||
it('updates title on the property entity', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1', 'Tiêu đề mới nhất');
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.updatedFields).toContain('title');
|
||||
expect(mockPropertyRepo.update).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('updates description on the property entity', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand(
|
||||
'listing-1', 'seller-1', undefined,
|
||||
'Mô tả mới chi tiết hơn cho căn hộ',
|
||||
);
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.updatedFields).toContain('description');
|
||||
expect(mockPropertyRepo.update).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('updates priceVND on the listing entity', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand(
|
||||
'listing-1', 'seller-1', undefined, undefined,
|
||||
3_000_000_000n,
|
||||
);
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.updatedFields).toContain('priceVND');
|
||||
expect(mockListingRepo.update).toHaveBeenCalledTimes(1);
|
||||
// property should NOT be updated when only listing fields change
|
||||
expect(mockPropertyRepo.update).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('updates amenities on the property entity', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand(
|
||||
'listing-1', 'seller-1', undefined, undefined,
|
||||
undefined, undefined, ['Hồ bơi', 'Gym', 'Sân tennis'],
|
||||
);
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.updatedFields).toContain('amenities');
|
||||
expect(mockPropertyRepo.update).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('rejects update with no fields provided', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1');
|
||||
|
||||
await expect(handler.execute(command)).rejects.toThrow(/không có trường/i);
|
||||
});
|
||||
});
|
||||
|
||||
describe('moderation re-submission', () => {
|
||||
it('transitions ACTIVE listing to PENDING_REVIEW on content edit', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1', null, 'ACTIVE');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1', 'Tiêu đề mới');
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.status).toBe('PENDING_REVIEW');
|
||||
expect(result.resubmittedForModeration).toBe(true);
|
||||
});
|
||||
|
||||
it('does NOT transition DRAFT listing status on content edit', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1', null, 'DRAFT');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1', 'Tiêu đề mới');
|
||||
const result = await handler.execute(command);
|
||||
|
||||
expect(result.status).toBe('DRAFT');
|
||||
expect(result.resubmittedForModeration).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('events and caching', () => {
|
||||
it('publishes domain events after update', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1', 'Tiêu đề mới');
|
||||
await handler.execute(command);
|
||||
|
||||
expect(mockEventBus.publish).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('invalidates listing cache after update', async () => {
|
||||
const listing = createListing('listing-1', 'seller-1');
|
||||
const property = createProperty('prop-1');
|
||||
mockListingRepo.findById.mockResolvedValue(listing);
|
||||
mockPropertyRepo.findById.mockResolvedValue(property);
|
||||
|
||||
const command = new UpdateListingCommand('listing-1', 'seller-1', 'Tiêu đề mới');
|
||||
await handler.execute(command);
|
||||
|
||||
expect(mockCache.invalidate).toHaveBeenCalled();
|
||||
expect(mockCache.invalidateByPrefix).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('throws NotFoundException for non-existent listing', async () => {
|
||||
mockListingRepo.findById.mockResolvedValue(null);
|
||||
|
||||
const command = new UpdateListingCommand('nonexistent', 'seller-1', 'Tiêu đề mới');
|
||||
|
||||
await expect(handler.execute(command)).rejects.toThrow('Listing');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
export class UpdateListingCommand {
|
||||
constructor(
|
||||
public readonly listingId: string,
|
||||
public readonly userId: string,
|
||||
public readonly title?: string,
|
||||
public readonly description?: string,
|
||||
public readonly priceVND?: bigint,
|
||||
public readonly rentPriceMonthly?: bigint,
|
||||
public readonly amenities?: string[],
|
||||
) {}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { Inject, InternalServerErrorException } from '@nestjs/common';
|
||||
import { CommandHandler, type EventBus, type ICommandHandler } from '@nestjs/cqrs';
|
||||
import {
|
||||
DomainException,
|
||||
ForbiddenException,
|
||||
NotFoundException,
|
||||
ValidationException,
|
||||
CacheService,
|
||||
CachePrefix,
|
||||
type LoggerService,
|
||||
} from '@modules/shared';
|
||||
import { LISTING_REPOSITORY, type IListingRepository } from '../../../domain/repositories/listing.repository';
|
||||
import { PROPERTY_REPOSITORY, type IPropertyRepository } from '../../../domain/repositories/property.repository';
|
||||
import { UpdateListingCommand } from './update-listing.command';
|
||||
|
||||
export interface UpdateListingResult {
|
||||
listingId: string;
|
||||
status: string;
|
||||
updatedFields: string[];
|
||||
resubmittedForModeration: boolean;
|
||||
}
|
||||
|
||||
@CommandHandler(UpdateListingCommand)
|
||||
export class UpdateListingHandler implements ICommandHandler<UpdateListingCommand> {
|
||||
constructor(
|
||||
@Inject(LISTING_REPOSITORY) private readonly listingRepo: IListingRepository,
|
||||
@Inject(PROPERTY_REPOSITORY) private readonly propertyRepo: IPropertyRepository,
|
||||
private readonly eventBus: EventBus,
|
||||
private readonly cache: CacheService,
|
||||
private readonly logger: LoggerService,
|
||||
) {}
|
||||
|
||||
async execute(command: UpdateListingCommand): Promise<UpdateListingResult> {
|
||||
try {
|
||||
// 1. Load listing
|
||||
const listing = await this.listingRepo.findById(command.listingId);
|
||||
if (!listing) {
|
||||
throw new NotFoundException('Listing', command.listingId);
|
||||
}
|
||||
|
||||
// 2. Ownership check: only the seller or assigned agent can edit
|
||||
const isOwner = listing.sellerId === command.userId;
|
||||
const isAgent = listing.agentId !== null && listing.agentId === command.userId;
|
||||
if (!isOwner && !isAgent) {
|
||||
throw new ForbiddenException(
|
||||
'Chỉ người bán hoặc môi giới được giao mới có thể chỉnh sửa tin đăng',
|
||||
);
|
||||
}
|
||||
|
||||
// 3. Validate no fields are being sent (empty update)
|
||||
const hasListingUpdates =
|
||||
command.priceVND !== undefined || command.rentPriceMonthly !== undefined;
|
||||
const hasPropertyUpdates =
|
||||
command.title !== undefined ||
|
||||
command.description !== undefined ||
|
||||
command.amenities !== undefined;
|
||||
|
||||
if (!hasListingUpdates && !hasPropertyUpdates) {
|
||||
throw new ValidationException('Không có trường nào được cập nhật', {});
|
||||
}
|
||||
|
||||
// 4. Load property for property-level updates
|
||||
const property = await this.propertyRepo.findById(listing.propertyId);
|
||||
if (!property) {
|
||||
throw new NotFoundException('Property', listing.propertyId);
|
||||
}
|
||||
|
||||
// 5. Apply updates to domain entities
|
||||
const allUpdatedFields: string[] = [];
|
||||
|
||||
// Update listing fields (price, rentPriceMonthly)
|
||||
if (hasListingUpdates) {
|
||||
const listingUpdated = listing.updateContent({
|
||||
priceVND: command.priceVND,
|
||||
rentPriceMonthly: command.rentPriceMonthly,
|
||||
areaM2: property.areaM2, // needed for pricePerM2 recalculation
|
||||
});
|
||||
allUpdatedFields.push(...listingUpdated);
|
||||
}
|
||||
|
||||
// Update property fields (title, description, amenities)
|
||||
if (hasPropertyUpdates) {
|
||||
const propertyUpdated = property.updateContent({
|
||||
title: command.title,
|
||||
description: command.description,
|
||||
amenities: command.amenities,
|
||||
});
|
||||
allUpdatedFields.push(...propertyUpdated);
|
||||
}
|
||||
|
||||
// 6. If listing was ACTIVE, transition to PENDING_REVIEW for re-moderation
|
||||
const previousStatus = listing.status;
|
||||
listing.markEditedForReModeration(property.id, allUpdatedFields);
|
||||
const resubmitted = previousStatus === 'ACTIVE' && listing.status === 'PENDING_REVIEW';
|
||||
|
||||
// 7. Persist changes
|
||||
await this.listingRepo.update(listing);
|
||||
if (hasPropertyUpdates) {
|
||||
await this.propertyRepo.update(property);
|
||||
}
|
||||
|
||||
// 8. Publish domain events
|
||||
const listingEvents = listing.clearDomainEvents();
|
||||
const propertyEvents = property.clearDomainEvents();
|
||||
for (const event of [...listingEvents, ...propertyEvents]) {
|
||||
this.eventBus.publish(event);
|
||||
}
|
||||
|
||||
// 9. Invalidate caches
|
||||
await Promise.all([
|
||||
this.cache.invalidate(CacheService.buildKey(CachePrefix.LISTING, command.listingId)),
|
||||
this.cache.invalidateByPrefix(CachePrefix.SEARCH),
|
||||
this.cache.invalidateByPrefix(CachePrefix.MARKET_DISTRICT),
|
||||
this.cache.invalidateByPrefix(CachePrefix.MARKET_REPORT),
|
||||
]);
|
||||
|
||||
return {
|
||||
listingId: listing.id,
|
||||
status: listing.status,
|
||||
updatedFields: allUpdatedFields,
|
||||
resubmittedForModeration: resubmitted,
|
||||
};
|
||||
} catch (error) {
|
||||
if (error instanceof DomainException) throw error;
|
||||
this.logger.error(
|
||||
`Failed to update listing ${command.listingId}: ${error instanceof Error ? error.message : error}`,
|
||||
error instanceof Error ? error.stack : undefined,
|
||||
this.constructor.name,
|
||||
);
|
||||
throw new InternalServerErrorException('Không thể cập nhật tin đăng');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { ListingStatus } from '@prisma/client';
|
||||
import type { DomainEvent } from '@modules/shared';
|
||||
|
||||
export class ListingUpdatedEvent implements DomainEvent {
|
||||
readonly eventName = 'listing.updated';
|
||||
readonly occurredAt = new Date();
|
||||
|
||||
constructor(
|
||||
public readonly aggregateId: string,
|
||||
public readonly propertyId: string,
|
||||
public readonly sellerId: string,
|
||||
public readonly previousStatus: ListingStatus,
|
||||
public readonly newStatus: ListingStatus,
|
||||
public readonly updatedFields: string[],
|
||||
) {}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { ApiPropertyOptional } from '@nestjs/swagger';
|
||||
import { Transform } from 'class-transformer';
|
||||
import {
|
||||
IsString,
|
||||
IsOptional,
|
||||
MinLength,
|
||||
IsArray,
|
||||
} from 'class-validator';
|
||||
|
||||
export class UpdateListingDto {
|
||||
@ApiPropertyOptional({ example: 'Căn hộ 3PN view sông - Vinhomes Central Park', description: 'Listing title (min 5 chars)' })
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MinLength(5)
|
||||
title?: string;
|
||||
|
||||
@ApiPropertyOptional({ example: 'Căn hộ cao cấp 3 phòng ngủ, nội thất đầy đủ...', description: 'Detailed description (min 10 chars)' })
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MinLength(10)
|
||||
description?: string;
|
||||
|
||||
@ApiPropertyOptional({ type: String, example: '5500000000', description: 'Price in VND (as string to support bigint)' })
|
||||
@IsOptional()
|
||||
@Transform(({ value }) => (value != null ? BigInt(value) : undefined))
|
||||
priceVND?: bigint;
|
||||
|
||||
@ApiPropertyOptional({ type: String, example: '25000000', description: 'Monthly rent price in VND (as string to support bigint)' })
|
||||
@IsOptional()
|
||||
@Transform(({ value }) => (value != null ? BigInt(value) : undefined))
|
||||
rentPriceMonthly?: bigint;
|
||||
|
||||
@ApiPropertyOptional({ example: ['Hồ bơi', 'Gym', 'Sân chơi trẻ em'], description: 'List of amenities' })
|
||||
@IsOptional()
|
||||
@IsArray()
|
||||
amenities?: string[];
|
||||
|
||||
// Note: media order changes are handled via separate media endpoints.
|
||||
// propertyType, address, location CANNOT be changed after ACTIVE status.
|
||||
}
|
||||
217
apps/web/components/listings/inquiry-modal.tsx
Normal file
217
apps/web/components/listings/inquiry-modal.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { ApiError } from '@/lib/api-client';
|
||||
import { useAuthStore } from '@/lib/auth-store';
|
||||
import { useCreateInquiry } from '@/lib/hooks/use-inquiries';
|
||||
|
||||
interface InquiryModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
listingId: string;
|
||||
listingTitle: string;
|
||||
sellerName: string;
|
||||
}
|
||||
|
||||
export function InquiryModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
listingId,
|
||||
listingTitle,
|
||||
sellerName,
|
||||
}: InquiryModalProps) {
|
||||
const { user, isAuthenticated } = useAuthStore();
|
||||
const createInquiry = useCreateInquiry();
|
||||
|
||||
const [message, setMessage] = React.useState('');
|
||||
const [phone, setPhone] = React.useState('');
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [success, setSuccess] = React.useState(false);
|
||||
|
||||
// Pre-fill phone from auth store when modal opens
|
||||
React.useEffect(() => {
|
||||
if (open && user?.phone) {
|
||||
setPhone(user.phone);
|
||||
}
|
||||
if (open) {
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
setMessage('');
|
||||
}
|
||||
}, [open, user?.phone]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
window.location.href = '/login';
|
||||
onOpenChange(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmedMessage = message.trim();
|
||||
const trimmedPhone = phone.trim();
|
||||
|
||||
if (!trimmedMessage) {
|
||||
setError('Vui long nhap noi dung tin nhan');
|
||||
return;
|
||||
}
|
||||
if (!trimmedPhone || trimmedPhone.length < 9) {
|
||||
setError('Vui long nhap so dien thoai hop le');
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await createInquiry.mutateAsync({
|
||||
listingId,
|
||||
message: trimmedMessage,
|
||||
phone: trimmedPhone,
|
||||
});
|
||||
setSuccess(true);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 401) {
|
||||
window.location.href = '/login';
|
||||
onOpenChange(false);
|
||||
return;
|
||||
}
|
||||
setError(
|
||||
err instanceof ApiError
|
||||
? err.message
|
||||
: 'Gui tin nhan that bai. Vui long thu lai.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Da gui thanh cong!</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tin nhan cua ban da duoc gui den {sellerName}. Ho se lien he voi ban som nhat co the.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-center py-4">
|
||||
<svg
|
||||
className="h-16 w-16 text-green-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button onClick={() => onOpenChange(false)}>Dong</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Nhan tin cho nguoi ban</DialogTitle>
|
||||
<DialogDescription>
|
||||
Gui tin nhan ve tin dang “{listingTitle}”
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="inquiry-message">Noi dung tin nhan</Label>
|
||||
<Textarea
|
||||
id="inquiry-message"
|
||||
placeholder="Toi quan tam den bat dong san nay. Vui long lien he voi toi..."
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
rows={4}
|
||||
required
|
||||
disabled={createInquiry.isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="inquiry-phone">So dien thoai</Label>
|
||||
<Input
|
||||
id="inquiry-phone"
|
||||
type="tel"
|
||||
placeholder="0912345678"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
required
|
||||
disabled={createInquiry.isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={createInquiry.isPending}
|
||||
>
|
||||
Huy
|
||||
</Button>
|
||||
<Button type="submit" disabled={createInquiry.isPending}>
|
||||
{createInquiry.isPending ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<svg
|
||||
className="h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
/>
|
||||
</svg>
|
||||
Dang gui...
|
||||
</span>
|
||||
) : (
|
||||
'Gui tin nhan'
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user