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 | 4x 6x 4x 20x 20x 20x 20x 20x | import GiveText from "@shared/Text/GiveText";
import ChipMenu from "features/Merchants/MerchantSidePanel/components/ChipMenu";
import { Stack } from "@mui/system";
import { useMemo } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { MatchStatusEnum, ReportFormFields } from "../types";
import { statusOptions } from "../utils";
const getMenuOption = (status: MatchStatusEnum) => {
return status === MatchStatusEnum.Clear
? statusOptions[MatchStatusEnum.Confirmed_match]
: statusOptions[MatchStatusEnum.Clear];
};
const ReportStatusSelector = () => {
const { setValue } = useFormContext<ReportFormFields>();
const status: ReportFormFields["status"] = useWatch({
name: "status",
});
const menuOption = useMemo(() => getMenuOption(status), [status]);
const chipColor =
status === MatchStatusEnum.Confirmed_match ? "error" : "success";
return (
<Stack direction="row" gap={1.5} alignItems="center">
<GiveText variant="bodyS">
Please set the most appropriate status:
</GiveText>
<ChipMenu
options={[
{
text: `Change to ${menuOption.label}`,
onClick: () => setValue("status", menuOption.value),
type: menuOption.color,
},
]}
canOpen
chipProps={{
variant: "light",
color: chipColor,
}}
label={statusOptions[status].label}
menuWidth={240}
/>
</Stack>
);
};
export default ReportStatusSelector;
|