feat(F-180): completed feature

project/apps/pos/src/components/DiscountPanel.tsx

@@ -15,13 +15,15 @@ export default function DiscountPanel({ unitPriceCents, onApply, onClose }: Disc
   const [value, setValue] = useState('');
   const [error, setError] = useState('');
 
-  const discountCents =
-    mode === 'percent'
-      ? Math.round(((Number(value) || 0) / 100) * unitPriceCents)
-      : Number(value) || 0;
+  const numericValue = Number(value.replace(',', '.'));
+  const discountCents = Number.isFinite(numericValue)
+    ? mode === 'percent'
+      ? Math.round((numericValue / 100) * unitPriceCents)
+      : Math.round(numericValue * 100)
+    : 0;
 
   const handleApply = () => {
-    if (!value) return;
+    if (!value || numericValue <= 0) return;
     if (discountCents > unitPriceCents) { setError('Descuento mayor al precio'); return; }
     onApply(discountCents);
     onClose();
@@ -36,13 +38,13 @@ export default function DiscountPanel({ unitPriceCents, onApply, onClose }: Disc
 
       <div className="flex gap-2">
         <button
-          onClick={() => setMode('percent')}
+          onClick={() => { setMode('percent'); setValue(''); setError(''); }}
           className={`flex-1 py-2 rounded-xl font-medium ${mode === 'percent' ? 'bg-[#2D6A4F] text-white' : 'bg-gray-100'}`}
         >
           %
         </button>
         <button
-          onClick={() => setMode('fixed')}
+          onClick={() => { setMode('fixed'); setValue(''); setError(''); }}
           className={`flex-1 py-2 rounded-xl font-medium ${mode === 'fixed' ? 'bg-[#2D6A4F] text-white' : 'bg-gray-100'}`}
         >
           Fijo
@@ -51,13 +53,13 @@ export default function DiscountPanel({ unitPriceCents, onApply, onClose }: Disc
 
       <div>
         <input
-          type="number"
+          type="text"
+          inputMode="decimal"
           value={value}
           onChange={(e) => { setValue(e.target.value); setError(''); }}
-          placeholder={mode === 'percent' ? 'Porcentaje (%)' : 'Cantidad (céntimos)'}
+          placeholder={mode === 'percent' ? 'Porcentaje (%)' : 'Cantidad (€), ej. 3,50'}
           className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-lg focus:border-[#2D6A4F] outline-none"
-          min={0}
-          max={mode === 'percent' ? 100 : unitPriceCents}
+          aria-label={mode === 'percent' ? 'Porcentaje de descuento' : 'Descuento en euros'}
           autoFocus
         />
         {error && <p className="text-sm text-red-500 mt-1">{error}</p>}