Re_Figma_Code/FLOW_DELETION_GUIDE.md

Flow Deletion Guide - Complete Removal

Overview

This guide explains how to completely remove a flow type from the application. The architecture ensures that deleting a flow folder removes ALL related code with zero dependencies remaining.

Architecture Guarantee

✅ Each flow folder is completely self-contained

• All components, screens, hooks, services, utils, types are in the flow folder
• No dependencies on the flow folder from outside (except the registry)
• Deleting a folder = Removing all related functionality

How to Delete a Flow Type

Example: Removing Dealer Claim Flow

Step 1: Delete the Flow Folder

# Delete the entire dealer-claim folder
rm -rf src/flows/dealer-claim/

What gets deleted:

• ✅ pages/RequestDetail.tsx - Complete dealer claim detail screen
• ✅ All request detail components (OverviewTab, WorkflowTab, IOTab)
• ✅ All claim cards (5 cards)
• ✅ All modals (7 modals)
• ✅ Request creation wizard
• ✅ All future hooks, services, utils, types

Step 2: Update Flow Registry

// src/flows/index.ts

// Remove import
// import * as DealerClaimFlow from './dealer-claim';

// Update FlowRegistry
export const FlowRegistry = {
  CUSTOM: CustomFlow,
  // DEALER_CLAIM: DealerClaimFlow,  // REMOVED
} as const;

// Update getRequestDetailScreen()
export function getRequestDetailScreen(flowType: RequestFlowType) {
  switch (flowType) {
    // case 'DEALER_CLAIM':           // REMOVED
    //   return DealerClaimFlow.DealerClaimRequestDetail;
    case 'CUSTOM':
    default:
      return CustomFlow.CustomRequestDetail;
  }
}

// Update other functions similarly
export function getOverviewTab(flowType: RequestFlowType) {
  switch (flowType) {
    // case 'DEALER_CLAIM':           // REMOVED
    //   return DealerClaimFlow.DealerClaimOverviewTab;
    case 'CUSTOM':
    default:
      return CustomFlow.CustomOverviewTab;
  }
}

Step 3: Update Type Definitions (Optional)

// src/utils/requestTypeUtils.ts

// Remove from type union
export type RequestFlowType = 'CUSTOM'; // 'DEALER_CLAIM' removed

// Remove detection function (optional - can keep for backward compatibility)
// export function isDealerClaimRequest(request: any): boolean { ... }

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

Step 4: Update Navigation (If Needed)

// src/utils/requestNavigation.ts

export function navigateToCreateRequest(
  navigate: NavigateFunction,
  flowType: RequestFlowType = 'CUSTOM'
): void {
  // Remove dealer claim case
  // if (flowType === 'DEALER_CLAIM') {
  //   return '/claim-management';
  // }
  return '/new-request';
}

Step 5: Remove Routes (If Needed)

// src/App.tsx

// Remove dealer claim route
// <Route 
//   path="/claim-management" 
//   element={<ClaimManagementWizard ... />} 
// />

That's it! All dealer claim code is completely removed.

Verification Checklist

After deleting a flow, verify:

• Flow folder deleted
• FlowRegistry updated
• All get*() functions updated
• Type definitions updated (optional)
• Navigation updated (if needed)
• Routes removed (if needed)
• No broken imports
• Application compiles successfully
• No references to deleted flow in codebase

What Happens When You Delete a Flow

✅ Removed

• Complete RequestDetail screen
• All flow-specific components
• All flow-specific modals
• All flow-specific cards
• Request creation wizard
• All flow-specific code

✅ Still Works

• Other flow types continue working
• Shared components remain
• Main RequestDetail router handles remaining flows
• Navigation for remaining flows

✅ No Orphaned Code

• No broken imports
• No dangling references
• No unused components
• Clean removal

Current Flow Structure

Custom Flow (flows/custom/)

Contains:

• pages/RequestDetail.tsx - Complete custom request detail screen
• components/request-detail/ - Custom detail components
• components/request-creation/ - Custom creation component

To remove: Delete flows/custom/ folder and update registry

Dealer Claim Flow (flows/dealer-claim/)

Contains:

• pages/RequestDetail.tsx - Complete dealer claim detail screen
• components/request-detail/ - Dealer claim detail components
• components/request-detail/claim-cards/ - 5 claim cards
• components/request-detail/modals/ - 7 modals
• components/request-creation/ - Claim management wizard

To remove: Delete flows/dealer-claim/ folder and update registry

Benefits of This Architecture

1. True Modularity: Each flow is independent
2. Easy Removal: Delete folder + update registry = Done
3. No Side Effects: Removing one flow doesn't affect others
4. Clear Ownership: Know exactly what belongs to which flow
5. Maintainable: All related code in one place
6. Scalable: Easy to add new flows

Example: Complete Removal

# 1. Delete folder
rm -rf src/flows/dealer-claim/

# 2. Update registry (remove 3 lines)
# 3. Update type (remove 1 line)
# 4. Done! All dealer claim code is gone.

Time to remove a flow: ~2 minutes

Conclusion

The architecture ensures that deleting a flow folder removes ALL related code. There are no dependencies, no orphaned files, and no cleanup needed. Each flow is a complete, self-contained module that can be added or removed independently.