Merge pull request #301 from dev-fatima-24/feature/issue-234-claim-review-step

Frontend — Claim filing confirmation: summary review step before wallet signing

Author: jhayniffy

frontend/src/components/claims/ClaimWizard.tsx

@@ -16,12 +16,14 @@ import {
   useToast,
 } from '@/components/ui';
 import { useWallet } from '@/hooks/use-wallet';
+import { useDraftPersistence } from '@/hooks/use-draft-persistence';
 import { ClaimAPI } from '@/lib/api/claim';
 
 import { AmountStep } from './steps/AmountStep';
 import { EvidenceStep } from './steps/EvidenceStep';
 import { NarrativeStep } from './steps/NarrativeStep';
 import { ReviewStep } from './steps/ReviewStep';
+import { DraftResumeBanner } from './DraftResumeBanner';
 
 interface ClaimWizardProps {
   policyId: string;
@@ -35,6 +37,8 @@ const STEPS = [
   { id: '4', title: 'Review', description: 'Confirm & Sign' },
 ];
 
+const CLAIM_DRAFT_SCHEMA_VERSION = 1;
+
 export function ClaimWizard({ policyId, maxCoverage }: ClaimWizardProps) {
   const router = useRouter();
   const { toast } = useToast();
@@ -43,6 +47,7 @@ export function ClaimWizard({ policyId, maxCoverage }: ClaimWizardProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [txStatus, setTxStatus] = useState<string>('');
+  const [showBanner, setShowBanner] = useState(true);
   const stepHeadingRef = useRef<HTMLHeadingElement>(null);
 
   const [formData, setFormData] = useState({
@@ -51,6 +56,44 @@ export function ClaimWizard({ policyId, maxCoverage }: ClaimWizardProps) {
     evidence: [] as { url: string; contentSha256Hex: string }[],
   });
 
+  const { hasDraft, saveDraft, loadDraft, clearDraft } = useDraftPersistence(
+    `claim-${policyId}`,
+    CLAIM_DRAFT_SCHEMA_VERSION
+  );
+
+  // Sync draft on form changes (excluding files/IPFS handled by hook sanitize)
+  useEffect(() => {
+    if (activeStep > 0 || formData.amount || formData.details) {
+      saveDraft({ ...formData, _step: activeStep });
+    }
+  }, [formData, activeStep, saveDraft]);
+
+  const handleResumeDraft = () => {
+    const draft = loadDraft();
+    if (draft) {
+      const { _step, ...data } = draft as any;
+      setFormData(prev => ({ ...prev, ...data }));
+      if (typeof _step === 'number') {
+        setActiveStep(_step);
+      }
+      toast({
+        title: 'Draft Restored',
+        description: 'You are continuing where you left off.',
+      });
+    }
+    setShowBanner(false);
+  };
+
+  const handleDismissBanner = () => {
+    clearDraft(); // Clearing explicitly if they choose to start over?
+    // Actually, maybe not clearing immediately, but just hiding banner?
+    // Requirements say "Resume draft banner when a valid draft is detected".
+    // If they dismiss, we should probably stop showing it but maybe keep draft until new data overwrites?
+    // Let's clear it to be safe and avoid confusion.
+    clearDraft();
+    setShowBanner(false);
+  };
+
   // Move focus to step heading when step changes
   useEffect(() => {
     if (stepHeadingRef.current) {
@@ -103,6 +146,10 @@ export function ClaimWizard({ policyId, maxCoverage }: ClaimWizardProps) {
 
       setTxStatus('Claim submitted successfully.');
       setIsSuccess(true);
+      
+      // EXTREMELY IMPORTANT: Clear draft on success (Issue #229)
+      clearDraft();
+
       toast({
         title: 'Claim Submitted!',
         description: 'Your claim has been successfully filed on-chain.',
@@ -173,6 +220,11 @@ export function ClaimWizard({ policyId, maxCoverage }: ClaimWizardProps) {
         </div>
       </CardHeader>
       <CardContent className="space-y-6">
+        {/* Banner for resuming draft (Requirement: Resume draft banner detected on wizard mount) */}
+        {hasDraft && showBanner && (
+          <DraftResumeBanner onConfirm={handleResumeDraft} onDismiss={handleDismissBanner} />
+        )}
+
         {/* Visually hidden heading receives focus on step change */}
         <h2
           ref={stepHeadingRef}
@@ -205,9 +257,14 @@ export function ClaimWizard({ policyId, maxCoverage }: ClaimWizardProps) {
         </StepContent>
 
         <StepContent title={STEPS[3].title} isActive={activeStep === 3} isCompleted={activeStep > 3}>
-          <ReviewStep data={formData} policyId={policyId} />
+          <ReviewStep 
+            data={formData} 
+            policyId={policyId} 
+            onEdit={(step) => setActiveStep(step)} 
+          />
         </StepContent>
 
+
         <div className="flex justify-between pt-4 border-t">
           <Button
             variant="ghost"

frontend/src/components/claims/DraftResumeBanner.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import { History, X } from 'lucide-react';
+import { Button } from '@/components/ui';
+
+interface DraftResumeBannerProps {
+  onConfirm: () => void;
+  onDismiss: () => void;
+}
+
+export function DraftResumeBanner({ onConfirm, onDismiss }: DraftResumeBannerProps) {
+  return (
+    <div 
+      className="flex items-center justify-between gap-4 rounded-lg bg-primary/5 border border-primary/20 p-4 mb-6 animate-in fade-in slide-in-from-top-4 duration-500"
+      role="alert"
+    >
+      <div className="flex items-center gap-3">
+        <div className="rounded-full bg-primary/20 p-2 text-primary">
+          <History className="h-5 w-5" />
+        </div>
+        <div>
+          <p className="text-sm font-semibold">Incomplete Claim Draft Found</p>
+          <p className="text-xs text-muted-foreground">
+            You have a partially completed claim for this policy. Would you like to resume?
+          </p>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button size="sm" variant="ghost" className="h-8 px-2" onClick={onDismiss} aria-label="Dismiss draft">
+          <X className="h-4 w-4" />
+        </Button>
+        <Button size="sm" className="h-8" onClick={onConfirm}>
+          Resume Draft
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/claims/__tests__/ReviewStep.test.tsx

@@ -0,0 +1,73 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReviewStep } from '../steps/ReviewStep';
+
+describe('ReviewStep', () => {
+  const mockOnEdit = jest.fn();
+
+  const mockData = {
+    amount: '1000',
+    details: 'This is a test claim narrative documenting the incident.',
+    evidence: [
+      { url: 'ipfs://QmYwAPJzv5CZsnA625s3Xf2SmxWeN4A7h...', contentSha256Hex: 'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855' },
+      { url: 'https://example.com/long-file-name-that-should-be-truncated-in-ui.jpg', contentSha256Hex: '01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b' }
+    ]
+  };
+
+  const policyId = '12345';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all claim data correctly', () => {
+    render(<ReviewStep data={mockData} policyId={policyId} />);
+
+    // Check amount
+    expect(screen.getByText('1000 stroops')).toBeInTheDocument();
+    
+    // Check policy ID
+    expect(screen.getByText('Policy ID: #12345')).toBeInTheDocument();
+
+    // Check narrative
+    expect(screen.getByText('This is a test claim narrative documenting the incident.')).toBeInTheDocument();
+
+    // Check evidence count
+    expect(screen.getByText('Evidence (2 files)')).toBeInTheDocument();
+
+    // Check evidence items
+    expect(screen.getByText('QmYwAPJzv5CZsnA625s3Xf2SmxWeN4A7h...')).toBeInTheDocument();
+    expect(screen.getByText('long-file-name-that-should-be-truncated-in-ui.jpg')).toBeInTheDocument();
+
+    // Check hashes (first and last parts)
+    expect(screen.getByText('e3b0c44298fc1c14...7852b855')).toBeInTheDocument();
+    expect(screen.getByText('01ba4719c80b6fe9...daca546b')).toBeInTheDocument();
+  });
+
+  it('handles empty evidence correctly', () => {
+    render(<ReviewStep data={{ ...mockData, evidence: [] }} policyId={policyId} />);
+    
+    expect(screen.getByText('Evidence (0 files)')).toBeInTheDocument();
+    expect(screen.getByText('No evidence uploaded.')).toBeInTheDocument();
+  });
+
+  it('triggers onEdit with correct step index when Edit is clicked', () => {
+    render(<ReviewStep data={mockData} policyId={policyId} onEdit={mockOnEdit} />);
+
+    const editButtons = screen.getAllByText('Edit');
+    expect(editButtons).toHaveLength(3);
+
+    // Click Edit Amount
+    fireEvent.click(editButtons[0]);
+    expect(mockOnEdit).toHaveBeenCalledWith(0);
+
+    // Click Edit Narrative
+    fireEvent.click(editButtons[1]);
+    expect(mockOnEdit).toHaveBeenCalledWith(1);
+
+    // Click Edit Evidence
+    fireEvent.click(editButtons[2]);
+    expect(mockOnEdit).toHaveBeenCalledWith(2);
+  });
+});

frontend/src/components/claims/steps/ReviewStep.tsx

@@ -9,9 +9,10 @@ interface ReviewStepProps {
     evidence: { url: string; contentSha256Hex: string }[];
   };
   policyId: string;
+  onEdit?: (step: number) => void;
 }
 
-export function ReviewStep({ data, policyId }: ReviewStepProps) {
+export function ReviewStep({ data, policyId, onEdit }: ReviewStepProps) {
   return (
     <div className="space-y-6 py-4">
       <div className="space-y-2">
@@ -24,17 +25,24 @@ export function ReviewStep({ data, policyId }: ReviewStepProps) {
       <div className="grid gap-4">
         <Card>
           <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
+            <div className="flex items-start gap-4">
               <div className="rounded-full bg-primary/10 p-2 text-primary">
                 <Wallet className="h-5 w-5" />
               </div>
               <div className="flex-1">
-                <p className="text-xs font-medium text-muted-foreground">Claim Amount</p>
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-muted-foreground">Claim Amount</p>
+                  {onEdit && (
+                    <button 
+                      onClick={() => onEdit(0)}
+                      className="text-xs font-medium text-primary hover:underline"
+                    >
+                      Edit
+                    </button>
+                  )}
+                </div>
                 <p className="text-lg font-bold">{data.amount} stroops</p>
-              </div>
-              <div className="text-right">
-                <p className="text-xs font-medium text-muted-foreground">Policy ID</p>
-                <p className="font-medium text-primary">#{policyId}</p>
+                <p className="text-xs text-muted-foreground">Policy ID: #{policyId}</p>
               </div>
             </div>
           </CardContent>
@@ -47,7 +55,17 @@ export function ReviewStep({ data, policyId }: ReviewStepProps) {
                 <FileText className="h-5 w-5" />
               </div>
               <div className="flex-1 space-y-1">
-                <p className="text-xs font-medium text-muted-foreground">Narrative</p>
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-muted-foreground">Narrative</p>
+                  {onEdit && (
+                    <button 
+                      onClick={() => onEdit(1)}
+                      className="text-xs font-medium text-primary hover:underline"
+                    >
+                      Edit
+                    </button>
+                  )}
+                </div>
                 <p className="text-sm leading-relaxed">{data.details || 'No details provided.'}</p>
               </div>
             </div>
@@ -61,20 +79,40 @@ export function ReviewStep({ data, policyId }: ReviewStepProps) {
                 <ImageIcon className="h-5 w-5" />
               </div>
               <div className="flex-1 space-y-3">
-                <p className="text-xs font-medium text-muted-foreground">Evidence ({data.evidence.length} files)</p>
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-muted-foreground">Evidence ({data.evidence.length} files)</p>
+                  {onEdit && (
+                    <button 
+                      onClick={() => onEdit(2)}
+                      className="text-xs font-medium text-primary hover:underline"
+                    >
+                      Edit
+                    </button>
+                  )}
+                </div>
                 <div className="grid grid-cols-1 gap-2">
                   {data.evidence.length > 0 ? (
                     data.evidence.map((item, i) => (
-                      <div key={i} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2 text-xs">
-                        <span className="truncate flex-1">{item.url}</span>
-                        <a 
-                          href={item.url} 
-                          target="_blank" 
-                          rel="noopener noreferrer"
-                          className="text-primary hover:underline"
-                        >
-                          View
-                        </a>
+                      <div key={i} className="flex flex-col gap-1 rounded-md border bg-muted/30 p-2 text-xs">
+                        <div className="flex items-center justify-between">
+                          <span className="font-medium truncate max-w-[200px]" title={item.url}>
+                            {item.url.split('/').pop() || 'file'}
+                          </span>
+                          <a 
+                            href={item.url} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-primary hover:underline"
+                          >
+                            View
+                          </a>
+                        </div>
+                        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                          <span className="shrink-0 font-mono">Hash:</span>
+                          <span className="truncate font-mono" title={item.contentSha256Hex}>
+                            {item.contentSha256Hex.substring(0, 16)}...{item.contentSha256Hex.substring(item.contentSha256Hex.length - 8)}
+                          </span>
+                        </div>
                       </div>
                     ))
                   ) : (