@granto-umbrella/umbrella-components 3.0.29 → 3.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.29",
+  "version": "3.0.30",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -36,8 +36,10 @@
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-radio-group": "^1.2.4",
+    "cpf-cnpj-validator": "^1.0.3",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.488.0",
+    "make-mask": "^1.0.3",
     "phosphor-react": "^1.4.1",
     "radix": "^0.0.0",
     "react": "^18.3.1",
@@ -76,7 +78,6 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-icons": "^5.4.0",
-    "storybook": "8.4.7",
     "styled-components": "^6.1.19",
     "ts-jest": "^29.2.5",
     "typescript": "~5.6.2",

package/src/components/molecules/InsuranceCard/InsuranceCard.tsx

@@ -1,40 +1,45 @@
-import React from 'react';
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { cnpj } from 'cpf-cnpj-validator';
+import { format, parseISO } from 'date-fns';
 import {
-  FileText,
-  CreditCard,
-  Download,
-  PlusCircle,
   ChevronDown,
   ChevronUp,
+  CreditCard,
+  Download,
+  FileText,
   Loader2,
+  PlusCircle,
 } from 'lucide-react';
+import mask from 'make-mask';
+import { ArrowCircleUpRight, Cube, FlowArrow, XCircle } from 'phosphor-react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Pill from '../../atoms/Pill/Pill';
+import { mapRemoteToTimeline } from '../../molecules/TimeLine/TimeLine.mapper';
+import { TimelineModal } from '../../organisms/TimelineModal/TimelineModal';
+import { ExcludeModal } from '../ExcludeModal';
+import { RefuseModal } from '../RefuseModal';
 import {
+  ActionButton,
+  Actions,
+  BodyRow,
   CardContainer,
+  DropdownMenu,
+  DropdownWrapper,
   HeaderRow,
-  InfoRow,
   InfoLabel,
+  InfoRow,
+  InfoSubValue,
   InfoValue,
-  Actions,
-  DropdownWrapper,
-  DropdownMenu,
   MenuItemProps,
+  ProcessValue,
+  ProdValue,
   StyledMenuItem,
   Text,
-  BodyRow,
-  InfoSubValue,
   TruncatedValue,
-  ProdValue,
-  ProcessValue,
-  ActionButton,
 } from './InsuranceCard.styles';
-import { ArrowCircleUpRight, Cube, XCircle, FlowArrow } from 'phosphor-react';
-import { ExcludeModal } from '../ExcludeModal';
-
 import { InsuranceCardProps, StatusVariant } from './InsuranceCard.types';
-import { RefuseModal } from '../RefuseModal';
-import Pill from '../../atoms/Pill/Pill';
-import { TimelineModal } from '../../organisms/TimelineModal/TimelineModal';
 
 export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   idGranto,
@@ -47,41 +52,118 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   statusVariant,
   seguradoName,
   seguradoCnpj,
+  product,
   issuedDate,
   totalValue,
   processId,
   activeIndex,
   testId,
   openCardId,
