argous 1.2.246 → 1.3.2

package/lib/components/ContactValidationInput/ContactValidationInput.js

@@ -4,17 +4,17 @@ import { OtpInput } from '../';
 import { api, headers } from '../../api';
 import { numbersOnly, useModal } from '../../utils';
 import { setError } from '../../utils/api';
-import { Button, CircularProgress, Grid, IconButton, InputAdornment, TextField, Typography, useTheme } from '@material-ui/core';
+import { Button, CircularProgress, Grid, IconButton, InputAdornment, Stack, TextField, Typography, useTheme } from '@mui/material';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IoMdCheckmark } from 'react-icons/io';
 import { LiaExclamationTriangleSolid } from 'react-icons/lia';
 import { PiSealCheck } from 'react-icons/pi';
-import MaskedInput from 'react-maskedinput';
+import MaskedInput from '@mona-health/react-input-mask';
 
 
 const EMAIL_VALIDATION_REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
 
-const cellphoneMaskedInput = (props) => <MaskedInput mask='(11) 11111-1111' {...props} />;
+const cellphoneMaskedInput = (props) => <MaskedInput mask='(99) 99999-9999' {...props} />;
 export const SealIcon = PiSealCheck;
 
 export const GREEN_COLOR = '#00995D';
@@ -25,39 +25,48 @@ const RED_COLOR = '#f44336';
 const INPUT_ADORNMENT_ICON_SIZE = 18;
 
 
