) => {\r\n if (event.key === \"Tab\") {\r\n const { firstFocusable, lastFocusable } = getFocusabledElements();\r\n\r\n if (\r\n !event.shiftKey &&\r\n event.target === lastFocusable &&\r\n firstFocusable?.focus\r\n ) {\r\n firstFocusable.focus();\r\n event.preventDefault();\r\n } else if (\r\n event.shiftKey &&\r\n event.target === firstFocusable &&\r\n lastFocusable?.focus\r\n ) {\r\n lastFocusable.focus();\r\n event.preventDefault();\r\n }\r\n }\r\n },\r\n };\r\n\r\n return {\r\n containerProps,\r\n };\r\n};\r\n\r\nexport function useOutsideAlerter(ref, callback) {\r\n useEffect(() => {\r\n function handleClickOutside(event) {\r\n if (ref.current && !ref.current.contains(event.target)) {\r\n callback();\r\n }\r\n }\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClickOutside);\r\n };\r\n }, [ref]);\r\n}\r\n","import { useColorMode } from \"@chakra-ui/react\";\r\n\r\nexport const useLightMode = () => {\r\n const { colorMode } = useColorMode();\r\n const lightMode = colorMode === \"light\";\r\n return { lightMode };\r\n};\r\n","export const QUERYKEY_APPROVAL_DELEGATIONS = \"approvalDelegations\";\r\nexport const QUERYKEY_APPROVALS = \"approvals\";\r\nexport const QUERYKEY_APPROVAL_BY_ID = \"approvalById\";\r\nexport const QUERYKEY_AMENITIES = \"amenities\";\r\nexport const QUERYKEY_CHECK_IMPERSONATION = \"checkImpersonation\";\r\nexport const QUERYKEY_PROVISIONAL_TRAVELERS = \"provisionalTravelers\";\r\nexport const QUERYKEY_UPCOMING_TRIPS = \"upcomingTrips\";\r\nexport const QUERYKEY_FAREFORECASTER = \"fareForecaster\";\r\nexport const QUERYKEY_FAREFORECASTER_GRAPH = \"fareForecasterGraph\";\r\n","import { chooseRandom } from \"src/common\";\r\n\r\nexport const multiplyAndRound = (number, multiplier) => {\r\n return (Math.round(Math.floor(number * multiplier)) * 100) / 100;\r\n};\r\n\r\nexport const letters = [\r\n \"A\",\r\n \"B\",\r\n \"C\",\r\n \"D\",\r\n \"E\",\r\n \"F\",\r\n \"H\",\r\n \"I\",\r\n \"J\",\r\n \"K\",\r\n \"L\",\r\n \"M\",\r\n \"N\",\r\n \"O\",\r\n \"P\",\r\n \"Q\",\r\n \"R\",\r\n \"S\",\r\n \"T\",\r\n \"U\",\r\n \"V\",\r\n \"W\",\r\n \"X\",\r\n \"Y\",\r\n \"Z\",\r\n];\r\n\r\nexport const getPNR = () => {\r\n let result = \"\";\r\n while (result.length < 6) {\r\n result += chooseRandom(letters);\r\n }\r\n return result;\r\n};\r\n\r\nconst airportCodes = [\r\n \"LAX\",\r\n \"JFK\",\r\n \"LHR\",\r\n \"CDG\",\r\n \"YYZ\",\r\n \"SYD\",\r\n \"HKG\",\r\n \"MCW\",\r\n \"MDZ\",\r\n \"AUH\",\r\n \"ACA\",\r\n \"ABQ\",\r\n \"AUA\",\r\n \"ATH\",\r\n \"BKK\",\r\n \"BWI\",\r\n \"PEK\",\r\n \"BZE\",\r\n \"BGO\",\r\n \"BMG\",\r\n \"BOB\",\r\n \"BOS\",\r\n \"BNE\",\r\n \"BUD\",\r\n \"CNS\",\r\n \"YYC\",\r\n \"CCU\",\r\n \"CAI\",\r\n \"CTS\",\r\n \"CKG\",\r\n \"ORK\",\r\n \"CFU\",\r\n \"HAG\",\r\n \"DKI\",\r\n \"DUD\",\r\n \"EDI\",\r\n \"YEG\",\r\n \"ELY\",\r\n \"FKS\",\r\n \"GLA\",\r\n];\r\n\r\nexport const getAirport = (airport) => {\r\n let result = chooseRandom(airportCodes);\r\n while (result === airport) {\r\n result = chooseRandom(airportCodes);\r\n }\r\n return result;\r\n};\r\n","import { redirectToLogout } from \"src/redux/actions/application\";\r\nimport { store } from \"src/App\";\r\nimport { getToken } from \"..\";\r\nimport jwt_decode from \"jwt-decode\";\r\n\r\n/**\r\n * Wrapper for handling fetch errors since fetch won't handle it natively\r\n */\r\nexport const handleErrors = (response) => {\r\n // If the status is a 401, our token in no longer valid and the user needs to log back in.\r\n if (response.status === 401 && store) {\r\n store.dispatch(redirectToLogout());\r\n }\r\n if (!response.ok || response.status > 206) {\r\n if (response?.json) {\r\n return response.json().then((res) => {\r\n const error = new Error(res.message);\r\n error.code = response.status;\r\n error.message = res.message;\r\n throw error;\r\n });\r\n }\r\n throw new Error();\r\n }\r\n return response;\r\n};\r\n\r\n// Code used to fake a click to download csv\r\nexport function saveFileFromBlobData(data, fileName) {\r\n const a = document.createElement(\"a\");\r\n document.body.appendChild(a);\r\n a.setAttribute(\"style\", \"display: none;\");\r\n const blob = new Blob([data], { type: \"octet/stream\" }),\r\n url = window.URL.createObjectURL(blob);\r\n a.href = url;\r\n a.download = fileName;\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n a.remove();\r\n}\r\n\r\nconst dataToCsvURI = (data) =>\r\n encodeURI(\r\n `data:text/csv;charset=utf-8,${data.map((row) => row.join(\",\")).join(`\\n`)}`\r\n );\r\n\r\nexport const convertDataToCSVDownload = (\r\n rows = [],\r\n filename = \"example.csv\"\r\n) => {\r\n const csvEl = document.createElement(\"a\");\r\n const url = dataToCsvURI(rows);\r\n csvEl.href = url;\r\n csvEl.setAttribute(\"download\", filename);\r\n csvEl.click();\r\n csvEl.remove();\r\n};\r\n\r\nconst mockDebtors = {\r\n \"0000000TES\": true,\r\n \"00CSMEDEMO\": true,\r\n SBT000DEMO: true,\r\n USA1234567: true,\r\n USLIGHTZZZ: true,\r\n PLAYWRIGHT: true,\r\n DELOITDEMO: true,\r\n ZILLOWDEMO: true,\r\n};\r\n\r\nexport const shouldMockData = () => {\r\n const user = jwt_decode(getToken().token);\r\n const ID = user[\"https://www.ctmsmart.com/debtor\"];\r\n return mockDebtors[ID];\r\n};\r\n","import { useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Image } from \"semantic-ui-react\";\r\nimport { fetchAirlines } from \"src/redux/actions/airlines\";\r\nimport { AirlineState } from \"src/redux/reducers/airlines\";\r\n\r\n/**\r\n * Airline card for flight itineraries.\r\n */\r\n\r\ninterface AirlineI {\r\n airlines: AirlineState;\r\n code: string;\r\n fetchAirlines: () => void;\r\n}\r\n\r\nexport const Airline = ({ airlines, code, fetchAirlines }: AirlineI) => {\r\n useEffect(() => {\r\n if (!airlines.images) fetchAirlines();\r\n }, [airlines.images, fetchAirlines]);\r\n\r\n const airline = airlines.images && airlines.images[code];\r\n if (airline)\r\n return (\r\n \r\n \r\n
\r\n );\r\n return null;\r\n};\r\n\r\nexport const mapStateToProps = (state) => ({\r\n airlines: state.airlines,\r\n});\r\n\r\nexport const mapDispatchToProps = (dispatch) => ({\r\n fetchAirlines: () => dispatch(fetchAirlines()),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Airline);\r\n","import { useState, useRef, useEffect } from \"react\";\r\nimport \"./DayPicker.less\";\r\nimport { Icon } from \"semantic-ui-react\";\r\nimport \"react-dates/initialize\";\r\nimport { SingleDatePicker } from \"react-dates\";\r\nimport moment from \"moment\";\r\nimport CalendarIcon from \"src/icons/CalendarIcon\";\r\nimport { useMediaQuery } from \"@chakra-ui/react\";\r\n\r\n/**\r\n * Extended version of the AirBnB daypicker with our UI customization added\r\n * */\r\n\r\ninterface DayPickerI {\r\n ariaLabel?: string;\r\n date?: moment.Moment;\r\n disabled?: boolean;\r\n id: string;\r\n isOutsideRange?: (date: moment.Moment) => boolean;\r\n onDateChange: (date: moment.Moment) => void;\r\n placeholder?: string;\r\n showClearDate?: boolean;\r\n}\r\n\r\nconst DayPicker = ({\r\n ariaLabel,\r\n date,\r\n disabled = false,\r\n id,\r\n isOutsideRange,\r\n onDateChange,\r\n placeholder = \"Select Date\",\r\n showClearDate,\r\n}: DayPickerI) => {\r\n const [focused, setFocused] = useState(false);\r\n const [isLessThan600] = useMediaQuery(\"(max-width: 600px)\");\r\n const focusedRef = useRef(false);\r\n const containerRef = useRef(null);\r\n const checkRange = isOutsideRange ? { isOutsideRange } : {};\r\n\r\n useEffect(() => {\r\n function listener({ key }) {\r\n if (focusedRef.current && key === \"Tab\") {\r\n const el = document.getElementById(id) as HTMLElement;\r\n if (el) {\r\n el.focus();\r\n }\r\n setFocus({ focused: false });\r\n }\r\n }\r\n if (focused) {\r\n window.addEventListener(\"keydown\", listener, true);\r\n focusOnDate();\r\n } else {\r\n window.removeEventListener(\"keydown\", listener);\r\n }\r\n return () => window.removeEventListener(\"keydown\", listener);\r\n }, [focused]);\r\n\r\n function setFocus({ focused }) {\r\n setFocused(focused);\r\n focusedRef.current = focused;\r\n }\r\n\r\n function setFocusOnButton() {\r\n setTimeout(() => {\r\n const target = containerRef.current.getElementsByClassName(\r\n \"SingleDatePickerInput_calendarIcon\"\r\n )[0] as HTMLButtonElement;\r\n\r\n target?.focus();\r\n }, 250);\r\n }\r\n\r\n function focusOnDate() {\r\n setTimeout(() => {\r\n const days = document.getElementsByClassName(\"CalendarDay\") || [];\r\n let el;\r\n for (let i = 0; i < days.length; i++) {\r\n if (days[i].tabIndex === 0) {\r\n el = days[i];\r\n break;\r\n }\r\n }\r\n if (el) {\r\n el.focus();\r\n }\r\n }, 250);\r\n }\r\n\r\n const renderMonthElement = ({ month, onYearSelect }) => {\r\n return (\r\n \r\n onYearSelect(month, month.year() - 1)}\r\n name=\"angle double left\"\r\n className=\"caret prevYear\"\r\n />\r\n {`${month.format(\"MMMM\")} ${month.year()}`}\r\n onYearSelect(month, month.year() + 1)}\r\n name=\"angle double right\"\r\n className=\"caret nextYear\"\r\n />\r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n }\r\n navPrev={}\r\n renderMonthElement={renderMonthElement}\r\n numberOfMonths={isLessThan600 ? 1 : 2}\r\n placeholder={placeholder}\r\n customInputIcon={\r\n \r\n }\r\n showDefaultInputIcon={true}\r\n date={date}\r\n onDateChange={(date) => {\r\n onDateChange(date);\r\n setFocusOnButton();\r\n }}\r\n focused={focused}\r\n onFocusChange={setFocus}\r\n id={id}\r\n showClearDate={showClearDate}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default DayPicker;\r\n","import React from \"react\";\r\nimport { Dropdown, DropdownItemProps } from \"semantic-ui-react\";\r\nimport ArrowIcon from \"src/icons/ArrowIcon\";\r\nimport { DropdownOption } from \"src/types\";\r\n\r\n/**\r\n * An extension of semantic's dropdown component to make our custom UI tweaks more easily reusable.\r\n */\r\n\r\ninterface DropDownI {\r\n allowWrap?: boolean;\r\n \"aria-label\"?: string;\r\n centered?: boolean;\r\n dataAut?: string;\r\n disabled?: boolean;\r\n error?: boolean;\r\n leftIcon?: React.FC;\r\n minCharacters?: number;\r\n id?: string;\r\n onChange: (\r\n val: string | number | boolean | (string | number | boolean)[]\r\n ) => void;\r\n onSearchChange?: () => void;\r\n options: DropdownOption[];\r\n value?: string | string[] | number | number[];\r\n loading?: boolean;\r\n multiple?: boolean;\r\n placeholder?: string;\r\n search?:\r\n | boolean\r\n | ((options: DropdownItemProps[], value: string) => DropdownItemProps[]);\r\n}\r\n\r\nconst DropDown = React.memo(function MyComponent(props: DropDownI) {\r\n const {\r\n allowWrap,\r\n centered,\r\n dataAut,\r\n disabled,\r\n error,\r\n minCharacters,\r\n id,\r\n onChange,\r\n onSearchChange,\r\n options,\r\n value,\r\n loading,\r\n multiple,\r\n placeholder,\r\n search,\r\n } = props;\r\n // Give our component custom classes to style based on props\r\n let constructedClassName = \"flight-picker-dropdown\";\r\n const LeftIcon = props.leftIcon;\r\n if (!LeftIcon) constructedClassName += \" no-left-icon-dropdown\";\r\n if (centered) constructedClassName += \" centered-dropdown\";\r\n if (allowWrap) constructedClassName += \" allow-wrap-dropdown\";\r\n if (disabled) constructedClassName += \" disabled\";\r\n return (\r\n \r\n
onChange(value)}\r\n onSearchChange={onSearchChange}\r\n options={options}\r\n placeholder={placeholder || \"\"}\r\n />\r\n {LeftIcon && }\r\n {!loading && }\r\n ![\"CTM](\"/images/ctm-logo-landscape.png\")
\r\n {loadingText && {loadingText}
}\r\n \r\n );\r\n }\r\n // If an error has a code, let's use that code for our checking\r\n if (error.code) error = error.code;\r\n switch (error) {\r\n case 403:\r\n return (\r\n \r\n You do not have the permission required to use this tool. Please\r\n contact{\" \"}\r\n na.online@travelctm.com{\" \"}\r\n for more information.\r\n \r\n );\r\n case 404:\r\n case 204:\r\n case \"noContent\":\r\n return (\r\n \r\n \r\n NO DATA TO SHOW
\r\n \r\n There is no data available right now.\r\n \r\n \r\n );\r\n case \"pdfError\":\r\n return (\r\n \r\n This invoice is currently unavailable. Please reach out to{\" \"}\r\n na.online@travelctm.com\r\n .\r\n \r\n );\r\n case \"noCityPairs\":\r\n return (\r\n \r\n \r\n \r\n No search results were returned for these city pairs.\r\n \r\n \r\n );\r\n case \"noFlights\":\r\n return (\r\n \r\n \r\n \r\n It looks like there are no active{\" \"}\r\n \r\n \r\n travelers for the next week.\r\n \r\n \r\n );\r\n case \"noTravellers\":\r\n return (\r\n \r\n \r\n \r\n No active travelers within the selected dates.\r\n \r\n \r\n );\r\n case 500:\r\n case 503:\r\n case 504:\r\n case \"serverError\":\r\n return (\r\n \r\n \r\n \r\n OH SNAP, SOMETHING WENT WRONG\r\n
\r\n \r\n Looks like we were not able to connect to the server.\r\n \r\n \r\n Please try again in a few minutes.\r\n \r\n \r\n );\r\n default:\r\n return (\r\n \r\n \r\n WHOOPS
\r\n \r\n We can't load anything right now.\r\n \r\n \r\n Please try again in a few minutes.\r\n \r\n \r\n );\r\n }\r\n };\r\n\r\n // Set dynamic/prop based styles if we are using the dimmer\r\n const style: any = {};\r\n if (dimmer) {\r\n style.backgroundColor = lightMode\r\n ? \"rgba(255,255,255, 0.6)\"\r\n : \"rgba(0,0,0,0.6)\";\r\n if (paddingX) {\r\n style.left = `${paddingX}px`;\r\n style.right = `${paddingX}px`;\r\n }\r\n if (paddingY) {\r\n style.top = `${paddingY}px`;\r\n style.bottom = `${paddingY}px`;\r\n }\r\n if (!error && active) style.zIndex = \"999999\";\r\n }\r\n if (background) style.zIndex = \"0\";\r\n\r\n return (\r\n \r\n \r\n
{renderContent()}
\r\n
\r\n
\r\n {departureCity.city} To {arrivalCity.city}\r\n
\r\n
\r\n {passengers.map((p, i) => (\r\n - \r\n {p.name} {getEmail(p)}\r\n
\r\n ))}\r\n
\r\n
\r\n \r\n );\r\n };\r\n\r\n const renderPassengers = () => {\r\n return passenger\r\n ? passenger.name\r\n : passengers.map((p) => p.name).join(\", \");\r\n };\r\n\r\n const flightCardClass = (isRiskCard && riskToClass[flight.riskLevel]) || \"\";\r\n let riskRating = 0;\r\n if (displayRisk) {\r\n if (departure.highestRiskLevel) riskRating = departure.highestRiskLevel;\r\n if (arrival.highestRiskLevel && arrival.highestRiskLevel > riskRating)\r\n riskRating = arrival.highestRiskLevel;\r\n }\r\n\r\n return (\r\n \r\n \r\n