Banks

const banks = await convex.query(api.shared.banks.getBanks);

await convex.mutation(api.shared.banks.seedBanks);

import { useQuery } from 'convex/react';
import { api } from './convex/_generated/api';

interface BankSelectorProps {
  selectedBankId?: string;
  onBankSelect: (bankId: string, bankName: string) => void;
  placeholder?: string;
  required?: boolean;
}

function BankSelector({ selectedBankId, onBankSelect, placeholder = "Select a bank", required = false }: BankSelectorProps) {
  const banks = useQuery(api.shared.banks.getBanks);

  if (!banks) {
    return <div>Loading banks...</div>;
  }

  return (
    <div className="bank-selector">
      <label className="block text-sm font-medium text-gray-700 mb-2">
        Bank {required && <span className="text-red-500">*</span>}
      </label>
      
      <select
        value={selectedBankId || ''}
        onChange={(e) => {
          const selectedBank = banks.find(bank => bank._id === e.target.value);
          if (selectedBank) {
            onBankSelect(selectedBank._id, selectedBank.name);
          }
        }}
        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        required={required}
      >
        <option value="">{placeholder}</option>
        {banks.map((bank) => (
          <option key={bank._id} value={bank._id}>
            {bank.name} - {bank.nameArabic}
          </option>
        ))}
      </select>
      
      {selectedBankId && (
        <div className="mt-2 text-sm text-gray-600">
          Selected: {banks.find(b => b._id === selectedBankId)?.name}
        </div>
      )}
    </div>
  );
}

export default BankSelector;

import { useState } from 'react';
import { useMutation } from 'convex/react';
import { api } from './convex/_generated/api';
import BankSelector from './BankSelector';

interface BankAccountFormProps {
  storeId: string;
  onSuccess?: () => void;
}

function BankAccountForm({ storeId, onSuccess }: BankAccountFormProps) {
  const [formData, setFormData] = useState({
    bankId: '',
    accountHolderName: '',
    IBAN: '',
    accountNumber: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  const updateStore = useMutation(api.stores.operations.updateStore);

  const validateIBAN = (iban: string): boolean => {
    // UAE IBAN format: AE + 2 digits + 19 digits = 23 characters
    const uaeIBANRegex = /^AE\d{21}$/;
    return uaeIBANRegex.test(iban.replace(/\s/g, ''));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setErrors({});

    // Validation
    const newErrors: Record<string, string> = {};
    
    if (!formData.bankId) newErrors.bankId = 'Please select a bank';
    if (!formData.accountHolderName) newErrors.accountHolderName = 'Account holder name is required';
    if (!formData.IBAN) {
      newErrors.IBAN = 'IBAN is required';
    } else if (!validateIBAN(formData.IBAN)) {
      newErrors.IBAN = 'Invalid UAE IBAN format (e.g., AE123456789012345678901)';
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      setIsSubmitting(false);
      return;
    }

    try {
      await updateStore({
        bankAccount: {
          bankId: formData.bankId,
          accountHolderName: formData.accountHolderName,
          IBAN: formData.IBAN.replace(/\s/g, ''), // Remove spaces
          accountNumber: formData.accountNumber
        }
      });

      onSuccess?.();
    } catch (error) {
      console.error('Failed to update bank account:', error);
      setErrors({ submit: 'Failed to save bank account details' });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="bg-blue-50 p-4 rounded-lg">
        <h3 className="font-medium text-blue-900 mb-2">Bank Account Information</h3>
        <p className="text-sm text-blue-700">
          This information will be used for processing your store payouts. 
          Ensure all details are accurate to avoid payment delays.
        </p>
      </div>

      <BankSelector
        selectedBankId={formData.bankId}
        onBankSelect={(bankId, bankName) => {
          setFormData(prev => ({ ...prev, bankId }));
          setErrors(prev => ({ ...prev, bankId: '' }));
        }}
        required
      />
      {errors.bankId && <p className="text-red-500 text-sm">{errors.bankId}</p>}

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Account Holder Name <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          value={formData.accountHolderName}
          onChange={(e) => {
            setFormData(prev => ({ ...prev, accountHolderName: e.target.value }));
            setErrors(prev => ({ ...prev, accountHolderName: '' }));
          }}
          placeholder="Enter account holder name as per bank records"
          className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          required
        />
        {errors.accountHolderName && <p className="text-red-500 text-sm">{errors.accountHolderName}</p>}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          IBAN <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          value={formData.IBAN}
          onChange={(e) => {
            const value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
            setFormData(prev => ({ ...prev, IBAN: value }));
            setErrors(prev => ({ ...prev, IBAN: '' }));
          }}
          placeholder="AE123456789012345678901"
          maxLength={23}
          className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono"
          required
        />
        <p className="text-xs text-gray-500 mt-1">
          UAE IBAN format: AE followed by 21 digits
        </p>
        {errors.IBAN && <p className="text-red-500 text-sm">{errors.IBAN}</p>}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Account Number (Optional)
        </label>
        <input
          type="text"
          value={formData.accountNumber}
          onChange={(e) => setFormData(prev => ({ ...prev, accountNumber: e.target.value }))}
          placeholder="Additional account number if required"
          className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>

      {errors.submit && (
        <div className="bg-red-50 p-4 rounded-lg">
          <p className="text-red-700 text-sm">{errors.submit}</p>
        </div>
      )}

      <div className="flex justify-end">
        <button
          type="submit"
          disabled={isSubmitting}
          className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isSubmitting ? 'Saving...' : 'Save Bank Details'}
        </button>
      </div>
    </form>
  );
}

export default BankAccountForm;