Trong Nhan / Booking Wizard

Download as
Browse Code ยป

Commit 4be43211cb5d95df98bea7a8cedf72435ea73913

Authored by Vu Bui
1 parent f0498b399b
Exists in master

update

Showing 3 changed files with 146 additions and 36 deletions Side-by-side Diff

_scss/_variables.scss
Diff comments   View file @ 4be4321
... ... @@ -6,4 +6,36 @@ $text-light-color: #9797A3;
6 6 $red-color: #E12827;
7 7 $green-color:#438800;
8 8 $border-color: #E2E7FF;
9   -$red-bg:#FCE8E8;
10 9 \ No newline at end of file
  10 +$red-bg:#FCE8E8;
  11 +
  12 +
  13 +// generate main color:
  14 +$main-color-900: #0B1560;
  15 +$main-color-800: #132075;
  16 +$main-color-700: #091990;
  17 +$main-color-600: #192CC2;
  18 +$main-color-400: #8AA2EF;
  19 +$main-color-300: #B3C6F9;
  20 +$main-color-200: #D9E3FC;
  21 +$main-color-100: #EFF4FF;
  22 +
  23 +
  24 +// generate second color:
  25 +$second-color-900: #0A4E67;
  26 +$second-color-800: #11697C;
  27 +$second-color-700: #1B909A;
  28 +$second-color-600: #27B8B7;
  29 +$second-color-400: #65E7CE;
  30 +$second-color-300: #85F3D4;
  31 +$second-color-200: #B9FFEB;
  32 +$second-color-100: #E5FFF8;
  33 +
  34 +// generate gray color:
  35 +$gray-1: #333333;
  36 +$gray-2: #4F4F4F;
  37 +$gray-3: #9797A3;
  38 +$gray-4: #B1B3BE;
  39 +$gray-5: #ECEDF0;
  40 +$gray-6: #F5F7FA;
  41 +$gradient-1: linear-gradient(91.16deg, #D9E3FC 33.76%, #B9FFEB 100%);
  42 +$gradient-2: linear-gradient(134.27deg, #27B8B7 6.12%, #192CC2 92.8%);
11 43 \ No newline at end of file
1 1 import React, { useState, useEffect } from 'react'
2 2 import root from 'react-shadow';
  3 +import { useCookies } from 'react-cookie'
3 4 import Portal from '../../components/Portal'
4 5 import BookingWizardStep from '../../components/BookingWizardStep'
5 6 import LoginStep from '../../components/Steps/Login';
  7 +import Services from '../../components/Steps/Services'
  8 +import PickTime from '../../components/Steps/PickTime'
6 9 import './styles.scss'
7   -
8   -
9 10 import { useCommonState, useCommonDispatch } from '../../store/common'
  11 +
10 12 function BookingWizard(props) {
11 13 const [show, setShow] = useState(false)
12 14 const [step, setStep] = useState('step-login')
13 15 const commonStore = useCommonState()
14 16 const dispatch = useCommonDispatch()
  17 + const [cookies, setCookie, removeCookie] = useCookies('patient-dashboard')
  18 + let { userProfile, accessToken } = cookies
15 19  
  20 + useEffect(() => {
  21 + console.log("check access token", accessToken)
  22 + if (accessToken) {
  23 + if (!localStorage.getItem('activeStep') || localStorage.getItem('activeStep') === null) {
  24 + dispatch({ type: 'BW_ACTIVE_STEP', payload: 'step-confirm-service' })
  25 + } else {
  26 + dispatch({ type: 'BW_ACTIVE_STEP', payload: localStorage.getItem('activeStep') })
  27 + }
  28 +
  29 + }
  30 + }, [])
  31 +
  32 + useEffect(() => {
  33 + if (commonStore.activeStep !== null) {
  34 + setStep(commonStore.activeStep)
  35 + }
  36 + }, [commonStore.activeStep])
16 37  
17 38 useEffect(() => {
18 39 setShow(commonStore?.showBookingModal)
... ... @@ -25,7 +46,55 @@ function BookingWizard(props) {
25 46 const renderStep = (step) => {
26 47 switch (step) {
27 48 case 'step-login':
28   - return <LoginStep />
  49 + return <div className="bw-booking-modal-content">
  50 + <div className="bw-booking-modal-inner">
  51 + <LoginStep />
  52 + </div>
  53 + </div>
  54 + case 'step-confirm-service':
  55 + return <>
  56 + <div className="bw-booking-modal-header">
  57 + <div className="bw-row">
  58 + <div className="bw-col-left">
  59 + <i className="bw-icon-health-care"></i>
  60 + <span>Confirm your services</span>
  61 + </div>
  62 + <div className="bw-col-right">
  63 + <button typ="button" className="bw-btn bw-btn-primary">
  64 + <i className="bw-icon-calling"></i>
  65 + Get Help
  66 + </button>
  67 + </div>
  68 + </div>
  69 + </div>
  70 + <div className="bw-booking-modal-content">
  71 + <div className="bw-booking-modal-inner">
  72 + <Services />
  73 + </div>
  74 + </div>
  75 + </>
  76 + case 'step-pick-time':
  77 + return <>
  78 + <div className="bw-booking-modal-header">
  79 + <div className="bw-row">
  80 + <div className="bw-col-left">
  81 + <i className="bw-icon-clock"></i>
  82 + <span>Pick your time</span>
  83 + </div>
  84 + <div className="bw-col-right">
  85 + <button typ="button" className="bw-btn bw-btn-primary">
  86 + <i className="bw-icon-calling"></i>
  87 + Get Help
  88 + </button>
  89 + </div>
  90 + </div>
  91 + </div>
  92 + <div className="bw-booking-modal-content">
  93 + <div className="bw-booking-modal-inner">
  94 + <PickTime />
  95 + </div>
  96 + </div>
  97 + </>
29 98 default:
30 99 break;
31 100 }
... ... @@ -39,26 +108,14 @@ function BookingWizard(props) {
39 108 <div className="bw-booking-modal">
40 109 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
41 110 <div className="bw-booking-modal-body">
42   - {step !== 'step-login' && <div className="bw-booking-modal-header">
43   - <div className="bw-row">
44   - <div className="bw-col-left">
45   - <i className="bw-icon-health-care"></i>
46   - <span>Confirm your services</span>
47   - </div>
48   - <div className="bw-col-right"></div>
49   - </div>
50   - </div>}
51   - <div className="bw-booking-modal-content">
52   - <div className="bw-booking-modal-inner">
53   -
54   - {renderStep(step)}
55   - </div>
56   - </div>
  111 + {renderStep(step)}
57 112 </div>
58 113 </div>
59 114  
60 115 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
61   - <BookingWizardStep />
  116 + <BookingWizardStep
  117 + activeStep={step}
  118 + />
62 119 </div>
63 120 </div>}
64 121 </Portal> :
... ... @@ -72,25 +129,13 @@ function BookingWizard(props) {
72 129 <div className="bw-booking-modal">
73 130 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
74 131 <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">
86   -
87   - {renderStep(step)}
88   - </div>
89   - </div>
  132 + {renderStep(step)}
90 133 </div>
91 134 </div>
92 135 <div className={`bw-booking-step-wrapper ${step === 'step-login' ? 'require-login' : ''}`}>
93   - <BookingWizardStep />
  136 + <BookingWizardStep
  137 + activeStep={step}
  138 + />
94 139 </div>
95 140 </div>}
96 141 </root.div>
... ... @@ -67,6 +67,39 @@
67 67 padding-left: 25px;
68 68 padding-right: 25px;
69 69 position: relative;
  70 + .bw-booking-modal-header {
  71 + padding: 20px 45px 25px;
  72 + .bw-row {
  73 + display: flex;
  74 + flex-wrap: wrap;
  75 + align-items: center;
  76 + .bw-col-left {
  77 + flex: 0 0 70%;
  78 + max-width: 70%;
  79 + display: flex;
  80 + align-items: center;
  81 + color: $gray-2;
  82 + i {
  83 + font-size: 24px;
  84 + margin-right: 10px;
  85 + }
  86 + span {
  87 + text-transform: uppercase;
  88 + font-weight: 700;
  89 + font-size: 20px;
  90 + width: calc(100% - 34px);
  91 + overflow: hidden;
  92 + white-space: nowrap;
  93 + text-overflow: ellipsis;
  94 + }
  95 + }
  96 + .bw-col-right {
  97 + flex: 0 0 30%;
  98 + max-width: 30%;
  99 + text-align: right;
  100 + }
  101 + }
  102 + }
70 103 .bw-booking-modal-body {
71 104 background-color: #fff;
72 105 height: 100%;