-  loadingItem,
-  showRefuseModal,
-  setShowRefuseModal,
-  showExcludeModal,
-  setShowExcludeModal,
-  showTimeline,
-  setShowTimeline,
-  timelineItems,
-  isTimelineLoading,
-  fetchTimeline,
-  showTimelineToggle,
-  toggleOpen,
-  handleClick,
-  isAllowedByRoles,
-  productTitle,
-  productDescription,
-  downloadFile,
-  searchCerts,
-  onEndorsementClick,
-  irParaContinuarEmissao,
-  abrirModalExcluirProposta,
-  fecharModalExclusao,
-  confirmarExclusao,
-  abrirModalRecusarProposta,
-  fecharModalRecusa,
-  confirmarRecusa,
+  setOpenCardId,
+  runQuery,
+  useDownloadAndSupport,
+  useDownloadFile,
+  useChangeOrderStageAsync,
+  useMyStore,
+  useQueryClient,
+  useGetTimeline,
+  useAuthStoreV2,
 }) => {
+  const navigate = useNavigate();
+  const [loadingItem, setLoadingItem] = useState<string | null>(null);
+  const [showRefuseModal, setShowRefuseModal] = useState(false);
+  const [showExcludeModal, setShowExcludeModal] = useState(false);
+  const [showTimeline, setShowTimeline] = useState(false);
+  const [timelineItems, setTimelineItems] = useState<
+    ReturnType<typeof mapRemoteToTimeline>
+  >([]);
+  const { isLoading: isTimelineLoading, refetch: fetchTimeline } =
+    useGetTimeline({ orderId: idOrder, insuranceId: idInsurance });
+
+  const showTimelineToggle = async () => {
+    const willOpen = !showTimeline;
+
+    if (willOpen && (!timelineItems || timelineItems.length === 0)) {
+      setLoadingItem('linha_do_tempo');
+      setShowTimeline(true);
+      try {
+        const { data: remote } = await fetchTimeline();
+        setTimelineItems(mapRemoteToTimeline(remote ?? []));
+      } catch (err) {
+        console.error('Falha ao carregar timeline', err);
+      } finally {
+        setLoadingItem(null);
+      }
+      return;
+    }
+
+    setShowTimeline(willOpen);
+  };
+
   const isOpen = openCardId === idOrder;
 
+  const toggleOpen = () => {
+    setOpenCardId(isOpen ? null : idOrder);
+  };
+
+  const handleClick = async (
+    key: string,
+    callback: () => Promise<void> | void
+  ) => {
+    setLoadingItem(key);
+    await Promise.resolve(callback());
+    setLoadingItem(null);
+  };
+
+  const { isAllowedByRoles } = useAuthStoreV2();
+
+  const [productTitle, productDescription] = product;
+
+  const { downloadFile, searchCerts } = useDownloadFile(idOrder);
+  const { onEndorsementClick } = useDownloadAndSupport();
+  const mutateStageOrder = useChangeOrderStageAsync();
+  const { setData } = useMyStore();
+  const queryClient = useQueryClient();
+
+  const irParaContinuarEmissao = () => {
+    const stateData = idInsurance
+      ? { idInsurance, isSupply }
+      : { idOrder, isSupply };
+    if (
+      statusLabel === 'Proposta recusada' ||
+      statusLabel === 'Proposta excluída'
+    ) {
+      mutateStageOrder.mutateAsync(
+        {
+          id: idGranto,
+          newStage: 'IDLE',
+        },
+        {
+          onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['orders'] });
+          },
+        }
+      );
+    }
+    navigate('/issue', { state: stateData });
+
+    setData({});
+  };
+  const abrirModalExcluirProposta = () => setShowExcludeModal(true);
+  const fecharModalExclusao = () => setShowExcludeModal(false);
+
+  const confirmarExclusao = () => {
+    runQuery();
+    fecharModalExclusao();
+  };
+  const abrirModalRecusarProposta = () => setShowRefuseModal(true);
+  const fecharModalRecusa = () => setShowRefuseModal(false);
+
+  const confirmarRecusa = () => {
+    runQuery();
+    fecharModalRecusa();
+  };
+
   return (
     <CardContainer
       data-testid={testId}
@@ -108,7 +190,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
         onClose={() => setShowTimeline(false)}
         data={timelineItems}
         loading={isTimelineLoading}
-        onRetry={() => fetchTimeline(idOrder)}
+        onRetry={fetchTimeline}
       />
       <HeaderRow>
         {isSupply && (
@@ -127,7 +209,14 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
         <InfoRow>
           <InfoLabel>Segurado</InfoLabel>
           <TruncatedValue>{seguradoName}</TruncatedValue>
-          <InfoSubValue>{seguradoCnpj}</InfoSubValue>
+          <InfoSubValue>
+            {mask(
+              seguradoCnpj,
+              cnpj.isValid(seguradoCnpj)
+                ? '00.000.000/0000-00'
+                : '000.000.000-00'
+            )}
+          </InfoSubValue>
         </InfoRow>
         <InfoRow>
           <InfoLabel>Produto</InfoLabel>
@@ -138,7 +227,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
           <InfoLabel>
             {activeIndex === 0 ? 'Iniciado em' : 'Emitido em'}
           </InfoLabel>
-          <InfoValue>{issuedDate}</InfoValue>
+          <InfoValue>{format(parseISO(issuedDate), 'dd/MM/yyyy')}</InfoValue>
         </InfoRow>
         <InfoRow>
           <InfoLabel>
@@ -149,14 +238,18 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
         </InfoRow>
         <InfoRow>
           <InfoLabel>Processo</InfoLabel>
-          <ProcessValue>{processId}</ProcessValue>
+          <ProcessValue>
+            {processId
+              ? mask(processId || '', '0000000-00.0000.0.00.0000')
+              : '-'}
+          </ProcessValue>
         </InfoRow>
         <Actions>
           <DropdownWrapper>
             <ActionButton
               data-testid={`btn_minhas_emissoes_mais_informacoes_${processId}`}
               id={`btn_minhas_emissoes_mais_informacoes_${processId}`}
-              onClick={() => toggleOpen?.(idOrder)}
+              onClick={toggleOpen}
             >
               Mais informações{' '}
               {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
@@ -174,7 +267,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('linha_do_tempo', showTimelineToggle)
+                    handleClick('linha_do_tempo', showTimelineToggle)
                   }
                 >
                   Linha do tempo
@@ -190,9 +283,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('continuar_emissao', () =>
-                      irParaContinuarEmissao(idOrder)
-                    )
+                    handleClick('continuar_emissao', irParaContinuarEmissao)
                   }
                 >
                   Continuar emissão
@@ -209,9 +300,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                       )
                     }
                     onClick={() =>
-                      handleClick?.('minuta', () =>
-                        downloadFile('MINUTE', 'true')
-                      )
+                      handleClick('minuta', () => downloadFile('MINUTE', true))
                     }
                   >
                     Baixar minuta
