step 3 keep the pruff

src/Components/Modal/PasswordModal.jsx

@@ -22,7 +22,8 @@ export function HelpModal (props) {
         lastName: '',
         puesto: '',
         niveles_educativo: 0,
-        puesto_id: 0,
+        puesto_id: 20,
+        index_pruebas: []
     });
 
     const isStepSkipped = (step) => {
@@ -76,6 +77,8 @@ export function HelpModal (props) {
                 <StepTree
                     handleNext={handleNext} 
                     handleBack={handleBack} 
+                    password={password} 
+                    setPassword={setPassword} 
                 />
         },
         {
@@ -84,6 +87,8 @@ export function HelpModal (props) {
                 <StepFour
                     handleNext={handleNext} 
                     handleBack={handleBack} 
+                    password={password} 
+                    setPassword={setPassword} 
                 />
         },
     ];

src/Components/Password/Steps/four.js

@@ -36,7 +36,7 @@ export function StepFour(props) {
 
 
                     <Box
-                        component="form"
+                        component="div"
                         sx={{
                             '& .MuiTextField-root': { m: 1, width: '25ch' },
                         }}

src/Components/Password/Steps/tree.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import * as Yup from 'yup';
 // import { useState, useEffect } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
@@ -13,50 +13,60 @@ import {
     CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon
 } from '@mui/icons-material';
 
-const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const delete_icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
+
+
 export function StepTree(props) {
 
     const PlazaScheme = Yup.object().shape({
-        puesto: Yup.object().required('Escoge un puesto valido')
+        puesto: 
+        Yup.array()
+        .required('Escoge un puesto valido')
+        .min(1,"Debes escoger por lo menos una prueba")
     });
 
-    let {  handleNext, handleBack } = props
+    let {  handleNext, handleBack, password, setPassword } = props
 
     const formik = useFormik({
         initialValues: {
-            puesto: {}
+            puesto: password.index_pruebas
         },
         onSubmit: (fields) => {
-            console.log('SUBMIT > ',fields)
+            console.log('PRUEBAS ::',fields)
+            setPassword({
+                ...password,
+                index_pruebas : fields.puesto
+            })
             handleNext()
         },
         validationSchema: PlazaScheme,
     });
 
-    const {errors, touched, handleSubmit, getFieldProps, setValues } = formik;
-
+    const {errors, touched, handleSubmit, getFieldProps, setValues, values} = formik;
     return (
         <FormikProvider style={{ padding : 25 }} value={formik}>
             <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={2}>
-
                     <Autocomplete
+                        {...getFieldProps('puesto')}
                         multiple
                         id="checkboxes-tags-demo"
                         options={top100Films}
                         disableCloseOnSelect
-                        getOptionLabel={(option) => option.label}
-                        onChange={(a,b,c) => {
+                        getOptionLabel={(option) => { 
+                            return option.label 
+                        }}
+                        onChange={(a,current_list,c,individual,f) => {
                             setValues({
-                                puesto : b[0]
+                                puesto:current_list
                             })
                         }}
                         renderOption={(props, option, { selected }) => (
                             <li {...props}>
                                 <Checkbox
-                                    icon={icon}
+                                    icon={delete_icon}
                                     checkedIcon={checkedIcon}
                                     // style={{ marginRight: 8 }}
                                     checked={selected}

src/Components/Password/Steps/two.js

@@ -32,10 +32,7 @@ export function StepTwo(props) {
 
     const [age, setAge] = React.useState('');
 
-    const handleChange = (event) => {
-        console.log("Edad -> ",event.target.value)
-        setAge(event.target.value);
-    };
+    const handleChange = (event) => setAge(event.target.value);
 
     const { handleSubmit, touched, errors, getFieldProps } = formik;