@credithub/harlan-components 1.67.0 → 1.69.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  import ProtestosIcon from '../../assets/icones/protestos';
13
13
  import { useGlobalData } from '../../contexts/globalDataContext';
14
+ import theme from '../../styles/theme';
14
15
  import { normalizeName, similarNames } from '../../utils/similarNames';
16
+ import { WarningCircle } from 'phosphor-react';
15
17
  import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
16
18
  import StatusMessage from '../interface/statusMessage';
17
19
  import Section from '../section';
18
20
  import { Queries, RequestStatus } from '../webservice';
19
- import { TitleWithTooltip, TooltipContainer, TooltipIcon, TooltipText } from './liminarStyles';
21
+ import { TitleWithTooltip, TooltipContainer, TooltipText } from './liminarStyles';
20
22
  var validAssuntos = [
21
23
  'protesto indevido de título',
22
24
  'protesto indevido de títulos',
@@ -42,7 +44,18 @@ var Liminar = function () {
42
44
  var processingRef = useRef(true);
43
45
  var resultRef = useRef('Não encontrado');
44
46
  var dataHashRef = useRef('');
45
- var _d = useState(false), showInversionInfo = _d[0], setShowInversionInfo = _d[1];
47
+ var _d = useState(false), isTooltipVisible = _d[0], setTooltipVisible = _d[1];
48
+ var hideTooltipTimeout = useRef(null);
49
+ var showTooltip = function () {
50
+ if (hideTooltipTimeout.current)
51
+ clearTimeout(hideTooltipTimeout.current);
52
+ setTooltipVisible(true);
53
+ };
54
+ var hideTooltip = function () {
55
+ hideTooltipTimeout.current = setTimeout(function () {
56
+ setTooltipVisible(false);
57
+ }, 300);
58
+ };
46
59
  var tiposDocumento = useMemo(function () {
47
60
  var _a;
48
61
  var tipoRaw = (_a = ctx.document) === null || _a === void 0 ? void 0 : _a.type;
@@ -115,11 +128,11 @@ var Liminar = function () {
115
128
  });
116
129
  });
117
130
  if (foundBusinessEntity) {
118
- setShowInversionInfo(true);
131
+ setData(function (prev) { return (__assign(__assign({}, prev), { liminar: __assign(__assign({}, prev.liminar), { invertedProcessos: processosComAssuntoValido.map(function (p) { return p.id; }) }) })); });
119
132
  }
120
133
  }
121
134
  return Array.from(labels);
122
- }, [ctx.document, tiposDocumento, processosComAssuntoValido]);
135
+ }, [ctx.document, tiposDocumento, processosComAssuntoValido, setData]);
123
136
  var isErro404 = useMemo(function () { return ctx.type === RequestStatus.Error && !!ctx.error; }, [ctx.type, ctx.error]);
124
137
  var derivedCtx = useMemo(function () { return (__assign(__assign({}, ctx), { type: isErro404 ? RequestStatus.Success : ctx.type, document: isErro404 ? { indiciosDeLiminar: false } : ctx.document })); }, [ctx, isErro404]);
