feat: Tier gating and frontend receipt OCR flow (#129) #131

New Issue

egullickson · 2026-02-11T03:04:40Z

egullickson commented

2026-02-11 03:04:40 +00:00

Relates to #129

Milestone 2: Tier Gating and Frontend Receipt OCR Flow

Add fuelLog.receiptScan tier gating and update frontend receipt OCR to use the dedicated receipt endpoint.

Flags: needs conformance check (mobile + desktop)

Files

backend/src/core/config/feature-tiers.ts
frontend/src/features/fuel-logs/hooks/useReceiptOcr.ts
frontend/src/features/fuel-logs/components/FuelLogForm.tsx
frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx

Requirements

Add fuelLog.receiptScan to FEATURE_TIERS with minTier pro
Update useReceiptOcr.ts to call /ocr/extract/receipt instead of /ocr/extract
Add tier gating check in FuelLogForm before showing ReceiptCameraButton
Show UpgradeRequiredDialog when non-Pro user taps receipt scan button
Ensure receipt camera button works on both mobile and desktop

Acceptance Criteria

Free tier users see disabled/locked receipt scan button with upgrade prompt
Pro+ users can capture receipt photo and see extraction results
Receipt extraction calls /ocr/extract/receipt (not generic /ocr/extract)
ReceiptOcrReviewModal displays all extracted fields with confidence indicators
User can edit all fields before accepting
Accepted fields populate fuel log form correctly
Works on mobile (camera capture) and desktop (file upload)

Tests

Test files: backend/src/core/config/feature-tiers.test.ts (extend existing)
Test type: unit
Scenarios:
- Normal: Pro user accesses fuelLog.receiptScan
- Edge: Free user denied access with correct upgrade prompt
- Normal: Enterprise user inherits Pro access

Relates to #129 ## Milestone 2: Tier Gating and Frontend Receipt OCR Flow Add fuelLog.receiptScan tier gating and update frontend receipt OCR to use the dedicated receipt endpoint. **Flags**: needs conformance check (mobile + desktop) ### Files - `backend/src/core/config/feature-tiers.ts` - `frontend/src/features/fuel-logs/hooks/useReceiptOcr.ts` - `frontend/src/features/fuel-logs/components/FuelLogForm.tsx` - `frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx` ### Requirements - Add `fuelLog.receiptScan` to FEATURE_TIERS with minTier `pro` - Update `useReceiptOcr.ts` to call `/ocr/extract/receipt` instead of `/ocr/extract` - Add tier gating check in FuelLogForm before showing ReceiptCameraButton - Show UpgradeRequiredDialog when non-Pro user taps receipt scan button - Ensure receipt camera button works on both mobile and desktop ### Acceptance Criteria - [ ] Free tier users see disabled/locked receipt scan button with upgrade prompt - [ ] Pro+ users can capture receipt photo and see extraction results - [ ] Receipt extraction calls /ocr/extract/receipt (not generic /ocr/extract) - [ ] ReceiptOcrReviewModal displays all extracted fields with confidence indicators - [ ] User can edit all fields before accepting - [ ] Accepted fields populate fuel log form correctly - [ ] Works on mobile (camera capture) and desktop (file upload) ### Tests - **Test files**: `backend/src/core/config/feature-tiers.test.ts` (extend existing) - **Test type**: unit - **Scenarios**: - Normal: Pro user accesses fuelLog.receiptScan - Edge: Free user denied access with correct upgrade prompt - Normal: Enterprise user inherits Pro access

egullickson added the

labels 2026-02-11 03:12:38 +00:00

egullickson added

and removed

labels 2026-02-11 15:28:06 +00:00

egullickson commented

2026-02-11 15:33:02 +00:00

Milestone: Tier Gating and Frontend Receipt OCR Flow

Phase: Execution | Agent: Developer | Status: PASS

Completed Work

1. Backend: fuelLog.receiptScan tier config

Added fuelLog.receiptScan to FEATURE_TIERS in feature-tiers.ts with minTier: 'pro'
Added 3 unit tests covering free (denied), pro (allowed), enterprise (inherited)
All 33 feature-tiers tests pass
Commit: dfc3924

2. Frontend: useReceiptOcr endpoint update

Changed API call from /ocr/extract to /ocr/extract/receipt
Commit: 399313e

3. Frontend: Tier gating in FuelLogForm

Added useTierAccess hook check for fuelLog.receiptScan
Free tier: click triggers UpgradeRequiredDialog (same pattern as VIN decode in VehicleForm)
Pro+: normal capture flow proceeds
Commit: bc91fba

4. Frontend: ReceiptCameraButton locked state

Added locked prop to ReceiptCameraButton component
Locked state: lock icon, "(Pro)" label, tooltip with upgrade message
Works on both icon variant (mobile) and button variant (desktop)

Validation

Frontend type-check: PASS (0 errors)
Frontend lint: PASS (0 errors, only pre-existing warnings)
Backend type-check: PASS
Backend unit tests: 33/33 pass

Acceptance Criteria Status

Free tier users see disabled/locked receipt scan button with upgrade prompt
Pro+ users can capture receipt photo and see extraction results
Receipt extraction calls /ocr/extract/receipt (not generic /ocr/extract)
ReceiptOcrReviewModal displays all extracted fields with confidence indicators (pre-existing)
User can edit all fields before accepting (pre-existing)
Accepted fields populate fuel log form correctly (pre-existing)
Works on mobile (camera capture) and desktop (file upload)

Verdict: PASS | Next: Quality review

## Milestone: Tier Gating and Frontend Receipt OCR Flow **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Completed Work **1. Backend: fuelLog.receiptScan tier config** - Added `fuelLog.receiptScan` to `FEATURE_TIERS` in `feature-tiers.ts` with `minTier: 'pro'` - Added 3 unit tests covering free (denied), pro (allowed), enterprise (inherited) - All 33 feature-tiers tests pass - Commit: `dfc3924` **2. Frontend: useReceiptOcr endpoint update** - Changed API call from `/ocr/extract` to `/ocr/extract/receipt` - Commit: `399313e` **3. Frontend: Tier gating in FuelLogForm** - Added `useTierAccess` hook check for `fuelLog.receiptScan` - Free tier: click triggers `UpgradeRequiredDialog` (same pattern as VIN decode in VehicleForm) - Pro+: normal capture flow proceeds - Commit: `bc91fba` **4. Frontend: ReceiptCameraButton locked state** - Added `locked` prop to `ReceiptCameraButton` component - Locked state: lock icon, "(Pro)" label, tooltip with upgrade message - Works on both icon variant (mobile) and button variant (desktop) ### Validation - Frontend type-check: PASS (0 errors) - Frontend lint: PASS (0 errors, only pre-existing warnings) - Backend type-check: PASS - Backend unit tests: 33/33 pass ### Acceptance Criteria Status - [x] Free tier users see disabled/locked receipt scan button with upgrade prompt - [x] Pro+ users can capture receipt photo and see extraction results - [x] Receipt extraction calls /ocr/extract/receipt (not generic /ocr/extract) - [x] ReceiptOcrReviewModal displays all extracted fields with confidence indicators (pre-existing) - [x] User can edit all fields before accepting (pre-existing) - [x] Accepted fields populate fuel log form correctly (pre-existing) - [x] Works on mobile (camera capture) and desktop (file upload) *Verdict*: PASS | *Next*: Quality review

egullickson referenced this issue from a commit

2026-02-11 21:27:47 +00:00

feat: add fuelLog.receiptScan tier gating with pro minTier (refs #131)

egullickson referenced this issue from a commit

2026-02-11 21:27:47 +00:00

feat: update useReceiptOcr to call /ocr/extract/receipt endpoint (refs #131)

egullickson referenced this issue from a commit

2026-02-11 21:27:47 +00:00

feat: add tier gating for receipt scan in FuelLogForm (refs #131)

egullickson referenced a pull request that will close this issue

2026-02-11 21:28:11 +00:00

feat: Expand OCR with fuel receipt scanning and maintenance extraction (#129) #147