Switch UnverifiedProviderStep to list-detail layout for consistency
Matches PackagesStep pattern: - Left panel: ProviderCardCompact + badge + details + recommendations - Right panel: warm header band + available info + enquiry CTA (mirrors PackageDetail structure) Users navigating between verified/unverified providers see the same page structure — left panel for browsing, right panel for action. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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<UnverifiedProviderStepProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<WizardLayout
|
||||
variant="centered-form"
|
||||
variant="list-detail"
|
||||
navigation={navigation}
|
||||
progressStepper={progressStepper}
|
||||
runningTotal={runningTotal}
|
||||
@@ -108,28 +108,126 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
|
||||
backLabel="Back to providers"
|
||||
onBack={onBack}
|
||||
sx={sx}
|
||||
secondaryPanel={
|
||||
/* ── Right panel: Enquiry CTA ── */
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{/* ── Provider header ── */}
|
||||
<Box sx={{ pt: 2, mb: 3 }}>
|
||||
{/* Warm header band — matches PackageDetail pattern */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
px: 3,
|
||||
py: 2.5,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Typography variant="overline" color="text.secondary">
|
||||
Enquire
|
||||
</Typography>
|
||||
<Typography variant="h5">{providerName}</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Detail rows — whatever we know */}
|
||||
<Box sx={{ px: 3, py: 2.5, flex: 1 }}>
|
||||
{details.length > 0 ? (
|
||||
<Box
|
||||
component="dl"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
m: 0,
|
||||
mb: 3,
|
||||
'& dt': { color: 'text.secondary', m: 0, fontSize: '0.75rem' },
|
||||
'& dd': { m: 0, fontWeight: 500 },
|
||||
}}
|
||||
>
|
||||
{details.map((detail) => (
|
||||
<Box key={detail.label}>
|
||||
<Typography component="dt" variant="caption">
|
||||
{detail.label}
|
||||
</Typography>
|
||||
<Typography component="dd" variant="body2">
|
||||
{detail.value}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
Contact this provider directly for pricing and service details.
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
We’ll pass your details along so they can reach out to you directly. No
|
||||
commitment required.
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={onEnquire}
|
||||
loading={enquiryLoading}
|
||||
fullWidth
|
||||
>
|
||||
Make an Enquiry
|
||||
</Button>
|
||||
|
||||
{details.length > 0 && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 2, display: 'block' }}>
|
||||
Based on publicly available information. Pricing and services may vary.
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{/* ── Left panel: Provider info + recommendations ── */}
|
||||
|
||||
{/* Provider compact card */}
|
||||
<Box sx={{ mb: 1.5 }}>
|
||||
<ProviderCardCompact
|
||||
name={providerName}
|
||||
location={providerLocation}
|
||||
rating={providerRating}
|
||||
reviewCount={providerReviewCount}
|
||||
/>
|
||||
<Box sx={{ mt: 1.5 }}>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Badge variant="soft" color="default" size="medium" icon={<InfoOutlinedIcon />}>
|
||||
Listing
|
||||
</Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* ── Available information ── */}
|
||||
{details.length > 0 && (
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
What we know
|
||||
{/* Heading */}
|
||||
<Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
|
||||
About this provider
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
This provider hasn’t partnered with us yet. We have limited information, but you can
|
||||
still enquire directly.
|
||||
</Typography>
|
||||
|
||||
{/* Available information (inline, if any) */}
|
||||
{details.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'var(--fa-color-surface-subtle)',
|
||||
borderRadius: 2,
|
||||
p: 2.5,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="dl"
|
||||
sx={{
|
||||
@@ -152,51 +250,14 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 2, display: 'block' }}>
|
||||
Based on publicly available information. Pricing and services may vary.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* ── Enquiry CTA ── */}
|
||||
<Card
|
||||
variant="elevated"
|
||||
sx={{
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
p: { xs: 3, sm: 4 },
|
||||
mb: 4,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ mb: 1 }}>
|
||||
Interested in {providerName}?
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ mb: 3, maxWidth: 420, mx: 'auto' }}
|
||||
>
|
||||
We’ll pass your details along so they can reach out to you directly. No commitment
|
||||
required.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={onEnquire}
|
||||
loading={enquiryLoading}
|
||||
fullWidth
|
||||
sx={{ maxWidth: 320, mx: 'auto' }}
|
||||
>
|
||||
Make an Enquiry
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* ── Verified recommendations ── */}
|
||||
{recommendations.length > 0 && (
|
||||
<>
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" sx={{ mb: 0.5 }}>
|
||||
Verified providers{recommendationContext ? ` ${recommendationContext}` : ''}
|
||||
</Typography>
|
||||
@@ -206,9 +267,10 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)' },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
{recommendations.map((provider) => (
|
||||
@@ -228,7 +290,6 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</WizardLayout>
|
||||
|
||||
Reference in New Issue
Block a user