@granto-umbrella/umbrella-components 3.0.28 → 3.0.29

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

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React from 'react';
+
 import {
   FileText,
   CreditCard,
@@ -7,112 +8,33 @@ import {
   ChevronDown,
   ChevronUp,
   Loader2,
-} from "lucide-react";
+} from 'lucide-react';
 import {
   CardContainer,
   HeaderRow,
   InfoRow,
   InfoLabel,
-  TruncatedValue,
+  InfoValue,
   Actions,
   DropdownWrapper,
   DropdownMenu,
+  MenuItemProps,
   StyledMenuItem,
   Text,
   BodyRow,
   InfoSubValue,
+  TruncatedValue,
   ProdValue,
   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}`;
-};
-
+} from './InsuranceCard.styles';
+import { ArrowCircleUpRight, Cube, XCircle, FlowArrow } from 'phosphor-react';
+import { ExcludeModal } from '../ExcludeModal';
 
-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 =====
+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,
@@ -125,93 +47,87 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   statusVariant,
   seguradoName,
   seguradoCnpj,
-  product,
   issuedDate,
   totalValue,
   processId,
   activeIndex,
   testId,
   openCardId,
-  setOpenCardId,
-  
+  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,
 }) => {
-  const [loadingItem, setLoadingItem] = useState<string | null>(null);
   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 [productTitle, productDescription] = formatProduct(product);
-
-  // Mock das funções (você ajustará quando os hooks existirem)
-  const downloadFile = (type: string, flag: boolean) => {
-    console.log(`Download ${type}:`, flag);
-  };
-
-  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 irParaContinuarEmissao = () => {
-    console.log("Continuar emissão");
-    // Implementar navegação quando disponível
-  };
-
-  const abrirModalExcluirProposta = () => {
-    console.log("Abrir modal excluir");
-    // Modal será implementado depois
-  };
-
-  const abrirModalRecusarProposta = () => {
-    console.log("Abrir modal recusar");
-    // Modal será implementado depois
-  };
-
   return (
     <CardContainer
       data-testid={testId}
       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(idOrder)}
+      />
       <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>
         <InfoRow>
           <InfoLabel>Segurado</InfoLabel>
           <TruncatedValue>{seguradoName}</TruncatedValue>
-          <InfoSubValue>
-            {applyMask(
-              seguradoCnpj,
-              isValidCNPJ(seguradoCnpj)
-                ? "00.000.000/0000-00"
-                : "000.000.000-00"
-            )}
-          </InfoSubValue>
+          <InfoSubValue>{seguradoCnpj}</InfoSubValue>
         </InfoRow>
         <InfoRow>
           <InfoLabel>Produto</InfoLabel>
@@ -220,103 +136,124 @@ 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>{issuedDate}</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")
-              : "-"}
-          </ProcessValue>
+          <ProcessValue>{processId}</ProcessValue>
         </InfoRow>
         <Actions>
           <DropdownWrapper>
             <ActionButton
               data-testid={`btn_minhas_emissoes_mais_informacoes_${processId}`}
               id={`btn_minhas_emissoes_mais_informacoes_${processId}`}
-              onClick={toggleOpen}
+              onClick={() => toggleOpen?.(idOrder)}
             >
-              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(idOrder)
+                    )
                   }
                 >
                   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(idOrder)
+                      )
                     }
                   >
                     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(idOrder)
+                      )
                     }
                   >
                     Excluir proposta
@@ -326,18 +263,36 @@ 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 +301,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,16 +317,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", () =>
-                      searchCerts(idInsurance!, idOrder)
-                    )
+                    handleClick?.('certidoes', () => searchCerts(idInsurance!))
                   }
                 >
                   Baixar certidões
@@ -380,15 +333,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(idInsurance!)
                     )
                   }
                 >
@@ -415,4 +368,4 @@ const MenuItem: React.FC<MenuItemProps> = ({
       {children}
     </StyledMenuItem>
   );
-};
+};

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

@@ -1,32 +1,55 @@
-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;
+  idInterno: string;
   idOrder: string;
   idInsurance?: string;
-  idInterno: string;
   isSupply: boolean;
-  hasMinute: boolean;
+  hasMinute?: boolean;
   statusLabel: string;
-  statusVariant: StatusVariant;
+  statusVariant: string;
   seguradoName: string;
   seguradoCnpj: string;
   product: string;
   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;
 }
-
-export interface MenuItemProps {
-  icon: React.ReactNode;
-  danger?: boolean;
-  children: React.ReactNode;
-  onClick?: () => void;
-  id?: 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";