Skip to content

feat: Recon Engine Self-Serve Setup UI#4588

Closed
hs-control-center-bot wants to merge 3 commits intomainfrom
self-serve
Closed

feat: Recon Engine Self-Serve Setup UI#4588
hs-control-center-bot wants to merge 3 commits intomainfrom
self-serve

Conversation

@hs-control-center-bot
Copy link
Copy Markdown
Collaborator

@hs-control-center-bot hs-control-center-bot commented Mar 25, 2026

Summary

  • Adds a complete self-serve onboarding UI for the Recon Engine at /v1/recon-engine/setup
  • Two entry paths: Guided Setup (step-by-step wizard) and Expert Mode (tabbed, all sections accessible independently)
  • Covers all 4 critical API operations: Create Account, Create Ingestion Config, Create Transformation Config V2 (with embedded metadata schema), Create Recon Rule V2

What's included

Types & Encoders (ReconEngineSelfServeTypes.res, ReconEngineSelfServeUtils.res)

  • Complete ReScript type definitions mirroring every backend Rust struct/enum to the leaf level
  • JSON encoder functions producing exact API payloads, handling all serde edge cases:
    • #[serde(tag = "...")] internally tagged enums (strategy types flatten tags to same level)
    • #[serde(flatten)] on AmountSchemaConfig.unit_config and MetadataFieldSchemaConfig.field_config
    • #[serde(rename_all = "snake_case")] / #[serde(rename_all = "lowercase")]
    • Externally tagged IngestionConfigData ({"manual": null}, {"adyen": {...}})
    • Custom EntryField serialization ("metadata.xxx" strings)
  • Verified against api-sheet.yaml examples

API Layer (ReconEngineSelfServeHooks.res, APIUtils.res, APIUtilsTypes.res)

  • 4 new API hooks: useCreateAccount, useCreateIngestionConfig, useCreateTransformationConfig, useCreateReconRule
  • 4 new hyperswitchReconType variants with URL mappings
  • Note: create_ingestion_config currently requires AdminApiAuth on backend - pending backend change to accept JWT

UI Components (11 files)

  • Landing page: Dual-path selection (guided vs expert)
  • Account step: Add credit/debit accounts with currency selection, shows created accounts
  • Ingestion step: Configure Manual/Adyen/SFTP sources per account
  • Transformation step: Map CSV columns to system fields, add metadata fields, set unique constraints and processing mode
  • Rule step: Strategy builder supporting all OneToOne variants (SingleSingle, SingleMany, ManySingle, ManyMany), trigger/search/match configuration, aging config
  • Step indicator: Visual progress tracker with completion checks
  • Complete page: Summary and navigation to upload/overview

Routing & Navigation

  • Route: /v1/recon-engine/setup
  • Sidebar entry: "Setup" link in ReconEngine navigation

Design decisions

  • Follows existing ReconEngine patterns: local state (no Recoil), custom hooks, container/screen split
  • Uses existing component library (RenderIf, ToastState, etc.)
  • Metadata field names from transformation step flow into rule builder's EntryField dropdowns
  • Supports all current strategy variants with extensible architecture for future additions

Test plan

  • Verify landing page renders with dual-path selection
  • Create 2+ accounts through guided wizard
  • Configure ingestion sources for each account (Manual type for testing)
  • Configure transformation with CSV column mapping and metadata fields
  • Create recon rule with strategy, trigger, search identifier, and match rules
  • Verify API payloads in network tab match expected format
  • Test expert mode tab navigation
  • Test back/forward navigation in wizard
  • Test validation (proceed blocked until step requirements met)

🤖 Generated with Claude Code

@claude
feat: add self-serve setup UI for ReconEngine
5de63b2 
Adds a complete self-serve onboarding flow for the Recon Engine that allows
users to set up reconciliation without dev/support help. The UI guides users
through creating accounts, configuring ingestion sources, defining
transformation schemas (CSV column mapping), and building recon rules.

Key components:
- Dual-path entry: "Guide me through setup" (wizard) and "I know what I'm
  doing" (tabbed expert mode)
