@granto-umbrella/umbrella-components 3.0.28 → 3.0.30

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

@@ -1,118 +1,45 @@
-import React, { useState } 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,
-} from "lucide-react";
+  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,
-  TruncatedValue,
-  Actions,
-  DropdownWrapper,
-  DropdownMenu,
-  StyledMenuItem,
-  Text,
-  BodyRow,
+  InfoRow,
   InfoSubValue,
-  ProdValue,
+  InfoValue,
+  MenuItemProps,
   ProcessValue,
-  ActionButton,
-} from "./InsuranceCard.styles";
-import { InsuranceCardProps, MenuItemProps, StatusVariant } from "./InsuranceCard.types";
-
-import Pill from "../../atoms/Pill/Pill";
-
-
-
-
-const applyMask = (value: string, mask: string): string => {
-  let result = "";
-  let valueIndex = 0;
-  
-  for (let i = 0; i < mask.length && valueIndex < value.length; i++) {
-    if (mask[i] === "0") {
-      result += value[valueIndex];
-      valueIndex++;
-    } else {
-      result += mask[i];
-    }
-  }
-  
-  return result;
-};
-
-
-const isValidCNPJ = (value: string): boolean => {
-  const cleanValue = value.replace(/\D/g, "");
-  return cleanValue.length === 14;
-};
-
-
-const formatDate = (isoDate: string): string => {
-  const date = new Date(isoDate);
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const year = date.getFullYear();
-  return `${day}/${month}/${year}`;
-};
-
-
-const product_list = [
-  { value: "001", label: "Seguro Garantia" },
-  { value: "002", label: "Seguro Fiança" },
-
-];
-
-const formatProduct = (modality: string) => {
-  const type = modality.at(2);
-  const result = [];
-
-  switch (type) {
-    case "1":
-      result.push("Tradicional");
-      break;
-    case "2":
-      result.push("Judicial");
-      break;
-    default:
-      result.push("Desconhecido");
-      break;
-  }
-
-  result.push(
-    product_list.find((item) => item.value === modality)?.label ??
-      "Desconhecido"
-  );
-  return result;
-};
-
-// Ícones do phosphor-react substituídos por componentes inline
-const ArrowCircleUpRight = ({ size = 16 }: { size?: number }) => (
-  <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
-    <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" />
-  </svg>
-);
-
-const Cube = ({ size = 16 }: { size?: number }) => (
-  <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
-    <path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l80-43.78Z" />
-  </svg>
-);
-
-const XCircle = ({ size = 16 }: { size?: number }) => (
-  <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
-    <path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
-  </svg>
-);
-
-// ===== COMPONENTE PRINCIPAL =====
+  ProdValue,
+  StyledMenuItem,
+  Text,
+  TruncatedValue,
+} from './InsuranceCard.styles';
+import { InsuranceCardProps, StatusVariant } from './InsuranceCard.types';
 
 export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   idGranto,
@@ -133,9 +60,46 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   testId,
   openCardId,
   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 = () => {
@@ -151,34 +115,53 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
     setLoadingItem(null);
   };
 
-  const [productTitle, productDescription] = formatProduct(product);
+  const { isAllowedByRoles } = useAuthStoreV2();
 
-  // Mock das funções (você ajustará quando os hooks existirem)
-  const downloadFile = (type: string, flag: boolean) => {
-    console.log(`Download ${type}:`, flag);
-  };
+  const [productTitle, productDescription] = product;
 
