Skip to content

Commit b859848

Browse files
KneesalKneesal
committed
fix: done screen
1 parent d25f421 commit b859848

File tree

3 files changed

+247
-9
lines changed

3 files changed

+247
-9
lines changed

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx‎

Lines changed: 138 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,145 @@
11
import Box from '@mui/material/Box'
2+
import Stack from '@mui/material/Stack'
3+
import Button from '@mui/material/Button'
24
import Typography from '@mui/material/Typography'
3-
import { ReactElement } from 'react'
5+
import { ReactElement, useState } from 'react'
6+
import dynamic from 'next/dynamic'
7+
8+
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
9+
import ShareIcon from '@mui/icons-material/Share'
10+
import EditIcon from '@mui/icons-material/Edit'
11+
import { useJourney } from '@core/journeys/ui/JourneyProvider'
12+
import { useRouter } from 'next/router'
13+
import { useTranslation } from 'react-i18next'
14+
import NextImage from 'next/image'
15+
const ShareDrawer = dynamic(
16+
async () =>
17+
await import(
18+
/* webpackChunkName: "TemplateCustomization/DoneScreen/ShareDrawer" */ './ShareDrawer'
19+
).then((mod) => mod.ShareDrawer),
20+
{ ssr: false }
21+
)
422

523
export function DoneScreen(): ReactElement {
24+
const [openShareDrawer, setOpenShareDrawer] = useState<boolean | null>(null)
25+
26+
const { t } = useTranslation('apps-journeys-admin')
27+
const { journey } = useJourney()
28+
const router = useRouter()
29+
const journeyPath = `/api/preview?slug=${journey?.slug}`
30+
const href = journey?.slug != null ? journeyPath : undefined
31+
32+
// needed to preload the drawer chunk to preserve first-open animations
33+
// only run on hover events
34+
function handlePreloadShareDrawer(): void {
35+
setOpenShareDrawer(false)
36+
}
37+
38+
function handleShare(): void {
39+
setOpenShareDrawer(true)
40+
}
41+
42+
function handleContinueEditing(): void {
43+
if (journey?.id != null) void router.push(`/journeys/${journey.id}`)
44+
}
45+
646
return (
7-
<Box>
8-
<Typography variant="h4" component="h1" gutterBottom>
9-
Setup Complete
10-
</Typography>
11-
<Typography variant="body1" color="text.secondary">
12-
Your journey template has been successfully configured!
13-
</Typography>
14-
</Box>
47+
<>
48+
<Stack alignItems="center" gap={4} sx={{ pb: 4 }}>
49+
<Typography variant="h4" component="h1">
50+
{t('Ready!')}
51+
</Typography>
52+
53+
<Box
54+
sx={{
55+
width: { xs: 300 },
56+
borderRadius: 2,
57+
bgcolor: 'background.paper',
58+
boxShadow: 3,
59+
p: 2,
60+
mt: 6
61+
}}
62+
>
63+
<Box sx={{ height: 160, position: 'relative' }}>
64+
<NextImage
65+
src={journey?.primaryImageBlock?.src ?? ''}
66+
alt={journey?.seoTitle ?? ''}
67+
fill
68+
objectFit="cover"
69+
style={{
70+
borderRadius: 2
71+
}}
72+
/>
73+
</Box>
74+
<Typography variant="subtitle1" fontWeight={600} noWrap>
75+
{journey?.seoTitle ?? journey?.displayTitle ?? ''}
76+
</Typography>
77+
<Typography
78+
variant="caption"
79+
color="text.secondary"
80+
sx={{
81+
display: '-webkit-box',
82+
WebkitLineClamp: 2,
83+
WebkitBoxOrient: 'vertical',
84+
overflow: 'hidden'
85+
}}
86+
>
87+
{journey?.seoDescription ?? ''}
88+
</Typography>
89+
</Box>
90+
91+
<Stack gap={4} sx={{ width: { xs: '100%', sm: 300 }, mt: 6 }}>
92+
<Button
93+
fullWidth
94+
variant="contained"
95+
href={href}
96+
component={href != null ? 'a' : 'button'}
97+
target={href != null ? '_blank' : undefined}
98+
startIcon={<OpenInNewIcon />}
99+
sx={{
100+
borderRadius: 3,
101+
backgroundColor: 'secondary.main'
102+
}}
103+
>
104+
<Typography variant="h6">{t('Preview in new tab')}</Typography>
105+
</Button>
106+
107+
<Button
108+
fullWidth
109+
variant="contained"
110+
onClick={handleShare}
111+
onMouseEnter={handlePreloadShareDrawer}
112+
onFocus={handlePreloadShareDrawer}
113+
onTouchStart={handlePreloadShareDrawer}
114+
startIcon={<ShareIcon />}
115+
sx={{
116+
borderRadius: 3,
117+
backgroundColor: 'secondary.main'
118+
}}
119+
>
120+
<Typography variant="h6">{t('Share')}</Typography>
121+
</Button>
122+
123+
<Button
124+
fullWidth
125+
variant="contained"
126+
onClick={handleContinueEditing}
127+
startIcon={<EditIcon />}
128+
sx={{
129+
borderRadius: 3,
130+
backgroundColor: 'secondary.main'
131+
}}
132+
>
133+
<Typography variant="h6">{t('Continue Editing')}</Typography>
134+
</Button>
135+
</Stack>
136+
</Stack>
137+
{openShareDrawer != null && (
138+
<ShareDrawer
139+
open={openShareDrawer}
140+
onClose={() => setOpenShareDrawer(false)}
141+
/>
142+
)}
143+
</>
15144
)
16145
}

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/ShareDrawer/ShareDrawer.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { ReactElement } from 'react'
2+
import Stack from '@mui/material/Stack'
3+
import Typography from '@mui/material/Typography'
4+
import Box from '@mui/material/Box'
5+
import NextImage from 'next/image'
6+
import { useTranslation } from 'react-i18next'
7+
import { useJourney } from '@core/journeys/ui/JourneyProvider'
8+
import Button from '@mui/material/Button'
9+
import Drawer from '@mui/material/Drawer'
10+
import IconButton from '@mui/material/IconButton'
11+
import X2Icon from '@core/shared/ui/icons/X2'
12+
13+
interface ShareDrawerProps {
14+
open: boolean
15+
onClose: () => void
16+
}
17+
18+
export function ShareDrawer({ open, onClose }: ShareDrawerProps): ReactElement {
19+
const { t } = useTranslation('apps-journeys-admin')
20+
const { journey } = useJourney()
21+
22+
return (
23+
<Drawer open={open} anchor="bottom">
24+
<Stack alignItems="center" gap={4} sx={{ pb: 4, height: '100svh' }}>
25+
<Stack direction="row" justifyContent="flex-end" width="100%">
26+
<IconButton aria-label="close-share-drawer" onClick={onClose}>
27+
<X2Icon />
28+
</IconButton>
29+
</Stack>
30+
31+
<Typography variant="h4">{t('Share!')}</Typography>
32+
33+
<Box
34+
sx={{
35+
width: { xs: 300 },
36+
borderRadius: 2,
37+
bgcolor: 'background.paper',
38+
boxShadow: 3,
39+
p: 2,
40+
mt: 6
41+
}}
42+
>
43+
<Box sx={{ height: 160, position: 'relative' }}>
44+
<NextImage
45+
src={journey?.primaryImageBlock?.src ?? ''}
46+
alt={journey?.seoTitle ?? ''}
47+
fill
48+
objectFit="cover"
49+
style={{
50+
borderRadius: 2
51+
}}
52+
/>
53+
</Box>
54+
<Typography variant="subtitle1" fontWeight={600} noWrap>
55+
{journey?.seoTitle ?? journey?.displayTitle ?? ''}
56+
</Typography>
57+
<Typography
58+
variant="caption"
59+
color="text.secondary"
60+
sx={{
61+
display: '-webkit-box',
62+
WebkitLineClamp: 2,
63+
WebkitBoxOrient: 'vertical',
64+
overflow: 'hidden'
65+
}}
66+
>
67+
{journey?.seoDescription ?? ''}
68+
</Typography>
69+
</Box>
70+
71+
{/* <Stack gap={4} sx={{ width: { xs: '100%', sm: 300 }, mt: 6 }}>
72+
<Button
73+
fullWidth
74+
variant="contained"
75+
sx={{
76+
borderRadius: 3,
77+
backgroundColor: 'secondary.main'
78+
}}
79+
>
80+
<Typography variant="h6">{t('Copy link')}</Typography>
81+
</Button>
82+
83+
<Button
84+
fullWidth
85+
variant="contained"
86+
sx={{
87+
borderRadius: 3,
88+
backgroundColor: 'secondary.main'
89+
}}
90+
>
91+
<Typography variant="h6">{t('Generate QR code')}</Typography>
92+
</Button>
93+
94+
<Button
95+
fullWidth
96+
variant="contained"
97+
sx={{
98+
borderRadius: 3,
99+
backgroundColor: 'secondary.main'
100+
}}
101+
>
102+
<Typography variant="h6">{t('Embed Code')}</Typography>
103+
</Button>
104+
</Stack> */}
105+
</Stack>
106+
</Drawer>
107+
)
108+
}

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/ShareDrawer/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ShareDrawer } from './ShareDrawer'

0 commit comments

Comments
 (0)