Re_Figma_Code/REQUEST_DETAIL_ROUTING_FLOW.md

Request Detail Routing Flow - How It Works

Overview

This document explains how RequestDetail.tsx routes to flow-specific detail screens based on the request type.

Complete Flow Diagram

User clicks on Request Card
    ↓
Navigate to /request/{requestId}
    ↓
RequestDetail.tsx (Router Component)
    ↓
Step 1: Fetch Request Data
    ├─ useRequestDetails(requestId, dynamicRequests, user)
    ├─ Calls API: workflowApi.getWorkflowDetails(requestId)
    └─ Returns: apiRequest (full request object)
    ↓
Step 2: Determine Flow Type
    ├─ getRequestFlowType(apiRequest)
    ├─ Checks: request.workflowType, request.templateType, etc.
    └─ Returns: 'CUSTOM' | 'DEALER_CLAIM'
    ↓
Step 3: Get Flow-Specific Screen Component
    ├─ getRequestDetailScreen(flowType)
    ├─ From: src/flows.ts
    └─ Returns: CustomRequestDetail | DealerClaimRequestDetail component
    ↓
Step 4: Render Flow-Specific Screen
    └─ <RequestDetailScreen {...props} />
        ├─ If CUSTOM → src/custom/pages/RequestDetail.tsx
        └─ If DEALER_CLAIM → src/dealer-claim/pages/RequestDetail.tsx

Step-by-Step Breakdown

Step 1: Fetch Request Data

File: src/pages/RequestDetail/RequestDetail.tsx (lines 75-79)

const {
  apiRequest,
  loading: requestLoading,
} = useRequestDetails(requestIdentifier, dynamicRequests, user);

What happens:

• useRequestDetails hook fetches the request from API
• Returns apiRequest object with all request data
• Includes: workflowType, templateType, templateName, etc.

Step 2: Determine Flow Type

File: src/pages/RequestDetail/RequestDetail.tsx (line 94)

const flowType = getRequestFlowType(apiRequest);

File: src/utils/requestTypeUtils.ts (lines 70-75)

export function getRequestFlowType(request: any): RequestFlowType {
  if (isDealerClaimRequest(request)) {
    return 'DEALER_CLAIM';
  }
  return 'CUSTOM';
}

Detection Logic:

• Checks request.workflowType === 'CLAIM_MANAGEMENT' → DEALER_CLAIM
• Checks request.templateType === 'claim-management' → DEALER_CLAIM
• Checks request.templateName === 'Claim Management' → DEALER_CLAIM
• Otherwise → CUSTOM (default)

Step 3: Get Flow-Specific Screen Component

File: src/pages/RequestDetail/RequestDetail.tsx (line 95)

const RequestDetailScreen = getRequestDetailScreen(flowType);

File: src/flows.ts (lines 81-89)

export function getRequestDetailScreen(flowType: RequestFlowType) {
  switch (flowType) {
    case 'DEALER_CLAIM':
      return DealerClaimFlow.DealerClaimRequestDetail;  // From src/dealer-claim/
    case 'CUSTOM':
    default:
      return CustomFlow.CustomRequestDetail;            // From src/custom/
  }
}

What happens:

• getRequestDetailScreen('DEALER_CLAIM') → Returns DealerClaimRequestDetail component
• getRequestDetailScreen('CUSTOM') → Returns CustomRequestDetail component

Component Sources:

• DealerClaimRequestDetail → src/dealer-claim/pages/RequestDetail.tsx
• CustomRequestDetail → src/custom/pages/RequestDetail.tsx

Step 4: Render Flow-Specific Screen

File: src/pages/RequestDetail/RequestDetail.tsx (lines 99-105)

return (
  <RequestDetailScreen
    requestId={propRequestId}
    onBack={onBack}
    dynamicRequests={dynamicRequests}
  />
);

What happens:

• Renders the flow-specific RequestDetail component
• Each flow has its own complete implementation
• All props are passed through

Import Chain

src/pages/RequestDetail/RequestDetail.tsx
    ↓ imports
src/flows.ts
    ↓ imports
src/custom/index.ts → exports CustomRequestDetail
    ↓ imports
src/custom/pages/RequestDetail.tsx → CustomRequestDetail component

OR

src/flows.ts
    ↓ imports
src/dealer-claim/index.ts → exports DealerClaimRequestDetail
    ↓ imports
src/dealer-claim/pages/RequestDetail.tsx → DealerClaimRequestDetail component

Key Files

1. Router Component

• File: src/pages/RequestDetail/RequestDetail.tsx
• Role: Determines flow type and routes to appropriate screen
• Key Functions:
  • Fetches request data
  • Determines flow type
  • Gets flow-specific screen component
  • Renders the screen

2. Flow Registry

• File: src/flows.ts
• Role: Central registry for all flow types
• Key Function: getRequestDetailScreen(flowType) - Returns the appropriate screen component

3. Flow Type Detection

• File: src/utils/requestTypeUtils.ts
• Role: Detects request type from request data
• Key Function: getRequestFlowType(request) - Returns 'CUSTOM' or 'DEALER_CLAIM'

4. Flow-Specific Screens

• Custom: src/custom/pages/RequestDetail.tsx → CustomRequestDetail
• Dealer Claim: src/dealer-claim/pages/RequestDetail.tsx → DealerClaimRequestDetail

Example Flow

Example 1: Custom Request

1. User clicks Custom Request card
2. Navigate to: /request/REQ-2024-001
3. RequestDetail.tsx loads
4. useRequestDetails fetches: { workflowType: 'CUSTOM', ... }
5. getRequestFlowType() → 'CUSTOM'
6. getRequestDetailScreen('CUSTOM') → CustomRequestDetail component
7. Renders: src/custom/pages/RequestDetail.tsx

Example 2: Dealer Claim Request

1. User clicks Dealer Claim card
2. Navigate to: /request/REQ-2024-002
3. RequestDetail.tsx loads
4. useRequestDetails fetches: { workflowType: 'CLAIM_MANAGEMENT', ... }
5. getRequestFlowType() → 'DEALER_CLAIM'
6. getRequestDetailScreen('DEALER_CLAIM') → DealerClaimRequestDetail component
7. Renders: src/dealer-claim/pages/RequestDetail.tsx

Benefits of This Architecture

1. Single Entry Point: All requests go through /request/{id} route
2. Dynamic Routing: Flow type determined at runtime from request data
3. Modular: Each flow is completely self-contained
4. Easy to Extend: Add new flow type by:
   • Create src/new-flow/ folder
   • Add to src/flows.ts registry
   • Done!

Summary

The routing works in 4 simple steps:

1. Fetch → Get request data from API
2. Detect → Determine flow type from request properties
3. Resolve → Get flow-specific screen component from registry
4. Render → Display the appropriate screen

All of this happens automatically based on the request data - no manual routing needed!