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 | import { Typography } from "@material-ui/core";
import { Alert as MuiAlert } from "@material-ui/lab/";
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 { useQuery } from "react-query";
import { routeToEditProfile } from "routes";
import { service } from "service";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
alert: {
marginBottom: theme.spacing(2),
},
alertText: { display: "block", marginBottom: theme.spacing(1) },
}));
export default function DashboardBanners() {
const { t } = useTranslation([DASHBOARD]);
const classes = useStyles();
const { data, error } = useQuery<GetAccountInfoRes.AsObject, RpcError>(
accountInfoQueryKey,
service.account.getAccountInfo
);
return (
<>
{error && <Alert severity="error">{error?.message}</Alert>}
{data && (
<>
{!data.profileComplete && (
<MuiAlert className={classes.alert} 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>
<Link href={routeToEditProfile()} passHref>
<Button component="a" color="default" role="link">
{t("dashboard:edit_profile_button_text")}
</Button>
</Link>
</Typography>
<Typography variant="inherit">
{t("dashboard:complete_profile_explanation")}
</Typography>
</MuiAlert>
)}
</>
)}
</>
);
}
|