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;