← back to Watches

src/components/BuyNowDropdown.jsx

35 lines

import React, { useState, useEffect } from 'react';

const BuyNowDropdown = ({ watchRef }) => {
  const [programs, setPrograms] = useState([]);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    fetch('/api/affiliate/programs').then(r => r.json()).then(d => setPrograms(d.programs || []));
  }, []);

  const handleClick = async (program) => {
    await fetch('/api/affiliate/click', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ programId: program.id, watchRef }) });
    window.open(`${program.base_url}/search?q=${watchRef}&${program.tracking_param}=omega-platform`, '_blank');
  };

  return (
    <div className="relative">
      <button onClick={() => setOpen(!open)} className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center">
        Buy Now <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
      </button>
      {open && (
        <div className="absolute top-full mt-2 w-48 bg-white rounded-lg shadow-lg border z-50">
          {programs.map(p => (
            <button key={p.id} onClick={() => handleClick(p)} className="w-full px-4 py-2 text-left hover:bg-gray-100 flex items-center">
              <span>{p.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default BuyNowDropdown;