@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

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

@@ -1,455 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { cnpj } from 'cpf-cnpj-validator';
-import { format, parseISO } from 'date-fns';
-import {
-  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 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,
-  InfoLabel,
-  InfoRow,
-  InfoSubValue,
-  InfoValue,
-  MenuItemProps,
-  ProcessValue,
-  ProdValue,
-  StyledMenuItem,
-  Text,
-  TruncatedValue,
-} from './InsuranceCard.styles';
-import { InsuranceCardProps, StatusVariant } from './InsuranceCard.types';
-
-export const InsuranceCard: React.FC<InsuranceCardProps> = ({
-  idGranto,
-  idOrder,
-  idInsurance,
-  idInterno,
-  isSupply,
-  hasMinute,
-  statusLabel,
-  statusVariant,
-  seguradoName,
-  seguradoCnpj,
-  product,
-  issuedDate,
-  totalValue,
-  processId,
-  activeIndex,
-  testId,
-  openCardId,
-  setOpenCardId,
-  runQuery,
-  useDownloadAndSupport,
-  useDownloadFile,
-  useChangeOrderStageAsync,
-  useMyStore,
-  useQueryClient,
-  useGetTimeline,
-  useAuthStoreV2,
-  navigate,
-}) => {
-  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}
-      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">
-            <Cube />
-            Suppliers
-          </Pill>
-        )}
-        <Text>ID Granto: {idGranto}</Text>
-        <Text>ID interno: {idInterno}</Text>
-        <Text $variant={statusVariant as StatusVariant}>
-          {activeIndex === 0 ? 'Etapa' : 'Status'}: {statusLabel}
-        </Text>
-      </HeaderRow>
-      <BodyRow>
-        <InfoRow>
-          <InfoLabel>Segurado</InfoLabel>
-          <TruncatedValue>{seguradoName}</TruncatedValue>
-          <InfoSubValue>
-            {mask(
-              seguradoCnpj,
-              cnpj.isValid(seguradoCnpj)
-                ? '00.000.000/0000-00'
-                : '000.000.000-00'
-            )}
-          </InfoSubValue>
-        </InfoRow>
-        <InfoRow>
-          <InfoLabel>Produto</InfoLabel>
-          <ProdValue>{productTitle}</ProdValue>
-          <InfoSubValue>{productDescription}</InfoSubValue>
-        </InfoRow>
-        <InfoRow>
-          <InfoLabel>
-            {activeIndex === 0 ? 'Iniciado em' : 'Emitido em'}
-          </InfoLabel>
-          <InfoValue>{format(parseISO(issuedDate), 'dd/MM/yyyy')}</InfoValue>
-        </InfoRow>
-        <InfoRow>
-          <InfoLabel>
-            {' '}
-            {activeIndex === 0 ? 'Valor a ser pago' : 'Valor pago'}
-          </InfoLabel>
-          <InfoValue>{totalValue}</InfoValue>
-        </InfoRow>
-        <InfoRow>
-          <InfoLabel>Processo</InfoLabel>
-          <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}
-            >
-              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' ? (
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                    ) : (
-                      <ArrowCircleUpRight size={16} />
-                    )
-                  }
-                  onClick={() =>
-                    handleClick('continuar_emissao', irParaContinuarEmissao)
-                  }
-                >
-                  Continuar emissão
-                </MenuItem>
-                {hasMinute && isAllowedByRoles('user') && (
-                  <MenuItem
-                    data-testid={`btn_minhas_emissoes_baixar_minuta_${processId}`}
-                    id={`btn_minhas_emissoes_baixar_minuta_${processId}`}
-                    icon={
-                      loadingItem === 'minuta' ? (
-                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                      ) : (
-                        <Download size={16} />
-                      )
-                    }
-                    onClick={() =>
-                      handleClick('minuta', () => downloadFile('MINUTE', true))
-                    }
-                  >
-                    Baixar minuta
-                  </MenuItem>
-                )}
-                {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' ? (
-                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                      ) : (
-                        <XCircle size={16} />
-                      )
-                    }
-                    onClick={() =>
-                      handleClick('recusar_proposta', abrirModalRecusarProposta)
-                    }
-                  >
-                    Recusar proposta
-                  </MenuItem>
-                )}
-                {statusLabel === 'Proposta recusada' && (
-                  <MenuItem
-                    danger
-                    data-testid={`btn_minhas_emissoes_excluir_proposta_${processId}`}
-                    id={`btn_minhas_emissoes_excluir_proposta_${processId}`}
-                    icon={
-                      loadingItem === 'excluir_proposta' ? (
-                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                      ) : (
-                        <XCircle size={16} />
-                      )
-                    }
-                    onClick={() =>
-                      handleClick('excluir_proposta', abrirModalExcluirProposta)
-                    }
-                  >
-                    Excluir proposta
-                  </MenuItem>
-                )}
-              </DropdownMenu>
-            )}
-            {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' ? (
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                    ) : (
-                      <FileText size={16} />
-                    )
-                  }
-                  onClick={() =>
-                    handleClick('apolice', () => downloadFile('POLICY', true))
-                  }
-                >
-                  Baixar apólice
-                </MenuItem>
-                <MenuItem
-                  data-testid={`btn_minhas_emissoes_baixar_boleto_${processId}`}
-                  id={`btn_minhas_emissoes_baixar_boleto_${processId}`}
-                  icon={
-                    loadingItem === 'boleto' ? (
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                    ) : (
-                      <CreditCard size={16} />
-                    )
-                  }
-                  onClick={() =>
-                    handleClick('boleto', () => downloadFile('SLIP', true))
-                  }
-                >
-                  Baixar boleto
-                </MenuItem>
-                <MenuItem
-                  data-testid={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
-                  id={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
-                  icon={
-                    loadingItem === 'certidoes' ? (
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                    ) : (
-                      <Download size={16} />
-                    )
-                  }
-                  onClick={() =>
-                    handleClick('certidoes', () =>
-                      searchCerts(idInsurance!, idOrder)
-                    )
-                  }
-                >
-                  Baixar certidões
-                </MenuItem>
-                <MenuItem
-                  data-testid={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
-                  id={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
-                  icon={
-                    loadingItem === 'endosso' ? (
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                    ) : (
-                      <PlusCircle size={16} />
-                    )
-                  }
-                  onClick={() =>
-                    handleClick('endosso', () =>
-                      onEndorsementClick('Umbrela Corp', idInsurance!)
-                    )
-                  }
-                >
-                  Solicitar endosso
-                </MenuItem>
-              </DropdownMenu>
-            )}
-          </DropdownWrapper>
-        </Actions>
-      </BodyRow>
-    </CardContainer>
-  );
-};
-
-const MenuItem: React.FC<MenuItemProps> = ({
-  icon,
-  danger,
-  children,
-  ...rest
-}) => {
-  return (
-    <StyledMenuItem {...rest} $danger={danger}>
-      {icon}
-      {children}
-    </StyledMenuItem>
-  );
-};

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

