Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Congratulation page #294

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
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: '4rem 0',
minWidth: '30vw',
},
descriptionLine: {
fontWeight: 'bold',
fontFamily: 'Roboto',
fontSize: '20px',
lineHeight: '32px',
letterSpacing: '0.15px',
},
margin: {
marginTop: '1rem',
textAlign: 'center',
},
iconWrapper: {
marginTop: '1rem',
backgroundColor: theme.palette.secondary.dark,
borderRadius: 90,
padding: 8,
},
icon: {
color: '#FFF',
opacity: 0.87,
},
media: {
minHeight: 400,
minWidth: 500,
[theme.breakpoints.down('md')]: {
minHeight: 250,
minWidth: 350,
},
[theme.breakpoints.down('sm')]: {
minHeight: 200,
minWidth: 300,
},
},
link: {
color: theme.palette.info.dark,
},
});

interface Props {
photoURL: string,
name: string,
}

const CongratulationSite: React.FC<Props> = ({ photoURL, name }) => {
const classes = useStyles();
return (
<Grid item xs={12}>
<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;
10 changes: 8 additions & 2 deletions src/presentation/web/src/pages/Adoption.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
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 InvitationForSignAgreementPage from './InvitationSuccessAdoption';
import CongratulationPage from '../components/congratulationPage/CongratulationPage';
import ProtectedRoute from '../components/protectedRoute/ProtectedRoute';
import FirstStep from '../components/firstStep/FirstStep';
import { Grid } from '@material-ui/core';
import SideNavList from '../components/navbar/sideNav/SideNav';

const Adoption = () => {
const { path } = useRouteMatch();

return (
<GridContainer justify="center" align="flex-start" spacing={2}>
<Switch>
<Route exact path={`${path}/step/1`}>
<FirstStep />
</Route>
<Route exact path={`${path}`}>
<PageAdopt />;
</Route>
Expand Down
6 changes: 5 additions & 1 deletion src/presentation/web/src/pages/MyAcc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,22 @@ import LoginForm from '../components/auth/loginForm/LoginForm';
import CheckAdoptionStep from '../components/checkAdoptionStep/CheckAdoptionStep';
import FirstStep from '../components/firstStep/FirstStep';
import InvitationForSignAgreementPage from './InvitationSuccessAdoption';
import CongratulationPage from '../components/congratulationPage/CongratulationPage';


const MyAcc = () => {
const { path } = useRouteMatch();
const { appState } = useContext(AppCtx);
const { role, userName } = appState;
return (
// <>
<GridContainer spacing={2} align="flex-start" justify="center">
<Grid item xs={12} sm="auto">
<SideNavList role={role!} name={userName!} />
</Grid>
<Grid item xs={12} sm>
<Grid container item xs={12} sm justify='center' alignItems='center'>
<Switch>
<ProtectedRoute exact path={`${path}/adoption/step/5`} component={CongratulationPage} />
<ProtectedRoute exact path={`${path}/adoption/step/4`} component={InvitationForSignAgreementPage} />
<ProtectedRoute exact path={`${path}/adoption/step/1`} component={FirstStep} />
<ProtectedRoute exact path={`${path}/adoption/step`} component={CheckAdoptionStep} />
Expand All @@ -47,3 +50,4 @@ const MyAcc = () => {
};

export default MyAcc;