diff --git a/.env b/.env
index 647a5386..6e0ec7da 100644
--- a/.env
+++ b/.env
@@ -3,4 +3,5 @@ REACT_APP_REQUEST_BROKER_BASEURL=http://rac-vch.ad.rockarchive.org:8001/api
REACT_APP_LOCALSTORAGE_KEY=DIMESMyList
REACT_APP_MINIMAP_KEY=DIMESMinimapIntro
REACT_APP_S3_BASEURL=https://iiif.rockarch.org
-REACT_APP_CAPTCHA_SITE_KEY=6LdQiSkTAAA
\ No newline at end of file
+REACT_APP_CAPTCHA_SITE_KEY=6LdQiSkTAAA
+REACT_APP_ENABLE_READING_ROOM_SELECT=true
\ No newline at end of file
diff --git a/.env.deploy b/.env.deploy
index 8d55d2c3..e05cdc05 100644
--- a/.env.deploy
+++ b/.env.deploy
@@ -3,4 +3,5 @@ REACT_APP_REQUEST_BROKER_BASEURL=${REQUEST_BROKER_BASEURL}
REACT_APP_LOCALSTORAGE_KEY=DIMESMyList
REACT_APP_MINIMAP_KEY=DIMESMinimapIntro
REACT_APP_S3_BASEURL=${AWS_BUCKET_BASEURL}
-REACT_APP_CAPTCHA_SITE_KEY=${CAPTCHA_SITE_KEY}
\ No newline at end of file
+REACT_APP_CAPTCHA_SITE_KEY=${CAPTCHA_SITE_KEY}
+REACT_APP_ENABLE_READING_ROOM_SELECT=${ENABLE_READING_ROOM_SELECT}
\ No newline at end of file
diff --git a/README.md b/README.md
index 3d3ec5e7..1e81ab82 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,10 @@ DIMES uses a [macro implementation](https://lingui.dev/guides/message-extraction
to present translated strings.
5. Commit updated code to the GitHub repository.
+### Aeon Reading Room Integration
+
+Available dates for reading rooms can be pulled from Aeon via the request broker by setting the `REACT_APP_ENABLE_READING_ROOM_SELECT` environment variable. Not setting this environment variable or leaving it blank will disable this feature. Setting this environment variable to any string will activate it.
+
## License
This code is released under an [MIT License](LICENSE).
diff --git a/package.json b/package.json
index 93f8f9b0..59a7a55f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"@testing-library/user-event": "^14.2.0",
"axios": "^0.27.2",
"classnames": "^2.2.6",
+ "date-fns": "^2.30.0",
"downshift": "^6.1.7",
"formik": "^2.1.5",
"mirador": "^3.3.0",
@@ -20,6 +21,7 @@
"react": "^16.13.1",
"react-accessible-dropdown-menu-hook": "^3.2.0",
"react-aria-live": "^2.0.5",
+ "react-datepicker": "^4.20.0",
"react-dom": "^16.13.1",
"react-google-recaptcha": "^2.1.0",
"react-helmet": "^6.1.0",
diff --git a/src/components/Inputs/__tests__/Inputs.test.js b/src/components/Inputs/__tests__/Inputs.test.js
index 9f8a9d66..894f1ecb 100644
--- a/src/components/Inputs/__tests__/Inputs.test.js
+++ b/src/components/Inputs/__tests__/Inputs.test.js
@@ -48,13 +48,13 @@ it('renders checkbox props correctly', () => {
it('renders date props correctly', () => {
act(() => {
- render(} />, container)
+ render(} />, container)
})
const label = document.querySelector('label')
expect(label.textContent).toBe('Select a date')
- const input = document.querySelector('.dp__input')
+ const input = document.querySelector('.dp__wrapper')
expect(input.id).toBe('1')
})
diff --git a/src/components/Inputs/index.js b/src/components/Inputs/index.js
index b471e5c9..be1dd487 100644
--- a/src/components/Inputs/index.js
+++ b/src/components/Inputs/index.js
@@ -1,12 +1,6 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
-import {
- DatePicker,
- DatePickerInput,
- DatePickerMonth,
- DatePickerTable,
- DatePickerButton,
- DatePickerCalendar} from '@reecelucas/react-datepicker'
+import DatePicker from 'react-datepicker'
import {useSelect} from 'downshift'
import MaterialIcon from '../MaterialIcon'
import classnames from 'classnames'
@@ -62,47 +56,28 @@ CheckBoxInput.defaultProps = {
checked: true,
}
-export const DateInput = props => (
+export const DateInput = ({className, defaultDate, handleChange, helpText, id, label, ...props}) => {
+ const [startDate, setStartDate] = useState(defaultDate || new Date())
+
+ useEffect(() => {
+ handleChange(startDate)
+ }, [startDate, setStartDate])
+
+ return (
<>
+
props.handleChange(date)}>
-
-
-
-
- prev()} >
-
-
-
- next()} >
-
-
-
-
-
+ className={className || 'dp__wrapper'}
+ selected={startDate}
+ showTimeSelect='true'
+ onChange={date => setStartDate(date)}
+ dateFormat="yyyy-MM-dd h:mm aa"
+ id={id}
+ {...props}>
- {props.helpText && {props.helpText}
}
+ {helpText && {helpText}
}
-)
+)}
DateInput.propTypes = {
className: PropTypes.string,
@@ -110,6 +85,7 @@ DateInput.propTypes = {
helpText: PropTypes.string,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
+ defaultDate: PropTypes.instanceOf(Date),
};
diff --git a/src/components/ModalMyList/__tests__/ModalMyList.test.js b/src/components/ModalMyList/__tests__/ModalMyList.test.js
index 110f46da..b49d692e 100644
--- a/src/components/ModalMyList/__tests__/ModalMyList.test.js
+++ b/src/components/ModalMyList/__tests__/ModalMyList.test.js
@@ -26,6 +26,7 @@ beforeEach(() => {
return Promise.reject(new Error('not found'))
}
})
+ axios.get.mockImplementation((url) => Promise.resolve({data:[]}))
})
afterEach(() => {
diff --git a/src/components/ModalMyList/index.js b/src/components/ModalMyList/index.js
index 77bab5b3..691996d3 100644
--- a/src/components/ModalMyList/index.js
+++ b/src/components/ModalMyList/index.js
@@ -12,6 +12,8 @@ import { ModalSavedItemList } from '../ModalSavedItem'
import { getFormattedDate } from '../Helpers'
import './styles.scss'
import { Plural, Trans, select, t } from '@lingui/macro'
+import axios from 'axios'
+import { addBusinessDays, parse, parseISO, startOfDay, isWithinInterval } from 'date-fns'
const SubmitListInput = ({ submitList }) => {
@@ -354,7 +356,97 @@ EmailModal.propTypes = {
toggleModal: PropTypes.func.isRequired,
}
-export const ReadingRoomRequestModal = props => (
+const ReadingRoomSelect = ({ readingRooms }) => {
+ const { setFieldValue } = useFormikContext();
+ const [site, setSite] = useState('');
+
+ const ReadingRoomLocations = readingRooms.map(readingRoom => ({
+ value: readingRoom.sites[0],
+ label: readingRoom.name,
+ }));
+ ReadingRoomLocations.unshift({
+ value: "",
+ label: t({message: "Please select a reading room"}),
+ });
+
+ useEffect(() => {
+ setFieldValue('site', site);
+ }, [site, setFieldValue]);
+
+ return (
+
+ setSite(selectedItem.value)}
+ options={ReadingRoomLocations}
+ required={true}
+ selectedItem={site || ''} />
+
+
+ )
+}
+
+const ReadingRoomDateInput = ({ readingRoom }) => {
+ const { setFieldValue } = useFormikContext();
+
+ return (
+
+ setFieldValue('scheduledDate', date)}
+ helpText={t({
+ comment: 'Helptext for scheduling date.',
+ message: 'Enter the date of your research visit (mm/dd/yyyy)'
+ })}
+ id='scheduledDate'
+ label={t({
+ comment: 'Label for scheduling date',
+ message: 'Scheduled Date *'
+ })}
+ type='date'
+ defaultDate={addBusinessDays(new Date(), readingRoom?.policies[0]?.appointmentMinLeadDays || 1)}
+ minDate={addBusinessDays(new Date(), readingRoom?.policies[0]?.appointmentMinLeadDays || 1)}
+ filterDate={!!process.env.REACT_APP_ENABLE_READING_ROOM_SELECT ? date => readingRoom?.openHours.some(x => x.dayOfWeek === date.getDay()) : null}
+ filterTime={!!process.env.REACT_APP_ENABLE_READING_ROOM_SELECT ? date => {
+ if (readingRoom === undefined) return false;
+ const hours = readingRoom.openHours.find(x => x.dayOfWeek === date.getDay());
+ return isWithinInterval(date, {
+ start: parse(hours.openTime, "HH:mm:ss", date),
+ end: parse(hours.closeTime, "HH:mm:ss", date),
+ });
+ } : null}
+ excludeDateIntervals={readingRoom?.closures.map(closure => ({
+ start: startOfDay(parseISO(closure.startDate)),
+ end: startOfDay(parseISO(closure.endDate)),
+ }))} />
+
+
+ )
+}
+
+export const ReadingRoomRequestModal = props => {
+ const [aeonReadingRooms, setAeonReadingRooms] = useState([]);
+
+ useEffect(() => {
+ if (!!process.env.REACT_APP_ENABLE_READING_ROOM_SELECT) {
+ axios.get(`${process.env.REACT_APP_REQUEST_BROKER_BASEURL}/reading-rooms`).then(response => {
+ setAeonReadingRooms(response.data);
+ });
+ }
+ }, []); // empty deps array means it runs once
+
+ return (
(
comment: 'Missing Scheduled Date error',
message: 'Please provide the date of your research visit.'
});
+ if (!!process.env.REACT_APP_ENABLE_READING_ROOM_SELECT && !values.site) errors.site = t({
+ message: 'Please select a location of a reading room.'
+ })
if (!values.recaptcha) errors.recaptcha = t({
message: 'Please complete this field.'
});
@@ -390,7 +485,7 @@ export const ReadingRoomRequestModal = props => (
setSubmitting(false);
}}
>
- {({ errors, isSubmitting, setFieldValue, touched }) => (
+ {({ errors, isSubmitting, setFieldValue, touched, values }) => (