Trong Nhan / Booking Wizard

Download as
Browse Code ยป

Commit 7476b87f935cd55793cff98b8904c7394d7b4d90

Authored by Vu Bui
1 parent 7253e60268
Exists in master

update

Showing 1 changed file with 6 additions and 3 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 "patient_id": commonStore?.userProfile?.patient_id, // has patient id 165 "patient_id": commonStore?.userProfile?.patient_id, // has patient id
166 "marketing_group_id": localStorage.getItem('marketing_group_id'), 166 "marketing_group_id": localStorage.getItem('marketing_group_id'),
167 } 167 }
168 } 168 }
169 console.log("userProfile",commonStore?.userProfile) 169 console.log("userProfile",commonStore?.userProfile)
170 if(commonStore?.userProfile?.patient_case?.id) { 170 if(commonStore?.userProfile?.patient_case?.id) {
171 dataPram.case_id = commonStore?.userProfile?.patient_case?.id 171 dataPram.case_id = commonStore?.userProfile?.patient_case?.id
172 } 172 }
173 if(localStorage.getItem('request_help_id')) { 173 if(localStorage.getItem('request_help_id')) {
174 dataPram.request_id = localStorage.getItem('request_help_id') 174 dataPram.request_id = localStorage.getItem('request_help_id')
175 } 175 }
176 console.log("bwaccessToken",bwaccessToken) 176 console.log("bwaccessToken",bwaccessToken)
177 let res = await postRequestHelp(dataPram, bwaccessToken) 177 let res = await postRequestHelp(dataPram, bwaccessToken)
178 if(res && res.success) { 178 if(res && res.success) {
179 dispatch({type: 'BW_MODAL_REQUEST_HELP', payload:true}) 179 dispatch({type: 'BW_MODAL_REQUEST_HELP', payload:true})
180 setRequestHelpID(res?.data?.id) 180 setRequestHelpID(res?.data?.id)
181 localStorage.setItem('request_help_id',res?.data?.id) 181 localStorage.setItem('request_help_id',res?.data?.id)
182 dispatch({type:'WB_REQUEST_HELP_ID', payload:res?.data?.id}) 182 dispatch({type:'WB_REQUEST_HELP_ID', payload:res?.data?.id})
183 if(commonStore?.userProfile?.patient_case === null) { 183 if(commonStore?.userProfile?.patient_case === null) {
184 dispatch({ type: 'WB_GROUP_CHAT', payload: res?.data?.group_chat}) 184 dispatch({ type: 'WB_GROUP_CHAT', payload: res?.data?.group_chat})
185 localStorage.setItem('groupChat', JSON.stringify(res?.data?.group_chat)) 185 localStorage.setItem('groupChat', JSON.stringify(res?.data?.group_chat))
186 //close booking and open chat 186 //close booking and open chat
187 // dispatch({type:'BW_SHOW_BOOKING_MODAL', payload: false}) 187 // dispatch({type:'BW_SHOW_BOOKING_MODAL', payload: false})
188 // dispatch({type:'BW_SHOW_CHAT', payload: true}) 188 // dispatch({type:'BW_SHOW_CHAT', payload: true})
189 } 189 }
190 } 190 }
191 191
192 } 192 }
193 193
194 194
195 const renderStep = (step) => { 195 const renderStep = (step) => {
196 switch (step) { 196 switch (step) {
197 case 'step-login': 197 case 'step-login':
198 return <div className="bw-booking-modal-content"> 198 return <div className="bw-booking-modal-content">
199 <div className="bw-booking-modal-inner"> 199 <div className="bw-booking-modal-inner">
200 <LoginStep /> 200 <LoginStep />
201 </div> 201 </div>
202 </div> 202 </div>
203 case 'step-confirm-service': 203 case 'step-confirm-service':
204 return <> 204 return <>
205 <div className="bw-booking-modal-header"> 205 <div className="bw-booking-modal-header">
206 <div className="bw-row"> 206 <div className="bw-row">
207 <div className="bw-col-left"> 207 <div className="bw-col-left">
208 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>} 208 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>}
209 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>} 209 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>}
210 {commonStore?.hasBooked === true ? <span>YOUR SERVICE</span> : <span>Select your services</span>} 210 {commonStore?.hasBooked === true ? <span>YOUR SERVICE</span> : <span>Select your services</span>}
211 </div> 211 </div>
212 <div className="bw-col-right"> 212 <div className="bw-col-right">
213 {/* <div className="bw-btn bw-btn-primary"> 213 {/* <div className="bw-btn bw-btn-primary">
214 <i className="bw-icon-calling"></i> 214 <i className="bw-icon-calling"></i>
215 Get Help 215 Get Help
216 </div> */} 216 </div> */}
217 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 1)}> 217 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 1)}>
218 <i className="bw-icon-Call-Center"></i> 218 <i className="bw-icon-Call-Center"></i>
219 Request Help 219 Request Help
220 </div> 220 </div>
221 </div> 221 </div>
222 </div> 222 </div>
223 </div> 223 </div>
224 <div className="bw-booking-modal-content"> 224 <div className="bw-booking-modal-content">
225 <div className="bw-booking-modal-inner"> 225 <div className="bw-booking-modal-inner">
226 <Services 226 <Services
227 userProfile={commonStore?.userProfile} 227 userProfile={commonStore?.userProfile}
228 hasBooked={commonStore?.hasBooked} 228 hasBooked={commonStore?.hasBooked}
229 /> 229 />
230 </div> 230 </div>
231 </div> 231 </div>
232 </> 232 </>
233 case 'step-pick-time': 233 case 'step-pick-time':
234 return <> 234 return <>
235 <div className="bw-booking-modal-header"> 235 <div className="bw-booking-modal-header">
236 <div className="bw-row"> 236 <div className="bw-row">
237 <div className="bw-col-left"> 237 <div className="bw-col-left">
238 <i className="bw-icon-clock"></i> 238 <i className="bw-icon-clock"></i>
239 {commonStore?.hasBooked === true ? <span>RESCHEDULE APPOINTMENT</span> : <span>MAKE APPOINTMENT</span>} 239 {commonStore?.hasBooked === true ? <span>RESCHEDULE APPOINTMENT</span> : <span>MAKE APPOINTMENT</span>}
240 </div> 240 </div>
241 {/* <div className="bw-col-right" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 4)}> 241 {/* <div className="bw-col-right" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 4)}>
242 <div className="bw-btn bw-btn-primary"> 242 <div className="bw-btn bw-btn-primary">
243 <i className="bw-icon-calling"></i> 243 <i className="bw-icon-calling"></i>
244 Get Help 244 Get Help
245 </div> 245 </div>
246 </div> */} 246 </div> */}
247 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 4)}> 247 <div className="bw-col-right">
248 <i className="bw-icon-Call-Center"></i> 248 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 4)}>
249 Request Help 249 <i className="bw-icon-Call-Center"></i>
250 Request Help
251 </div>
250 </div> 252 </div>
253
251 </div> 254 </div>
252 </div> 255 </div>
253 <div className="bw-booking-modal-content"> 256 <div className="bw-booking-modal-content">
254 <div className="bw-booking-modal-inner"> 257 <div className="bw-booking-modal-inner">
255 <PickTime 258 <PickTime
256 userProfile={commonStore?.userProfile} /> 259 userProfile={commonStore?.userProfile} />
257 </div> 260 </div>
258 </div> 261 </div>
259 </> 262 </>
260 case 'step-pick-doctor': 263 case 'step-pick-doctor':
261 return <> 264 return <>
262 <div className="bw-booking-modal-header"> 265 <div className="bw-booking-modal-header">
263 <div className="bw-row"> 266 <div className="bw-row">
264 <div className="bw-col-left"> 267 <div className="bw-col-left">
265 <i className="bw-icon-health-doctor"></i> 268 <i className="bw-icon-health-doctor"></i>
266 <span>Confirm your doctor</span> 269 <span>Confirm your doctor</span>
267 </div> 270 </div>
268 <div className="bw-col-right"> 271 <div className="bw-col-right">
269 <div className="bw-btn bw-btn-primary"> 272 <div className="bw-btn bw-btn-primary">
270 <i className="bw-icon-calling"></i> 273 <i className="bw-icon-calling"></i>
271 Get Help 274 Get Help
272 </div> 275 </div>
273 </div> 276 </div>
274 </div> 277 </div>
275 </div> 278 </div>
276 <div className="bw-booking-modal-content"> 279 <div className="bw-booking-modal-content">
277 <div className="bw-booking-modal-inner"> 280 <div className="bw-booking-modal-inner">
278 <PickDoctor /> 281 <PickDoctor />
279 </div> 282 </div>
280 </div> 283 </div>
281 </> 284 </>
282 case 'step-payment': 285 case 'step-payment':
283 return <> 286 return <>
284 <div className="bw-booking-modal-header"> 287 <div className="bw-booking-modal-header">
285 <div className="bw-row"> 288 <div className="bw-row">
286 <div className="bw-col-left"> 289 <div className="bw-col-left">
287 <i className="bw-icon-card"></i> 290 <i className="bw-icon-card"></i>
288 <span>Payment information</span> 291 <span>Payment information</span>
289 </div> 292 </div>
290 <div className="bw-col-right"> 293 <div className="bw-col-right">
291 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 3)}> 294 <div className="bw-btn bw-btn-primary bw-ml-15" onClick={()=> handleRequestHelp('INCOMPLETE_BOOKING', 3)}>
292 <i className="bw-icon-Call-Center"></i> 295 <i className="bw-icon-Call-Center"></i>
293 Request Help 296 Request Help
294 </div> 297 </div>
295 </div> 298 </div>
296 </div> 299 </div>
297 </div> 300 </div>
298 <div className="bw-booking-modal-content"> 301 <div className="bw-booking-modal-content">
299 <div className="bw-booking-modal-inner"> 302 <div className="bw-booking-modal-inner">
300 {/* <Payment 303 {/* <Payment
301 /> */} 304 /> */}
302 <PaymentStep/> 305 <PaymentStep/>
303 </div> 306 </div>
304 </div> 307 </div>
305 </> 308 </>
306 case 'step-profile': 309 case 'step-profile':
307 return <> 310 return <>
308 <Profile 311 <Profile
309 loadprofile={false} 312 loadprofile={false}
310 profile={userProfile} /> 313 profile={userProfile} />
311 </> 314 </>
312 case 'step-signup-update-profile': 315 case 'step-signup-update-profile':
313 return <> 316 return <>
314 <Profile signupStep={true} /> 317 <Profile signupStep={true} />
315 </> 318 </>
316 default: 319 default:
317 break; 320 break;
318 } 321 }
319 } 322 }
320 323
321 return (<> 324 return (<>
322 {process.env.NODE_ENV === 'development' ? 325 {process.env.NODE_ENV === 'development' ?
323 // <Portal id="bwBookingWizardID"> 326 // <Portal id="bwBookingWizardID">
324 <> 327 <>
325 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 328 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
326 {show && <div className={`bw-booking-popup-wraper ${step} ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}> 329 {show && <div className={`bw-booking-popup-wraper ${step} ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}>
327 <div className="bw-booking-modal"> 330 <div className="bw-booking-modal">
328 <div className="bw-btn-close" onClick={() => handleCloseModal()}> 331 <div className="bw-btn-close" onClick={() => handleCloseModal()}>
329 <i className="bw-icon-close"></i> 332 <i className="bw-icon-close"></i>
330 <span>Close</span> 333 <span>Close</span>
331 </div> 334 </div>
332 <div className="bw-booking-modal-body"> 335 <div className="bw-booking-modal-body">
333 {renderStep(step)} 336 {renderStep(step)}
334 </div> 337 </div>
335 </div> 338 </div>
336 339
337 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 340 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
338 <BookingWizardStep 341 <BookingWizardStep
339 activeStep={step} 342 activeStep={step}
340 /> 343 />
341 </div> 344 </div>
342 </div>} 345 </div>}
343 346
344 </> 347 </>
345 // </Portal> 348 // </Portal>
346 // :<root.div> 349 // :<root.div>
347 : <> 350 : <>
348 {/* <style type="text/css"> 351 {/* <style type="text/css">
349 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/app.chunk.css";`} 352 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/app.chunk.css";`}
350 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/main-app.chunk.css";`} 353 {`@import "${process.env.REACT_APP_SITE_URL}/static/css/main-app.chunk.css";`}
351 {window?.GDClinic?.type ==='mm'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/mm-styles.css";`:'' } 354 {window?.GDClinic?.type ==='mm'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/mm-styles.css";`:'' }
352 {window?.GDClinic?.type ==='sc'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/sc-styles.css";`:'' } 355 {window?.GDClinic?.type ==='sc'? `@import "${process.env.REACT_APP_SITE_URL}/static/css/sc-styles.css";`:'' }
353 </style> */} 356 </style> */}
354 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 357 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
355 {show && <div className={`bw-booking-popup-wraper ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}> 358 {show && <div className={`bw-booking-popup-wraper ${step} ${window?.GDClinic?.type ? window.GDClinic.type+'-theme':'rce'}`}>
356 <div className="bw-booking-modal"> 359 <div className="bw-booking-modal">
357 <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i> <span>Close</span></div> 360 <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i> <span>Close</span></div>
358 <div className="bw-booking-modal-body"> 361 <div className="bw-booking-modal-body">
359 {renderStep(step)} 362 {renderStep(step)}
360 </div> 363 </div>
361 </div> 364 </div>
362 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}> 365 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
363 <BookingWizardStep 366 <BookingWizardStep
364 activeStep={step} 367 activeStep={step}
365 /> 368 />
366 </div> 369 </div>
367 </div>} 370 </div>}
368 {/* </root.div> */} 371 {/* </root.div> */}
369 </> 372 </>
370 } 373 }
371 </> 374 </>
372 ) 375 )
373 } 376 }
374 export default BookingWizard 377 export default BookingWizard