Commit e5e3d9b319b05b462b0af622bc9eeb8442da7a9b

Authored by Vu Bui
1 parent 140cc372b5
Exists in master

update

Showing 1 changed file with 1 additions and 0 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 42
43 }, []) 43 }, [])
44 useEffect(() => { 44 useEffect(() => {
45 45
46 }, [commonStore.showBookingModal]) 46 }, [commonStore.showBookingModal])
47 47
48 useEffect(() => { 48 useEffect(() => {
49 if (accessToken === null) { 49 if (accessToken === null) {
50 localStorage.removeItem('bwSteps') // remove steps 50 localStorage.removeItem('bwSteps') // remove steps
51 localStorage.removeItem('bwDataBooking') // remove data booking 51 localStorage.removeItem('bwDataBooking') // remove data booking
52 localStorage.setItem('activeStep', 'step-login') // remove active step 52 localStorage.setItem('activeStep', 'step-login') // remove active step
53 } 53 }
54 }, [accessToken]) 54 }, [accessToken])
55 55
56 56
57 57
58 useEffect(() => { 58 useEffect(() => {
59 if (commonStore.activeStep !== null) { 59 if (commonStore.activeStep !== null) {
60 setStep(commonStore.activeStep) 60 setStep(commonStore.activeStep)
61 } 61 }
62 }, [commonStore.activeStep]) 62 }, [commonStore.activeStep])
63 63
64 useEffect(() => { 64 useEffect(() => {
65 65
66 setShow(commonStore?.showBookingModal) 66 setShow(commonStore?.showBookingModal)
67 }, [commonStore.showBookingModal]) 67 }, [commonStore.showBookingModal])
68 68
69 const handleCloseModal = () => { 69 const handleCloseModal = () => {
70 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false }) 70 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false })
71 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false }) 71 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false })
72 } 72 }
73 73
74 74
75 const renderStep = (step) => { 75 const renderStep = (step) => {
76 switch (step) { 76 switch (step) {
77 case 'step-login': 77 case 'step-login':
78 return <div className="bw-booking-modal-content"> 78 return <div className="bw-booking-modal-content">
79 <div className="bw-booking-modal-inner"> 79 <div className="bw-booking-modal-inner">
80 <LoginStep /> 80 <LoginStep />
81 </div> 81 </div>
82 </div> 82 </div>
83 case 'step-confirm-service': 83 case 'step-confirm-service':
84 return <> 84 return <>
85 <div className="bw-booking-modal-header"> 85 <div className="bw-booking-modal-header">
86 <div className="bw-row"> 86 <div className="bw-row">
87 <div className="bw-col-left"> 87 <div className="bw-col-left">
88 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>} 88 {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>} 89 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>}
90 <span>Confirm your services</span> 90 <span>Confirm your services</span>
91 </div> 91 </div>
92 <div className="bw-col-right"> 92 <div className="bw-col-right">
93 <button typ="button" className="bw-btn bw-btn-primary"> 93 <button typ="button" className="bw-btn bw-btn-primary">
94 <i className="bw-icon-calling"></i> 94 <i className="bw-icon-calling"></i>
95 Get Help 95 Get Help
96 </button> 96 </button>
97 </div> 97 </div>
98 </div> 98 </div>
99 </div> 99 </div>
100 <div className="bw-booking-modal-content"> 100 <div className="bw-booking-modal-content">
101 <div className="bw-booking-modal-inner"> 101 <div className="bw-booking-modal-inner">
102 <Services /> 102 <Services />
103 </div> 103 </div>
104 </div> 104 </div>
105 </> 105 </>
106 case 'step-pick-time': 106 case 'step-pick-time':
107 return <> 107 return <>
108 <div className="bw-booking-modal-header"> 108 <div className="bw-booking-modal-header">
109 <div className="bw-row"> 109 <div className="bw-row">
110 <div className="bw-col-left"> 110 <div className="bw-col-left">
111 <i className="bw-icon-clock"></i> 111 <i className="bw-icon-clock"></i>
112 <span>Pick your time</span> 112 <span>Pick your time</span>
113 </div> 113 </div>
114 <div className="bw-col-right"> 114 <div className="bw-col-right">
115 <button typ="button" className="bw-btn bw-btn-primary"> 115 <button typ="button" className="bw-btn bw-btn-primary">
116 <i className="bw-icon-calling"></i> 116 <i className="bw-icon-calling"></i>
117 Get Help 117 Get Help
118 </button> 118 </button>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 <div className="bw-booking-modal-content"> 122 <div className="bw-booking-modal-content">
123 <div className="bw-booking-modal-inner"> 123 <div className="bw-booking-modal-inner">
124 <PickTime /> 124 <PickTime />
125 </div> 125 </div>
126 </div> 126 </div>
127 </> 127 </>
128 case 'step-pick-doctor': 128 case 'step-pick-doctor':
129 return <> 129 return <>
130 <div className="bw-booking-modal-header"> 130 <div className="bw-booking-modal-header">
131 <div className="bw-row"> 131 <div className="bw-row">
132 <div className="bw-col-left"> 132 <div className="bw-col-left">
133 <i className="bw-icon-health-doctor"></i> 133 <i className="bw-icon-health-doctor"></i>
134 <span>Confirm your doctor</span> 134 <span>Confirm your doctor</span>
135 </div> 135 </div>
136 <div className="bw-col-right"> 136 <div className="bw-col-right">
137 <button typ="button" className="bw-btn bw-btn-primary"> 137 <button typ="button" className="bw-btn bw-btn-primary">
138 <i className="bw-icon-calling"></i> 138 <i className="bw-icon-calling"></i>
139 Get Help 139 Get Help
140 </button> 140 </button>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 <div className="bw-booking-modal-content"> 144 <div className="bw-booking-modal-content">
145 <div className="bw-booking-modal-inner"> 145 <div className="bw-booking-modal-inner">
146 <PickDoctor /> 146 <PickDoctor />
147 </div> 147 </div>
148 </div> 148 </div>
149 </> 149 </>
150 case 'step-payment': 150 case 'step-payment':
151 return <> 151 return <>
152 <div className="bw-booking-modal-header"> 152 <div className="bw-booking-modal-header">
153 <div className="bw-row"> 153 <div className="bw-row">
154 <div className="bw-col-left"> 154 <div className="bw-col-left">
155 <i className="bw-icon-card"></i> 155 <i className="bw-icon-card"></i>
156 <span>Payment information</span> 156 <span>Payment information</span>
157 </div> 157 </div>
158 <div className="bw-col-right"> 158 <div className="bw-col-right">
159 <button typ="button" className="bw-btn bw-btn-primary"> 159 <button typ="button" className="bw-btn bw-btn-primary">
160 <i className="bw-icon-calling"></i> 160 <i className="bw-icon-calling"></i>
161 Get Help 161 Get Help
162 </button> 162 </button>
163 </div> 163 </div>
164 </div> 164 </div>
165 </div> 165 </div>
166 <div className="bw-booking-modal-content"> 166 <div className="bw-booking-modal-content">
167 <div className="bw-booking-modal-inner"> 167 <div className="bw-booking-modal-inner">
168 <Payment /> 168 <Payment />
169 </div> 169 </div>
170 </div> 170 </div>
171 </> 171 </>
172 case 'step-profile': 172 case 'step-profile':
173 return <> 173 return <>
174 <Profile /> 174 <Profile />
175 </> 175 </>
176 case 'step-signup-update-profile': 176 case 'step-signup-update-profile':
177 return <> 177 return <>
178 <Profile signupStep={true} /> 178 <Profile signupStep={true} />
179 </> 179 </>
180 default: 180 default:
181 break; 181 break;
182 } 182 }
183 } 183 }
184 184
185 return (<> 185 return (<>
186 {process.env.NODE_ENV === 'development' ? 186 {process.env.NODE_ENV === 'development' ?
187 // <Portal id="bwBookingWizardID"> 187 // <Portal id="bwBookingWizardID">
188 <> 188 <>
189 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 189 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
190 {show && <div className="bw-booking-popup-wraper"> 190 {show && <div className="bw-booking-popup-wraper">
191 <div className="bw-booking-modal"> 191 <div className="bw-booking-modal">
192 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button> 192 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
193 <div className="bw-booking-modal-body"> 193 <div className="bw-booking-modal-body">
194 {renderStep(step)} 194 {renderStep(step)}
195 </div> 195 </div>
196 </div> 196 </div>
197 197
198 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 198 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
199 <BookingWizardStep 199 <BookingWizardStep
200 activeStep={step} 200 activeStep={step}
201 /> 201 />
202 </div> 202 </div>
203 </div>} 203 </div>}
204 204
205 </> 205 </>
206 // </Portal> 206 // </Portal>
207 :<root.div> 207 :<root.div>
208 <style type="text/css"> 208 <style type="text/css">
209 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/app.chunk.css";`}
209 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`} 210 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`}
210 </style> 211 </style>
211 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 212 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
212 {show && <div className="bw-booking-popup-wraper"> 213 {show && <div className="bw-booking-popup-wraper">
213 <div className="bw-booking-modal"> 214 <div className="bw-booking-modal">
214 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button> 215 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
215 <div className="bw-booking-modal-body"> 216 <div className="bw-booking-modal-body">
216 {renderStep(step)} 217 {renderStep(step)}
217 </div> 218 </div>
218 </div> 219 </div>
219 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 220 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
220 <BookingWizardStep 221 <BookingWizardStep
221 activeStep={step} 222 activeStep={step}
222 /> 223 />
223 </div> 224 </div>
224 </div>} 225 </div>}
225 </root.div> 226 </root.div>
226 } 227 }
227 </> 228 </>
228 ) 229 )
229 } 230 }
230 export default BookingWizard 231 export default BookingWizard