argous 1.2.234 → 1.2.236

package/dist/components/ContactValidationInput/ContactValidationInput.d.ts

@@ -0,0 +1,62 @@
+import { TextFieldProps } from '@material-ui/core';
+import { CSSProperties } from 'react';
+
+
+export interface ContactValidationInputProps {
+  /**
+   * Component id
+   */
+  id?: string, 
+  /**
+   * Component type
+   */
+  type: ('cellphone' | 'email'), 
+  /**
+   * MUI TextField props object
+   */
+  textFieldProps?: TextFieldProps, 
+  /**
+   * Component style
+   */
+  style?: CSSProperties, 
+  /**
+   * Component css className
+   */
+  className?: string, 
+  /**
+   * Disabled prop
+   * If true disable the component
+   */
+  disabled?: boolean, 
+  /**
+   * User CPF document number
+   * Required to use the component
+   */
+  cpf: string, 
+  /**
+   * User name
+   * Required to use the component
+   */
+  userName: string, 
+  /**
+   * Input value
+   */
+  value: string, 
+  /**
+   * Function called on change
+   * @param event
+   * @returns
+   */
+  onChange: (event: Event) => void, 
+  /**
+   * Function called when component state change
+   * @param state
+   * @returns
+   */
+  getComponentData?: (state: object) => void 
+}
+
+
+declare function ContactValidationInput(props: ContactValidationInputProps) : JSX.Element
+
+export default ContactValidationInput;

package/dist/components/ContactValidationInput/ContactValidationInput.js

