-
Notifications
You must be signed in to change notification settings - Fork 0
/
DetailsPage.jsx
127 lines (119 loc) · 5.13 KB
/
DetailsPage.jsx
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { RecordContextProvider, useShowController, useRedirect, TextField, UrlField } from 'react-admin';
import { MarkdownField } from '@semapps/markdown-components';
import { ReferenceArrayField } from '@semapps/field-components';
import { Container, Grid, Box, Typography, Button, useMediaQuery } from '@mui/material';
import { styled } from '@mui/material/styles';
import LockIcon from '@mui/icons-material/Lock';
import Header from '../../layout/Header';
import Footer from '../../layout/Footer';
import Separator from '../Separator';
import ServiceIcons from './ServiceIcons';
import ContactButton from './ContactButton';
import Pictures from './Pictures';
import ServicesList from './ServicesList';
import ShareButtons from './ShareButtons';
import MapField from '../../common/field/MapField/MapField';
import backgroundBottomImage from '../../assets/background-bottom.png'
import backgroundTopImage from '../../assets/background-top.png'
import ScrollToTop from '../../layout/ScrollToTop';
import ContactDialog from './ContactDialog';
import DepartmentField from '../../common/field/DepartmentField';
const DetailsPage = () => {
const xs = useMediaQuery(theme => theme.breakpoints.down('sm'), { noSsr: true });
const [openContact, setOpenContact] = useState(false);
const [service, setService] = useState();
const { slug } = useParams();
const redirect = useRedirect();
const { record } = useShowController({
resource: 'Place',
id: process.env.REACT_APP_MIDDLEWARE_URL + 'places/' + slug,
queryOptions: { onError: () => redirect('/') }
});
const contact = service => {
setService(service);
setOpenContact(true);
};
if (!record) return null;
return (
<RecordContextProvider value={record}>
<ScrollToTop />
<Header />
<Container maxWidth="md">
<Grid container>
<Grid item xs={12} sm={8}>
<Typography variant="h4" color="primary.main" component="div">
<DepartmentField source="pair:hasPostalAddress.pair:addressZipCode" />
</Typography>
<TextField source="pair:label" variant="h1" component="h1" />
<Separator mt={xs ? 1 : 2} mb={2} />
</Grid>
<Grid item xs={12} sm={4}>
<Box display="flex" flexDirection="column" alignItems={xs ? 'flex-start' : 'flex-end'}>
<ServiceIcons source="cdlt:hasServiceType" />
{!xs && <ContactButton onClick={() => contact()} sx={{ mt: 4 }} />}
</Box>
</Grid>
</Grid>
</Container>
<WhitePinkWrapper>
<Container maxWidth="md">
<Pictures />
<Grid container spacing={2} mt={2} mb={2}>
<Grid item xs={12} md={8}>
<Typography variant="body1" sx={{ color: '#6F7B7C', mt: -2, mb: 2 }}>
<MarkdownField source="pair:description" />
</Typography>
<UrlField source="pair:homePage" variant="h6" target="_blank" />
</Grid>
<Grid item xs={12} md={4}>
<Box display="flex" flexDirection="column" alignItems={xs ? 'flex-start' : 'flex-end'}>
{xs && <ContactButton onClick={() => contact()} sx={{ mb: 2 }} />}
<ShareButtons />
<a href={`${process.env.REACT_APP_BACKOFFICE_URL}Place/${encodeURIComponent(record.id)}`} target="_blank" rel="noopener noreferrer">
<Button endIcon={<LockIcon color="primary" />} color="secondary" sx={{ mt: xs ? 2 : 4 }}>Editer la page</Button>
</a>
</Box>
</Grid>
</Grid>
<Separator mt={4} mb={3} />
<Typography variant="h3" mb={4}>Les formules</Typography>
<ReferenceArrayField source="pair:offers" reference="Service">
<ServicesList contact={contact} />
</ReferenceArrayField>
<Separator mt={6} />
</Container>
</WhitePinkWrapper>
<GreyPinkWrapper>
<Container maxWidth="md" sx={{ pt: 2 }}>
<Typography variant="h3" mt={1} mb={3}>Localisation</Typography>
<MapField
address={record => record?.['pair:hasPostalAddress']?.['pair:label']}
latitude={record => record?.['pair:hasPostalAddress']?.['pair:latitude']}
longitude={record => record?.['pair:hasPostalAddress']?.['pair:longitude']}
typographyProps={{ variant: 'body1', color: 'secondary', mb: 3 }}
scrollWheelZoom={false}
/>
</Container>
</GreyPinkWrapper>
<Footer />
<ContactDialog open={!!openContact} onClose={() => setOpenContact()} service={service} />
</RecordContextProvider>
);
};
const WhitePinkWrapper = styled(Box)({
backgroundImage: `url(${backgroundTopImage})`,
backgroundRepeat: 'repeat-x',
backgroundPosition: 'top',
backgroundSize: '2px',
backgroundColor: '#F6F6F6'
});
const GreyPinkWrapper = styled(Box)({
backgroundImage: `url(${backgroundBottomImage})`,
backgroundRepeat: 'repeat-x',
backgroundPosition: 'top',
backgroundSize: '2px',
backgroundColor: '#FF96A0'
});
export default DetailsPage;