Franlop7 feature/#29 create step two for sign up process

intranet/src/pods/sign-up/component/sing-up-step2.component.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { TextField, Typography } from '@mui/material';
+import { useSignUpContext } from '#core/providers/index.js';
+
+const SignUpStepTwoComponent: React.FC = () => {
+  const { signUpData, setRestaurants } = useSignUpContext();
+
+  const onTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRestaurants({ ...signUpData.restaurant, [e.target.id]: e.target.value });
+  };
+
+  return (
+    <>
+      <Typography variant="h5" component="h2">
+        Paso 2 - Datos Restaurante
+      </Typography>
+      <Typography variant="body2">
+        Vamos a identificar tu restaurante, esto te permitirá también posicionarte en Google.
+      </Typography>
+      <form>
+        <TextField
+          onChange={onTextFieldChange}
+          value={signUpData.restaurant.name}
+          fullWidth
+          margin="normal"
+          id="name"
+          label="Nombre"
+          placeholder="Nombre"
+          InputLabelProps={{ shrink: true }}
+          required
+        />
+        <TextField
+          onChange={onTextFieldChange}
+          value={signUpData.restaurant.address}
+          fullWidth
+          margin="normal"
+          id="address"
+          label="Dirección"
+          placeholder="Dirección"
+          InputLabelProps={{ shrink: true }}
+          required
+        />
+        <TextField
+          onChange={onTextFieldChange}
+          value={signUpData.restaurant.city}
+          fullWidth
+          margin="normal"
+          id="city"
+          label="Ciudad"
+          placeholder="Ciudad"
+          InputLabelProps={{ shrink: true }}
+          required
+        />
+        <TextField
+          onChange={onTextFieldChange}
+          value={signUpData.restaurant.phoneNumber}
+          fullWidth
+          margin="normal"
+          id="phoneNumber"
+          label="Teléfono contacto"
+          placeholder="Teléfono contacto"
+          InputLabelProps={{ shrink: true }}
+          required
+          type="number"
+          sx={{
+            '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+              display: 'none',
+            },
+            '& input[type=number]': {
+              MozAppearance: 'textfield',
+            },
+          }}
+        />
+      </form>
+    </>
+  );
+};
+
+export default SignUpStepTwoComponent;

intranet/src/pods/sign-up/sign-up.component.tsx

@@ -1,19 +1,31 @@
 import { Button, Typography } from '@mui/material';
 
+import SignUpStepTwoComponent from './component/sing-up-step2.component';
+
 import * as classes from './sign-up.styles';
+import { useSignUpContext } from '#core/providers/index.js';
 
 export const SignUpComponent: React.FC = () => {
+  const { signUpData } = useSignUpContext();
+
+  const handleNextClick = () => {
+    console.log(signUpData.restaurant);
+  };
   return (
     <>
-      <Typography variant="h4" component="h1">
+      <Typography variant="h4" component="h1" className={classes.title}>
         Crea tu cuenta
+        <div className={classes.steps}>
+          <SignUpStepTwoComponent />
+        </div>
       </Typography>
-      <div className={classes.steps}>{/* Components for diferents estates of sign-in */}</div>
       <div className={classes.buttons}>
         <Button color="secondary" variant="contained">
           Anterior
         </Button>
-        <Button variant="contained">Siguiente</Button>
+        <Button variant="contained" onClick={handleNextClick}>
+          Siguiente
+        </Button>
       </div>
     </>
   );

intranet/src/pods/sign-up/sign-up.styles.ts

@@ -1,12 +1,19 @@
+import { mainTheme } from '#core/theme/main.theme.js';
 import { css } from '@emotion/css';
 
 export const buttons = css`
   width: 100%;
   display: flex;
   justify-content: space-between;
+  padding-top: ${mainTheme.spacing(3.5)};
 `;
 
 export const steps = css`
   min-height: 400px;
   width: 100%;
+  padding-top: ${mainTheme.spacing(3.5)};
+`;
+
+export const title = css`
+  text-align: center;
 `;