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 | 1x 1x 1x 1x 1x 1x 6x 6x 9x 9x 9x 4x 5x 1x | import { Box, styled, Typography } from "@mui/material";
import ConfirmationDialogWrapper from "components/ConfirmationDialogWrapper";
import { useTranslation } from "i18n";
import { GLOBAL, MESSAGES } from "i18n/namespaces";
import { HostRequestStatus } from "proto/messages_pb";
import FieldButton from "./FieldButton";
const StyledCard = styled(Box)(({ theme }) => ({
background: "var(--mui-palette-grey-50)",
borderRadius: theme.shape.borderRadius * 2,
padding: theme.spacing(2),
display: "flex",
flexDirection: "column",
gap: theme.spacing(1.5),
alignSelf: "flex-start",
}));
const StyledButtonRow = styled(Box)(({ theme }) => ({
display: "flex",
flexWrap: "wrap",
gap: theme.spacing(1),
justifyContent: "flex-end",
}));
export default function HostRequestRespondButtons({
isHost,
status,
isLoading,
handleStatus,
name,
}: {
isHost: boolean;
status: HostRequestStatus;
isLoading: boolean;
handleStatus: (status: HostRequestStatus) => () => void;
name?: string;
}) {
const { t } = useTranslation([MESSAGES, GLOBAL]);
if (isHost) {
if (status !== HostRequestStatus.HOST_REQUEST_STATUS_PENDING) return null;
return (
<StyledCard>
<div>
<Typography variant="subtitle2">{t("messages:respond_box_title")}</Typography>
<Typography
variant="body2"
sx={{
color: "text.secondary",
}}
>
{t("messages:respond_box_description", { name })}
</Typography>
</div>
<StyledButtonRow>
<FieldButton
isLoading={isLoading}
callback={handleStatus(HostRequestStatus.HOST_REQUEST_STATUS_REJECTED)}
variant="outlined"
>
{t("messages:close_request_button_text")}
</FieldButton>
<FieldButton callback={handleStatus(HostRequestStatus.HOST_REQUEST_STATUS_ACCEPTED)} isLoading={isLoading}>
{t("global:accept")}
</FieldButton>
</StyledButtonRow>
</StyledCard>
);
}
if (status !== HostRequestStatus.HOST_REQUEST_STATUS_ACCEPTED) return null;
return (
<StyledCard>
<div>
<Typography variant="subtitle2">{t("messages:surfer_confirm_box_title", { name })}</Typography>
<Typography
variant="body2"
sx={{
color: "text.secondary",
}}
>
{t("messages:surfer_confirm_box_description")}
</Typography>
</div>
<StyledButtonRow>
<ConfirmationDialogWrapper
title={t("messages:cancel_request_dialog_title")}
message={t("messages:cancel_request_dialog_message")}
confirmButtonLabel={t("messages:cancel_request_dialog_confirm_button")}
cancelButtonLabel={t("messages:cancel_request_dialog_dismiss_button")}
onConfirm={handleStatus(HostRequestStatus.HOST_REQUEST_STATUS_CANCELLED)}
>
{(setIsOpen) => (
<FieldButton isLoading={isLoading} callback={() => setIsOpen(true)} variant="outlined">
{t("messages:cancel_request_button")}
</FieldButton>
)}
</ConfirmationDialogWrapper>
<FieldButton callback={handleStatus(HostRequestStatus.HOST_REQUEST_STATUS_CONFIRMED)} isLoading={isLoading}>
{t("messages:confirm_request_button_text")}
</FieldButton>
</StyledButtonRow>
</StyledCard>
);
}
|