Payer Search Combobox

import { PayerSearchCombobox } from "@samplehc/ui/components";
import { useState } from "react";
import { Button } from "@samplehc/ui/components/ui";
import { X } from "lucide-react";

function MultiplePayerSelection() {
  const [selectedPayers, setSelectedPayers] = useState([]);

  const handleAddPayer = (payer) => {
    if (payer && !selectedPayers.find(p => p.stediId === payer.stediId)) {
      setSelectedPayers([...selectedPayers, payer]);
    }
  };

  const handleRemovePayer = (payerId) => {
    setSelectedPayers(selectedPayers.filter(p => p.stediId !== payerId));
  };

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">
          Add Insurance Providers
        </label>
        <PayerSearchCombobox
          onSelect={handleAddPayer}
          placeholder="Search and add payers..."
        />
      </div>
      
      {selectedPayers.length > 0 && (
        <div className="space-y-2">
          <h3 className="text-sm font-medium">Selected Payers:</h3>
          {selectedPayers.map((payer) => (
            <div
              key={payer.stediId}
              className="flex items-center justify-between p-3 bg-muted rounded-md"
            >
              <div>
                <span className="font-medium">{payer.displayName}</span>
                <span className="text-sm text-muted-foreground ml-2">
                  ({payer.primaryPayerId})
                </span>
              </div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleRemovePayer(payer.stediId)}
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

import { PayerSearchCombobox } from "@samplehc/ui/components";
import { useState } from "react";

function ValidatedPayerForm() {
  const [selectedPayer, setSelectedPayer] = useState(null);
  const [error, setError] = useState("");

  const validatePayer = (payer) => {
    if (!payer) {
      setError("Please select an insurance provider");
      return false;
    }
    
    // Custom validation logic
    if (!payer.primaryPayerId) {
      setError("Selected payer has invalid configuration");
      return false;
    }
    
    setError("");
    return true;
  };

  const handleSubmit = () => {
    if (validatePayer(selectedPayer)) {
      console.log("Valid payer selected:", selectedPayer);
      // Proceed with form submission
    }
  };

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">
          Primary Insurance Provider *
        </label>
        <PayerSearchCombobox
          onSelect={(payer) => {
            setSelectedPayer(payer);
            if (payer) setError(""); // Clear error when selection made
          }}
          value={selectedPayer}
          required
          className={error ? "border-red-500" : ""}
        />
        {error && (
          <p className="text-sm text-red-500 mt-1">{error}</p>
        )}
      </div>
      
      <Button 
        onClick={handleSubmit}
        disabled={!selectedPayer}
      >
        Continue
      </Button>
    </div>
  );
}