-const loadingInitialState = { 
-  input: false, 
-  validation: false, 
-  sendValidationLink: false 
+const loadingInitialState = {
+  input: false,
+  validation: false,
+  sendValidationLink: false
 };
 
 const messageInitialState = { color: '', text: '' };
 
-const initialState = { 
-  loading: loadingInitialState, 
-  validated: false, 
-  validating: false, 
-  searched: false, 
-  idContato: '', 
-  cdContato: '', 
-  code: '', 
-  message: messageInitialState 
+const initialState = {
+  loading: loadingInitialState,
+  validated: false,
+  validating: false,
+  searched: false,
+  idContato: '',
+  cdContato: '',
+  code: '',
+  message: messageInitialState
 };
 
 
-const ContactValidationInput = ({ 
-  id, 
-  type = ('cellphone' || 'email'), 
-  textFieldProps = {}, 
-  style = {}, 
-  className = '', 
-  disabled, 
-  cpf = '', 
-  userName = '', 
-  value = '', 
-  onChange = () => '', 
-  getComponentData = () => '' 
+const ContactValidationInput = ({
+  id,
+  type = ('cellphone' || 'email'),
+  textFieldProps = {},
+  style = {},
+  className = '',
+  disabled,
+  cpf = '',
+  userName = '',
+  value = '',
+  onChange = () => '',
+  getComponentData = () => ''
 }) => {
+  const {
+    FormHelperTextProps,
+    InputLabelProps,
+    InputProps,
+    inputProps,
+    SelectProps,
+    slotProps: textFieldSlotProps = {},
+    ...resolvedTextFieldProps
+  } = textFieldProps;
 
   const theme = useTheme();
   const [state, setState] = useState({ ...initialState, inputValue: value });
@@ -66,9 +75,9 @@ const ContactValidationInput = ({
   const sealModal = createModal(SealModal);
   const onChangeRef = useRef(onChange);
 
-  const logicSetState = ({ type, field, value }) => setState((states) => ({ 
-    ...states, 
-    [type]: (type && field) ? { ...states[type], [field]: value } : value 
+  const logicSetState = ({ type, field, value }) => setState((states) => ({
+    ...states,
+    [type]: (type && field) ? { ...states[type], [field]: value } : value
   }));
 
   const cellphoneType = (type === 'cellphone');
@@ -88,24 +97,24 @@ const ContactValidationInput = ({
   const containerStyle = { gap: 10 };
   const endInputAdornmentStyle = { gap: 7 };
 
-  const messageStyle = { 
-    color: (message.color || theme.palette.text.primary), 
-    fontStyle: 'italic' 
+  const messageStyle = {
+    color: (message.color || theme.palette.text.primary),
+    fontStyle: 'italic'
   };
 
   const validateCodeButtonsContainerStyle = { gap: 10 };
 
-  const validateCodeButtonStyle = { 
-    width: 'calc(100% - 36px - 10px)' 
+  const validateCodeButtonStyle = {
+    width: 'calc(100% - 36px - 10px)'
   };
 
-  const sealButtonStyle = { 
-    height: '100%', 
-    color: GREEN_COLOR, 
-    border: `2px solid ${GREEN_COLOR}`, 
-    borderRadius: 4, 
-    padding: 5, 
-    fontSize: 22 
+  const sealButtonStyle = {
+    height: '100%',
+    color: GREEN_COLOR,
+    border: `2px solid ${GREEN_COLOR}`,
+    borderRadius: 4,
+    padding: 5,
+    fontSize: 22
   };
 
 
@@ -120,28 +129,28 @@ const ContactValidationInput = ({
 
     logicSetState({ type: 'loading', field: 'input', value: true });
 
-    const parameters = { 
-      method: 'S', 
-      type: (cellphoneType) ? '1' : (emailType) ? '2' : '', 
-      cdCpf: numbersOnly(cpf) 
+    const parameters = {
+      method: 'S',
+      type: (cellphoneType) ? '1' : (emailType) ? '2' : '',
+      cdCpf: numbersOnly(cpf)
     };
 
-    const fetchOptions = { 
-      method: 'POST', 
-      body: JSON.stringify(parameters), 
-      headers: headers() 
+    const fetchOptions = {
+      method: 'POST',
+      body: JSON.stringify(parameters),
+      headers: headers()
     };
 
     const { status, cdContato, isVerificado } = await fetch(`${api()}agscontactconfirmation.rslvr`, fetchOptions).then(async (response) => await response.json());
     if (status) {
       const newInputValue = (cdContato || '');
 
-      setState((states) => ({ 
-        ...states, 
-        cdContato, 
-        inputValue: newInputValue, 
-        searched: true, 
-        validated: isVerificado 
+      setState((states) => ({
+        ...states,
+        cdContato,
+        inputValue: newInputValue,
+        searched: true,
+        validated: isVerificado
       }));
 
       let newEvent = new Event('search');
@@ -161,33 +170,33 @@ const ContactValidationInput = ({
 
     logicSetState({ type: 'loading', field: 'input', value: true });
 
-    const parameters = { 
-      method: 'C', 
-      type: (cellphoneType) ? '1' : (emailType) ? '2' : '', 
-      tpMetodo: (emailType) ? '3' : '', 
-      cdCpf: numbersOnly(cpf), 
-      dsNome: userName, 
-      cdContato: formattedInputValue 
+    const parameters = {
+      method: 'C',
+      type: (cellphoneType) ? '1' : (emailType) ? '2' : '',
+      tpMetodo: (emailType) ? '3' : '',
+      cdCpf: numbersOnly(cpf),
+      dsNome: userName,
+      cdContato: formattedInputValue
     };
 
-    const fetchOptions = { 
-      method: 'POST', 
-      body: JSON.stringify(parameters), 
-      headers: headers() 
+    const fetchOptions = {
+      method: 'POST',
+      body: JSON.stringify(parameters),
+      headers: headers()
     };
 
     const { status, idContato, cdContato, dsErro } = await fetch(`${api()}agscontactconfirmation.rslvr`, fetchOptions).then(async (response) => await response.json());
     if (status) {
-      setState((states) => ({ 
-        ...states, 
-        idContato, 
-        cdContato, 
-        validated: false, 
-        validating: true, 
-        message: { 
-          color: ORANGE_COLOR, 
-          text: (cellphoneType) ? 'Utilize o código recebido via sms' : (emailType) ? 'Utilize o código recebido via e-mail' : '' 
-        } 
+      setState((states) => ({
+        ...states,
+        idContato,
+        cdContato,
+        validated: false,
+        validating: true,
+        message: {
+          color: ORANGE_COLOR,
+          text: (cellphoneType) ? 'Utilize o código recebido via sms' : (emailType) ? 'Utilize o código recebido via e-mail' : ''
+        }
       }));
     } else {
       (dsErro) && setError(dsErro);
@@ -201,32 +210,32 @@ const ContactValidationInput = ({
 
     logicSetState({ type: 'loading', field: 'sendValidationLink', value: true });
 
-    const parameters = { 
-      method: 'C', 
-      type: '2', 
-      tpMetodo: '4', 
-      cdCpf: numbersOnly(cpf), 
-      dsNome: userName, 
-      cdContato: formattedInputValue 
+    const parameters = {
+      method: 'C',
+      type: '2',
+      tpMetodo: '4',
+      cdCpf: numbersOnly(cpf),
+      dsNome: userName,
+      cdContato: formattedInputValue
     };
 
-    const fetchOptions = { 
-      method: 'POST', 
-      body: JSON.stringify(parameters), 
-      headers: headers() 
+    const fetchOptions = {
+      method: 'POST',
+      body: JSON.stringify(parameters),
+      headers: headers()
     };
 
     const { status, cdContato, dsErro } = await fetch(`${api()}agscontactconfirmation.rslvr`, fetchOptions).then(async (response) => await response.json());
     if (status) {
-      setState((states) => ({ 
-        ...states, 
-        idContato: '', 
-        cdContato, 
-        code: '', 
-        message: { 
-          color: '', 
-          text: `O link de validação foi enviado para o e-mail "${cdContato}"` 
-        } 
+      setState((states) => ({
+        ...states,
+        idContato: '',
+        cdContato,
+        code: '',
+        message: {
+          color: '',
+          text: `O link de validação foi enviado para o e-mail "${cdContato}"`
+        }
       }));
     } else {
       (dsErro) && setError(dsErro);
@@ -240,21 +249,21 @@ const ContactValidationInput = ({
 
     logicSetState({ type: 'loading', field: (snChancela) ? 'input' : 'validation', value: true });
 
-    const parameters = { 
-      method: 'V', 
-      type: (cellphoneType) ? '1' : (emailType) ? '2' : '', 
-      cdCpf: numbersOnly(cpf), 
-      dsNome: userName, 
-      cdCode: code, 
-      cdContato: formattedInputValue, 
-      idContato, 
-      snChancela 
+    const parameters = {
+      method: 'V',
+      type: (cellphoneType) ? '1' : (emailType) ? '2' : '',
+      cdCpf: numbersOnly(cpf),
+      dsNome: userName,
+      cdCode: code,
+      cdContato: formattedInputValue,
+      idContato,
+      snChancela
     };
 
-    const fetchOptions = { 
-      method: 'POST', 
-      body: JSON.stringify(parameters), 
-      headers: headers() 
+    const fetchOptions = {
+      method: 'POST',
+      body: JSON.stringify(parameters),
+      headers: headers()
     };
 
     const { status, isVerificado } = await fetch(`${api()}agscontactconfirmation.rslvr`, fetchOptions).then(async (response) => await response.json());
@@ -271,16 +280,16 @@ const ContactValidationInput = ({
         messageText = 'Código inválido. Por favor tente novamente.';
       }
 
-      setState((states) => ({ 
-        ...states, 
-        validated: isVerificado, 
-        validating: false, 
-        idContato: '', 
-        code: '', 
-        message: { 
-          color: (isVerificado) ? '' : RED_COLOR, 
-          text: messageText 
-        } 
+      setState((states) => ({
+        ...states,
+        validated: isVerificado,
+        validating: false,
+        idContato: '',
+        code: '',
+        message: {
+          color: (isVerificado) ? '' : RED_COLOR,
+          text: messageText
+        }
       }));
     }
 
@@ -296,108 +305,134 @@ const ContactValidationInput = ({
     if ((formattedInputValue === cdContato) && validated) logicSetState({ type: 'validating', value: false });
     else if (!(formattedInputValue === cdContato) && validated) logicSetState({ type: 'validating', value: true });
     else if (!(formattedInputValue === cdContato) && validating) {
-      setState((states) => ({ 
-        ...states, 
-        idContato: '', 
-        validated: false, 
-        validating: false, 
-        code: '', 
-        message: messageInitialState 
+      setState((states) => ({
+        ...states,
+        idContato: '',
+        validated: false,
+        validating: false,
+        code: '',
+        message: messageInitialState
       }));
     }
   }, [formattedInputValue, cdContato, validated, validating]);
-  useEffect(() => checkConsistency(), [formattedInputValue, checkConsistency]);
+  useEffect(() => {
+    checkConsistency();
+  }, [formattedInputValue, checkConsistency]);
 
   useEffect(() => {
     (typeof getComponentData === 'function') && getComponentData(state);
   }, [state, getComponentData]);
 
 
-  return <Grid container direction='column' {...{ id, className }} style={{ ...style, ...containerStyle }}>
-    <TextField 
-      {...textFieldProps} 
-      disabled={disabledRule} 
-      value={inputValue} 
-      onChange={handleOnChange} 
-      InputProps={{ 
-        ...textFieldProps?.InputProps, 
-        inputComponent: (cellphoneType) ? cellphoneMaskedInput : undefined, 
-        endAdornment: (
-          <InputAdornment position='end' style={endInputAdornmentStyle}>
-            {(validatedRule) && <IoMdCheckmark color={GREEN_COLOR} size={INPUT_ADORNMENT_ICON_SIZE} />}
-            {(noValidatedRule) && <LiaExclamationTriangleSolid color={ORANGE_COLOR} size={INPUT_ADORNMENT_ICON_SIZE} />}
-            {(loading.input) && <CircularProgress color='secondary' size={INPUT_ADORNMENT_ICON_SIZE} />}
-            {(noValidatedRule) && (
-              <Button 
-                size='small' 
-                variant='contained' 
-                disableElevation 
-                disabled={disabledRule || loading.validation || sendValidationCodeButtonDisabled} 
-                onClick={sendValidationCode}
-              >
-                Validar
-              </Button>
-            )}
-          </InputAdornment>
-        ) 
-      }} 
-    />
-    {(message.text) && (
-      <div>
-        <Typography style={messageStyle}>
-          {message.text}
-        </Typography>
-      </div>
-    )}
-    {(codeWasSent) && (
-      <>
-        <div className='otp-input-container'>
-          <OtpInput 
-            autoFocus 
-            numInputs={5} 
-            disabled={disabledRule || loading.validation} 
-            value={code} 
-            onChange={(newCode) => logicSetState({ type: 'code', value: newCode })} 
-          />
+  return (
+    <Stack {...{ id, className }} style={{ ...style, ...containerStyle }}>
+      <TextField
+        {...resolvedTextFieldProps}
+        disabled={disabledRule}
+        value={inputValue}
+        onChange={handleOnChange}
+        slotProps={{
+          ...textFieldSlotProps,
+          formHelperText: {
+            ...FormHelperTextProps,
+            ...textFieldSlotProps.formHelperText
+          },
+          htmlInput: {
+            ...inputProps,
+            ...textFieldSlotProps.htmlInput
+          },
+          input: {
+            ...InputProps,
+            ...textFieldSlotProps.input,
+            inputComponent: (cellphoneType) ? cellphoneMaskedInput : textFieldSlotProps.input?.inputComponent,
+            endAdornment: (
+              <InputAdornment position='end' style={endInputAdornmentStyle}>
+                {(validatedRule) && <IoMdCheckmark color={GREEN_COLOR} size={INPUT_ADORNMENT_ICON_SIZE} />}
+                {(noValidatedRule) && <LiaExclamationTriangleSolid color={ORANGE_COLOR} size={INPUT_ADORNMENT_ICON_SIZE} />}
+                {(loading.input) && <CircularProgress color='secondary' size={INPUT_ADORNMENT_ICON_SIZE} />}
+                {(noValidatedRule) && (
+                  <Button
+                    size='small'
+                    variant='contained'
+                    disableElevation
+                    disabled={disabledRule || loading.validation || sendValidationCodeButtonDisabled}
+                    onClick={sendValidationCode}
+                  >
+                    Validar
+                  </Button>
+                )}
+              </InputAdornment>
+            )
+          },
+          inputLabel: {
+            ...InputLabelProps,
+            ...textFieldSlotProps.inputLabel
+          },
+          select: {
+            ...SelectProps,
+            ...textFieldSlotProps.select
+          }
+        }}
+      />
+      {(message.text) && (
+        <div>
+          <Typography style={messageStyle}>
+            {message.text}
+          </Typography>
         </div>
-        <Grid container alignItems='center' style={validateCodeButtonsContainerStyle}>
-          <IconButton 
-            title='Chancelar' 
-            tabIndex='1' 
-            size='small' 
-            disabled={disabledRule || loading.validation || loading.sendValidationLink} 
-            onClick={toSeal} 
-            style={sealButtonStyle}
-          >
-            <SealIcon />
-          </IconButton>
-          <Button 
-            color='primary' 
-            variant='contained' 
-            disableElevation 
-            disabled={disabledRule || loading.validation || loading.sendValidationLink || (code.length < 5)} 
-            startIcon={(loading.validation) ? <CircularProgress color='secondary' size={20} /> : null} 
-            onClick={validateCode} 
-            style={validateCodeButtonStyle}
-          >
-            Validar código
-          </Button>
-        </Grid>
-        {(emailType) && (
-          <Button 
-            variant='contained' 
-            disableElevation 
-            disabled={disabledRule || loading.validation || loading.sendValidationLink} 
-            startIcon={(loading.sendValidationLink) ? <CircularProgress color='secondary' size={20} /> : null} 
-            onClick={sendValidationLink}
-          >
-            Enviar link para validação no e-mail
-          </Button>
-        )}
-      </>
-    )}
-  </Grid>;
+      )}
+      {(codeWasSent) && (
+        <>
+          <div className='otp-input-container'>
+            <OtpInput
+              autoFocus
+              numInputs={5}
+              disabled={disabledRule || loading.validation}
+              value={code}
+              onChange={(newCode) => logicSetState({ type: 'code', value: newCode })}
+            />
+          </div>
+          <Grid container style={validateCodeButtonsContainerStyle} sx={{
+            alignItems: 'center'
+          }}>
+            <IconButton
+              title='Chancelar'
+              tabIndex='1'
+              size='small'
+              disabled={disabledRule || loading.validation || loading.sendValidationLink}
+              onClick={toSeal}
+              style={sealButtonStyle}
+            >
+              <SealIcon />
+            </IconButton>
+            <Button
+              color='primary'
+              variant='contained'
+              disableElevation
+              disabled={disabledRule || loading.validation || loading.sendValidationLink || (code.length < 5)}
+              startIcon={(loading.validation) ? <CircularProgress color='secondary' size={20} /> : null}
+              onClick={validateCode}
+              style={validateCodeButtonStyle}
+            >
+              Validar código
+            </Button>
+          </Grid>
+          {(emailType) && (
+            <Button
+              variant='contained'
+              disableElevation
+              disabled={disabledRule || loading.validation || loading.sendValidationLink}
+              startIcon={(loading.sendValidationLink) ? <CircularProgress color='secondary' size={20} /> : null}
+              onClick={sendValidationLink}
+            >
+              Enviar link para validação no e-mail
+            </Button>
+          )}
+        </>
+      )}
+    </Stack>
+  );
 };
 
 
-export default ContactValidationInput;
+export default ContactValidationInput;

package/lib/components/ContactValidationInput/SealModal.js

@@ -1,13 +1,13 @@
 import { GREEN_COLOR, SealIcon } from './ContactValidationInput';
-import { Button, Dialog, Grid, Typography } from '@material-ui/core';
+import { Button, Dialog, Grid, Stack, Typography } from '@mui/material';
 import React from 'react';
 
 
 const SealModal = ({ open, proceed }) => {
 
-  const containerStyle = { 
-    padding: 20, 
-    gap: 20 
+  const containerStyle = {
+    padding: 20,
+    gap: 20
   };
 
   const buttonsContainerStyle = { gap: 20 };
@@ -16,34 +16,40 @@ const SealModal = ({ open, proceed }) => {
   const onClose = () => proceed({ status: false });
 
 
-  return <Dialog {...{ open, onClose }}>
-    <Grid container direction='column' style={containerStyle}>
-      <Grid container alignItems='center' style={headerContainerStyle}>
-        <Typography variant='h6'>
-          Chancela
-        </Typography>
-        <SealIcon color={GREEN_COLOR} size={20} />
-      </Grid>
-      <div>
-        <Typography>
-          Ao confirmar você estará validando o contato com um selo especial
-        </Typography>
-      </div>
-      <Grid container justifyContent='flex-end' style={buttonsContainerStyle}>
-        <Button onClick={onClose}>
-          Voltar
-        </Button>
-        <Button 
-          color='primary' 
-          variant='contained' 
-          onClick={(event) => proceed({ status: true })}
-        >
-          Confirmar
-        </Button>
-      </Grid>
-    </Grid>
-  </Dialog>;
+  return (
+    <Dialog {...{ open, onClose }}>
+      <Stack style={containerStyle}>
+        <Grid container style={headerContainerStyle} sx={{
+          alignItems: 'center'
+        }}>
+          <Typography variant='h6'>
+            Chancela
+          </Typography>
+          <SealIcon color={GREEN_COLOR} size={20} />
+        </Grid>
+        <div>
+          <Typography>
+            Ao confirmar você estará validando o contato com um selo especial
+          </Typography>
+        </div>
+        <Grid container style={buttonsContainerStyle} sx={{
+          justifyContent: 'flex-end'
+        }}>
+          <Button onClick={onClose}>
+            Voltar
+          </Button>
+          <Button
+            color='primary'
+            variant='contained'
+            onClick={(event) => proceed({ status: true })}
+          >
+            Confirmar
+          </Button>
+        </Grid>
+      </Stack>
+    </Dialog>
+  );
 };
 
 
-export default SealModal;
+export default SealModal;