Vonza AI Bot

🎯 New Features Added

Settings Dropdown with Purchase Token Option
Buy AI Tokens Modal (Exact Match to Design)
Formik State Management with Yup Validation
Dynamic AI Tokens Display & Real-time Total Calculation

🚀 How to Test

  1. Click the ⚙️ Settings icon in the top-right navbar
  2. Select "Purchase Tokens" from the dropdown
  3. Enter the number of AI tokens you want to purchase (minimum 100)
  4. Toggle between existing card and new payment method
  5. Click "Purchase" to see the demo in action
  6. Watch your credits update in real-time!

🔧 Technical Implementation

  • ✅ Formik State Management: Form handling, validation, and submission
  • ✅ Yup Validation: Schema-based form validation with error messages
  • ✅ Ant Design Components: Modal, Dropdown, Switch, Input, Button
  • ✅ Tailwind CSS: Responsive design, custom styling, animations
  • ✅ Real-time Calculation: Dynamic total calculation as user types
  • ✅ Toggle Functionality: Switch between existing card and new payment method
  • ✅ Smart Card Detection: Automatically shows existing card if available from API
  • ✅ Stripe Integration: CardElement with token creation and secure payment processing
  • ✅ React Query API Integration: Real API calls with proper error handling and data refetching