Skip to content

Commit

Permalink
Properly format and render dates on review page
Browse files Browse the repository at this point in the history
  • Loading branch information
@erikguntner
erikguntner committed Aug 22, 2024
1 parent f41511f commit 55e65fb
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 116 deletions.
232 changes: 118 additions & 114 deletions app/src/components/intake-profile/ProfileReview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import {
} from '@mui/material';
import {Link, useOutletContext} from 'react-router-dom';
import {useFormikContext} from 'formik';
import {format, parseISO} from 'date-fns';

import {OutletContext} from './IntakeProfileGroups';
import {InitialValues} from 'src/views/IntakeProfile';
import {Response} from 'src/services/profile';

export const ProfileReview = () => {
const {fieldGroups} = useOutletContext<OutletContext>();
Expand All @@ -24,136 +26,138 @@ export const ProfileReview = () => {
Please review the details to ensure accuracy, then click &quot;submit
application&quot; at the bottom to proceed.
</Typography>
<Stack gap={3} sx={{backgroundColor: 'white', px: 3, py: 2}}>
<Stack>
<Stack sx={{backgroundColor: 'white', px: 3, py: 2}}>
<Stack sx={{mb: 3}}>
<Typography sx={{fontSize: 20, fontWeight: 'medium'}} variant="h3">
Review your profile
</Typography>
<Divider />
</Stack>
{fieldGroups.map(group => {
return (
<Stack
key={group.id}
sx={{
boxShadow: '0px 4px 4px 3px rgba(183, 183, 183, 0.25)',
px: 3,
py: 2,
borderRadius: 1,
}}
gap={3}
>
<Stack gap={6}>
{fieldGroups.map(group => {
return (
<Stack
sx={{width: '100%'}}
direction="row"
justifyContent="space-between"
alignContent="center"
key={group.id}
sx={{
boxShadow: '0px 4px 4px 3px rgba(183, 183, 183, 0.25)',
px: 3,
py: 2,
borderRadius: 1,
}}
gap={3}
>
<Typography variant="h6">{group.title}</Typography>
<Button
variant="text"
to={`/guest/profile/1/group/${group.id}`}
component={Link}
color="inherit"
<Stack
sx={{width: '100%'}}
direction="row"
justifyContent="space-between"
alignContent="center"
>
Edit
</Button>
</Stack>
<Stack gap={2}>
{group.fields.map(field => {
if (field.type === 'additional_guests') {
return (
<Stack key={field.id}>
<Typography sx={{fontSize: '18px'}}>
{field.title}
</Typography>
{/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore */}
{values[group.id][field.id].map((guest, index) => {
return (
<Box key={guest.id}>
<Typography variant="h6">
Guest {index + 1}
</Typography>
<Stack gap={1}>
<Box>
<Typography sx={{fontSize: '18px'}}>
Name
</Typography>
<Typography
variant="body1"
sx={{fontWeight: 'bold'}}
>
{guest.name}
</Typography>
</Box>
<Box>
<Typography sx={{fontSize: '18px'}}>
Date of Birth
</Typography>
<Typography
variant="body1"
sx={{fontWeight: 'bold'}}
>
{guest.dob}
</Typography>
</Box>
<Box>
<Typography sx={{fontSize: '18px'}}>
Relationship
</Typography>
<Typography
variant="body1"
sx={{fontWeight: 'bold'}}
>
{guest.relationship}
</Typography>
</Box>
</Stack>
</Box>
);
})}
</Stack>
);
} else if (field.type === 'pets') {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return values[group.id][field.id].map(pet => {
<Typography variant="h6">{group.title}</Typography>
<Button
variant="text"
to={`/guest/profile/1/group/${group.id}`}
component={Link}
color="inherit"
>
Edit
</Button>
</Stack>
<Stack gap={2}>
{group.fields.map(field => {
if (field.type === 'additional_guests') {
return (
<Box key={field.id}>
<Stack key={field.id}>
<Typography sx={{fontSize: '18px'}}>
Type of Pet
{field.title}
</Typography>
<Typography
variant="body1"
sx={{fontWeight: 'bold'}}
>
{pet.type ?? 'N/A'}
</Typography>
</Box>
);
});
} else {
return (
<Box key={field.id}>
<Typography sx={{fontSize: '18px'}}>
{field.title}
</Typography>
<Typography variant="body1" sx={{fontWeight: 'bold'}}>
{/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore */}
{values[group.id][field.id] ?? 'N/A'}
</Typography>
</Box>
);
}
})}
{values[group.id][field.id].map((guest, index) => {
return (
<Box key={guest.id}>
<Typography variant="h6">
Guest {index + 1}
</Typography>
<Stack gap={1}>
<ReviewItem
title={'Name'}
value={guest.name}
/>
<ReviewItem
title={'Date of Birth'}
value={format(
parseISO(guest.dob),
'MM/dd/yyyy',
)}
/>
<ReviewItem
title={'Relationship'}
value={guest.relationship}
/>
</Stack>
</Box>
);
})}
</Stack>
);
} else if (field.type === 'date') {
return (
<ReviewItem
key={field.id}
title={field.title}
value={format(
parseISO(values[group.id][field.id] as string),
'MM/dd/yyyy',
)}
/>
);
} else if (field.type === 'pets') {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return values[group.id][field.id].map(pet => {
return (
<ReviewItem
key={field.id}
title={'Type of Pet'}
value={pet.type}
/>
);
});
} else {
return (
<ReviewItem
key={field.id}
title={field.title}
value={values[group.id][field.id]}
/>
);
}
})}
</Stack>
</Stack>
</Stack>
);
})}
);
})}
</Stack>
</Stack>
</Stack>
</Container>
);
};

interface ReviewItemProps {
title: string;
value: Response['value'];
}

const ReviewItem = ({title, value}: ReviewItemProps) => {
return (
<Box>
<Typography sx={{fontSize: '18px'}}>{title}</Typography>
<Typography variant="body1" sx={{fontWeight: 'bold'}}>
{/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore */}
{value ?? 'N/A'}
</Typography>
</Box>
);
};
6 changes: 4 additions & 2 deletions app/src/utils/test/handlers/profile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ const getResponseValue = (field: Fields) => {
return faker.lorem.words(4);
case 'long_text':
return faker.lorem.paragraph();
case 'date':
return faker.date.past().toISOString();
case 'dropdown':
if (!field.properties.choices) {
throw new Error(
Expand All @@ -70,13 +72,13 @@ const getResponseValue = (field: Fields) => {
{
id: faker.string.uuid(),
name: faker.person.fullName(),
dob: null,
dob: faker.date.past().toISOString(),
relationship: 'spouse',
},
{
id: faker.string.uuid(),
name: faker.person.fullName(),
dob: null,
dob: faker.date.past().toISOString(),
relationship: 'spouse',
},
];
Expand Down

0 comments on commit 55e65fb

Please sign in to comment.