Trong Nhan / Booking Wizard

Download as
Browse Code ยป

Commit 038ebcb50e1c6f8f0e2a88599cb9217b81063029

Authored by Vu Bui
1 parent eead6342ab
Exists in master

upate

Showing 4 changed files with 125 additions and 26 deletions Side-by-side Diff

_scss/_variables.scss
Diff comments   View file @ 038ebcb
1 1  
2   -$main-color: red;
3 2 \ No newline at end of file
  3 +$main-color: #3D59CA;
  4 +$second-color: #36D7C7;
  5 +$text-color: #000000;
  6 +$text-light-color: #9797A3;
  7 +$red-color: #E12827;
  8 +$green-color:#438800;
  9 +$border-color: #E2E7FF;
4 10 \ No newline at end of file
1   -import React, {useState} from 'react'
  1 +import React, { useState, useEffect } from 'react'
  2 +import root from 'react-shadow';
  3 +import Portal from '../../components/Portal'
  4 +import BookingWizardStep from '../../components/BookingWizardStep'
2 5 import './styles.scss'
3   -import './styles.css'
  6 +
  7 +
4 8 import { useCommonState, useCommonDispatch } from '../../store/common'
5 9 function BookingWizard(props) {
6   -
7   - const [count, setCount] = useState(1)
8 10 const [show, setShow] = useState(false)
9 11 const commonStore = useCommonState()
10   - const dispatch = useCommonDispatch()
11   -
12   - const handleSetData = () => {
13   - // cach 1 fail
14   - dispatch({type:'EXAMPLE_DATA', payload:`HI! ${count}`})
15   - setCount(count+1)
16   - // cach 2
17   - localStorage.setItem("exampleData", `HI! ${count}`)
  12 + const dispatch = useCommonDispatch()
  13 +
  14 +
  15 + useEffect(() => {
  16 + setShow(commonStore?.showBookingModal)
  17 + }, [commonStore.showBookingModal])
  18 +
  19 + const handleCloseModal = () => {
  20 + dispatch({ type: 'BW_SHOW_BOOKING_MODAL', payload: false })
18 21 }
19   - return(<>
20   - <div className="bw-booking-popup-wraper">
21   - <button id="bk-btn-book-id" onClick={()=>handleSetData()}>click </button>
22   - </div>
23   - </>
  22 +
  23 + return (<>
  24 + {process.env.NODE_ENV === 'development' ?
  25 + <Portal id="bwBookingWizardID">
  26 + {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
  27 + {show && <div className="bw-booking-popup-wraper">
  28 + <div className="bw-booking-modal">
  29 + <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
  30 + <div className="bw-booking-modal-body">
  31 +
  32 + </div>
  33 + </div>
  34 + <div className="bw-booking-step-wrapper">
  35 + <BookingWizardStep />
  36 + </div>
  37 + </div>}
  38 + </Portal> :
  39 + <Portal id="bwBookingWizardID">
  40 + <root.div>
  41 + <style type="text/css">
  42 + {'@import "http://localhost:8888/static/css/main-app.chunk.css";'}
  43 + </style>
  44 + {show && <div className="bw-backdrop" onClick={() => handleCloseModal()}></div>}
  45 + {show && <div className="bw-booking-popup-wraper">
  46 + <div className="bw-booking-modal">
  47 + <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
  48 + <div className="bw-booking-modal-body">
  49 +
  50 + </div>
  51 + </div>
  52 + <div className="bw-booking-step-wrapper">
  53 + <BookingWizardStep />
  54 + </div>
  55 + </div>}
  56 + </root.div>
  57 + </Portal>
  58 + }
  59 + </>
24 60 )
25 61 }
26 62 export default BookingWizard
27 63 \ No newline at end of file
1 1 import styled from "styled-components";
2 2  
3   -export const Author = styled.span`
4   - font-family: Times, "Times New Roman", serif;
5   - font-size: 0.75em;
6   - color: rgba(0, 0, 0, 0.75);
7   -`;
1 1 @import './_scss/variables';
2   -.bw-booking-wraper {
3   - h2 {
4   - color: blue;
5 2  
  3 +.bw-backdrop {
  4 + background-color: rgba(0, 0, 0, 0.7);
  5 + position: fixed;
  6 + width: 100vw;
  7 + height: 100vh;
  8 + left: 0;
  9 + top: 0;
  10 + z-index: 90;
  11 +}
  12 +.bw-booking-popup-wraper {
  13 + -webkit-box-sizing: border-box;
  14 + box-sizing: border-box;
  15 + * {
  16 + -webkit-box-sizing: border-box;
  17 + box-sizing: border-box;
  18 + }
  19 + position: fixed;
  20 + width: 1048px;
  21 + height: calc(100vh - 30px);
  22 + left: 50%;
  23 + transform: translate(-50%,0);
  24 + bottom: 0;
  25 + display: flex;
  26 + flex-wrap: wrap;
  27 + z-index: 100;
  28 + .bw-booking-modal {
  29 + flex: 0 0 100%;
  30 + max-width: 100%;
  31 + height: calc(100% - 135px);
  32 + margin-bottom: 15px;
  33 + padding-left: 25px;
  34 + padding-right: 25px;
  35 + position: relative;
  36 + .bw-booking-modal-body {
  37 + background-color: #fff;
  38 + height: 100%;
  39 + box-shadow: 2px 4px 45px rgba(26, 41, 106, 0.12);
  40 + border-radius: 30px;
  41 + }
  42 + .bw-btn-close {
  43 + position: absolute;
  44 + right: -30px;
  45 + top: 0px;
  46 + width: 40px;
  47 + height: 40px;
  48 + border-radius: 40px;
  49 + display: flex;
  50 + justify-content: center;
  51 + align-items: center;
  52 + text-align: center;
  53 + border:0;
  54 + cursor: pointer;
  55 + &:focus {
  56 + outline: none;
  57 + box-shadow: none;
  58 + }
  59 + &:hover {
  60 + opacity: 0.8;
  61 + }
  62 + }
  63 + }
  64 + .bw-booking-step-wrapper {
  65 + flex: 0 0 100%;
  66 + padding-left: 59px;
  67 + padding-right: 59px;
6 68 }
7 69 }
8 70 \ No newline at end of file