@@ -0,0 +1,384 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GREEN_COLOR = exports.SealIcon = void 0;
+require("./style.css");
+var SealModal_1 = __importDefault(require("./SealModal"));
+var __1 = require("../");
+var api_1 = require("../../api");
+var utils_1 = require("../../utils");
+var api_2 = require("../../utils/api");
+var core_1 = require("@material-ui/core");
+var react_1 = __importStar(require("react"));
+var io_1 = require("react-icons/io");
+var lia_1 = require("react-icons/lia");
+var pi_1 = require("react-icons/pi");
+var react_maskedinput_1 = __importDefault(require("react-maskedinput"));
+var EMAIL_VALIDATION_REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
+var cellphoneMaskedInput = function (props) { return react_1.default.createElement(react_maskedinput_1.default, __assign({ mask: '(11) 11111-1111' }, props)); };
+exports.SealIcon = pi_1.PiSealCheck;
+exports.GREEN_COLOR = '#00995D';
+var ORANGE_COLOR = '#f5781e';
+var RED_COLOR = '#f44336';
+var INPUT_ADORNMENT_ICON_SIZE = 18;
+var loadingInitialState = {
+    input: false,
+    validation: false,
+    sendValidationLink: false
+};
+var messageInitialState = { color: '', text: '' };
+var initialState = {
+    loading: loadingInitialState,
+    validated: false,
+    validating: false,
+    searched: false,
+    idContato: '',
+    cdContato: '',
+    code: '',
+    message: messageInitialState
+};
+var ContactValidationInput = function (_a) {
+    var id = _a.id, _b = _a.type, type = _b === void 0 ? ('cellphone' || 'email') : _b, _c = _a.textFieldProps, textFieldProps = _c === void 0 ? {} : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.className, className = _e === void 0 ? '' : _e, disabled = _a.disabled, _f = _a.cpf, cpf = _f === void 0 ? '' : _f, _g = _a.userName, userName = _g === void 0 ? '' : _g, _h = _a.value, value = _h === void 0 ? '' : _h, _j = _a.onChange, onChange = _j === void 0 ? function () { return ''; } : _j, _k = _a.getComponentData, getComponentData = _k === void 0 ? function () { return ''; } : _k;
+    var theme = core_1.useTheme();
+    var _l = react_1.useState(__assign(__assign({}, initialState), { inputValue: value })), state = _l[0], setState = _l[1];
+    var inputValue = state.inputValue, loading = state.loading, searched = state.searched, validated = state.validated, idContato = state.idContato, cdContato = state.cdContato, code = state.code, message = state.message, validating = state.validating;
+    var createModal = utils_1.useModal().createModal;
+    var sealModal = createModal(SealModal_1.default);
+    var onChangeRef = react_1.useRef(onChange);
+    var logicSetState = function (_a) {
+        var type = _a.type, field = _a.field, value = _a.value;
+        return setState(function (states) {
+            var _a, _b;
+            return (__assign(__assign({}, states), (_a = {}, _a[type] = (type && field) ? __assign(__assign({}, states[type]), (_b = {}, _b[field] = value, _b)) : value, _a)));
+        });
+    };
+    var cellphoneType = (type === 'cellphone');
+    var emailType = (type === 'email');
+    var formattedInputValue = (cellphoneType) ? utils_1.numbersOnly(inputValue) : inputValue;
+    var invalidType = (!cellphoneType && !emailType);
+    var disabledRule = (disabled || !cpf || !userName || invalidType || loading.input);
+    var validatedRule = (searched && validated && !validating);
+    var noValidatedRule = ((searched && !validated) || validating);
+    var validCellphone = (cellphoneType && (formattedInputValue.length === 11));
+    var validEmail = (emailType && (EMAIL_VALIDATION_REGEX.test(inputValue)));
+    var sendValidationCodeButtonDisabled = (validCellphone || validEmail) ? false : true;
+    var codeWasSent = !!idContato;
+    var containerStyle = { gap: 10 };
+    var endInputAdornmentStyle = { gap: 7 };
+    var messageStyle = {
+        color: (message.color || theme.palette.text.primary),
+        fontStyle: 'italic'
+    };
+    var validateCodeButtonsContainerStyle = { gap: 10 };
+    var validateCodeButtonStyle = {
+        width: 'calc(100% - 36px - 10px)'
+    };
+    var sealButtonStyle = {
+        height: '100%',
+        color: exports.GREEN_COLOR,
+        border: "2px solid " + exports.GREEN_COLOR,
+        borderRadius: 4,
+        padding: 5,
+        fontSize: 22
+    };
+    var handleOnChange = react_1.useCallback(function (event) {
+        event.target.value = event.target.value.toString().toLowerCase();
+        logicSetState({ type: 'inputValue', value: event.target.value });
+        (typeof onChangeRef.current === 'function') && onChangeRef.current(event);
+    }, []);
+    var search = react_1.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var parameters, fetchOptions, _a, status, cdContato, isVerificado, newInputValue_1, newEvent;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (invalidType)
+                        return [2 /*return*/];
+                    logicSetState({ type: 'loading', field: 'input', value: true });
+                    parameters = {
+                        method: 'S',
+                        type: (cellphoneType) ? '1' : (emailType) ? '2' : '',
+                        cdCpf: utils_1.numbersOnly(cpf)
+                    };
+                    fetchOptions = {
+                        method: 'POST',
+                        body: JSON.stringify(parameters),
+                        headers: api_1.headers()
+                    };
+                    return [4 /*yield*/, fetch(api_1.api() + "agscontactconfirmation.rslvr", fetchOptions).then(function (response) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, response.json()];
+                                case 1: return [2 /*return*/, _a.sent()];
+                            }
+                        }); }); })];
+                case 1:
+                    _a = _b.sent(), status = _a.status, cdContato = _a.cdContato, isVerificado = _a.isVerificado;
+                    if (status) {
+                        newInputValue_1 = (cdContato || '');
+                        setState(function (states) { return (__assign(__assign({}, states), { cdContato: cdContato, inputValue: newInputValue_1, searched: true, validated: isVerificado })); });
+                        newEvent = new Event('search');
+                        Object.defineProperty(newEvent, 'target', { writable: false, value: { value: newInputValue_1 } });
+                        handleOnChange(newEvent);
+                    }
+                    logicSetState({ type: 'loading', field: 'input', value: false });
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [cellphoneType, emailType, invalidType, cpf, handleOnChange]);
+    react_1.useEffect(function () {
+        search();
+    }, [search]);
+    var sendValidationCode = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var parameters, fetchOptions, _a, status, idContato, cdContato, dsErro;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (invalidType)
+                        return [2 /*return*/];
+                    logicSetState({ type: 'loading', field: 'input', value: true });
+                    parameters = {
+                        method: 'C',
+                        type: (cellphoneType) ? '1' : (emailType) ? '2' : '',
+                        tpMetodo: (emailType) ? '3' : '',
+                        cdCpf: utils_1.numbersOnly(cpf),
+                        dsNome: userName,
+                        cdContato: formattedInputValue
+                    };
+                    fetchOptions = {
+                        method: 'POST',
+                        body: JSON.stringify(parameters),
+                        headers: api_1.headers()
+                    };
+                    return [4 /*yield*/, fetch(api_1.api() + "agscontactconfirmation.rslvr", fetchOptions).then(function (response) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, response.json()];
+                                case 1: return [2 /*return*/, _a.sent()];
+                            }
+                        }); }); })];
+                case 1:
+                    _a = _b.sent(), status = _a.status, idContato = _a.idContato, cdContato = _a.cdContato, dsErro = _a.dsErro;
+                    if (status) {
+                        setState(function (states) { return (__assign(__assign({}, states), { idContato: idContato,
+                            cdContato: 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) && api_2.setError(dsErro);
+                    }
+                    logicSetState({ type: 'loading', field: 'input', value: false });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var sendValidationLink = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var parameters, fetchOptions, _a, status, cdContato, dsErro;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (invalidType)
+                        return [2 /*return*/];
+                    logicSetState({ type: 'loading', field: 'sendValidationLink', value: true });
+                    parameters = {
+                        method: 'C',
+                        type: '2',
+                        tpMetodo: '4',
+                        cdCpf: utils_1.numbersOnly(cpf),
+                        dsNome: userName,
+                        cdContato: formattedInputValue
+                    };
+                    fetchOptions = {
+                        method: 'POST',
+                        body: JSON.stringify(parameters),
+                        headers: api_1.headers()
+                    };
+                    return [4 /*yield*/, fetch(api_1.api() + "agscontactconfirmation.rslvr", fetchOptions).then(function (response) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, response.json()];
+                                case 1: return [2 /*return*/, _a.sent()];
+                            }
+                        }); }); })];
+                case 1:
+                    _a = _b.sent(), status = _a.status, cdContato = _a.cdContato, dsErro = _a.dsErro;
+                    if (status) {
+                        setState(function (states) { return (__assign(__assign({}, states), { idContato: '', cdContato: cdContato, code: '', message: {
+                                color: '',
+                                text: "O link de valida\u00E7\u00E3o foi enviado para o e-mail \"" + cdContato + "\""
+                            } })); });
+                    }
+                    else {
+                        (dsErro) && api_2.setError(dsErro);
+                    }
+                    logicSetState({ type: 'loading', field: 'sendValidationLink', value: false });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var validateCode = function (_a) {
+        var _b = _a.snChancela, snChancela = _b === void 0 ? false : _b;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var parameters, fetchOptions, _c, status, isVerificado, messageText_1;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (invalidType)
+                            return [2 /*return*/];
+                        logicSetState({ type: 'loading', field: (snChancela) ? 'input' : 'validation', value: true });
+                        parameters = {
+                            method: 'V',
+                            type: (cellphoneType) ? '1' : (emailType) ? '2' : '',
+                            cdCpf: utils_1.numbersOnly(cpf),
+                            dsNome: userName,
+                            cdCode: code,
+                            cdContato: formattedInputValue,
+                            idContato: idContato,
+                            snChancela: snChancela
+                        };
+                        fetchOptions = {
+                            method: 'POST',
+                            body: JSON.stringify(parameters),
+                            headers: api_1.headers()
+                        };
+                        return [4 /*yield*/, fetch(api_1.api() + "agscontactconfirmation.rslvr", fetchOptions).then(function (response) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, response.json()];
+                                    case 1: return [2 /*return*/, _a.sent()];
+                                }
+                            }); }); })];
+                    case 1:
+                        _c = _d.sent(), status = _c.status, isVerificado = _c.isVerificado;
+                        if (status) {
+                            messageText_1 = '';
+                            if (isVerificado) {
+                                if (cellphoneType)
+                                    messageText_1 = 'Celular validado com sucesso';
+                                else if (emailType)
+                                    messageText_1 = 'E-mail validado com sucesso';
+                                setTimeout(function () { return logicSetState({ type: 'message', value: messageInitialState }); }, 6000);
+                            }
+                            else {
+                                messageText_1 = 'Código inválido. Por favor tente novamente.';
+                            }
+                            setState(function (states) { return (__assign(__assign({}, states), { validated: isVerificado, validating: false, idContato: '', code: '', message: {
+                                    color: (isVerificado) ? '' : RED_COLOR,
+                                    text: messageText_1
+                                } })); });
+                        }
+                        logicSetState({ type: 'loading', field: (snChancela) ? 'input' : 'validation', value: false });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var toSeal = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var status;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, sealModal()];
+                case 1:
+                    status = (_a.sent()).status;
+                    if (status)
+                        validateCode({ snChancela: true });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var checkConsistency = react_1.useCallback(function () {
+        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(function (states) { return (__assign(__assign({}, states), { idContato: '', validated: false, validating: false, code: '', message: messageInitialState })); });
+        }
+    }, [formattedInputValue, cdContato, validated, validating]);
+    react_1.useEffect(function () { return checkConsistency(); }, [formattedInputValue, checkConsistency]);
+    react_1.useEffect(function () {
+        (typeof getComponentData === 'function') && getComponentData(state);
+    }, [state, getComponentData]);
+    return react_1.default.createElement(core_1.Grid, __assign({ container: true, direction: 'column' }, { id: id, className: className }, { style: __assign(__assign({}, style), containerStyle) }),
+        react_1.default.createElement(core_1.TextField, __assign({}, textFieldProps, { disabled: disabledRule, value: inputValue, onChange: handleOnChange, InputProps: __assign(__assign({}, textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps), { inputComponent: (cellphoneType) ? cellphoneMaskedInput : undefined, endAdornment: (react_1.default.createElement(core_1.InputAdornment, { position: 'end', style: endInputAdornmentStyle },
+                    (validatedRule) && react_1.default.createElement(io_1.IoMdCheckmark, { color: exports.GREEN_COLOR, size: INPUT_ADORNMENT_ICON_SIZE }),
+                    (noValidatedRule) && react_1.default.createElement(lia_1.LiaExclamationTriangleSolid, { color: ORANGE_COLOR, size: INPUT_ADORNMENT_ICON_SIZE }),
+                    (loading.input) && react_1.default.createElement(core_1.CircularProgress, { color: 'secondary', size: INPUT_ADORNMENT_ICON_SIZE }),
+                    (noValidatedRule) && (react_1.default.createElement(core_1.Button, { size: 'small', variant: 'contained', disableElevation: true, disabled: disabledRule || loading.validation || sendValidationCodeButtonDisabled, onClick: sendValidationCode }, "Validar")))) }) })),
+        (message.text) && (react_1.default.createElement("div", null,
+            react_1.default.createElement(core_1.Typography, { style: messageStyle }, message.text))),
+        (codeWasSent) && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: 'otp-input-container' },
+                react_1.default.createElement(__1.OtpInput, { autoFocus: true, numInputs: 5, disabled: disabledRule || loading.validation, value: code, onChange: function (newCode) { return logicSetState({ type: 'code', value: newCode }); } })),
+            react_1.default.createElement(core_1.Grid, { container: true, alignItems: 'center', style: validateCodeButtonsContainerStyle },
+                react_1.default.createElement(core_1.IconButton, { title: 'Chancelar', tabIndex: '1', size: 'small', disabled: disabledRule || loading.validation || loading.sendValidationLink, onClick: toSeal, style: sealButtonStyle },
+                    react_1.default.createElement(exports.SealIcon, null)),
+                react_1.default.createElement(core_1.Button, { color: 'primary', variant: 'contained', disableElevation: true, disabled: disabledRule || loading.validation || loading.sendValidationLink || (code.length < 5), startIcon: (loading.validation) ? react_1.default.createElement(core_1.CircularProgress, { color: 'secondary', size: 20 }) : null, onClick: validateCode, style: validateCodeButtonStyle }, "Validar c\u00F3digo")),
+            (emailType) && (react_1.default.createElement(core_1.Button, { variant: 'contained', disableElevation: true, disabled: disabledRule || loading.validation || loading.sendValidationLink, startIcon: (loading.sendValidationLink) ? react_1.default.createElement(core_1.CircularProgress, { color: 'secondary', size: 20 }) : null, onClick: sendValidationLink }, "Enviar link para valida\u00E7\u00E3o no e-mail")))));
+};
+exports.default = ContactValidationInput;

