@granto-umbrella/umbrella-components 3.0.32 → 3.0.34

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.
Files changed (54) hide show
  1. package/package.json +4 -5
  2. package/src/components/atoms/DatePickerInput/DatePicker.styles.ts +75 -75
  3. package/src/components/atoms/DatePickerInput/DatePickerInput.tsx +154 -154
  4. package/src/components/atoms/DropDownMenu/DropdownMenu.styles.tsx +106 -106
  5. package/src/components/atoms/ErrorMessage/ErrorMessage.styles.tsx +6 -6
  6. package/src/components/atoms/Footer/Footer.styles.tsx +1 -1
  7. package/src/components/atoms/GenericContainer/GenericContainer.styles.tsx +6 -6
  8. package/src/components/atoms/Input/Input.tsx +80 -80
  9. package/src/components/atoms/Input/Input.types.ts +21 -21
  10. package/src/components/atoms/Label/Label.styles.ts +16 -16
  11. package/src/components/atoms/Loading/Loading.styles.tsx +7 -5
  12. package/src/components/atoms/Loading/index.tsx +1 -1
  13. package/src/components/atoms/LogoContainer/LogoContainer.styles.tsx +4 -4
  14. package/src/components/atoms/ModalAviso/ModalAviso.styles.tsx +10 -9
  15. package/src/components/atoms/MultiSelect/index.tsx +1 -1
  16. package/src/components/atoms/RadioButton/RadioButton.types.ts +9 -9
  17. package/src/components/atoms/ResendLink/index.tsx +2 -1
  18. package/src/components/atoms/Select/Select.types.ts +19 -19
  19. package/src/components/atoms/Skeleton/Skeleton.styles.ts +32 -32
  20. package/src/components/atoms/Skeleton/Skeleton.tsx +43 -43
  21. package/src/components/atoms/Skeleton/Skeleton.types.ts +13 -13
  22. package/src/components/atoms/Subtitle/Subtitle.styles.tsx +21 -21
  23. package/src/components/atoms/Switch/Switch.styles.ts +59 -59
  24. package/src/components/atoms/Switch/Switch.types.ts +7 -7
  25. package/src/components/atoms/TabBar/TabBar.tsx +24 -24
  26. package/src/components/atoms/TabBar/TabBar.types.ts +11 -11
  27. package/src/components/atoms/Text/Text.styles.tsx +18 -6
  28. package/src/components/atoms/Text/Text.tsx +9 -4
  29. package/src/components/atoms/Text/Text.types.ts +2 -1
  30. package/src/components/atoms/Textarea/Textarea.types.ts +7 -7
  31. package/src/components/atoms/Title/Title.styles.tsx +17 -17
  32. package/src/components/molecules/BannerAjuda/BannerAjuda.types.ts +5 -5
  33. package/src/components/molecules/ButtonGroup/ButtonGroup.tsx +27 -27
  34. package/src/components/molecules/CodeInputContainer/CodeInputContainer.tsx +32 -32
  35. package/src/components/molecules/HighlightsCard/HighlightsCard.tsx +1 -1
  36. package/src/components/molecules/InsuranceCard/InsuranceCard.styles.tsx +1 -1
  37. package/src/components/molecules/InsuranceCard/InsuranceCard.tsx +455 -455
  38. package/src/components/molecules/InsuranceCard/InsuranceCard.types.ts +41 -41
  39. package/src/components/molecules/ResultsChart/ResultsChart.styles.tsx +26 -26
  40. package/src/components/molecules/TimeLine/TimeLine.mapper.ts +69 -69
  41. package/src/components/molecules/TimeLine/TimeLine.styles.ts +154 -154
  42. package/src/components/molecules/TimeLine/TimeLine.tsx +96 -96
  43. package/src/components/molecules/TimeLine/TimeLine.types.ts +124 -124
  44. package/src/components/organisms/AlertDialog/AlertDialog.types.ts +14 -14
  45. package/src/components/organisms/Navbar/Navbar.styles.tsx +1 -1
  46. package/src/components/organisms/Navbar/Navbar.tsx +118 -118
  47. package/src/components/organisms/Navbar/Navbar.types.ts +34 -34
  48. package/src/components/organisms/TimelineModal/TimelineModal.styles.ts +49 -49
  49. package/src/components/organisms/TimelineModal/TimelineModal.tsx +49 -49
  50. package/src/index.ts +157 -157
  51. package/src/styles/tokens/colors.ts +296 -296
  52. package/src/styles/tokens/typography.ts +161 -161
  53. package/src/types/colors.types.ts +21 -21
  54. package/src/types/sizes.types.ts +4 -4
