DataScope26/WEB

1import { useState, useEffect } from "react";2import { useAreaManagement } from "../hooks/useAreaManagement.jsx";3import "./CreateAreaStep.css";4import ButtonPrimary from "./ButtonPrimary.jsx";5import ButtonSecondary from "./ButtonSecondary.jsx";6 7export default function CreateAreaStep({ companyId, onNext, onSkip, onAreaCreated }) {8  const [areaName, setAreaName] = useState("");9  const [lastCreatedArea, setLastCreatedArea] = useState(null);10  const { isCreating, error, handleCreateArea, setError } = useAreaManagement(companyId);11 12  useEffect(() => {13    setError("");14  }, []);15 16  const handleCreateAreaClick = async (e) => {17    e.preventDefault();18    if (!areaName.trim()) return;19 20    const created = await handleCreateArea(areaName.trim());21    if (created) {22      setLastCreatedArea(created);23      setAreaName("");24      if (onAreaCreated) onAreaCreated(created);25    }26  };27 28  const handleCreateAnother = () => {29    setAreaName("");30    setLastCreatedArea(null);31    setError("");32  };33 34  if (lastCreatedArea) {35    return (36      <div className="area-step">37        <div className="area-step__card area-step__card--success">38          <div className="area-step__check" aria-hidden="true">39            <svg viewBox="0 0 24 24" width="28" height="28" fill="none">40              <path41                d="M5 13l4 4L19 7"42                stroke="currentColor"43                strokeWidth="2.5"44                strokeLinecap="round"45                strokeLinejoin="round"46              />47            </svg>48          </div>49          <h1 className="area-step__title">Área "{lastCreatedArea.name}" creada exitosamente</h1>50          <p className="area-step__subtitle">¿Querés crear otra área?</p>51 52          <div className="area-step__actions area-step__actions--stacked">53            <ButtonPrimary54              type="button"55              className="area-step__next"56              onClick={onNext}57            >58              Avanzar a invitación de empleados59            </ButtonPrimary>60 61            <ButtonSecondary62              type="button"63              className="area-step__another"64              onClick={handleCreateAnother}65            >66              Crear otra área67            </ButtonSecondary>68          </div>69        </div>70      </div>71    );72  }73 74  return (75    <div className="area-step">76      <div className="area-step__card">77        <h1 className="area-step__title">Creá un área</h1>78        <p className="area-step__subtitle">79          Organizá a tu equipo agrupándolo por áreas de trabajo.80        </p>81 82        <form className="area-step__form" onSubmit={handleCreateAreaClick}>83          <div className="area-step__field">84            <label className="area-step__label">Nombre del área</label>85            <input86              type="text"87              placeholder="Ej. Desarrollo"88              value={areaName}89              onChange={(e) => setAreaName(e.target.value)}90              maxLength={50}91            />92          </div>93          {error && <p className="area-step__error">{error}</p>}94          <ButtonPrimary type="submit" disabled={isCreating || !areaName.trim()}>95            {isCreating ? "Creando..." : "Crear área"}96          </ButtonPrimary>97        </form>98 99        <div className="area-step__actions">100          <ButtonSecondary className="area-step__skip" type="button" onClick={onSkip}>101            Omitir por ahora102          </ButtonSecondary>103        </div>104      </div>105    </div>106  );107}