-  const searchCerts = (insurance: string, order: string) => {
-    console.log(`Search certs for ${insurance}, ${order}`);
-  };
-
-  const onEndorsementClick = (company: string, insurance: string) => {
-    console.log(`Endorsement for ${company}, ${insurance}`);
-  };
+  const { downloadFile, searchCerts } = useDownloadFile(idOrder);
+  const { onEndorsementClick } = useDownloadAndSupport();
+  const mutateStageOrder = useChangeOrderStageAsync();
+  const { setData } = useMyStore();
+  const queryClient = useQueryClient();
 
   const irParaContinuarEmissao = () => {
-    console.log("Continuar emissão");
-    // Implementar navegação quando disponível
+    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 abrirModalExcluirProposta = () => {
-    console.log("Abrir modal excluir");
-    // Modal será implementado depois
+  const confirmarExclusao = () => {
+    runQuery();
+    fecharModalExclusao();
   };
+  const abrirModalRecusarProposta = () => setShowRefuseModal(true);
+  const fecharModalRecusa = () => setShowRefuseModal(false);
 
-  const abrirModalRecusarProposta = () => {
-    console.log("Abrir modal recusar");
-    // Modal será implementado depois
+  const confirmarRecusa = () => {
+    runQuery();
+    fecharModalRecusa();
   };
 
   return (
@@ -187,17 +170,39 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
       id={testId}
       $variant={statusVariant as StatusVariant}
     >
+      <ExcludeModal
+        open={showExcludeModal}
+        onOpenChange={setShowExcludeModal}
+        onConfirm={confirmarExclusao}
+        onClose={fecharModalExclusao}
+        orderId={idGranto}
+      />
+      <RefuseModal
+        open={showRefuseModal}
+        onOpenChange={setShowRefuseModal}
+        onConfirm={confirmarRecusa}
+        onClose={fecharModalRecusa}
+        orderId={idGranto}
+      />
+      <TimelineModal
+        open={showTimeline}
+        onOpenChange={setShowTimeline}
+        onClose={() => setShowTimeline(false)}
+        data={timelineItems}
+        loading={isTimelineLoading}
+        onRetry={fetchTimeline}
+      />
       <HeaderRow>
         {isSupply && (
-          <Pill size={"sm"} variant="supply">
+          <Pill size={'sm'} variant="supply">
             <Cube />
-            Supply
+            Suppliers
           </Pill>
         )}
         <Text>ID Granto: {idGranto}</Text>
         <Text>ID interno: {idInterno}</Text>
         <Text $variant={statusVariant as StatusVariant}>
-          {activeIndex === 0 ? "Etapa" : "Status"}: {statusLabel}
+          {activeIndex === 0 ? 'Etapa' : 'Status'}: {statusLabel}
         </Text>
       </HeaderRow>
       <BodyRow>
@@ -205,11 +210,11 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
           <InfoLabel>Segurado</InfoLabel>
           <TruncatedValue>{seguradoName}</TruncatedValue>
           <InfoSubValue>
-            {applyMask(
+            {mask(
               seguradoCnpj,
-              isValidCNPJ(seguradoCnpj)
-                ? "00.000.000/0000-00"
-                : "000.000.000-00"
+              cnpj.isValid(seguradoCnpj)
+                ? '00.000.000/0000-00'
+                : '000.000.000-00'
             )}
           </InfoSubValue>
         </InfoRow>
@@ -220,22 +225,23 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
         </InfoRow>
         <InfoRow>
           <InfoLabel>
-            {activeIndex === 0 ? "Iniciado em" : "Emitido em"}
+            {activeIndex === 0 ? 'Iniciado em' : 'Emitido em'}
           </InfoLabel>
-          <InfoSubValue>{formatDate(issuedDate)}</InfoSubValue>
+          <InfoValue>{format(parseISO(issuedDate), 'dd/MM/yyyy')}</InfoValue>
         </InfoRow>
         <InfoRow>
           <InfoLabel>
-            {activeIndex === 0 ? "Valor a ser pago" : "Valor pago"}
+            {' '}
+            {activeIndex === 0 ? 'Valor a ser pago' : 'Valor pago'}
           </InfoLabel>
-          <InfoSubValue>{totalValue}</InfoSubValue>
+          <InfoValue>{totalValue}</InfoValue>
         </InfoRow>
         <InfoRow>
           <InfoLabel>Processo</InfoLabel>
           <ProcessValue>
             {processId
-              ? applyMask(processId || "", "0000000-00.0000.0.00.0000")
-              : "-"}
+              ? mask(processId || '', '0000000-00.0000.0.00.0000')
+              : '-'}
           </ProcessValue>
         </InfoRow>
         <Actions>
@@ -245,78 +251,94 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
               id={`btn_minhas_emissoes_mais_informacoes_${processId}`}
               onClick={toggleOpen}
             >
-              Mais informações{" "}
+              Mais informações{' '}
               {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
             </ActionButton>
             {isOpen && activeIndex === 0 && (
               <DropdownMenu>
+                <MenuItem
+                  data-testid={`btn_minhas_linha_do_tempo_${processId}`}
+                  id={`btn_minhas_linha_do_tempo_${processId}`}
+                  icon={
+                    loadingItem === 'linha_do_tempo' || isTimelineLoading ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <FlowArrow size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick('linha_do_tempo', showTimelineToggle)
+                  }
+                >
+                  Linha do tempo
+                </MenuItem>
                 <MenuItem
                   data-testid={`btn_minhas_emissoes_continuar_emissao_${processId}`}
                   id={`btn_minhas_emissoes_continuar_emissao_${processId}`}
                   icon={
-                    loadingItem === "continuar_emissao" ? (
+                    loadingItem === 'continuar_emissao' ? (
                       <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                     ) : (
                       <ArrowCircleUpRight size={16} />
                     )
                   }
                   onClick={() =>
-                    handleClick("continuar_emissao", irParaContinuarEmissao)
+                    handleClick('continuar_emissao', irParaContinuarEmissao)
                   }
                 >
                   Continuar emissão
                 </MenuItem>
-                {hasMinute && (
+                {hasMinute && isAllowedByRoles('user') && (
                   <MenuItem
                     data-testid={`btn_minhas_emissoes_baixar_minuta_${processId}`}
                     id={`btn_minhas_emissoes_baixar_minuta_${processId}`}
                     icon={
-                      loadingItem === "minuta" ? (
+                      loadingItem === 'minuta' ? (
                         <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                       ) : (
                         <Download size={16} />
                       )
                     }
                     onClick={() =>
-                      handleClick("minuta", () => downloadFile("MINUTE", true))
+                      handleClick('minuta', () => downloadFile('MINUTE', true))
                     }
                   >
                     Baixar minuta
                   </MenuItem>
                 )}
-                {statusLabel === "Aguardando aprovação" && (
+                {statusLabel === 'Aguardando aprovação' && (
                   <MenuItem
                     danger
                     data-testid={`btn_minhas_emissoes_recusar_proposta_${processId}`}
                     id={`btn_minhas_emissoes_recusar_proposta_${processId}`}
                     icon={
-                      loadingItem === "recusar_proposta" ? (
+                      loadingItem === 'recusar_proposta' ? (
                         <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                       ) : (
                         <XCircle size={16} />
                       )
                     }
                     onClick={() =>
-                      handleClick("recusar_proposta", abrirModalRecusarProposta)
+                      handleClick('recusar_proposta', abrirModalRecusarProposta)
                     }
                   >
                     Recusar proposta
                   </MenuItem>
                 )}
-                {statusLabel === "Proposta recusada" && (
+                {statusLabel === 'Proposta recusada' && (
                   <MenuItem
                     danger
                     data-testid={`btn_minhas_emissoes_excluir_proposta_${processId}`}
                     id={`btn_minhas_emissoes_excluir_proposta_${processId}`}
                     icon={
-                      loadingItem === "excluir_proposta" ? (
+                      loadingItem === 'excluir_proposta' ? (
                         <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                       ) : (
                         <XCircle size={16} />
                       )
                     }
                     onClick={() =>
-                      handleClick("excluir_proposta", abrirModalExcluirProposta)
+                      handleClick('excluir_proposta', abrirModalExcluirProposta)
                     }
                   >
                     Excluir proposta
@@ -326,18 +348,34 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
             )}
             {isOpen && activeIndex === 1 && (
               <DropdownMenu>
+                <MenuItem
+                  data-testid={`btn_minhas_linha_do_tempo_${processId}`}
+                  id={`btn_minhas_linha_do_tempo_${processId}`}
+                  icon={
+                    loadingItem === 'linha_do_tempo' || isTimelineLoading ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <FlowArrow size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick('linha_do_tempo', showTimelineToggle)
+                  }
+                >
+                  Linha do tempo
+                </MenuItem>
                 <MenuItem
                   data-testid={`btn_minhas_emissoes_baixar_apolice_${processId}`}
                   id={`btn_minhas_emissoes_baixar_apolice_${processId}`}
                   icon={
-                    loadingItem === "apolice" ? (
+                    loadingItem === 'apolice' ? (
                       <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                     ) : (
                       <FileText size={16} />
                     )
                   }
                   onClick={() =>
-                    handleClick("apolice", () => downloadFile("POLICY", true))
+                    handleClick('apolice', () => downloadFile('POLICY', true))
                   }
                 >
                   Baixar apólice
@@ -346,14 +384,14 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                   data-testid={`btn_minhas_emissoes_baixar_boleto_${processId}`}
                   id={`btn_minhas_emissoes_baixar_boleto_${processId}`}
                   icon={
-                    loadingItem === "boleto" ? (
+                    loadingItem === 'boleto' ? (
                       <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                     ) : (
                       <CreditCard size={16} />
                     )
                   }
                   onClick={() =>
-                    handleClick("boleto", () => downloadFile("SLIP", true))
+                    handleClick('boleto', () => downloadFile('SLIP', true))
                   }
                 >
                   Baixar boleto
@@ -362,14 +400,14 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                   data-testid={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
                   id={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
                   icon={
-                    loadingItem === "certidoes" ? (
+                    loadingItem === 'certidoes' ? (
                       <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                     ) : (
                       <Download size={16} />
                     )
                   }
                   onClick={() =>
-                    handleClick("certidoes", () =>
+                    handleClick('certidoes', () =>
                       searchCerts(idInsurance!, idOrder)
                     )
                   }
@@ -380,15 +418,15 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                   data-testid={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
                   id={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
                   icon={
-                    loadingItem === "endosso" ? (
+                    loadingItem === 'endosso' ? (
                       <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                     ) : (
                       <PlusCircle size={16} />
                     )
                   }
                   onClick={() =>
-                    handleClick("endosso", () =>
-                      onEndorsementClick("Umbrela Corp", idInsurance!)
+                    handleClick('endosso', () =>
+                      onEndorsementClick('Umbrela Corp', idInsurance!)
                     )
                   }
                 >
@@ -415,4 +453,4 @@ const MenuItem: React.FC<MenuItemProps> = ({
       {children}
     </StyledMenuItem>
   );
-};
+};

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

@@ -1,4 +1,5 @@
-export type StatusVariant = "primary" | "success" | "warning" | "danger";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type StatusVariant = 'primary' | 'success' | 'warning' | 'danger';
 
 export interface InsuranceCardProps {
   idGranto: string;
@@ -11,7 +12,7 @@ export interface InsuranceCardProps {
   statusVariant: StatusVariant;
   seguradoName: string;
   seguradoCnpj: string;
-  product: string;
+  product: any;
   issuedDate: string;
   totalValue: string;
   processId?: string;
@@ -20,6 +21,13 @@ export interface InsuranceCardProps {
   openCardId: string | null;
   setOpenCardId: (id: string | null) => void;
   runQuery: () => void;
+  useDownloadAndSupport: any;
+  useDownloadFile: any;
+  useChangeOrderStageAsync: any;
+  useMyStore: any;
+  useQueryClient: any;
+  useGetTimeline: any;
+  useAuthStoreV2: any;
 }
 
 export interface MenuItemProps {
@@ -28,5 +36,5 @@ export interface MenuItemProps {
   children: React.ReactNode;
   onClick?: () => void;
   id?: string;
-  "data-testid"?: string;
-}
+  'data-testid'?: string;
+}

package/src/index.ts

@@ -33,7 +33,7 @@ import { ResendLink } from './components/atoms/ResendLink';
 import Select from './components/atoms/Select';
 import { Subtitle } from './components/atoms/Subtitle';
 import Switch from './components/atoms/Switch/Switch';
-import { Tapbar } from './components/atoms/Tapbar';
+import { Tapbar } from './components/atoms/TabBar';
 import Text from './components/atoms/Text';
 import Textarea from './components/atoms/Textarea/Textarea';
 import { Title } from './components/atoms/Title';

package/src/components/atoms/Tapbar/index.tsx

@@ -1,2 +0,0 @@
-export { Tapbar } from "./Tapbar";
-export type { TapbarProps, TabItem } from "./Tapbar.types";