@@ -1,41 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export type StatusVariant = 'primary' | 'success' | 'warning' | 'danger';
-
-export interface InsuranceCardProps {
-  idGranto: string;
-  idOrder: string;
-  idInsurance?: string;
-  idInterno: string;
-  isSupply: boolean;
-  hasMinute: boolean;
-  statusLabel: string;
-  statusVariant: StatusVariant;
-  seguradoName: string;
-  seguradoCnpj: string;
-  product: any;
-  issuedDate: string;
-  totalValue: string;
-  processId?: string;
-  activeIndex: number;
-  testId?: string;
-  openCardId: string | null;
-  setOpenCardId: (id: string | null) => void;
-  runQuery: () => void;
-  useDownloadAndSupport: any;
-  useDownloadFile: any;
-  useChangeOrderStageAsync: any;
-  useMyStore: any;
-  useQueryClient: any;
-  useGetTimeline: any;
-  useAuthStoreV2: any;
-  navigate: any;
-}
-
-export interface MenuItemProps {
-  icon: React.ReactNode;
-  danger?: boolean;
-  children: React.ReactNode;
-  onClick?: () => void;
-  id?: string;
-  'data-testid'?: string;
-}

package/src/components/molecules/PieChartComponent/PieChartComponent.styles.tsx

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledPieChart = styled.div`
-  .recharts-wrapper {
-    margin: auto;
-  }
-`;

package/src/components/molecules/PieChartComponent/PieChartComponent.tsx

