Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import {
Card,
CardContent,
FormControlLabel,
Radio,
RadioGroup,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import Alert from "components/Alert";
import Button from "components/Button";
import Divider from "components/Divider";
import TextBody from "components/TextBody";
import { useProfileUser } from "features/profile/hooks/useProfileUser";
import ReferenceStepHeader from "features/profile/view/leaveReference/formSteps/ReferenceStepHeader";
import {
ReferenceContextFormData,
ReferenceStepProps,
useReferenceStyles,
} from "features/profile/view/leaveReference/ReferenceForm";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import { useRouter } from "next/router";
import { ReferenceType } from "proto/references_pb";
import { Controller, useForm } from "react-hook-form";
import {
leaveReferenceBaseRoute,
referenceStepStrings,
referenceTypeRoute,
} from "routes";
export default function Appropriate({
referenceData,
setReferenceValues,
referenceType,
hostRequestId,
}: ReferenceStepProps) {
const { t } = useTranslation([GLOBAL, PROFILE]);
const user = useProfileUser();
const router = useRouter();
const theme = useTheme();
const classes = useReferenceStyles();
const isSmOrWider = useMediaQuery(theme.breakpoints.up("sm"));
const {
control,
handleSubmit,
formState: { errors },
} = useForm<ReferenceContextFormData>({
defaultValues: {
wasAppropriate: referenceData.wasAppropriate,
},
});
const onSubmit = handleSubmit((values) => {
setReferenceValues(values);
referenceType === referenceTypeRoute[ReferenceType.REFERENCE_TYPE_FRIEND]
? router.push(
`${leaveReferenceBaseRoute}/${referenceType}/${user.userId}/${referenceStepStrings[1]}`
)
: router.push(
`${leaveReferenceBaseRoute}/${referenceType}/${user.userId}/${hostRequestId}/${referenceStepStrings[1]}`
);
});
return (
<form onSubmit={onSubmit} className={classes.form}>
<ReferenceStepHeader name={user.name} referenceType={referenceType} />
<TextBody className={classes.text}>
{t("profile:leave_reference.appropriate_explanation")}
</TextBody>
<Card className={classes.card}>
<CardContent>
<Typography variant="h3">
{t("profile:leave_reference.appropriate_behavior")}
</Typography>
<Divider />
<TextBody className={classes.text}>
{t("profile:leave_reference.safety_priority")}
</TextBody>
{errors.wasAppropriate?.message && (
<Alert className={classes.alert} severity="error">
{errors.wasAppropriate.message}
</Alert>
)}
<Typography variant="h3" className={classes.text}>
{t("profile:leave_reference.appropriate_question")}
</Typography>
<Controller
render={({ field }) => (
<RadioGroup {...field} aria-label="wasAppropriate">
<FormControlLabel
value="true"
control={<Radio />}
label="Yes"
/>
<FormControlLabel
value="false"
control={<Radio />}
label="No"
/>
</RadioGroup>
)}
name="wasAppropriate"
control={control}
rules={{
required: t("profile:leave_reference.was_appropriate_required"),
}}
/>
<TextBody className={classes.text}>
{t("profile:leave_reference.private_answer")}
</TextBody>
</CardContent>
</Card>
<div className={classes.buttonContainer}>
<Button fullWidth={!isSmOrWider} type="submit">
{t("profile:leave_reference.next_step_label")}
</Button>
</div>
</form>
);
}
|