Merge pull request #2246 from AletheiaFact/feature/verification-request-tracking-improvements

UX: Add tracking card, improve latestStatus, and show feedback for missing dates

Author: caneppelevitor

public/locales/en/tracking.json

@@ -5,5 +5,6 @@
   "description_POSTED": "Verification request complete and reviewed. Results posted.",
   "description_DECLINED": "Verification request declined following detailed analysis. The veracity of the information provided could not be confirmed.",
   "errorInvalidId": "Invalid verification request ID format.",
-  "errorFetchData": "Failed to load tracking information. Please try again later."
+  "errorFetchData": "Failed to load tracking information. Please try again later.",
+  "noDateFound": "No date history found"
 }

public/locales/pt/tracking.json

@@ -5,5 +5,6 @@
   "description_POSTED": "Denúncia completa e revisada. Resultados publicados.",
   "description_DECLINED": "Denúncia negada após análise detalhada. Não foi possível confirmar a veracidade dos dados fornecidos.",
   "errorInvalidId": "O identificador da denúncia é inválido.",
-  "errorFetchData": "Não foi possível carregar as informações de rastreamento. Tente novamente."
+  "errorFetchData": "Não foi possível carregar as informações de rastreamento. Tente novamente.",
+  "noDateFound": "Nenhum histórico de data encontrado"
 }

server/mocks/VerificationRequestMock.ts

@@ -22,4 +22,5 @@ export const mockQuery = {
 export const mockVerificationRequestModel = {
   find: jest.fn().mockReturnValue(mockQuery),
   aggregate: jest.fn().mockReturnThis(),
-};
+  getById: jest.fn(),
+};

server/tracking/tracking.module.ts

@@ -3,11 +3,13 @@ import { TrackingController } from "./tracking.controller";
 import { TrackingService } from "./tracking.service";
 import { HistoryModule } from "../history/history.module";
 import { AbilityModule } from "../auth/ability/ability.module";
