Skip to content

Commit 8105c82

Browse files
snyaggarwalsnyaggarwal
committed
Waitlisting component
1 parent 90b8a6b commit 8105c82

6 files changed

Lines changed: 145 additions & 22 deletions

File tree

‎public/FullLogo-BlackText.png‎

10.7 KB
Loading

‎public/mapper_landing_placeholder.png‎

587 KB
Loading

‎src/common/utils.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1053,3 +1053,5 @@ export const toCamelCase = str => {
10531053
.replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : '')
10541054
.replace(/^(.)/, (m) => m.toLowerCase());
10551055
}
1056+
1057+
export const isInWaitlist = () => getCurrentUser()?.extras?.__oidc_groups?.includes('mapper-waitlist')

‎src/components/app/App.jsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
import React from 'react';
33
import { Route, Switch, withRouter } from 'react-router-dom';
44
import {
5-
recordGAPageView, isLoggedIn, getLoginURL, isV3URL, isV2URL, isRedirectingToLoginViaReferrer
5+
recordGAPageView, isLoggedIn, getLoginURL, isV3URL, isV2URL, isRedirectingToLoginViaReferrer,
6+
isInWaitlist
67
} from '../../common/utils';
78
import Error404 from '../errors/Error404';
89
import Error403 from '../errors/Error403';
910
import Error401 from '../errors/Error401';
11+
import Waitlisting from '../errors/Waitlisting'
1012
import NetworkError from '../errors/NetworkError'
1113
import ErrorBoundary from '../errors/ErrorBoundary';
1214
import CheckAuth from './CheckAuth'
@@ -22,19 +24,26 @@ import Alert from '../common/Alert';
2224
import MapProject from '../map-projects/MapProject'
2325
import MapProjects from '../map-projects/MapProjects'
2426

25-
const AuthenticationRequiredRoute = ({component: Component, ...rest}) => (
26-
<Route
27-
{...rest}
28-
render={
29-
props =>
30-
isLoggedIn() ?
31-
<Component {...props} /> :
32-
isRedirectingToLoginViaReferrer(props.location) ?
33-
<CheckAuth /> :
34-
<Error401 />
35-
}
36-
/>
37-
)
27+
const AuthenticationRequiredRoute = ({component: Component, ...rest}) => {
28+
const { toggles } = React.useContext(OperationsContext);
29+
return (
30+
<Route
31+
{...rest}
32+
render={
33+
props =>
34+
isLoggedIn() ?
35+
(
36+
isInWaitlist() ?
37+
<Waitlisting /> :
38+
<Component {...props} />
39+
) :
40+
isRedirectingToLoginViaReferrer(props.location) ?
41+
<CheckAuth /> :
42+
(toggles?.MAPPER_WAITLIST_TOGGLE === true ? <Waitlisting /> : <Error401 />)
43+
}
44+
/>
45+
)
46+
}
3847

