Commit 117f070d3d299e5765678be106a41827b82bd629

Authored by Vu Bui
1 parent ddfb6cdcc0
Exists in master

update

Showing 3 changed files with 46 additions and 25 deletions Side-by-side Diff

1 1  
2 2  
3 3 import axios from 'axios'
4   -const baseAPIUrl = process.env.REACT_APP_API_URL;
  4 +const baseAPIUrl = window?.GDClinic?.api_host ? `${window?.GDClinic?.api_host}/api/v1` : process.env.REACT_APP_API_URL;
5 5  
6 6 const parseErrorMessage = ( error ) => {
7 7 let message = ''
... ... @@ -9,7 +9,6 @@ import PickTime from '../../components/Steps/PickTime'
9 9 import PickDoctor from '../../components/Steps/PickDoctor';
10 10 import Profile from '../../components/Steps/Profile';
11 11 import Payment from '../../components/Steps/Payment';
12   -import {getUserProfile} from './apis'
13 12  
14 13 import './styles.scss'
15 14 import { useCommonState, useCommonDispatch } from '../../store/common'
... ... @@ -37,15 +36,18 @@ function BookingWizard(props) {
37 36 console.log("check access token", profile)
38 37 }
39 38 // set data Case obj
40   - if(localStorage.getItem('caseObj')) {
  39 + if (localStorage.getItem('caseObj')) {
41 40 dispatch({ type: 'BW_CASE', payload: JSON.parse(localStorage.getItem('caseObj')) })
42 41 }
43   - if(localStorage.getItem('bwHasBooked')) {
44   - dispatch({type:'BW_HAS_BOOKED', payload: true})
  42 + if (localStorage.getItem('bwHasBooked')) {
  43 + dispatch({ type: 'BW_HAS_BOOKED', payload: true })
45 44 }
46 45 }
47   -
48   -
  46 + // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
  47 + let vh = window.innerHeight * 0.01;
  48 + // Then we set the value in the --vh custom property to the root of the document
  49 + document.documentElement.style.setProperty('--vh', `${vh}px`);
  50 +
49 51 }, [])
50 52 useEffect(() => {
51 53  
... ... @@ -67,7 +69,7 @@ function BookingWizard(props) {
67 69 }, [bwaccessToken])
68 70  
69 71  
70   -
  72 +
71 73  
72 74  
73 75 useEffect(() => {
... ... @@ -81,9 +83,9 @@ function BookingWizard(props) {
81 83 }, [commonStore.showBookingModal])
82 84  
83 85 useEffect(() => {
84   - if(show) {
  86 + if (show) {
85 87 document.body.classList.add('bw-show-popup')
86   - }else {
  88 + } else {
87 89 document.body.classList.remove('bw-show-popup')
88 90 }
89 91 }, [show])
... ... @@ -92,7 +94,7 @@ function BookingWizard(props) {
92 94 const handleCloseModal = () => {
93 95 dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false })
94 96 dispatch({ type: 'BW_CLICK_BOOKING_BTN', payload: false })
95   - if(!localStorage.getItem('bwHasBooked') && localStorage.getItem('activeStep') !=="step-login" || localStorage.getItem('bwHasBooked') === false && localStorage.getItem('activeStep') !=="step-login") {
  97 + if (!localStorage.getItem('bwHasBooked') && localStorage.getItem('activeStep') !== "step-login" || localStorage.getItem('bwHasBooked') === false && localStorage.getItem('activeStep') !== "step-login") {
96 98 dispatch({ type: 'BW_SHOW_MODAL_IMCOMPLETE', payload: true })
97 99 }
98 100 }
... ... @@ -113,7 +115,7 @@ function BookingWizard(props) {
113 115 <div className="bw-col-left">
114 116 {process.env.REACT_APP_NAME === 'rce' && <i className="bw-icon-health-care"></i>}
115 117 {process.env.REACT_APP_NAME === 'mm' && <i className="bw-icon-leaf"></i>}
116   - {commonStore?.hasBooked ===true ?<span>YOUR SERVICE</span>:<span>Select your services</span>}
  118 + {commonStore?.hasBooked === true ? <span>YOUR SERVICE</span> : <span>Select your services</span>}
117 119 </div>
118 120 <div className="bw-col-right">
119 121 <div className="bw-btn bw-btn-primary">
... ... @@ -135,10 +137,10 @@ function BookingWizard(props) {
135 137 <div className="bw-row">
136 138 <div className="bw-col-left">
137 139 <i className="bw-icon-clock"></i>
138   - {commonStore?.hasBooked ===true ?<span>RESCHEDULE APPOINTMENT</span>:<span>MAKE APPOINTMENT</span>}
  140 + {commonStore?.hasBooked === true ? <span>RESCHEDULE APPOINTMENT</span> : <span>MAKE APPOINTMENT</span>}
139 141 </div>
140 142 <div className="bw-col-right">
141   - <div className="bw-btn bw-btn-primary">
  143 + <div className="bw-btn bw-btn-primary">
142 144 <i className="bw-icon-calling"></i>
143 145 Get Help
144 146 </div>
... ... @@ -182,7 +184,7 @@ function BookingWizard(props) {
182 184 <span>Payment information</span>
183 185 </div>
184 186 <div className="bw-col-right">
185   - <div className="bw-btn bw-btn-primary">
  187 + <div className="bw-btn bw-btn-primary">
186 188 <i className="bw-icon-calling"></i>
187 189 Get Help
188 190 </div>
... ... @@ -197,9 +199,9 @@ function BookingWizard(props) {
197 199 </>
198 200 case 'step-profile':
199 201 return <>
200   - <Profile
201   - loadprofile={false}
202   - profile={userProfile} />
  202 + <Profile
  203 + loadprofile={false}
  204 + profile={userProfile} />
203 205 </>
204 206 case 'step-signup-update-profile':
205 207 return <>
... ... @@ -215,9 +217,12 @@ function BookingWizard(props) {
215 217 // <Portal id="bwBookingWizardID">
216 218 <>
217 219 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
218   - {show && <div className="bw-booking-popup-wraper">
  220 + {show && <div className={`bw-booking-popup-wraper ${step}`}>
219 221 <div className="bw-booking-modal">
220   - <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></div>
  222 + <div className="bw-btn-close" onClick={() => handleCloseModal()}>
  223 + <i className="bw-icon-close"></i>
  224 + <span>Close</span>
  225 + </div>
221 226 <div className="bw-booking-modal-body">
222 227 {renderStep(step)}
223 228 </div>
... ... @@ -233,15 +238,15 @@ function BookingWizard(props) {
233 238 </>
234 239 // </Portal>
235 240 // :<root.div>
236   - :<>
  241 + : <>
237 242 {/* <style type="text/css">
238 243 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/app.chunk.css";`}
239 244 {`@import "${process.env.REACT_APP_FIREBASE_URL}/static/css/main-app.chunk.css";`}
240 245 </style> */}
241 246 {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
242   - {show && <div className="bw-booking-popup-wraper">
  247 + {show && <div className={`bw-booking-popup-wraper ${step}`}>
243 248 <div className="bw-booking-modal">
244   - <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></div>
  249 + <div className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i> <span>Close</span></div>
245 250 <div className="bw-booking-modal-body">
246 251 {renderStep(step)}
247 252 </div>
... ... @@ -252,7 +257,7 @@ function BookingWizard(props) {
252 257 />
253 258 </div>
254 259 </div>}
255   - {/* </root.div> */}
  260 + {/* </root.div> */}
256 261 </>
257 262 }
258 263 </>
... ... @@ -10,7 +10,6 @@
10 10 z-index: 99999998;
11 11 }
12 12 .bw-booking-popup-wraper {
13   -
14 13 -webkit-box-sizing: border-box;
15 14 box-sizing: border-box;
16 15 * {
... ... @@ -20,6 +19,7 @@
20 19 position: fixed;
21 20 width: 1048px;
22 21 height: calc(100vh - 30px);
  22 + height: calc(100vh - calc(var(--vh) + 30px));
23 23 left: 50%;
24 24 transform: translate(-50%,0);
25 25 bottom: 0;
... ... @@ -114,6 +114,9 @@
114 114 &:hover {
115 115 opacity: 0.8;
116 116 }
  117 + span {
  118 + display: none;
  119 + }
117 120 }
118 121 }
119 122 .bw-booking-step-wrapper {
... ... @@ -121,8 +124,21 @@
121 124 padding-left: 59px;
122 125 padding-right: 59px;
123 126 &.require-login {
  127 + display: none;
124 128 filter: grayscale(100%);
125 129 pointer-events: none;
126 130 }
127 131 }
  132 + &.step-pick-time {
  133 + .bw-booking-modal {
  134 + .bw-booking-modal-inner {
  135 + overflow: visible;
  136 + }
  137 + .bw-picktime-step {
  138 + .bw-picktime-wrapper {
  139 + overflow: visible;
  140 + }
  141 + }
  142 + }
  143 + }
128 144 }
129 145 \ No newline at end of file