+import { VerificationRequestModule } from "../verification-request/verification-request.module";
 
 @Module({
   imports: [
     HistoryModule,
     AbilityModule,
+    VerificationRequestModule
   ],
   controllers: [TrackingController],
   providers: [TrackingService],

server/tracking/tracking.service.spec.ts

@@ -3,12 +3,14 @@ import { TrackingService } from "./tracking.service";
 import { HistoryService } from "../history/history.service";
 import { NotFoundException } from "@nestjs/common";
 import { TargetModel } from "../history/schema/history.schema";
-import { 
-  historyServiceMock, 
-  mockHistoryItem, 
-  mockHistoryResponse 
+import {
+  historyServiceMock,
+  mockHistoryItem,
+  mockHistoryResponse
 } from "../mocks/HistoryMock";
 import { VerificationRequestStatus } from "../verification-request/dto/types";
+import { VerificationRequestService } from "../verification-request/verification-request.service";
+import { mockVerificationRequestModel } from "../mocks/VerificationRequestMock";
 
 describe("TrackingService (Unit)", () => {
   let service: TrackingService;
@@ -22,6 +24,10 @@ describe("TrackingService (Unit)", () => {
           provide: HistoryService,
           useValue: historyServiceMock,
         },
+        {
+          provide: VerificationRequestService,
+          useValue: mockVerificationRequestModel,
+        },
       ],
     }).compile();
 
@@ -31,6 +37,11 @@ describe("TrackingService (Unit)", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+
+    mockVerificationRequestModel.getById.mockResolvedValue({
+      id: String(mockHistoryItem.targetId),
+      status: VerificationRequestStatus.PRE_TRIAGE,
+    });
   });
 
   describe("getTrackingStatus", () => {
@@ -49,6 +60,7 @@ describe("TrackingService (Unit)", () => {
         TargetModel.VerificationRequest,
         expect.objectContaining({ pageSize: 50 })
       );
+      expect(mockVerificationRequestModel.getById).toHaveBeenCalledWith(targetIdStr);
     });
 
     it("should filter out events where status did not change", async () => {
@@ -76,7 +88,7 @@ describe("TrackingService (Unit)", () => {
 
     it("should throw NotFoundException and log warning when no history exists", async () => {
       historyService.getHistoryForTarget.mockResolvedValue({ history: [] });
-      
+
       const loggerWarnSpy = jest.spyOn(service['logger'], 'warn');
 
       await expect(service.getTrackingStatus(targetIdStr)).rejects.toThrow(
@@ -90,7 +102,7 @@ describe("TrackingService (Unit)", () => {
     it("should throw a generic error and log error when an unexpected failure occurs", async () => {
       const unexpectedError = new Error("Database connection lost");
       historyService.getHistoryForTarget.mockRejectedValue(unexpectedError);
-      
+
       const loggerErrorSpy = jest.spyOn(service['logger'], 'error');
 
       await expect(service.getTrackingStatus(targetIdStr)).rejects.toThrow(
@@ -102,30 +114,16 @@ describe("TrackingService (Unit)", () => {
       );
     });
 
-    it("should correctly identify the latestStatus as the last item in the array", async () => {
-      const multipleHistory = {
-        ...mockHistoryResponse,
-        history: [
-          {
-            ...mockHistoryItem,
-            details: { after: { status: VerificationRequestStatus.PRE_TRIAGE } }
-          },
-          {
-            ...mockHistoryItem,
-            _id: "latest-id",
-            details: { 
-              before: { status: VerificationRequestStatus.PRE_TRIAGE },
-              after: { status: VerificationRequestStatus.IN_TRIAGE } 
-            }
-          }
-        ],
-      };
-      historyService.getHistoryForTarget.mockResolvedValue(multipleHistory);
+    it("should return currentStatus from the verification request regardless of history", async () => {
+      historyService.getHistoryForTarget.mockResolvedValue(mockHistoryResponse);
+      mockVerificationRequestModel.getById.mockResolvedValue({
+        id: targetIdStr,
+        status: VerificationRequestStatus.IN_TRIAGE,
+      });
 
       const result = await service.getTrackingStatus(targetIdStr);
 
       expect(result.currentStatus).toBe(VerificationRequestStatus.IN_TRIAGE);
-      expect(result.historyEvents.at(-1)?.status).toBe(VerificationRequestStatus.IN_TRIAGE);
     });
   });
-});
+});

server/tracking/tracking.service.ts

@@ -2,12 +2,16 @@ import { Injectable, InternalServerErrorException, Logger, NotFoundException } f
 import { HistoryService } from "../history/history.service";
 import { HistoryType, TargetModel } from "../history/schema/history.schema";
 import { TrackingResponseDTO } from "./types/tracking.interfaces";
+import { VerificationRequestService } from "../verification-request/verification-request.service";
 
 @Injectable()
 export class TrackingService {
   private readonly logger = new Logger(TrackingService.name);
-  
-  constructor(private readonly historyService: HistoryService) {}
+
+  constructor(
+    private readonly historyService: HistoryService,
+    private verificationRequestService: VerificationRequestService,
+) { }
 
   /**
    * Returns the history of status changes (tracking) for a specific verification request.
@@ -17,6 +21,9 @@ export class TrackingService {
    */
   async getTrackingStatus(verificationRequestId: string): Promise<TrackingResponseDTO> {
     try {
+    // We only need to call verification requests here because we don't have histories for all verification request steps yet, so it's safer to use the latestStatus from the verification request instead of the history.
+    const verificationRequest = await this.verificationRequestService.getById(verificationRequestId);
+
     const { history } = await this.historyService.getHistoryForTarget(verificationRequestId, TargetModel.VerificationRequest, {
       page: 0,
       pageSize: 50,
@@ -36,7 +43,7 @@ export class TrackingService {
         date: new Date(history.date),
       }));
 
-    const latestStatus = tracking.length > 0 ? tracking.at(-1)?.status : null;
+    const latestStatus = verificationRequest.status
 
     return {
       currentStatus: latestStatus,
@@ -49,7 +56,7 @@ export class TrackingService {
       }
       this.logger.error(
         `Failed to fetch tracking for ID: ${verificationRequestId}`,
-        error.stack, 
+        error.stack,
       );
       throw new InternalServerErrorException("Internal server error while fetching tracking status.");
     }

server/tracking/types/tracking.interfaces.ts

@@ -1,7 +1,7 @@
 import { VerificationRequestStatus } from "../../verification-request/dto/types";
 
 export interface TrackingResponseDTO {
-  currentStatus: VerificationRequestStatus;
+  currentStatus: string;
   historyEvents: HistoryItem[];
 }
 interface HistoryItem {

src/components/Tracking/TrackingCard.tsx

@@ -13,7 +13,7 @@ const initialTrackingState: TrackingResponseDTO = {
   historyEvents: [],
 };
 
-const TrackingCard = ({ verificationRequestId }: TrackingCardProps) => {
+const TrackingCard = ({ verificationRequestId, isMinimal }: TrackingCardProps) => {
   const [trackingData, setTrackingData] = useState<TrackingResponseDTO>(initialTrackingState);
   const [isLoading, setIsLoading] = useState(true);
   const { t } = useTranslation();
@@ -49,16 +49,25 @@ const TrackingCard = ({ verificationRequestId }: TrackingCardProps) => {
         flexDirection: "column",
         maxWidth: "100%",
         padding: "24px",
-        margin: "24px 0",
+        height: isMinimal ? "100%" : "auto",
+        margin: isMinimal ? 0 : "24px 0",
         gap: 12
       }}
     >
-      <Typography variant="h5">
+      <Typography
+        style={{
+           fontFamily: "initial",
+           fontSize: 26,
+           lineHeight: 1.35
+        }}
+        variant="h1"
+      >
         {t("tracking:verificationProgress")}
       </Typography>
       <TrackingStep
         currentStatus={currentStatus}
         historyEvents={historyEvents}
+        isMinimal={isMinimal}
       />
     </CardBase>
   );

src/components/Tracking/TrackingStep.tsx

@@ -32,6 +32,7 @@ const TrackingStep = ({
   stepDate,
   isCompleted,
   isDeclined,
+  isMinimal
 }: TrackingStepProps) => {
   const { t } = useTranslation();
 
@@ -42,6 +43,7 @@ const TrackingStep = ({
 
   return (
     <StepLabelStyled
+      sx={{ padding: isMinimal ? 0 : "8px 0" }}
       icon={<Icon style={{ color }} />}
       error={isDeclined}
       backgroundStatusColor={bg}
@@ -52,11 +54,15 @@ const TrackingStep = ({
           {t(`verificationRequest:${translationKey}`)}
         </Typography>
 
-        {stepDate && (
-          <Typography variant="caption" className="dateLabel">
-            <LocalizedDate date={stepDate} showTime />
-          </Typography>
-        )}
+        {stepDate ? (
+            <Typography variant="caption" className="dateLabel">
+               {stepDate === "noData" ? (
+                    t("tracking:noDateFound")
+               ) : (
+                    <LocalizedDate date={stepDate} showTime />
+               )}
+            </Typography>
+          ) : null}
       </Grid>
 
       <Typography variant="body2" className="description">
@@ -66,4 +72,4 @@ const TrackingStep = ({
   );
 };
 
-export default TrackingStep;
+export default TrackingStep;

src/components/Tracking/TrackingStepper.tsx

@@ -17,13 +17,24 @@ const getVisibleSteps = (currentStatus: VerificationRequestStatus): Verification
 const TrackingStepper = ({
   currentStatus,
   historyEvents,
+  isMinimal,
 }: TrackingResponseDTO) => {
   const dynamicSteps = getVisibleSteps(currentStatus);
   const completedStepIndex = dynamicSteps.indexOf(currentStatus);
 
   const getDateForStep = (stepStatus: VerificationRequestStatus) => {
-    const history = historyEvents.find(h => h.status === stepStatus);
-    return history ? new Date(history.date) : null;
+    const history = historyEvents.find(history => history.status === stepStatus);
+
+    if (history) {
+        return new Date(history.date);
+    }
+
+    // This is only necessary because we are not creating histories for this step, so it's good UX to provide feedback. This will no longer be necessary once all steps have a history. Tracked in issue #2244
+    if (stepStatus === VerificationRequestStatus.IN_TRIAGE) {
+        return "noData"
+    }
+
+    return null;
   };
 
   return (
@@ -40,6 +51,7 @@ const TrackingStepper = ({
               stepDate={stepDate}
               isCompleted={isCompleted}
               isDeclined={isDeclined}
+              isMinimal={isMinimal}
             />
           </Step>
         );
@@ -48,4 +60,4 @@ const TrackingStepper = ({
   );
 };
 
-export default TrackingStepper;
+export default TrackingStepper;