@@ -230,9 +319,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                       )
                     }
                     onClick={() =>
-                      handleClick?.('recusar_proposta', () =>
-                        abrirModalRecusarProposta(idOrder)
-                      )
+                      handleClick('recusar_proposta', abrirModalRecusarProposta)
                     }
                   >
                     Recusar proposta
@@ -251,9 +338,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                       )
                     }
                     onClick={() =>
-                      handleClick?.('excluir_proposta', () =>
-                        abrirModalExcluirProposta(idOrder)
-                      )
+                      handleClick('excluir_proposta', abrirModalExcluirProposta)
                     }
                   >
                     Excluir proposta
@@ -274,7 +359,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('linha_do_tempo', showTimelineToggle)
+                    handleClick('linha_do_tempo', showTimelineToggle)
                   }
                 >
                   Linha do tempo
@@ -290,9 +375,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('apolice', () =>
-                      downloadFile('POLICY', 'true')
-                    )
+                    handleClick('apolice', () => downloadFile('POLICY', true))
                   }
                 >
                   Baixar apólice
@@ -308,7 +391,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('boleto', () => downloadFile('SLIP', 'true'))
+                    handleClick('boleto', () => downloadFile('SLIP', true))
                   }
                 >
                   Baixar boleto
@@ -324,7 +407,9 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('certidoes', () => searchCerts(idInsurance!))
+                    handleClick('certidoes', () =>
+                      searchCerts(idInsurance!, idOrder)
+                    )
                   }
                 >
                   Baixar certidões
@@ -340,8 +425,8 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                     )
                   }
                   onClick={() =>
-                    handleClick?.('endosso', () =>
-                      onEndorsementClick(idInsurance!)
+                    handleClick('endosso', () =>
+                      onEndorsementClick('Umbrela Corp', idInsurance!)
                     )
                   }
                 >

package/src/components/molecules/InsuranceCard/InsuranceCard.types.ts

@@ -3,53 +3,38 @@ export type StatusVariant = 'primary' | 'success' | 'warning' | 'danger';
 
 export interface InsuranceCardProps {
   idGranto: string;
-  idInterno: string;
   idOrder: string;
   idInsurance?: string;
+  idInterno: string;
   isSupply: boolean;
-  hasMinute?: boolean;
+  hasMinute: boolean;
   statusLabel: string;
-  statusVariant: string;
+  statusVariant: StatusVariant;
   seguradoName: string;
   seguradoCnpj: string;
-  product: string;
+  product: any;
   issuedDate: string;
   totalValue: string;
-  processId: string;
-  activeIndex?: number;
+  processId?: string;
+  activeIndex: number;
   testId?: string;
   openCardId: string | null;
   setOpenCardId: (id: string | null) => void;
   runQuery: () => void;
-  loadingItem: string | null;
-  setLoadingItem: (id: string | null) => void;
-  showRefuseModal: boolean;
-  setShowRefuseModal: (value: boolean) => void;
-  showExcludeModal: boolean;
-  setShowExcludeModal: (value: boolean) => void;
-  showTimeline: boolean;
-  setShowTimeline: (value: boolean) => void;
-  timelineItems: any[];
-  setTimelineItems: (items: any[]) => void;
-  isTimelineLoading: boolean;
-  fetchTimeline: (idOrder: string) => Promise<void>;
-  showTimelineToggle: () => void;
-  toggleOpen: (idOrder: string) => void;
-  productTitle?: string;
-  productDescription?: string;
-  downloadFile: (fileUrl: string, fileName: string) => void;
-  searchCerts: (idOrder: string) => void;
-  onEndorsementClick: (idOrder: string) => void;
-  mutateStageOrder: (idOrder: string, stage: string) => Promise<void>;
-  setData: (data: any) => void;
-  queryClient: any;
-  irParaContinuarEmissao: (idOrder: string) => void;
-  abrirModalExcluirProposta: (idOrder: string) => void;
-  fecharModalExclusao: () => void;
-  confirmarExclusao: () => Promise<void>;
-  abrirModalRecusarProposta: (idOrder: string) => void;
-  fecharModalRecusa: () => void;
-  confirmarRecusa: () => Promise<void>;
-  handleClick?: (value: string, callback: () => void) => void;
-  isAllowedByRoles?: any;
+  useDownloadAndSupport: any;
+  useDownloadFile: any;
+  useChangeOrderStageAsync: any;
+  useMyStore: any;
+  useQueryClient: any;
+  useGetTimeline: any;
+  useAuthStoreV2: any;
+}
+
+export interface MenuItemProps {
+  icon: React.ReactNode;
+  danger?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+  id?: string;
+  'data-testid'?: string;
 }