Trong Nhan / Booking Wizard

Download as
Browse Code ยป

Commit f0498b399b55f4dc12ba0df731efd8487ca484db

Authored by Vu Bui
1 parent 75d6e3a50d
Exists in master

update

Showing 1 changed file with 21 additions and 7 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 Portal from '../../components/Portal' 3 import Portal from '../../components/Portal'
4 import BookingWizardStep from '../../components/BookingWizardStep' 4 import BookingWizardStep from '../../components/BookingWizardStep'
5 import LoginStep from '../../components/Steps/Login'; 5 import LoginStep from '../../components/Steps/Login';
6 import './styles.scss' 6 import './styles.scss'
7 7
8 8
9 import { useCommonState, useCommonDispatch } from '../../store/common' 9 import { useCommonState, useCommonDispatch } from '../../store/common'
10 function BookingWizard(props) { 10 function BookingWizard(props) {
11 const [show, setShow] = useState(false) 11 const [show, setShow] = useState(false)
12 const [step, setStep] = useState('step-login') 12 const [step, setStep] = useState('step-login')
13 const commonStore = useCommonState() 13 const commonStore = useCommonState()
14 const dispatch = useCommonDispatch() 14 const dispatch = useCommonDispatch()
15 15
16 16
17 useEffect(() => { 17 useEffect(() => {
18 setShow(commonStore?.showBookingModal) 18 setShow(commonStore?.showBookingModal)
19 }, [commonStore.showBookingModal]) 19 }, [commonStore.showBookingModal])
20 20
21 const handleCloseModal = () => { 21 const handleCloseModal = () => {
22 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false }) 22 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false })
23 } 23 }
24 24
25 const renderStep = (step)=> { 25 const renderStep = (step) => {
26 switch (step) { 26 switch (step) {
27 case 'step-login': 27 case 'step-login':
28 return <LoginStep /> 28 return <LoginStep />
29 default: 29 default:
30 break; 30 break;
31 } 31 }
32 } 32 }
33 33
34 return (<> 34 return (<>
35 {process.env.NODE_ENV === 'development' ? 35 {process.env.NODE_ENV === 'development' ?
36 <Portal id="bwBookingWizardID"> 36 <Portal id="bwBookingWizardID">
37 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 37 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
38 {show && <div className="bw-booking-popup-wraper"> 38 {show && <div className="bw-booking-popup-wraper">
39 <div className="bw-booking-modal"> 39 <div className="bw-booking-modal">
40 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button> 40 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
41 <div className="bw-booking-modal-body"> 41 <div className="bw-booking-modal-body">
42 {step!=='step-login' && <div className="bw-booking-modal-header"> 42 {step !== 'step-login' && <div className="bw-booking-modal-header">
43 <div className="bw-row"> 43 <div className="bw-row">
44 <div className="bw-col-left"> 44 <div className="bw-col-left">
45 <i className="bw-icon-health-care"></i> 45 <i className="bw-icon-health-care"></i>
46 <span>Confirm your services</span> 46 <span>Confirm your services</span>
47 </div> 47 </div>
48 <div className="bw-col-right"></div> 48 <div className="bw-col-right"></div>
49 </div> 49 </div>
50 </div> } 50 </div>}
51 <div className="bw-booking-modal-content"> 51 <div className="bw-booking-modal-content">
52 <div className="bw-booking-modal-inner"> 52 <div className="bw-booking-modal-inner">
53 53
54 {renderStep(step)} 54 {renderStep(step)}
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 59
60 <div className={`bw-booking-step-wrapper ${step ==='step-login' ?'require-login':''}`}> 60 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
61 <BookingWizardStep /> 61 <BookingWizardStep />
62 </div> 62 </div>
63 </div>} 63 </div>}
64 </Portal> : 64 </Portal> :
65 <Portal id="bwBookingWizardID"> 65 <Portal id="bwBookingWizardID">
66 <root.div> 66 <root.div>
67 <style type="text/css"> 67 <style type="text/css">
68 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`} 68 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`}
69 </style> 69 </style>
70 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>} 70 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
71 {show && <div className="bw-booking-popup-wraper"> 71 {show && <div className="bw-booking-popup-wraper">
72 <div className="bw-booking-modal"> 72 <div className="bw-booking-modal">
73 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button> 73 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
74 <div className="bw-booking-modal-body"> 74 <div className="bw-booking-modal-body">
75 {step !== 'step-login' && <div className="bw-booking-modal-header">
76 <div className="bw-row">
77 <div className="bw-col-left">
78 <i className="bw-icon-health-care"></i>
79 <span>Confirm your services</span>
80 </div>
81 <div className="bw-col-right"></div>
82 </div>
83 </div>}
84 <div className="bw-booking-modal-content">
85 <div className="bw-booking-modal-inner">
75 86
87 {renderStep(step)}
88 </div>
89 </div>
76 </div> 90 </div>
77 </div> 91 </div>
78 <div className="bw-booking-step-wrapper"> 92 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
79 <BookingWizardStep /> 93 <BookingWizardStep />
80 </div> 94 </div>
81 </div>} 95 </div>}
82 </root.div> 96 </root.div>
83 </Portal> 97 </Portal>
84 } 98 }
85 </> 99 </>
86 ) 100 )
87 } 101 }
88 export default BookingWizard 102 export default BookingWizard