Commit 68e1c69327a3473f88b9bc49db8458a7bd6c7335

Authored by Vu Bui
1 parent e5e3d9b319
Exists in master

update

Showing 1 changed file with 19 additions and 14 deletions Inline Diff

1 import React, { useState, useEffect } from 'react' 1 import React, { useState, useEffect } from 'react'
2 import root from 'react-shadow'; 2 import root from 'react-shadow';
3 import { useCookies } from 'react-cookie' 3 import { useCookies } from 'react-cookie'
4 import Portal from '../../components/Portal' 4 import Portal from '../../components/Portal'
5 import BookingWizardStep from '../../components/BookingWizardStep' 5 import BookingWizardStep from '../../components/BookingWizardStep'
6 import LoginStep from '../../components/Steps/Login'; 6 import LoginStep from '../../components/Steps/Login';
7 import Services from '../../components/Steps/Services' 7 import Services from '../../components/Steps/Services'
8 import PickTime from '../../components/Steps/PickTime' 8 import PickTime from '../../components/Steps/PickTime'
9 import PickDoctor from '../../components/Steps/PickDoctor'; 9 import PickDoctor from '../../components/Steps/PickDoctor';
10 import Profile from '../../components/Steps/Profile'; 10 import Profile from '../../components/Steps/Profile';
11 import Payment from '../../components/Steps/Payment'; 11 import Payment from '../../components/Steps/Payment';
12 12
13 import './styles.scss' 13 import './styles.scss'
14 import { useCommonState, useCommonDispatch } from '../../store/common' 14 import { useCommonState, useCommonDispatch } from '../../store/common'
15 15
16 function BookingWizard(props) { 16 function BookingWizard(props) {
17 const [show, setShow] = useState(false) 17 const [show, setShow] = useState(false)
18 const [step, setStep] = useState('step-login') 18 const [step, setStep] = useState('step-login')
19 const commonStore = useCommonState() 19 const commonStore = useCommonState()
20 const dispatch = useCommonDispatch() 20 const dispatch = useCommonDispatch()
21 21
22 const [cookies, setCookie, removeCookie] = useCookies('patient-dashboard') 22 const [cookies, setCookie, removeCookie] = useCookies('patient-dashboard')
23 let { accessToken } = cookies 23 let { accessToken } = cookies
24 24
25 useEffect(() => { 25 useEffect(() => {
26 if (accessToken) { 26 if (accessToken) {
27 if (!localStorage.getItem('activeStep') || localStorage.getItem('activeStep') === null) { 27 if (!localStorage.getItem('activeStep') || localStorage.getItem('activeStep') === null) {
28 dispatch({ type: 'BW_ACTIVE_STEP', payload: 'step-confirm-service' }) 28 dispatch({ type: 'BW_ACTIVE_STEP', payload: 'step-confirm-service' })
29 } else { 29 } else {
30 dispatch({ type: 'BW_ACTIVE_STEP', payload: localStorage.getItem('activeStep') }) 30 dispatch({ type: 'BW_ACTIVE_STEP', payload: localStorage.getItem('activeStep') })
31 } 31 }
32 } 32 }
33 if (localStorage.getItem('userProfile')) { 33 if (localStorage.getItem('userProfile')) {
34 let profile = JSON.parse(localStorage.getItem('userProfile')) 34 let profile = JSON.parse(localStorage.getItem('userProfile'))
35 dispatch({ type: 'USER_PROFILE', payload: profile }) 35 dispatch({ type: 'USER_PROFILE', payload: profile })
36 console.log("check access token", profile) 36 console.log("check access token", profile)
37 } 37 }
38 // set data Case obj 38 // set data Case obj
39 if(localStorage.getItem('caseObj')) { 39 if(localStorage.getItem('caseObj')) {
40 dispatch({ type: 'BW_CASE', payload: JSON.parse(localStorage.getItem('caseObj')) }) 40 dispatch({ type: 'BW_CASE', payload: JSON.parse(localStorage.getItem('caseObj')) })
41 } 41 }
42 if(localStorage.getItem('bwHasBooked')) {
43 dispatch({type:'BW_HAS_BOOKED', payload: true})
44 }
42 45
43 }, []) 46 }, [])
44 useEffect(() => { 47 useEffect(() => {
45 48
46 }, [commonStore.showBookingModal]) 49 }, [commonStore.showBookingModal])
47 50
48 useEffect(() => { 51 useEffect(() => {
49 if (accessToken === null) { 52 if (accessToken === null) {
50 localStorage.removeItem('bwSteps') // remove steps 53 localStorage.removeItem('bwSteps') // remove steps
51 localStorage.removeItem('bwDataBooking') // remove data booking 54 localStorage.removeItem('bwDataBooking') // remove data booking
52 localStorage.setItem('activeStep', 'step-login') // remove active step 55 localStorage.setItem('activeStep', 'step-login') // remove active step
53 } 56 }
54 }, [accessToken]) 57 }, [accessToken])
55 58
56 59
57 60
58 useEffect(() => { 61 useEffect(() => {
59 if (commonStore.activeStep !== null) { 62 if (commonStore.activeStep !== null) {
60 setStep(commonStore.activeStep) 63 setStep(commonStore.activeStep)
61 } 64 }
62 }, [commonStore.activeStep]) 65 }, [commonStore.activeStep])
63 66
64 useEffect(() => { 67 useEffect(() => {
65 68
66 setShow(commonStore?.showBookingModal) 69 setShow(commonStore?.showBookingModal)
67 }, [commonStore.showBookingModal]) 70 }, [commonStore.showBookingModal])
68 71
69 const handleCloseModal = () => { 72 const handleCloseModal = () => {
70 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false }) 73 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false })
71 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false }) 74 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false })
72 } 75 }
73 76
74 77
75 const renderStep = (step) => { 78 const renderStep = (step) => {
76 switch (step) { 79 switch (step) {
77 case 'step-login': 80 case 'step-login':
78 return <div className="bw-booking-modal-content"> 81 return <div className="bw-booking-modal-content">
79 <div className="bw-booking-modal-inner"> 82 <div className="bw-booking-modal-inner">
80 <LoginStep /> 83 <LoginStep />
81 </div> 84 </div>
82 </div> 85 </div>
83 case 'step-confirm-service': 86 case 'step-confirm-service':
84 return <> 87 return <>
85 <div className="bw-booking-modal-header"> 88 <div className="bw-booking-modal-header">
86 <div className="bw-row"> 89 <div className="bw-row">
87 <div className="bw-col-left"> 90 <div className="bw-col-left">
88 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>} 91 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>}
89 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>} 92 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>}
90 <span>Confirm your services</span> 93 <span>Confirm your services</span>
91 </div> 94 </div>
92 <div className="bw-col-right"> 95 <div className="bw-col-right">
93 <button typ="button" className="bw-btn bw-btn-primary"> 96 <div className="bw-btn bw-btn-primary">
94 <i className="bw-icon-calling"></i> 97 <i className="bw-icon-calling"></i>
95 Get Help 98 Get Help
96 </button> 99 </div>
97 </div> 100 </div>
98 </div> 101 </div>
99 </div> 102 </div>
100 <div className="bw-booking-modal-content"> 103 <div className="bw-booking-modal-content">
101 <div className="bw-booking-modal-inner"> 104 <div className="bw-booking-modal-inner">
102 <Services /> 105 <Services />
103 </div> 106 </div>
104 </div> 107 </div>
105 </> 108 </>
106 case 'step-pick-time': 109 case 'step-pick-time':
107 return <> 110 return <>
108 <div className="bw-booking-modal-header"> 111 <div className="bw-booking-modal-header">
109 <div className="bw-row"> 112 <div className="bw-row">
110 <div className="bw-col-left"> 113 <div className="bw-col-left">
111 <i className="bw-icon-clock"></i> 114 <i className="bw-icon-clock"></i>
112 <span>Pick your time</span> 115 <span>Pick your time</span>
113 </div> 116 </div>
114 <div className="bw-col-right"> 117 <div className="bw-col-right">
115 <button typ="button" className="bw-btn bw-btn-primary"> 118 <div className="bw-btn bw-btn-primary">
116 <i className="bw-icon-calling"></i> 119 <i className="bw-icon-calling"></i>
117 Get Help 120 Get Help
118 </button> 121 </div>
119 </div> 122 </div>
120 </div> 123 </div>
121 </div> 124 </div>
122 <div className="bw-booking-modal-content"> 125 <div className="bw-booking-modal-content">
123 <div className="bw-booking-modal-inner"> 126 <div className="bw-booking-modal-inner">
124 <PickTime /> 127 <PickTime />
125 </div> 128 </div>
126 </div> 129 </div>
127 </> 130 </>
128 case 'step-pick-doctor': 131 case 'step-pick-doctor':
129 return <> 132 return <>
130 <div className="bw-booking-modal-header"> 133 <div className="bw-booking-modal-header">
131 <div className="bw-row"> 134 <div className="bw-row">
132 <div className="bw-col-left"> 135 <div className="bw-col-left">
133 <i className="bw-icon-health-doctor"></i> 136 <i className="bw-icon-health-doctor"></i>
134 <span>Confirm your doctor</span> 137 <span>Confirm your doctor</span>
135 </div> 138 </div>
136 <div className="bw-col-right"> 139 <div className="bw-col-right">
137 <button typ="button" className="bw-btn bw-btn-primary"> 140 <div className="bw-btn bw-btn-primary">
138 <i className="bw-icon-calling"></i> 141 <i className="bw-icon-calling"></i>
139 Get Help 142 Get Help
140 </button> 143 </div>
141 </div> 144 </div>
142 </div> 145 </div>
143 </div> 146 </div>
144 <div className="bw-booking-modal-content"> 147 <div className="bw-booking-modal-content">
145 <div className="bw-booking-modal-inner"> 148 <div className="bw-booking-modal-inner">
146 <PickDoctor /> 149 <PickDoctor />
147 </div> 150 </div>
148 </div> 151 </div>
149 </> 152 </>
150 case 'step-payment': 153 case 'step-payment':
151 return <> 154 return <>
152 <div className="bw-booking-modal-header"> 155 <div className="bw-booking-modal-header">
153 <div className="bw-row"> 156 <div className="bw-row">
154 <div className="bw-col-left"> 157 <div className="bw-col-left">
155 <i className="bw-icon-card"></i> 158 <i className="bw-icon-card"></i>
156 <span>Payment information</span> 159 <span>Payment information</span>
157 </div> 160 </div>
158 <div className="bw-col-right"> 161 <div className="bw-col-right">
159 <button typ="button" className="bw-btn bw-btn-primary"> 162 <div className="bw-btn bw-btn-primary">
160 <i className="bw-icon-calling"></i> 163 <i className="bw-icon-calling"></i>
161 Get Help 164 Get Help
162 </button> 165 </div>
163 </div> 166 </div>
164 </div> 167 </div>
165 </div> 168 </div>
166 <div className="bw-booking-modal-content"> 169 <div className="bw-booking-modal-content">
167 <div className="bw-booking-modal-inner"> 170 <div className="bw-booking-modal-inner">
168 <Payment /> 171 <Payment />
169 </div> 172 </div>
170 </div> 173 </div>
171 </> 174 </>
172 case 'step-profile': 175 case 'step-profile':
173 return <> 176 return <>
174 <Profile /> 177 <Profile />
175 </> 178 </>
176 case 'step-signup-update-profile': 179 case 'step-signup-update-profile':
177 return <> 180 return <>
178 <Profile signupStep={true} /> 181 <Profile signupStep={true} />
179 </> 182 </>
180 default: 183 default:
181 break; 184 break;
182 } 185 }
183 } 186 }
184 187
185 return (<> 188 return (<>
186 {process.env.NODE_ENV === 'development' ? 189 {process.env.NODE_ENV === 'development' ?
187 // <Portal id="bwBookingWizardID"> 190 // <Portal id="bwBookingWizardID">
188 <> 191 <>
189 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 192 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
190 {show && <div className="bw-booking-popup-wraper"> 193 {show && <div className="bw-booking-popup-wraper">
191 <div className="bw-booking-modal"> 194 <div className="bw-booking-modal">
192 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button> 195 <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></div>
193 <div className="bw-booking-modal-body"> 196 <div className="bw-booking-modal-body">
194 {renderStep(step)} 197 {renderStep(step)}
195 </div> 198 </div>
196 </div> 199 </div>
197 200
198 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 201 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
199 <BookingWizardStep 202 <BookingWizardStep
200 activeStep={step} 203 activeStep={step}
201 /> 204 />
202 </div> 205 </div>
203 </div>} 206 </div>}
204 207
205 </> 208 </>
206 // </Portal> 209 // </Portal>
207 :<root.div> 210 // :<root.div>
208 <style type="text/css"> 211 :<>
212 {/* <style type="text/css">
209 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/app.chunk.css";`} 213 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/app.chunk.css";`}
210 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`} 214 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`}
211 </style> 215 </style> */}
212 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 216 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
213 {show && <div className="bw-booking-popup-wraper"> 217 {show && <div className="bw-booking-popup-wraper">
214 <div className="bw-booking-modal"> 218 <div className="bw-booking-modal">
215 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button> 219 <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></div>
216 <div className="bw-booking-modal-body"> 220 <div className="bw-booking-modal-body">
217 {renderStep(step)} 221 {renderStep(step)}
218 </div> 222 </div>
219 </div> 223 </div>
220 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 224 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
221 <BookingWizardStep 225 <BookingWizardStep
222 activeStep={step} 226 activeStep={step}
223 /> 227 />
224 </div> 228 </div>
225 </div>} 229 </div>}
226 </root.div> 230 {/* </root.div> */}
231 </>
227 } 232 }
228 </> 233 </>
229 ) 234 )
230 } 235 }
231 export default BookingWizard 236 export default BookingWizard