Trong Nhan / Booking Wizard

Download as
Browse Code ยป

Commit 6da99304be09f6e3b4751398a7527f87456cae5d

Authored by Vu Bui
1 parent 676d0d5f83
Exists in master

update

Showing 1 changed file with 9 additions and 2 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 moment from 'moment'; 3 import moment from 'moment';
4 import _ from 'lodash'; 4 import _ from 'lodash';
5 // import { useCookies } from 'react-cookie' 5 // import { useCookies } from 'react-cookie'
6 import { getCookie } from '../../utils/utils'; 6 import { getCookie } from '../../utils/utils';
7 import Portal from '../../components/Portal' 7 import Portal from '../../components/Portal'
8 import BookingWizardStep from '../../components/BookingWizardStep' 8 import BookingWizardStep from '../../components/BookingWizardStep'
9 import LoginStep from '../../components/Steps/Login'; 9 import LoginStep from '../../components/Steps/Login';
10 import Services from '../../components/Steps/Services' 10 import Services from '../../components/Steps/Services'
11 import PickTime from '../../components/Steps/PickTime' 11 import PickTime from '../../components/Steps/PickTime'
12 import PickDoctor from '../../components/Steps/PickDoctor'; 12 import PickDoctor from '../../components/Steps/PickDoctor';
13 import Profile from '../../components/Steps/Profile'; 13 import Profile from '../../components/Steps/Profile';
14 import Payment from '../../components/Steps/Payment/indexV2'; 14 import Payment from '../../components/Steps/Payment/indexV2';
15 import PaymentStep from '../../components/Steps/PaymentStep' 15 import PaymentStep from '../../components/Steps/PaymentStep'
16 16
17 import './_styles.scss' 17 import './_styles.scss'
18 import { useCommonState, useCommonDispatch } from '../../store/common' 18 import { useCommonState, useCommonDispatch } from '../../store/common'
19 import {postRequestHelp, getRequestHelp, getAppointment} from './apis' 19 import {postRequestHelp, getRequestHelp, getAppointment} from './apis'
20 function BookingWizard(props) { 20 function BookingWizard(props) {
21 const [show, setShow] = useState(false) 21 const [show, setShow] = useState(false)
22 const [userProfile, setUserProfile] = useState(null) 22 const [userProfile, setUserProfile] = useState(null)
23 const [step, setStep] = useState('step-login') 23 const [step, setStep] = useState('step-login')
24 const [requestHelpID, setRequestHelpID] = useState(null) 24 const [requestHelpID, setRequestHelpID] = useState(null)
25 const [bookingObj, setBookingObj] = useState(null) 25 const [bookingObj, setBookingObj] = useState(null)
26 const commonStore = useCommonState() 26 const commonStore = useCommonState()
27 const dispatch = useCommonDispatch() 27 const dispatch = useCommonDispatch()
28 let bwaccessToken = getCookie( 'bwaccessToken' ) 28 let bwaccessToken = getCookie( 'bwaccessToken' )
29 // const [cookies, setCookie, removeCookie] = useCookies('bw-booking-wizard') 29 // const [cookies, setCookie, removeCookie] = useCookies('bw-booking-wizard')
30 // let { bwaccessToken } = cookies 30 // let { bwaccessToken } = cookies
31 31
32 useEffect(() => { 32 useEffect(() => {
33 if (bwaccessToken) { 33 if (bwaccessToken) {
34 if (!localStorage.getItem('activeStep') || localStorage.getItem('activeStep') === null) { 34 if (!localStorage.getItem('activeStep') || localStorage.getItem('activeStep') === null) {
35 dispatch({ type: 'BW_ACTIVE_STEP', payload: 'step-confirm-service' }) 35 dispatch({ type: 'BW_ACTIVE_STEP', payload: 'step-confirm-service' })
36 } else { 36 } else {
37 dispatch({ type: 'BW_ACTIVE_STEP', payload: localStorage.getItem('activeStep') }) 37 dispatch({ type: 'BW_ACTIVE_STEP', payload: localStorage.getItem('activeStep') })
38 } 38 }
39 if (localStorage.getItem('userProfile')) { 39 if (localStorage.getItem('userProfile')) {
40 let profile = JSON.parse(localStorage.getItem('userProfile')) 40 let profile = JSON.parse(localStorage.getItem('userProfile'))
41 dispatch({ type: 'USER_PROFILE', payload: profile }) 41 dispatch({ type: 'USER_PROFILE', payload: profile })
42 console.log("check access token", profile) 42 console.log("check access token", profile)
43 } 43 }
44 // set data Case obj 44 // set data Case obj
45 if (localStorage.getItem('caseObj')) { 45 if (localStorage.getItem('caseObj')) {
46 dispatch({ type: 'BW_CASE', payload: JSON.parse(localStorage.getItem('caseObj')) }) 46 dispatch({ type: 'BW_CASE', payload: JSON.parse(localStorage.getItem('caseObj')) })
47 } 47 }
48 if (localStorage.getItem('bwHasBooked')) { 48 if (localStorage.getItem('bwHasBooked')) {
49 dispatch({ type: 'BW_HAS_BOOKED', payload: true }) 49 dispatch({ type: 'BW_HAS_BOOKED', payload: true })
50 } 50 }
51 // get request id 51 // get request id
52 } 52 }
53 // First we get the viewport height and we multiple it by 1% to get a value for a vh unit 53 // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
54 let vh = window.innerHeight * 0.01; 54 let vh = window.innerHeight * 0.01;
55 // Then we set the value in the --vh custom property to the root of the document 55 // Then we set the value in the --vh custom property to the root of the document
56 document.documentElement.style.setProperty('--vh', `${vh}px`); 56 document.documentElement.style.setProperty('--vh', `${vh}px`);
57 57
58 }, []) 58 }, [])
59 useEffect(() => { 59 useEffect(() => {
60 console.log("commonStore.userProfile]",commonStore.userProfile) 60 console.log("commonStore.userProfile]",commonStore.userProfile)
61 if(commonStore.userProfile) { 61 if(commonStore.userProfile) {
62 GetAppoinent(commonStore.userProfile?.patient_id,bwaccessToken ) 62 GetAppoinent(commonStore.userProfile?.patient_id,bwaccessToken )
63 } 63 }
64 }, [commonStore.userProfile, bwaccessToken]) 64 }, [commonStore.userProfile, bwaccessToken])
65 65
66 useEffect(() => { 66 useEffect(() => {
67 if (bwaccessToken === null || !bwaccessToken) { 67 if (bwaccessToken === null || !bwaccessToken) {
68 console.log("a") 68 console.log("a")
69 localStorage.removeItem('bwSteps') // remove steps 69 localStorage.removeItem('bwSteps') // remove steps
70 localStorage.removeItem('bwDataBooking') // remove data booking 70 localStorage.removeItem('bwDataBooking') // remove data booking
71 localStorage.setItem('activeStep', 'step-login') // remove active step 71 localStorage.setItem('activeStep', 'step-login') // remove active step
72 localStorage.removeItem('bwHasBooked') 72 localStorage.removeItem('bwHasBooked')
73 localStorage.removeItem('marketing_group_id') 73 localStorage.removeItem('marketing_group_id')
74 localStorage.removeItem('bwSteps') 74 localStorage.removeItem('bwSteps')
75 localStorage.removeItem('caseObj') 75 localStorage.removeItem('caseObj')
76 localStorage.removeItem('bwDataBooking') 76 localStorage.removeItem('bwDataBooking')
77 localStorage.removeItem('userProfile') 77 localStorage.removeItem('userProfile')
78 } 78 }
79 }, [bwaccessToken]) 79 }, [bwaccessToken])
80 80
81 81
82 82
83 83
84 84
85 useEffect(() => { 85 useEffect(() => {
86 if (commonStore.activeStep !== null) { 86 if (commonStore.activeStep !== null) {
87 setStep(commonStore.activeStep) 87 setStep(commonStore.activeStep)
88 } 88 }
89 }, [commonStore.activeStep]) 89 }, [commonStore.activeStep])
90 90
91 useEffect(() => { 91 useEffect(() => {
92 setShow(commonStore?.showBookingModal) 92 setShow(commonStore?.showBookingModal)
93 }, [commonStore.showBookingModal]) 93 }, [commonStore.showBookingModal])
94 94
95 useEffect(() => { 95 useEffect(() => {
96 if (show) { 96 if (show) {
97 document.body.classList.add('bw-show-popup') 97 document.body.classList.add('bw-show-popup')
98 document.documentElement.classList.add('bw-show-popup') 98 document.documentElement.classList.add('bw-show-popup')
99 } else { 99 } else {
100 document.body.classList.remove('bw-show-popup') 100 document.body.classList.remove('bw-show-popup')
101 document.documentElement.classList.remove('bw-show-popup') 101 document.documentElement.classList.remove('bw-show-popup')
102 } 102 }
103 }, [show]) 103 }, [show])
104 104
105 105
106 // const GetHelpRequestID = async (token) => { 106 // const GetHelpRequestID = async (token) => {
107 // let res = await getRequestHelp (token) 107 // let res = await getRequestHelp (token)
108 // if(res && res.success) { 108 // if(res && res.success) {
109 // if(res?.data?.id) { 109 // if(res?.data?.id) {
110 // localStorage.setItem('request_help_id', res?.data?.id) 110 // localStorage.setItem('request_help_id', res?.data?.id)
111 // } 111 // }
112 112
113 // } 113 // }
114 // } 114 // }
115 const GetAppoinent = async (patient_id, token) => { 115 const GetAppoinent = async (patient_id, token) => {
116 let res = await getAppointment(patient_id,token); 116 let res = await getAppointment(patient_id,token);
117 if (res && res.success) { 117 if (res && res.success) {
118 let today = moment(new Date()).format('YYYY-MM-DD') 118 let today = moment(new Date()).format('YYYY-MM-DD')
119 let todayHour = moment(new Date()).format('YYYY-MM-DD HH:mm') 119 let todayHour = moment(new Date()).format('YYYY-MM-DD HH:mm')
120 let arr2 = [] 120 let arr2 = []
121 let arr3 = [] 121 let arr3 = []
122 if (res.data) { 122 if (res.data) {
123 console.log("data boooking", res.data) 123 console.log("data boooking", res.data)
124 res.data.forEach(el => { 124 res.data.forEach(el => {
125 if (el.date_time_start && el.date_time_start!=="") { 125 if (el.date_time_start && el.date_time_start!=="") {
126 let datetime = moment.utc(el.date_time_start).local().format('YYYY-MM-DD HH:mm') 126 let datetime = moment.utc(el.date_time_start).local().format('YYYY-MM-DD HH:mm')
127 if (moment(el.date).isAfter(today) || moment(el.date).isSame(today, 'day') && datetime && 127 if (moment(el.date).isAfter(today) || moment(el.date).isSame(today, 'day') && datetime &&
128 moment(datetime).isAfter(todayHour, 'minute')) { 128 moment(datetime).isAfter(todayHour, 'minute')) {
129 el.editable = true 129 el.editable = true
130 arr2.push(el) 130 arr2.push(el)
131 } 131 }
132 132
133 } 133 }
134 }); 134 });
135 } 135 }
136 let fnArr = _.union(arr2, arr3) 136 let fnArr = _.union(arr2, arr3)
137 console.log("fnArr", fnArr) 137 console.log("fnArr", fnArr)
138 if(fnArr.length>0) { 138 if(fnArr.length>0) {
139 setBookingObj(fnArr[0]) 139 setBookingObj(fnArr[0])
140 localStorage.setItem('booking_id',fnArr[0].appointment) 140 localStorage.setItem('booking_id',fnArr[0].appointment)
141 dispatch({ type: 'BOOKING_DATA', payload: JSON.stringify(fnArr[0]) }) 141 dispatch({ type: 'BOOKING_DATA', payload: JSON.stringify(fnArr[0]) })
142 dispatch({ type: 'BW_HAS_BOOKED', payload: true }) 142 dispatch({ type: 'BW_HAS_BOOKED', payload: true })
143 } 143 }
144 } 144 }
145 } 145 }
146 146
147 const handleCloseModal = () => { 147 const handleCloseModal = () => {
148 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false }) 148 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false })
149 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false }) 149 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false })
150 // if (!localStorage.getItem('bwHasBooked') && localStorage.getItem('activeStep') !== "step-login" || 150 // if (!localStorage.getItem('bwHasBooked') && localStorage.getItem('activeStep') !== "step-login" ||
151 // localStorage.getItem('bwHasBooked') === false && localStorage.getItem('activeStep') !== "step-login") { 151 // localStorage.getItem('bwHasBooked') === false && localStorage.getItem('activeStep') !== "step-login") {
152 // dispatch({ type: 'BW_SHOW_MODAL_IMCOMPLETE', payload: true }) 152 // dispatch({ type: 'BW_SHOW_MODAL_IMCOMPLETE', payload: true })
153 // } 153 // }
154 if (commonStore?.hasBooked === false && localStorage.getItem('activeStep') !== "step-login" ) { 154 if (commonStore?.hasBooked === false && localStorage.getItem('activeStep') !== "step-login" ) {
155 dispatch({ type: 'BW_SHOW_MODAL_IMCOMPLETE', payload: true }) 155 dispatch({ type: 'BW_SHOW_MODAL_IMCOMPLETE', payload: true })
156 } 156 }
157 } 157 }
158 158
159 const handleRequestHelp = async(type, step) => { 159 const handleRequestHelp = async(type, step) => {
160 let dataPram ={ 160 let dataPram ={
161 "metadata" : { 161 "metadata" : {
162 "type": type, 162 "type": type,
163 "process_booking": `${step}/4`, 163 "process_booking": `${step}/4`,
164 "process_profile": commonStore?.userProfile?.patient_case?.patient?100:0, // has patient profile 164 "process_profile": commonStore?.userProfile?.patient_case?.patient?100:0, // has patient profile
165 "marketing_group_id": localStorage.getItem('marketing_group_id'), 165 "marketing_group_id": localStorage.getItem('marketing_group_id'),
166 } 166 }
167 } 167 }
168 console.log("userProfile",commonStore?.userProfile) 168 console.log("userProfile",commonStore?.userProfile)
169 if(commonStore?.userProfile?.patient_case?.id) { 169 if(commonStore?.userProfile?.patient_case?.id) {
170 dataPram.case_id = commonStore?.userProfile?.patient_case?.id 170 dataPram.case_id = commonStore?.userProfile?.patient_case?.id
171 } 171 }
172 if(localStorage.getItem('request_help_id')) { 172 if(localStorage.getItem('request_help_id')) {
173 dataPram.request_id = localStorage.getItem('request_help_id') 173 dataPram.request_id = localStorage.getItem('request_help_id')
174 } 174 }
175 console.log("bwaccessToken",bwaccessToken) 175 console.log("bwaccessToken",bwaccessToken)
176 let res = await postRequestHelp(dataPram, bwaccessToken) 176 let res = await postRequestHelp(dataPram, bwaccessToken)
177 if(res && res.success) { 177 if(res && res.success) {
178 dispatch({type: 'BW_MODAL_REQUEST_HELP', payload:true}) 178 dispatch({type: 'BW_MODAL_REQUEST_HELP', payload:true})
179 setRequestHelpID(res?.data?.id) 179 setRequestHelpID(res?.data?.id)
180 localStorage.setItem('request_help_id',res?.data?.id) 180 localStorage.setItem('request_help_id',res?.data?.id)
181 dispatch({type:'WB_REQUEST_HELP_ID', payload:res?.data?.id}) 181 dispatch({type:'WB_REQUEST_HELP_ID', payload:res?.data?.id})
182 if(commonStore?.userProfile?.patient_case === null) {
183 dispatch({ type: 'WB_GROUP_CHAT', payload: res?.data?.group_chat})
184 localStorage.setItem('groupChat', JSON.stringify(res?.data?.group_chat))
185 //close booking and open chat
186 // dispatch({type:'BW_SHOW_BOOKING_MODAL', payload: false})
187 // dispatch({type:'BW_SHOW_CHAT', payload: true})
188 }
182 } 189 }
183 190
184 } 191 }
185 192
186 193
187 const renderStep = (step) => { 194 const renderStep = (step) => {
188 switch (step) { 195 switch (step) {
189 case 'step-login': 196 case 'step-login':
190 return <div className="bw-booking-modal-content"> 197 return <div className="bw-booking-modal-content">
191 <div className="bw-booking-modal-inner"> 198 <div className="bw-booking-modal-inner">
192 <LoginStep /> 199 <LoginStep />
193 </div> 200 </div>
194 </div> 201 </div>
195 case 'step-confirm-service': 202 case 'step-confirm-service':
196 return <> 203 return <>
197 <div className="bw-booking-modal-header"> 204 <div className="bw-booking-modal-header">
198 <div className="bw-row"> 205 <div className="bw-row">
199 <div className="bw-col-left"> 206 <div className="bw-col-left">
200 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>} 207 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>}
201 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>} 208 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>}
202 {commonStore?.hasBooked === true ? <span>YOUR SERVICE</span> : <span>Select your services</span>} 209 {commonStore?.hasBooked === true ? <span>YOUR SERVICE</span> : <span>Select your services</span>}
203 </div> 210 </div>
204 <div className="bw-col-right"> 211 <div className="bw-col-right">
205 <div className="bw-btn bw-btn-primary"> 212 {/* <div className="bw-btn bw-btn-primary">
206 <i className="bw-icon-calling"></i> 213 <i className="bw-icon-calling"></i>
207 Get Help 214 Get Help
208 </div> 215 </div> */}
209 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 1)}> 216 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 1)}>
210 <i className="bw-icon-Call-Center"></i> 217 <i className="bw-icon-Call-Center"></i>
211 Request Help 218 Request Help
212 </div> 219 </div>
213 </div> 220 </div>
214 </div> 221 </div>
215 </div> 222 </div>
216 <div className="bw-booking-modal-content"> 223 <div className="bw-booking-modal-content">
217 <div className="bw-booking-modal-inner"> 224 <div className="bw-booking-modal-inner">
218 <Services 225 <Services
219 userProfile={commonStore?.userProfile} 226 userProfile={commonStore?.userProfile}
220 hasBooked={commonStore?.hasBooked} 227 hasBooked={commonStore?.hasBooked}
221 /> 228 />
222 </div> 229 </div>
223 </div> 230 </div>
224 </> 231 </>
225 case 'step-pick-time': 232 case 'step-pick-time':
226 return <> 233 return <>
227 <div className="bw-booking-modal-header"> 234 <div className="bw-booking-modal-header">
228 <div className="bw-row"> 235 <div className="bw-row">
229 <div className="bw-col-left"> 236 <div className="bw-col-left">
230 <i className="bw-icon-clock"></i> 237 <i className="bw-icon-clock"></i>
231 {commonStore?.hasBooked === true ? <span>RESCHEDULE APPOINTMENT</span> : <span>MAKE APPOINTMENT</span>} 238 {commonStore?.hasBooked === true ? <span>RESCHEDULE APPOINTMENT</span> : <span>MAKE APPOINTMENT</span>}
232 </div> 239 </div>
233 {/* <div className="bw-col-right" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 4)}> 240 {/* <div className="bw-col-right" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 4)}>
234 <div className="bw-btn bw-btn-primary"> 241 <div className="bw-btn bw-btn-primary">
235 <i className="bw-icon-calling"></i> 242 <i className="bw-icon-calling"></i>
236 Get Help 243 Get Help
237 </div> 244 </div>
238 </div> */} 245 </div> */}
239 {/* <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 1)}> 246 {/* <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 1)}>
240 <i className="bw-icon-Call-Center"></i> 247 <i className="bw-icon-Call-Center"></i>
241 Request Help 248 Request Help
242 </div> */} 249 </div> */}
243 </div> 250 </div>
244 </div> 251 </div>
245 <div className="bw-booking-modal-content"> 252 <div className="bw-booking-modal-content">
246 <div className="bw-booking-modal-inner"> 253 <div className="bw-booking-modal-inner">
247 <PickTime 254 <PickTime
248 userProfile={commonStore?.userProfile} /> 255 userProfile={commonStore?.userProfile} />
249 </div> 256 </div>
250 </div> 257 </div>
251 </> 258 </>
252 case 'step-pick-doctor': 259 case 'step-pick-doctor':
253 return <> 260 return <>
254 <div className="bw-booking-modal-header"> 261 <div className="bw-booking-modal-header">
255 <div className="bw-row"> 262 <div className="bw-row">
256 <div className="bw-col-left"> 263 <div className="bw-col-left">
257 <i className="bw-icon-health-doctor"></i> 264 <i className="bw-icon-health-doctor"></i>
258 <span>Confirm your doctor</span> 265 <span>Confirm your doctor</span>
259 </div> 266 </div>
260 <div className="bw-col-right"> 267 <div className="bw-col-right">
261 <div className="bw-btn bw-btn-primary"> 268 <div className="bw-btn bw-btn-primary">
262 <i className="bw-icon-calling"></i> 269 <i className="bw-icon-calling"></i>
263 Get Help 270 Get Help
264 </div> 271 </div>
265 </div> 272 </div>
266 </div> 273 </div>
267 </div> 274 </div>
268 <div className="bw-booking-modal-content"> 275 <div className="bw-booking-modal-content">
269 <div className="bw-booking-modal-inner"> 276 <div className="bw-booking-modal-inner">
270 <PickDoctor /> 277 <PickDoctor />
271 </div> 278 </div>
272 </div> 279 </div>
273 </> 280 </>
274 case 'step-payment': 281 case 'step-payment':
275 return <> 282 return <>
276 <div className="bw-booking-modal-header"> 283 <div className="bw-booking-modal-header">
277 <div className="bw-row"> 284 <div className="bw-row">
278 <div className="bw-col-left"> 285 <div className="bw-col-left">
279 <i className="bw-icon-card"></i> 286 <i className="bw-icon-card"></i>
280 <span>Payment information</span> 287 <span>Payment information</span>
281 </div> 288 </div>
282 <div className="bw-col-right"> 289 <div className="bw-col-right">
283 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 3)}> 290 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 3)}>
284 <i className="bw-icon-Call-Center"></i> 291 <i className="bw-icon-Call-Center"></i>
285 Request Help 292 Request Help
286 </div> 293 </div>
287 </div> 294 </div>
288 </div> 295 </div>
289 </div> 296 </div>
290 <div className="bw-booking-modal-content"> 297 <div className="bw-booking-modal-content">
291 <div className="bw-booking-modal-inner"> 298 <div className="bw-booking-modal-inner">
292 {/* <Payment 299 {/* <Payment
293 /> */} 300 /> */}
294 <PaymentStep/> 301 <PaymentStep/>
295 </div> 302 </div>
296 </div> 303 </div>
297 </> 304 </>
298 case 'step-profile': 305 case 'step-profile':
299 return <> 306 return <>
300 <Profile 307 <Profile
301 loadprofile={false} 308 loadprofile={false}
302 profile={userProfile} /> 309 profile={userProfile} />
303 </> 310 </>
304 case 'step-signup-update-profile': 311 case 'step-signup-update-profile':
305 return <> 312 return <>
306 <Profile signupStep={true} /> 313 <Profile signupStep={true} />
307 </> 314 </>
308 default: 315 default:
309 break; 316 break;
310 } 317 }
311 } 318 }
312 319
313 return (<> 320 return (<>
314 {process.env.NODE_ENV === 'development' ? 321 {process.env.NODE_ENV === 'development' ?
315 // <Portal id="bwBookingWizardID"> 322 // <Portal id="bwBookingWizardID">
316 <> 323 <>
317 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 324 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
318 {show && <div className={`bw-booking-popup-wraper ${step} ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}> 325 {show && <div className={`bw-booking-popup-wraper ${step} ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}>
319 <div className="bw-booking-modal"> 326 <div className="bw-booking-modal">
320 <div className="bw-btn-close" onClick={() => handleCloseModal()}> 327 <div className="bw-btn-close" onClick={() => handleCloseModal()}>
321 <i className="bw-icon-close"></i> 328 <i className="bw-icon-close"></i>
322 <span>Close</span> 329 <span>Close</span>
323 </div> 330 </div>
324 <div className="bw-booking-modal-body"> 331 <div className="bw-booking-modal-body">
325 {renderStep(step)} 332 {renderStep(step)}
326 </div> 333 </div>
327 </div> 334 </div>
328 335
329 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 336 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
330 <BookingWizardStep 337 <BookingWizardStep
331 activeStep={step} 338 activeStep={step}
332 /> 339 />
333 </div> 340 </div>
334 </div>} 341 </div>}
335 342
336 </> 343 </>
337 // </Portal> 344 // </Portal>
338 // :<root.div> 345 // :<root.div>
339 : <> 346 : <>
340 {/* <style type="text/css"> 347 {/* <style type="text/css">
341 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/app.chunk.css";`} 348 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/app.chunk.css";`}
342 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/main-app.chunk.css";`} 349 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/main-app.chunk.css";`}
343 {window?.GDClinic?.type ==='mm'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/mm-styles.css";`:'' } 350 {window?.GDClinic?.type ==='mm'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/mm-styles.css";`:'' }
344 {window?.GDClinic?.type ==='sc'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/sc-styles.css";`:'' } 351 {window?.GDClinic?.type ==='sc'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/sc-styles.css";`:'' }
345 </style> */} 352 </style> */}
346 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 353 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
347 {show && <div className={`bw-booking-popup-wraper ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}> 354 {show && <div className={`bw-booking-popup-wraper ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}>
348 <div className="bw-booking-modal"> 355 <div className="bw-booking-modal">
349 <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i> <span>Close</span></div> 356 <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i> <span>Close</span></div>
350 <div className="bw-booking-modal-body"> 357 <div className="bw-booking-modal-body">
351 {renderStep(step)} 358 {renderStep(step)}
352 </div> 359 </div>
353 </div> 360 </div>
354 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 361 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
355 <BookingWizardStep 362 <BookingWizardStep
356 activeStep={step} 363 activeStep={step}
357 /> 364 />
358 </div> 365 </div>
359 </div>} 366 </div>}
360 {/* </root.div> */} 367 {/* </root.div> */}
361 </> 368 </>
362 } 369 }
363 </> 370 </>
364 ) 371 )
365 } 372 }
366 export default BookingWizard 373 export default BookingWizard