3948
const App = props => {
4049
const [networkError, setNetworkError] = React.useState(false)

‎src/components/app/LeftMenu.jsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ import { styled } from '@mui/material/styles';
33
import { useTranslation } from 'react-i18next'
44
import { useLocation } from 'react-router-dom';
55
import Typography from '@mui/material/Typography'
6+
import Chip from '@mui/material/Chip';
67
import List from '@mui/material/List';
78
import ListItem from '@mui/material/ListItem';
89
import ListItemButton from '@mui/material/ListItemButton';
910
import ListItemIcon from '@mui/material/ListItemIcon';
1011
import ListItemText from '@mui/material/ListItemText';
11-
import Button from '@mui/material/Button';
1212
import DashboardIcon from '@mui/icons-material/Dashboard';
1313
import FolderOpenIcon from '@mui/icons-material/FolderOutlined';
1414
import Divider from '@mui/material/Divider';
1515
import map from 'lodash/map'
1616
import { PRIMARY_COLORS } from '../../common/colors'
17-
import { getCurrentUser, refreshCurrentUserCache, getCurrentUserOrgs, toV3URL } from '../../common/utils';
17+
import { getCurrentUser, refreshCurrentUserCache, getCurrentUserOrgs, toV3URL, isInWaitlist } from '../../common/utils';
1818
import Drawer from '../common/Drawer';
1919
import OrgIcon from '../orgs/OrgIcon';
2020
import EntityIcon from '../common/EntityIcon'
@@ -133,6 +133,10 @@ const LeftMenu = ({ isOpen, onClose }) => {
133133
<i style={{fontSize: '1.25rem', color: location.pathname === '/' ? PRIMARY_COLORS.main : undefined}} className="fa-solid fa-diagram-project"></i>
134134
</ListItemIcon>
135135
<ListItemText primary={t('user.my_mapping_projects')} />
136+
{
137+
isInWaitlist() &&
138+
<Chip size='small' variant='contained' label='Waitlist' color='primary' />
139+
}
136140
</ListItemButton>
137141
</ListItem>
138142
</List>
@@ -141,11 +145,6 @@ const LeftMenu = ({ isOpen, onClose }) => {
141145
<ListItem
142146
disablePadding
143147
sx={{ display: 'block', padding: 1, borderRadius: '100px' }}
144-
secondaryAction={
145-
<Button edge="end" aria-label="delete" variant='text' color='primary' sx={{textTransform: 'none'}}>
146-
<b>{t('common.create')}</b>
147-
</Button>
148-
}
149148
>
150149
<ListItemText
151150
primary={
@@ -187,7 +186,7 @@ const LeftMenu = ({ isOpen, onClose }) => {
187186
))
188187
}
189188
</List>
190-
<Divider style={{width: '100%', marginTop: '16px'}} />
189+
<Divider style={{width: '100%'}} />
191190
<List sx={{maxHeight: '300px', overflow: 'auto', p: 0}} dense>
192191
<ListItem
193192
disablePadding

‎src/components/errors/WaitListing.jsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import Button from '@mui/material/Button'
3+
import Container from '@mui/material/Container';
4+
import Box from '@mui/material/Box';
5+
import Stack from '@mui/material/Stack';
6+
import Typography from '@mui/material/Typography';
7+
import Paper from '@mui/material/Paper';
8+
9+
const Waitlisting = ({ onSignup }) => {
10+
return (
11+
<Box
12+
sx={{
13+
minHeight: { xs: 'auto', sm: 'calc(100dvh - 100px)' },
14+
display: 'flex',
15+
alignItems: { xs: 'stretch', sm: 'center' },
16+
justifyContent: 'center',
17+
px: 2,
18+
py: {xs: 3, sm: 0 },
19+
overflowY: 'auto',
20+
scrollBehavior: 'smooth',
21+
}}
22+
>
23+
<Container maxWidth="lg">
24+
<Paper
25+
elevation={0}
26+
sx={{
27+
mx: 'auto',
28+
p: { xs: 1, sm: 1, md: 1 },
29+
borderRadius: 4,
30+
textAlign: 'center',
31+
background: 'none',
32+
maxWidth: { xs: 720, md: 1100 },
33+
}}
34+
>
35+
<Box sx={{ mb: { xs: 3, sm: 4 } }}>
36+
<Box
37+
component="img"
38+
src="FullLogo-BlackText.png"
39+
alt="OCL"
40+
sx={{ width: { xs: 160, sm: 240, md: 300, lg: 380 }, height: 'auto' }}
41+
/>
42+
</Box>
43+
<Typography
44+
variant="h1"
45+
sx={{
46+
fontWeight: 700,
47+
letterSpacing: '-0.02em',
48+
color: 'text.primary',
49+
fontSize: 'clamp(26px, 2.2vw, 56px)',
50+
mb: { xs: 1.5, sm: 2 },
51+
}}
52+
>
53+
The future of terminology mapping is coming soon!
54+
</Typography>
55+
56+
<Typography
57+
variant="h5"
58+
sx={{
59+
color: 'text.secondary',
60+
fontWeight: 400,
61+
fontSize: 'clamp(15px, 2.2vw, 22px)',
62+
maxWidth: 900,
63+
mx: 'auto',
64+
mb: { xs: 3, sm: 3 },
65+
}}
66+
>
67+
Join the waitlist for early access to the OCL Mapper on OCL Online.
68+
</Typography>
69+
70+
<Stack direction="row" justifyContent="center" sx={{ mb: { xs: 2, sm: 3, md: 3, lg: 3 } }}>
71+
<Button
72+
href='https://docs.google.com/forms/d/e/1FAIpQLSed7ftI_eUt5fp-YQZM7z1YHRg5-7qz69gVImy2SlX4-73kOg/viewform'
73+
size="large"
74+
variant="contained"
75+
color="primary"
76+
onClick={onSignup}
77+
sx={{
78+
px: { xs: 3.5, sm: 4.5 },
79+
py: { xs: 1.25, sm: 1.5 },
80+
borderRadius: 999,
81+
textTransform: 'none',
82+
fontWeight: 600,
83+
fontSize: 'clamp(14px, 1.8vw, 18px)',
84+
}}
85+
>
86+
Sign up for Early Access
87+
</Button>
88+
</Stack>
89+
<Box
90+
component="img"
91+
src="mapper_landing_placeholder.png"
92+
alt="OCL Mapper preview"
93+
loading="lazy"
94+
sx={{
95+
display: 'block',
96+
mx: 'auto',
97+
width: '100%',
98+
maxWidth: { xs: 350, sm: 400, md: 500, lg: 590 },
99+
maxHeight: { xs: '44vh', sm: '60vh', md: '65vh' },
100+
height: 'auto',
101+
objectFit: 'contain',
102+
borderRadius: 3,
103+
boxShadow: { xs: 'none', md: '0 10px 35px rgba(0,0,0,0.14)' },
104+
}}
105+
/>
106+
</Paper>
107+
</Container>
108+
</Box>
109+
);
110+
};
111+
112+
113+
export default Waitlisting;

0 commit comments

Comments
 (0)