- ReScript types mirroring all backend API request structs with exact serde
  tag/flatten/rename handling
- JSON encoders producing payloads verified against api-sheet.yaml
- API hooks for 4 create operations (accounts, ingestion config,
  transformation config v2, recon rules v2)
- Step-by-step wizard with progress indicator and validation
- Strategy builder supporting all OneToOne variants (SingleSingle,
  SingleMany, ManySingle, ManyMany) and OneToMany
- Transformation schema builder with required field mapping, metadata fields,
  unique constraints, and processing mode
- Route at /v1/recon-engine/setup with sidebar entry

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@hs-control-center-bot hs-control-center-bot requested review from a team as code owners March 25, 2026 20:04
@semanticdiff-com
Copy link
Copy Markdown

semanticdiff-com bot commented Mar 25, 2026

Review changes with  SemanticDiff

control-center-bot and others added 2 commits March 26, 2026 01:40
@claude
refactor: improve self-serve UI with visual guidance and progressive …
4b52b9c 
…disclosure

Landing page:
- Pipeline visualization with numbered steps, connecting gradient line,
  and per-step descriptions
- "RECOMMENDED" badge on guided setup card
- Feature checklists on both mode cards

Step indicator:
- Connecting lines between steps with color progression
- Ring highlight on active step
- Live summary panel at bottom showing created entity counts

Account step:
- Info box explaining credit vs debit with visual examples
- Arrow icons on account type buttons
- Helper text under each input

Rule step (major overhaul):
- Visual strategy diagrams showing source/target with arrows for each
  matching pattern (1:1, 1:N, N:1, N:N)
- "How recon rules work" explainer box
- HelpTooltip component for inline contextual help on every concept
  (trigger, search identifier, match rules, priority, aging)
- Numbered sections (1-5) with clear visual hierarchy
- SRC/TGT labels on field selectors
- Collapsible "Advanced Settings" section for aging config
- Color-coded source (blue) and target (green) account selectors

Transformation step:
- Info box explaining what transformations are
- Numbered sections (1-4) with consistent visual hierarchy
- Indented content under section headers
- Section for unique constraint with inline help text

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude
fix: resolve ReScript compilation errors in self-serve UI
e5783be 
- Fix unmatched </div> in TransformationStep caused by restructuring
  sections into numbered blocks while leaving a stale closing tag
- Remove unused `open ReconEngineSelfServeUtils` in IngestionStep
- Wrap submit button in proper div with padding

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Grovy-3170 Grovy-3170 self-assigned this Mar 25, 2026
hs-control-center-bot pushed a commit that referenced this pull request Mar 28, 2026
feat: merge best UI patterns from PR #4588 into rule step
895215c 
Incorporates the better visual design from the previous PR attempt:
- Add StrategyDiagram component showing Source→Target visual boxes
- Replace dropdown with clickable cards for One-to-One vs One-to-Many
- Add 1:1, 1:N, N:1, N:N pattern badge grid for matching selection
- Unify all sections into one bordered container with dividers
- Remove static strategy explainer grid (replaced by dynamic diagram)
- One-to-Many card shows "Coming soon" (not yet implemented)

Preserves all existing functionality: validation, isGuidedMode,
swap button, metadata field options, auto-scroll, aging config.
hs-control-center-bot pushed a commit that referenced this pull request Mar 28, 2026
feat: redesign landing page with pipeline visualization from PR #4588
a1a0831 
Merges the better visual design from the previous PR:
- Numbered pipeline steps (1-4) with connecting gradient line and descriptions
- RECOMMENDED badge on guided card
- Bullet-list features instead of pipe-separated
- "Start guided setup →" / "Open configuration →" CTAs at bottom of cards
- Better descriptions and copy
- Uses nd_gray tokens and Icon component (not emojis)
@github-actions github-actions bot added the Closed Applied to issues or pull requests that have been successfully resolved or completed label Apr 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@Grovy-3170 Grovy-3170

Labels

Closed Applied to issues or pull requests that have been successfully resolved or completed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@hs-control-center-bot @muditbhutani @Grovy-3170