fix modal showing up when it shouldnt

src/app/factura/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react"
 import { FacturaHeader } from "@/components/factura/FacturaHeader"
 import { InfoTributariaForm } from "@/components/factura/InfoTributariaForm"
 import { InfoFacturaForm } from "@/components/factura/InfoFacturaForm"
+import { FormaPagoForm } from "@/components/factura/FormaPagoForm"
 import { DetallesList } from "@/components/factura/DetallesList"
 import { ResumenTotales } from "@/components/factura/ResumenTotales"
 import { FacturaActions } from "@/components/factura/FacturaActions"
@@ -35,14 +36,16 @@ export default function FacturaPage() {
 
   const handleGenerarXml = () => {
     const totalesImpuestos = calcularTotalesImpuestos()
-    generarXml(
+    const success = generarXml(
       infoTributaria,
       infoFactura,
       detalles,
       totalesImpuestos,
       setXmlGenerado
     )
-    setDialogOpen(true)
+    if (success) {
+      setDialogOpen(true)
+    }
   }
 
   const handleDescargarXml = () => {
@@ -66,6 +69,12 @@ export default function FacturaPage() {
         onChange={handleInfoFacturaChange}
       />
 
+      {/* Forma de Pago */}
+      <FormaPagoForm
+        infoFactura={infoFactura}
+        onChange={handleInfoFacturaChange}
+      />
+
       {/* Detalles */}
       <DetallesList
         detalles={detalles}

src/components/factura/FormaPagoForm.tsx

@@ -0,0 +1,94 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import type { InfoFactura } from "@/types/factura"
+
+interface FormaPagoFormProps {
+  infoFactura: InfoFactura
+  onChange: (field: keyof InfoFactura, value: string) => void
+}
+
+export function FormaPagoForm({ infoFactura, onChange }: FormaPagoFormProps) {
+  // Determinar si se deben mostrar los campos de plazo según la forma de pago
+  const requierePlazo = infoFactura.formaPago !== '01' // No efectivo
+  
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Información de Pago</CardTitle>
+        <CardDescription>Configura la forma de pago y plazos</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="formaPago">Forma de Pago *</Label>
+            <Select 
+              value={infoFactura.formaPago} 
+              onValueChange={(value) => {
+                onChange('formaPago', value)
+                // Resetear plazo y unidad cuando cambia a efectivo
+                if (value === '01') {
+                  onChange('plazo', '0')
+                  onChange('unidadTiempo', 'dias')
+                }
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="01">01 - Efectivo</SelectItem>
+                <SelectItem value="15">15 - Transferencia</SelectItem>
+                <SelectItem value="16">16 - Tarjeta Crédito</SelectItem>
+                <SelectItem value="17">17 - Tarjeta Débito</SelectItem>
+                <SelectItem value="20">20 - Otros</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {requierePlazo && (
+            <>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="plazo">Plazo de Pago</Label>
+                  <Input
+                    id="plazo"
+                    type="number"
+                    min="0"
+                    value={infoFactura.plazo}
+                    onChange={(e) => onChange('plazo', e.target.value)}
+                    placeholder="Ej: 30"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="unidadTiempo">Unidad de Tiempo</Label>
+                  <Select 
+                    value={infoFactura.unidadTiempo} 
+                    onValueChange={(value) => onChange('unidadTiempo', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="dias">Días</SelectItem>
+                      <SelectItem value="meses">Meses</SelectItem>
+                      <SelectItem value="años">Años</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {infoFactura.plazo && infoFactura.plazo !== '0' && (
+                <div className="text-sm text-muted-foreground">
+                  Pago a {infoFactura.plazo} {infoFactura.unidadTiempo}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/factura/InfoFacturaForm.tsx

@@ -51,28 +51,42 @@ export function InfoFacturaForm({ infoFactura, onChange }: InfoFacturaFormProps)
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="tipoIdentificacionComprador">Tipo Identificación Comprador</Label>
-            <Select value={infoFactura.tipoIdentificacionComprador} onValueChange={(value) => onChange('tipoIdentificacionComprador', value)}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="04">04 - RUC</SelectItem>
-                <SelectItem value="05">05 - Cédula</SelectItem>
-                <SelectItem value="06">06 - Pasaporte</SelectItem>
-                <SelectItem value="07">07 - Consumidor Final</SelectItem>
-              </SelectContent>
-            </Select>
+              <Label htmlFor="emailComprador">Email Comprador</Label>
+              <Input
+                id="emailComprador"
+                type="email"
+                value={infoFactura.emailComprador}
+                onChange={(e) => onChange('emailComprador', e.target.value)}
+                placeholder="email@ejemplo.com"
+              />
+            </div>
           </div>
           
-          <div className="space-y-2">
-            <Label htmlFor="identificacionComprador">Identificación Comprador *</Label>
-            <Input
-              id="identificacionComprador"
-              value={infoFactura.identificacionComprador}
-              onChange={(e) => onChange('identificacionComprador', e.target.value)}
-              placeholder="Según tipo seleccionado"
-            />
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="tipoIdentificacionComprador">Tipo Identificación Comprador</Label>
+              <Select value={infoFactura.tipoIdentificacionComprador} onValueChange={(value) => onChange('tipoIdentificacionComprador', value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="04">04 - RUC</SelectItem>
+                  <SelectItem value="05">05 - Cédula</SelectItem>
+                  <SelectItem value="06">06 - Pasaporte</SelectItem>
+                  <SelectItem value="07">07 - Consumidor Final</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="identificacionComprador">Identificación Comprador *</Label>
+              <Input
+                id="identificacionComprador"
+                value={infoFactura.identificacionComprador}
+                onChange={(e) => onChange('identificacionComprador', e.target.value)}
+                placeholder="Según tipo seleccionado"
+              />
+            </div>
           </div>
           
           <div className="space-y-2">
@@ -94,34 +108,6 @@ export function InfoFacturaForm({ infoFactura, onChange }: InfoFacturaFormProps)
               placeholder="Dirección del comprador"
             />
           </div>
-          
-          <div className="space-y-2">
-            <Label htmlFor="formaPago">Forma de Pago</Label>
-            <Select value={infoFactura.formaPago} onValueChange={(value) => onChange('formaPago', value)}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="01">01 - Efectivo</SelectItem>
-                <SelectItem value="15">15 - Transferencia</SelectItem>
-                <SelectItem value="16">16 - Tarjeta Crédito</SelectItem>
-                <SelectItem value="17">17 - Tarjeta Débito</SelectItem>
-                <SelectItem value="20">20 - Otros</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          
-          <div className="space-y-2">
-            <Label htmlFor="emailComprador">Email Comprador</Label>
-            <Input
-              id="emailComprador"
-              type="email"
-              value={infoFactura.emailComprador}
-              onChange={(e) => onChange('emailComprador', e.target.value)}
-              placeholder="email@ejemplo.com"
-            />
-          </div>
-          </div>
         </div>
       </CardContent>
     </Card>

src/components/factura/index.ts

@@ -2,6 +2,7 @@
 export { FacturaHeader } from './FacturaHeader'
 export { InfoTributariaForm } from './InfoTributariaForm'
 export { InfoFacturaForm } from './InfoFacturaForm'
+export { FormaPagoForm } from './FormaPagoForm'
 export { DetalleItemForm } from './DetalleItemForm'
 export { DetallesList } from './DetallesList'
 export { ResumenTotales } from './ResumenTotales'