Congratulation page

src/presentation/web/src/components/congratulationPage/CongratulationPage.tsx

@@ -0,0 +1,18 @@
+import { LinearProgress, makeStyles } from '@material-ui/core';
+import React from 'react'
+import { useGetAnimal } from '../../client';
+import CongratulationSite from "../congratulationSite/CongratulationSite";
+
+const CongratulationPage = () => {
+    const { data, loading, error } = useGetAnimal({ animalId: 1, requestOptions: { headers: { access_token: localStorage.getItem('apiKey') ?? '' } } });
+    if (!loading && data) {
+        return (
+            <CongratulationSite name={data.name} photoURL={Buffer.from(data.thumbnail.buffer, 'binary').toString('base64')} />
+        )
+    }
+    return (
+        <LinearProgress />
+    )
+};
+
+export default CongratulationPage;

src/presentation/web/src/components/congratulationSite/CongratulationSite.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import DoneOutline from '@material-ui/icons/DoneOutline';
+import { Card, CardActionArea, CardMedia, Grid, Link, Paper, SvgIcon, Typography } from '@material-ui/core';
+import { Link as RouterLink } from 'react-router-dom';
+import theme from '../../themes/theme';
+
+const useStyles = makeStyles({
+    mainWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '2rem 0'
+    },
+    descriptionLine: {
+        fontWeight: 'bold',
+        fontFamily: 'Roboto',
+        fontSize: '20px',
+        lineHeight: '32px',
+        letterSpacing: '0.15px',
+    },
+    margin: {
+        marginTop: '1rem',
+    },
+    iconWrapper: {
+        marginTop: '1rem',
+        backgroundColor: theme.palette.secondary.dark,
+        borderRadius: 90,
+        padding: 8,
+    },
+    icon: {
+        color: '#FFF',
+        opacity: 0.87,
+    },
+    media: {
+        height: 300,
+        width: 400,
+    },
+    link: {
+        color: theme.palette.info.dark,
+    },
+});
+
+interface Props {
+    photoURL: string,
+    name: string,
+}
+
+const CongratulationSite: React.FC<Props> = ({ photoURL, name }) => {
+    const classes = useStyles();
+    console.log(photoURL);
+    return (
+        <Grid item xs={12} md={6}>
+            <Paper
+                className={classes.mainWrapper}
+                variant="outlined">
+                <Typography variant="h4">
+                    Adoptowałeś!
+                </Typography>
+                <SvgIcon className={classes.iconWrapper}>
+                    <DoneOutline className={classes.icon} />
+                </SvgIcon>
+                <Typography variant="h5" className={classes.margin}>
+                    Gratulacje!
+                </Typography>
+                <Card className={classes.margin}>
+                    <CardActionArea>
+                        <CardMedia
+                            className={classes.media}
+                            image={`data:image/png;base64,${photoURL}`}
+                            title="Adoptuj mnie"
+                        />
+                    </CardActionArea>
+                </Card>
+                <Typography className={classes.margin} variant="subtitle1">
+                    <span className={classes.descriptionLine}>{name}</span> znalazł/a swój nowy dom dzięki Tobie.
+                </Typography>
+                <Link component={RouterLink} to={`/contact`} className={`${classes.link} ${classes.margin}`}>
+                    W razie jakichkolwiek pytań skontaktuj się z nami
+                </Link>
+            </Paper>
+        </Grid>
+    )
+};
+
+export default CongratulationSite;

src/presentation/web/src/pages/Adoption.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import { AppCtx } from '../App';
 import FirstStep from '../components/firstStep/FirstStep';
 import PageAdopt from '../components/pageAdopt/PageAdopt';
 import GridContainer from '../components/gridContainer/GridContainer';
+import CongratulationPage from '../components/congratulationPage/CongratulationPage';
+import ProtectedRoute from '../components/protectedRoute/ProtectedRoute';
+import { Grid } from '@material-ui/core';
+import SideNavList from '../components/navbar/sideNav/SideNav';
 
 const Adoption = () => {
     const { path } = useRouteMatch();
@@ -13,6 +18,7 @@ const Adoption = () => {
                 <Route exact path={`${path}/step/1`}>
                     <FirstStep />
                 </Route>
+                <ProtectedRoute exact path={`${path}/step/5`} component={CongratulationPage} />
                 <Route exact path={`${path}`}>
                     <PageAdopt />;
                 </Route>