Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { styled } from '@mui/material';

import { useBasicSettings } from '@account-settings/hooks';

import { SettingsWidget } from '@account-settings/components';

import { Form, FormButton, FormCheckbox, FormInput, FormSelect, Spinner } from '@shared/components';

const Row = styled('div')(({ theme }) => ({

  display: 'flex',

  gap: theme.spacing(1)

}));

const gendersOptions = [

  { label: 'Masculino', value: 'm' },

  { label: 'Femenino', value: 'f' }

];

const BasicSettings = () => {

  const { formValues, timezones, loading, updateSettings } = useBasicSettings();

  if (loading) return <Spinner />;

  return (

    <SettingsWidget title='Información básica'>

      <Form onSubmit={updateSettings} defaultValues={formValues}>

        <Row>

          <FormInput

            label='Nombre'

            placeholder='Ingrese su nombre'

            name='first_name'

            rules={{ required: 'Este campo es requerido' }}

          />

          <FormInput

            label='Apellido'

            placeholder='Ingrese su apellido'

            name='last_name'

            rules={{ required: 'Este campo es requerido' }}

          />

        </Row>

        <Row>

          <FormInput

            label='Correo'

            placeholder='Ingrese su correo'

            name='email'

            rules={{

              required: 'Este campo es requerido',

              pattern: {

                message: 'Por favor ingrese un correo válido',

                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/

              }

            }}

          />

          <FormInput

            label='Teléfono'

            placeholder='Ingrese su teléfono'

            name='phone'

            rules={{

              required: 'Por favor ingrese su número de teléfono',

              pattern: {

                message: 'Por favor ingrese un número de teléfono válido',

                value: /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/

              }

            }}

          />

        </Row>

        <Row>

          <FormSelect

            label='Género'

            name='gender'

            placeholder='Seleccione su género'

            rules={{ required: 'Este campo es requerido' }}

            options={gendersOptions}

          />

          <FormSelect

            label='Zona horaria'

            name='timezone'

            placeholder='Seleccione su zona horaria'

            rules={{ required: 'Este campo es requerido' }}

            options={timezones}

          />

        </Row>

        <FormCheckbox

          label='Eres mayor de 18 años'

          name='is_adult'

          rules={{ required: 'Este campo es requerido' }}

        />

        <FormButton>Guardar</FormButton>

      </Form>

    </SettingsWidget>

  );

};

export default BasicSettings;