@granto-umbrella/umbrella-components 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/Footer/Footer.styles.tsx

@@ -7,7 +7,7 @@ import {
 } from '@granto-umbrella/umbrella-components';
 
 export const Container = styled.div`
-  font-size: ${typographyTokens.fontSizes.bodyS};
+  font-size: ${typographyTokens.fontSizes.bodyM};
   color: ${semanticColors.global.text.default.enabled};
   margin-top: calc(${semanticSizes.global.padding['4xl']} + 111px);
   padding-bottom: ${semanticSizes.global.padding['2xl']};

package/src/components/molecules/TimeLine/TimeLine.mapper.ts

@@ -0,0 +1,55 @@
+// TimeLine.mapper.ts
+import { TimelineItem, TimelineVariant, RemoteEvent } from './TimeLine.types';
+
+function toVariant(eventType: string): TimelineVariant {
+  if (eventType === 'subscription:partner_subscribe') return 'accepted';
+  if (eventType === 'subscription:partner_quote') return 'continued';
+  if (eventType === 'order:proposal_refused') return 'rejected';
+  return 'continued';
+}
+
+function buildTitle(ev: RemoteEvent): string {
+  const { eventType, data } = ev;
+
+  if (eventType === 'subscription:partner_subscribe')
+    return 'Subscrição realizada';
+  if (eventType === 'subscription:partner_quote') return 'Cotação processada';
+  if (eventType === 'order:proposal_refused') return 'Proposta recusada';
+
+  // Fallback genérico
+  return data?.title ? String(data.title) : eventType;
+}
+
+export function mapRemoteToTimeline(items: RemoteEvent[]): TimelineItem[] {
+  return items.map((ev, idx) => {
+    const id = ev.correlationId || String(idx);
+    const actorName = ev.actor?.name || 'Sistema';
+
+    return {
+      id,
+      timestamp: ev.startAt,
+      type: toVariant(ev.eventType),
+      title: buildTitle(ev),
+      description: undefined,
+      actor: {
+        id: String(ev.actor?.id ?? ''),
+        displayName: actorName,
+        type: ev.actor?.type ?? 'app',
+      },
+      origin: ev.parentEventType || ev.eventType,
+      correlationId: ev.correlationId,
+      metadata: {
+        eventType: ev.eventType,
+        orderId: ev.data?.orderId,
+        insuranceId: ev.data?.insuranceId,
+        startAt: ev.startAt,
+        endAt: ev.endAt,
+        duration: ev.duration,
+        parentCorrelationId: ev.parentCorrelationId,
+        offers: ev.data?.offers,
+        subscriptionPeriod: ev.data?.subscription?.period,
+        insuredName: ev.data?.subscription?.insured?.name,
+      },
+    };
+  });
+}

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

@@ -24,11 +24,11 @@ export const ItemWrap = styled.li`
     content: '';
     position: absolute;
     left: 11px;
-    top: 32px;
+    top: 34px;
     bottom: 0;
     width: 2px;
     height: 100%;
-    background-color: ${primitiveColors.gray[100]};
+    background-color: ${primitiveColors.gray[200]};
   }
 `;
 
@@ -41,46 +41,40 @@ export const Dot = styled.span<{
   border: 1px solid;
   display: inline-block;
   margin-top: 0.2rem;
-  ${({ $variant = 'StatusChanged' }) => {
+  ${({ $variant = 'continued' }) => {
     const map: Record<TimelineVariant, ReturnType<typeof css>> = {
-      StatusChanged: css`
+      continued: css`
         background: ${semanticColors.branding.surface.disabled};
       `,
       accepted: css`
-        background: #3dcb2c;
-      `,
-      continued: css`
-        background: #f59e0b;
+        background: ${semanticColors.global.surface.status.online};
       `,
       rejected: css`
-        background: #cb2c2d;
+        background: ${semanticColors.global.surface.status.notification};
       `,
       download: css`
-        background: #9ca3af;
+        background: ${semanticColors.branding.surface.disabled};
       `,
     };
-    return map[$variant as TimelineVariant] ?? map['StatusChanged'];
+    return map[$variant as TimelineVariant] ?? map['continued'];
   }}
 