125
138
  useEffect(function () {
@@ -145,7 +158,7 @@ var Liminar = function () {
145
158
  console.error('Erro na requisição de liminares:', ctx.error || 'desconhecido');
146
159
  }
147
160
  var indiciosApi = ((_d = ctx.document) === null || _d === void 0 ? void 0 : _d.indiciosDeLiminar) === true;
148
- var finalStatus = indiciosApi || origensDetectadas.length > 0
161
+ var finalStatus = indiciosApi || processosComAssuntoValido.length > 0
149
162
  ? 'Encontrado'
150
163
  : 'Não encontrado';
151
164
  setData(function (prev) {
@@ -157,13 +170,14 @@ var Liminar = function () {
157
170
  return __assign(__assign({}, prev), { liminar: {
158
171
  indiciosDeLiminar: indiciosApi,
159
172
  message: finalStatus,
160
- isLoaded: true
173
+ isLoaded: true,
174
+ processosComLiminarIds: processosComAssuntoValido.map(function (p) { return p.id; })
161
175
  } });
162
176
  });
163
177
  resultRef.current = finalStatus;
164
178
  processingRef.current = false;
165
179
  processedRef.current = true;
166
- }, [ctx, globalData, origensDetectadas, setData, isErro404]);
180
+ }, [ctx, globalData, processosComAssuntoValido, setData, isErro404]);
167
181
  var scrollToProcesso = function (id) {
168
182
  var el = document.getElementById(id);
169
183
  if (el) {
@@ -175,23 +189,25 @@ var Liminar = function () {
175
189
  if (processedRef.current && resultRef.current === 'Não encontrado') {
176
190
  return null;
177
191
  }
192
+ var renderTooltipIcon = function () {
193
+ var color = origensDetectadas.length > 0
194
+ ? theme.colors.erroClaro
195
+ : theme.colors.cinzaClaro;
196
+ return (React.createElement(WarningCircle, { weight: "fill", size: 24, color: color, style: { marginLeft: 4 } }));
197
+ };
178
198
  return (React.createElement(Section, { title: React.createElement(React.Fragment, null,
179
199
  React.createElement(TitleWithTooltip, null,
180
200
  "Liminares para Remo\u00E7\u00E3o de Protesto",
181
- showInversionInfo && (React.createElement(TooltipContainer, null,
182
- React.createElement(TooltipIcon, null),
183
- React.createElement(TooltipText, null,
184
- "Aten\u00E7\u00E3o: Em alguns casos, o sistema judicial pode registrar os pap\u00E9is das partes de forma invertida, dificultando a interpreta\u00E7\u00E3o direta. Por isso, utilizamos algoritmos internos para detectar esse padr\u00E3o com base em contexto e palavras-chave.",
185
- processosComAssuntoValido.length > 0 && (React.createElement(React.Fragment, null,
186
- React.createElement("br", null),
187
- React.createElement("br", null),
188
- "Processos com ind\u00EDcios encontrados:",
189
- React.createElement("ul", { style: { marginTop: '6px', paddingLeft: '18px' } }, processosComAssuntoValido.map(function (proc, idx) { return (React.createElement("li", { key: idx, onClick: function () { return scrollToProcesso(proc.id); }, style: {
190
- fontSize: '13px',
191
- cursor: 'pointer',
192
- textDecoration: 'underline',
193
- color: '#007aff'
194
- } }, proc.id)); }))))))))), subtitle: processingRef.current
201
+ processosComAssuntoValido.length > 0 && (React.createElement(TooltipContainer, { onMouseEnter: showTooltip, onMouseLeave: hideTooltip },
202
+ renderTooltipIcon(),
203
+ React.createElement(TooltipText, { visible: isTooltipVisible }, processosComAssuntoValido.length > 0 && (React.createElement(React.Fragment, null,
204
+ "Processos com ind\u00EDcios encontrados:",
205
+ React.createElement("ul", { style: { marginTop: '6px', paddingLeft: '18px' } }, processosComAssuntoValido.map(function (proc, idx) { return (React.createElement("li", { key: idx, onClick: function () { return scrollToProcesso(proc.id); }, style: {
206
+ fontSize: '13px',
207
+ cursor: 'pointer',
208
+ textDecoration: 'underline',
209
+ color: '#007aff'
210
+ } }, proc.id)); }))))))))), subtitle: processingRef.current
195
211
  ? 'Carregando liminar...'
196
212
  : 'Indícios de liminares para ocultação de registros.', icon: ProtestosIcon, ctx: processingRef.current
197
213
  ? __assign(__assign({}, ctx), { type: RequestStatus.Loading }) : derivedCtx, onSuccess: processingRef.current
@@ -3,5 +3,8 @@ export declare const TooltipIcon: import("styled-components").StyledComponent<im
3
3
  weight: "fill";
4
4
  size: 24;
5
5
  }, "size" | "weight">;
6
- export declare const TooltipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
6
+ export declare const TooltipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
7
+ visible: boolean;
8
+ }, never>;
7
9
  export declare const TitleWithTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
+ export declare const GrayHighlighted: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -5,11 +5,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
5
5
  import theme from '../../styles/theme';
6
6
  import { WarningCircle } from 'phosphor-react';
7
7
  import styled from 'styled-components';
8
- export var TooltipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n margin-left: 8px;\n\n &:hover {\n span {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n }\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n margin-left: 8px;\n\n &:hover {\n span {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n }\n"])));
8
+ export var TooltipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n margin-left: 8px;\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n margin-left: 8px;\n"])));
9
9
  export var TooltipIcon = styled(WarningCircle).attrs({
10
10
  weight: 'fill',
11
11
  size: 24
12
12
  })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n transition: transform 0.2s ease;\n\n &:hover {\n transform: scale(1.2);\n }\n"], ["\n color: ", ";\n cursor: pointer;\n transition: transform 0.2s ease;\n\n &:hover {\n transform: scale(1.2);\n }\n"])), theme.colors.laranja);
13
- export var TooltipText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n visibility: hidden;\n width: 380px;\n max-width: 90vw;\n background-color: ", ";\n color: ", ";\n text-align: left;\n border-radius: 10px;\n padding: 16px 18px;\n font-size: 15px;\n font-weight: 500;\n font-style: normal;\n line-height: 1.35;\n position: absolute;\n z-index: 10;\n top: 130%;\n left: 0;\n opacity: 0;\n transform: translateY(-10px);\n transition:\n opacity 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n @media screen and (max-width: 768px) {\n font-size: 14px;\n padding: 14px;\n }\n"], ["\n visibility: hidden;\n width: 380px;\n max-width: 90vw;\n background-color: ", ";\n color: ", ";\n text-align: left;\n border-radius: 10px;\n padding: 16px 18px;\n font-size: 15px;\n font-weight: 500;\n font-style: normal;\n line-height: 1.35;\n position: absolute;\n z-index: 10;\n top: 130%;\n left: 0;\n opacity: 0;\n transform: translateY(-10px);\n transition:\n opacity 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n @media screen and (max-width: 768px) {\n font-size: 14px;\n padding: 14px;\n }\n"])), theme.colors.cinzaBase, theme.colors.erroApoio);
13
+ export var TooltipText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n visibility: ", ";\n pointer-events: ", ";\n opacity: ", ";\n transform: ", ";\n\n width: 380px;\n max-width: 90vw;\n background-color: ", ";\n color: ", ";\n text-align: left;\n border-radius: 10px;\n padding: 10px 16px 16px 16px;\n font-size: 15px;\n font-weight: 500;\n line-height: 1.35;\n position: absolute;\n z-index: 10;\n top: 130%;\n left: 0;\n transition:\n opacity 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n @media screen and (max-width: 768px) {\n font-size: 14px;\n padding: 10px 14px 14px 14px;\n }\n"], ["\n visibility: ", ";\n pointer-events: ", ";\n opacity: ", ";\n transform: ", ";\n\n width: 380px;\n max-width: 90vw;\n background-color: ", ";\n color: ", ";\n text-align: left;\n border-radius: 10px;\n padding: 10px 16px 16px 16px;\n font-size: 15px;\n font-weight: 500;\n line-height: 1.35;\n position: absolute;\n z-index: 10;\n top: 130%;\n left: 0;\n transition:\n opacity 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n @media screen and (max-width: 768px) {\n font-size: 14px;\n padding: 10px 14px 14px 14px;\n }\n"])), function (_a) {
14
+ var visible = _a.visible;
15
+ return (visible ? 'visible' : 'hidden');
16
+ }, function (_a) {
17
+ var visible = _a.visible;
18
+ return (visible ? 'auto' : 'none');
19
+ }, function (_a) {
20
+ var visible = _a.visible;
21
+ return (visible ? 1 : 0);
22
+ }, function (_a) {
23
+ var visible = _a.visible;
24
+ return visible ? 'translateY(0)' : 'translateY(-10px)';
25
+ }, theme.colors.cinzaBase, theme.colors.erroApoio);
14
26
  export var TitleWithTooltip = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
15
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
27
+ export var GrayHighlighted = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n animation: highlight-gray 0.6s ease-out;\n\n @keyframes highlight-gray {\n from {\n background-color: ", ";\n }\n to {\n background-color: transparent;\n }\n }\n"], ["\n animation: highlight-gray 0.6s ease-out;\n\n @keyframes highlight-gray {\n from {\n background-color: ", ";\n }\n to {\n background-color: transparent;\n }\n }\n"])), theme.colors.cinzaClaro);
28
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -40,17 +40,23 @@ var AddProcessoJuridicoField = function (_a) {
40
40
  var ProcessoJuridicoWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n scroll-margin-top: 100px;\n\n @media (min-width: 1000px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n scroll-margin-top: 100px;\n\n @media (min-width: 1000px) {\n flex-direction: row;\n }\n"])));
41
41
  var ConsultarProcessoBtn = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n @media (min-width: 1000px) {\n width: 100%;\n max-width: 150px;\n height: max-content;\n }\n"], ["\n @media (min-width: 1000px) {\n width: 100%;\n max-width: 150px;\n height: max-content;\n }\n"])));
42
42
  var ResultWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
43
- var CNJWithIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
43
+ var CNJWithIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n position: relative;\n\n &:hover::after {\n content: attr(data-tooltip);\n position: absolute;\n bottom: -28px;\n left: 0;\n background-color: #333;\n color: #fff;\n padding: 6px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n z-index: 999;\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n position: relative;\n\n &:hover::after {\n content: attr(data-tooltip);\n position: absolute;\n bottom: -28px;\n left: 0;\n background-color: #333;\n color: #fff;\n padding: 6px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n z-index: 999;\n }\n"])));
44
44
  var ProcessoJuridicoItem = memo(function (_a) {
45
- var _b, _c, _d;
45
+ var _b, _c, _d, _e, _f;
46
46
  var processo = _a.processo, children = _a.children, highlighted = _a.highlighted;
47
47
  var global = useGlobalData().data;
48
48
  var hasLiminar = ((_b = global === null || global === void 0 ? void 0 : global.liminar) === null || _b === void 0 ? void 0 : _b.message) === 'Encontrado' &&
49
- ((_d = (_c = global === null || global === void 0 ? void 0 : global.processosJuridicosData) === null || _c === void 0 ? void 0 : _c.empresa) === null || _d === void 0 ? void 0 : _d.some(function (p) { return p.id === processo.id; }));
49
+ ((_d = (_c = global === null || global === void 0 ? void 0 : global.liminar) === null || _c === void 0 ? void 0 : _c.processosComLiminarIds) === null || _d === void 0 ? void 0 : _d.includes(processo.id));
50
+ var isInverted = (_f = (_e = global === null || global === void 0 ? void 0 : global.liminar) === null || _e === void 0 ? void 0 : _e.invertedProcessos) === null || _f === void 0 ? void 0 : _f.includes(processo.id);
51
+ var tooltipText = isInverted
52
+ ? 'Atenção: Em alguns casos, o sistema judicial pode registrar os polos das partes de forma invertida, dificultando a interpretação direta.'
53
+ : hasLiminar
54
+ ? 'Indício de liminar identificada.'
55
+ : '';
50
56
  return (React.createElement(ProcessoJuridicoWrapper, { id: processo.id, className: highlighted ? 'highlighted-process' : '' },
51
57
  React.createElement(ResultWrapper, null,
52
58
  React.createElement(ResultContent, { fullWidth: true, desktop: "1.5fr 1.5fr repeat(3, 1fr)", tablet: "repeat(3, 1fr)" },
53
- React.createElement(AddProcessoJuridicoField, { name: "N\u00FAmero CNJ", value: hasLiminar ? (React.createElement(CNJWithIcon, null,
59
+ React.createElement(AddProcessoJuridicoField, { name: "N\u00FAmero CNJ", value: hasLiminar ? (React.createElement(CNJWithIcon, { "data-tooltip": tooltipText },
54
60
  React.createElement(WarningCircle, { size: 18, weight: "fill", style: { color: '#FFA500' } }),
55
61
  React.createElement("span", null, processo.numero_novo))) : (processo.numero_novo) }),
56
62
  React.createElement(AddProcessoJuridicoField, { name: "Assunto(s)", value: processo.assuntos }),
@@ -4,6 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import { createGlobalStyle, css } from 'styled-components';
6
6
  var OpenSansFont = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n @import url('https://fonts.googleapis.com/css?family=Open%20Sans%20Condensed:300,400,500,600,700');\n"], ["\n @import url('https://fonts.googleapis.com/css?family=Open%20Sans%20Condensed:300,400,500,600,700');\n"])));
7
- var GlobalStyle = createGlobalStyle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n * {\n ", "\n font-family: 'Open Sans Condensed';\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n -webkit-font-smoothing: antialiased;\n }\n\n @media print {\n button,\n [class*=\"Button\"],\n [class^=\"Button\"],\n [class*=\"btn\"],\n [class^=\"btn\"],\n .button,\n .btn {\n display: none !important;\n }\n }\n\n @keyframes highlight {\n from {\n background-color: rgba(255, 215, 0, 0.35);\n }\n to {\n background-color: transparent;\n }\n }\n\n .highlighted-process {\n animation: highlight 3s ease-out forwards !important;\n }\n"], ["\n * {\n ", "\n font-family: 'Open Sans Condensed';\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n -webkit-font-smoothing: antialiased;\n }\n\n @media print {\n button,\n [class*=\"Button\"],\n [class^=\"Button\"],\n [class*=\"btn\"],\n [class^=\"btn\"],\n .button,\n .btn {\n display: none !important;\n }\n }\n\n @keyframes highlight {\n from {\n background-color: rgba(255, 215, 0, 0.35);\n }\n to {\n background-color: transparent;\n }\n }\n\n .highlighted-process {\n animation: highlight 3s ease-out forwards !important;\n }\n"])), OpenSansFont);
7
+ var GlobalStyle = createGlobalStyle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n * {\n ", "\n font-family: 'Open Sans Condensed';\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n -webkit-font-smoothing: antialiased;\n }\n\n @media print {\n button,\n [class*=\"Button\"],\n [class^=\"Button\"],\n [class*=\"btn\"],\n [class^=\"btn\"],\n .button,\n .btn {\n display: none !important;\n }\n }\n\n @keyframes highlight {\n from {\n background-color: rgba(255, 215, 0, 0.35);\n }\n to {\n background-color: transparent;\n }\n }\n\n .highlighted-process {\n animation: highlight 3s ease-out forwards !important;\n }\n\n .blue-highlighted-process {\n animation: blueHighlight 2.5s ease-in-out;\n background-color: rgba(0, 122, 255, 0.15);\n transition: background-color 0.3s ease-in-out;\n }\n\n @keyframes blueHighlight {\n from {\n background-color: rgba(0, 122, 255, 0.35);\n }\n to {\n background-color: rgba(0, 122, 255, 0.15);\n }\n }\n"], ["\n * {\n ", "\n font-family: 'Open Sans Condensed';\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n -webkit-font-smoothing: antialiased;\n }\n\n @media print {\n button,\n [class*=\"Button\"],\n [class^=\"Button\"],\n [class*=\"btn\"],\n [class^=\"btn\"],\n .button,\n .btn {\n display: none !important;\n }\n }\n\n @keyframes highlight {\n from {\n background-color: rgba(255, 215, 0, 0.35);\n }\n to {\n background-color: transparent;\n }\n }\n\n .highlighted-process {\n animation: highlight 3s ease-out forwards !important;\n }\n\n .blue-highlighted-process {\n animation: blueHighlight 2.5s ease-in-out;\n background-color: rgba(0, 122, 255, 0.15);\n transition: background-color 0.3s ease-in-out;\n }\n\n @keyframes blueHighlight {\n from {\n background-color: rgba(0, 122, 255, 0.35);\n }\n to {\n background-color: rgba(0, 122, 255, 0.15);\n }\n }\n"])), OpenSansFont);
8
8
  export default GlobalStyle;
9
9
  var templateObject_1, templateObject_2;