Update #8

O forms agora contém as diversas restrições e faz o step conforme a escolha do utilzador no tipo de empresa.

high-green-power/src/App.tsx

@@ -7,7 +7,7 @@ import { Box, Container, Grid, Typography, Button, Stepper, Step, StepLabel } fr
 import { useFormik } from 'formik';
 import { useState } from "react";
 import { matchIsValidTel } from 'mui-tel-input';
-import axios from "axios";
+//import axios from "axios";
 
 interface dados {
 
@@ -23,7 +23,7 @@ interface dados {
   pais?: string;
   cidade?: string;
   codigoPostal?: string;
-  estado: string;
+
 
   nomePessoaContacto: string;
   telemovelPC: string;
@@ -49,7 +49,6 @@ const initialValues: dados = {
   pais: 'Portugal',
   cidade: '',
   codigoPostal: undefined,
-  estado: 'Pendente',
 
   nomePessoaContacto: '',
   telemovelPC: '',
@@ -69,11 +68,9 @@ function App() {
 
   const schemaStep1 = yup.object({
 
-    tiporegisto: yup.string().required("*Por favor insira um tipo de registo registo válido"),
-    tipoempresa: yup.string(),
-    empresa: yup.string().required("*Por favor insira um nome válido"),
+    tiporegisto: yup.string().required("*Por favor insira um tipo de registo válido"),
+    representante: yup.string().required("*Por favor insira um nome válido"),
     nif: yup.string().matches(/^[0-9]+$/, "*Por favor insira um NIF válido").length(9, "*O NIF deve ser composto por 9 dígitos"),
-    representante: yup.string().required("*Por favor insira um representante válido"),
     telemovelDP: yup.string()
     .required(' ')
     .test('is-valid-phone', "*Por favor insira um número de telemóvel válido", (value) => {
@@ -84,7 +81,7 @@ function App() {
       .required("*Por favor insira um email válido"),
     morada: yup.string(),
     andar: yup.string().matches(/^[0-9]+$/, "*Por favor insira um Andar válido"),
-    cidade: yup.string().required("*Por favor insira uma Cidade válida"),
+    cidade: yup.string().required("*Por favor insira uma cidade válida"),
     pais: yup.string(),
     codigoPostal: yup.string()
 
@@ -139,14 +136,15 @@ function App() {
         name: values.nomePessoaContacto,
         email: values.emailPessoaContacto,
         phone: values.telemovelPC.replace(/\s/g, ''),
-      }]
+      }],
+      type: values.tipoempresa
     };
 
     console.log('Dados: ', values);
     
     console.log('Dados API:', extractedData);
 
-    try {
+    /*try {
       // Make a POST request using Axios
       const response = await axios.post('https://dev-hgp-sgi.streamline.pt/api/entities', extractedData);
       
@@ -155,7 +153,7 @@ function App() {
     } catch (error) {
       // Handle errors
       console.error('Error submitting data:', error);
-    }
+    }*/
     
   };
 
@@ -183,8 +181,21 @@ function App() {
   const [activeStep, setActiveStep] = React.useState(0);
 
   const handleNext = async () => {
+    console.log(formik.values.tipoempresa);
     try {
 
+      if (formik.values.tiporegisto == '0'){
+        await yup.object({
+          tipoempresa: yup.string().required("*Por favor insira um tipo de empresa válido"),
+        }).validateAt('tipoempresa', formik.values, { abortEarly: false });
+      }
+
+      if (formik.values.tipoempresa >= '0'){
+        await yup.object({
+          empresa: yup.string().required("*Por favor insira nome da empresa válido"),
+        }).validateAt('empresa', formik.values, { abortEarly: false });
+      }
+
       if (activeStep === 0) {
         await schemaStep1.validate(formik.values, { abortEarly: false });
       } else if (activeStep === 1) {
@@ -193,8 +204,16 @@ function App() {
         await schemaStep3.validate(formik.values, { abortEarly: false });
       }
 
+      if (formik.values.tiporegisto == '1'){
+        formik.values.nomePessoaContacto = formik.values.representante;
+        formik.values.telemovelPC = formik.values.telemovelDP;
+        formik.values.emailPessoaContacto = formik.values.emailDP;
+        setActiveStep(activeStep + 2);
+        setValidationErrors([]);
+      }else{
         setActiveStep(activeStep + 1);
         setValidationErrors([]);  
+      }
       
     } catch (error) {
       const errors = (error as yup.ValidationError).errors;
@@ -204,9 +223,13 @@ function App() {
   };
 
   const handleBack = () => {  
-
+    if (formik.values.tiporegisto == '1'){
+      setActiveStep(activeStep - 2);
+      setValidationErrors([]);
+    }else{
       setActiveStep(activeStep - 1);
-
+      setValidationErrors([]);  
+    }
   };
 
   return (

high-green-power/src/DadosPessoais.tsx

@@ -21,7 +21,10 @@ export const DadosPessoais = ( {formik}: any ) => {
 
   const [tipoRegisto, setTipoRegisto] = useState('');
 
-  const [smValue, setSmValue] = useState(6);
+  const [smValue, setSmValue] = useState(12);
+
+  const [showEmpresa, setShowEmpresa] = useState(false); // State to track whether to show "Representante" field
+
   
   const handleTipoRegistoChange = (event: { target: { value: SetStateAction<string>; }; }) => {
     setTipoRegisto(event.target.value);
@@ -29,9 +32,9 @@ export const DadosPessoais = ( {formik}: any ) => {
     const tipoempresaValue = '';
 
     if (event.target.value == '0') {
-      setSmValue(3);
-    } else {
       setSmValue(6);
+    } else {
+      setSmValue(12);
     }
 
     formik.setFieldValue('tiporegisto', event.target.value);
@@ -56,6 +59,10 @@ export const DadosPessoais = ( {formik}: any ) => {
     }
   };
 
+  useEffect(() => {
+    setShowEmpresa(formik.values.tipoempresa !== ''); // Update showRepresentante based on tipoempresa field value
+  }, [formik.values.tipoempresa]);
+
   const [countries, setCountries] = useState<Paises[]>([]);
 
   useEffect(() => {
@@ -97,7 +104,7 @@ export const DadosPessoais = ( {formik}: any ) => {
         </Grid>
 
         {tipoRegisto == '0' && (
-          <Grid item xs={12} sm={3}>
+          <Grid item xs={12} sm={6}>
             <InputLabel id="labeltipoempresa">Tipo de empresa</InputLabel>
             <Select
             {...formik.getFieldProps('tipoempresa')}  
@@ -109,25 +116,28 @@ export const DadosPessoais = ( {formik}: any ) => {
             fullWidth
             >
               <MenuItem value={0}>Empresa</MenuItem>
-              <MenuItem value={1}>Particular</MenuItem>
-              <MenuItem value={2}>Park</MenuItem>
+              <MenuItem value={1}>Condomínio</MenuItem>
+              <MenuItem value={2}>Hotel</MenuItem>
+              <MenuItem value={3}>Outro</MenuItem>
             </Select>
           </Grid>
         )}
 
-        <Grid item xs={12} sm={6} sx={{ mt: 0.9 }}>
+        {showEmpresa && (
+          <Grid item xs={12} sm={12}>
             <TextField
               {...formik.getFieldProps('empresa')}
               required
               id="empresa"
               name="empresa"
-            label="Nome/Empresa"
+              label="Nome da Empresa"
               fullWidth
               variant="standard"
               error={formik.touched.empresa && Boolean(formik.errors.empresa)}
               helperText={formik.touched.empresa && formik.errors.empresa}
             />
           </Grid>
+        )}
 
         <Grid item xs={12} sm={6}>
           <TextField
@@ -136,7 +146,7 @@ export const DadosPessoais = ( {formik}: any ) => {
             type='text'
             id="representante"
             name="representante"
-            label="Nome do representante legal (empresa)"
+            label={tipoRegisto == '0' ? "Nome do representante da empresa" : "Nome completo"}
             fullWidth
             variant="standard"
             error={formik.touched.representante && Boolean(formik.errors.representante)}
@@ -224,7 +234,7 @@ export const DadosPessoais = ( {formik}: any ) => {
             {countries.map((country: Paises, index: number) => (
               <MenuItem key={index} value={country.name.common}>
                 <Box sx={{ display: 'flex' }}>
-                  <Avatar style={{ width: '30px', height: '20px', borderRadius: '5px', marginRight: '5px' }} src={country.flags.svg} alt={country.name.common} /> 
+                  <Avatar sx={{ width: '26px', height: '18px', borderRadius: '0px', marginRight: '5px', marginTop: '2.5px', pl: 1, pr: 1 }} src={country.flags.svg} alt={country.name.common} /> 
                   {country.name.common}
                 </Box>
               </MenuItem>