Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 3x 3x 1x 3x 1x 3x 1x 3x 1x 3x 1x 3x 1x 3x 3x 1x 1x | import React from 'react'
import * as PropTypes from 'prop-types'
import * as generalUtils from 'common/utils/general.utils'
import Button from 'common/components/button'
import './Status.scss'
import * as bookingConstants from '../Booking.constants'
const Message = ({ status, translate }) => {
const message = bookingConstants.STATUS_MESSAGES(translate)[status] || false
return message ? <div className="booking-status__message">{message}</div> : null
}
const Title = ({ status, translate }) => (
<div role="status" className={`booking-status__status--${status}`}>
{bookingConstants.STATUS_NAMES(translate)[status]}
</div>
)
const Time = ({ time, translate }) => (
<div className="booking-status__row">
<div className="booking-status__row--title">{translate('Time')}</div>
<div className="booking-status__row--value">{generalUtils.formattedRoundHour(time)}</div>
</div>
)
const Office = ({ office, translate }) => (
<div className="booking-status__row">
<div className="booking-status__row--title">{translate('Office')}</div>
<div className="booking-status__row--value">{office}</div>
</div>
)
const Seats = ({ seats, translate }) => (
<div className="booking-status__row">
<div className="booking-status__row--title">{translate('Seats')}</div>
<div className="booking-status__row--value">{seats}</div>
</div>
)
const CancelButton = ({ onCancel, translate, processing }) => (
<div className="booking-status__row">
<Button onClick={onCancel} styleType="secondary" isDisabled={processing}>
{processing ? translate('Please wait ...') : translate('Cancel')}
</Button>
</div>
)
const Status = ({ translate, data, onNewBooking, onCancel, processing }) => {
const isCancelled = data.status === bookingConstants.PAGE_STATE.CANCELLED
return (
<section className="booking-status animate__animated animate__fadeIn">
<div className="booking-status__title" role="heading" aria-level="2">
{translate('Hey {name},', { name: data.name })}
</div>
<Message status={data.status} translate={translate} />
<div className="booking-status__status">
<Title status={data.status} translate={translate} />
<div className="booking-status__status--code">
{translate('Reservation code: {code}', { code: data.id })}
</div>
</div>
{!isCancelled && (
<>
<Time time={data.time} translate={translate} />
<Seats seats={data.seats} translate={translate} />
<Office office={data.office} translate={translate} />
</>
)}
<div className="booking-status__row">
<Button isDisabled={processing} onClick={onNewBooking} styleType="secondary">
{translate('New booking')}
</Button>
</div>
{!isCancelled && (
<CancelButton processing={processing} translate={translate} onCancel={onCancel} />
)}
</section>
)
}
Status.defaultProps = {
translate: (value) => value,
}
Status.propTypes = {
translate: PropTypes.func,
data: PropTypes.object,
onNewBooking: PropTypes.func,
onCancel: PropTypes.func,
processing: PropTypes.bool,
}
export default Status
|