diff --git a/src/components/pages/UnverifiedProviderStep/UnverifiedProviderStep.tsx b/src/components/pages/UnverifiedProviderStep/UnverifiedProviderStep.tsx index ba7306a..5c5fadf 100644 --- a/src/components/pages/UnverifiedProviderStep/UnverifiedProviderStep.tsx +++ b/src/components/pages/UnverifiedProviderStep/UnverifiedProviderStep.tsx @@ -7,7 +7,6 @@ import { ProviderCardCompact } from '../../molecules/ProviderCardCompact'; import { ProviderCard } from '../../molecules/ProviderCard'; import { Badge } from '../../atoms/Badge'; import { Button } from '../../atoms/Button'; -import { Card } from '../../atoms/Card'; import { Typography } from '../../atoms/Typography'; import { Divider } from '../../atoms/Divider'; @@ -73,11 +72,12 @@ export interface UnverifiedProviderStepProps { * Unverified provider detail page for the FA arrangement wizard. * * Shown when a user selects an unverified (scraped) provider from - * the ProvidersStep. Displays whatever information we have, offers - * an enquiry CTA, and recommends verified alternatives. + * the ProvidersStep. Uses the same list-detail layout as PackagesStep + * for consistency — left panel has provider info + recommendations, + * right panel has the enquiry CTA. * - * Uses centered-form layout — single column, focused experience. - * No package selection, no arrangement flow. + * Displays whatever information we have, offers an enquiry CTA, + * and recommends verified alternatives. * * Pure presentation component — props in, callbacks out. */ @@ -100,7 +100,7 @@ export const UnverifiedProviderStep: React.FC = ({ }) => { return ( = ({ backLabel="Back to providers" onBack={onBack} sx={sx} + secondaryPanel={ + /* ── Right panel: Enquiry CTA ── */ + + {/* Warm header band — matches PackageDetail pattern */} + + + Enquire + + {providerName} + + + {/* Detail rows — whatever we know */} + + {details.length > 0 ? ( + + {details.map((detail) => ( + + + {detail.label} + + + {detail.value} + + + ))} + + ) : ( + + Contact this provider directly for pricing and service details. + + )} + + + + + We’ll pass your details along so they can reach out to you directly. No + commitment required. + + + + + {details.length > 0 && ( + + Based on publicly available information. Pricing and services may vary. + + )} + + + } > - {/* ── Provider header ── */} - + {/* ── Left panel: Provider info + recommendations ── */} + + {/* Provider compact card */} + - - }> - Listing - - - {/* ── Available information ── */} + + }> + Listing + + + + {/* Heading */} + + About this provider + + + This provider hasn’t partnered with us yet. We have limited information, but you can + still enquire directly. + + + {/* Available information (inline, if any) */} {details.length > 0 && ( - - - What we know - + = ({ ))} - - Based on publicly available information. Pricing and services may vary. - )} - {/* ── Enquiry CTA ── */} - - - Interested in {providerName}? - - - We’ll pass your details along so they can reach out to you directly. No commitment - required. - - - - {/* ── Verified recommendations ── */} {recommendations.length > 0 && ( <> - - - Verified providers{recommendationContext ? ` ${recommendationContext}` : ''} - - - Full online arrangement with transparent pricing - + + Verified providers{recommendationContext ? ` ${recommendationContext}` : ''} + + + Full online arrangement with transparent pricing + - - {recommendations.map((provider) => ( - onSelectRecommendation(provider.id) : undefined - } - /> - ))} - + + {recommendations.map((provider) => ( + onSelectRecommendation(provider.id) : undefined + } + /> + ))} )}