DataScope26/WEB

1import React, { useState, useEffect } from 'react';2import { ArrowLeft } from 'lucide-react';3import './StepPlanSelection.css';4import ButtonPrimary from './ButtonPrimary.jsx';5import ButtonSecondary from './ButtonSecondary.jsx';6 7const plans = [8    {9        name: "Plan Individual",10        type: "basic",11        price: "5",12        features: ["1 usuario administrador", "1 usuario vinculado"],13    },14    {15        name: "Plan Basico",16        type: "standard",17        price: "15",18        features: [19            "1 usuario administrador",20            "Hasta 20 usuarios vinculados",21            "Mejorado de prompts",22            "Biblioteca de prompts de la empresa",23            "Tutoriales",24        ],25    },26    {27        name: "Plan Avanzado",28        type: "advanced",29        price: "50",30        features: [31            "Hasta 3 usuarios administradores",32            "Hasta 70 usuarios vinculados",33            "Mejorado de prompts",34            "Biblioteca de prompts de la empresa",35            "Tutoriales",36            "Prompts pre-generados",37            "Features Beta",38            "Atención personalizada",39        ],40    },41];42 43export default function StepPlanSelection({ data, updateData, onNext, onBack, preselectedPlan, errors = {} }) {44  const [showPreselectedAlert, setShowPreselectedAlert] = useState(!!preselectedPlan && !data.plan);45 46  useEffect(() => {47    if (preselectedPlan && !data.plan) {48      updateData({ plan: preselectedPlan });49    }50  }, [preselectedPlan, data.plan, updateData]);51 52  const handleKeepPlan = () => {53    setShowPreselectedAlert(false);54    onNext();55  };56 57  const handleChangePlan = () => {58    setShowPreselectedAlert(false);59    updateData({ plan: null });60  };61 62  const preselectedPlanName = plans.find(p => p.type === preselectedPlan)?.name || preselectedPlan;63 64  return (65    <div className="plan-selection-content">66      <div className="plan-selection-header">67        <ButtonSecondary className="step-back-button" onClick={onBack} aria-label="Volver atrás">68          <ArrowLeft size={20} />69        </ButtonSecondary>70        <div className="plan-selection-subtitle">Paso 2 de 3</div>71        <h2 className="plan-selection-title">Selecciona tu Plan</h2>72      </div>73 74      {showPreselectedAlert ? (75        <div className="preselected-alert">76          <div>77            <h4>Tienes un plan seleccionado</h4>78            <p>79              Llegaste desde la página de precios con el <strong>{preselectedPlanName}</strong>.80            </p>81          </div>82          <div className="alert-actions">83            <ButtonSecondary className="btn-outline" onClick={handleChangePlan}>Cambiar</ButtonSecondary>84            <ButtonPrimary className="btn-solid" onClick={handleKeepPlan}>Mantener y Continuar</ButtonPrimary>85          </div>86        </div>87      ) : (88        <>89          <div90            className="accordion-plans-grid"91            style={errors.plan ? { outline: '2px solid #e53e3e', borderRadius: '8px', padding: '8px' } : {}}92          >93            {plans.map((p) => (94              <div95                key={p.type}96                className={`accordion-plan-card ${data.plan === p.type ? 'selected' : ''}`}97                onClick={() => updateData({ plan: p.type })}98              >99                <h3>{p.name}</h3>100                <div className="plan-price-display">101                  <span className="price-amount">{p.price} U$D</span>102                  <span className="price-period">/mes</span>103                </div>104                <ul className="plan-features-list">105                  {p.features.map((feature, idx) => (106                    <li key={idx}>107                      <span className="feature-check">✓</span>108                      {feature}109                    </li>110                  ))}111                </ul>112              </div>113            ))}114          </div>115          {errors.plan && <span className="field-error">{errors.plan}</span>}116        </>117      )}118 119      <div className="plan-selection-actions">120        <ButtonPrimary 121          className="btn-solid" 122          onClick={onNext}123          style={{ opacity: 1, cursor: 'pointer' }}124        >125          Continuar a Facturación126        </ButtonPrimary>127      </div>128    </div>129  );130}