@@ -1,70 +0,0 @@
-import { useMemo } from 'react';
-import { PieChart, Pie, Label, Tooltip } from 'recharts';
-import { StyledPieChart } from './PieChartComponent.styles';
-import { PieChartComponentProps } from './PieChartComponent.types';
-import { semanticColors, typographyTokens } from '../../../styles/tokens';
-
-const PieChartComponent = ({ data }: PieChartComponentProps) => {
-  const totalEmissoes = useMemo(
-    () => data.reduce((acc, curr) => acc + curr.value, 0),
-    [data]
-  );
-
-  return (
-    <StyledPieChart>
-      <PieChart width={155} height={155}>
-        <Tooltip cursor={false} />
-        <Pie
-          data={data}
-          dataKey="value"
-          nameKey="name"
-          innerRadius={52}
-          outerRadius={62}
-          stroke="none"
-          paddingAngle={2}
-        >
-          <Label
-            content={({ viewBox }) => {
-              if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                const { cx, cy } = viewBox;
-                return (
-                  <text
-                    x={cx}
-                    y={cy}
-                    textAnchor="middle"
-                    dominantBaseline="middle"
-                  >
-                    <tspan
-                      x={cx}
-                      y={(cy ?? 0) - 8}
-                      style={{
-                        fontSize: typographyTokens.fontSizes.displayL,
-                        fontWeight: typographyTokens.fontWeights.bold,
-                        fill: semanticColors.base.text,
-                      }}
-                    >
-                      {totalEmissoes}
-                    </tspan>
-                    <tspan
-                      x={cx}
-                      y={(cy ?? 0) + 16}
-                      style={{
-                        fontSize: typographyTokens.fontSizes.bodyS,
-                        fill: semanticColors.base.text,
-                      }}
-                    >
-                      emissões
-                    </tspan>
-                  </text>
-                );
-              }
-              return null;
-            }}
-          />
-        </Pie>
-      </PieChart>
-    </StyledPieChart>
-  );
-};
-
-export { PieChartComponent };

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

@@ -1,11 +0,0 @@
-export interface PieChartData {
-  name: string;
-  value: number;
-  fill: string;
-
-  [key: string]: string | number;
-}
-
-export interface PieChartComponentProps {
-  data: PieChartData[];
-}

package/src/components/molecules/Popover/Popover.styles.ts

@@ -1,66 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-
-const animateIn = keyframes`
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-`;
-
-const animateOut = keyframes`
-  from { opacity: 1; transform: scale(1); }
-  to { opacity: 0; transform: scale(0.95); }
-`;
-
-const slideInFromTop2 = keyframes`
-  from { transform: translateY(-10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-`;
-
-const slideInFromRight2 = keyframes`
-  from { transform: translateX(10px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-`;
-
-const slideInFromLeft2 = keyframes`
-  from { transform: translateX(-10px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-`;
-
-const slideInFromBottom2 = keyframes`
-  from { transform: translateY(10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-`;
-
-export const StyledPopoverContent = styled(PopoverPrimitive.Content)`
-  z-index: 50;
-  width: 18rem;
-  border-radius: 0.375rem;
-  border: 1px solid #e5e7eb;
-  background-color: var(--popover-bg, #fff);
-  padding: 1rem;
-  color: var(--popover-foreground, #000);
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  outline: none;
-
-  &[data-state='open'] {
-    animation: ${animateIn} 0.3s ease-out forwards;
-  }
-  &[data-state='closed'] {
-    animation: ${animateOut} 0.3s ease-in forwards;
-  }
-
-  &[data-side='bottom'] {
-    animation: ${slideInFromTop2} 0.3s ease-out forwards;
-  }
-  &[data-side='left'] {
-    animation: ${slideInFromRight2} 0.3s ease-out forwards;
-  }
-  &[data-side='right'] {
-    animation: ${slideInFromLeft2} 0.3s ease-out forwards;
-  }
-  &[data-side='top'] {
-    animation: ${slideInFromBottom2} 0.3s ease-out forwards;
-  }
-`;

package/src/components/molecules/Popover/Popover.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { StyledPopoverContent } from './Popover.styles';
-
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <StyledPopoverContent
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { semanticSizes } from '../../../styles/tokens';
-
-export const Container = styled.div<{
-  orientation?: 'horizontal' | 'vertical';
-}>`
-  display: flex;
-  flex-direction: ${({ orientation = 'horizontal' }) =>
-    orientation === 'vertical' ? 'column' : 'row'};
-  gap: ${semanticSizes.global.padding.sm};
-`;