Feedback iteration: DialogShell, page consistency, popup standardisation
- Add DialogShell atom — shared dialog container (header, scrollable body, footer)
- Refactor FilterPanel to use DialogShell (Popover → centered Dialog)
- Refactor ArrangementDialog to use DialogShell
- Remove PreviewStep + AuthGateStep pages (consolidated into ArrangementDialog, D-E)
- IntroStep: static subheading, top-left aligned toggle button content
- ProvidersStep: h4 heading "Find a funeral director", location search with pin icon,
filter moved below search right-aligned, map fill fix, hover scrollbar
- VenueStep: same consistency fixes (h4 heading, filter layout, location icon, map fix)
- PackagesStep: grouped packages ("Matching your preferences" / "Other packages from
[Provider]"), removed budget filter + Most Popular badge, clickable provider card,
onArrange replaces onContinue, h4 heading
- WizardLayout: list-map left panel gets thin scrollbar visible on hover
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,20 +1,16 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import GoogleIcon from '@mui/icons-material/Google';
|
||||
import MicrosoftIcon from '@mui/icons-material/Window';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import type { PackageSection } from '../PackageDetail';
|
||||
import { DialogShell } from '../../atoms/DialogShell';
|
||||
import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
|
||||
import { Collapse } from '../../atoms/Collapse';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
@@ -153,6 +149,8 @@ function getAuthCTALabel(subStep: AuthSubStep): string {
|
||||
* - **Step 1 (preview):** Package summary, provider info, "What's next" checklist
|
||||
* - **Step 2 (auth):** SSO buttons, email entry, details, verification
|
||||
*
|
||||
* Uses DialogShell for consistent dialog chrome across the site.
|
||||
*
|
||||
* The dialog is opened after a user selects a package (from PackagesStep).
|
||||
* The parent controls which step is shown and manages auth form state.
|
||||
*
|
||||
@@ -182,377 +180,328 @@ export const ArrangementDialog = React.forwardRef<HTMLDivElement, ArrangementDia
|
||||
ref,
|
||||
) => {
|
||||
const isEmailOnly = authValues.contactPreference === 'email_only';
|
||||
const titleRef = React.useRef<HTMLHeadingElement>(null);
|
||||
|
||||
// Focus the dialog title when step changes
|
||||
React.useEffect(() => {
|
||||
if (open && titleRef.current) {
|
||||
titleRef.current.focus();
|
||||
}
|
||||
}, [step, open]);
|
||||
|
||||
const handleAuthField = (field: keyof AuthValues, value: string) => {
|
||||
onAuthChange({ ...authValues, [field]: value });
|
||||
};
|
||||
|
||||
// ─── Footer CTAs per step ─────────────────────────────────────────
|
||||
|
||||
const previewFooter = (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 2,
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
{isPrePlanning && onExplore && (
|
||||
<Button variant="outlined" color="secondary" size="large" onClick={onExplore}>
|
||||
Explore other options
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => onStepChange('auth')}
|
||||
loading={loading}
|
||||
>
|
||||
Continue with this package
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const authFooter = (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
{getAuthCTALabel(authValues.subStep)}
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
<DialogShell
|
||||
ref={ref}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
scroll="body"
|
||||
aria-labelledby="arrangement-dialog-title"
|
||||
title={step === 'preview' ? 'Your selected package' : 'Save your plan'}
|
||||
onBack={step === 'auth' ? () => onStepChange('preview') : undefined}
|
||||
backLabel="Back to preview"
|
||||
footer={step === 'preview' ? previewFooter : authFooter}
|
||||
sx={sx}
|
||||
PaperProps={{
|
||||
sx: { borderRadius: 2 },
|
||||
}}
|
||||
>
|
||||
{/* ─── Header ─── */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 3,
|
||||
pt: 2.5,
|
||||
pb: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{step === 'auth' && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => onStepChange('preview')}
|
||||
aria-label="Back to preview"
|
||||
>
|
||||
<ArrowBackIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
<Typography id="arrangement-dialog-title" ref={titleRef} tabIndex={-1} variant="h5">
|
||||
{step === 'preview' ? 'Your selected package' : 'Save your plan'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton size="small" onClick={onClose} aria-label="Close">
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{/* ═══════════ Step 1: Preview ═══════════ */}
|
||||
{step === 'preview' && (
|
||||
<Box>
|
||||
{/* Provider */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<ProviderCardCompact
|
||||
name={provider.name}
|
||||
location={provider.location}
|
||||
imageUrl={provider.imageUrl}
|
||||
rating={provider.rating}
|
||||
reviewCount={provider.reviewCount}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Screen reader step announcement */}
|
||||
<Box
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
sx={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden' }}
|
||||
>
|
||||
{step === 'preview' ? 'Viewing package preview' : 'Create your account'}
|
||||
</Box>
|
||||
|
||||
<DialogContent sx={{ px: 3, pb: 3 }}>
|
||||
{/* ═══════════ Step 1: Preview ═══════════ */}
|
||||
{step === 'preview' && (
|
||||
<Box>
|
||||
{/* Provider */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<ProviderCardCompact
|
||||
name={provider.name}
|
||||
location={provider.location}
|
||||
imageUrl={provider.imageUrl}
|
||||
rating={provider.rating}
|
||||
reviewCount={provider.reviewCount}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Package summary */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
borderRadius: 2,
|
||||
p: 2.5,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'baseline',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">{selectedPackage.name}</Typography>
|
||||
<Typography variant="h6" color="primary">
|
||||
${(selectedPackage.total ?? selectedPackage.price).toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{selectedPackage.sections.map((section) => (
|
||||
<Box key={section.heading} sx={{ mb: 1.5 }}>
|
||||
<Typography variant="labelSm" color="text.secondary" sx={{ mb: 0.5 }}>
|
||||
{section.heading}
|
||||
</Typography>
|
||||
{section.items.map((item) => (
|
||||
<Typography key={item.name} variant="body2" sx={{ pl: 1 }}>
|
||||
{item.name}
|
||||
</Typography>
|
||||
))}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
You'll be able to customise everything in the next steps.
|
||||
</Typography>
|
||||
|
||||
{/* What's next */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ mb: 1.5 }}>
|
||||
What happens next
|
||||
</Typography>
|
||||
<List disablePadding>
|
||||
{nextSteps.map((s) => (
|
||||
<ListItem
|
||||
key={s.number}
|
||||
disablePadding
|
||||
sx={{ mb: 1, alignItems: 'flex-start' }}
|
||||
>
|
||||
<ListItemIcon sx={{ minWidth: 36, mt: 0.25 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'var(--fa-color-brand-100)',
|
||||
color: 'var(--fa-color-brand-700)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{s.number}
|
||||
</Box>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={s.label}
|
||||
primaryTypographyProps={{ variant: 'body2', color: 'text.primary' }}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
{/* CTAs */}
|
||||
{/* Package summary */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
borderRadius: 2,
|
||||
p: 2.5,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 2,
|
||||
justifyContent: 'flex-end',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'baseline',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{isPrePlanning && onExplore && (
|
||||
<Button variant="outlined" color="secondary" size="large" onClick={onExplore}>
|
||||
Explore other options
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => onStepChange('auth')}
|
||||
loading={loading}
|
||||
>
|
||||
Continue with this package
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* ═══════════ Step 2: Auth ═══════════ */}
|
||||
{step === 'auth' && (
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
aria-busy={loading}
|
||||
onSubmit={(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
||||
{isPrePlanning
|
||||
? 'Save your plan to return and update it anytime.'
|
||||
: 'We need a few details so a funeral arranger can help you with the next steps.'}
|
||||
</Typography>
|
||||
|
||||
{/* SSO buttons */}
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 3 }}
|
||||
role="group"
|
||||
aria-label="Sign in options"
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
size="large"
|
||||
fullWidth
|
||||
startIcon={<GoogleIcon />}
|
||||
onClick={onGoogleSSO}
|
||||
type="button"
|
||||
>
|
||||
Continue with Google
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
size="large"
|
||||
fullWidth
|
||||
startIcon={<MicrosoftIcon />}
|
||||
onClick={onMicrosoftSSO}
|
||||
type="button"
|
||||
>
|
||||
Continue with Microsoft
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
or
|
||||
<Typography variant="h6">{selectedPackage.name}</Typography>
|
||||
<Typography variant="h6" color="primary">
|
||||
${(selectedPackage.total ?? selectedPackage.price).toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
</Divider>
|
||||
</Box>
|
||||
|
||||
{/* Email */}
|
||||
<TextField
|
||||
label="Your email address"
|
||||
type="email"
|
||||
value={authValues.email}
|
||||
onChange={(e) => handleAuthField('email', e.target.value)}
|
||||
error={!!authErrors?.email}
|
||||
helperText={authErrors?.email}
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
inputMode="email"
|
||||
fullWidth
|
||||
required
|
||||
disabled={authValues.subStep !== 'email'}
|
||||
sx={{ mb: 3 }}
|
||||
/>
|
||||
|
||||
{/* Details (after email) */}
|
||||
<Collapse in={authValues.subStep === 'details' || authValues.subStep === 'verify'}>
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, mb: 3 }}
|
||||
role="group"
|
||||
aria-label="Your details"
|
||||
>
|
||||
<Typography variant="labelLg" component="h2" sx={{ mb: 0.5 }}>
|
||||
A few details to save your plan
|
||||
{selectedPackage.sections.map((section) => (
|
||||
<Box key={section.heading} sx={{ mb: 1.5 }}>
|
||||
<Typography variant="labelSm" color="text.secondary" sx={{ mb: 0.5 }}>
|
||||
{section.heading}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
|
||||
<TextField
|
||||
label="First name"
|
||||
value={authValues.firstName}
|
||||
onChange={(e) => handleAuthField('firstName', e.target.value)}
|
||||
error={!!authErrors?.firstName}
|
||||
helperText={authErrors?.firstName}
|
||||
autoComplete="given-name"
|
||||
fullWidth
|
||||
required
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
/>
|
||||
<TextField
|
||||
label="Last name"
|
||||
value={authValues.lastName}
|
||||
onChange={(e) => handleAuthField('lastName', e.target.value)}
|
||||
error={!!authErrors?.lastName}
|
||||
helperText={authErrors?.lastName}
|
||||
autoComplete="family-name"
|
||||
fullWidth
|
||||
required
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
label={isEmailOnly ? 'Phone (optional)' : 'Best number to reach you'}
|
||||
type="tel"
|
||||
value={authValues.phone}
|
||||
onChange={(e) => handleAuthField('phone', e.target.value)}
|
||||
error={!!authErrors?.phone}
|
||||
helperText={authErrors?.phone}
|
||||
placeholder="e.g. 0412 345 678"
|
||||
autoComplete="tel"
|
||||
inputMode="tel"
|
||||
fullWidth
|
||||
required={!isEmailOnly}
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="Contact preference"
|
||||
value={authValues.contactPreference}
|
||||
onChange={(e) => handleAuthField('contactPreference', e.target.value)}
|
||||
fullWidth
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
>
|
||||
<MenuItem value="call_anytime">Call me anytime</MenuItem>
|
||||
<MenuItem value="email_preferred">Email is preferred</MenuItem>
|
||||
<MenuItem value="email_only">Only contact by email</MenuItem>
|
||||
</TextField>
|
||||
{section.items.map((item) => (
|
||||
<Typography key={item.name} variant="body2" sx={{ pl: 1 }}>
|
||||
{item.name}
|
||||
</Typography>
|
||||
))}
|
||||
</Box>
|
||||
</Collapse>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* Verification */}
|
||||
<Collapse in={authValues.subStep === 'verify'}>
|
||||
<Box sx={{ mb: 3 }} role="group" aria-label="Email verification">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
We've sent a 6-digit code to <strong>{authValues.email}</strong>. Please
|
||||
enter it below.
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
You'll be able to customise everything in the next steps.
|
||||
</Typography>
|
||||
|
||||
{/* What's next */}
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ mb: 1.5 }}>
|
||||
What happens next
|
||||
</Typography>
|
||||
<List disablePadding>
|
||||
{nextSteps.map((s) => (
|
||||
<ListItem key={s.number} disablePadding sx={{ mb: 1, alignItems: 'flex-start' }}>
|
||||
<ListItemIcon sx={{ minWidth: 36, mt: 0.25 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'var(--fa-color-brand-100)',
|
||||
color: 'var(--fa-color-brand-700)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{s.number}
|
||||
</Box>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={s.label}
|
||||
primaryTypographyProps={{ variant: 'body2', color: 'text.primary' }}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* ═══════════ Step 2: Auth ═══════════ */}
|
||||
{step === 'auth' && (
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
aria-busy={loading}
|
||||
onSubmit={(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
||||
{isPrePlanning
|
||||
? 'Save your plan to return and update it anytime.'
|
||||
: 'We need a few details so a funeral arranger can help you with the next steps.'}
|
||||
</Typography>
|
||||
|
||||
{/* SSO buttons */}
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 3 }}
|
||||
role="group"
|
||||
aria-label="Sign in options"
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
size="large"
|
||||
fullWidth
|
||||
startIcon={<GoogleIcon />}
|
||||
onClick={onGoogleSSO}
|
||||
type="button"
|
||||
>
|
||||
Continue with Google
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
size="large"
|
||||
fullWidth
|
||||
startIcon={<MicrosoftIcon />}
|
||||
onClick={onMicrosoftSSO}
|
||||
type="button"
|
||||
>
|
||||
Continue with Microsoft
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
or
|
||||
</Typography>
|
||||
</Divider>
|
||||
|
||||
{/* Email */}
|
||||
<TextField
|
||||
label="Your email address"
|
||||
type="email"
|
||||
value={authValues.email}
|
||||
onChange={(e) => handleAuthField('email', e.target.value)}
|
||||
error={!!authErrors?.email}
|
||||
helperText={authErrors?.email}
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
inputMode="email"
|
||||
fullWidth
|
||||
required
|
||||
disabled={authValues.subStep !== 'email'}
|
||||
sx={{ mb: 3 }}
|
||||
/>
|
||||
|
||||
{/* Details (after email) */}
|
||||
<Collapse in={authValues.subStep === 'details' || authValues.subStep === 'verify'}>
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, mb: 3 }}
|
||||
role="group"
|
||||
aria-label="Your details"
|
||||
>
|
||||
<Typography variant="labelLg" component="h2" sx={{ mb: 0.5 }}>
|
||||
A few details to save your plan
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
|
||||
<TextField
|
||||
label="Verification code"
|
||||
value={authValues.verificationCode}
|
||||
onChange={(e) => handleAuthField('verificationCode', e.target.value)}
|
||||
error={!!authErrors?.verificationCode}
|
||||
helperText={
|
||||
authErrors?.verificationCode || 'Check your email for the 6-digit code'
|
||||
}
|
||||
placeholder="Enter 6-digit code"
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
label="First name"
|
||||
value={authValues.firstName}
|
||||
onChange={(e) => handleAuthField('firstName', e.target.value)}
|
||||
error={!!authErrors?.firstName}
|
||||
helperText={authErrors?.firstName}
|
||||
autoComplete="given-name"
|
||||
fullWidth
|
||||
required
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
/>
|
||||
<TextField
|
||||
label="Last name"
|
||||
value={authValues.lastName}
|
||||
onChange={(e) => handleAuthField('lastName', e.target.value)}
|
||||
error={!!authErrors?.lastName}
|
||||
helperText={authErrors?.lastName}
|
||||
autoComplete="family-name"
|
||||
fullWidth
|
||||
required
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
/>
|
||||
</Box>
|
||||
</Collapse>
|
||||
|
||||
{/* Terms */}
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 3 }}>
|
||||
By continuing, you agree to the{' '}
|
||||
<Link href="#" sx={{ fontSize: 'inherit' }}>
|
||||
terms and conditions
|
||||
</Link>
|
||||
.
|
||||
</Typography>
|
||||
<TextField
|
||||
label={isEmailOnly ? 'Phone (optional)' : 'Best number to reach you'}
|
||||
type="tel"
|
||||
value={authValues.phone}
|
||||
onChange={(e) => handleAuthField('phone', e.target.value)}
|
||||
error={!!authErrors?.phone}
|
||||
helperText={authErrors?.phone}
|
||||
placeholder="e.g. 0412 345 678"
|
||||
autoComplete="tel"
|
||||
inputMode="tel"
|
||||
fullWidth
|
||||
required={!isEmailOnly}
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
/>
|
||||
|
||||
<Divider sx={{ my: 3 }} />
|
||||
|
||||
{/* CTA */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button type="submit" variant="contained" size="large" loading={loading}>
|
||||
{getAuthCTALabel(authValues.subStep)}
|
||||
</Button>
|
||||
<TextField
|
||||
select
|
||||
label="Contact preference"
|
||||
value={authValues.contactPreference}
|
||||
onChange={(e) => handleAuthField('contactPreference', e.target.value)}
|
||||
fullWidth
|
||||
disabled={authValues.subStep === 'verify'}
|
||||
>
|
||||
<MenuItem value="call_anytime">Call me anytime</MenuItem>
|
||||
<MenuItem value="email_preferred">Email is preferred</MenuItem>
|
||||
<MenuItem value="email_only">Only contact by email</MenuItem>
|
||||
</TextField>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Collapse>
|
||||
|
||||
{/* Verification */}
|
||||
<Collapse in={authValues.subStep === 'verify'}>
|
||||
<Box sx={{ mb: 3 }} role="group" aria-label="Email verification">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
We've sent a 6-digit code to <strong>{authValues.email}</strong>. Please
|
||||
enter it below.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
label="Verification code"
|
||||
value={authValues.verificationCode}
|
||||
onChange={(e) => handleAuthField('verificationCode', e.target.value)}
|
||||
error={!!authErrors?.verificationCode}
|
||||
helperText={
|
||||
authErrors?.verificationCode || 'Check your email for the 6-digit code'
|
||||
}
|
||||
placeholder="Enter 6-digit code"
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
fullWidth
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
</Collapse>
|
||||
|
||||
{/* Terms */}
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
||||
By continuing, you agree to the{' '}
|
||||
<Link href="#" sx={{ fontSize: 'inherit' }}>
|
||||
terms and conditions
|
||||
</Link>
|
||||
.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</DialogShell>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user