\n {ticket.payment_type === 'dd' && (\n \n \n {formatTicketName(ticket)}\n \n \n \n This ticket can be paid for in instalments using a\n direct debit mandate.\n \n {ticket.pricing_model === 'Zonal' && (\n <>\n \n {service.timetable_url !== '' && (\n <>\n \n Which zone am I?\n {' '}\n |{' '}\n \n )}\n \n Direct Debit FAQ\n \n \n {service.zones.map(serviceZone =>\n renderModal(classes, ticket, serviceZone)\n )}\n \n )}\n {ticket.pricing_model !== 'Zonal' && (\n <>\n \n \n Direct Debit FAQ\n \n \n {renderModal(classes, ticket)}\n \n )}\n \n \n \n {ticket.available\n ? 'Buy ticket'\n : 'Join waiting list'}\n \n \n \n )}\n\n \n {isFixedReturn && (\n <>\n \n {formatTicketName(ticket)}\n \n \n {moment(ticket.start).format('ddd Do MMM')}{' '}\n \n \n {isSoldOut && (\n \n {formatRemainingTickets(ticket)}\n \n )}\n {!isSoldOut && (\n <>\n {formatTicketPrice(service, ticket)}{' '}\n \n {formatRemainingTickets(ticket)}\n \n \n )}\n \n \n )}\n\n {!isFixedReturn && (\n <>\n \n {formatTicketInfo(service, ticket)}\n \n {formatDirectDebitNumPayments(ticket) !== '' && (\n \n {\n setOpen(true);\n }}\n className={classes.plainText}\n >\n {formatDirectDebitNumPayments(ticket)}\n \n \n )}\n \n {formatRemainingTickets(ticket)}\n \n \n )}\n
\n \n \n );\n};\n\nServiceTicket.propTypes = {\n ticket: PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string\n }).isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(ServiceTicket);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Typography, withStyles } from '@material-ui/core';\n\nconst styles = {\n root: {\n padding: '10px',\n textAlign: 'left'\n },\n header: {\n color: '#fff'\n }\n};\n\nconst ContentHeader = ({ text, id, classes }) => (\n \n \n {text}\n \n
\n);\n\nContentHeader.propTypes = {\n text: PropTypes.string.isRequired,\n id: PropTypes.string,\n classes: PropTypes.shape().isRequired\n};\n\nContentHeader.defaultProps = {\n id: ''\n};\n\nexport default withStyles(styles)(ContentHeader);\n","import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport axios from 'axios';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport red from '@material-ui/core/colors/red';\nimport { Icon, Button } from '@material-ui/core';\nimport { Link } from 'react-router-dom';\nimport moment from 'moment';\n\nimport ServiceTicket from '../components/ServiceTicket';\nimport ContentHeader from '../components/ContentHeader';\nimport { getMinPrice } from '../helpers/ticket';\nimport globalStyles from '../styles';\n\nimport './Service.css';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n paddingBottom: '1px',\n position: 'relative',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n nameContainer: {\n padding: '10px 10px',\n background: '#70d0ff'\n },\n name: {\n color: '#fff'\n },\n description: {\n marginBottom: '20px',\n paddingRight: '20px'\n },\n serviceTickets: {\n margin: '0 20px 0px',\n padding: '0 0 20px'\n },\n error: {\n margin: '40px 20px',\n color: red[500]\n },\n spinner: {\n margin: '40px auto',\n display: 'block'\n },\n operatorInfo: {\n padding: '0 20px'\n },\n icon: {\n fontSize: '15px'\n },\n button: {\n paddingLeft: '2px',\n paddingRight: '4px'\n },\n link: globalStyles.boldLink\n});\n\nclass Service extends Component {\n static formatDescription(description) {\n return description.split('*').filter(el => el !== '');\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n service: null,\n client: null,\n loading: true,\n error: false\n };\n }\n\n componentDidMount() {\n const {\n match: {\n params: { clientSlug, serviceId }\n }\n } = this.props;\n\n if (!clientSlug || !serviceId) {\n return;\n }\n\n this.getService(clientSlug, serviceId);\n }\n\n async getService(clientSlug, serviceId) {\n try {\n const client = await axios.get(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/client/slug/${clientSlug}`\n );\n\n const { services = [] } = client.data;\n\n this.setState({\n client: client.data\n });\n\n if (services.length) {\n let serviceFound = false;\n for (let i = 0; i < services.length; i += 1) {\n const service = services[i];\n if (service.id === serviceId) {\n serviceFound = true;\n this.getTicketData(client.data, service, serviceId);\n }\n }\n\n if (!serviceFound) {\n throw new Error();\n }\n } else {\n throw new Error();\n }\n } catch (e) {\n this.setState({ error: true, loading: false });\n }\n }\n\n getTicketData(client, service, serviceId) {\n const salesYearTicketRq = [];\n for (let i = 0; i < client.sales_year.length; i += 1) {\n const salesYearTicketUrl = `${\n process.env.REACT_APP_TICKET_API_ENDPOINT\n }/service/${serviceId}/tickets/${client.sales_year[i].replace(\n '/',\n '-'\n )}`;\n salesYearTicketRq.push(axios.get(salesYearTicketUrl));\n }\n if (salesYearTicketRq.length === 0) {\n throw new Error('No services');\n }\n\n const now = moment().toISOString();\n axios\n .all(salesYearTicketRq)\n .then(\n axios.spread((...responses) => {\n const tickets = [];\n responses.forEach(res => {\n if (res.data && res.data.length > 0) {\n res.data.forEach(item => {\n tickets.push(item);\n });\n }\n });\n\n const generalSaleTickets = tickets.filter(ticket => {\n const isPrivateSale =\n 'is_private' in ticket && ticket.is_private;\n const isDisabled =\n 'is_enabled' in ticket &&\n ticket.is_enabled === false;\n const isSimplePass =\n 'payment_type' in ticket &&\n ticket.payment_type === 'ext';\n const isExpiredFixedReturn =\n ticket.type === 'return' &&\n ticket.sub_type === 'fixed' &&\n ticket.expiry < now;\n return !(\n isPrivateSale ||\n isDisabled ||\n isSimplePass ||\n isExpiredFixedReturn\n );\n });\n\n generalSaleTickets\n .sort((a, b) => {\n const aPrice = Number(getMinPrice(a, service));\n const bPrice = Number(getMinPrice(b, service));\n\n if (aPrice < bPrice) {\n return -1;\n }\n\n if (aPrice > bPrice) {\n return 1;\n }\n\n if (a.expiry > b.expiry) {\n return -1;\n }\n\n if (a.expiry < b.expiry) {\n return 1;\n }\n\n return 0;\n })\n .reverse();\n\n this.setState({\n service: { ...service, tickets: generalSaleTickets },\n loading: false,\n error: false\n });\n })\n )\n .catch(e => {\n console.error(e);\n this.setState({ error: true, loading: false });\n });\n }\n\n filterTicketsByYear(year) {\n const { service } = this.state;\n return service.tickets.filter(ticket => {\n return ticket.year === year;\n });\n }\n\n render() {\n const { service, client, loading, error } = this.state;\n const {\n match: {\n params: { clientSlug, serviceId }\n },\n classes\n } = this.props;\n\n if (error) {\n return (\n \n \n There was a problem retrieving the ticket info, please\n try again later\n \n
\n );\n }\n\n if (loading) {\n return (\n \n \n Tickets\n \n \n
\n \n )}\n {Object.keys(ticketsByYear).map((ticketYear, i) => (\n \n \n Service operated by {client.name}.\n \n
\n \n
\n - \n {Service.formatDescription(service.description).map(\n item => (\n
- \n
\n {item}\n \n \n )\n )}\n
\n
\n {Object.keys(ticketsByYear).length === 0 && (\n <>\n \n {service.route_url && (\n
\n There are no tickets currently listed by{' '}\n {client.name}.\n
\n\n Please contact {client.name} directly for more\n information and ticket availability.\n
\n\n There are no tickets currently listed by{' '}\n {client.name}.\n
\n\n Please contact {client.name} for ticket\n availability or join their waiting list.\n
\n\n \n Buy vouchers\n \n
\n )}\n \n );\n }\n}\n\nService.propTypes = {\n match: PropTypes.shape({\n params: PropTypes.shape({\n clientSlug: PropTypes.string,\n serviceId: PropTypes.string\n })\n }).isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Service);\n","export const validateEmail = email => {\n const regexp = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n\n return regexp.test(email);\n};\n\nexport const validatePassword = password => {\n // eslint-disable-next-line no-useless-escape\n const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[A-Za-z\\d@$!%*?&\\-_='\"~`[\\]{}+^():;,.|\\/\\\\<>#]{8,}$/;\n return regexp.test(password);\n};\n\nexport const validatePasswordContainsLowerCase = password => {\n const regexp = /(?=.*[a-z])/;\n return regexp.test(password);\n};\n\nexport const validatePasswordContainsUpperCase = password => {\n const regexp = /(?=.*[A-Z])/;\n return regexp.test(password);\n};\n\nexport const validatePasswordContainsDigits = password => {\n const regexp = /(?=.*[0-9])/;\n return regexp.test(password);\n};\n\nexport const validatePasswordNoWhitespace = password => {\n const regexp = /(?=.*[\\s])/;\n return !regexp.test(password);\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst styles = {\n button: {\n position: 'relative'\n },\n buttonLoader: {\n position: 'absolute',\n top: '50%',\n left: '50%',\n marginTop: '-12px',\n marginLeft: '-12px'\n }\n};\n\nconst LoaderButton = ({\n classes,\n isLoading,\n text,\n loadingText,\n className = '',\n disabled = false,\n ...props\n}) => (\n \n \n Want to split the cost between parents or\n family? Looking to gift the full value of a\n ticket?{' '}\n \n Buy a voucher\n {' '}\n from the voucher checkout.\n \n
\n \n \n \n Please enter the code sent to {email}.\n \n \n NOTE: This email could arrive in your\n junk folder. Please double check this first.\n \n \n \n Help confirming your account\n \n \n \n {!hasResentCode && (\n \n Send another code\n \n )}\n {hasResentCode && (\n \n New code sent. Please check your inbox.\n \n )}\n \n \n {this.displayError(error)}\n \n
\n );\n }\n}\n\nConfirmationForm.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(ConfirmationForm);\n","import React, { Component } from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport TextField from '@material-ui/core/TextField';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography } from '@material-ui/core';\nimport red from '@material-ui/core/colors/red';\nimport { Auth } from 'aws-amplify';\nimport { Link } from 'react-router-dom';\nimport queryString from 'query-string';\nimport { validateEmail } from '../helpers/validators';\nimport LoaderButton from '../components/LoaderButton';\nimport ConfirmationForm from '../components/ConfirmationForm';\nimport ContentHeader from '../components/ContentHeader';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n textAlign: 'center',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '800px',\n margin: '40px auto',\n paddingBottom: '20px'\n },\n input: {\n margin: '0 20px 10px'\n },\n button: {\n width: '200px',\n height: '56px',\n marginBottom: '30px'\n },\n error: {\n margin: '0 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n register: {\n fontSize: '1em',\n marginBottom: '2em'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n }\n});\n\nclass Login extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n email: '',\n password: '',\n error: '',\n loading: false,\n showConfirmation: false\n };\n }\n\n getRegisterLink = () => {\n const { props } = this;\n const qs = queryString.parse(props.location.search, {\n ignoreQueryPrefix: true\n });\n\n if ('redirect' in qs) {\n return `/register?redirect=${qs.redirect}`;\n }\n\n return `/register`;\n };\n\n getForgotPasswordLink = () => {\n const { props } = this;\n const qs = queryString.parse(props.location.search, {\n ignoreQueryPrefix: true\n });\n\n if ('redirect' in qs) {\n return `/forgot-password?redirect=${qs.redirect}`;\n }\n\n return `/forgot-password`;\n };\n\n handleChange = event => {\n this.setState({\n [event.target.id]: event.target.value,\n error: false\n });\n };\n\n handleSubmit = async (event, retryIfQuotaExceeded = true) => {\n event.preventDefault();\n const { email, password } = this.state;\n const { handleAuth } = this.props;\n\n this.setState({ loading: true });\n\n try {\n await Auth.signIn(email.toLowerCase(), password);\n handleAuth(true);\n } catch (e) {\n if (e.name === 'QuotaExceededError' && retryIfQuotaExceeded) {\n window.localStorage.clear();\n\n await this.handleSubmit(event, false);\n return;\n }\n\n if (e.code === 'UserNotConfirmedException') {\n // @FIXME: handle \"LimitExceededException\" on resendSignUp\n let codeLastSent = '';\n\n try {\n codeLastSent = window.localStorage.getItem(\n 'confirmation_code_sent'\n );\n } catch (localStorageErr) {\n console.error(localStorageErr);\n }\n\n if (\n !codeLastSent ||\n moment(codeLastSent) < moment().subtract(18, 'hours')\n ) {\n await Auth.resendSignUp(email.toLowerCase());\n try {\n window.localStorage.setItem(\n 'confirmation_code_sent',\n new Date().toISOString()\n );\n } catch (localStorageErr) {\n console.error(localStorageErr);\n }\n }\n\n this.setState({\n showConfirmation: true\n });\n }\n this.setState({\n error: e.message,\n loading: false\n });\n }\n };\n\n validateForm() {\n const { email, password } = this.state;\n\n return validateEmail(email) && password.length > 0;\n }\n\n renderLoginForm() {\n const { classes } = this.props;\n const { email, password, error, loading } = this.state;\n\n return (\n \n \n \n Don{\"'\"}t have a ShuttleID account?{' '}\n \n Register\n \n .\n \n {error} \n
\n );\n }\n\n render() {\n const { handleAuth } = this.props;\n const { email, password, showConfirmation } = this.state;\n\n return (\n \n \n \n Forgot password\n \n \n
\n \n \n {!showConfirmation ? (\n this.renderLoginForm()\n ) : (\n
\n );\n }\n}\n\nLogin.propTypes = {\n handleAuth: PropTypes.func.isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Login);\n","import React from 'react';\nimport PhoneInput from 'react-phone-number-input';\nimport 'react-phone-number-input/style.css';\n\nimport './PhoneNumberInput.css';\n\nconst SUPPORTED_COUNTRY_CODES = ['GB', 'IE'];\n\nconst DEFAULT_COUNTRY = process.env.REACT_APP_DEFAULT_PHONE_COUNTRY || 'GB';\n\nconst PhoneNumberInput = ({\n number,\n onChange,\n onCountryChange,\n errorMessage,\n placeholder = 'Your phone number',\n label = 'Your mobile number'\n}) => {\n return (\n {errorMessage}
}\n \n );\n};\n\nexport default PhoneNumberInput;\n","export const INVALID_ACCOUNT_STRIPE_ERROR = 'Invalid account.';\nexport const INVALID_ACCOUNT_FRIENDLY_ERROR =\n 'Your card, or the account connected to it, appears invalid. Double check your details and contact your card issuer to ensure working order. Alternatively, please try a different card if you have access to one.';\nexport const FAILED_AUTH_PAYMENT_ERROR =\n 'We are unable to authenticate your payment method. Please choose a different payment method and try again.';\n\nexport const CARD_ADD_DECLINED_STRIPE_ERROR = 'Card declined';\nexport const CARD_ADD_DECLINED_FRIENDLY_ERROR =\n 'Card declined. Double check your details and contact your card issuer to ensure working order. Alternatively, please try a different card if you have access to one.';\n\nexport const CARD_ADD_ERROR_STRIPE_ERROR = 'Card error';\nexport const CARD_ADD_ERROR_FRIENDLY_ERROR =\n 'Card error. Double check your details and contact your card issuer to ensure working order. Alternatively, please try a different card if you have access to one.';\n\nexport const CARD_ADD_INVALID_REQ_STRIPE_ERROR = 'Invalid request';\nexport const CARD_ADD_INVALID_REQ_FRIENDLY_ERROR =\n 'Card error. Double check your details and contact your card issuer to ensure working order. Alternatively, please try a different card if you have access to one.';\n\nexport const DEFAULT_ERROR =\n 'There was an issue confirming your order. Please check your email to see if your order was successful. If no email is received you are safe to re-attempt your order.';\n\nconst errorMap = {\n [INVALID_ACCOUNT_STRIPE_ERROR]: INVALID_ACCOUNT_FRIENDLY_ERROR,\n [FAILED_AUTH_PAYMENT_ERROR]: FAILED_AUTH_PAYMENT_ERROR,\n [CARD_ADD_DECLINED_STRIPE_ERROR]: CARD_ADD_DECLINED_FRIENDLY_ERROR,\n [CARD_ADD_ERROR_STRIPE_ERROR]: CARD_ADD_ERROR_FRIENDLY_ERROR\n};\n\n// eslint-disable-next-line import/prefer-default-export\nexport const getFriendlyPaymentError = (error, defaultErrorMessage) => {\n let errMessage = error.message;\n let defaultErr = defaultErrorMessage;\n\n if (error.force) {\n if (error.detail) {\n return `${error.message}: ${error.detail}`;\n }\n return error.message;\n }\n\n if (error.response) {\n errMessage = error.response.data.error;\n defaultErr = error.response.data.error;\n }\n\n return errorMap[errMessage] || defaultErr;\n};\n\nexport const isSafePaymentError = error => {\n return error !== DEFAULT_ERROR;\n};\n\nexport const isValidPhoneNumber = (number, countryCode) => {\n if (countryCode === 'GB') {\n return /^(?:07|\\+?447)(?:\\d\\s?){9}$/.test(number);\n }\n\n if (countryCode === 'IE') {\n return /^(?:08|\\+?3538)(?:\\d\\s?){8}$/.test(number);\n }\n\n return false;\n};\n\nexport const getInvalidPhoneNumberMessage = countryCode => {\n if (countryCode === 'GB') {\n return 'Please provide a valid UK (+447) mobile number';\n }\n\n if (countryCode === 'IE') {\n return 'Please provide a valid ROI (+3538) mobile number';\n }\n\n return 'Please provide a valid UK or IE mobile number';\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport TextField from '@material-ui/core/TextField';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography } from '@material-ui/core';\nimport red from '@material-ui/core/colors/red';\nimport { Auth } from 'aws-amplify';\nimport { Link } from 'react-router-dom';\nimport queryString from 'query-string';\nimport {\n validateEmail,\n validatePassword,\n validatePasswordContainsLowerCase,\n validatePasswordContainsUpperCase,\n validatePasswordContainsDigits,\n validatePasswordNoWhitespace\n} from '../helpers/validators';\nimport LoaderButton from '../components/LoaderButton';\nimport ConfirmationForm from '../components/ConfirmationForm';\nimport ContentHeader from '../components/ContentHeader';\nimport globalStyles from '../styles';\nimport PhoneNumberInput from '../components/PhoneNumberInput';\nimport { isValidPhoneNumber } from '../helpers/errors';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n textAlign: 'center',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '800px',\n margin: '20px auto 40px',\n padding: '0 10px 20px'\n },\n input: {\n margin: '0 20px 10px'\n },\n button: {\n width: '200px',\n height: '56px',\n margin: '0 auto 20px'\n },\n error: {\n margin: '0 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n login: {\n fontSize: '1em',\n marginBottom: '1em'\n },\n passwordHelp: {\n fontSize: '.8em'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n }\n});\n\nclass Register extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n email: '',\n phone: '',\n password: '',\n confirmPassword: '',\n error: '',\n newUser: null,\n loading: false,\n countryCode: process.env.REACT_APP_DEFAULT_PHONE_COUNTRY || 'GB'\n };\n }\n\n getLoginLink = () => {\n const { props } = this;\n const qs = queryString.parse(props.location.search, {\n ignoreQueryPrefix: true\n });\n\n if ('redirect' in qs) {\n return `/login?redirect=${qs.redirect}`;\n }\n\n return `/login`;\n };\n\n handleChange = event => {\n this.setState({\n [event.target.id]: event.target.value,\n error: false\n });\n };\n\n handlePhoneChange = number => {\n this.setState({\n phone: number,\n error: false\n });\n };\n\n handleCountryCodeChange = code => {\n this.setState({\n countryCode: code,\n error: false\n });\n };\n\n handleSubmit = async event => {\n event.preventDefault();\n const { email, phone, password } = this.state;\n\n if (this.validateForm(true)) {\n this.setState({ loading: true });\n\n try {\n const newUser = await Auth.signUp({\n username: email.toLowerCase(),\n password,\n attributes: {\n phone_number: phone\n }\n });\n window.localStorage.setItem(\n 'confirmation_code_sent',\n new Date().toISOString()\n );\n this.setState({\n newUser\n });\n } catch (e) {\n this.setState({\n error: e.message\n });\n }\n\n this.setState({ loading: false });\n }\n };\n\n validateForm() {\n const {\n email,\n phone,\n password,\n confirmPassword,\n countryCode\n } = this.state;\n let errorMessage = null;\n\n if (!validateEmail(email)) {\n errorMessage = 'Please enter a valid email';\n } else if (!isValidPhoneNumber(phone, countryCode)) {\n errorMessage =\n 'Please only provide numbers in the phone number and enough digits for a valid number.';\n } else if (!validatePassword(password)) {\n if (password.length < 8) {\n errorMessage = `Your password length is only ${\n password.length\n }. It needs to be at least 8.`;\n } else if (!validatePasswordContainsLowerCase(password)) {\n errorMessage = `Your password needs to contain at least 1 lowercase letter.`;\n } else if (!validatePasswordContainsUpperCase(password)) {\n errorMessage = `Your password needs to contain at least 1 uppercase letter.`;\n } else if (!validatePasswordContainsDigits(password)) {\n errorMessage = `Your password needs to contain at least 1 digit.`;\n } else if (!validatePasswordNoWhitespace(password)) {\n errorMessage = `Your password cannot contain whitespace.`;\n } else {\n errorMessage = `Only the following special characters are supported: @ $ ! % * ? & - _ = ' \" ~ \\` [ ] { } + ^ ( ) : ; , . | / \\\\ < > #`;\n }\n } else if (password !== confirmPassword) {\n errorMessage = 'Passwords do not match';\n }\n\n if (errorMessage) {\n this.setState({\n error: errorMessage\n });\n\n return false;\n }\n\n return true;\n }\n\n enableButton() {\n const { email, password, phone, confirmPassword } = this.state;\n\n return (\n email.length > 0 &&\n password.length > 0 &&\n phone &&\n phone.length > 0 &&\n password === confirmPassword\n );\n }\n\n renderForm() {\n const { classes } = this.props;\n const {\n email,\n phone,\n password,\n confirmPassword,\n error,\n loading\n } = this.state;\n\n return (\n\n
\n );\n }\n\n render() {\n const { newUser, email, password } = this.state;\n const { handleAuth } = this.props;\n\n return (\n \n {newUser === null ? (\n this.renderForm()\n ) : (\n
\n );\n }\n}\n\nRegister.propTypes = {\n classes: PropTypes.shape().isRequired,\n handleAuth: PropTypes.func.isRequired\n};\n\nexport default withStyles(styles)(Register);\n","/* eslint-disable no-restricted-globals */\nimport moment from 'moment';\nimport { getCurrencySymbol, parseTravelPattern } from './ticket';\n\nexport const formatDate = dateString => {\n return moment(dateString).format('ddd Do MMM YYYY HH:mm');\n};\n\nexport const formatTicketType = (\n serviceName,\n ticketType,\n ticketSubType,\n ticketTravelPattern,\n ticketOptionName\n) => {\n let ticketName = `${serviceName} ${ticketType\n .charAt(0)\n .toUpperCase()}${ticketType.slice(1)}`;\n\n ticketName = ticketName.replace('_', ' ');\n\n if (ticketOptionName) {\n ticketName += ` ${ticketOptionName}`;\n }\n\n if (ticketSubType && ticketSubType === 'pm_only') {\n ticketName += ' (PM Only)';\n } else if (ticketSubType && ticketSubType === 'am_only') {\n ticketName += ' (AM Only)';\n } else if (ticketSubType === 'custom' && ticketTravelPattern) {\n ticketName += ` (${parseTravelPattern(ticketTravelPattern)} Only)`;\n }\n\n return ticketName;\n};\n\nexport const formatPrice = (price, currency) => {\n const formattedPrice = Number(price);\n\n if (isNaN(formattedPrice)) {\n return '';\n }\n\n return `${getCurrencySymbol(currency)}${Number(price).toFixed(2)}`;\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { CardElement, injectStripe } from 'react-stripe-elements';\nimport {\n withStyles,\n Typography,\n withWidth,\n CircularProgress,\n Icon\n} from '@material-ui/core';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { withRouter } from 'react-router-dom';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport LoaderButton from './LoaderButton';\nimport { formatPrice } from '../helpers/formatters';\nimport {\n DEFAULT_ERROR,\n getFriendlyPaymentError,\n isSafePaymentError\n} from '../helpers/errors';\nimport globalStyles from '../styles';\n\nconst styles = {\n root: {\n marginTop: '20px',\n minHeight: '100px',\n marginBottom: '20px',\n padding: '0 10px 10px',\n textAlign: 'center'\n },\n card: {\n margin: '30px auto 15px auto',\n maxWidth: '360px',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n borderRadius: '4px',\n padding: '10px 0 10px 8px'\n },\n button: {\n margin: '20px 0 20px',\n width: '200px',\n height: '56px'\n },\n error: {\n margin: '20px 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n saveCard: {\n display: 'inline',\n marginLeft: 14,\n marginTop: 18\n },\n spinner: {\n marginTop: 60,\n marginBottom: 60,\n marginLeft: 'calc(50% - 22px)'\n },\n icon: {\n fontSize: 25\n },\n existingCardParent: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: 20\n },\n existingCard: {\n ...globalStyles.savedCard,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '0 10px',\n flexWrap: 'wrap'\n },\n existingCardHeader: {\n flexBasis: '100%',\n marginTop: 10,\n ...globalStyles.savedCardHeader\n },\n changeCard: {\n width: 'auto',\n height: 'auto',\n padding: '5px',\n lineHeight: '1',\n marginLeft: 10,\n fontSize: 12\n }\n};\n\nclass PaymentForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n processing: false,\n error: '',\n cardError: '',\n cardValid: false,\n paymentError: false,\n saveCard: false,\n saveReplacedCard: false,\n paymentMethods: null,\n isLoadingPaymentMethods: true\n };\n }\n\n async componentDidMount() {\n try {\n // get customer payment methods\n const { client } = this.props;\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/payment-methods/${\n currentSession.getAccessToken().payload.sub\n }/${client.slug}`,\n {\n headers\n }\n );\n\n // if any, set state\n if (\n response.data &&\n response.data.data &&\n response.data.data.length\n ) {\n this.setState({\n paymentMethods: response.data.data,\n isLoadingPaymentMethods: false\n });\n } else {\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n } catch (error) {\n console.error(error);\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n }\n\n uploadImage = async () => {\n const { passenger } = this.props;\n\n try {\n const response = await axios.post(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/pre-signed-url`,\n {\n fileType: passenger.photo.type,\n fileSize: passenger.photo.size\n }\n );\n\n // @NOTE: Skip photo upload for automated tests\n // This will also break photos for local dev.\n // @TODO: Fix so skipped for tests but available for local dev\n if (process.env.NODE_ENV !== 'development') {\n await axios.put(response.data.preSignedUrl, passenger.photo, {\n headers: {\n 'Content-Type': passenger.photo.type\n }\n });\n }\n\n return response.data.fileName;\n } catch (error) {\n throw new Error(error);\n }\n };\n\n handleSubmit = async () => {\n const { cardError, cardValid, paymentMethods } = this.state;\n const { buyAgain, disablePhoto, ticket } = this.props;\n\n // Only check for card errors if there is value to pay\n // Full voucher value means no card validation required\n if (Number(this.netPrice()) >= 1) {\n if (cardError) {\n this.setState({\n error: cardError\n });\n return;\n }\n if (!cardValid && !paymentMethods) {\n this.setState({\n error: 'Please complete all card details including postcode'\n });\n return;\n }\n } else if (Number(this.netPrice()) > 0) {\n this.setState({\n error: `Invalid amount. Amount can only be 0 or a minimum of ${formatPrice(\n 1,\n ticket.currency\n )} using card payment.`\n });\n return;\n }\n\n let imageFileName;\n\n this.setState({\n processing: true,\n error: ''\n });\n\n if (!buyAgain && !disablePhoto) {\n try {\n imageFileName = await this.uploadImage();\n } catch (e) {\n console.error(e);\n\n if (e.response && e.response.status === 403) {\n this.setState({\n processing: false,\n error:\n 'Your photo failed to upload in time. Please retry with either a smaller image or on a faster network (WiFi).'\n });\n } else {\n this.setState({\n processing: false,\n error:\n 'There was a problem uploading your image. Please ensure it is a portrait photo and less than 10MB in size.'\n });\n }\n return;\n }\n }\n\n try {\n await this.handleInitialPayment(imageFileName);\n } catch (e) {\n console.error(e);\n const error = getFriendlyPaymentError(e, DEFAULT_ERROR);\n this.setState({\n processing: false,\n error,\n paymentError: !isSafePaymentError(error)\n });\n }\n };\n\n handleInitialPayment = async imageFileName => {\n const {\n stripe,\n history,\n ticket,\n service,\n passenger,\n client,\n voucher,\n buyAgain,\n disablePhoto\n } = this.props;\n\n const { saveCard, saveReplacedCard, paymentMethods } = this.state;\n\n let paymentMethodId;\n\n // Only create payment method when there is something to charge.\n // A full value voucher will hide card field.\n if (this.netPrice() > 0) {\n if (paymentMethods && paymentMethods.length) {\n paymentMethodId = paymentMethods[0].id;\n } else {\n let paymentError;\n\n try {\n const {\n paymentMethod,\n error\n } = await stripe.createPaymentMethod(\n 'card',\n this.cardElement\n );\n\n if (!error) {\n paymentMethodId = paymentMethod.id;\n } else {\n paymentError = error;\n }\n } catch (paymentMethodError) {\n const err = new Error(\n `Error adding payment method: ${\n paymentMethodError.message\n }`\n );\n err.force = true;\n throw err;\n }\n\n if (paymentError) {\n if (paymentError.code === 'card_declined') {\n throw new Error('Card declined');\n } else if (paymentError.type === 'card_error') {\n throw new Error('Card error');\n } else if (paymentError.type === 'invalid_request_error') {\n const err = new Error('Invalid request');\n err.force = true;\n if (paymentError.param) {\n err.detail = paymentError.param;\n }\n throw err;\n } else {\n const err = new Error('Card api error');\n err.force = true;\n if (paymentError.message) {\n err.detail = paymentError.message;\n }\n throw err;\n }\n }\n }\n }\n\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const body = {\n payment_method_id: paymentMethodId,\n ticket,\n voucher,\n service,\n passenger: {\n ...passenger\n },\n client,\n save_card: saveCard || saveReplacedCard\n };\n\n if (!disablePhoto) {\n body.passenger.photo = buyAgain ? passenger.photo : imageFileName;\n }\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/stripe`,\n body,\n {\n headers\n }\n );\n\n if (response.data.id) {\n const ticketYear = ticket.year.replace('/', '-');\n\n const isAdhoc =\n ticket.type === 'single' ||\n ticket.type === 'return' ||\n ticket.type === 'week' ||\n ticket.type === '4_week';\n\n let confirmUrl = `/order-confirmed/${\n response.data.id\n }/${ticketYear}/${client.slug}/${service.id}/${ticket.id}`;\n\n if (isAdhoc) {\n confirmUrl = `/order-confirmed/adhoc/${\n response.data.id\n }/${ticketYear}/${client.id}/${client.slug}/${service.id}/${\n ticket.id\n }`;\n }\n\n if (ticket.sub_type === 'fixed') {\n confirmUrl += '?is_fixed=true';\n }\n\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleActionPayment(response.data, imageFileName);\n } else {\n throw new Error('Problem creating payment intent.');\n }\n };\n\n handleActionPayment = async (paymentResponse, imageFileName) => {\n const {\n stripe,\n history,\n ticket,\n service,\n passenger,\n client,\n voucher,\n buyAgain,\n disablePhoto\n } = this.props;\n\n const {\n error: errorAction,\n paymentIntent\n } = await stripe.handleCardAction(\n paymentResponse.payment_intent_client_secret\n );\n\n if (errorAction) {\n throw new Error(errorAction.message);\n } else {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const body = {\n payment_intent_id: paymentIntent.id,\n ticket,\n service,\n voucher,\n passenger: {\n ...passenger\n },\n client\n };\n\n if (!disablePhoto) {\n body.passenger.photo = buyAgain\n ? passenger.photo\n : imageFileName;\n }\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/stripe`,\n body,\n {\n headers\n }\n );\n\n if (response.data.id) {\n const ticketYear = ticket.year.replace('/', '-');\n\n const isAdhoc =\n ticket.type === 'single' ||\n ticket.type === 'return' ||\n ticket.type === 'week' ||\n ticket.type === '4_week';\n\n let confirmUrl = `/order-confirmed/${\n response.data.id\n }/${ticketYear}/${client.slug}/${service.id}/${ticket.id}`;\n\n if (isAdhoc) {\n confirmUrl = `/order-confirmed/adhoc/${\n response.data.id\n }/${ticketYear}/${client.id}/${client.slug}/${service.id}/${\n ticket.id\n }`;\n }\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleAction(response.data, imageFileName);\n } else {\n throw new Error('Problem confirming payment intent.');\n }\n }\n };\n\n handleReady = element => {\n this.cardElement = element;\n this.cardElement.on('change', response => {\n const cardValid = !response.empty && response.complete;\n const cardError = response.error ? response.error.message : '';\n this.setState({\n cardValid,\n cardError\n });\n });\n };\n\n netPrice = () => {\n const { ticket, voucher, passenger } = this.props;\n\n const useZones =\n ticket.pricing_model === 'Zonal' &&\n ticket.zone_prices &&\n passenger.zone;\n const ticketPrice = useZones\n ? ticket.zone_prices[passenger.zone]\n : ticket.price;\n\n if (voucher) {\n return ticketPrice - voucher.value;\n }\n return ticketPrice;\n };\n\n handleCheckboxChange = event => {\n this.setState({ [event.target.name]: event.target.checked });\n };\n\n render() {\n const { classes, width, client, service, ticket } = this.props;\n const {\n processing,\n error,\n paymentError,\n saveCard,\n saveReplacedCard,\n paymentMethods,\n isLoadingPaymentMethods\n } = this.state;\n\n const hasPaymentMethods = paymentMethods && paymentMethods.length;\n\n if (isLoadingPaymentMethods) {\n return (\n \n
\n )}\n \n \n By completing this purchase, I confirm I have read and\n accepted the following:\n \n {service.terms_url && (\n \n \n {client.name} T&Cs\n \n \n )}\n \n \n ShuttleID T&Cs\n \n \n\n {this.netPrice() >= 1 && (\n <>\n {!hasPaymentMethods && (\n <>\n \n {error}\n \n )}\n\n
\n );\n }\n}\n\nPaymentForm.propTypes = {\n classes: PropTypes.shape().isRequired,\n stripe: PropTypes.shape().isRequired,\n ticket: PropTypes.shape().isRequired,\n service: PropTypes.shape().isRequired,\n passenger: PropTypes.shape().isRequired,\n client: PropTypes.shape().isRequired,\n buyAgain: PropTypes.bool,\n disablePhoto: PropTypes.bool\n};\n\nPaymentForm.defaultProps = {\n buyAgain: false,\n disablePhoto: false\n};\n\nexport default withStyles(styles)(\n injectStripe(withRouter(withWidth()(PaymentForm)))\n);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Typography } from '@material-ui/core';\nimport TextField from '@material-ui/core/TextField';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport LoaderButton from './LoaderButton';\nimport { getCurrencySymbol } from '../helpers/ticket';\n\nconst styles = {\n root: {\n marginTop: '20px',\n minHeight: '100px',\n marginBottom: '20px',\n padding: '0 10px 10px',\n textAlign: 'center'\n },\n input: {\n width: '100%',\n maxWidth: '250px',\n display: 'inline-block',\n margin: '15px auto 25px',\n verticalAlign: 'unset',\n '& > div': {\n display: 'block'\n },\n '& input': {\n maxWidth: '220px'\n }\n },\n discountApplied: {\n marginTop: '-10px',\n marginBottom: '5px',\n color: 'rgba(44, 136, 0, 0.87)'\n },\n button: {\n margin: '15px 0 25px 10px',\n height: '56px',\n verticalAlign: 'top'\n },\n error: {\n marginTop: '-10px',\n marginBottom: '5px',\n color: red[500]\n }\n};\n\nclass VoucherForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n processing: false,\n error: '',\n voucherValue: 0.0,\n voucherId: '',\n applied: false\n };\n }\n\n handleChange = event => {\n this.setState({\n voucherId: event.target.value\n });\n };\n\n handleApply = async () => {\n this.setState({\n processing: true,\n error: '',\n applied: false,\n voucherValue: 0.0\n });\n\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const { voucherId } = this.state;\n const { client, setVoucher } = this.props;\n\n try {\n const response = await axios.post(\n `${process.env.REACT_APP_PAYMENT_API_ENDPOINT}/voucher/apply/${\n client.id\n }/${voucherId.trim()}`,\n null,\n {\n headers\n }\n );\n\n if (response.data.id) {\n this.setState({\n processing: false,\n applied: true,\n voucherValue: response.data.value,\n voucherCurrency: response.data.currency || 'gbp'\n });\n\n setVoucher(response.data);\n } else {\n this.setState({\n error: 'Invalid voucher code.',\n processing: false,\n applied: false\n });\n setVoucher(null);\n }\n } catch (e) {\n console.error(e);\n this.setState({\n error: 'Invalid voucher code.',\n processing: false,\n applied: false\n });\n setVoucher(null);\n }\n };\n\n render() {\n const { classes, message } = this.props;\n const {\n voucherId,\n processing,\n error,\n applied,\n voucherValue,\n voucherCurrency\n } = this.state;\n\n const enableTextField = !applied;\n\n return (\n \n \n \n \n \n
\n )}\n \n )}\n {hasPaymentMethods && (\n \n
\n )}\n \n )}\n {error && (\n \n \n credit_card\n \n \n ****-****-****-\n {paymentMethods[0].card.last4}\n \n {\n this.setState({\n paymentMethods: null,\n saveReplacedCard: true\n });\n }}\n />\n
\n \n Saved card\n
\n \n \n {getCurrencySymbol(voucherCurrency)}\n {voucherValue} voucher code applied!\n \n {message}\n \n )}\n {error && (\n \n {error}\n \n )}\n
\n );\n }\n}\n\nVoucherForm.propTypes = {\n classes: PropTypes.shape().isRequired,\n client: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(VoucherForm);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { withStyles, Typography, Button } from '@material-ui/core';\nimport { Elements, StripeProvider } from 'react-stripe-elements';\nimport PaymentForm from './PaymentForm';\nimport VoucherForm from './VoucherForm';\nimport ContentHeader from './ContentHeader';\nimport {\n formatTicketType,\n formatDate,\n formatPrice\n} from '../helpers/formatters';\nimport { getCurrencySymbol } from '../helpers/ticket';\n\nconst styles = {\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)'\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n imagePreview: {\n minHeight: '56px',\n margin: '20px auto 0',\n width: '100%',\n maxWidth: '400px',\n display: 'flex',\n justifyContent: 'center',\n '& > img': {\n maxWidth: '100%'\n },\n '@media only screen and (max-device-width: 400px)': {\n margin: '0 auto 0'\n }\n }\n};\n\nclass ConfirmPurchase extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voucher: null,\n stripe: null\n };\n }\n\n async componentDidMount() {\n const { client } = this.props;\n const stripe = window.Stripe(process.env.REACT_APP_STRIPE_PUB_KEY, {\n stripeAccount: client.stripe_account_id\n });\n\n this.setState({\n stripe\n });\n }\n\n setVoucher = voucher => {\n this.setState({ voucher });\n };\n\n netPrice = price => {\n const { voucher } = this.state;\n if (voucher) {\n return price - voucher.value;\n }\n return price;\n };\n\n calcEndDate = (type, startDate) => {\n if (type === 'week') {\n const endDate = moment(startDate.toISOString());\n endDate.add(6, 'days').endOf('day');\n return endDate.format('ddd Do MMM YYYY');\n }\n\n if (type === '4_week') {\n const endDate = moment(startDate.toISOString());\n endDate\n .add(4, 'weeks')\n .subtract(1, 'days')\n .endOf('day');\n return endDate.format('ddd Do MMM YYYY');\n }\n\n if (type === 'return') {\n const endDate = moment(startDate.toISOString());\n endDate.endOf('day');\n return endDate.format('ddd Do MMM YYYY');\n }\n\n return 'Unknown';\n };\n\n render() {\n const {\n handleEdit,\n passenger,\n ticket,\n client,\n service,\n imagePreviewUrl,\n classes,\n buyAgain,\n disablePhoto,\n requireStudentId\n } = this.props;\n\n const { voucher, stripe } = this.state;\n\n if (!stripe) {\n return <>;\n }\n\n const isFlexiAndNotSingle =\n ticket.type === 'week' ||\n ticket.type === '4_week' ||\n ticket.type === 'return';\n\n const {\n firstName,\n lastName,\n zone,\n zoneStop,\n stop,\n dest,\n yr,\n startDate,\n startTime,\n id\n } = passenger;\n\n const useZones =\n ticket.pricing_model === 'Zonal' && ticket.zone_prices && zone;\n\n return (\n \n
\n \n
\n \n 
\n
\n )}\n \n \n Passenger: {firstName} {lastName}\n \n {requireStudentId && id && (\n \n Student ID: {id}\n \n )}\n {stop && (\n \n Bus stop: {stop}\n \n )}\n {zone && (\n \n Zone: {zone}\n \n )}\n {zoneStop && (\n \n Bus stop: {zoneStop}\n \n )}\n {dest && (\n \n Destination: {dest}\n \n )}\n {yr && (\n \n Year group:{' '}\n \n {yr}\n \n \n )}\n \n Ticket:{' '}\n {formatTicketType(\n service.name,\n ticket.type,\n ticket.sub_type,\n ticket.travel_pattern,\n ticket.name\n )}\n \n {ticket.start && (\n \n Valid from: {formatDate(ticket.start)}\n \n )}\n {ticket.expiry && (\n \n Valid until: {formatDate(ticket.expiry)}\n \n )}\n {startDate && startTime && (\n \n Valid: {startDate.format('ddd Do MMM YYYY')}{' '}\n - {startTime.toUpperCase()} Only\n \n )}\n {startDate && isFlexiAndNotSingle && (\n <>\n \n Valid from:{' '}\n {startDate.format('ddd Do MMM YYYY')}{' '}\n \n \n Valid until:{' '}\n {this.calcEndDate(\n ticket.type,\n startDate\n )}\n \n \n )}\n \n Price:{' '}\n {formatPrice(\n this.netPrice(\n useZones\n ? ticket.zone_prices[zone]\n : ticket.price\n ),\n ticket.currency\n )}{' '}\n {ticket.type === 'flexi' &&\n `(${\n ticket.default_trips\n } trips x ${getCurrencySymbol(\n ticket.currency\n )}${\n useZones\n ? ticket.zone_trip_prices[zone]\n : ticket.trip_price\n })`}\n \n \n Edit\n \n
\n \n
\n \n \n
\n \n \n This type of ticket is currently unavailable.\n \n \n Please check again soon or contact your transport operator\n directly for more information.\n \n
\n );\n }\n\n return (\n \n );\n};\n\nBuyAgainForm.propTypes = {\n handleChange: PropTypes.func.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n handleDateChange: PropTypes.func,\n passenger: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n stop: PropTypes.string,\n dest: PropTypes.string\n }).isRequired,\n service: PropTypes.shape().isRequired,\n ticket: PropTypes.shape({\n type: PropTypes.string\n }),\n classes: PropTypes.shape().isRequired,\n requireStudentId: PropTypes.bool\n};\n\nBuyAgainForm.defaultProps = {\n ticket: null,\n handleDateChange: () => {},\n requireStudentId: false\n};\n\nexport default withStyles(styles)(BuyAgainForm);\n","import moment from 'moment';\n// eslint-disable-next-line import/prefer-default-export\nexport const getAcademicYear = day => {\n const shortYear = Number(moment(day).format(`YY`));\n const monthDay = moment(day).format(`MMDD`);\n const academicYear =\n monthDay >= '0801'\n ? `${shortYear}/${shortYear + 1}`\n : `${shortYear - 1}/${shortYear}`;\n return academicYear;\n};\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport { Typography, withStyles, CircularProgress } from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport moment from 'moment';\nimport ConfirmPurchase from '../components/ConfirmPurchase';\nimport { getYearGroups, hasValidZonePricing } from '../helpers/ticket';\nimport { contactOperatorString } from '../helpers/contact';\nimport BuyAgainForm from '../components/BuyAgainForm';\nimport { getAcademicYear } from '../helpers/date';\n\nconst styles = theme => ({\n root: {\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n error: {\n margin: '20px 0 0 5px',\n color: red[500],\n minHeight: '20px',\n textAlign: 'center'\n },\n spinner: {\n marginLeft: 'calc(50% - 22px)',\n marginTop: '60px'\n },\n availabilityWarning: {\n background: 'red',\n textAlign: 'center',\n marginBottom: 20,\n padding: 5\n },\n availabilityWarningHeading: {\n color: 'white',\n fontWeight: 'bold'\n },\n availabilityWarningText: {\n color: 'white'\n }\n});\n\nclass BuyAgain extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: '',\n passengerData: {\n firstName: '',\n lastName: '',\n id: '',\n stop: '',\n dest: '',\n photo: null,\n startDate: null,\n startTime: '',\n yr: '',\n zone: '',\n zoneStop: ''\n },\n passengerSubmitted: false,\n ticket: null,\n client: null,\n service: null,\n serviceAvailability: null,\n isLoading: true\n };\n }\n\n async componentDidMount() {\n const {\n match: {\n params: {\n clientId,\n year,\n serviceId,\n ticketId,\n oldCustomerTicketId\n }\n }\n } = this.props;\n\n let client;\n\n try {\n client = await this.getClientData(clientId);\n } catch (e) {\n this.setState({\n isLoading: false,\n error:\n 'There was a problem retrieving the ticket. Please try again later or contact our support team.'\n });\n return;\n }\n\n try {\n if (\n process.env.REACT_APP_DISABLE_EXPIRED_TICKETS === '1' &&\n getAcademicYear() > year.replace('-', '/')\n ) {\n throw new Error('Expired ticket year');\n }\n\n const oldTicket = await this.getOldTicketData(oldCustomerTicketId);\n const service = this.extractService(client, serviceId);\n const ticket = await this.getTicketData(\n client,\n year,\n service,\n ticketId\n );\n let serviceAvailability = null;\n\n if (\n ticket.type === 'single' ||\n ticket.type === 'return' ||\n ticket.type === 'week' ||\n ticket.type === '4_week'\n ) {\n serviceAvailability = await this.getServiceAvailability(\n client.slug,\n serviceId,\n year\n );\n }\n\n this.setState({\n client,\n ticket,\n service,\n serviceAvailability,\n passengerData: {\n firstName: oldTicket.passenger.first_name,\n lastName: oldTicket.passenger.last_name,\n stop: oldTicket.stop,\n photo: oldTicket.passenger.photo || null,\n id: oldTicket.ext_id || null,\n startDate: null,\n startTime: '',\n yr: oldTicket.yr,\n dest: oldTicket.dest,\n zone: oldTicket.zone,\n zoneStop: oldTicket.zone_stop\n },\n isLoading: false,\n error: ''\n });\n } catch (e) {\n console.error(e);\n let errorMessage =\n 'There was a problem retrieving the ticket. Please try again later or contact our support team.';\n\n if (e.message === 'Ticket unavailable') {\n errorMessage = `This ticket type is now sold out. Please contact ${contactOperatorString(\n client\n )} for more information regarding ticket availability.`;\n }\n\n if (e.message === 'Ticket disabled') {\n errorMessage = `Ticket disabled by your transport provider. Please contact ${contactOperatorString(\n client\n )} for more information.`;\n }\n\n if (e.message === 'Ticket expired') {\n errorMessage = `This ticket type has a fixed expiry date which has now expired. Please contact ${contactOperatorString(\n client\n )} for an alternative ticket type to purchase.`;\n }\n\n if (e.message === 'Zonal pricing misconfiguration') {\n errorMessage = `Zonal pricing on this ticket has not been configured. Please contact ${contactOperatorString(\n client\n )} to request they update their pricing.`;\n }\n\n if (e.message === 'Expired ticket year') {\n errorMessage = `This ticket type was valid for a previous year and has now expired. Please contact ${contactOperatorString(\n client\n )} for an alternative ticket type to purchase.`;\n }\n\n if (e.message === 'No service') {\n errorMessage = `This service has either been discontinued or does not exist. Please contact ${contactOperatorString(\n client\n )} for an alternative ticket type to purchase.`;\n }\n\n this.setState({\n isLoading: false,\n error: errorMessage\n });\n }\n }\n\n getOldTicketData = async id => {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${process.env.REACT_APP_API_ENDPOINT}/customer-ticket/user-id/${\n currentSession.getAccessToken().payload.sub\n }/${id}`,\n {\n headers\n }\n );\n\n return response.data;\n };\n\n getClientData = async clientSlug => {\n const response = await axios.get(\n `${process.env.REACT_APP_API_ENDPOINT}/client/${clientSlug}`\n );\n\n return response.data;\n };\n\n getTicketData = async (client, year, service, ticketId) => {\n const response = await axios.get(\n `${process.env.REACT_APP_TICKET_API_ENDPOINT}/service/${\n service.id\n }/tickets/${year}`\n );\n\n if (!response.data.length) {\n throw new Error();\n }\n\n const ticket = response.data.find(item => item.id === ticketId);\n\n if (!ticket) {\n throw new Error();\n }\n\n if (ticket.is_enabled === false) {\n throw new Error('Ticket disabled');\n }\n\n if (ticket.available === false) {\n throw new Error('Ticket unavailable');\n }\n\n if (ticket.pricing_model === 'Zonal') {\n if (!hasValidZonePricing(ticket, service)) {\n throw new Error('Zonal pricing misconfiguration');\n }\n }\n\n if (\n ticket.expiry &&\n process.env.REACT_APP_DISABLE_EXPIRED_TICKETS === '1'\n ) {\n const now = moment();\n const expiry = moment(ticket.expiry);\n\n if (now.toISOString() > expiry.toISOString()) {\n throw new Error('Ticket expired');\n }\n }\n\n return ticket;\n };\n\n getServiceAvailability = async (clientSlug, serviceId, year) => {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/service-availability/${clientSlug}/${serviceId}/${year}`,\n {\n headers\n }\n );\n\n return response.data;\n };\n\n handleChange = event => {\n const { passengerData } = this.state;\n this.setState({\n passengerData: {\n ...passengerData,\n [event.target.name]: event.target.value\n },\n error: ''\n });\n };\n\n handleDateChange = date => {\n const { passengerData } = this.state;\n this.setState({\n passengerData: {\n ...passengerData,\n startDate: date\n },\n error: ''\n });\n };\n\n handleSubmitPassenger = event => {\n event.preventDefault();\n this.setState({\n passengerSubmitted: true\n });\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n };\n\n handleEditPassenger = () => {\n this.setState({\n passengerSubmitted: false\n });\n };\n\n passengerValid = () => {\n const { passengerData, service, client } = this.state;\n\n let stopSelectionValid = true;\n let yearGroupValid = true;\n let destValid = true;\n let zoneSelectionValid = true;\n\n const useZones = service.zones && passengerData.zone;\n\n if (service && 'stops' in service && !useZones) {\n stopSelectionValid = service.stops.includes(passengerData.stop);\n }\n\n if (useZones) {\n const zone =\n passengerData.zone &&\n service.zones.find(\n serviceZone => serviceZone.name === passengerData.zone\n );\n\n if (zone && (!zone.stops || !zone.stops.length)) {\n zoneSelectionValid = true;\n } else if (\n zone &&\n zone.stops &&\n zone.stops.includes(passengerData.zoneStop)\n ) {\n zoneSelectionValid = true;\n } else {\n zoneSelectionValid = false;\n }\n }\n\n if (service && getYearGroups(service.yr_groups).length) {\n if (!passengerData.yr) {\n yearGroupValid = false;\n }\n }\n\n if (service && 'destinations' in service) {\n destValid = service.destinations.includes(passengerData.dest);\n }\n\n const requireStudentId = client.features.require_id === 'student';\n const isIdValid =\n !requireStudentId || (requireStudentId && passengerData.id);\n\n return (\n stopSelectionValid &&\n passengerData.firstName &&\n passengerData.lastName &&\n yearGroupValid &&\n destValid &&\n zoneSelectionValid &&\n isIdValid\n );\n };\n\n showConfirmPurchase = () => {\n const { ticket, passengerSubmitted, service } = this.state;\n\n return this.passengerValid() && ticket && service && passengerSubmitted;\n };\n\n formatRemainingTickets = ticket => {\n const ticketWord = ticket.remaining > 1 ? 'tickets' : 'ticket';\n return `Only ${ticket.remaining} ${ticketWord} left, hurry!`;\n };\n\n extractService(client, serviceId) {\n try {\n const { services = [] } = client;\n\n if (!services.length) {\n throw new Error();\n }\n\n const service = services.find(item => item.id === serviceId);\n\n if (!service) {\n throw new Error('No service');\n }\n\n return service;\n } catch (e) {\n this.setState({\n error:\n 'There was a problem retrieving the ticket info, please try again later'\n });\n return null;\n }\n }\n\n render() {\n const {\n passengerData,\n ticket,\n client,\n service,\n serviceAvailability,\n error,\n isLoading\n } = this.state;\n\n const { classes } = this.props;\n\n if (isLoading) {\n return (\n \n
\n );\n }\n\n if (error) {\n return (\n \n \n {error}\n \n
\n );\n }\n\n const disablePhoto =\n client && client.features && client.features.disable_photo === true;\n\n const requireStudentId =\n client &&\n client.features &&\n client.features.require_id === 'student';\n\n const showAvailabilityWarning =\n 'remaining' in ticket &&\n ticket.remaining > 0 &&\n ticket.remaining <= 10;\n\n return (\n \n {showAvailabilityWarning && (\n
\n );\n }\n}\n\nexport default withStyles(styles)(BuyAgain);\n","import React from 'react';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Select from '@material-ui/core/Select';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport { getCurrencySymbol } from '../helpers/ticket';\n\nconst renderZonePricing = ({ serviceZone, ticket }) => {\n const price = ticket.zone_prices[serviceZone.name];\n\n if (ticket.payment_type === 'dd') {\n const monthly = `${\n ticket.num_monthly_payments\n } monthly payments x ${getCurrencySymbol(ticket.currency)}${ticket\n .zone_prices_monthly[serviceZone.name] || '0.00'}`;\n const deposit = `${getCurrencySymbol(ticket.currency)}${ticket\n .zone_prices_deposit[serviceZone.name] || '0.00'}`;\n return `${getCurrencySymbol(\n ticket.currency\n )}${price} (${deposit} + ${monthly})`;\n }\n\n if (ticket.type === 'flexi') {\n return `${getCurrencySymbol(ticket.currency)}${price} (${\n ticket.default_trips\n } trips x ${getCurrencySymbol(ticket.currency)}${\n ticket.zone_trip_prices[serviceZone.name]\n })`;\n }\n\n return `${getCurrencySymbol(ticket.currency)}${price}`;\n};\n\nconst renderZoneOption = ({ classes, serviceZone, ticket }) => (\n \n \n {this.formatRemainingTickets(ticket)}\n \n \n If you need more tickets than available please do\n not purchase this ticket.\n \n
\n )}\n {this.showConfirmPurchase() ? (\n \n
\n ) : (\n \n \n This type of ticket is currently unavailable.\n \n \n Please check again soon or contact your transport operator\n directly for more information.\n \n
\n );\n }\n\n return (\n \n );\n};\n\nPassengerForm.propTypes = {\n handleChange: PropTypes.func.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n handleDateChange: PropTypes.func,\n handleImageChange: PropTypes.func.isRequired,\n passenger: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n stop: PropTypes.string,\n photo: PropTypes.object\n }).isRequired,\n service: PropTypes.shape().isRequired,\n imagePreviewUrl: PropTypes.string,\n ticket: PropTypes.shape({\n type: PropTypes.string\n }),\n disablePhoto: PropTypes.bool,\n requireStudentId: PropTypes.bool,\n classes: PropTypes.shape().isRequired\n};\n\nPassengerForm.defaultProps = {\n imagePreviewUrl: '',\n ticket: null,\n disablePhoto: false,\n requireStudentId: false,\n handleDateChange: () => {}\n};\n\nexport default withStyles(styles)(PassengerForm);\n","import React, { Component } from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport { withStyles, Typography } from '@material-ui/core';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport LoaderButton from './LoaderButton';\n\nconst styles = {\n root: {\n marginTop: '20px',\n minHeight: '100px',\n marginBottom: '20px',\n padding: '0 10px 10px',\n textAlign: 'center'\n },\n card: {\n margin: '30px auto 0 auto',\n maxWidth: '360px',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n borderRadius: '4px',\n padding: '10px 0 10px 8px'\n },\n button: {\n margin: '40px 0 20px',\n width: '200px',\n height: '56px'\n },\n error: {\n margin: '20px 20px 10px',\n color: red[500],\n minHeight: '20px'\n }\n};\n\nclass DirectDebitPaymentForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n processing: false,\n error: ''\n };\n }\n\n uploadImage = async () => {\n const { passenger } = this.props;\n\n try {\n const response = await axios.post(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/pre-signed-url`,\n {\n fileType: passenger.photo.type,\n fileSize: passenger.photo.size\n }\n );\n\n if (process.env.NODE_ENV !== 'development') {\n await axios.put(response.data.preSignedUrl, passenger.photo, {\n headers: {\n 'Content-Type': passenger.photo.type\n }\n });\n }\n\n return response.data.fileName;\n } catch (error) {\n throw new Error(error);\n }\n };\n\n handleSubmit = async () => {\n const {\n history,\n ticket,\n service,\n passenger,\n client,\n voucher,\n disablePhoto\n } = this.props;\n this.setState({\n processing: true,\n error: ''\n });\n\n let imageFileName;\n\n if (!disablePhoto) {\n try {\n imageFileName = await this.uploadImage();\n } catch (e) {\n console.error(e);\n\n if (e.response && e.response.status === 403) {\n this.setState({\n processing: false,\n error:\n 'Your photo failed to upload in time. Please retry with either a smaller image or on a faster network (WiFi).'\n });\n } else {\n this.setState({\n processing: false,\n error:\n 'There was a problem uploading your image. Please ensure it is a portrait photo and less than 10MB in size.'\n });\n }\n return;\n }\n }\n\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const body = {\n ticket,\n service,\n passenger: {\n ...passenger\n },\n client,\n voucher\n };\n\n if (!disablePhoto) {\n body.passenger.photo = imageFileName;\n }\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/gocardless`,\n body,\n {\n headers\n }\n );\n\n if (response.data.id) {\n const ticketYear = ticket.year.replace('/', '-');\n const confirmUrl = `/order-confirmed/${\n response.data.id\n }/${ticketYear}/${client.slug}/${service.id}/${ticket.id}`;\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else {\n throw new Error('No ticket id generated.');\n }\n } catch (e) {\n console.error(e);\n this.setState({\n processing: false,\n error:\n 'There was a problem processing your payment, please try again later'\n });\n }\n };\n\n render() {\n const { classes, client, service } = this.props;\n const { processing, error } = this.state;\n\n return (\n \n \n By completing this purchase, I confirm I have read and\n accepted the following:\n \n {service.terms_url && (\n \n \n {client.name} T&Cs\n \n \n )}\n \n \n ShuttleID T&Cs\n \n \n \n {error}\n \n )}\n
\n );\n }\n}\n\nDirectDebitPaymentForm.propTypes = {\n classes: PropTypes.shape().isRequired,\n ticket: PropTypes.shape().isRequired,\n service: PropTypes.shape().isRequired,\n passenger: PropTypes.shape().isRequired,\n client: PropTypes.shape().isRequired,\n disablePhoto: PropTypes.bool\n};\n\nDirectDebitPaymentForm.defaultProps = {\n disablePhoto: false\n};\n\nexport default withStyles(styles)(withRouter(DirectDebitPaymentForm));\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Typography, Button } from '@material-ui/core';\nimport moment from 'moment';\nimport VoucherForm from './VoucherForm';\nimport DirectDebitPaymentForm from './DirectDebitPaymentForm';\nimport ContentHeader from './ContentHeader';\nimport {\n formatTicketType,\n formatDate,\n formatPrice\n} from '../helpers/formatters';\nimport { getCurrencySymbol } from '../helpers/ticket';\nimport globalStyles from '../styles';\n\nconst styles = () => ({\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)'\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n imagePreview: {\n minHeight: '56px',\n margin: '20px auto 0',\n width: '100%',\n maxWidth: '400px',\n display: 'flex',\n justifyContent: 'center',\n '& > img': {\n maxWidth: '100%'\n },\n '@media only screen and (max-device-width: 400px)': {\n margin: '0 auto 0'\n }\n },\n paymentHelp: {\n ...globalStyles.link,\n padding: '1em 0',\n display: 'block'\n }\n});\n\nclass ConfirmDirectDebitPurchase extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voucher: null\n };\n }\n\n setVoucher = voucher => {\n this.setState({ voucher });\n };\n\n netPrice = price => {\n const { voucher } = this.state;\n if (voucher) {\n return price - voucher.value;\n }\n return price;\n };\n\n calcMonthlyPriceAfterDiscount = (ticket, priceMonthly) => {\n const { voucher } = this.state;\n\n if (voucher) {\n const monthlyDiscount =\n (Number(voucher.value) * 100) /\n Number(ticket.num_monthly_payments);\n return (Number(priceMonthly) * 100 - monthlyDiscount) / 100;\n }\n\n return Number(priceMonthly);\n };\n\n getVoucherMessage = (\n ticket,\n total,\n roundedMonthlyPricePenceAfterDiscount,\n priceMonthly,\n priceDeposit\n ) => {\n const hasFullValueVoucher = roundedMonthlyPricePenceAfterDiscount < 100;\n const hasMonthlyPayments = parseFloat(priceMonthly) > 0;\n const { voucher } = this.state;\n\n if (!hasMonthlyPayments) {\n return '';\n }\n\n if (!voucher) {\n return '';\n }\n\n if (hasFullValueVoucher) {\n return (\n <>\n \n
\n );\n }\n}\n\nConfirmDirectDebitPurchase.propTypes = {\n handleEdit: PropTypes.func.isRequired,\n passenger: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n photo: PropTypes.object,\n stop: PropTypes.string,\n dest: PropTypes.string\n }).isRequired,\n ticket: PropTypes.shape({\n start: PropTypes.string,\n expiry: PropTypes.string,\n price: PropTypes.string,\n price_monthly: PropTypes.string,\n price_deposit: PropTypes.string\n }).isRequired,\n client: PropTypes.shape().isRequired,\n service: PropTypes.shape().isRequired,\n imagePreviewUrl: PropTypes.string,\n classes: PropTypes.shape().isRequired,\n disablePhoto: PropTypes.bool,\n requireStudentId: PropTypes.bool\n};\n\nConfirmDirectDebitPurchase.defaultProps = {\n imagePreviewUrl: '',\n disablePhoto: false,\n requireStudentId: false\n};\n\nexport default withStyles(styles)(ConfirmDirectDebitPurchase);\n","export const getOrientation = (file, callback) => {\n const reader = new FileReader();\n reader.onload = e => {\n const view = new DataView(e.target.result);\n if (view.getUint16(0, false) !== 0xffd8) {\n return callback(-2);\n }\n const length = view.byteLength;\n let offset = 2;\n while (offset < length) {\n if (view.getUint16(offset + 2, false) <= 8) {\n return callback(-1);\n }\n const marker = view.getUint16(offset, false);\n offset += 2;\n if (marker === 0xffe1) {\n const markerVar = view.getUint32((offset += 2), false);\n if (markerVar !== 0x45786966) {\n return callback(-1);\n }\n\n const little = view.getUint16((offset += 6), false) === 0x4949;\n offset += view.getUint32(offset + 4, little);\n const tags = view.getUint16(offset, little);\n offset += 2;\n for (let i = 0; i < tags; i += 1) {\n if (view.getUint16(offset + i * 12, little) === 0x0112) {\n return callback(\n view.getUint16(offset + i * 12 + 8, little)\n );\n }\n }\n } else if (\n // eslint-disable-next-line no-bitwise\n (marker & 0xff00) !==\n 0xff00\n ) {\n break;\n } else {\n offset += view.getUint16(offset, false);\n }\n }\n return callback(-1);\n };\n reader.readAsArrayBuffer(file);\n};\n\nexport const resetOrientation = (srcBase64, srcOrientation, callback) => {\n const img = new window.Image();\n\n img.onload = () => {\n const { width, height } = img;\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n // set proper canvas dimensions before transform & export\n if (srcOrientation > 4 && srcOrientation < 9) {\n canvas.width = height;\n canvas.height = width;\n } else {\n canvas.width = width;\n canvas.height = height;\n }\n\n // transform context before drawing image\n /* eslint-disable indent */\n switch (srcOrientation) {\n case 2:\n ctx.transform(-1, 0, 0, 1, width, 0);\n break;\n case 3:\n ctx.transform(-1, 0, 0, -1, width, height);\n break;\n case 4:\n ctx.transform(1, 0, 0, -1, 0, height);\n break;\n case 5:\n ctx.transform(0, 1, 1, 0, 0, 0);\n break;\n case 6:\n ctx.transform(0, 1, -1, 0, height, 0);\n break;\n case 7:\n ctx.transform(0, -1, -1, 0, height, width);\n break;\n case 8:\n ctx.transform(0, -1, 1, 0, 0, width);\n break;\n default:\n break;\n }\n /* eslint-enable indent */\n\n ctx.drawImage(img, 0, 0);\n\n callback(canvas.toDataURL('image/jpeg'));\n };\n\n img.src = srcBase64;\n};\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport {\n Typography,\n withStyles,\n CircularProgress,\n Button\n} from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport { Redirect, Link } from 'react-router-dom';\nimport moment from 'moment';\nimport Icon from '@material-ui/core/Icon';\nimport IconButton from '@material-ui/core/IconButton';\nimport PassengerForm from '../components/PassengerForm';\nimport ConfirmPurchase from '../components/ConfirmPurchase';\nimport ConfirmDirectDebitPurchase from '../components/ConfirmDirectDebitPurchase';\nimport { getOrientation, resetOrientation } from '../helpers/image';\nimport { getYearGroups, hasValidZonePricing } from '../helpers/ticket';\nimport { contactOperatorString } from '../helpers/contact';\nimport { getAcademicYear } from '../helpers/date';\n\nconst styles = theme => ({\n root: {\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n error: {\n margin: '20px 0 0 5px',\n color: red[500],\n minHeight: '20px',\n textAlign: 'center'\n },\n spinner: {\n marginLeft: 'calc(50% - 22px)',\n marginTop: '60px'\n },\n availabilityWarning: {\n background: 'red',\n textAlign: 'center',\n marginBottom: 20,\n padding: 5\n },\n availabilityWarningHeading: {\n color: 'white',\n fontWeight: 'bold',\n fontSize: '1rem'\n },\n availabilityWarningText: {\n color: 'white'\n },\n modalSplash: {\n position: 'fixed',\n top: 0,\n left: 0,\n zIndex: 1000,\n height: '100vh',\n width: '100vw',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n overflow: 'scroll',\n background: 'rgba(0, 0, 0, 0.6)'\n },\n modalContainer: {\n maxWidth: '600px',\n padding: '25px 25px 35px 25px',\n background: 'white',\n borderRadius: '4px',\n [theme.breakpoints.down('xs')]: {\n padding: '15px 15px 25px 15px'\n }\n },\n modalHeader: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n '&> h5': {\n [theme.breakpoints.down('xs')]: {\n fontSize: '1.3rem'\n }\n }\n },\n existingTickets: {\n display: 'flex',\n flexDirection: 'column',\n margin: '20px 0',\n alignItems: 'center',\n borderTop: '1px solid #eee'\n },\n existingTicket: {\n display: 'flex',\n width: '100%',\n justifyContent: 'space-between',\n borderBottom: '1px solid #eee',\n padding: '5px 0'\n },\n existingTicketDetails: {\n display: 'flex',\n flexDirection: 'column'\n },\n breakLine: {\n width: '100%',\n height: '1px',\n background: 'black',\n margin: '0 0 20px'\n },\n modalButtons: {\n alignItems: 'center',\n marginTop: '30px',\n display: 'flex',\n flexDirection: 'column',\n gap: '10px'\n },\n existingTicketButton: {\n alignSelf: 'center',\n fontSize: '0.9rem',\n padding: '2px 5px'\n },\n duplicateWarn: {\n fontSize: '0.9rem',\n textAlign: 'center'\n },\n errorLink: {\n color: 'red'\n }\n});\n\nclass CreateTicket extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: '',\n passengerData: {\n firstName: '',\n lastName: '',\n stop: '',\n dest: '',\n photo: null,\n startDate: null,\n startTime: '',\n yr: '',\n zone: '',\n zoneStop: '',\n id: ''\n },\n passengerSubmitted: false,\n imagePreviewUrl: null,\n ticket: null,\n existingTickets: null,\n showCheckTickets: false,\n client: null,\n service: null,\n serviceAvailability: null,\n mandates: null,\n isLoading: true\n };\n }\n\n async componentDidMount() {\n const {\n match: {\n params: { clientSlug, year, serviceId, ticketId }\n },\n classes\n } = this.props;\n\n let client;\n\n try {\n client = await this.getClientData(clientSlug, serviceId);\n } catch (e) {\n this.setState({\n isLoading: false,\n error:\n 'There was a problem retrieving the ticket. Please try again later or contact our support team.'\n });\n return;\n }\n\n try {\n if (\n process.env.REACT_APP_DISABLE_EXPIRED_TICKETS === '1' &&\n getAcademicYear() > year.replace('-', '/')\n ) {\n throw new Error('Expired ticket year');\n }\n\n const service = this.extractService(client, serviceId);\n const ticket = await this.getTicketData(year, service, ticketId);\n\n const tickets = await this.getCustomerTickets();\n const now = new Date();\n const existingTickets = tickets.data.items.filter(\n customerTicket =>\n customerTicket.ticket_id === ticket.id &&\n ['annual', 'autumn', 'spring', 'summer', 'flexi'].includes(\n ticket.type\n ) &&\n now < new Date(customerTicket.expiry) &&\n customerTicket.ticket_status !== 'void'\n );\n\n const activeFlexiTicketsInDebit = tickets.data.items.filter(\n ct =>\n ct.type === 'flexi' &&\n now < new Date(ct.expiry) &&\n ct.ticket_status !== 'void' &&\n ct.trips - ct.trips_taken < 0\n );\n\n if (activeFlexiTicketsInDebit && activeFlexiTicketsInDebit.length) {\n throw new Error('Flexi debit on account');\n }\n\n let serviceAvailability = null;\n\n if (\n ticket.type === 'single' ||\n ticket.type === 'return' ||\n ticket.type === 'week' ||\n ticket.type === '4_week'\n ) {\n serviceAvailability = await this.getServiceAvailability(\n clientSlug,\n serviceId,\n year\n );\n }\n\n let mandates = [];\n if (ticket && ticket.payment_type === 'dd') {\n mandates = await this.getMandates(client.id);\n }\n\n this.setState({\n client,\n ticket,\n existingTickets,\n showCheckTickets: existingTickets.length > 0,\n service,\n mandates,\n serviceAvailability,\n isLoading: false,\n error: ''\n });\n } catch (e) {\n console.error(e);\n let errorMessage =\n 'There was a problem retrieving the ticket. Please try again later or contact our support team.';\n\n if (e.message === 'Ticket unavailable') {\n errorMessage = `This ticket type is now sold out. Please contact ${contactOperatorString(\n client\n )} for more information regarding ticket availability.`;\n }\n\n if (e.message === 'Flexi debit on account') {\n errorMessage = (\n <>\n \n
\n\n {parseFloat(priceMonthly) > 0 && (\n \n \n
\n )}\n \n \n Passenger: {passenger.firstName}{' '}\n {passenger.lastName}\n \n {requireStudentId && passenger.id && (\n \n Student ID: {passenger.id}\n \n )}\n {passenger.stop && (\n \n Bus stop: {passenger.stop}\n \n )}\n {passenger.zone && (\n \n Zone: {passenger.zone}\n \n )}\n {passenger.zoneStop && (\n \n Bus stop: {passenger.zoneStop}\n \n )}\n {passenger.dest && (\n \n Destination: {passenger.dest}\n \n )}\n {passenger.yr && (\n \n Year group:{' '}\n \n {passenger.yr}\n \n \n )}\n \n Ticket:{' '}\n {formatTicketType(\n service.name,\n ticket.type,\n ticket.sub_type,\n ticket.travel_pattern,\n ticket.name\n )}\n \n \n Valid from: {formatDate(ticket.start)}\n \n \n Valid until: {formatDate(ticket.expiry)}\n \n {parseFloat(priceMonthly) <= 0 && (\n <>\n \n Total price:{' '}\n {(formatPrice(total), ticket.currency)}\n \n\n \n Edit\n \n \n )}\n {parseFloat(priceMonthly) > 0 && (\n
\n \n \n Edit\n \n \n Initial payment due now:{' '}\n {formatPrice(priceDeposit, ticket.currency)}\n \n \n Monthly payments:{' '}\n {formatPrice(\n monthlyPriceAfterDiscount,\n ticket.currency\n )}\n {' x '}\n {ticket.num_monthly_payments}\n {voucher && voucher.value && (\n <> (discounted)\n )}\n \n \n First monthly payment:{' 1st '}\n {moment(ticket.monthly_sub_start).format(\n 'MMMM YYYY'\n )}\n \n \n Total price:{' '}\n {formatPrice(total, ticket.currency)}\n \n
\n )}\n Pricing
\n\n
\n
\n )}\n\n {!hasFullValueVoucher && (\n \n
\n )}\n \n Your account has an active flexi ticket in debit.\n Ticket purchasing on your account is disabled until{' '}\n you have topped up your existing flexi ticket to{' '}\n settle the balance due.\n
\n\n Flexi tickets can be topped up from the{' '}\n \n My Tickets\n {' '}\n view or from the email notifications previously sent{' '}\n to you.\n
\n\n Please contact {contactOperatorString(client)} for{' '}\n more information.\n
\n \n );\n }\n\n if (e.message === 'Ticket disabled') {\n errorMessage = `Ticket disabled by your transport provider. Please contact ${contactOperatorString(\n client\n )} for more information.`;\n }\n\n if (e.message === 'Ticket expired') {\n errorMessage = `This ticket type has a fixed expiry date which has now expired. Please contact ${contactOperatorString(\n client\n )} for an alternative ticket type to purchase.`;\n }\n\n if (e.message === 'Zonal pricing misconfiguration') {\n errorMessage = `Zonal pricing on this ticket has not been configured. Please contact ${contactOperatorString(\n client\n )} to request they update their pricing.`;\n }\n\n if (e.message === 'Expired ticket year') {\n errorMessage = `This ticket type was valid for a previous year and has now expired. Please contact ${contactOperatorString(\n client\n )} for an alternative ticket type to purchase.`;\n }\n\n if (e.message === 'No service') {\n errorMessage = `This service has either been discontinued or does not exist. Please contact ${contactOperatorString(\n client\n )} for an alternative ticket type to purchase.`;\n }\n\n if (\n e.response &&\n e.response.status === 503 &&\n e.response.data.error &&\n e.response.data.error.key === 'gocardless.offline'\n ) {\n errorMessage = e.response.data.error.message;\n }\n\n this.setState({\n isLoading: false,\n error: errorMessage\n });\n }\n }\n\n getCustomerTickets = async () => {\n const currentSession = await Auth.currentSession();\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n return axios.get(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/list-by/user-id/${\n currentSession.getAccessToken().payload.sub\n }`,\n {\n headers\n }\n );\n };\n\n getClientData = async clientSlug => {\n const response = await axios.get(\n `${process.env.REACT_APP_API_ENDPOINT}/client/slug/${clientSlug}`\n );\n\n return response.data;\n };\n\n getTicketData = async (year, service, ticketId) => {\n const response = await axios.get(\n `${process.env.REACT_APP_TICKET_API_ENDPOINT}/service/${\n service.id\n }/tickets/${year}`\n );\n\n if (!response.data.length) {\n throw new Error();\n }\n\n const ticket = response.data.find(item => item.id === ticketId);\n\n if (!ticket) {\n throw new Error();\n }\n\n if (ticket.is_enabled === false) {\n throw new Error('Ticket disabled');\n }\n\n if (ticket.available === false) {\n throw new Error('Ticket unavailable');\n }\n\n if (ticket.pricing_model === 'Zonal') {\n if (!hasValidZonePricing(ticket, service)) {\n throw new Error('Zonal pricing misconfiguration');\n }\n }\n\n if (\n ticket.expiry &&\n process.env.REACT_APP_DISABLE_EXPIRED_TICKETS === '1'\n ) {\n const now = moment();\n const expiry = moment(ticket.expiry);\n\n if (now.toISOString() > expiry.toISOString()) {\n throw new Error('Ticket expired');\n }\n }\n\n return ticket;\n };\n\n getServiceAvailability = async (clientSlug, serviceId, year) => {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/service-availability/${clientSlug}/${serviceId}/${year}`,\n {\n headers\n }\n );\n\n return response.data;\n };\n\n getMandates = async clientId => {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-mandate/client/${clientId}`,\n {\n headers\n }\n );\n\n return response.data;\n };\n\n handleChange = event => {\n const { passengerData } = this.state;\n this.setState({\n passengerData: {\n ...passengerData,\n [event.target.name]: event.target.value\n },\n error: ''\n });\n };\n\n handleDateChange = date => {\n const { passengerData } = this.state;\n this.setState({\n passengerData: {\n ...passengerData,\n startDate: date\n },\n error: ''\n });\n };\n\n /**\n * @NOTE: Some pretty mad gymnastics going on to preview the image correctly as orientation may be stored in EXIF data\n * @SEE: https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side/32490603#32490603\n * @SEE: https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images\n */\n handleImageChange = event => {\n const reader = new FileReader();\n const file = event.target.files[0];\n const { passengerData } = this.state;\n\n if (file) {\n if (file.size > 10e7) {\n this.setState({\n error: 'Photo must be no more than 10MB'\n });\n } else {\n reader.onloadend = () => {\n getOrientation(file, srcOrientation => {\n resetOrientation(\n reader.result,\n srcOrientation,\n destBase64 => {\n this.setState({\n passengerData: {\n ...passengerData,\n photo: file\n },\n imagePreviewUrl: destBase64\n });\n }\n );\n });\n };\n reader.readAsDataURL(file);\n }\n }\n\n event.preventDefault();\n };\n\n handleSubmitPassenger = event => {\n event.preventDefault();\n this.setState({\n passengerSubmitted: true\n });\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n };\n\n handleEditPassenger = () => {\n this.setState({\n passengerSubmitted: false\n });\n };\n\n passengerValid = () => {\n const { passengerData, service, client } = this.state;\n\n let stopSelectionValid = true;\n let yearGroupValid = true;\n let destinationSelectionValid = true;\n let zoneSelectionValid = true;\n\n const useZones = service.zones && passengerData.zone;\n\n if (service && 'stops' in service && !useZones) {\n stopSelectionValid = service.stops.includes(passengerData.stop);\n }\n\n if (useZones) {\n const zone =\n passengerData.zone &&\n service.zones.find(\n serviceZone => serviceZone.name === passengerData.zone\n );\n\n if (zone && (!zone.stops || !zone.stops.length)) {\n zoneSelectionValid = true;\n } else if (\n zone &&\n zone.stops &&\n zone.stops.includes(passengerData.zoneStop)\n ) {\n zoneSelectionValid = true;\n } else {\n zoneSelectionValid = false;\n }\n }\n\n if (service && service.destinations && service.destinations.length) {\n destinationSelectionValid = service.destinations.includes(\n passengerData.dest\n );\n }\n\n if (service && getYearGroups(service.yr_groups).length) {\n if (!passengerData.yr) {\n yearGroupValid = false;\n }\n }\n\n const isPhotoValid =\n client.features.disable_photo === true || passengerData.photo;\n\n const requireStudentId = client.features.require_id === 'student';\n const isIdValid =\n !requireStudentId || (requireStudentId && passengerData.id);\n\n return (\n stopSelectionValid &&\n destinationSelectionValid &&\n passengerData.firstName &&\n passengerData.lastName &&\n isPhotoValid &&\n yearGroupValid &&\n zoneSelectionValid &&\n isIdValid\n );\n };\n\n showConfirmPurchase = () => {\n const { ticket, passengerSubmitted, service } = this.state;\n\n return this.passengerValid() && ticket && service && passengerSubmitted;\n };\n\n formatRemainingTickets = ticket => {\n const ticketWord = ticket.remaining > 1 ? 'tickets' : 'ticket';\n return `Only ${ticket.remaining} ${ticketWord} left, hurry!`;\n };\n\n extractService(client, serviceId) {\n try {\n const { services = [] } = client;\n\n if (!services.length) {\n throw new Error();\n }\n\n const service = services.find(item => item.id === serviceId);\n\n if (!service) {\n throw new Error('No service');\n }\n\n return service;\n } catch (e) {\n this.setState({\n error:\n 'There was a problem retrieving the ticket info, please try again later'\n });\n return null;\n }\n }\n\n renderTickets(existingTickets) {\n const { classes } = this.props;\n\n return (\n\n {existingTickets.map(ticket => {\n const {\n id,\n type,\n passenger,\n date_purchased: datePurchased,\n expiry,\n trips,\n trips_taken: tripsTaken\n } = ticket;\n\n return (\n
\n );\n }\n\n renderCheckTicketsModal(ticket, existingTickets) {\n const { classes } = this.props;\n\n let heroBody = 'You have purchased this ticket type before:';\n let actionBody = 'Are you sure you want to buy another?';\n if (ticket.type === 'flexi') {\n heroBody =\n 'You have purchased this ticket type before. Flexi tickets are active until the expiry date listed on your ticket. Until it expires, it just needs topping up with more credit.';\n actionBody =\n existingTickets.length > 1\n ? 'Would you like to top up an existing ticket instead?'\n : 'Would you like to top up this ticket instead?';\n }\n\n return (\n \n \n Top up\n \n ) : (\n \n View\n \n )}\n
\n );\n })}\n \n \n \n {passenger.first_name}{' '}\n {passenger.last_name}\n \n {type === 'flexi' && (\n \n {' '}\n {trips - tripsTaken} trips\n \n )}\n \n \n Purchased{' '}\n {moment(datePurchased).format(\n 'ddd Do MMM HH:mm'\n )}\n \n {type === 'flexi' && (\n \n Expires{' '}\n {moment(expiry).format(\n 'ddd Do MMM HH:mm'\n )}\n \n )}\n
\n {type === 'flexi' ? (\n \n
\n );\n }\n\n render() {\n const {\n passengerData,\n imagePreviewUrl,\n ticket,\n existingTickets,\n client,\n service,\n serviceAvailability,\n showCheckTickets,\n error,\n mandates,\n isLoading\n } = this.state;\n\n const {\n classes,\n match: {\n params: { year, serviceId, ticketId }\n }\n } = this.props;\n\n if (isLoading) {\n return (\n \n \n {heroBody}\n \n {this.renderTickets(existingTickets)}\n \n {actionBody}\n \n {ticket.type === 'flexi' ? (\n
\n \n \n Duplicate purchase check\n \n {\n this.setState({ showCheckTickets: false });\n }}\n >\n close \n \n
\n \n \n {existingTickets.length > 1 ? (\n \n Yes, view my tickets\n \n ) : (\n \n Yes, top up my ticket\n \n )}\n {\n this.setState({ showCheckTickets: false });\n }}\n >\n No, buy another flexi ticket\n \n
\n ) : (\n \n {\n this.setState({ showCheckTickets: false });\n }}\n >\n Yes, buy another\n \n \n
\n )}\n \n
\n );\n }\n\n if (error) {\n return (\n \n \n {error}\n \n
\n );\n }\n\n const disablePhoto =\n client && client.features && client.features.disable_photo === true;\n\n const requireStudentId =\n client &&\n client.features &&\n client.features.require_id === 'student';\n\n if (\n ticket &&\n ticket.payment_type === 'dd' &&\n mandates &&\n !mandates.length\n ) {\n return (\n \n {showAvailabilityWarning && (\n
\n );\n }\n}\n\nexport default withStyles(styles)(CreateTicket);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Button, Typography } from '@material-ui/core';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport TextField from '@material-ui/core/TextField';\nimport { withRouter } from 'react-router-dom';\nimport globalStyles from '../styles';\nimport PhoneNumberInput from './PhoneNumberInput';\nimport {\n getInvalidPhoneNumberMessage,\n isValidPhoneNumber\n} from '../helpers/errors';\n\nconst styles = theme => ({\n buttons: {\n marginTop: '20px',\n display: 'block'\n },\n button: {\n margin: '5px 5px'\n },\n icon: {\n fontSize: '16px',\n marginLeft: '5px'\n },\n mobileButtons: {\n display: 'none',\n [theme.breakpoints.down('sm')]: {\n display: 'block',\n justifyContent: 'center'\n }\n },\n mobileButton: {\n margin: '5px'\n },\n mobileIcon: {\n '& > img': {\n width: '19px'\n },\n width: '19px',\n marginLeft: '5px'\n },\n subheading: {\n margin: '20px 0 10px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n link: globalStyles.link,\n emailInput: {\n maxWidth: 162\n },\n sendButton: {\n height: '56px',\n margin: '0 0 0 10px',\n padding: '0.4em'\n },\n form: {\n marginTop: 30\n },\n error: {\n margin: '20px 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n asterisk: {\n display: 'none'\n },\n phoneParent: {\n display: 'flex',\n justifyContent: 'center'\n },\n phone: {\n maxWidth: 195,\n margin: '0 0 0px',\n display: 'inline-block',\n '& .MobileInputWrapper': {\n marginLeft: '0 !important',\n marginRight: '0 !important'\n }\n }\n});\n\nclass SendTicket extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n email: '',\n phoneNumber: '',\n loading: false,\n error: '',\n smsError: '',\n sent: false,\n smsSent: false,\n countryCode: process.env.REACT_APP_DEFAULT_PHONE_COUNTRY || 'GB'\n };\n }\n\n handleEmailChange = event => {\n this.setState({\n email: event.target.value.trim()\n });\n };\n\n handlePhoneChange = number => {\n this.setState({\n phoneNumber: number\n });\n };\n\n handleCountryCodeChange = code => {\n this.setState({\n countryCode: code\n });\n };\n\n handleEmailSubmit = async event => {\n event.preventDefault();\n this.setState({\n loading: true,\n error: ''\n });\n\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const { customerTicketId } = this.props;\n const { email } = this.state;\n\n await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/send/${customerTicketId}`,\n {\n email\n },\n {\n headers\n }\n );\n\n this.setState({\n loading: false,\n sent: true\n });\n } catch (e) {\n console.error(e);\n this.setState({\n loading: false,\n error: 'Ticket could not be sent. Please try again later.'\n });\n }\n };\n\n handleSmsSubmit = async event => {\n event.preventDefault();\n this.setState({\n loading: true,\n smsError: ''\n });\n\n const { phoneNumber, countryCode } = this.state;\n\n if (!isValidPhoneNumber(phoneNumber, countryCode)) {\n this.setState({\n loading: false,\n smsError: getInvalidPhoneNumberMessage(phoneNumber, countryCode)\n });\n return;\n }\n\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const { customerTicketId } = this.props;\n\n await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/send-sms/${customerTicketId}`,\n {\n phone_number: phoneNumber\n },\n {\n headers\n }\n );\n\n this.setState({\n loading: false,\n smsSent: true\n });\n } catch (e) {\n console.error(e);\n this.setState({\n loading: false,\n smsError: 'Ticket could not be sent. Please try again later.'\n });\n }\n };\n\n render() {\n const { classes, customerTicketId, history } = this.props;\n const {\n loading,\n error,\n smsError,\n email,\n phoneNumber,\n sent,\n smsSent\n } = this.state;\n\n if (smsSent) {\n history.push(`/ticket/${customerTicketId}/sms-sent`);\n }\n\n if (sent) {\n history.push(`/ticket/${customerTicketId}/sent`);\n }\n\n return (\n <>\n \n \n {this.formatRemainingTickets(ticket)}\n \n \n If you need more tickets than available please do\n not purchase this ticket.\n \n
\n )}\n {this.showConfirmPurchase() ? (\n {confirmPurchaseComponent}
\n ) : (\n \n \n Send Email\n \n
\n {error !== '' && (\n \n \n Send ticket to passenger\n \n \n The ticket can be printed or presented directly on the passenger\n {\"'\"}s mobile device.\n \n\n \n Enter the passenger email or mobile number below and we{\"'\"}ll\n send the private ticket link to open on their device.\n \n\n
\n );\n};\n\nViewTicketButtons.propTypes = {\n ticketId: PropTypes.string.isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(ViewTicketButtons);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport Button from '@material-ui/core/Button';\n\nconst ButtonLink = ({ children, to, ...props }) => (\n \n);\n\nButtonLink.propTypes = {\n children: PropTypes.node.isRequired,\n to: PropTypes.string.isRequired\n};\n\nexport default ButtonLink;\n","import React from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport ContentHeader from '../components/ContentHeader';\nimport ViewTicketButtons from '../components/ViewTicketButtons';\nimport ButtonLink from '../components/ButtonLink';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n button: {\n margin: '5px 5px'\n }\n});\n\nconst OrderConfirmed = ({ classes, match }) => {\n const {\n params: {\n customerTicketId,\n year,\n clientSlug,\n serviceId,\n ticketId,\n clientId\n }\n } = match;\n\n return (\n \n \n View ticket\n confirmation_number \n \n \n Print ticket\n print \n \n {hasNotifications && (\n \n Notifications\n notifications_none \n \n )}\n
\n \n \n Other ways to send your ticket link\n \n \n WhatsApp ticket link{' '}\n {/* \n Messenger ticket link{' '}\n {/*
\n \n
\n );\n};\n\nexport default withStyles(styles)(OrderConfirmed);\n","import React from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport qs from 'query-string';\nimport ContentHeader from '../components/ContentHeader';\nimport ViewTicketButtons from '../components/ViewTicketButtons';\nimport ButtonLink from '../components/ButtonLink';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n button: {\n margin: '5px 5px'\n }\n});\n\nconst AdhocOrderConfirmed = ({ classes, match, location }) => {\n const {\n params: {\n customerTicketId,\n year,\n clientSlug,\n serviceId,\n ticketId,\n clientId\n }\n } = match;\n\n const query = qs.parse(location.search);\n const isFixed = query.is_fixed || false;\n\n const hideBuyAgain = ['4338dc60-3dc5-45eb-98b5-426581ac1e17'];\n\n const showBuyAgain =\n year &&\n clientId &&\n serviceId &&\n ticketId &&\n !isFixed &&\n !hideBuyAgain.includes(clientId);\n\n return (\n \n \n Congratulations, your order was successful and your ticket\n is ready to use.\n \n {year && clientSlug && serviceId && ticketId && (\n \n \n Buy another\n \n \n )}\n {year && clientId && serviceId && ticketId && (\n \n \n Buy again\n \n \n )}\n \n Tickets will be scanned on board and will need to be\n presented by the passenger.\n \n\n
\n \n
\n );\n};\n\nexport default withStyles(styles)(AdhocOrderConfirmed);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n withStyles,\n Card,\n CardContent,\n Typography,\n Icon,\n Button\n} from '@material-ui/core';\nimport { Link } from 'react-router-dom';\nimport moment from 'moment';\nimport { getAcademicYear } from '../helpers/date';\n\nconst styles = theme => ({\n root: {\n display: 'grid',\n gridGap: '20px',\n gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 0.5fr))',\n gridRowStart: '2',\n margin: '0 20px',\n justifyContent: 'space-evenly',\n [theme.breakpoints.down('sm')]: {\n gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\n margin: '0'\n }\n },\n passengerName: {\n marginBottom: '20px',\n '& > p': {\n fontSize: '16px'\n }\n },\n ticket: {\n display: 'flex',\n height: '100%',\n flexDirection: 'column',\n '&:last-child': {\n paddingBottom: '16px'\n },\n position: 'relative'\n },\n tripsLabel: {\n fontSize: '12px !important',\n color: 'green',\n textTransform: 'uppercase'\n },\n tripsLabelWarn: {\n color: '#848400'\n },\n tripsLabelFail: {\n color: 'red'\n },\n adhocExp: {\n color: 'red',\n fontSize: '13px !important'\n },\n tripsBadge: {\n background: 'green',\n color: 'white',\n borderRadius: '50%',\n padding: '3px',\n width: 20,\n height: 20,\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n tripsBadgeWarn: {\n background: '#e0e000',\n color: 'black'\n },\n tripsBadgeFail: {\n background: 'red',\n color: 'white'\n },\n ticketText: {\n flexGrow: 2\n },\n icon: {\n fontSize: '18px',\n marginLeft: '5px'\n },\n ticketName: {\n '& > h6': {\n fontSize: '1.1em'\n }\n },\n buyAgainButton: {\n marginLeft: '10px'\n },\n notifyBtn: {\n position: 'absolute',\n padding: 0,\n minWidth: '0',\n right: 10,\n border: 'none !important'\n },\n notifyIcon: {\n fontSize: '18px'\n }\n});\n\nconst getTicketName = ticket => {\n const { type } = ticket;\n let formattedType = type.charAt(0).toUpperCase() + type.slice(1);\n\n formattedType = formattedType.replace('_', ' ');\n\n let description = `${ticket.service_name} ${formattedType}`;\n\n if (ticket.opt) {\n description += ` ${ticket.opt}`;\n }\n\n if (type === 'advance') {\n return description;\n }\n\n description += ` ${ticket.ticket_year}`;\n\n if (ticket.sub_type === 'pm_only') {\n description += ' (PM Only)';\n } else if (ticket.sub_type === 'am_only') {\n description += ' (AM Only)';\n } else if (ticket.sub_type === 'custom') {\n description += ' (Custom)';\n }\n\n return description;\n};\n\nconst getPassengerName = ticket => {\n const { passenger } = ticket;\n\n return `${passenger.first_name} ${passenger.last_name}`;\n};\n\nconst sortByDate = (a, b) => {\n if (a.date_purchased > b.date_purchased) {\n return -1;\n }\n if (a.date_purchased < b.date_purchased) {\n return 1;\n }\n return 0;\n};\n\nconst hasExpired = ticket => {\n const now = new Date().toISOString();\n return ticket.expiry && ticket.expiry < now;\n};\n\nconst getTripsLabelClassName = (ticket, classes) => {\n const tripsLeft = ticket.trips - ticket.trips_taken;\n let className = classes.tripsLabel;\n\n if (tripsLeft === 1 || tripsLeft === 2) {\n className += ` ${classes.tripsLabelWarn}`;\n }\n\n if (tripsLeft < 1) {\n className += ` ${classes.tripsLabelFail}`;\n }\n\n return className;\n};\n\nconst getTripsBadgeClassName = (ticket, classes) => {\n const tripsLeft = ticket.trips - ticket.trips_taken;\n let className = classes.tripsBadge;\n\n if (tripsLeft === 1 || tripsLeft === 2) {\n className += ` ${classes.tripsBadgeWarn}`;\n }\n\n if (tripsLeft < 1) {\n className += ` ${classes.tripsBadgeFail}`;\n }\n\n return className;\n};\n\nconst isAdhoc = ticket => {\n return (\n ticket.type === 'single' ||\n ticket.type === 'return' ||\n ticket.type === 'week' ||\n ticket.type === '4_week'\n );\n};\n\nconst canBuyAgain = (ticket, currentAcademicYear) => {\n const hideBuyAgain = ['4338dc60-3dc5-45eb-98b5-426581ac1e17'];\n return (\n isAdhoc(ticket) &&\n ticket.sub_type !== 'fixed' &&\n ticket.ticket_year === currentAcademicYear &&\n !hideBuyAgain.includes(ticket.client_id)\n );\n};\n\nconst TicketTable = ({ renewals, tickets, classes }) => {\n const academicYear = getAcademicYear();\n return (\n \n \n Congratulations, your order was successful and your ticket\n is ready to use.\n \n {showBuyAgain && (\n \n \n Buy again\n \n \n )}\n {year && clientSlug && serviceId && ticketId && (\n \n \n Buy for another passenger\n \n \n )}\n \n Tickets will be scanned on board and will need to be\n presented by the passenger.\n \n\n
\n \n {tickets.sort(sortByDate).map(ticket => {\n return (\n \n \n {ticket.notify && (\n \n \n notifications\n \n \n )}\n \n \n );\n })}\n
\n );\n};\n\nTicketTable.propTypes = {\n renewals: PropTypes.shape().isRequired,\n tickets: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n service_name: PropTypes.string,\n ticket_year: PropTypes.string,\n passenger: PropTypes.shape({\n first_name: PropTypes.string,\n last_name: PropTypes.string\n })\n })\n ).isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(TicketTable);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Auth } from 'aws-amplify';\nimport axios from 'axios';\nimport Box from '@material-ui/core/Box';\nimport {\n Typography,\n withStyles,\n CircularProgress,\n styled\n} from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport Button from '@material-ui/core/Button';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport IconButton from '@material-ui/core/IconButton';\nimport Icon from '@material-ui/core/Icon';\nimport { Link } from 'react-router-dom';\nimport LoaderButton from '../components/LoaderButton';\nimport TicketTable from '../components/TicketTable';\nimport globalStyles from '../styles';\n\nconst BootstrapDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialogContent-root': {\n padding: theme.spacing(2)\n },\n '& .MuiDialogActions-root': {\n padding: theme.spacing(1)\n }\n}));\n\nconst BootstrapDialogTitle = props => {\n const { classes, children, onClose, ...other } = props;\n\n return (\n \n
\n \n \n {getTicketName(ticket)}\n \n
\n \n \n {getPassengerName(ticket)}\n \n {ticket.type === 'flexi' && (\n \n \n {ticket.trips -\n ticket.trips_taken}\n {' '}\n trips left\n \n )}\n {isAdhoc(ticket) && !hasExpired(ticket) && (\n
\n \n Expires{' '}\n {moment(ticket.expiry).format(\n 'ddd Do MMM HH:mm'\n )}\n
\n )}\n\n {!hasExpired(ticket) && (\n <>\n \n Details\n \n menu\n \n \n {canBuyAgain(ticket, academicYear) && (\n \n Buy again\n \n )}\n {ticket.type === 'flexi' && (\n \n Top up\n \n autorenew\n \n \n )}\n {ticket.type === 'advance' && (\n \n Book trip\n \n )}\n \n )}\n {hasExpired(ticket) && (\n <>\n \n Expired\n \n {canBuyAgain(ticket, academicYear) && (\n \n Buy again\n \n )}\n \n )}\n {renewals[ticket.id] && (\n \n Renew\n \n autorenew\n \n \n )}\n
\n \n
\n );\n }\n return (\n \n {\n this.handleClose();\n }}\n aria-labelledby=\"customized-dialog-title\"\n open={openFaq}\n PaperProps={{\n style: {\n margin: 16,\n minWidth: 300\n }\n }}\n >\n {\n this.handleClose();\n }}\n classes={classes}\n >\n FAQ\n \n \n {openFaq === 1 && (\n <>\n \n How to buy my ticket\n \n \n Your Transport Provider will need to give\n you a link to their ticket listing on\n ShuttleID where you can purchase your\n ticket.\n \n \n Your Transport Provider may promote their\n ticket listing link on their own website, on\n their social media pages, or they may have\n emailed it directly to you.\n \n \n If you have not been given access to the\n ticket listing, please contact your\n Transport Provider directly, who will be\n able to help.\n \n \n )}\n {openFaq === 2 && (\n <>\n \n Who is my Transport Provider?\n \n \n Your Transport Provider is the organisation\n that arranges your transport, and is who you\n will pay directly. This could be your\n bus/coach company or could be your\n school/college/workplace.\n \n \n ShuttleID is a ticketing platform that helps\n your Transport Provider sell their bus\n tickets online.\n \n \n )}\n {openFaq === 3 && (\n <>\n \n How do I apply my bursary?\n \n \n If you have a bursary or financial support\n that pays for your travel, either partially\n or in full, your Transport Provider will\n either need to supply you with a special\n link to buy a discounted ticket, or they\n will need to provide you with a voucher code\n which you can apply at the checkout.\n \n \n Please contact your Transport Provider\n directly if you have not received either a\n link to your discounted ticket, or your\n voucher code.\n \n \n )}\n {openFaq === 4 && (\n <>\n \n How do I apply my voucher code?\n \n \n When buying a ticket, voucher codes are\n applied at the final stage of the checkout\n before confirming payment.\n \n \n If you are using Direct Debit as your\n payment method, please note this option is\n after you create your initial Direct Debit\n mandate. After, you will be given the\n opportunity to enter the passenger details,\n apply your voucher code, and then confirm\n the order.\n \n \n Further information on{' '}\n \n how to apply your voucher code\n {' '}\n is available in the Help Portal.\n \n \n )}\n {openFaq === 5 && (\n <>\n \n I exited my Direct Debit ticket purchase too\n early. How do I go back?\n \n \n Tickets purchased using Direct Debit require\n a Direct Debit mandate to be initially set\n up.\n \n \n The mandate set up itself does not create\n any payments, but it does give permission\n for your Transport Provider to make charges\n in future. We use this mandate to schedule\n payments automatically, after purchasing\n your ticket.\n \n \n If you left the ticket purchase after\n creating the Direct Debit mandate, you will\n have a Direct Debit mandate, but you won\n {\"'\"}t have a ticket, and no payments will\n be scheduled.\n \n \n To complete your purchase, simply attempt\n your purchase again using the same process\n as before (e.g. clicking a link in an email\n from your Transport Provider, or a link from\n their website). The next time you do this,\n it will skip the Direct Debit mandate form\n as you have already created a mandate.\n Instead, you will be asked to complete the\n details for the ticket purchase (e.g.{' '}\n passenger name, photo, bus stop, etc).\n \n \n Completing your purchase will give you\n instant access to your ticket, and you will\n receive email confirmation of your order.\n \n \n Further help on{' '}\n \n how to buy your ticket using Direct\n Debit\n {' '}\n is available on the Help Portal.\n \n \n )}\n \n \n {\n this.handleClose();\n }}\n >\n Close\n \n \n \n\n \n My Tickets\n \n {error && (\n \n There was a problem retrieving your tickets\n \n )}\n {tickets.length === 0 && !error ? (\n \n There was a problem retrieving your tickets.\n Please try again shortly.\n \n )}\n {lastItem && (\n {\n this.setState({\n loadingMore: true\n });\n\n this.loadMoreTickets();\n }}\n text=\"Load More\"\n loadingText=\"Loading...\"\n />\n )}\n \n )}\n
\n );\n }\n}\n\nViewTickets.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(ViewTickets);\n","import React, { useState, useEffect } from 'react';\n\nimport { CircularProgress } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport TextField from '@material-ui/core/TextField';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Auth } from 'aws-amplify';\nimport ContentHeader from '../components/ContentHeader';\nimport globalStyles from '../styles';\nimport PhoneNumberInput from '../components/PhoneNumberInput';\nimport {\n getInvalidPhoneNumberMessage,\n isValidPhoneNumber\n} from '../helpers/errors';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '600px',\n margin: '40px auto',\n position: 'relative',\n textAlign: 'center',\n minHeight: '300px',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n intro: {\n marginTop: 0,\n marginBottom: 40\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '360px',\n margin: '20px auto 40px',\n padding: '20px 10px 40px'\n },\n input: {\n margin: '0 20px 20px',\n '&:invalid': {\n border: 'red solid 2px'\n }\n },\n message: {\n display: 'inline-block',\n margin: '130px auto'\n },\n spinner: {\n margin: '130px auto'\n },\n 'error > div': {\n border: '1px solid red'\n },\n link: globalStyles.link,\n submit: {\n width: '200px',\n height: '56px',\n margin: '20px auto'\n }\n});\n\nconst Account = ({ classes }) => {\n const [isLoading, setIsLoading] = useState(true);\n\n const [email, setEmail] = useState('');\n const [mobile, setMobile] = useState('');\n const [countryCode, setCountryCode] = useState(\n process.env.REACT_APP_DEFAULT_PHONE_COUNTRY || 'GB'\n );\n const [mobileErrorMessage, setMobileErrorMessage] = useState(null);\n const [isSubmitted, setIsSubmitted] = useState(false);\n const [isSubmitError, setIsSubmitError] = useState(false);\n\n useEffect(() => {\n async function fetchAccountDetails() {\n try {\n const { attributes } = await Auth.currentAuthenticatedUser({\n bypassCache: true\n });\n setEmail(attributes.email);\n setMobile(attributes.phone_number);\n setIsLoading(false);\n } catch (error) {\n setIsLoading(false);\n }\n }\n\n fetchAccountDetails();\n }, []);\n\n const onChangeMobile = number => {\n setMobile(number);\n setMobileErrorMessage(null);\n };\n\n const onSubmit = async e => {\n e.preventDefault();\n\n setIsSubmitError(false);\n\n if (!isValidPhoneNumber(mobile, countryCode)) {\n setMobileErrorMessage(getInvalidPhoneNumberMessage(countryCode));\n return;\n }\n\n setIsLoading(true);\n\n try {\n const user = await Auth.currentAuthenticatedUser();\n await Auth.updateUserAttributes(user, {\n phone_number: mobile\n });\n setIsLoading(false);\n setIsSubmitted(true);\n } catch (error) {\n setIsLoading(false);\n setIsSubmitError(true);\n }\n };\n\n if (isLoading) {\n return (\n \n \n After purchasing your tickets, you{\"'\"}ll be able to\n access them here in the My Tickets area.\n \n \n Frequently asked questions\n \n
\n ) : (\n <>\n - \n
- \n
- \n
- \n
- \n
- \n
- \n \n \n
\n
\n );\n }\n\n if (!isLoading && !email) {\n return (\n \n \n Account details could not be loaded. Please try again.\n \n
\n );\n }\n\n if (isSubmitted) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n );\n};\n\nAccount.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Account);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport { Link } from 'react-router-dom';\nimport { Auth } from 'aws-amplify';\nimport Logo from '../images/logo.png';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n position: 'relative',\n zIndex: '1000',\n boxShadow: 'none !important'\n },\n subNavRoot: {\n background: '#fff',\n position: 'relative',\n boxShadow:\n '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) !important',\n marginBottom: '1em'\n },\n subNavLinks: {\n '& a': {\n color: '#50b9b3',\n marginLeft: '.4em',\n marginRight: '.4em',\n padding: '0.5em 0',\n display: 'inline-block',\n textDecoration: 'none',\n textTransform: 'uppercase',\n fontFamily:\n 'Montserrat,Helvetica,Arial,Lucida,sans-serif !important',\n fontSize: 15\n }\n },\n heading: {\n color: '#fff',\n fontSize: '40px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '28px'\n }\n },\n toolbar: {\n justifyContent: 'center'\n },\n subNavToolbar: {\n minHeight: '0',\n justifyContent: 'center',\n paddingLeft: '8px !important',\n paddingRight: '8px !important'\n },\n logo: {\n maxWidth: '200px',\n display: 'block',\n minWidth: 50,\n marginTop: 10\n }\n});\n\nconst Header = ({ classes, isAuthenticated, handleAuth }) => {\n const onSignOut = async e => {\n e.preventDefault();\n try {\n await Auth.signOut();\n handleAuth(false);\n } catch (err) {\n console.error(err);\n }\n };\n\n return (\n \n \n \n \n \n \n \n\n
\n );\n};\n\nHeader.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Header);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst styles = () => ({\n root: {\n fontSize: '0.8em',\n color: '#ccc'\n },\n text: {\n fontSize: '0.8em',\n color: '#aaa'\n },\n footerLink: {\n color: '#aaa'\n },\n footer: {\n marginBottom: '20px'\n }\n});\n\nconst Footer = ({ classes }) => (\n \n \n \n Bus tickets\n {isAuthenticated && (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n Account\n )}\n Help\n {isAuthenticated && (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n \n Logout\n \n )}\n \n \n
\n \n \n © {new Date().getFullYear()}{' '}\n \n ShuttleID\n {' '}\n |{' '}\n \n Terms\n {' '}\n |{' '}\n \n Privacy policy\n {' '}\n | Build 1706\n \n \n Cevenco Ltd trading as ShuttleID is a limited company registered in\n England and Wales. Registered number: 11901852.\n \n
\n);\n\nFooter.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Footer);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Route, Redirect } from 'react-router-dom';\n\nconst AuthenticatedRoute = ({ component: C, props: cProps, ...rest }) => (\n \n \n There was a problem retrieving your tickets\n \n )}\n {ticket && !error && (\n
\n );\n }\n}\n\nexport default withStyles(styles)(TicketDetail);\n","import React, { useEffect, useState } from 'react';\nimport { Auth } from 'aws-amplify';\nimport axios from 'axios';\nimport {\n CircularProgress,\n Icon,\n Switch,\n Typography,\n withStyles\n} from '@material-ui/core';\nimport ContentHeader from '../components/ContentHeader';\nimport ButtonLink from '../components/ButtonLink';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n spinner: {\n marginLeft: 'calc(50% - 22px)',\n marginTop: '60px',\n marginBottom: '60px'\n },\n main: {\n padding: '30px',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '20px'\n },\n switch: {\n display: 'flex',\n alignItems: 'center'\n },\n error: {\n color: 'red'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n }\n});\n\nconst TicketNotifications = ({ match, classes }) => {\n const {\n params: { ticketId }\n } = match;\n\n const [isLoading, setIsLoading] = useState(true);\n const [hasError, setHasError] = useState(false);\n const [ticket, setTicket] = useState(undefined);\n const [notify, setNotify] = useState(false);\n const [hasNotifyError, setHasNotifyError] = useState(false);\n const [isNotifyLoading, setIsNotifyLoading] = useState(false);\n\n const loadData = async () => {\n setIsLoading(true);\n\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const ticketResponse = await axios.get(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/user-id/${\n currentSession.getAccessToken().payload.sub\n }/${ticketId}?include_notifications=true`,\n {\n headers\n }\n );\n\n setIsLoading(false);\n setTicket(ticketResponse.data);\n setNotify(ticketResponse.data.notify || false);\n setHasError(false);\n } catch (e) {\n setIsLoading(false);\n setHasError(true);\n }\n };\n\n const updateNotifications = newNotify => async event => {\n event.preventDefault();\n setIsNotifyLoading(true);\n\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const res = await axios.put(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/user-id/${\n currentSession.getAccessToken().payload.sub\n }/${ticketId}/boarding-notifications`,\n {\n notify: newNotify\n },\n {\n headers\n }\n );\n\n if (res.status !== 200) {\n throw Error;\n }\n\n setIsNotifyLoading(false);\n setHasNotifyError(false);\n setNotify(newNotify);\n } catch (e) {\n setIsNotifyLoading(false);\n setHasNotifyError(true);\n }\n };\n\n useEffect(() => {\n loadData();\n }, []);\n\n if (isLoading) {\n return (\n \n \n Passenger: {ticket.passenger.first_name}{' '}\n {ticket.passenger.last_name}\n \n \n Ticket:{' '}\n {formatTicketType(\n ticket.service_name,\n ticket.type,\n ticket.sub_type,\n ticket.travel_pattern,\n ticket.opt\n )}\n \n {ticket.type !== 'advance' && (\n <>\n {'yr' in ticket && (\n \n Year group:{' '}\n \n {ticket.yr}\n \n \n )}\n {'zone' in ticket && (\n \n Zone: {ticket.zone}\n \n )}\n {('zone_stop' in ticket ||\n 'stop' in ticket) && (\n \n Stop: {ticket.zone_stop || ticket.stop}\n \n )}\n {'start' in ticket && (\n \n Valid from: {formatDate(ticket.start)}\n \n )}\n {'expiry' in ticket && (\n \n Valid until: {formatDate(ticket.expiry)}\n \n )}\n \n Price:{' '}\n {formatPrice(\n 'total_price' in ticket\n ? ticket.total_price\n : ticket.price,\n ticket.currency\n )}\n {ticket.voucher_id && <> (Discounted)}\n \n \n )}\n {ticket.type === 'flexi' && (\n \n {ticket.trips - ticket.trips_taken} trips left -{' '}\n \n Top up\n {' '}\n -{' '}\n \n View trips\n \n \n )}\n {ticket.type === 'advance' && (\n <>\n \n Bookings\n \n \n Book trip\n \n \n )}\n
\n )}\n \n \n EMAIL BOARDING NOTIFICATIONS\n \n
\n \n
\n );\n};\n\nexport default withStyles(styles)(TicketNotifications);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport TextField from '@material-ui/core/TextField';\nimport { Auth } from 'aws-amplify';\nimport { Typography, withStyles } from '@material-ui/core';\nimport red from '@material-ui/core/colors/red';\nimport LoaderButton from './LoaderButton';\nimport ContentHeader from './ContentHeader';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n textAlign: 'center',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '800px',\n margin: '0 auto',\n padding: '20px 10px'\n },\n input: {\n margin: '20px 20px 10px'\n },\n button: {\n width: '200px',\n height: '56px',\n margin: '0 auto'\n },\n error: {\n margin: '0 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold',\n textDecoration: 'underline',\n cursor: 'pointer'\n },\n disabledLink: {\n color: '#666',\n fontWeight: 'bold'\n }\n});\n\nclass PasswordResetConfirmationForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: false,\n confirmationCode: '',\n password: '',\n hasResentCode: false\n };\n }\n\n handleConfirmationSubmit = async (event, retryIfQuotaExceeded = true) => {\n event.preventDefault();\n const { email, handleAuth } = this.props;\n const { confirmationCode, password } = this.state;\n\n this.setState({ loading: true });\n\n try {\n await Auth.forgotPasswordSubmit(\n email.toLowerCase(),\n confirmationCode.trim(),\n password\n );\n await Auth.signIn(email.toLowerCase(), password);\n try {\n window.localStorage.removeItem('forgot_code_sent');\n } catch (localStorageErr) {\n console.error(localStorageErr);\n }\n handleAuth(true);\n } catch (e) {\n if (e.name === 'QuotaExceededError' && retryIfQuotaExceeded) {\n window.localStorage.clear();\n\n await this.handleConfirmationSubmit(event, false);\n return;\n }\n\n this.setState({\n error: e.message\n });\n this.setState({ loading: false });\n }\n };\n\n handleChange = event => {\n this.setState({\n [event.target.id]: event.target.value,\n error: false\n });\n };\n\n resendCode = async () => {\n const { email } = this.props;\n this.setState({\n hasResentCode: true\n });\n\n await Auth.forgotPassword(email.toLowerCase());\n\n try {\n window.localStorage.setItem(\n 'forgot_code_sent',\n new Date().toISOString()\n );\n } catch (localStorageErr) {\n console.error(localStorageErr);\n }\n };\n\n validateConfirmationForm() {\n const { confirmationCode, password } = this.state;\n return confirmationCode.length > 0 && password.length > 0;\n }\n\n render() {\n const {\n confirmationCode,\n password,\n error,\n loading,\n hasResentCode\n } = this.state;\n const { classes, email } = this.props;\n\n return (\n \n {renderInner()}\n \n arrow_left \n Back to ticket details\n \n
\n \n \n \n Please enter the latest verification code sent to{' '}\n {email} and the new password you wish\n to use. Please note the verification code will expire\n after one hour.\n \n \n {!hasResentCode && (\n \n Send another code\n \n )}\n {hasResentCode && (\n \n New code sent. Please check your inbox.\n \n )}\n \n {error} \n
\n );\n }\n}\n\nPasswordResetConfirmationForm.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(PasswordResetConfirmationForm);\n","import React, { Component } from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport TextField from '@material-ui/core/TextField';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography } from '@material-ui/core';\nimport red from '@material-ui/core/colors/red';\nimport { Auth } from 'aws-amplify';\nimport { validateEmail } from '../helpers/validators';\nimport LoaderButton from '../components/LoaderButton';\nimport PasswordResetConfirmationForm from '../components/PasswordResetConfirmationForm';\nimport ContentHeader from '../components/ContentHeader';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n textAlign: 'center',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '800px',\n margin: '40px auto',\n padding: '0 10px 20px'\n },\n input: {\n margin: '0 20px 10px'\n },\n button: {\n width: '200px',\n height: '56px',\n marginBottom: '30px'\n },\n error: {\n margin: '0 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n register: {\n fontSize: '1em',\n marginBottom: '2em'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n }\n});\n\nclass ForgotPassword extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n email: '',\n error: '',\n loading: false,\n showConfirmation: false\n };\n }\n\n handleChange = event => {\n this.setState({\n [event.target.id]: event.target.value,\n error: false\n });\n };\n\n handleSubmit = async event => {\n event.preventDefault();\n const { email } = this.state;\n\n this.setState({ loading: true });\n\n try {\n let codeLastSent = '';\n\n try {\n codeLastSent = window.localStorage.getItem('forgot_code_sent');\n } catch (localStorageErr) {\n console.error(localStorageErr);\n }\n\n if (\n !codeLastSent ||\n moment(codeLastSent) < moment().subtract(60, 'minutes')\n ) {\n await Auth.forgotPassword(email.toLowerCase());\n try {\n window.localStorage.setItem(\n 'forgot_code_sent',\n new Date().toISOString()\n );\n } catch (localStorageErr) {\n console.error(localStorageErr);\n }\n }\n\n this.setState({\n loading: false,\n showConfirmation: true\n });\n } catch (e) {\n this.setState({\n error: e.message,\n loading: false\n });\n }\n };\n\n validateForm() {\n const { email } = this.state;\n return validateEmail(email);\n }\n\n renderResetForm() {\n const { classes } = this.props;\n const { email, error, loading } = this.state;\n\n return (\n \n
\n );\n }\n\n render() {\n const { handleAuth } = this.props;\n const { email, showConfirmation } = this.state;\n\n return (\n \n {!showConfirmation ? (\n this.renderResetForm()\n ) : (\n
\n );\n }\n}\n\nForgotPassword.propTypes = {\n handleAuth: PropTypes.func.isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(ForgotPassword);\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport {\n Typography,\n withStyles,\n CircularProgress,\n Button\n} from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport ContentHeader from '../components/ContentHeader';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n border: '0',\n maxWidth: '600px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 10px'\n }\n },\n innerRoot: {\n textAlign: 'center',\n border: '0',\n maxWidth: '600px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 10px'\n }\n },\n error: {\n margin: '20px 0 0 5px',\n color: red[500],\n minHeight: '20px'\n },\n spinner: {\n marginTop: '60px'\n },\n button: {\n minHeight: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n inner: {\n padding: '20px 10px'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n }\n});\n\nclass CreateMandate extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n mandateSession: null,\n error: '',\n isLoading: true\n };\n }\n\n async componentDidMount() {\n const {\n match: {\n params: { clientId, serviceId, ticketId, renewalId, year }\n }\n } = this.props;\n\n const mandateSession = await this.postMandateSession(\n clientId,\n serviceId,\n ticketId,\n year,\n renewalId\n );\n\n this.setState({\n mandateSession,\n isLoading: false\n });\n }\n\n async postMandateSession(clientId, serviceId, ticketId, year, renewalId) {\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-mandate-session/client/${clientId}`,\n {\n service_id: serviceId,\n ticket_id: ticketId,\n year,\n renewal_id: renewalId\n },\n {\n headers\n }\n );\n\n return response.data;\n } catch (e) {\n this.setState({\n error:\n 'There was a problem whilst trying to establish a session for a new direct debit mandate. Please try again later or contact support if this issue continues.'\n });\n return null;\n }\n }\n\n render() {\n const { classes } = this.props;\n const { mandateSession, error, isLoading } = this.state;\n\n return (\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(CreateMandate);\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport { Typography, withStyles, CircularProgress } from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport { Redirect } from 'react-router-dom';\nimport ContentHeader from '../components/ContentHeader';\n\nconst styles = theme => ({\n root: {\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n innerRoot: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n error: {\n margin: '20px 0 0 5px',\n color: red[500],\n minHeight: '20px'\n },\n spinner: {\n marginTop: '60px'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n inner: {\n padding: '20px 10px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n }\n});\n\nclass MandateConfirmed extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n mandateSessionConfirmed: false,\n error: '',\n isLoading: true\n };\n }\n\n async componentDidMount() {\n const {\n match: {\n params: {\n clientSlug,\n serviceId,\n ticketId,\n sessionId,\n renewalId\n }\n }\n } = this.props;\n\n const mandateSessionConfirmed = await this.postConfirmMandateSession(\n clientSlug,\n serviceId,\n ticketId,\n sessionId,\n renewalId\n );\n\n this.setState({\n mandateSessionConfirmed,\n isLoading: false\n });\n }\n\n buyTicketUrl = (clientSlug, serviceId, ticketId, year, renewalId) => {\n if (renewalId) {\n return `/renew/${renewalId}`;\n }\n\n return `/create-ticket/${year}/${clientSlug}/${serviceId}/${ticketId}`;\n };\n\n async postConfirmMandateSession(\n clientSlug,\n serviceId,\n ticketId,\n sessionId,\n renewalId\n ) {\n try {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-mandate-session/confirm/${sessionId}`,\n {\n service_id: serviceId,\n ticket_id: ticketId,\n client_slug: clientSlug,\n renewal_id: renewalId\n },\n {\n headers\n }\n );\n\n return true;\n } catch (e) {\n this.setState({\n error:\n 'There was a problem whilst trying to confirm your direct debit mandate. Please try again later or contact support if this issue continues.'\n });\n return false;\n }\n }\n\n render() {\n const {\n classes,\n match: {\n params: { clientSlug, year, serviceId, ticketId, renewalId }\n }\n } = this.props;\n const { mandateSessionConfirmed, error, isLoading } = this.state;\n const ticketUrl = this.buyTicketUrl(\n clientSlug,\n serviceId,\n ticketId,\n year,\n renewalId\n );\n\n if (!isLoading && mandateSessionConfirmed === true) {\n return \n
\n \n \n This ticket requires payment using Direct Debit.\n \n \n To get started, you need a Direct Debit mandate with\n your Transport Provider. After creating your mandate\n below, you will return to ShuttleID to buy your\n ticket.\n \n\n \n When you are redirected back to ShuttleID, you will\n provide the passenger details, apply any voucher\n codes that you have, and confirm the order.\n \n\n \n IMPORTANT!\n \n\n \n If you exit the process immediately after creating\n your mandate, you will not have a ticket and\n payments will not be scheduled.\n \n\n {/* \n After the mandate is set up, you will be able to add\n the passenger details, apply a voucher code if you\n have one, and confirm the order.\n \n\n \n Please note creating a direct debit mandate does not\n confirm your order and will not give you a ticket.\n Your order is only confirmed after supplying the\n passenger details and confirming the payment\n schedule.\n */}\n\n \n \n Help buying your ticket with Direct Debit\n \n \n\n {isLoading && (\n \n {error}\n \n )}\n
\n \n
\n
\n );\n }\n}\n\nexport default withStyles(styles)(MandateConfirmed);\n","import React from 'react';\nimport { withStyles, Typography, Icon, Button } from '@material-ui/core';\nimport { useHistory } from 'react-router-dom';\nimport ContentHeader from '../components/ContentHeader';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n button: {\n marginTop: 20\n }\n});\n\nconst TicketSent = ({ classes }) => {\n const history = useHistory();\n return (\n \n
\n \n {isLoading && (\n \n {error}\n \n )}\n
\n \n
\n );\n};\n\nexport default withStyles(styles)(TicketSent);\n","import React from 'react';\nimport { withStyles, Typography, Icon, Button } from '@material-ui/core';\nimport { useHistory } from 'react-router-dom';\nimport ContentHeader from '../components/ContentHeader';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n button: {\n marginTop: 20\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n }\n});\n\nconst TicketSmsSent = ({ classes }) => {\n const history = useHistory();\n return (\n \n \n Your ticket was sent to the passenger.\n \n \n They can now access the ticket on their mobile device by\n opening the private ticket link in the email.\n \n \n The email should arrive instantly. If the passenger doesn\n {\"'\"}t see it, ask them to check their spam folder.\n \n \n NOTE: Often a simple typo is the reason for\n a ticket not arriving. Try send again but take extra when\n entering the email address.\n \n\n {\n history.goBack();\n }}\n >\n arrow_back \n Back to ticket\n \n
\n \n
\n );\n};\n\nexport default withStyles(styles)(TicketSmsSent);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { CardElement, injectStripe } from 'react-stripe-elements';\nimport {\n withStyles,\n Typography,\n withWidth,\n CircularProgress,\n Icon\n} from '@material-ui/core';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { withRouter } from 'react-router-dom';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport LoaderButton from './LoaderButton';\nimport { formatPrice } from '../helpers/formatters';\nimport { getYearGroups } from '../helpers/ticket';\nimport {\n DEFAULT_ERROR,\n getFriendlyPaymentError,\n isSafePaymentError\n} from '../helpers/errors';\nimport globalStyles from '../styles';\n\nconst styles = {\n root: {\n marginTop: '20px',\n minHeight: '100px',\n marginBottom: '20px',\n padding: '0 10px 10px',\n textAlign: 'center'\n },\n card: {\n margin: '30px auto 15px auto',\n maxWidth: '360px',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n borderRadius: '4px',\n padding: '10px 0 10px 8px'\n },\n button: {\n margin: '20px 0 20px',\n width: '200px',\n height: '56px'\n },\n error: {\n margin: '20px 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n saveCard: {\n display: 'inline',\n marginLeft: 14,\n marginTop: 18\n },\n spinner: {\n marginTop: 60,\n marginBottom: 60,\n marginLeft: 'calc(50% - 22px)'\n },\n icon: {\n fontSize: 25\n },\n existingCardParent: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: 20\n },\n existingCard: {\n ...globalStyles.savedCard,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '0 10px',\n flexWrap: 'wrap'\n },\n existingCardHeader: {\n flexBasis: '100%',\n marginTop: 10,\n ...globalStyles.savedCardHeader\n },\n changeCard: {\n width: 'auto',\n height: 'auto',\n padding: '5px',\n lineHeight: '1',\n marginLeft: 10,\n fontSize: 12\n }\n};\n\nclass RenewalPaymentForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n processing: false,\n error: '',\n cardError: '',\n cardValid: false,\n paymentError: false,\n saveCard: false,\n saveReplacedCard: false,\n paymentMethods: null,\n isLoadingPaymentMethods: true\n };\n }\n\n async componentDidMount() {\n try {\n // get customer payment methods\n const { client } = this.props;\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/payment-methods/${\n currentSession.getAccessToken().payload.sub\n }/${client.slug}`,\n {\n headers\n }\n );\n\n // if any, set state\n if (\n response.data &&\n response.data.data &&\n response.data.data.length\n ) {\n this.setState({\n paymentMethods: response.data.data,\n isLoadingPaymentMethods: false\n });\n } else {\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n } catch (error) {\n console.error(error);\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n }\n\n handleSubmit = async () => {\n const { cardError, cardValid, paymentMethods } = this.state;\n const {\n client,\n service,\n stop,\n yr,\n dest,\n zone,\n zoneStop,\n ticket,\n extId\n } = this.props;\n\n if (\n client &&\n client.features &&\n client.features.require_id === 'student' &&\n !extId\n ) {\n this.setState({\n processing: false,\n error: 'Please provide a student id'\n });\n return;\n }\n\n const useZones =\n service.zones &&\n ticket.pricing_model === 'Zonal' &&\n ticket.zone_prices;\n\n if (useZones) {\n const serviceZone =\n zone && service.zones.find(z => z.name === zone);\n\n if (!serviceZone) {\n this.setState({\n processing: false,\n error: 'Please select a zone'\n });\n return;\n }\n\n if (\n serviceZone.stops &&\n serviceZone.stops.length &&\n !serviceZone.stops.includes(zoneStop)\n ) {\n this.setState({\n processing: false,\n error: 'Please select a bus stop'\n });\n return;\n }\n } else if (\n service &&\n 'stops' in service &&\n !service.stops.includes(stop)\n ) {\n this.setState({\n error: 'Please select a bus stop'\n });\n return;\n }\n\n if (service && service.destinations && service.destinations.length) {\n if (!service.destinations.includes(dest)) {\n this.setState({\n processing: false,\n error: 'Please select a destination'\n });\n return;\n }\n }\n\n if (service && getYearGroups(service.yr_groups).length) {\n if (!yr) {\n this.setState({\n processing: false,\n error: 'Please select a year group'\n });\n return;\n }\n }\n\n // Only check for card errors if there is value to pay\n // Full voucher value means no card validation required\n if (Number(this.netPrice()) >= 1) {\n if (cardError) {\n this.setState({\n error: cardError\n });\n return;\n }\n if (!cardValid && !paymentMethods) {\n this.setState({\n error: 'Please complete all card details including postcode'\n });\n return;\n }\n } else if (Number(this.netPrice()) > 0) {\n this.setState({\n error: `Invalid amount. Amount can only be 0 or a minimum of ${formatPrice(\n 1,\n ticket.currency\n )} using card payment.`\n });\n return;\n }\n\n this.setState({\n processing: true,\n error: ''\n });\n\n try {\n await this.handleInitialPayment();\n } catch (e) {\n console.error(e);\n const error = getFriendlyPaymentError(e, DEFAULT_ERROR);\n this.setState({\n processing: false,\n error,\n paymentError: !isSafePaymentError(error)\n });\n }\n };\n\n handleInitialPayment = async () => {\n const {\n stripe,\n history,\n ticket,\n service,\n renewal,\n client,\n voucher,\n stop,\n dest,\n yr,\n zone,\n zoneStop,\n extId\n } = this.props;\n\n const { saveCard, saveReplacedCard, paymentMethods } = this.state;\n\n let paymentMethodId;\n\n // Only create payment method when there is something to charge.\n // A full value voucher will hide card field.\n if (this.netPrice() > 0) {\n if (paymentMethods && paymentMethods.length) {\n paymentMethodId = paymentMethods[0].id;\n } else {\n let paymentError;\n\n try {\n const {\n paymentMethod,\n error\n } = await stripe.createPaymentMethod(\n 'card',\n this.cardElement\n );\n\n if (!error) {\n paymentMethodId = paymentMethod.id;\n } else {\n paymentError = error;\n }\n } catch (paymentMethodError) {\n const err = new Error(\n `Error adding payment method: ${\n paymentMethodError.message\n }`\n );\n err.force = true;\n throw err;\n }\n\n if (paymentError) {\n if (paymentError.code === 'card_declined') {\n throw new Error('Card declined');\n } else if (paymentError.type === 'card_error') {\n throw new Error('Card error');\n } else if (paymentError.type === 'invalid_request_error') {\n const err = new Error('Invalid request');\n err.force = true;\n if (paymentError.param) {\n err.detail = paymentError.param;\n }\n throw err;\n } else {\n const err = new Error('Card api error');\n err.force = true;\n if (paymentError.message) {\n err.detail = paymentError.message;\n }\n throw err;\n }\n }\n }\n }\n\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const data = {\n payment_method_id: paymentMethodId,\n ticket,\n voucher,\n service,\n client,\n renewal,\n stop,\n dest,\n save_card: saveCard || saveReplacedCard\n };\n\n if (extId) {\n data.ext_id = extId;\n }\n\n if (service && getYearGroups(service.yr_groups).length) {\n data.yr = yr;\n }\n\n const useZones =\n service.zones &&\n ticket.pricing_model === 'Zonal' &&\n ticket.zone_prices;\n\n if (useZones) {\n data.zone = zone;\n data.zoneStop = zoneStop;\n }\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/stripe/renew`,\n data,\n {\n headers\n }\n );\n\n if (response.data.id) {\n history.push(`/renewal-confirmed/${response.data.id}`);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleActionPayment(response.data);\n } else {\n throw new Error('Problem creating payment intent.');\n }\n };\n\n handleActionPayment = async paymentResponse => {\n const {\n stripe,\n history,\n ticket,\n service,\n client,\n voucher,\n renewal,\n stop,\n dest,\n zone,\n zoneStop,\n yr,\n extId\n } = this.props;\n\n const {\n error: errorAction,\n paymentIntent\n } = await stripe.handleCardAction(\n paymentResponse.payment_intent_client_secret\n );\n\n if (errorAction) {\n throw new Error(errorAction.message);\n } else {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const data = {\n payment_intent_id: paymentIntent.id,\n renewal,\n ticket,\n service,\n voucher,\n client,\n stop,\n dest\n };\n\n if (extId) {\n data.ext_id = extId;\n }\n\n if (service && getYearGroups(service.yr_groups).length) {\n data.yr = yr;\n }\n\n const useZones =\n service.zones &&\n ticket.pricing_model === 'Zonal' &&\n ticket.zone_prices;\n\n if (useZones) {\n data.zone = zone;\n data.zoneStop = zoneStop;\n }\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-ticket/stripe/renew`,\n data,\n {\n headers\n }\n );\n\n if (response.data.id) {\n history.push(`/renewal-confirmed/${response.data.id}`);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleAction(response.data);\n } else {\n throw new Error('Problem confirming payment intent.');\n }\n }\n };\n\n handleReady = element => {\n this.cardElement = element;\n this.cardElement.on('change', response => {\n const cardValid = !response.empty && response.complete;\n const cardError = response.error ? response.error.message : '';\n this.setState({\n cardValid,\n cardError\n });\n });\n };\n\n netPrice = () => {\n const { ticket, voucher, zone } = this.props;\n\n const useZones =\n ticket.pricing_model === 'Zonal' && ticket.zone_prices && zone;\n const ticketPrice = useZones ? ticket.zone_prices[zone] : ticket.price;\n\n if (voucher) {\n return ticketPrice - voucher.value;\n }\n return ticketPrice;\n };\n\n handleCheckboxChange = event => {\n this.setState({ [event.target.name]: event.target.checked });\n };\n\n render() {\n const { classes, width, client, service, ticket } = this.props;\n const {\n processing,\n error,\n paymentError,\n saveCard,\n saveReplacedCard,\n paymentMethods,\n isLoadingPaymentMethods\n } = this.state;\n\n const hasPaymentMethods = paymentMethods && paymentMethods.length;\n\n if (isLoadingPaymentMethods) {\n return (\n \n \n Your ticket was sent to the passenger.\n \n \n They can now access the ticket on their mobile device by\n opening the private ticket link in the text message.\n \n \n The message should arrive instantly. If the passenger doesn\n {\"'\"}t see it, send your message again and{' '}\n double check the phone number is input\n correctly.\n \n \n If your ticket still hasn{\"'\"}t arrived please contact our\n support team via{' '}\n \n support@shuttleid.uk\n \n .\n \n\n {\n history.goBack();\n }}\n >\n arrow_back \n Back to ticket\n \n
\n \n \n By completing this purchase, I confirm I have read and\n accepted the following:\n \n {service.terms_url && (\n \n \n {client.name} T&Cs\n \n \n )}\n \n \n ShuttleID T&Cs\n \n \n\n {this.netPrice() >= 1 && (\n <>\n {!hasPaymentMethods && (\n <>\n \n {error}\n \n )}\n
\n );\n }\n}\n\nRenewalPaymentForm.propTypes = {\n classes: PropTypes.shape().isRequired,\n stripe: PropTypes.shape().isRequired,\n ticket: PropTypes.shape().isRequired,\n service: PropTypes.shape().isRequired,\n client: PropTypes.shape().isRequired,\n renewal: PropTypes.shape().isRequired,\n stop: PropTypes.string,\n dest: PropTypes.string,\n extId: PropTypes.string\n};\n\nRenewalPaymentForm.defaultProps = {\n stop: '',\n dest: '',\n extId: ''\n};\n\nexport default withStyles(styles)(\n injectStripe(withRouter(withWidth()(RenewalPaymentForm)))\n);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Typography } from '@material-ui/core';\nimport TextField from '@material-ui/core/TextField';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Select from '@material-ui/core/Select';\nimport { Elements, StripeProvider } from 'react-stripe-elements';\nimport RenewalPaymentForm from './RenewalPaymentForm';\nimport VoucherForm from './VoucherForm';\nimport ContentHeader from './ContentHeader';\nimport {\n formatTicketType,\n formatDate,\n formatPrice\n} from '../helpers/formatters';\nimport { getYearGroups } from '../helpers/ticket';\nimport ZonesForm from './ZonesForm';\nimport globalStyles from '../styles';\n\nconst styles = {\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)'\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n zonesDescription: {\n padding: '20px 0 0',\n fontWeight: '100',\n textAlign: 'center'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n zoneMenuItem: {\n whiteSpace: 'normal'\n },\n formControl: {\n maxWidth: 250,\n width: '100%',\n margin: '0 auto',\n display: 'flex'\n },\n zonesForm: {\n display: 'flex',\n flexDirection: 'column',\n gap: '20px',\n paddingBottom: '35px'\n },\n link: globalStyles.link\n};\n\nclass ConfirmRenewal extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voucher: null,\n stop: props.stop,\n yr: props.yr,\n dest: props.dest,\n zone: props.zone,\n zoneStop: props.zoneStop,\n extId: props.extId,\n stripe: null\n };\n }\n\n async componentDidMount() {\n const { client } = this.props;\n const stripe = window.Stripe(process.env.REACT_APP_STRIPE_PUB_KEY, {\n stripeAccount: client.stripe_account_id\n });\n\n this.setState({\n stripe\n });\n }\n\n setVoucher = voucher => {\n this.setState({ voucher });\n };\n\n netPrice = price => {\n const { voucher } = this.state;\n if (voucher) {\n return price - voucher.value;\n }\n return price;\n };\n\n onBusStopChange = event => {\n this.setState({\n stop: event.target.value\n });\n };\n\n onYearGroupChange = event => {\n this.setState({\n yr: event.target.value\n });\n };\n\n onDestinationChange = event => {\n this.setState({\n dest: event.target.value\n });\n };\n\n onExtIdChange = event => {\n this.setState({\n extId: event.target.value\n });\n };\n\n render() {\n const {\n passenger,\n ticket,\n client,\n service,\n renewal,\n classes,\n requireStudentId\n } = this.props;\n\n const {\n voucher,\n stop,\n yr,\n dest,\n zone,\n zoneStop,\n stripe,\n extId\n } = this.state;\n\n if (!stripe) {\n return <>;\n }\n\n let yearGroups = [];\n\n if (service) {\n yearGroups = getYearGroups(service.yr_groups);\n }\n\n const showDestination =\n service && service.destinations && service.destinations.length > 0;\n\n const useZones =\n service.zones &&\n ticket.pricing_model === 'Zonal' &&\n ticket.zone_prices;\n\n const formattedPrice = formatPrice(\n this.netPrice(useZones ? ticket.zone_prices[zone] : ticket.price),\n ticket.currency\n );\n\n return (\n \n \n \n \n \n
\n )}\n \n )}\n {hasPaymentMethods && (\n \n
\n )}\n \n )}\n {error && (\n \n \n credit_card\n \n \n ****-****-****-\n {paymentMethods[0].card.last4}\n \n {\n this.setState({\n paymentMethods: null,\n saveReplacedCard: true\n });\n }}\n />\n
\n \n Saved card\n
\n \n \n \n Need a different ticket type? Contact{' '}\n {client.name} to discuss your renewal\n preference.\n \n
\n \n {requireStudentId && (\n \n \n \n Passenger: {passenger.first_name}{' '}\n {passenger.last_name}\n \n \n Ticket:{' '}\n {formatTicketType(\n service.name,\n ticket.type,\n ticket.sub_type,\n ticket.travel_pattern,\n ticket.name\n )}{' '}\n {ticket.year}\n \n \n Valid from: {formatDate(ticket.start)}\n \n \n Valid until: {formatDate(ticket.expiry)}\n \n {formattedPrice !== '' && (\n \n Price: {formattedPrice}\n \n )}\n
\n \n \n \n \n Help finding your student id\n \n \n
\n \n )}\n {useZones && (\n \n {\n this.setState({\n [e.target.name]: e.target.value\n });\n }}\n zone={zone}\n zoneStop={zoneStop}\n />\n
\n \n )}\n {service && 'stops' in service && !useZones && (\n \n \n \n Bus Stop\n \n \n {serviceStop}\n \n ))}\n \n \n
\n \n )}\n\n {showDestination && (\n \n \n \n Destination\n \n \n {serviceDest}\n \n )\n )}\n \n \n
\n \n )}\n\n {yearGroups.length > 0 && (\n \n \n \n Year group\n \n \n {year === 'reception'\n ? 'Reception'\n : `Year ${year}`}\n \n ))}\n \n \n
\n \n )}\n\n \n
\n \n \n
\n \n \n \n By completing this purchase, I confirm I have read and\n accepted the following:\n \n {service.terms_url && (\n \n \n {client.name} T&Cs\n \n \n )}\n \n \n ShuttleID T&Cs\n \n \n {error && (\n \n {error}\n \n )}\n
\n );\n }\n}\n\nDirectDebitPaymentForm.propTypes = {\n classes: PropTypes.shape().isRequired,\n ticket: PropTypes.shape().isRequired,\n service: PropTypes.shape().isRequired,\n renewal: PropTypes.shape().isRequired,\n client: PropTypes.shape().isRequired,\n stop: PropTypes.string,\n dest: PropTypes.string,\n extId: PropTypes.string\n};\n\nDirectDebitPaymentForm.defaultProps = {\n stop: '',\n dest: '',\n extId: ''\n};\n\nexport default withStyles(styles)(withRouter(DirectDebitPaymentForm));\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Typography } from '@material-ui/core';\nimport TextField from '@material-ui/core/TextField';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Select from '@material-ui/core/Select';\nimport moment from 'moment';\nimport DirectDebitRenewalPaymentForm from './DirectDebitRenewalPaymentForm';\nimport VoucherForm from './VoucherForm';\nimport ContentHeader from './ContentHeader';\nimport {\n formatTicketType,\n formatDate,\n formatPrice\n} from '../helpers/formatters';\nimport { getCurrencySymbol, getYearGroups } from '../helpers/ticket';\nimport ZonesForm from './ZonesForm';\nimport globalStyles from '../styles';\n\nconst styles = {\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)'\n },\n input: {\n width: '100%',\n maxWidth: '250px',\n display: 'inline-block',\n margin: '0px auto 0px',\n verticalAlign: 'unset',\n '& > div': {\n display: 'block'\n },\n '& input': {\n maxWidth: '220px'\n }\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n zonesDescription: {\n padding: '20px 0 0',\n fontWeight: '100',\n textAlign: 'center'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n formControl: {\n maxWidth: 250,\n width: '100%',\n margin: '0 auto',\n display: 'flex'\n },\n zoneMenuItem: {\n whiteSpace: 'normal'\n },\n paymentHelp: {\n ...globalStyles.link,\n padding: '1em 0',\n display: 'block'\n },\n zonesForm: {\n display: 'flex',\n flexDirection: 'column',\n gap: '20px',\n paddingBottom: '35px'\n },\n link: globalStyles.link\n};\n\nclass ConfirmDirectDebitRenewal extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voucher: null,\n stop: props.stop,\n yr: props.yr,\n dest: props.dest,\n zone: props.zone,\n zoneStop: props.zoneStop,\n extId: props.extId\n };\n }\n\n setVoucher = voucher => {\n this.setState({ voucher });\n };\n\n calcMonthlyPriceAfterDiscount = (ticket, priceMonthly) => {\n const { voucher } = this.state;\n\n if (voucher) {\n const monthlyDiscount =\n (Number(voucher.value) * 100) /\n Number(ticket.num_monthly_payments);\n return (Number(priceMonthly) * 100 - monthlyDiscount) / 100;\n }\n\n return Number(priceMonthly);\n };\n\n onBusStopChange = event => {\n this.setState({\n stop: event.target.value\n });\n };\n\n onDestinationChange = event => {\n this.setState({\n dest: event.target.value\n });\n };\n\n getVoucherMessage = (\n ticket,\n total,\n roundedMonthlyPricePenceAfterDiscount,\n priceMonthly,\n priceDeposit\n ) => {\n const hasFullValueVoucher = roundedMonthlyPricePenceAfterDiscount < 100;\n const hasMonthlyPayments = parseFloat(priceMonthly) > 0;\n const { voucher } = this.state;\n\n if (!hasMonthlyPayments) {\n return '';\n }\n\n if (!voucher) {\n return '';\n }\n\n if (hasFullValueVoucher) {\n return (\n <>\n \n \n \n Need a different ticket type? Contact {client.name}{' '}\n to discuss your renewal preference.\n \n
\n \n {requireStudentId && (\n \n \n \n Passenger: {passenger.first_name}{' '}\n {passenger.last_name}\n \n \n Ticket:{' '}\n {formatTicketType(\n service.name,\n ticket.type,\n ticket.sub_type,\n ticket.travel_pattern\n )}{' '}\n {ticket.year}\n \n \n Valid from: {formatDate(ticket.start)}\n \n \n Valid until: {formatDate(ticket.expiry)}\n \n {parseFloat(priceMonthly) <= 0 && (\n <>\n \n Total price:{' '}\n {formatPrice(total, ticket.currency)}\n \n \n )}\n {parseFloat(priceMonthly) > 0 && (\n
\n \n \n Initial payment due now:{' '}\n {formatPrice(priceDeposit, ticket.currency)}\n \n \n Monthly payments:{' '}\n {formatPrice(\n monthlyPriceAfterDiscount,\n ticket.currency\n )}\n {' x '}\n {ticket.num_monthly_payments}\n {voucher && voucher.value && (\n <> (discounted)\n )}\n \n \n First monthly payment:{' 1st '}\n {moment(ticket.monthly_sub_start).format(\n 'MMMM YYYY'\n )}\n \n \n Total price:{' '}\n {formatPrice(total, ticket.currency)}\n \n
\n )}\n Pricing
\n\n
\n
\n )}\n {useZones && (\n \n \n \n \n Help finding your student id\n \n \n
\n \n \n Select your travel zone.{' '}\n {service.timetable_url && (\n <>\n \n Help finding your zone\n \n .\n \n )}\n \n
\n )}\n {service && 'stops' in service && !useZones && (\n \n {\n this.setState({\n [e.target.name]: e.target.value\n });\n }}\n zone={zone}\n zoneStop={zoneStop}\n />\n
\n \n
\n )}\n\n {showDestination && (\n \n \n \n Bus Stop\n \n \n {serviceStop}\n \n ))}\n \n \n
\n \n
\n )}\n\n {yearGroups.length > 0 && (\n \n \n \n Destination\n \n \n {serviceDest}\n \n ))}\n \n \n
\n \n
\n )}\n\n {parseFloat(priceMonthly) > 0 && (\n \n \n \n Year group\n \n \n {year === 'reception'\n ? 'Reception'\n : `Year ${year}`}\n \n ))}\n \n \n
\n \n
\n )}\n\n {!hasFullValueVoucher && (\n \n
\n )}\n \n );\n }\n}\n\nConfirmDirectDebitRenewal.propTypes = {\n passenger: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string\n }).isRequired,\n ticket: PropTypes.shape({\n start: PropTypes.string,\n expiry: PropTypes.string,\n price: PropTypes.string\n }).isRequired,\n client: PropTypes.shape().isRequired,\n service: PropTypes.shape().isRequired,\n classes: PropTypes.shape().isRequired,\n requireStudentId: PropTypes.bool\n};\n\nConfirmDirectDebitRenewal.defaultProps = {\n requireStudentId: false\n};\n\nexport default withStyles(styles)(ConfirmDirectDebitRenewal);\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport { Typography, withStyles, CircularProgress } from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport { Redirect } from 'react-router-dom';\nimport ConfirmRenewal from '../components/ConfirmRenewal';\nimport ConfirmDirectDebitRenewal from '../components/ConfirmDirectDebitRenewal';\nimport { hasValidZonePricing } from '../helpers/ticket';\n\nconst styles = theme => ({\n root: {\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n error: {\n margin: '20px 0 0 5px',\n color: red[500],\n minHeight: '20px',\n textAlign: 'center'\n },\n spinner: {\n marginLeft: 'calc(50% - 22px)',\n marginTop: '60px'\n },\n availabilityWarning: {\n background: 'red',\n textAlign: 'center',\n marginBottom: 20,\n padding: 5\n },\n availabilityWarningHeading: {\n color: 'white',\n fontWeight: 'bold'\n },\n availabilityWarningText: {\n color: 'white'\n }\n});\n\nclass RenewTicket extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: '',\n passenger: {\n firstName: '',\n lastName: '',\n photo: null,\n zone: '',\n zoneStop: ''\n },\n stop: '',\n dest: '',\n yr: '',\n ticket: null,\n client: null,\n service: null,\n renewal: null,\n mandates: null,\n isLoading: true,\n extId: ''\n };\n }\n\n async componentDidMount() {\n const {\n match: {\n params: { renewalId }\n }\n } = this.props;\n\n try {\n // get detailed renewal\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_RENEWAL_API_ENDPOINT\n }/renewal/detailed/${renewalId}`,\n {\n headers\n }\n );\n\n // set client, service, ticket, previous customer ticket\n const { client, renewal } = response.data;\n const { passenger } = response.data.previous_customer_ticket;\n\n const renewalTicket = response.data.renewal_ticket;\n\n const tickets = await axios.get(\n `${process.env.REACT_APP_TICKET_API_ENDPOINT}/service/${\n renewalTicket.service_id\n }/tickets/${renewalTicket.year.replace('/', '-')}`\n );\n\n const ticket = tickets.data.find(\n t => t.id === response.data.renewal_ticket.id\n );\n\n const extId = response.data.previous_customer_ticket.ext_id || '';\n const stop = response.data.previous_customer_ticket.stop || '';\n const yr = response.data.previous_customer_ticket.yr || '';\n const dest = response.data.previous_customer_ticket.dest || '';\n const zone = response.data.previous_customer_ticket.zone || '';\n const zoneStop =\n response.data.previous_customer_ticket.zone_stop || '';\n\n if (ticket.available === false || ticket.is_enabled === false) {\n throw new Error('Ticket unavailable');\n }\n\n let mandates = [];\n if (ticket && ticket.payment_type === 'dd') {\n mandates = await this.getMandates(client.id);\n }\n\n const service = this.extractService(client, ticket.service_id);\n\n let safeZone = '';\n let safeZoneStop = '';\n let safeStop = '';\n let safeDest = '';\n\n // Previous zone selection may no longer be valid\n if (ticket.pricing_model === 'Zonal') {\n if (!hasValidZonePricing(ticket, service)) {\n throw new Error('Zonal pricing misconfiguration');\n }\n\n if (service.zones) {\n const serviceZone = service.zones.find(\n z => z.name === zone\n );\n\n if (serviceZone) {\n safeZone = zone;\n\n if (\n serviceZone.stops &&\n serviceZone.stops.length &&\n serviceZone.stops.includes(zoneStop)\n ) {\n safeZoneStop = zoneStop;\n }\n }\n }\n } else if (stop) {\n if (\n service.stops &&\n service.stops.length &&\n service.stops.find(item => item === stop)\n ) {\n safeStop = stop;\n }\n }\n\n if (dest) {\n if (\n service.destinations &&\n service.destinations.length &&\n service.destinations.find(item => item === dest)\n ) {\n safeDest = dest;\n }\n }\n\n this.setState({\n extId,\n client,\n ticket,\n service,\n renewal,\n passenger,\n mandates,\n stop: safeStop,\n dest: safeDest,\n yr,\n zone: safeZone,\n zoneStop: safeZoneStop,\n isLoading: false,\n error: ''\n });\n } catch (e) {\n console.error(e);\n let errorMessage =\n 'There was a problem retrieving the ticket. Please try again later or contact our support team.';\n if (e.message === 'Ticket unavailable') {\n errorMessage =\n 'Ticket is no longer available for purchase. Please contact your transport provider for more information.';\n }\n\n if (e.response && e.response.status === 403) {\n errorMessage =\n 'Permission denied: Renewals can only be accessed from the account which purchased the original ticket. Hint: Please log in with the email address that received the renewal notification.';\n }\n\n if (\n e.response &&\n e.response.status === 503 &&\n e.response.data.error &&\n e.response.data.error.key === 'gocardless.offline'\n ) {\n errorMessage = e.response.data.error.message;\n }\n\n this.setState({\n isLoading: false,\n error: errorMessage\n });\n }\n }\n\n getMandates = async clientId => {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-mandate/client/${clientId}`,\n {\n headers\n }\n );\n\n return response.data;\n };\n\n formatRemainingTickets = ticket => {\n const ticketWord = ticket.remaining > 1 ? 'tickets' : 'ticket';\n return `Only ${ticket.remaining} ${ticketWord} left, hurry!`;\n };\n\n extractService(client, serviceId) {\n try {\n const { services = [] } = client;\n\n if (!services.length) {\n throw new Error();\n }\n\n const service = services.find(item => item.id === serviceId);\n\n if (!service) {\n throw new Error('Could not find service for specified client.');\n }\n\n return service;\n } catch (e) {\n this.setState({\n error:\n 'There was a problem retrieving the ticket info, please try again later'\n });\n return null;\n }\n }\n\n render() {\n const {\n passenger,\n ticket,\n client,\n service,\n stop,\n dest,\n zone,\n zoneStop,\n error,\n renewal,\n mandates,\n isLoading,\n yr,\n extId\n } = this.state;\n\n const { classes } = this.props;\n\n if (isLoading) {\n return (\n \n
\n );\n }\n\n if (error) {\n return (\n \n \n {error}\n \n
\n );\n }\n\n if (\n ticket &&\n ticket.payment_type === 'dd' &&\n mandates &&\n !mandates.length\n ) {\n return (\n \n {showAvailabilityWarning && (\n
\n );\n }\n}\n\nexport default withStyles(styles)(RenewTicket);\n","import React from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport ContentHeader from '../components/ContentHeader';\nimport ViewTicketButtons from '../components/ViewTicketButtons';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n }\n});\n\nconst RenewalConfirmed = ({ classes, match }) => {\n const {\n params: { ticketId }\n } = match;\n\n return (\n \n \n {this.formatRemainingTickets(ticket)}\n \n \n If you need more tickets than available please do\n not purchase this ticket.\n \n
\n )}\n {confirmPurchaseComponent}
\n \n
\n );\n};\n\nexport default withStyles(styles)(RenewalConfirmed);\n","import React from 'react';\nimport { withStyles, Typography, Button } from '@material-ui/core';\nimport ContentHeader from '../components/ContentHeader';\nimport './Help.css';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n textAlign: 'left',\n border: '0',\n maxWidth: '600px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px',\n fontSize: 22\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n link: globalStyles.link\n});\n\nconst Help = ({ classes }) => {\n return (\n \n \n Congratulations, your order was successful and your new{' '}\n ticket is ready to use.\n \n \n Tickets will be scanned onboard and will need to be\n presented by the passenger.\n \n \n IMPORTANT: Please note\n your previous ticket will stop working when it expires and\n your new ticket can only be used from the start date\n displayed on the ticket.\n \n\n
\n \n
\n );\n};\n\nexport default withStyles(styles)(Help);\n","import React, { useState, useEffect } from 'react';\nimport { CircularProgress } from '@material-ui/core';\nimport axios from 'axios';\nimport qs from 'query-string';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport TextField from '@material-ui/core/TextField';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport ContentHeader from '../components/ContentHeader';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '600px',\n margin: '40px auto',\n position: 'relative',\n textAlign: 'center',\n minHeight: '300px',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n intro: {\n marginTop: 30\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '360px',\n margin: '20px auto 40px',\n padding: '20px 10px 20px'\n },\n input: {\n margin: '0 20px 20px'\n },\n yearSelect: {\n textAlign: 'left'\n },\n serviceSelect: {\n textAlign: 'left'\n },\n passengerCount: {\n textAlign: 'right'\n },\n passengers: {\n display: 'flex',\n flexDirection: 'column',\n margin: '10px 0',\n padding: '25px 0 5px',\n border: '1px dashed #ccc'\n },\n submit: {\n width: '200px',\n height: '56px',\n margin: '20px auto'\n },\n message: {\n display: 'inline-block',\n margin: '130px auto'\n },\n spinner: {\n margin: '130px auto'\n },\n formControl: {\n margin: '0 20px 20px',\n display: 'flex'\n },\n 'error > div': {\n border: '1px solid red'\n }\n});\n\nconst WaitingList = ({ classes, match, location }) => {\n const {\n params: { clientSlug, year }\n } = match;\n\n const [isLoading, setIsLoading] = useState(true);\n const [submitted, setSubmitted] = useState(false);\n const [submitFailed, setSubmitFailed] = useState(false);\n const [data, setData] = useState(null);\n\n const cleanYear = year ? year.replace('-', '/') : '';\n\n const [email, setEmail] = useState('');\n const [mobile, setMobile] = useState('');\n const [service, setService] = useState('');\n const [academicYear, setYear] = useState(cleanYear);\n const [postCode, setPostCode] = useState('');\n const [passengerCount, setPassengerCount] = useState(1);\n const [passengers, setPassengers] = useState([\n {\n firstName: '',\n lastName: ''\n }\n ]);\n\n const [isServiceValid, setIsServiceValid] = useState(true);\n const [isYearValid, setIsYearValid] = useState(true);\n\n const sortServices = services => {\n return services.sort((a, b) => {\n const serviceA = a;\n const serviceB = b;\n\n const aMatches = serviceA.match(/([A-Za-z]+)([0-9]+)/);\n const bMatches = serviceB.match(/([A-Za-z]+)([0-9]+)/);\n\n if (!aMatches || !bMatches) {\n return serviceA.localeCompare(serviceB);\n }\n\n if (aMatches.length < 3 || bMatches.length < 3) {\n return serviceA.localeCompare(serviceB);\n }\n\n if (aMatches[1] === bMatches[1]) {\n return parseInt(aMatches[2], 10) - parseInt(bMatches[2], 10);\n }\n\n return aMatches[1].localeCompare(bMatches[1]);\n });\n };\n\n useEffect(() => {\n async function fetchWaitingList() {\n try {\n const response = await axios.get(\n `${\n process.env.REACT_APP_WAITING_LIST_API_ENDPOINT\n }/waiting-list/client/${clientSlug}`\n );\n\n if (response.data && response.data.services.length) {\n response.data.services = sortServices(\n response.data.services\n );\n }\n\n setData(response.data);\n\n if (response.data.services && response.data.services.length) {\n const query = qs.parse(location.search);\n const serviceParam = query.service || '';\n const serviceMatch = response.data.services.find(\n item => item === serviceParam\n );\n\n if (serviceMatch) {\n setService(serviceMatch);\n }\n }\n\n setIsLoading(false);\n } catch (error) {\n setIsLoading(false);\n }\n }\n\n fetchWaitingList();\n }, []);\n\n const onSubmit = async e => {\n e.preventDefault();\n\n if (data.services && data.services.length && service === '') {\n setIsServiceValid(false);\n return;\n }\n\n if (\n !(data.year && data.year.length && data.year.includes(academicYear))\n ) {\n setIsYearValid(false);\n return;\n }\n\n setIsLoading(true);\n\n try {\n const query = qs.parse(location.search);\n const ticketName = query.ticket || '';\n\n await axios.post(\n `${\n process.env.REACT_APP_WAITING_LIST_API_ENDPOINT\n }/waiting-list/passenger`,\n {\n email,\n mobile,\n postCode,\n passengers,\n year: academicYear,\n service,\n clientSlug,\n ticketName\n }\n );\n setIsLoading(false);\n setSubmitted(true);\n } catch (error) {\n setIsLoading(false);\n setSubmitFailed(true);\n }\n };\n\n const handleChange = setFunc => ({ target }) => setFunc(target.value);\n\n const handleServiceChange = ({ target }) => {\n setService(target.value);\n setIsServiceValid(true);\n };\n\n const handleYearChange = ({ target }) => {\n setYear(target.value);\n setIsYearValid(true);\n };\n\n const handlePassengerCount = ({ target }) => {\n const count = parseInt(target.value, 10);\n setPassengerCount(count);\n setPassengers(prevState => {\n const newSlice = prevState.slice(0, count);\n\n if (newSlice.length !== count) {\n const diff = count - newSlice.length;\n\n for (let i = 0; i < diff; i += 1) {\n newSlice.push({\n firstName: '',\n lastName: ''\n });\n }\n }\n\n return newSlice;\n });\n };\n\n const renderTextField = (id, label, value, onChange) => (\n \n \n To ensure your issue is dealt with as quick as possible, we\n need to determine the type of query you have. In many cases\n your query may need to go direct to your Transport Provider,\n who use our ticketing platform to issue/sell bus tickets.\n \n
\n \n \n I have a query about the bus service\n \n \n \n Any query regarding the below items needs to go to\n your Transport Provider\n \n . This is typically your bus/coach company but could be\n your school/college - whichever organisation is\n responsible for organising your travel and issuing\n tickets.\n \n \n Contacting ShuttleID regarding the above items will\n delay in your query being resolved as ultimately it can\n only be handled by your Transport Provider.\n \n
\n \n
\n - \n
- Timetables \n
- Route/bus stops \n
- Ticket prices \n
- Ticket options \n
- Ticket availability \n
- \n
- Payments \n
- Renewals \n
- Discounts/bursaries \n
- Refunds/cancellations \n
- Lost property \n
\n \n I have a technical query about purchasing or using my\n ticket\n \n \n The ShuttleID support team can only assist with\n technical queries regarding the purchase process and the\n use of the ticket itself.\n \n \n For guidance on how to complete your purchase or how to\n use your ticket, visit the{' '}\n \n Help Portal\n \n . Most queries are answered here and will allow you to\n resolve your issue immediately, without further delay.\n \n \n The{' '}\n \n Help Portal\n {' '}\n is available 24/7, enabling you to answer your query\n straight away, when it{\"'\"}s convenient for you.\n \n \n \n Visit Help Portal\n \n \n \n If you are purchasing a ticket via ShuttleID for the\n first time, please contact your Transport Provider for a\n link to their ticket listings page on the ShuttleID\n Passenger Portal.\n \n \n Your Transport Provider may advertise this directly on\n their own website, social media or via an email to you.\n \n \n For any other technical issues that are not already\n covered by the help portal, please email{' '}\n \n support@shuttleid.uk\n \n . Our support team will endeavour to respond to your\n request within 24 hours.\n \n
\n \n {renderTextField(\n `passenger-first-${index}`,\n `Passenger ${index + 1} first name`,\n passenger.firstName,\n ({ target }) => {\n setPassengers(prevState =>\n prevState.map((item, i) => {\n if (index !== i) {\n return item;\n }\n\n return {\n firstName: target.value,\n lastName: passenger.lastName\n };\n })\n );\n }\n )}\n {renderTextField(\n `passenger-last-${index}`,\n `Passenger ${index + 1} last name`,\n passenger.lastName,\n ({ target }) => {\n setPassengers(prevState =>\n prevState.map((item, i) => {\n if (index !== i) {\n return item;\n }\n\n return {\n firstName: passenger.firstName,\n lastName: target.value\n };\n })\n );\n }\n )}\n
\n );\n\n if (isLoading) {\n return (\n \n
\n );\n }\n\n if (!isLoading && !data) {\n return (\n \n \n Cannot find waiting list\n \n
\n );\n }\n\n if (submitted) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n Thanks for joining the waiting list.
\n\n We{\"'\"}ve sent a confirmation email to {email}.\n
\n\n {data.name} will be in contact when there is\n availability on their service.\n
\n\n
\n );\n};\n\nWaitingList.propTypes = {\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(WaitingList);\n","import React from 'react';\nimport moment from 'moment';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport Table from '@material-ui/core/Table';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableBody from '@material-ui/core/TableBody';\nimport { withStyles } from '@material-ui/core';\n\nconst styles = () => ({\n table: {\n maxWidth: '500px',\n margin: '0 auto'\n },\n subheading: {\n margin: '20px 0 10px'\n }\n});\n\nconst TripsTable = ({ trips, classes }) => {\n if (!trips || !trips.length) {\n return (\n <>\n \n Join the waiting list for {data.name}.\n
\n \n\n No trips taken\n
\nWe{\"'\"}ll display all your trips here for your records
\n \n );\n }\n\n return (\n\n \n There was a problem retrieving your trip details\n \n )}\n {trips && !error && (\n
\n );\n }\n}\n\nexport default withStyles(styles)(Trips);\n","import React, { Component } from 'react';\nimport { CardElement, injectStripe } from 'react-stripe-elements';\nimport {\n withStyles,\n Typography,\n withWidth,\n CircularProgress,\n Icon\n} from '@material-ui/core';\nimport { withRouter } from 'react-router-dom';\nimport { Auth } from 'aws-amplify';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Select from '@material-ui/core/Select';\nimport moment from 'moment';\nimport ContentHeader from './ContentHeader';\nimport { formatPrice } from '../helpers/formatters';\nimport LoaderButton from './LoaderButton';\nimport {\n DEFAULT_ERROR,\n getFriendlyPaymentError,\n isSafePaymentError\n} from '../helpers/errors';\nimport { getCurrencySymbol } from '../helpers/ticket';\nimport globalStyles from '../styles';\n\nconst styles = {\n root: {\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n textAlign: 'center'\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n card: {\n margin: '30px auto 15px auto',\n maxWidth: '360px',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n borderRadius: '4px',\n padding: '10px 0 10px 8px'\n },\n button: {\n margin: '20px 0 20px',\n width: '200px',\n height: '56px'\n },\n error: {\n margin: '20px 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n saveCard: {\n display: 'inline',\n marginLeft: 14,\n marginTop: 18\n },\n spinner: {\n marginTop: 60,\n marginBottom: 60,\n marginLeft: 'calc(50% - 22px)'\n },\n icon: {\n fontSize: 25\n },\n existingCardParent: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: 20\n },\n existingCard: {\n ...globalStyles.savedCard,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '0 10px',\n flexWrap: 'wrap'\n },\n existingCardHeader: {\n flexBasis: '100%',\n marginTop: 10,\n ...globalStyles.savedCardHeader\n },\n changeCard: {\n width: 'auto',\n height: 'auto',\n padding: '5px',\n lineHeight: '1',\n marginLeft: 10,\n fontSize: 12\n }\n};\n\nclass TopUpForm extends Component {\n constructor(props) {\n super(props);\n\n const { ticket } = this.props;\n const numTrips =\n ticket.default_trips > 0 && ticket.default_trips < 50\n ? ticket.default_trips\n : 20;\n\n this.state = {\n processing: false,\n error: '',\n cardError: '',\n cardValid: false,\n paymentError: false,\n numTrips,\n saveCard: false,\n saveReplacedCard: false,\n paymentMethods: null,\n isLoadingPaymentMethods: true\n };\n }\n\n async componentDidMount() {\n try {\n // get customer payment methods\n const { client } = this.props;\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/payment-methods/${\n currentSession.getAccessToken().payload.sub\n }/${client.slug}`,\n {\n headers\n }\n );\n\n // if any, set state\n if (\n response.data &&\n response.data.data &&\n response.data.data.length\n ) {\n this.setState({\n paymentMethods: response.data.data,\n isLoadingPaymentMethods: false\n });\n } else {\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n } catch (error) {\n console.error(error);\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n }\n\n handleSubmit = async () => {\n const { cardError, cardValid, paymentMethods } = this.state;\n\n if (cardError) {\n this.setState({\n error: cardError\n });\n return;\n }\n if (!cardValid && !paymentMethods) {\n this.setState({\n error: 'Please complete all card details including postcode'\n });\n return;\n }\n\n this.setState({\n processing: true,\n error: ''\n });\n\n try {\n await this.handleInitialPayment();\n } catch (e) {\n console.error(e);\n const error = getFriendlyPaymentError(e, DEFAULT_ERROR);\n this.setState({\n processing: false,\n error,\n paymentError: !isSafePaymentError(error)\n });\n }\n };\n\n handleInitialPayment = async () => {\n const { stripe, history, customerTicket } = this.props;\n\n const {\n numTrips,\n saveCard,\n saveReplacedCard,\n paymentMethods\n } = this.state;\n\n let paymentMethodId;\n\n if (paymentMethods && paymentMethods.length) {\n paymentMethodId = paymentMethods[0].id;\n } else {\n const { paymentMethod, error } = await stripe.createPaymentMethod(\n 'card',\n this.cardElement\n );\n\n if (error) {\n if (error.code === 'card_declined') {\n throw new Error('Card declined');\n } else if (error.type === 'card_error') {\n throw new Error('Card error');\n } else {\n throw new Error('Card api error');\n }\n } else {\n paymentMethodId = paymentMethod.id;\n }\n }\n\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.post(\n `${process.env.REACT_APP_PAYMENT_API_ENDPOINT}/top-up/stripe`,\n {\n payment_method_id: paymentMethodId,\n customerTicketId: customerTicket.id,\n num_trips: numTrips,\n save_card: saveCard || saveReplacedCard\n },\n {\n headers\n }\n );\n\n if (response.data.id) {\n const confirmUrl = `/top-up-confirmed/${response.data.id}`;\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleActionPayment(response.data);\n } else {\n throw new Error('Problem creating payment intent.');\n }\n };\n\n handleActionPayment = async paymentResponse => {\n const { stripe, history, customerTicket } = this.props;\n const { numTrips } = this.state;\n\n const {\n error: errorAction,\n paymentIntent\n } = await stripe.handleCardAction(\n paymentResponse.payment_intent_client_secret\n );\n\n if (errorAction) {\n throw new Error(errorAction.message);\n } else {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.post(\n `${process.env.REACT_APP_PAYMENT_API_ENDPOINT}/top-up/stripe`,\n {\n payment_intent_id: paymentIntent.id,\n customerTicketId: customerTicket.id,\n num_trips: numTrips\n },\n {\n headers\n }\n );\n\n if (response.data.id) {\n const confirmUrl = `/top-up-confirmed/${response.data.id}`;\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleAction(response.data);\n } else {\n throw new Error('Problem confirming payment intent.');\n }\n }\n };\n\n handleReady = element => {\n this.cardElement = element;\n this.cardElement.on('change', response => {\n const cardValid = !response.empty && response.complete;\n const cardError = response.error ? response.error.message : '';\n this.setState({\n cardValid,\n cardError\n });\n });\n };\n\n handleChange = event => {\n this.setState({\n numTrips: event.target.value\n });\n };\n\n netPrice = price => {\n return price;\n };\n\n displayTripOptions = (ticket, numTrips, tripPrice) => {\n const options = [];\n\n let minTrips = 1;\n\n // @NOTE: Hardcoded min trips for York college\n if (ticket.client_id === 'b153084a-ac36-4d07-a524-9ce43c9ea3e6') {\n minTrips = 10;\n\n const now = moment().format('YYYY-MM-DD');\n\n if (now >= '2023-05-15') {\n minTrips = 1;\n } else if (now >= '2023-04-17') {\n minTrips = 6;\n }\n }\n\n // @NOTE: Hardcoded min trips for Denso\n if (ticket.client_id === 'd651edf0-3ffe-44cf-8dcc-f93257672c78') {\n minTrips = 5;\n }\n\n for (let i = minTrips; i <= 50; i += 1) {\n options.push(\n \n );\n }\n\n return (\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(\n injectStripe(withRouter(withWidth()(TopUpForm)))\n);\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport { Elements, StripeProvider } from 'react-stripe-elements';\nimport { Typography, withStyles, CircularProgress } from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport TopUpForm from '../components/TopUpForm';\nimport { contactOperatorString } from '../helpers/contact';\n\nconst styles = {\n root: {\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative'\n },\n error: {\n margin: '20px 0 0 5px',\n color: red[500],\n minHeight: '20px',\n textAlign: 'center'\n },\n spinner: {\n marginLeft: 'calc(50% - 22px)',\n marginTop: '60px'\n }\n};\n\nconst hasExpired = ticket => {\n const now = new Date().toISOString();\n return ticket.expiry && ticket.expiry < now;\n};\n\nconst isVoided = ticket => {\n return ticket.ticket_status === 'void';\n};\n\nclass TopUp extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: '',\n ticket: null,\n customerTicket: null,\n client: null,\n isLoading: true\n };\n }\n\n async componentDidMount() {\n const {\n match: {\n params: { ticketId }\n }\n } = this.props;\n\n try {\n const currentSession = await Auth.currentSession();\n\n // get customer ticket\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const customerTicketResponse = await axios.get(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/user-id/${\n currentSession.getAccessToken().payload.sub\n }/${ticketId}`,\n {\n headers\n }\n );\n\n const customerTicket = customerTicketResponse.data;\n\n // get client\n const clientResponse = await axios.get(\n `${process.env.REACT_APP_API_ENDPOINT}/client/${\n customerTicket.client_id\n }`,\n {\n headers\n }\n );\n const client = clientResponse.data;\n\n // get ticket\n const ticketResponse = await axios.get(\n `${process.env.REACT_APP_TICKET_API_ENDPOINT}/ticket/${\n customerTicket.ticket_id\n }`,\n {\n headers\n }\n );\n const ticket = ticketResponse.data;\n\n this.setState({\n ticket,\n client,\n customerTicket,\n isLoading: false,\n error: ''\n });\n } catch (e) {\n console.error(e);\n\n const errMessage =\n e.response && e.response.status === 403\n ? 'You do not have permission to top-up this ticket. Please log into the original account which purchased the ticket. Hint: Please use the email address where your top-up alert was sent to.'\n : 'There was a problem retrieving the ticket. Please try again later or contact our support team.';\n\n this.setState({\n isLoading: false,\n error: errMessage\n });\n }\n }\n\n render() {\n const { client, customerTicket, ticket, error, isLoading } = this.state;\n\n const { classes } = this.props;\n\n if (isLoading) {\n return (\n \n \n {error}\n \n )}\n\n
\n \n
\n\n <>\n {!hasPaymentMethods && (\n <>\n \n \n Passenger: {customerTicket.passenger.first_name}{' '}\n {customerTicket.passenger.last_name}\n \n \n Ticket: {customerTicket.service_name}{' '}\n {customerTicket.type}\n {ticket.name ? ` ${ticket.name}` : ''}\n \n {customerTicket.zone && (\n \n Zone: {customerTicket.zone}\n \n )}\n {customerTicket.expiry && (\n \n Expiry:{' '}\n {moment(customerTicket.expiry).format(\n 'ddd Do MMM YYYY'\n )}\n \n )}\n \n Balance:{' '}\n {parseInt(customerTicket.trips, 10) -\n parseInt(\n customerTicket.trips_taken,\n 10\n )}{' '}\n trips left\n \n
\n\n Choose top-up amount:\n
\n\n \n \n Amount\n \n {this.displayTripOptions(\n ticket,\n numTrips,\n tripPrice\n )}\n \n
\n \n {formatPrice(\n this.netPrice(tripPrice * numTrips),\n ticket.currency\n )}\n
\n\n \n \n \n \n
\n )}\n \n )}\n {hasPaymentMethods && (\n \n
\n )}\n \n\n {error && (\n \n \n credit_card\n \n \n ****-****-****-\n {paymentMethods[0].card.last4}\n \n {\n this.setState({\n paymentMethods: null,\n saveReplacedCard: true\n });\n }}\n />\n
\n \n Saved card\n
\n \n
\n );\n }\n\n if (error) {\n return (\n \n \n {error}\n \n
\n );\n }\n\n if (hasExpired(customerTicket)) {\n return (\n \n \n \n \n
\n );\n }\n}\n\nexport default withStyles(styles)(TopUp);\n","import React from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport ContentHeader from '../components/ContentHeader';\nimport ButtonLink from '../components/ButtonLink';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n button: {\n margin: '5px 5px'\n }\n});\n\nconst TopUpConfirmed = ({ classes, match }) => {\n const {\n params: { customerTicketId }\n } = match;\n\n return (\n \n
\n );\n};\n\nexport default withStyles(styles)(TopUpConfirmed);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { CardElement, injectStripe } from 'react-stripe-elements';\nimport {\n withStyles,\n Typography,\n withWidth,\n CircularProgress,\n Icon\n} from '@material-ui/core';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { withRouter } from 'react-router-dom';\nimport axios from 'axios';\nimport { red } from '@material-ui/core/colors';\nimport { Auth } from 'aws-amplify';\nimport LoaderButton from './LoaderButton';\nimport { formatPrice } from '../helpers/formatters';\nimport {\n DEFAULT_ERROR,\n getFriendlyPaymentError,\n isSafePaymentError\n} from '../helpers/errors';\n\nconst styles = {\n root: {\n marginTop: '20px',\n minHeight: '100px',\n marginBottom: '20px',\n padding: '0 10px 10px',\n textAlign: 'center'\n },\n card: {\n margin: '30px auto 15px auto',\n maxWidth: '360px',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n borderRadius: '4px',\n padding: '10px 0 10px 8px'\n },\n button: {\n margin: '20px 0 20px',\n width: '200px',\n height: '56px'\n },\n error: {\n margin: '20px 20px 10px',\n color: red[500],\n minHeight: '20px'\n },\n saveCard: {\n display: 'inline',\n marginLeft: 14,\n marginTop: 18\n },\n spinner: {\n marginTop: 60,\n marginBottom: 60,\n marginLeft: 'calc(50% - 22px)'\n },\n icon: {\n fontSize: 25\n },\n existingCardParent: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: 20\n },\n existingCard: {\n background: '#ebfaff',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '0 10px',\n flexWrap: 'wrap'\n },\n existingCardHeader: {\n flexBasis: '100%',\n marginTop: 10,\n background: '#70d0ff'\n },\n changeCard: {\n width: 'auto',\n height: 'auto',\n padding: '5px',\n lineHeight: '1',\n marginLeft: 10,\n fontSize: 12\n }\n};\n\nclass BookingPaymentForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n processing: false,\n error: '',\n cardError: '',\n cardValid: false,\n paymentError: false,\n saveCard: false,\n saveReplacedCard: false,\n paymentMethods: null,\n isLoadingPaymentMethods: true\n };\n }\n\n async componentDidMount() {\n try {\n // get customer payment methods\n const { client } = this.props;\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.get(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/payment-methods/${\n currentSession.getAccessToken().payload.sub\n }/${client.slug}`,\n {\n headers\n }\n );\n\n // if any, set state\n if (\n response.data &&\n response.data.data &&\n response.data.data.length\n ) {\n this.setState({\n paymentMethods: response.data.data,\n isLoadingPaymentMethods: false\n });\n } else {\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n } catch (error) {\n console.error(error);\n this.setState({\n isLoadingPaymentMethods: false\n });\n }\n }\n\n uploadImage = async () => {\n const { passenger } = this.props;\n\n try {\n const response = await axios.post(\n `${\n process.env.REACT_APP_API_ENDPOINT\n }/customer-ticket/pre-signed-url`,\n {\n fileType: passenger.photo.type,\n fileSize: passenger.photo.size\n }\n );\n\n await axios.put(response.data.preSignedUrl, passenger.photo, {\n headers: {\n 'Content-Type': passenger.photo.type\n }\n });\n\n return response.data.fileName;\n } catch (error) {\n throw new Error(error);\n }\n };\n\n handleSubmit = async () => {\n const { cardError, cardValid, paymentMethods } = this.state;\n const { buyAgain, client } = this.props;\n\n // Only check for card errors if there is value to pay\n // Full voucher value means no card validation required\n if (Number(this.netPrice()) >= 1) {\n if (cardError) {\n this.setState({\n error: cardError\n });\n return;\n }\n if (!cardValid && !paymentMethods) {\n this.setState({\n error: 'Please complete all card details including postcode'\n });\n return;\n }\n } else if (Number(this.netPrice()) > 0) {\n this.setState({\n error: `Invalid amount. Amount can only be 0 or a minimum of ${formatPrice(\n 1,\n client.features.currency\n )} using card payment.`\n });\n return;\n }\n\n let imageFileName;\n\n this.setState({\n processing: true,\n error: ''\n });\n\n if (!buyAgain) {\n try {\n imageFileName = await this.uploadImage();\n } catch (e) {\n console.error(e);\n\n if (e.response && e.response.status === 403) {\n this.setState({\n processing: false,\n error:\n 'Your photo failed to upload in time. Please retry with either a smaller image or on a faster network (WiFi).'\n });\n } else {\n this.setState({\n processing: false,\n error:\n 'There was a problem uploading your image. Please ensure it is a portrait photo and less than 10MB in size.'\n });\n }\n return;\n }\n }\n\n try {\n await this.handleInitialPayment(imageFileName);\n } catch (e) {\n console.error(e);\n const error = getFriendlyPaymentError(e, DEFAULT_ERROR);\n this.setState({\n processing: false,\n error,\n paymentError: !isSafePaymentError(error)\n });\n }\n };\n\n handleInitialPayment = async imageFileName => {\n const {\n stripe,\n history,\n booking,\n passenger,\n client,\n voucher,\n buyAgain,\n customerTicketId\n } = this.props;\n\n const { saveCard, saveReplacedCard, paymentMethods } = this.state;\n\n let paymentMethodId;\n\n // Only create payment method when there is something to charge.\n // A full value voucher will hide card field.\n if (this.netPrice() > 0) {\n if (paymentMethods && paymentMethods.length) {\n paymentMethodId = paymentMethods[0].id;\n } else {\n const {\n paymentMethod,\n error\n } = await stripe.createPaymentMethod('card', this.cardElement);\n\n if (error) {\n if (error.code === 'card_declined') {\n throw new Error('Card declined');\n } else if (error.type === 'card_error') {\n throw new Error('Card error');\n } else {\n throw new Error('Card api error');\n }\n } else {\n paymentMethodId = paymentMethod.id;\n }\n }\n }\n\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-booking/stripe`,\n {\n payment_method_id: paymentMethodId,\n booking,\n voucher,\n passenger: {\n ...passenger,\n photo: buyAgain ? passenger.photo : imageFileName\n },\n client,\n save_card: saveCard || saveReplacedCard,\n customer_ticket_id: customerTicketId\n },\n {\n headers\n }\n );\n\n if (response.data.id) {\n const ticketYear = 'advance';\n\n const confirmUrl = `/booking-confirmed/${\n response.data.id\n }/${ticketYear}/${client.slug}/`;\n\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleActionPayment(response.data, imageFileName);\n } else {\n throw new Error('Problem creating payment intent.');\n }\n };\n\n handleActionPayment = async (paymentResponse, imageFileName) => {\n const {\n stripe,\n history,\n booking,\n passenger,\n client,\n voucher,\n buyAgain,\n customerTicketId\n } = this.props;\n\n const {\n error: errorAction,\n paymentIntent\n } = await stripe.handleCardAction(\n paymentResponse.payment_intent_client_secret\n );\n\n if (errorAction) {\n throw new Error(errorAction.message);\n } else {\n const currentSession = await Auth.currentSession();\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const response = await axios.post(\n `${\n process.env.REACT_APP_PAYMENT_API_ENDPOINT\n }/customer-booking/stripe`,\n {\n payment_intent_id: paymentIntent.id,\n booking,\n voucher,\n passenger: {\n ...passenger,\n photo: buyAgain ? passenger.photo : imageFileName\n },\n client,\n customer_ticket_id: customerTicketId\n },\n {\n headers\n }\n );\n\n if (response.data.id) {\n const ticketYear = 'advance';\n\n const confirmUrl = `/booking-confirmed/${\n response.data.id\n }/${ticketYear}/${client.slug}`;\n\n history.push(confirmUrl);\n // @NOTE: Hack to jump user to top of page on submit, as the route doesn't change\n // resulting in unexpected landing half way down subsequent view.\n window.scrollTo(0, 0);\n } else if (\n response.data.requires_action &&\n response.data.payment_intent_client_secret\n ) {\n await this.handleAction(response.data, imageFileName);\n } else {\n throw new Error('Problem confirming payment intent.');\n }\n }\n };\n\n handleReady = element => {\n this.cardElement = element;\n this.cardElement.on('change', response => {\n const cardValid = !response.empty && response.complete;\n const cardError = response.error ? response.error.message : '';\n this.setState({\n cardValid,\n cardError\n });\n });\n };\n\n netPrice = () => {\n const { booking, voucher } = this.props;\n\n const ticketPrice = booking.reduce(\n (acc, b) => acc + Number(b.price),\n 0\n );\n\n if (voucher) {\n return ticketPrice - voucher.value;\n }\n return ticketPrice;\n };\n\n handleCheckboxChange = event => {\n this.setState({ [event.target.name]: event.target.checked });\n };\n\n render() {\n const { classes, width, client } = this.props;\n const {\n processing,\n error,\n paymentError,\n saveCard,\n saveReplacedCard,\n paymentMethods,\n isLoadingPaymentMethods\n } = this.state;\n\n const hasPaymentMethods = paymentMethods && paymentMethods.length;\n\n if (isLoadingPaymentMethods) {\n return (\n \n \n Congratulations, your top-up was successful.\n \n \n \n View ticket\n \n \n My tickets\n \n \n
\n \n \n By completing this purchase, I confirm I have read and\n accepted the following:\n \n {termsUrl && (\n \n \n {client.name} T&Cs\n \n \n )}\n \n \n ShuttleID T&Cs\n \n \n\n {this.netPrice() >= 1 && (\n <>\n {!hasPaymentMethods && (\n <>\n \n {error}\n \n )}\n\n
\n );\n }\n}\n\nBookingPaymentForm.propTypes = {\n classes: PropTypes.shape().isRequired,\n stripe: PropTypes.shape().isRequired,\n // booking: PropTypes.array,\n passenger: PropTypes.shape().isRequired,\n client: PropTypes.shape().isRequired,\n buyAgain: PropTypes.bool,\n customerTicketId: PropTypes.string\n};\n\nBookingPaymentForm.defaultProps = {\n buyAgain: false,\n customerTicketId: ''\n};\n\nexport default withStyles(styles)(\n injectStripe(withRouter(withWidth()(BookingPaymentForm)))\n);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { withStyles, Typography, Button } from '@material-ui/core';\nimport { Elements, StripeProvider } from 'react-stripe-elements';\nimport VoucherForm from './VoucherForm';\nimport ContentHeader from './ContentHeader';\nimport { formatPrice } from '../helpers/formatters';\nimport BookingPaymentForm from './BookingPaymentForm';\n\nconst styles = {\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)'\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n imagePreview: {\n minHeight: '56px',\n margin: '20px auto 0',\n width: '100%',\n maxWidth: '400px',\n display: 'flex',\n justifyContent: 'center',\n '& > img': {\n maxWidth: '100%'\n },\n '@media only screen and (max-device-width: 400px)': {\n margin: '0 auto 0'\n }\n },\n tripLine: {\n border: '1px solid #ccc',\n borderRadius: 5,\n marginBottom: 5,\n textAlign: 'left',\n padding: 5,\n display: 'flex'\n },\n tripLineHead: {\n display: 'flex',\n borderRight: '1px solid #ccc',\n paddingRight: 5,\n marginRight: 5,\n textAlign: 'center',\n width: 55,\n justifyContent: 'center'\n },\n tripDate: {\n fontWeight: 'bold'\n },\n tripDateDay: {\n fontSize: 20,\n display: 'block',\n color: '#5dcaff'\n },\n tripDateMonth: {\n fontSize: 8,\n display: 'block'\n },\n tripService: {\n display: 'flex',\n alignItems: 'start',\n justifyContent: 'center',\n flexDirection: 'column'\n },\n tripStop: {\n fontSize: '0.8em',\n color: '#666',\n display: 'flex',\n alignItems: 'center'\n },\n icon: {\n fontSize: '15px'\n }\n};\n\nclass ConfirmBooking extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voucher: null\n };\n }\n\n setVoucher = voucher => {\n this.setState({ voucher });\n };\n\n netPrice = price => {\n const { voucher } = this.state;\n if (voucher) {\n return price - voucher.value;\n }\n return price;\n };\n\n renderTrips(bookings) {\n const { classes } = this.props;\n const sortedBookings = bookings.map(item => item);\n sortedBookings.sort((a, b) => {\n if (a.date < b.date) {\n return -1;\n }\n if (a.date > b.date) {\n return 1;\n }\n if (a.time < b.time) {\n return -1;\n }\n if (a.time > b.time) {\n return 1;\n }\n return 0;\n });\n\n return (\n <>\n {sortedBookings.map(item => (\n \n \n \n \n \n
\n )}\n \n )}\n {hasPaymentMethods && (\n \n
\n )}\n \n )}\n {error && (\n \n \n credit_card\n \n \n ****-****-****-\n {paymentMethods[0].card.last4}\n \n {\n this.setState({\n paymentMethods: null,\n saveReplacedCard: true\n });\n }}\n />\n
\n \n Saved card\n
\n \n
\n ))}\n \n );\n }\n\n render() {\n const {\n handleEdit,\n passenger,\n booking,\n client,\n imagePreviewUrl,\n classes,\n buyAgain,\n customerTicketId\n } = this.props;\n\n const { voucher } = this.state;\n\n const stripe = window.Stripe(process.env.REACT_APP_STRIPE_PUB_KEY, {\n stripeAccount: client.stripe_account_id\n });\n\n const { firstName, lastName } = passenger;\n\n return (\n \n
\n \n \n {moment(item.date)\n .format('ddd')\n .toUpperCase()}\n \n \n {moment(item.date)\n .format('Do MMM')\n .toUpperCase()}\n \n
\n \n {item.time} | {item.service_name}\n {'stop' in item && (\n
\n \n \n {item.stop}\n \n
\n )}\n \n
\n \n
\n \n \n
\n )}\n \n \n Passenger: {firstName} {lastName}\n \n\n \n Ticket: {client.site_name} Advance Pass\n \n \n Price:{' '}\n {formatPrice(\n this.netPrice(\n booking.reduce(\n (acc, b) => acc + Number(b.price),\n 0\n ),\n client.features.currency\n )\n )}{' '}\n ({booking.length} journeys)\n \n
\n \n
\n \n
\n \n {this.renderTrips(booking)}\n \n Edit\n \n
\n \n
\n \n \n
\n \n
\n {this.getStop(service, yyyymmddString) && (\n \n \n \n {date.format('ddd Do MMM')}\n
\n \n \n {this.getStop(service, yyyymmddString)}\n
\n \n {\n this.setState({\n selectedJourneys,\n showStopModal: true,\n currentServiceStops: service.stops,\n currentService: service,\n currentDay: yyyymmddString\n });\n }}\n >\n Edit\n \n
\n )}\n \n );\n }\n\n render() {\n const {\n services,\n client,\n loading,\n error,\n selectedJourneys,\n hasSelectedJourneys,\n passenger,\n hasPassengerDetails,\n imagePreviewUrl\n } = this.state;\n const { classes } = this.props;\n const {\n dates,\n showStopModal,\n currentServiceStops,\n currentService,\n currentDay\n } = this.state;\n\n const isPassengerValid = this.validatePassengerForm(passenger);\n\n if (error) {\n return (\n \n \n There was a problem retrieving the bus service data,\n please try again later.\n \n
\n );\n }\n\n if (loading) {\n return (\n \n {\n this.handleStopSelection(\n currentService,\n currentDay,\n stop\n );\n }}\n >\n {stop}\n \n
\n ))}\n \n \n
\n )}\n {hasSelectedJourneys && !hasPassengerDetails && (\n \n )}\n {!hasSelectedJourneys && (\n \n
\n \n \n Services operated by {client.name}.\n \n
\n {services &&\n services.length > 0 &&\n services.map(service => (\n \n {\n this.toggleService(service.id);\n }}\n >\n \n \n {this.checkOpen(service.id)\n ? 'keyboard_arrow_down'\n : 'keyboard_arrow_right'}\n \n
\n \n \n {service.time}\n {' '}\n {service.name}\n
\n \n {this.renderNumServiceSelections(\n service.id\n )}\n
\n \n Trip price:{' '}\n {getCurrencySymbol(\n client.features.currency\n )}\n {service.price}\n
\n \n\n
\n {dates.map(date =>\n this.renderDayItem(date, service)\n )}\n \n \n ))}\n \n {service.route_url && (\n
\n {\n this.setState({\n hasSelectedJourneys: true\n });\n window.scrollTo(0, 0);\n }}\n >\n Buy\n \n
\n \n )}\n \n );\n }\n}\n\nService.propTypes = {\n match: PropTypes.shape({\n params: PropTypes.shape({\n clientSlug: PropTypes.string\n })\n }).isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Service);\n","import React from 'react';\nimport { withStyles, Typography } from '@material-ui/core';\nimport ContentHeader from '../components/ContentHeader';\nimport ViewTicketButtons from '../components/ViewTicketButtons';\nimport ButtonLink from '../components/ButtonLink';\n\nconst styles = theme => ({\n root: {\n textAlign: 'center',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n heading: {\n marginBottom: '10px'\n },\n subheading: {\n marginTop: '20px'\n },\n paragraph: {\n fontSize: '16px',\n marginBottom: '10px',\n fontWeight: '100'\n },\n inner: {\n padding: '20px 10px'\n },\n button: {\n margin: '5px 5px'\n }\n});\n\nconst BookingConfirmed = ({ classes, match }) => {\n const {\n params: { customerTicketId }\n } = match;\n\n return (\n \n Total:{' '}\n {getCurrencySymbol(client.features.currency)}\n {this.calcTotal()} (\n {this.displayTotalJourneys()})\n
\n \n
\n );\n};\n\nexport default withStyles(styles)(BookingConfirmed);\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport axios from 'axios';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles, styled } from '@material-ui/core/styles';\nimport red from '@material-ui/core/colors/red';\nimport { Icon, Button } from '@material-ui/core';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Box from '@material-ui/core/Box';\nimport { Auth } from 'aws-amplify';\n\nimport moment from 'moment';\nimport ContentHeader from '../components/ContentHeader';\nimport ConfirmBooking from '../components/ConfirmBooking';\nimport { getCurrencySymbol } from '../helpers/ticket';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto 40px',\n paddingBottom: '1px',\n position: 'relative',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n rootMulti: {\n maxWidth: '800px',\n margin: '40px auto 40px',\n paddingBottom: '1px',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n nameContainer: {\n padding: '10px 10px',\n background: '#70d0ff'\n },\n name: {\n color: '#fff'\n },\n description: {\n marginBottom: 0,\n paddingRight: 5,\n paddingLeft: 10\n },\n descriptionList: {\n paddingLeft: 14\n },\n serviceHeading: {\n background: '#70d0ff',\n margin: '10px 20px 0 20px',\n padding: 5,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n cursor: 'pointer',\n fontSize: '1.2em',\n borderBottom: '1px solid #3e94be',\n textShadow: '1px 1px #3d94bead',\n color: 'white'\n },\n serviceHeadingMain: {\n display: 'flex',\n alignItems: 'center'\n },\n serviceBody: {\n display: 'none'\n },\n serviceBodyOpen: {\n margin: '0 20px 20px 20px',\n padding: 5,\n border: '1px solid #eee'\n },\n serviceTickets: {\n margin: '0 20px 0px',\n padding: '0 0 20px'\n },\n error: {\n margin: '40px 20px',\n color: red[500]\n },\n spinner: {\n margin: '40px auto',\n display: 'block'\n },\n operatorInfo: {\n padding: '0 10px'\n },\n icon: {\n fontSize: '15px'\n },\n button: {\n paddingLeft: '2px',\n paddingRight: '4px',\n background: 'white'\n },\n editStopButton: {\n color: '#008004',\n border: 0,\n fontWeight: 'normal'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n },\n dayLabel: {\n display: 'flex',\n alignItems: 'center',\n textTransform: 'uppercase',\n flexGrow: 1,\n cursor: 'pointer',\n width: '100%',\n height: 50\n },\n dayBar: {\n borderTop: '1px solid #eee',\n borderLeft: '0',\n borderRight: '0',\n borderRadius: 0,\n marginTop: 0,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n height: 50,\n paddingLeft: 5,\n paddingRight: 5,\n cursor: 'pointer',\n color: '#555'\n },\n dayLabelParent: {\n display: 'flex',\n alignItems: 'start',\n justifyContent: 'center',\n flexDirection: 'column',\n flexGrow: 1\n },\n dayBarActive: {\n background: '#f1fff4',\n borderLeft: '2px solid green',\n color: 'green',\n '& label': {\n fontWeight: 'bold'\n }\n },\n dayStop: {\n fontSize: '0.8em',\n color: 'green',\n margin: 0,\n fontWeight: 'normal'\n },\n totalParent: {\n padding: 20,\n fontWeight: 'bold',\n position: 'sticky',\n background: 'white',\n bottom: 0,\n marginTop: 20,\n borderTop: '1px solid #eee',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center'\n },\n checkbox: {\n marginRight: 7\n },\n time: {\n fontWeight: 'bold',\n marginRight: 5\n },\n buyBtn: {\n background: 'green',\n color: 'white',\n border: 'none',\n '&:hover': {\n background: 'green',\n color: 'white',\n border: 'none'\n }\n },\n buyBtnDisabled: {\n background: 'green',\n color: 'white !important',\n border: 'none !important',\n opacity: 0.3\n },\n form: {\n padding: '0 10px 10px'\n },\n input: {\n width: '100%',\n maxWidth: '250px',\n display: 'block',\n margin: '20px auto',\n '& > div': {\n display: 'block'\n },\n '& input': {\n width: 220\n }\n },\n uploadButton: {\n height: '56px',\n margin: '0 auto',\n padding: '0.6em'\n },\n confirmButton: {\n height: '56px',\n margin: '0 0 0 10px',\n padding: '0.6em'\n },\n upload: {\n display: 'none'\n },\n imageUpload: {\n margin: '0 0 40px 0',\n textAlign: 'center'\n },\n datePicker: {\n margin: '0 auto 20px',\n maxWidth: '250px',\n '& > div': {\n width: '100%'\n }\n },\n imagePreview: {\n minHeight: '56px',\n width: '100%',\n maxWidth: '400px',\n margin: '0 auto 10px',\n '& > img': {\n maxWidth: '100%'\n },\n '& > div': {\n background: 'lightgrey',\n minHeight: '56px',\n borderRadius: '4px',\n border: '1px solid'\n },\n [theme.breakpoints.down('sm')]: {\n marginTop: '10px'\n }\n },\n imagePreviewHelp: {\n display: 'block',\n fontWeight: '100',\n padding: '.5em'\n },\n imagePreviewPlaceholder: {\n borderRadius: '0 !important',\n minHeight: '400px !important',\n border: '0 !important',\n width: '252px',\n margin: '0 auto',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n photoHelp: {\n color: '#03a9f4',\n padding: '1em 0',\n display: 'block'\n },\n formControl: {\n maxWidth: 250,\n width: '100%',\n margin: '0 auto 20px',\n display: 'flex'\n },\n smallPrint: {\n fontSize: 13,\n textAlign: 'center',\n color: '#444',\n marginBottom: 10\n },\n textCenter: {\n textAlign: 'center',\n padding: '20px 10px 0'\n },\n badge: {\n background: '#12b0ff',\n color: 'white',\n borderRadius: '50%',\n padding: '3px',\n width: 20,\n height: 20,\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n disabled: {\n color: '#ccc'\n }\n});\n\nconst BootstrapDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialogContent-root': {\n padding: theme.spacing(2)\n },\n '& .MuiDialogActions-root': {\n padding: theme.spacing(1)\n }\n}));\n\nconst BootstrapDialogTitle = props => {\n const { classes, children, onClose, ...other } = props;\n\n return (\n \n \n Congratulations, your order was successful and your advance\n pass is ready to use.\n \n \n Passes will be scanned on board and will need to be\n presented by the passenger.\n \n \n You can book more trips on your advance pass from the {'\"'}\n My Tickets{'\"'} area.\n \n \n \n Book more trips\n \n \n\n
\n \n
\n {this.getStop(service, yyyymmddString) && (\n \n \n \n {date.format('ddd Do MMM')}\n
\n \n \n {this.getStop(service, yyyymmddString)}\n
\n \n {\n this.setState({\n selectedJourneys,\n showStopModal: true,\n currentServiceStops: service.stops,\n currentService: service,\n currentDay: yyyymmddString\n });\n }}\n >\n Edit\n \n
\n )}\n \n );\n }\n\n render() {\n const {\n services,\n client,\n loading,\n error,\n selectedJourneys,\n hasSelectedJourneys,\n imagePreviewUrl,\n passenger\n } = this.state;\n const { classes, match } = this.props;\n const {\n dates,\n showStopModal,\n currentServiceStops,\n currentService,\n currentDay\n } = this.state;\n\n const {\n params: { customerTicketId }\n } = match;\n\n const buyAgain = true;\n\n if (error) {\n return (\n \n \n There was a problem retrieving the bus service data,\n please try again later.\n \n
\n );\n }\n\n if (loading) {\n return (\n \n {\n this.handleStopSelection(\n currentService,\n currentDay,\n stop\n );\n }}\n >\n {stop}\n \n
\n ))}\n \n \n
\n )}\n {!hasSelectedJourneys && (\n \n
\n \n \n Services operated by {client.name}.\n \n
\n {services &&\n services.length > 0 &&\n services.map(service => (\n \n {\n this.toggleService(service.id);\n }}\n >\n \n \n {this.checkOpen(service.id)\n ? 'keyboard_arrow_down'\n : 'keyboard_arrow_right'}\n \n
\n \n \n {service.time}\n {' '}\n {service.name}\n
\n \n {this.renderNumServiceSelections(\n service.id\n )}\n
\n \n Trip price:{' '}\n {getCurrencySymbol(\n client.features.currency\n )}\n {service.price}\n
\n \n\n
\n {dates.map(date =>\n this.renderDayItem(date, service)\n )}\n \n \n ))}\n \n {service.route_url && (\n
\n {\n this.setState({\n hasSelectedJourneys: true\n });\n window.scrollTo(0, 0);\n }}\n >\n Buy\n \n
\n \n )}\n \n );\n }\n}\n\nService.propTypes = {\n match: PropTypes.shape({\n params: PropTypes.shape({\n customerTicketId: PropTypes.string\n })\n }).isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(Service);\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React from 'react';\nimport moment from 'moment';\nimport { withStyles } from '@material-ui/core';\nimport { useHistory } from 'react-router-dom';\nimport globalStyles from '../styles';\n\nconst styles = () => ({\n table: {\n maxWidth: '500px',\n margin: '0 auto'\n },\n subheading: {\n margin: '20px 0 10px'\n },\n tripLine: {\n border: '1px solid #ccc',\n borderRadius: 5,\n marginBottom: 5,\n textAlign: 'left',\n padding: 5,\n display: 'flex'\n },\n tripLineActive: {\n border: '1px solid #5dcaff',\n cursor: 'pointer'\n },\n tripLineHead: {\n display: 'flex',\n borderRight: '1px solid #ccc',\n paddingRight: 5,\n marginRight: 5,\n textAlign: 'center',\n width: 55,\n justifyContent: 'center'\n },\n tripDate: {\n fontWeight: 'bold'\n },\n tripDateDay: {\n fontSize: 20,\n display: 'block',\n color: '#5dcaff'\n },\n tripDateMonth: {\n fontSize: 8,\n display: 'block'\n },\n tripService: {\n display: 'flex',\n alignItems: 'start',\n justifyContent: 'center',\n flexDirection: 'column',\n flexGrow: 1\n },\n tripStop: {\n fontSize: '0.8em',\n color: '#666',\n display: 'flex',\n alignItems: 'center'\n },\n tripChange: {\n display: 'flex',\n alignItems: 'end',\n justifyContent: 'center',\n flexDirection: 'column',\n color: '#03a9f4',\n fontSize: '0.8em',\n borderLeft: '1px solid #ccc',\n paddingLeft: 5,\n marginLeft: 5\n },\n icon: {\n fontSize: '15px'\n },\n link: globalStyles.link,\n changeIcon: {\n fontSize: 20,\n color: '#5dcaff'\n }\n});\n\nconst extractTime = dateService => {\n return dateService.substring(15, 19);\n};\n\nconst extractDate = dateService => {\n return dateService.substring(2, 12);\n};\n\nconst BookingTable = ({ bookings, classes }) => {\n if (!bookings || !bookings.length) {\n return (\n <>\n \n Total:{' '}\n {getCurrencySymbol(client.features.currency)}\n {this.calcTotal()} (\n {this.displayTotalJourneys()})\n
\n \n No trips booked\n
\nWe{\"'\"}ll display all your bookings here for your records
\n \n );\n }\n\n const history = useHistory();\n\n const today = moment().format('YYYY-MM-DD');\n\n const previousBookings = bookings.filter(booking => {\n return extractDate(booking.date_svc) < today;\n });\n\n const currentBookings = bookings.filter(booking => {\n return extractDate(booking.date_svc) >= today;\n });\n\n if (currentBookings) {\n currentBookings.reverse();\n }\n\n return (\n <>\n {currentBookings && currentBookings.length > 0 && (\n <>\nUpcoming trips
\n {currentBookings.map(trip => (\n\n
\n \n \n {moment(extractDate(trip.date_svc))\n .format('ddd')\n .toUpperCase()}\n \n \n {moment(extractDate(trip.date_svc))\n .format('Do MMM')\n .toUpperCase()}\n \n
\n \n {extractTime(trip.date_svc)} | {trip.s_name}\n
\n {trip.is_swappable && (\n \n \n {'stop' in trip && <>{trip.stop} }\n \n
\n EDIT
\n )}\n \n ))}\n \n )}\n {previousBookings && previousBookings.length > 0 && (\n <>\n Previous trips
\n {previousBookings.map(trip => (\n\n
\n ))}\n \n )}\n \n );\n};\n\nexport default withStyles(styles)(BookingTable);\n","import React, { Component } from 'react';\nimport { Auth } from 'aws-amplify';\nimport axios from 'axios';\nimport { Typography, withStyles, CircularProgress } from '@material-ui/core';\nimport { red } from '@material-ui/core/colors';\nimport ContentHeader from '../components/ContentHeader';\nimport BookingTable from '../components/BookingTable';\n\nconst styles = theme => ({\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n spinner: {\n marginLeft: 'calc(50% - 22px)',\n marginTop: '60px',\n marginBottom: '60px'\n },\n error: {\n margin: '20px 0',\n fontSize: '18px',\n color: red[500],\n textAlign: 'center',\n paddingBottom: '20px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n }\n});\n\nclass Bookings extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n error: false,\n bookings: []\n };\n }\n\n async componentDidMount() {\n try {\n const currentSession = await Auth.currentSession();\n const {\n match: {\n params: { customerTicketId }\n }\n } = this.props;\n\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n let bookingsResponse;\n try {\n bookingsResponse = await axios.get(\n `${\n process.env.REACT_APP_BOOKING_API_ENDPOINT\n }/bookings/by-ctid/${customerTicketId}`,\n {\n headers\n }\n );\n } catch (e) {\n bookingsResponse = [];\n if (e.response.status !== 404) {\n throw e;\n }\n }\n\n this.setState({\n loading: false,\n error: false,\n bookings: bookingsResponse.data || bookingsResponse\n });\n } catch (e) {\n this.setState({\n loading: false,\n error: true\n });\n }\n }\n\n render() {\n const { error, loading, bookings } = this.state;\n const { classes } = this.props;\n\n if (loading) {\n return (\n \n
\n \n \n {moment(extractDate(trip.date_svc))\n .format('ddd')\n .toUpperCase()}\n \n \n {moment(extractDate(trip.date_svc))\n .format('Do MMM')\n .toUpperCase()}\n \n
\n \n {extractTime(trip.date_svc)} | {trip.s_name}\n {'stop' in trip && (\n
\n \n \n {trip.stop}\n \n
\n )}\n \n \n There was a problem retrieving your booking details\n \n )}\n {bookings && !error && (\n
\n );\n }\n}\n\nexport default withStyles(styles)(Bookings);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { withStyles, Typography, Button } from '@material-ui/core';\nimport { Auth } from 'aws-amplify';\nimport axios from 'axios';\nimport ContentHeader from './ContentHeader';\nimport LoaderButton from './LoaderButton';\nimport ButtonLink from './ButtonLink';\n\nconst styles = {\n root: {\n textAlign: 'left',\n background: '#fff',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)'\n },\n description: {\n padding: '10px',\n marginBottom: '20px',\n fontWeight: '100'\n },\n button: {\n height: '40px',\n marginTop: '10px',\n marginBottom: '10px'\n },\n passengerInfo: {\n padding: '10px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n imagePreview: {\n minHeight: '56px',\n margin: '20px auto 0',\n width: '100%',\n maxWidth: '400px',\n display: 'flex',\n justifyContent: 'center',\n '& > img': {\n maxWidth: '100%'\n },\n '@media only screen and (max-device-width: 400px)': {\n margin: '0 auto 0'\n }\n },\n tripLine: {\n border: '1px solid #ccc',\n borderRadius: 5,\n marginBottom: 5,\n textAlign: 'left',\n padding: 5,\n display: 'flex'\n },\n tripLineHead: {\n display: 'flex',\n borderRight: '1px solid #ccc',\n paddingRight: 5,\n marginRight: 5,\n textAlign: 'center',\n width: 55,\n justifyContent: 'center'\n },\n tripDate: {\n fontWeight: 'bold'\n },\n tripDateDay: {\n fontSize: 20,\n display: 'block',\n color: '#5dcaff'\n },\n tripDateMonth: {\n fontSize: 8,\n display: 'block'\n },\n tripService: {\n display: 'flex',\n alignItems: 'start',\n justifyContent: 'center',\n flexDirection: 'column'\n },\n tripStop: {\n fontSize: '0.8em',\n color: '#666',\n display: 'flex',\n alignItems: 'center'\n },\n icon: {\n fontSize: '15px'\n },\n buyBtn: {\n background: 'green !important',\n color: 'white !important',\n border: 'none',\n marginLeft: 8,\n '&:hover': {\n background: 'green',\n color: 'white',\n border: 'none'\n }\n }\n};\n\nclass ConfirmBookingChange extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voucher: null,\n isLoading: false,\n error: null,\n hasSwapped: false\n };\n }\n\n netPrice = price => {\n const { voucher } = this.state;\n if (voucher) {\n return price - voucher.value;\n }\n return price;\n };\n\n async handleSubmit() {\n try {\n this.setState({\n isLoading: true,\n error: null\n });\n\n const currentSession = await Auth.currentSession();\n\n // get customer ticket\n const headers = {\n Authorization: currentSession.getIdToken().getJwtToken()\n };\n\n const { booking, oldBooking } = this.props;\n\n const bookingItem = booking[0];\n\n await axios.post(\n `${process.env.REACT_APP_BOOKING_API_ENDPOINT}/booking/swap`,\n {\n old_booking: {\n pk: oldBooking.pk,\n sk: oldBooking.sk\n },\n new_booking: {\n service_id: bookingItem.service_id,\n service_name: bookingItem.service_name,\n date: bookingItem.date,\n time: bookingItem.time,\n price: bookingItem.price,\n stop: bookingItem.stop\n }\n },\n {\n headers\n }\n );\n\n this.setState({\n isLoading: false,\n hasSwapped: true\n });\n } catch (e) {\n console.error(e);\n\n let errMessage =\n e.response && e.response.status === 403\n ? 'You do not have permission to use this ticket. Please log into the original account which purchased the ticket. Hint: Please use the email address where your booking confirmation was sent to.'\n : 'There was a problem retrieving your pass. Please try again later or contact our support team.';\n\n if (e.response && e.response.data && e.response.data.error) {\n errMessage = e.response.data.error;\n }\n\n this.setState({\n isLoading: false,\n error: errMessage\n });\n }\n }\n\n renderTrip(booking) {\n const { classes } = this.props;\n const item = booking[0];\n\n return (\n <>\n \n
\n )}\n \n
\n \n );\n }\n\n render() {\n const { handleEdit, booking, oldBooking, classes } = this.props;\n const { isLoading, hasSwapped, error } = this.state;\n const ticketId = oldBooking.ctid;\n\n if (hasSwapped) {\n return (\n \n
\n \n \n {moment(item.date)\n .format('ddd')\n .toUpperCase()}\n \n \n {moment(item.date)\n .format('Do MMM')\n .toUpperCase()}\n \n
\n \n {item.time} | {item.service_name}\n {'stop' in item && (\n
\n \n \n {item.stop}\n \n
\n )}\n \n
\n );\n }\n\n return (\n \n
\n \n
\n \n \n Booking successfully updated.\n \n \n An email will confirm your updated booking\n and you can view all bookings from the My\n Tickets area.\n \n \n View bookings\n \n
\n \n
\n );\n }\n}\n\nConfirmBookingChange.propTypes = {\n handleEdit: PropTypes.func.isRequired,\n passenger: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n photo: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n stop: PropTypes.string\n }).isRequired,\n classes: PropTypes.shape().isRequired\n};\n\nexport default withStyles(styles)(ConfirmBookingChange);\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport axios from 'axios';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles, styled } from '@material-ui/core/styles';\nimport red from '@material-ui/core/colors/red';\nimport { Icon, Button } from '@material-ui/core';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Box from '@material-ui/core/Box';\nimport { Auth } from 'aws-amplify';\n\nimport moment from 'moment';\nimport ContentHeader from '../components/ContentHeader';\nimport ConfirmBookingChange from '../components/ConfirmBookingChange';\nimport { getCurrencySymbol } from '../helpers/ticket';\nimport globalStyles from '../styles';\n\nconst styles = theme => ({\n root: {\n background: '#fff',\n border: '0',\n maxWidth: '800px',\n margin: '40px auto 40px',\n paddingBottom: '1px',\n position: 'relative',\n boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.21)',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n rootMulti: {\n maxWidth: '800px',\n margin: '40px auto 40px',\n paddingBottom: '1px',\n position: 'relative',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n margin: '20px 15px'\n }\n },\n nameContainer: {\n padding: '10px 10px',\n background: '#70d0ff'\n },\n name: {\n color: '#fff'\n },\n description: {\n marginBottom: 0,\n paddingRight: 5,\n paddingLeft: 10\n },\n descriptionList: {\n paddingLeft: 14\n },\n serviceHeading: {\n background: '#70d0ff',\n margin: '10px 20px 0 20px',\n padding: 5,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n cursor: 'pointer',\n fontSize: '1.2em',\n borderBottom: '1px solid #3e94be',\n textShadow: '1px 1px #3d94bead',\n color: 'white'\n },\n serviceHeadingMain: {\n display: 'flex',\n alignItems: 'center'\n },\n serviceBody: {\n display: 'none'\n },\n serviceBodyOpen: {\n margin: '0 20px 20px 20px',\n padding: 5,\n border: '1px solid #eee'\n },\n serviceTickets: {\n margin: '0 20px 0px',\n padding: '0 0 20px'\n },\n error: {\n margin: '40px 20px',\n color: red[500]\n },\n spinner: {\n margin: '40px auto',\n display: 'block'\n },\n operatorInfo: {\n padding: '0 10px'\n },\n icon: {\n fontSize: '15px'\n },\n button: {\n paddingLeft: '2px',\n paddingRight: '4px',\n background: 'white'\n },\n editStopButton: {\n color: '#008004',\n border: 0,\n fontWeight: 'normal'\n },\n link: {\n ...globalStyles.link,\n fontWeight: 'bold'\n },\n dayLabel: {\n display: 'flex',\n alignItems: 'center',\n textTransform: 'uppercase',\n flexGrow: 1,\n cursor: 'pointer',\n width: '100%',\n height: 50\n },\n dayBar: {\n borderTop: '1px solid #eee',\n borderLeft: '0',\n borderRight: '0',\n borderRadius: 0,\n marginTop: 0,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n height: 50,\n paddingLeft: 5,\n paddingRight: 5,\n cursor: 'pointer',\n color: '#555'\n },\n dayLabelParent: {\n display: 'flex',\n alignItems: 'start',\n justifyContent: 'center',\n flexDirection: 'column',\n flexGrow: 1\n },\n dayBarActive: {\n background: '#f1fff4',\n borderLeft: '2px solid green',\n color: 'green',\n '& label': {\n fontWeight: 'bold'\n }\n },\n dayStop: {\n fontSize: '0.8em',\n color: 'green',\n margin: 0,\n fontWeight: 'normal'\n },\n totalParent: {\n padding: 20,\n fontWeight: 'bold',\n position: 'sticky',\n background: 'white',\n bottom: 0,\n marginTop: 20,\n borderTop: '1px solid #eee',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center'\n },\n checkbox: {\n marginRight: 7\n },\n time: {\n fontWeight: 'bold',\n marginRight: 5\n },\n buyBtn: {\n background: 'green',\n color: 'white',\n border: 'none',\n '&:hover': {\n background: 'green',\n color: 'white',\n border: 'none'\n }\n },\n buyBtnDisabled: {\n background: 'green',\n color: 'white !important',\n border: 'none !important',\n opacity: 0.3\n },\n form: {\n padding: '0 10px 10px'\n },\n input: {\n width: '100%',\n maxWidth: '250px',\n display: 'block',\n margin: '20px auto',\n '& > div': {\n display: 'block'\n },\n '& input': {\n width: 220\n }\n },\n uploadButton: {\n height: '56px',\n margin: '0 auto',\n padding: '0.6em'\n },\n confirmButton: {\n height: '56px',\n margin: '0 0 0 10px',\n padding: '0.6em'\n },\n upload: {\n display: 'none'\n },\n imageUpload: {\n margin: '0 0 40px 0',\n textAlign: 'center'\n },\n datePicker: {\n margin: '0 auto 20px',\n maxWidth: '250px',\n '& > div': {\n width: '100%'\n }\n },\n imagePreview: {\n minHeight: '56px',\n width: '100%',\n maxWidth: '400px',\n margin: '0 auto 10px',\n '& > img': {\n maxWidth: '100%'\n },\n '& > div': {\n background: 'lightgrey',\n minHeight: '56px',\n borderRadius: '4px',\n border: '1px solid'\n },\n [theme.breakpoints.down('sm')]: {\n marginTop: '10px'\n }\n },\n imagePreviewHelp: {\n display: 'block',\n fontWeight: '100',\n padding: '.5em'\n },\n imagePreviewPlaceholder: {\n borderRadius: '0 !important',\n minHeight: '400px !important',\n border: '0 !important',\n width: '252px',\n margin: '0 auto',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n photoHelp: {\n color: '#03a9f4',\n padding: '1em 0',\n display: 'block'\n },\n formControl: {\n maxWidth: 250,\n width: '100%',\n margin: '0 auto 20px',\n display: 'flex'\n },\n smallPrint: {\n fontSize: 13,\n textAlign: 'center',\n color: '#444',\n marginBottom: 10\n },\n textCenter: {\n textAlign: 'center',\n padding: '20px 10px 0'\n },\n badge: {\n background: '#12b0ff',\n color: 'white',\n borderRadius: '50%',\n padding: '3px',\n width: 20,\n height: 20,\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n disabled: {\n color: '#ccc'\n }\n});\n\nconst BootstrapDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialogContent-root': {\n padding: theme.spacing(2)\n },\n '& .MuiDialogActions-root': {\n padding: theme.spacing(1)\n }\n}));\n\nconst BootstrapDialogTitle = props => {\n const { classes, children, onClose, ...other } = props;\n\n return (\n \n
\n \n
\n \n \n Changing journey to the following:\n \n {this.renderTrip(booking)}\n {error && (\n \n {error}\n \n )}\n \n Go back\n \n {\n this.handleSubmit();\n }}\n />\n
\n \n \n \n {date.format('ddd Do MMM')}\n
\n \n \n \n );\n }\n\n render() {\n const {\n services,\n client,\n loading,\n error,\n selectedJourneys,\n hasSelectedJourneys,\n imagePreviewUrl,\n passenger,\n booking\n } = this.state;\n const { classes, match } = this.props;\n const {\n dates,\n showStopModal,\n currentServiceStops,\n currentService,\n currentDay\n } = this.state;\n\n const {\n params: { customerTicketId }\n } = match;\n\n const buyAgain = true;\n\n if (error) {\n return (\n \n {this.getStop(service, yyyymmddString)}\n
\n \n \n {error}.\n \n
\n );\n }\n\n if (loading) {\n return (\n \n
\n )}\n {!hasSelectedJourneys && (\n \n
\n \n \n Service: {booking.s_name}\n
\n Journey date:{' '}\n {booking && booking.date_svc && (\n \n {moment(\n this.extractDate(booking.date_svc)\n ).format('ddd Do MMM')}{' '}\n \n )}\n
\n Journey time:{' '}\n \n {this.extractTime(booking.date_svc)}\n \n \n
\n {services.length === 0 && (\n \n Journey date:{' '}\n {booking && booking.date_svc && (\n \n {moment(\n this.extractDate(booking.date_svc)\n ).format('ddd Do MMM')}{' '}\n \n )}\n
\n Journey time:{' '}\n \n {this.extractTime(booking.date_svc)}\n \n \n
\n \n No available services priced at the same\n trip value of{' '}\n {getCurrencySymbol(booking.currency)}\n {booking.trip_price}. Please\n {client.name} directly at{' '}\n {client.support.email} to discuss your\n booking amendment further.\n \n
\n )}\n {services && services.length > 0 && (\n <>\n \n \n Change your booking to another journey\n of equal value below. Only journeys that\n have availability can be selected.\n \n \n Need to cancel a journey? Please contact{' '}\n {client.name} directly at{' '}\n {client.support.email} or call{' '}\n {client.support.phone}.\n \n
\n {services.map(service => (\n \n {\n this.toggleService(service.id);\n }}\n >\n \n \n {this.checkOpen(service.id)\n ? 'keyboard_arrow_down'\n : 'keyboard_arrow_right'}\n \n
\n \n \n {service.time}\n {' '}\n {service.name}\n
\n \n Trip price:{' '}\n {getCurrencySymbol(\n booking.currency\n )}\n {service.price}\n
\n \n\n {service.route_url && (\n
\n \n \n
\n