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 | import { Alert as MuiAlert, styled, Typography } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import Alert from "components/Alert";
import Button from "components/Button";
import { accountInfoQueryKey } from "features/queryKeys";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { DASHBOARD } from "i18n/namespaces";
import Link from "next/link";
import { GetAccountInfoRes } from "proto/account_pb";
import React from "react";
import { routeToEditProfile } from "routes";
import { service } from "service";
import { theme } from "theme";
const StyledAlert = styled(MuiAlert)(() => ({
marginBottom: theme.spacing(2),
}));
export default function DashboardBanners() {
const { t } = useTranslation([DASHBOARD]);
const { data, error } = useQuery<GetAccountInfoRes.AsObject, RpcError>({
queryKey: [accountInfoQueryKey],
queryFn: service.account.getAccountInfo,
});
return (
<>
{error && <Alert severity="error">{error?.message}</Alert>}
{data && (
<>
{!data.profileComplete && (
<StyledAlert severity="warning">
<Typography variant="inherit" paragraph>
{t("dashboard:please_complete_profile")}
</Typography>
<Typography variant="inherit">
{t("dashboard:fill_in_who_i_am")}
</Typography>
<Typography variant="inherit" paragraph>
{t("dashboard:upload_photo")}
</Typography>
<Typography variant="inherit" paragraph>
<Button
component={Link}
role="link"
href={routeToEditProfile()}
>
{t("dashboard:edit_profile_button_text")}
</Button>
</Typography>
<Typography variant="inherit">
{t("dashboard:complete_profile_explanation")}
</Typography>
</StyledAlert>
)}
</>
)}
</>
);
}
|