package/dist/components/ContactValidationInput/SealModal.d.ts

@@ -0,0 +1,6 @@
+export default SealModal;
+declare function SealModal({ open, proceed }: {
+    open: any;
+    proceed: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ContactValidationInput/SealModal.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ContactValidationInput_1 = require("./ContactValidationInput");
+var core_1 = require("@material-ui/core");
+var react_1 = __importDefault(require("react"));
+var SealModal = function (_a) {
+    var open = _a.open, proceed = _a.proceed;
+    var containerStyle = {
+        padding: 20,
+        gap: 20
+    };
+    var buttonsContainerStyle = { gap: 20 };
+    var headerContainerStyle = { gap: 10 };
+    var onClose = function () { return proceed({ status: false }); };
+    return react_1.default.createElement(core_1.Dialog, __assign({}, { open: open, onClose: onClose }),
+        react_1.default.createElement(core_1.Grid, { container: true, direction: 'column', style: containerStyle },
+            react_1.default.createElement(core_1.Grid, { container: true, alignItems: 'center', style: headerContainerStyle },
+                react_1.default.createElement(core_1.Typography, { variant: 'h6' }, "Chancela"),
+                react_1.default.createElement(ContactValidationInput_1.SealIcon, { color: ContactValidationInput_1.GREEN_COLOR, size: 20 })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(core_1.Typography, null, "Ao confirmar voc\u00EA estar\u00E1 validando o contato com um selo especial")),
+            react_1.default.createElement(core_1.Grid, { container: true, justifyContent: 'flex-end', style: buttonsContainerStyle },
+                react_1.default.createElement(core_1.Button, { onClick: onClose }, "Voltar"),
+                react_1.default.createElement(core_1.Button, { color: 'primary', variant: 'contained', onClick: function (event) { return proceed({ status: true }); } }, "Confirmar"))));
+};
+exports.default = SealModal;

package/dist/components/ContactValidationInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ContactValidationInput';
+export * from './ContactValidationInput';

package/dist/components/ContactValidationInput/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ContactValidationInput_1 = require("./ContactValidationInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ContactValidationInput_1).default; } });

package/dist/components/ContactValidationInput/style.css

@@ -0,0 +1,10 @@
+.otp-input-container > div {
+	font-size: 3rem;
+	gap: 10px;
+}
+
+.otp-input-container > div > div {
+	margin: 0;
+	min-height: 40px;
+	width: calc(20% - 8px);
+}

package/dist/components/index.d.ts

@@ -174,4 +174,7 @@ export * from './Cam';
 export * from './Document';
 
 export { default as UtilTextField } from './UtilTextField';
-export * from './UtilTextField';
+export * from './UtilTextField';
+
+export { default as ContactValidationInput } from './ContactValidationInput';
+export * from './ContactValidationInput';

package/dist/components/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoCompleteFavorites = exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
-exports.UtilTextField = exports.Cam = exports.Carousel = exports.Zoom = exports.TextToHtml = exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
+exports.ContactValidationInput = exports.UtilTextField = exports.Cam = exports.Carousel = exports.Zoom = exports.TextToHtml = exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
 var Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 __exportStar(require("./Alert"), exports);
@@ -189,3 +189,6 @@ __exportStar(require("./Document"), exports);
 var UtilTextField_1 = require("./UtilTextField");
 Object.defineProperty(exports, "UtilTextField", { enumerable: true, get: function () { return __importDefault(UtilTextField_1).default; } });
 __exportStar(require("./UtilTextField"), exports);
+var ContactValidationInput_1 = require("./ContactValidationInput");
+Object.defineProperty(exports, "ContactValidationInput", { enumerable: true, get: function () { return __importDefault(ContactValidationInput_1).default; } });
+__exportStar(require("./ContactValidationInput"), exports);

package/lib/components/ContactValidationInput/ContactValidationInput.d.ts

@@ -0,0 +1,62 @@
+import { TextFieldProps } from '@material-ui/core';
+import { CSSProperties } from 'react';
+
+
+export interface ContactValidationInputProps {
+  /**
+   * Component id
+   */
+  id?: string, 
+  /**
+   * Component type
+   */
+  type: ('cellphone' | 'email'), 
+  /**
+   * MUI TextField props object
+   */
+  textFieldProps?: TextFieldProps, 
+  /**
+   * Component style
+   */
+  style?: CSSProperties, 
+  /**
+   * Component css className
+   */
+  className?: string, 
+  /**
+   * Disabled prop
+   * If true disable the component
+   */
+  disabled?: boolean, 
+  /**
+   * User CPF document number
+   * Required to use the component
+   */
+  cpf: string, 
+  /**
+   * User name
+   * Required to use the component
+   */
+  userName: string, 
+  /**
+   * Input value
+   */
+  value: string, 
+  /**
+   * Function called on change
+   * @param event
+   * @returns
+   */
+  onChange: (event: Event) => void, 
+  /**
+   * Function called when component state change
+   * @param state
+   * @returns
+   */
+  getComponentData?: (state: object) => void 
+}
+
+
+declare function ContactValidationInput(props: ContactValidationInputProps) : JSX.Element
+
+export default ContactValidationInput;

package/lib/components/ContactValidationInput/ContactValidationInput.js

@@ -0,0 +1,403 @@
+import './style.css';
+import SealModal from './SealModal';
+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 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';
+
+
+const EMAIL_VALIDATION_REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
+
+const cellphoneMaskedInput = (props) => <MaskedInput mask='(11) 11111-1111' {...props} />;
+export const SealIcon = PiSealCheck;
+
+export const GREEN_COLOR = '#00995D';
+const ORANGE_COLOR = '#f5781e';
+const RED_COLOR = '#f44336';
+
+
+const INPUT_ADORNMENT_ICON_SIZE = 18;
+
+
+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 ContactValidationInput = ({ 
+  id, 
+  type = ('cellphone' || 'email'), 
+  textFieldProps = {}, 
+  style = {}, 
+  className = '', 
+  disabled, 
+  cpf = '', 
+  userName = '', 
+  value = '', 
+  onChange = () => '', 
+  getComponentData = () => '' 
+}) => {
+
+  const theme = useTheme();
+  const [state, setState] = useState({ ...initialState, inputValue: value });
+  const { inputValue, loading, searched, validated, idContato, cdContato, code, message, validating } = state;
+  const { createModal } = useModal();
+  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 cellphoneType = (type === 'cellphone');
+  const emailType = (type === 'email');
+
+  const formattedInputValue = (cellphoneType) ? numbersOnly(inputValue) : inputValue;
+  const invalidType = (!cellphoneType && !emailType);
+  const disabledRule = (disabled || !cpf || !userName || invalidType || loading.input);
+  const validatedRule = (searched && validated && !validating);
+  const noValidatedRule = ((searched && !validated) || validating);
+  const validCellphone = (cellphoneType && (formattedInputValue.length === 11));
+  const validEmail = (emailType && (EMAIL_VALIDATION_REGEX.test(inputValue)));
+  const sendValidationCodeButtonDisabled = (validCellphone || validEmail) ? false : true;
+  const codeWasSent = !!idContato;
+
+
+  const containerStyle = { gap: 10 };
+  const endInputAdornmentStyle = { gap: 7 };
+
+  const messageStyle = { 
+    color: (message.color || theme.palette.text.primary), 
+    fontStyle: 'italic' 
+  };
+
+  const validateCodeButtonsContainerStyle = { gap: 10 };
+
+  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 handleOnChange = useCallback((event) => {
+    event.target.value = event.target.value.toString().toLowerCase();
+    logicSetState({ type: 'inputValue', value: event.target.value });
+    (typeof onChangeRef.current === 'function') && onChangeRef.current(event);
+  }, []);
+
+  const search = useCallback(async () => {
+    if (invalidType) return;
+
+    logicSetState({ type: 'loading', field: 'input', value: true });
+
+    const parameters = { 
+      method: 'S', 
+      type: (cellphoneType) ? '1' : (emailType) ? '2' : '', 
+      cdCpf: numbersOnly(cpf) 
+    };
+
+    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 
+      }));
+
+      let newEvent = new Event('search');
+      Object.defineProperty(newEvent, 'target', { writable: false, value: { value: newInputValue } });
+      handleOnChange(newEvent);
+    }
+
+    logicSetState({ type: 'loading', field: 'input', value: false });
+  }, [cellphoneType, emailType, invalidType, cpf, handleOnChange]);
+
+  useEffect(() => {
+    search();
+  }, [search]);
+
+  const sendValidationCode = async () => {
+    if (invalidType) return;
+
+    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 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' : '' 
+        } 
+      }));
+    } else {
+      (dsErro) && setError(dsErro);
+    }
+
+    logicSetState({ type: 'loading', field: 'input', value: false });
+  };
+
+  const sendValidationLink = async () => {
+    if (invalidType) return;
+
+    logicSetState({ type: 'loading', field: 'sendValidationLink', value: true });
+
+    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 { 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}"` 
+        } 
+      }));
+    } else {
+      (dsErro) && setError(dsErro);
+    }
+
+    logicSetState({ type: 'loading', field: 'sendValidationLink', value: false });
+  };
+
+  const validateCode = async ({ snChancela = false }) => {
+    if (invalidType) return;
+
+    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 fetchOptions = { 
+      method: 'POST', 
+      body: JSON.stringify(parameters), 
+      headers: headers() 
+    };
+
+    const { status, isVerificado } = await fetch(`${api()}agscontactconfirmation.rslvr`, fetchOptions).then(async (response) => await response.json());
+    if (status) {
+
+      let messageText = '';
+
+      if (isVerificado) {
+        if (cellphoneType) messageText = 'Celular validado com sucesso';
+        else if (emailType) messageText = 'E-mail validado com sucesso';
+
+        setTimeout(() => logicSetState({ type: 'message', value: messageInitialState }), 6000);
+      } else {
+        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 
+        } 
+      }));
+    }
+
+    logicSetState({ type: 'loading', field: (snChancela) ? 'input' : 'validation', value: false });
+  };
+
+  const toSeal = async () => {
+    const { status } = await sealModal();
+    if (status) validateCode({ snChancela: true });
+  };
+
+  const checkConsistency = useCallback(() => {
+    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 
+      }));
+    }
+  }, [formattedInputValue, cdContato, validated, validating]);
+  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 })} 
+          />
+        </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>;
+};
+
+
+export default ContactValidationInput;

