@vetra-trade/personal-info-block

Enhanced personal information workflow block for Vetra Trade applications with Payload CMS integration.

🚀 Features

• ✅ Comprehensive personal data collection: First name, last name, email, phone, document type, birth date, address
• ✅ Full Spanish/English localization: Proper field labels, placeholders, help text, and error messages
• ✅ Advanced validation: Email format, phone format, age verification, document validation
• ✅ Demo data support: Pre-filled values for testing and demonstrations
• ✅ Professional styling: Responsive layouts with CSS classes
• ✅ TypeScript support: Full type definitions included
• ✅ Payload CMS integration: Direct integration with Payload workflow-blocks collection

📦 Installation

npm install @vetra-trade/personal-info-block

🔧 Usage

Basic Usage

import { createPersonalInfoBlockData } from '@vetra-trade/personal-info-block'

// Get block data with Spanish/English localization
const blockData = createPersonalInfoBlockData()

console.log(blockData.spanish.title) // "Información Personal Mejorada"
console.log(blockData.english.title) // "Enhanced Personal Information"

Payload CMS Integration

import { createPayloadPersonalInfoBlock } from '@vetra-trade/personal-info-block'

// Inside your Payload seeder
export const seedWorkflowBlocks = async (payload: Payload) => {
  // Create the enhanced personal info block with proper localization
  const personalInfoBlock = await createPayloadPersonalInfoBlock(payload)
  
  console.log(`Created block with ID: ${personalInfoBlock.id}`)
  return personalInfoBlock
}

Advanced Usage with Custom Data

import { 
  createPersonalInfoBlockData, 
  WorkflowBlockData,
  WorkflowBlockField 
} from '@vetra-trade/personal-info-block'

const blockData = createPersonalInfoBlockData()

// Customize fields
const customFields: WorkflowBlockField[] = [
  ...blockData.spanish.dynamicFields,
  {
    fieldName: 'middleName',
    fieldLabel: 'Segundo Nombre',
    fieldType: 'text',
    required: false,
    // ... other properties
  }
]

// Create custom block data
const customBlockData: WorkflowBlockData = {
  ...blockData.spanish,
  dynamicFields: customFields,
  version: '1.1.0'
}

🌍 Localization

The package provides complete Spanish and English localization:

Spanish (Default)

• Title: "Información Personal Mejorada"
• Fields: "Nombres", "Apellidos", "Correo Electrónico", etc.
• Validation: Spanish error messages

English

• Title: "Enhanced Personal Information"
• Fields: "First Name", "Last Name", "Email Address", etc.
• Validation: English error messages

📋 Field Configuration

The block includes these fields:

| Field Name | Type | Required | Validation | |------------|------|----------|------------| | firstName | text | ✅ | 2-50 chars, letters only | | lastName | text | ✅ | 2-50 chars, letters only | | email | email | ✅ | Valid email format | | phone | phone | ✅ | International format | | documentType | select | ✅ | Cédula/Passport options | | birthDate | date | ✅ | 18+ years validation | | address | textarea | ✅ | 10-200 characters |

🎨 Styling

Each field includes CSS classes for styling:

• kyc-firstname-field
• kyc-lastname-field
• kyc-email-field
• kyc-phone-field
• kyc-document-type-field
• kyc-birthdate-field
• kyc-address-field

🧪 Demo Data

All fields include demo data for testing:

{
  firstName: "Gerónimo",
  lastName: "de Soto", 
  email: "[email protected]",
  phone: "+573001234567",
  // ... etc
}

🏗️ TypeScript Support

Full TypeScript definitions included:

import type { 
  WorkflowBlockField,
  WorkflowBlockData,
  LocalizedBlockData,
  Locale 
} from '@vetra-trade/personal-info-block'

🔗 Integration Example

Complete integration with a Payload CMS project:

// src/endpoints/seed/workflow-blocks.ts
import { createPayloadPersonalInfoBlock } from '@vetra-trade/personal-info-block'

export const seedWorkflowBlocks = async (payload: Payload) => {
  try {
    // Clean up existing blocks
    await payload.db.deleteMany({
      collection: 'workflow-blocks',
      where: {}
    })

    // Create enhanced personal info block from npm package
    const personalInfoBlock = await createPayloadPersonalInfoBlock(payload)
    
    console.log('✅ Created enhanced personal info block from npm package')
    return { personalInfoBlock }
  } catch (error) {
    console.error('❌ Failed to seed workflow blocks:', error)
    throw error
  }
}

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - see LICENSE file for details

🏢 Vetra Trade

Part of the Vetra Trade workflow blocks ecosystem. For more packages and tools, visit our GitHub organization.

Made with ❤️ for the Vetra Trade ecosystem