@campxdev/shared 3.1.3-alpha1 → 3.1.3-alpha2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/ReactJoyRide.tsx +56 -88
package/package.json
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import TourIcon from '@mui/icons-material/Tour'
|
|
2
1
|
import { Box, Button, Typography } from '@mui/material'
|
|
3
|
-
import { ReactNode,
|
|
4
|
-
import ReactJoyride, { Step
|
|
5
|
-
import { useQuery } from 'react-query'
|
|
6
|
-
import axios from '../config/axios'
|
|
2
|
+
import { ReactNode, useState } from 'react'
|
|
3
|
+
import ReactJoyride, { Step } from 'react-joyride'
|
|
7
4
|
import './CustomJoyRideStyles.css'
|
|
8
|
-
import Spinner from './Spinner'
|
|
9
5
|
|
|
10
6
|
function ReactJoyRide({
|
|
11
7
|
steps,
|
|
@@ -17,95 +13,65 @@ function ReactJoyRide({
|
|
|
17
13
|
tourName: string
|
|
18
14
|
}) {
|
|
19
15
|
const [run, setRun] = useState(false)
|
|
20
|
-
const [stepIndex, setStepIndex] = useState(0)
|
|
21
|
-
|
|
22
|
-
const fetchTours = (params) => {
|
|
23
|
-
return axios.get(`/square/tours`).then((res) => res.data)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const { data: toursData, isLoading: toursLoading } = useQuery(
|
|
27
|
-
'tours',
|
|
28
|
-
fetchTours,
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
useEffect(() => {}, [run])
|
|
32
|
-
|
|
33
|
-
const completeTour = async () => {
|
|
34
|
-
try {
|
|
35
|
-
await axios.post(`/square/tours/complete`, { tourName })
|
|
36
|
-
} catch (error) {
|
|
37
|
-
// console.error('Error in Completing Tour:', error)
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const handleJoyRideCallback = (data: CallBackProps) => {
|
|
42
|
-
const { action, status, index } = data
|
|
43
|
-
|
|
44
|
-
if (action === 'next' || action === 'prev') {
|
|
45
|
-
setStepIndex(index + (action === 'next' ? 1 : 0))
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
if (action === 'reset') {
|
|
49
|
-
setRun(false)
|
|
50
|
-
setStepIndex(0)
|
|
51
|
-
completeTour()
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
16
|
|
|
55
17
|
const customSteps = steps.map((step, index) => ({
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
18
|
+
...step,
|
|
19
|
+
title: '', // Remove the automatic title
|
|
20
|
+
content: (
|
|
21
|
+
<Box
|
|
22
|
+
sx={{
|
|
23
|
+
fontFamily: 'Roboto, sans-serif',
|
|
24
|
+
display: 'flex',
|
|
25
|
+
flexDirection: 'column',
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<Typography
|
|
29
|
+
variant="caption"
|
|
30
|
+
sx={{
|
|
31
|
+
color: '#6b7280',
|
|
32
|
+
fontWeight: 500,
|
|
33
|
+
textTransform: 'uppercase',
|
|
34
|
+
letterSpacing: '0.5px',
|
|
35
|
+
fontSize: '11px',
|
|
36
|
+
}}
|
|
37
|
+
>
|
|
38
|
+
Step {index + 1}
|
|
39
|
+
</Typography>
|
|
40
|
+
<Box sx={{ padding: '4px 0' }}>
|
|
41
|
+
<Typography
|
|
42
|
+
sx={{
|
|
43
|
+
lineHeight: 1.5,
|
|
44
|
+
color: '#4b5563',
|
|
45
|
+
fontFamily: 'Poppins, sans-serif',
|
|
46
|
+
fontSize: '16px',
|
|
47
|
+
fontWeight: '600',
|
|
48
|
+
marginTop: '12px',
|
|
69
49
|
}}
|
|
70
50
|
>
|
|
71
|
-
|
|
51
|
+
{step.title}
|
|
72
52
|
</Typography>
|
|
73
|
-
<Box sx={{ padding: '4px 0' }}>
|
|
74
|
-
<Typography
|
|
75
|
-
sx={{
|
|
76
|
-
lineHeight: 1.5,
|
|
77
|
-
color: '#4b5563',
|
|
78
|
-
fontFamily: 'Poppins, sans-serif',
|
|
79
|
-
fontSize: '16px',
|
|
80
|
-
fontWeight: '600',
|
|
81
|
-
marginTop: '12px',
|
|
82
|
-
}}
|
|
83
|
-
>
|
|
84
|
-
{step.title}
|
|
85
|
-
</Typography>
|
|
86
|
-
</Box>
|
|
87
|
-
<Box sx={{ padding: '4px 0' }}>
|
|
88
|
-
<Typography
|
|
89
|
-
sx={{
|
|
90
|
-
fontSize: '14px',
|
|
91
|
-
lineHeight: 1.5,
|
|
92
|
-
color: '#4b5563',
|
|
93
|
-
fontFamily: 'Heebo, sans-serif',
|
|
94
|
-
fontWeight: '500',
|
|
95
|
-
}}
|
|
96
|
-
>
|
|
97
|
-
{step.content}
|
|
98
|
-
</Typography>
|
|
99
|
-
</Box>
|
|
100
53
|
</Box>
|
|
101
|
-
|
|
102
|
-
|
|
54
|
+
<Box sx={{ padding: '4px 0' }}>
|
|
55
|
+
<Typography
|
|
56
|
+
sx={{
|
|
57
|
+
fontSize: '14px',
|
|
58
|
+
lineHeight: 1.5,
|
|
59
|
+
color: '#4b5563',
|
|
60
|
+
fontFamily: 'Heebo, sans-serif',
|
|
61
|
+
fontWeight: '500',
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
{step.content}
|
|
65
|
+
</Typography>
|
|
66
|
+
</Box>
|
|
67
|
+
</Box>
|
|
68
|
+
),
|
|
69
|
+
}))
|
|
103
70
|
|
|
104
71
|
return (
|
|
105
72
|
<>
|
|
106
73
|
<Box>
|
|
107
74
|
<ReactJoyride
|
|
108
|
-
callback={handleJoyRideCallback}
|
|
109
75
|
run={run}
|
|
110
76
|
steps={customSteps}
|
|
111
77
|
styles={{
|
|
@@ -119,7 +85,8 @@ function ReactJoyRide({
|
|
|
119
85
|
},
|
|
120
86
|
tooltip: {
|
|
121
87
|
borderRadius: '12px',
|
|
122
|
-
boxShadow:
|
|
88
|
+
boxShadow:
|
|
89
|
+
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
123
90
|
fontSize: '14px',
|
|
124
91
|
padding: '20px',
|
|
125
92
|
minWidth: '320px',
|
|
@@ -132,7 +99,7 @@ function ReactJoyRide({
|
|
|
132
99
|
fontSize: '16px',
|
|
133
100
|
fontWeight: '600',
|
|
134
101
|
color: '#1f2937',
|
|
135
|
-
|
|
102
|
+
fontFamily: 'Poppins, sans-serif',
|
|
136
103
|
},
|
|
137
104
|
tooltipContent: {
|
|
138
105
|
fontSize: '14px',
|
|
@@ -140,7 +107,7 @@ function ReactJoyRide({
|
|
|
140
107
|
color: '#4b5563',
|
|
141
108
|
padding: '0',
|
|
142
109
|
fontFamily: 'Heebo, sans-serif !important',
|
|
143
|
-
fontWeight: '400'
|
|
110
|
+
fontWeight: '400',
|
|
144
111
|
},
|
|
145
112
|
buttonNext: {
|
|
146
113
|
backgroundColor: '#121212',
|
|
@@ -246,7 +213,8 @@ function ReactJoyRide({
|
|
|
246
213
|
'&:hover': {
|
|
247
214
|
backgroundColor: '#1E027F',
|
|
248
215
|
color: 'white',
|
|
249
|
-
boxShadow:
|
|
216
|
+
boxShadow:
|
|
217
|
+
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
250
218
|
transform: 'translateY(-50%) translateX(-4px)',
|
|
251
219
|
},
|
|
252
220
|
'&:active': {
|