@@ -1,455 +1,455 @@
1
- /* eslint-disable @typescript-eslint/no-explicit-any */
2
- import { cnpj } from 'cpf-cnpj-validator';
3
- import { format, parseISO } from 'date-fns';
4
- import {
5
- ChevronDown,
6
- ChevronUp,
7
- CreditCard,
8
- Download,
9
- FileText,
10
- Loader2,
11
- PlusCircle,
12
- } from 'lucide-react';
13
- import mask from 'make-mask';
14
- import { ArrowCircleUpRight, Cube, FlowArrow, XCircle } from 'phosphor-react';
15
- import React, { useState } from 'react';
16
-
17
- import Pill from '../../atoms/Pill/Pill';
18
- import { mapRemoteToTimeline } from '../../molecules/TimeLine/TimeLine.mapper';
19
- import { TimelineModal } from '../../organisms/TimelineModal/TimelineModal';
20
- import { ExcludeModal } from '../ExcludeModal';
21
- import { RefuseModal } from '../RefuseModal';
22
- import {
23
- ActionButton,
24
- Actions,
25
- BodyRow,
26
- CardContainer,
27
- DropdownMenu,
28
- DropdownWrapper,
29
- HeaderRow,
30
- InfoLabel,
31
- InfoRow,
32
- InfoSubValue,
33
- InfoValue,
34
- MenuItemProps,
35
- ProcessValue,
36
- ProdValue,
37
- StyledMenuItem,
38
- Text,
39
- TruncatedValue,
40
- } from './InsuranceCard.styles';
41
- import { InsuranceCardProps, StatusVariant } from './InsuranceCard.types';
42
-
43
- export const InsuranceCard: React.FC<InsuranceCardProps> = ({
44
- idGranto,
45
- idOrder,
46
- idInsurance,
47
- idInterno,
48
- isSupply,
49
- hasMinute,
50
- statusLabel,
51
- statusVariant,
52
- seguradoName,
53
- seguradoCnpj,
54
- product,
55
- issuedDate,
56
- totalValue,
57
- processId,
58
- activeIndex,
59
- testId,
60
- openCardId,
61
- setOpenCardId,
62
- runQuery,
63
- useDownloadAndSupport,
64
- useDownloadFile,
65
- useChangeOrderStageAsync,
66
- useMyStore,
67
- useQueryClient,
68
- useGetTimeline,
69
- useAuthStoreV2,
70
- navigate,
71
- }) => {
72
- const [loadingItem, setLoadingItem] = useState<string | null>(null);
73
- const [showRefuseModal, setShowRefuseModal] = useState(false);
74
- const [showExcludeModal, setShowExcludeModal] = useState(false);
75
- const [showTimeline, setShowTimeline] = useState(false);
76
- const [timelineItems, setTimelineItems] = useState<
77
- ReturnType<typeof mapRemoteToTimeline>
78
- >([]);
79
- const { isLoading: isTimelineLoading, refetch: fetchTimeline } =
80
- useGetTimeline({ orderId: idOrder, insuranceId: idInsurance });
81
-
82
- const showTimelineToggle = async () => {
83
- const willOpen = !showTimeline;
84
-
85
- if (willOpen && (!timelineItems || timelineItems.length === 0)) {
86
- setLoadingItem('linha_do_tempo');
87
- setShowTimeline(true);
88
- try {
89
- const { data: remote } = await fetchTimeline();
90
- setTimelineItems(mapRemoteToTimeline(remote ?? []));
91
- } catch (err) {
92
- console.error('Falha ao carregar timeline', err);
93
- } finally {
94
- setLoadingItem(null);
95
- }
96
- return;
97
- }
98
-
99
- setShowTimeline(willOpen);
100
- };
101
-
102
- const isOpen = openCardId === idOrder;
103
-
104
- const toggleOpen = () => {
105
- setOpenCardId(isOpen ? null : idOrder);
106
- };
107
-
108
- const handleClick = async (
109
- key: string,
110
- callback: () => Promise<void> | void
111
- ) => {
112
- setLoadingItem(key);
113
- await Promise.resolve(callback());
114
- setLoadingItem(null);
115
- };
116
-
117
- const { isAllowedByRoles } = useAuthStoreV2();
118
-
119
- const [productTitle, productDescription] = product;
120
-
121
- const { downloadFile, searchCerts } = useDownloadFile(idOrder);
122
- const { onEndorsementClick } = useDownloadAndSupport();
123
- const mutateStageOrder = useChangeOrderStageAsync();
124
- const { setData } = useMyStore();
125
- const queryClient = useQueryClient();
126
-
127
- const irParaContinuarEmissao = () => {
128
- const stateData = idInsurance
129
- ? { idInsurance, isSupply }
130
- : { idOrder, isSupply };
131
- if (
132
- statusLabel === 'Proposta recusada' ||
133
- statusLabel === 'Proposta excluída'
134
- ) {
135
- mutateStageOrder.mutateAsync(
136
- {
137
- id: idGranto,
138
- newStage: 'IDLE',
139
- },
140
- {
141
- onSuccess: () => {
142
- queryClient.invalidateQueries({ queryKey: ['orders'] });
143
- },
144
- }
145
- );
146
- }
147
- navigate('/issue', { state: stateData });
148
-
149
- setData({});
150
- };
151
- const abrirModalExcluirProposta = () => setShowExcludeModal(true);
152
- const fecharModalExclusao = () => setShowExcludeModal(false);
153
-
154
- const confirmarExclusao = () => {
155
- runQuery();
156
- fecharModalExclusao();
157
- };
158
- const abrirModalRecusarProposta = () => setShowRefuseModal(true);
159
- const fecharModalRecusa = () => setShowRefuseModal(false);
160
-
161
- const confirmarRecusa = () => {
162
- runQuery();
163
- fecharModalRecusa();
164
- };
165
-
166
- return (
167
- <CardContainer
168
- data-testid={testId}
169
- id={testId}
170
- $variant={statusVariant as StatusVariant}
171
- >
172
- <ExcludeModal
173
- open={showExcludeModal}
174
- onOpenChange={setShowExcludeModal}
175
- onConfirm={confirmarExclusao}
176
- onClose={fecharModalExclusao}
177
- orderId={idGranto}
178
- />
179
- <RefuseModal
180
- open={showRefuseModal}
181
- onOpenChange={setShowRefuseModal}
182
- onConfirm={confirmarRecusa}
183
- onClose={fecharModalRecusa}
184
- orderId={idGranto}
185
- />
186
- <TimelineModal
187
- open={showTimeline}
188
- onOpenChange={setShowTimeline}
189
- onClose={() => setShowTimeline(false)}
190
- data={timelineItems}
191
- loading={isTimelineLoading}
192
- onRetry={fetchTimeline}
193
- />
194
- <HeaderRow>
195
- {isSupply && (
196
- <Pill size={'sm'} variant="supply">
197
- <Cube />
198
- Suppliers
199
- </Pill>
200
- )}
201
- <Text>ID Granto: {idGranto}</Text>
202
- <Text>ID interno: {idInterno}</Text>
203
- <Text $variant={statusVariant as StatusVariant}>
204
- {activeIndex === 0 ? 'Etapa' : 'Status'}: {statusLabel}
205
- </Text>
206
- </HeaderRow>
207
- <BodyRow>
208
- <InfoRow>
209
- <InfoLabel>Segurado</InfoLabel>
210
- <TruncatedValue>{seguradoName}</TruncatedValue>
211
- <InfoSubValue>
212
- {mask(
213
- seguradoCnpj,
214
- cnpj.isValid(seguradoCnpj)
215
- ? '00.000.000/0000-00'
216
- : '000.000.000-00'
217
- )}
218
- </InfoSubValue>
219
- </InfoRow>
220
- <InfoRow>
221
- <InfoLabel>Produto</InfoLabel>
222
- <ProdValue>{productTitle}</ProdValue>
223
- <InfoSubValue>{productDescription}</InfoSubValue>
224
- </InfoRow>
225
- <InfoRow>
226
- <InfoLabel>
227
- {activeIndex === 0 ? 'Iniciado em' : 'Emitido em'}
228
- </InfoLabel>
229
- <InfoValue>{format(parseISO(issuedDate), 'dd/MM/yyyy')}</InfoValue>
230
- </InfoRow>
231
- <InfoRow>
232
- <InfoLabel>
233
- {' '}
234
- {activeIndex === 0 ? 'Valor a ser pago' : 'Valor pago'}
235
- </InfoLabel>
236
- <InfoValue>{totalValue}</InfoValue>
237
- </InfoRow>
238
- <InfoRow>
239
- <InfoLabel>Processo</InfoLabel>
240
- <ProcessValue>
241
- {processId
242
- ? mask(processId || '', '0000000-00.0000.0.00.0000')
243
- : '-'}
244
- </ProcessValue>
245
- </InfoRow>
246
- <Actions>
247
- <DropdownWrapper>
248
- <ActionButton
249
- data-testid={`btn_minhas_emissoes_mais_informacoes_${processId}`}
250
- id={`btn_minhas_emissoes_mais_informacoes_${processId}`}
251
- onClick={toggleOpen}
252
- >
253
- Mais informações{' '}
254
- {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
255
- </ActionButton>
256
- {isOpen && activeIndex === 0 && (
257
- <DropdownMenu>
258
- <MenuItem
259
- data-testid={`btn_minhas_linha_do_tempo_${processId}`}
260
- id={`btn_minhas_linha_do_tempo_${processId}`}
261
- icon={
262
- loadingItem === 'linha_do_tempo' || isTimelineLoading ? (
263
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
264
- ) : (
265
- <FlowArrow size={16} />
266
- )
267
- }
268
- onClick={() =>
269
- handleClick('linha_do_tempo', showTimelineToggle)
270
- }
271
- >
272
- Linha do tempo
273
- </MenuItem>
274
- <MenuItem
275
- data-testid={`btn_minhas_emissoes_continuar_emissao_${processId}`}
276
- id={`btn_minhas_emissoes_continuar_emissao_${processId}`}
277
- icon={
278
- loadingItem === 'continuar_emissao' ? (
279
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
280
- ) : (
281
- <ArrowCircleUpRight size={16} />
282
- )
283
- }
284
- onClick={() =>
285
- handleClick('continuar_emissao', irParaContinuarEmissao)
286
- }
287
- >
288
- Continuar emissão
289
- </MenuItem>
290
- {hasMinute && isAllowedByRoles('user') && (
291
- <MenuItem
292
- data-testid={`btn_minhas_emissoes_baixar_minuta_${processId}`}
293
- id={`btn_minhas_emissoes_baixar_minuta_${processId}`}
294
- icon={
295
- loadingItem === 'minuta' ? (
296
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
297
- ) : (
298
- <Download size={16} />
299
- )
300
- }
301
- onClick={() =>
302
- handleClick('minuta', () => downloadFile('MINUTE', true))
303
- }
304
- >
305
- Baixar minuta
306
- </MenuItem>
307
- )}
308
- {statusLabel === 'Aguardando aprovação' && (
309
- <MenuItem
310
- danger
311
- data-testid={`btn_minhas_emissoes_recusar_proposta_${processId}`}
312
- id={`btn_minhas_emissoes_recusar_proposta_${processId}`}
313
- icon={
314
- loadingItem === 'recusar_proposta' ? (
315
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
316
- ) : (
317
- <XCircle size={16} />
318
- )
319
- }
320
- onClick={() =>
321
- handleClick('recusar_proposta', abrirModalRecusarProposta)
322
- }
323
- >
324
- Recusar proposta
325
- </MenuItem>
326
- )}
327
- {statusLabel === 'Proposta recusada' && (
328
- <MenuItem
329
- danger
330
- data-testid={`btn_minhas_emissoes_excluir_proposta_${processId}`}
331
- id={`btn_minhas_emissoes_excluir_proposta_${processId}`}
332
- icon={
333
- loadingItem === 'excluir_proposta' ? (
334
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
335
- ) : (
336
- <XCircle size={16} />
337
- )
338
- }
339
- onClick={() =>
340
- handleClick('excluir_proposta', abrirModalExcluirProposta)
341
- }
342
- >
343
- Excluir proposta
344
- </MenuItem>
345
- )}
346
- </DropdownMenu>
347
- )}
348
- {isOpen && activeIndex === 1 && (
349
- <DropdownMenu>
350
- <MenuItem
351
- data-testid={`btn_minhas_linha_do_tempo_${processId}`}
352
- id={`btn_minhas_linha_do_tempo_${processId}`}
353
- icon={
354
- loadingItem === 'linha_do_tempo' || isTimelineLoading ? (
355
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
356
- ) : (
357
- <FlowArrow size={16} />
358
- )
359
- }
360
- onClick={() =>
361
- handleClick('linha_do_tempo', showTimelineToggle)
362
- }
363
- >
364
- Linha do tempo
365
- </MenuItem>
366
- <MenuItem
367
- data-testid={`btn_minhas_emissoes_baixar_apolice_${processId}`}
368
- id={`btn_minhas_emissoes_baixar_apolice_${processId}`}
369
- icon={
370
- loadingItem === 'apolice' ? (
371
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
372
- ) : (
373
- <FileText size={16} />
374
- )
375
- }
376
- onClick={() =>
377
- handleClick('apolice', () => downloadFile('POLICY', true))
378
- }
379
- >
380
- Baixar apólice
381
- </MenuItem>
382
- <MenuItem
383
- data-testid={`btn_minhas_emissoes_baixar_boleto_${processId}`}
384
- id={`btn_minhas_emissoes_baixar_boleto_${processId}`}
385
- icon={
386
- loadingItem === 'boleto' ? (
387
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
388
- ) : (
389
- <CreditCard size={16} />
390
- )
391
- }
392
- onClick={() =>
393
- handleClick('boleto', () => downloadFile('SLIP', true))
394
- }
395
- >
396
- Baixar boleto
397
- </MenuItem>
398
- <MenuItem
399
- data-testid={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
400
- id={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
401
- icon={
402
- loadingItem === 'certidoes' ? (
403
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
404
- ) : (
405
- <Download size={16} />
406
- )
407
- }
408
- onClick={() =>
409
- handleClick('certidoes', () =>
410
- searchCerts(idInsurance!, idOrder)
411
- )
412
- }
413
- >
414
- Baixar certidões
415
- </MenuItem>
416
- <MenuItem
417
- data-testid={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
418
- id={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
419
- icon={
420
- loadingItem === 'endosso' ? (
421
- <Loader2 className="mr-2 h-5 w-5 animate-spin" />
422
- ) : (
423
- <PlusCircle size={16} />
424
- )
425
- }
426
- onClick={() =>
427
- handleClick('endosso', () =>
428
- onEndorsementClick('Umbrela Corp', idInsurance!)
429
- )
430
- }
431
- >
432
- Solicitar endosso
433
- </MenuItem>
434
- </DropdownMenu>
435
- )}
436
- </DropdownWrapper>
437
- </Actions>
438
- </BodyRow>
439
- </CardContainer>
440
- );
441
- };
442
-
443
- const MenuItem: React.FC<MenuItemProps> = ({
444
- icon,
445
- danger,
446
- children,
447
- ...rest
448
- }) => {
449
- return (
450
- <StyledMenuItem {...rest} $danger={danger}>
451
- {icon}
452
- {children}
453
- </StyledMenuItem>
454
- );
455
- };
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ import { cnpj } from 'cpf-cnpj-validator';
3
+ import { format, parseISO } from 'date-fns';
4
+ import {
5
+ ChevronDown,
6
+ ChevronUp,
7
+ CreditCard,
8
+ Download,
9
+ FileText,
10
+ Loader2,
11
+ PlusCircle,
12
+ } from 'lucide-react';
13
+ import mask from 'make-mask';
14
+ import { ArrowCircleUpRight, Cube, FlowArrow, XCircle } from 'phosphor-react';
15
+ import React, { useState } from 'react';
16
+
17
+ import Pill from '../../atoms/Pill/Pill';
18
+ import { mapRemoteToTimeline } from '../../molecules/TimeLine/TimeLine.mapper';
19
+ import { TimelineModal } from '../../organisms/TimelineModal/TimelineModal';
20
+ import { ExcludeModal } from '../ExcludeModal';
21
+ import { RefuseModal } from '../RefuseModal';
22
+ import {
23
+ ActionButton,
24
+ Actions,
25
+ BodyRow,
26
+ CardContainer,
27
+ DropdownMenu,
28
+ DropdownWrapper,
29
+ HeaderRow,
30
+ InfoLabel,
31
+ InfoRow,
32
+ InfoSubValue,
33
+ InfoValue,
34
+ MenuItemProps,
35
+ ProcessValue,
36
+ ProdValue,
37
+ StyledMenuItem,
38
+ Text,
39
+ TruncatedValue,
40
+ } from './InsuranceCard.styles';
41
+ import { InsuranceCardProps, StatusVariant } from './InsuranceCard.types';
42
+
43
+ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
44
+ idGranto,
45
+ idOrder,
46
+ idInsurance,
47
+ idInterno,
48
+ isSupply,
49
+ hasMinute,
50
+ statusLabel,
51
+ statusVariant,
52
+ seguradoName,
53
+ seguradoCnpj,
54
+ product,
55
+ issuedDate,
56
+ totalValue,
57
+ processId,
58
+ activeIndex,
59
+ testId,
60
+ openCardId,
61
+ setOpenCardId,
62
+ runQuery,
63
+ useDownloadAndSupport,
64
+ useDownloadFile,
65
+ useChangeOrderStageAsync,
66
+ useMyStore,
67
+ useQueryClient,
68
+ useGetTimeline,
69
+ useAuthStoreV2,
70
+ navigate,
71
+ }) => {
72
+ const [loadingItem, setLoadingItem] = useState<string | null>(null);
73
+ const [showRefuseModal, setShowRefuseModal] = useState(false);
74
+ const [showExcludeModal, setShowExcludeModal] = useState(false);
75
+ const [showTimeline, setShowTimeline] = useState(false);
76
+ const [timelineItems, setTimelineItems] = useState<
77
+ ReturnType<typeof mapRemoteToTimeline>
78
+ >([]);
79
+ const { isLoading: isTimelineLoading, refetch: fetchTimeline } =
80
+ useGetTimeline({ orderId: idOrder, insuranceId: idInsurance });
81
+
82
+ const showTimelineToggle = async () => {
83
+ const willOpen = !showTimeline;
84
+
85
+ if (willOpen && (!timelineItems || timelineItems.length === 0)) {
86
+ setLoadingItem('linha_do_tempo');
87
+ setShowTimeline(true);
88
+ try {
89
+ const { data: remote } = await fetchTimeline();
90
+ setTimelineItems(mapRemoteToTimeline(remote ?? []));
91
+ } catch (err) {
92
+ console.error('Falha ao carregar timeline', err);
93
+ } finally {
94
+ setLoadingItem(null);
95
+ }
96
+ return;
97
+ }
98
+
99
+ setShowTimeline(willOpen);
100
+ };
101
+
102
+ const isOpen = openCardId === idOrder;
103
+
104
+ const toggleOpen = () => {
105
+ setOpenCardId(isOpen ? null : idOrder);
106
+ };
107
+
108
+ const handleClick = async (
109
+ key: string,
110
+ callback: () => Promise<void> | void
111
+ ) => {
112
+ setLoadingItem(key);
113
+ await Promise.resolve(callback());
114
+ setLoadingItem(null);
115
+ };
116
+
117
+ const { isAllowedByRoles } = useAuthStoreV2();
118
+
119
+ const [productTitle, productDescription] = product;
120
+
121
+ const { downloadFile, searchCerts } = useDownloadFile(idOrder);
122
+ const { onEndorsementClick } = useDownloadAndSupport();
123
+ const mutateStageOrder = useChangeOrderStageAsync();
124
+ const { setData } = useMyStore();
125
+ const queryClient = useQueryClient();
126
+
127
+ const irParaContinuarEmissao = () => {
128
+ const stateData = idInsurance
129
+ ? { idInsurance, isSupply }
130
+ : { idOrder, isSupply };
131
+ if (
132
+ statusLabel === 'Proposta recusada' ||
133
+ statusLabel === 'Proposta excluída'
134
+ ) {
135
+ mutateStageOrder.mutateAsync(
136
+ {
137
+ id: idGranto,
138
+ newStage: 'IDLE',
139
+ },
140
+ {
141
+ onSuccess: () => {
142
+ queryClient.invalidateQueries({ queryKey: ['orders'] });
143
+ },
144
+ }
145
+ );
146
+ }
147
+ navigate('/issue', { state: stateData });
148
+
149
+ setData({});
150
+ };
151
+ const abrirModalExcluirProposta = () => setShowExcludeModal(true);
152
+ const fecharModalExclusao = () => setShowExcludeModal(false);
153
+
154
+ const confirmarExclusao = () => {
155
+ runQuery();
156
+ fecharModalExclusao();
157
+ };
158
+ const abrirModalRecusarProposta = () => setShowRefuseModal(true);
159
+ const fecharModalRecusa = () => setShowRefuseModal(false);
160
+
161
+ const confirmarRecusa = () => {
162
+ runQuery();
163
+ fecharModalRecusa();
164
+ };
165
+
166
+ return (
167
+ <CardContainer
168
+ data-testid={testId}
169
+ id={testId}
170
+ $variant={statusVariant as StatusVariant}
171
+ >
172
+ <ExcludeModal
173
+ open={showExcludeModal}
174
+ onOpenChange={setShowExcludeModal}
175
+ onConfirm={confirmarExclusao}
176
+ onClose={fecharModalExclusao}
177
+ orderId={idGranto}
178
+ />
179
+ <RefuseModal
180
+ open={showRefuseModal}
181
+ onOpenChange={setShowRefuseModal}
182
+ onConfirm={confirmarRecusa}
183
+ onClose={fecharModalRecusa}
184
+ orderId={idGranto}
185
+ />
186
+ <TimelineModal
187
+ open={showTimeline}
188
+ onOpenChange={setShowTimeline}
189
+ onClose={() => setShowTimeline(false)}
190
+ data={timelineItems}
191
+ loading={isTimelineLoading}
192
+ onRetry={fetchTimeline}
193
+ />
194
+ <HeaderRow>
195
+ {isSupply && (
196
+ <Pill size={'sm'} variant="supply">
197
+ <Cube />
198
+ Suppliers
199
+ </Pill>
200
+ )}
201
+ <Text>ID Granto: {idGranto}</Text>
202
+ <Text>ID interno: {idInterno}</Text>
203
+ <Text $variant={statusVariant as StatusVariant}>
204
+ {activeIndex === 0 ? 'Etapa' : 'Status'}: {statusLabel}
205
+ </Text>
206
+ </HeaderRow>
207
+ <BodyRow>
208
+ <InfoRow>
209
+ <InfoLabel>Segurado</InfoLabel>
210
+ <TruncatedValue>{seguradoName}</TruncatedValue>
211
+ <InfoSubValue>
212
+ {mask(
213
+ seguradoCnpj,
214
+ cnpj.isValid(seguradoCnpj)
215
+ ? '00.000.000/0000-00'
216
+ : '000.000.000-00'
217
+ )}
218
+ </InfoSubValue>
219
+ </InfoRow>
220
+ <InfoRow>
221
+ <InfoLabel>Produto</InfoLabel>
222
+ <ProdValue>{productTitle}</ProdValue>
223
+ <InfoSubValue>{productDescription}</InfoSubValue>
224
+ </InfoRow>
225
+ <InfoRow>
226
+ <InfoLabel>
227
+ {activeIndex === 0 ? 'Iniciado em' : 'Emitido em'}
228
+ </InfoLabel>
229
+ <InfoValue>{format(parseISO(issuedDate), 'dd/MM/yyyy')}</InfoValue>
230
+ </InfoRow>
231
+ <InfoRow>
232
+ <InfoLabel>
233
+ {' '}
234
+ {activeIndex === 0 ? 'Valor a ser pago' : 'Valor pago'}
235
+ </InfoLabel>
236
+ <InfoValue>{totalValue}</InfoValue>
237
+ </InfoRow>
238
+ <InfoRow>
239
+ <InfoLabel>Processo</InfoLabel>
240
+ <ProcessValue>
241
+ {processId
242
+ ? mask(processId || '', '0000000-00.0000.0.00.0000')
243
+ : '-'}
244
+ </ProcessValue>
245
+ </InfoRow>
246
+ <Actions>
247
+ <DropdownWrapper>
248
+ <ActionButton
249
+ data-testid={`btn_minhas_emissoes_mais_informacoes_${processId}`}
250
+ id={`btn_minhas_emissoes_mais_informacoes_${processId}`}
251
+ onClick={toggleOpen}
252
+ >
253
+ Mais informações{' '}
254
+ {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
255
+ </ActionButton>
256
+ {isOpen && activeIndex === 0 && (
257
+ <DropdownMenu>
258
+ <MenuItem
259
+ data-testid={`btn_minhas_linha_do_tempo_${processId}`}
260
+ id={`btn_minhas_linha_do_tempo_${processId}`}
261
+ icon={
262
+ loadingItem === 'linha_do_tempo' || isTimelineLoading ? (
263
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
264
+ ) : (
265
+ <FlowArrow size={16} />
266
+ )
267
+ }
268
+ onClick={() =>
269
+ handleClick('linha_do_tempo', showTimelineToggle)
270
+ }
271
+ >
272
+ Linha do tempo
273
+ </MenuItem>
274
+ <MenuItem
275
+ data-testid={`btn_minhas_emissoes_continuar_emissao_${processId}`}
276
+ id={`btn_minhas_emissoes_continuar_emissao_${processId}`}
277
+ icon={
278
+ loadingItem === 'continuar_emissao' ? (
279
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
280
+ ) : (
281
+ <ArrowCircleUpRight size={16} />
282
+ )
283
+ }
284
+ onClick={() =>
285
+ handleClick('continuar_emissao', irParaContinuarEmissao)
286
+ }
287
+ >
288
+ Continuar emissão
289
+ </MenuItem>
290
+ {hasMinute && isAllowedByRoles('user') && (
291
+ <MenuItem
292
+ data-testid={`btn_minhas_emissoes_baixar_minuta_${processId}`}
293
+ id={`btn_minhas_emissoes_baixar_minuta_${processId}`}
294
+ icon={
295
+ loadingItem === 'minuta' ? (
296
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
297
+ ) : (
298
+ <Download size={16} />
299
+ )
300
+ }
301
+ onClick={() =>
302
+ handleClick('minuta', () => downloadFile('MINUTE', true))
303
+ }
304
+ >
305
+ Baixar minuta
306
+ </MenuItem>
307
+ )}
308
+ {statusLabel === 'Aguardando aprovação' && (
309
+ <MenuItem
310
+ danger
311
+ data-testid={`btn_minhas_emissoes_recusar_proposta_${processId}`}
312
+ id={`btn_minhas_emissoes_recusar_proposta_${processId}`}
313
+ icon={
314
+ loadingItem === 'recusar_proposta' ? (
315
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
316
+ ) : (
317
+ <XCircle size={16} />
318
+ )
319
+ }
320
+ onClick={() =>
321
+ handleClick('recusar_proposta', abrirModalRecusarProposta)
322
+ }
323
+ >
324
+ Recusar proposta
325
+ </MenuItem>
326
+ )}
327
+ {statusLabel === 'Proposta recusada' && (
328
+ <MenuItem
329
+ danger
330
+ data-testid={`btn_minhas_emissoes_excluir_proposta_${processId}`}
331
+ id={`btn_minhas_emissoes_excluir_proposta_${processId}`}
332
+ icon={
333
+ loadingItem === 'excluir_proposta' ? (
334
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
335
+ ) : (
336
+ <XCircle size={16} />
337
+ )
338
+ }
339
+ onClick={() =>
340
+ handleClick('excluir_proposta', abrirModalExcluirProposta)
341
+ }
342
+ >
343
+ Excluir proposta
344
+ </MenuItem>
345
+ )}
346
+ </DropdownMenu>
347
+ )}
348
+ {isOpen && activeIndex === 1 && (
349
+ <DropdownMenu>
350
+ <MenuItem
351
+ data-testid={`btn_minhas_linha_do_tempo_${processId}`}
352
+ id={`btn_minhas_linha_do_tempo_${processId}`}
353
+ icon={
354
+ loadingItem === 'linha_do_tempo' || isTimelineLoading ? (
355
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
356
+ ) : (
357
+ <FlowArrow size={16} />
358
+ )
359
+ }
360
+ onClick={() =>
361
+ handleClick('linha_do_tempo', showTimelineToggle)
362
+ }
363
+ >
364
+ Linha do tempo
365
+ </MenuItem>
366
+ <MenuItem
367
+ data-testid={`btn_minhas_emissoes_baixar_apolice_${processId}`}
368
+ id={`btn_minhas_emissoes_baixar_apolice_${processId}`}
369
+ icon={
370
+ loadingItem === 'apolice' ? (
371
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
372
+ ) : (
373
+ <FileText size={16} />
374
+ )
375
+ }
376
+ onClick={() =>
377
+ handleClick('apolice', () => downloadFile('POLICY', true))
378
+ }
379
+ >
380
+ Baixar apólice
381
+ </MenuItem>
382
+ <MenuItem
383
+ data-testid={`btn_minhas_emissoes_baixar_boleto_${processId}`}
384
+ id={`btn_minhas_emissoes_baixar_boleto_${processId}`}
385
+ icon={
386
+ loadingItem === 'boleto' ? (
387
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
388
+ ) : (
389
+ <CreditCard size={16} />
390
+ )
391
+ }
392
+ onClick={() =>
393
+ handleClick('boleto', () => downloadFile('SLIP', true))
394
+ }
395
+ >
396
+ Baixar boleto
397
+ </MenuItem>
398
+ <MenuItem
399
+ data-testid={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
400
+ id={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
401
+ icon={
402
+ loadingItem === 'certidoes' ? (
403
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
404
+ ) : (
405
+ <Download size={16} />
406
+ )
407
+ }
408
+ onClick={() =>
409
+ handleClick('certidoes', () =>
410
+ searchCerts(idInsurance!, idOrder)
411
+ )
412
+ }
413
+ >
414
+ Baixar certidões
415
+ </MenuItem>
416
+ <MenuItem
417
+ data-testid={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
418
+ id={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
419
+ icon={
420
+ loadingItem === 'endosso' ? (
421
+ <Loader2 className="mr-2 h-5 w-5 animate-spin" />
422
+ ) : (
423
+ <PlusCircle size={16} />
424
+ )
425
+ }
426
+ onClick={() =>
427
+ handleClick('endosso', () =>
428
+ onEndorsementClick('Umbrela Corp', idInsurance!)
429
+ )
430
+ }
431
+ >
432
+ Solicitar endosso
433
+ </MenuItem>
434
+ </DropdownMenu>
435
+ )}
436
+ </DropdownWrapper>
437
+ </Actions>
438
+ </BodyRow>
439
+ </CardContainer>
440
+ );
441
+ };
442
+
443
+ const MenuItem: React.FC<MenuItemProps> = ({
444
+ icon,
445
+ danger,
446
+ children,
447
+ ...rest
448
+ }) => {
449
+ return (
450
+ <StyledMenuItem {...rest} $danger={danger}>
451
+ {icon}
452
+ {children}
453
+ </StyledMenuItem>
454
+ );
455
+ };