package/lib/components/ContactValidationInput/SealModal.js

@@ -0,0 +1,49 @@
+import { GREEN_COLOR, SealIcon } from './ContactValidationInput';
+import { Button, Dialog, Grid, Typography } from '@material-ui/core';
+import React from 'react';
+
+
+const SealModal = ({ open, proceed }) => {
+
+  const containerStyle = { 
+    padding: 20, 
+    gap: 20 
+  };
+
+  const buttonsContainerStyle = { gap: 20 };
+  const headerContainerStyle = { gap: 10 };
+
+  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>;
+};
+
+
+export default SealModal;

package/lib/components/ContactValidationInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ContactValidationInput';
+export * from './ContactValidationInput';

package/lib/components/ContactValidationInput/index.js

@@ -0,0 +1 @@
+export { default } from './ContactValidationInput';

package/lib/components/ContactValidationInput/style.css

@@ -0,0 +1,10 @@
+.otp-input-container > div {
+	font-size: 3rem;
+	gap: 10px;
+}
+
+.otp-input-container > div > div {
+	margin: 0;
+	min-height: 40px;
+	width: calc(20% - 8px);
+}

package/lib/components/index.d.ts

@@ -174,4 +174,7 @@ export * from './Cam';
 export * from './Document';
 
 export { default as UtilTextField } from './UtilTextField';
