📝 [Day 1 - Afternoon] Frontend Forms Implementation

[uozopio]

📋 Task Overview

Sprint Day: Day 1 - Afternoon Session
Time Slot: 14:00 - 18:00 (4 hours)
Task Type: Individual Frontend Development
Estimated Duration: 4 hours
Dependencies: Project Structure (Issue #4)

🎯 Objectives

Convert HTML templates to React components with full form validation, state management, and responsive design. Implement seller info, buyer info, and product info forms with proper TypeScript types and Zod validation schemas.

📝 Detailed Requirements

1. Seller Info Form Component (1.5 hours)

• Create components/forms/SellerInfoForm.tsx:
  • Individual/Corporate user toggle with conditional fields
  • Individual fields:
    • Full name (required)
    • Turkish ID number (11 digits, validation algorithm)
    • Phone number (Turkish format)
    • Email address
    • IBAN (Turkish IBAN validation)
  • Corporate fields:
    • Company name (required)
    • Tax number (10 digits)
    • Tax office
    • Authorized person name
    • Company phone
    • Company address
• Implement Zod validation schemas:
  • Turkish ID validation (sum check algorithm)
  • IBAN validation (TR specific)
  • Phone number format (+90)
  • Email format validation
• Add form state management:
  • Use react-hook-form with Zod resolver
  • Implement field-level validation
  • Add real-time validation feedback
  • Handle form submission
• Create responsive layout:
  • Mobile-first design
  • Proper field grouping
  • Clear error messages
  • Loading states

2. Buyer Info Form Component (1 hour)

• Create components/forms/BuyerInfoForm.tsx:
  • Similar structure to seller form
  • Individual/Corporate toggle
  • Delivery address section:
    • Street address
    • City (dropdown with Turkish cities)
    • District (dynamic based on city)
    • Postal code
    • Address description
  • Contact information:
    • Primary phone
    • Alternative phone
    • Email for notifications
• Implement address handling:
  • City/District cascade dropdown
  • Address validation
  • Google Maps integration prep
  • Save address for future use option
• Add form features:
  • Copy from seller option (if same person)
  • Address book functionality
  • Form progress saving
  • Validation on blur

3. Product Info Form Component (1.5 hours)

• Create components/forms/ProductInfoForm.tsx:
  • Category selection (Vehicle, Electronics, Real Estate, Other)
  • Dynamic fields based on category
  • Vehicle-specific fields:
    • Brand (dropdown)
    • Model (cascade from brand)
    • Year (year picker)
    • Mileage (number input with formatting)
    • Plate number (Turkish format)
    • Color
    • Engine size
    • Fuel type (Gasoline, Diesel, Electric, Hybrid)
    • Transmission (Manual, Automatic)
    • Vehicle documents checklist
  • General product fields:
    • Product title
    • Description (rich text)
    • Price (currency formatting)
    • Quantity
    • Condition (New, Used, Refurbished)
• Implement file upload preparation:
  • Multiple image upload interface
  • Document upload sections
  • File type validation
  • Preview functionality
  • Upload progress indicators
• Add dynamic form rendering:
  • Category-based field switching
  • Conditional validation rules
  • Auto-save functionality
  • Form data persistence

4. Form Utilities and Shared Components (1 hour)

• Create shared form components:
  • FormField.tsx - Reusable field wrapper
  • FormError.tsx - Error message display
  • FormSection.tsx - Section grouping
  • FormProgress.tsx - Multi-step progress
• Implement validation utilities:
  • validators/turkish.ts - Turkish-specific validations
  • validators/iban.ts - IBAN validation
  • validators/vehicle.ts - Vehicle-specific rules
  • validators/common.ts - Common validations
• Create form hooks:
  • useFormPersist - Save form state
  • useFormValidation - Custom validation logic
  • useFormNavigation - Multi-step navigation
  • useFormSubmit - Submission handling
• Add internationalization:
  • Form labels in Turkish/English
  • Validation messages in both languages
  • Number/date formatting per locale
  • RTL support preparation

🔧 Technical Context

Form Architecture

• React Hook Form: Performant form state management
• Zod: Type-safe schema validation
• Component Composition: Reusable form building blocks
• Progressive Enhancement: Works without JavaScript
• Accessibility: ARIA labels and keyboard navigation

Turkish-Specific Validations

• TC Kimlik No: 11-digit validation with checksum
• IBAN: TR + 24 digits with mod-97 check
• Phone: +90 format with proper prefixes
• Plate Number: City code + letters + numbers
• Tax Number: 10-digit for companies

State Management Strategy

• Local state for form data
• Session storage for persistence
• Context for multi-step forms
• Server state for saved drafts

Performance Optimizations

• Lazy load heavy components
• Debounce validation
• Virtualize long lists
• Optimize re-renders

✅ Acceptance Criteria

• All forms render correctly on mobile and desktop
• Validation works for all Turkish-specific fields
• Form state persists on page refresh
• Error messages display in correct language
• Forms are keyboard accessible
• Loading states show during submission
• All TypeScript types are properly defined
• Forms integrate with backend APIs (ready for integration)

👥 Developer Assignment

Lead Developer: @mbyzopio (Burak)
Role: Frontend Forms & Validation
Availability for Questions: Slack #dev-frontend channel

---

This task is part of the 2-day MVP sprint for the Paylox Escrow System