-  ${({ $variant = 'StatusChanged' }) => {
+  ${({ $variant = 'continued' }) => {
     const map: Record<TimelineVariant, ReturnType<typeof css>> = {
-      StatusChanged: css`
+      continued: css`
         border-color: ${semanticColors.branding.surface.enabled};
       `,
       accepted: css`
-        border-color: #21731c;
-      `,
-      continued: css`
-        border-color: #f59e0b;
+        border-color: ${semanticColors.global.border.feedback.success};
       `,
       rejected: css`
-        border-color: #731c1c;
+        border-color: ${semanticColors.global.border.feedback.error};
       `,
       download: css`
-        border-color: #9ca3af;
+        border-color: ${semanticColors.branding.surface.enabled};
       `,
     };
-    return map[$variant as TimelineVariant] ?? map['StatusChanged'];
+    return map[$variant as TimelineVariant] ?? map['continued'];
   }}
 `;
 

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

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type TimelineVariant =
-  | 'StatusChanged'
   | 'accepted'
   | 'continued'
   | 'rejected'
@@ -33,3 +32,77 @@ export interface TimelineMetadata {
   to?: string;
   [key: string]: any;
 }
+
+export type RemoteEventType =
+  | 'subscription:partner_quote'
+  | 'subscription:partner_subscribe'
+  | 'order:proposal_refused'
+  | string;
+
+export interface RemoteEventActor {
+  id: number | string;
+  name: string;
+  type: 'app' | 'user' | string;
+}
+
+export interface RemoteEventData {
+  orderId?: string | null;
+  title?: string | number | null;
+  insuranceId?: string | null;
+  subscription?: {
+    branch?: number;
+    sumInsuredRatio?: number;
+    sumContract?: number;
+    hasExclusivity?: boolean;
+    hasContinuity?: boolean;
+    retroactive?: number;
+    coverages?: Array<unknown>;
+    insured?: {
+      name?: string;
+      type?: string;
+      document?: string;
+      address?: {
+        cep?: string;
+        street?: string;
+        number?: number | string;
+        locale?: string;
+        city?: string;
+        uf?: string;
+        complement?: string | null;
+      };
+    };
+    contract?: {
+      edital?: string | null;
+      number?: string | null;
+      title?: string | null;
+      addition?: string | null;
+      object?: string | null;
+      process?: string | null;
+      signedOn?: string | null;
+    };
+    event?: unknown;
+    startAt?: string | null;
+    endAt?: string | null;
+    period?: number | null;
+    sumInsured?: number | null;
+    endosso?: unknown;
+    underwriter?: unknown;
+    details?: unknown;
+  } | null;
+  offers?: Array<{ insurerId: number; insurerName: string }> | null;
+  upn?: number;
+  isApp?: boolean;
+}
+
+export interface RemoteEvent {
+  eventType: RemoteEventType;
+  isPublic: boolean;
+  startAt: string; // ISO
+  endAt?: string; // ISO
+  duration?: number; // ms
+  correlationId: string;
+  parentCorrelationId?: string;
+  parentEventType?: string;
+  actor: RemoteEventActor;
+  data: RemoteEventData;
+}

package/src/components/organisms/TimelineModal/TimelineModal.styles.ts

@@ -32,7 +32,7 @@ export const Title = styled.h2`
   flex-direction: row;
   gap: 8px;
   align-items: center;
-  margin-top: -24px;
+  margin-top: -2px;
 `;
 
 export const CloseIcon = styled(Dialog.Close)`

package/src/lib/helpers.ts

@@ -1,17 +0,0 @@
-import { TimelineVariant } from '@/components/molecules/TimeLine/TimeLine.types';
-
-export function labelFromVariant(v?: TimelineVariant) {
-  switch (v) {
-    case 'accepted':
-      return 'Proposta aceita';
-    case 'continued':
-      return 'Continuação';
-    case 'rejected':
-      return 'Recusada';
-    case 'download':
-      return 'Download';
-    case 'StatusChanged':
-    default:
-      return 'Status Alterado';
-  }
-}