-export * from './UtilTextField';
+export * from './UtilTextField';
+
+export { default as ContactValidationInput } from './ContactValidationInput';
+export * from './ContactValidationInput';

package/lib/components/index.js

@@ -172,4 +172,7 @@ export * from './Cam';
 export * from './Document';
 
 export { default as UtilTextField } from './UtilTextField';
-export * from './UtilTextField';
+export * from './UtilTextField';
+
+export { default as ContactValidationInput } from './ContactValidationInput';
+export * from './ContactValidationInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.234",
+  "version": "1.2.236",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",
@@ -19,7 +19,7 @@
     "@types/chart.js": "^2.9.31",
     "@types/glob": "^7",
     "@types/jquery": "^3.5.5",
-    "@types/lodash": "^4.14.168",
+    "@types/lodash": "4.17.5",
     "@types/node": "^14.14.35",
     "@types/react": "^17.0.3",
     "@types/react-custom-scrollbars": "^4",
@@ -48,7 +48,7 @@
     "fs-extra": "^9.1.0",
     "glob": "^7.1.6",
     "immer": "^8.0.2",
-    "lodash": "^4.17.21",
+    "lodash": "4.17.5",
     "moment": "^2.29.1",
     "path": "^0.12.7",
     "prop-types": "^15.7.2",
@@ -107,4 +107,4 @@
     "smooth-dnd": "^0.12.1",
     "typescript": "4.2.3"
   }
-}
+}