use availableDates from itemsAPI with NewRequestingDayPicker

content/webapp/components/CalendarSelect/NewCalendarSelect.tsx

@@ -0,0 +1,53 @@
+import { FunctionComponent } from 'react';
+import Select from '@weco/content/components/Select';
+import { dateAsValue } from '../ItemRequestModal/format-date';
+import { AvailabilitySlot } from '@weco/content/services/wellcome/catalogue/types';
+import { formatDayName, formatDayMonth } from '@weco/common/utils/format-date';
+
+type Props = {
+  availableDates: AvailabilitySlot[];
+  chosenDate?: string;
+  setChosenDate: (value: string) => void;
+};
+
+const availabilitySlotsToSelectOptions = (
+  availableDates: AvailabilitySlot[]
+) => {
+  // AvailabilitySlots have open and close dateTimestamps
+  // right now we only care about the day, not the time
+  // so we're only using "from" = opening date/time
+  return (
+    availableDates
+      .map(availabilitySlot => new Date(availabilitySlot.from))
+      .map(availableDate => ({
+        value: dateAsValue(availableDate),
+        text: `${formatDayName(availableDate)} ${formatDayMonth(
+          availableDate
+        )}`,
+      }))
+      // the list of available dates is returned from the itemsAPI in various lenghts
+      // trimming down to 12 for consistency
+      .slice(0, 12)
+  );
+};
+
+const NewCalendarSelect: FunctionComponent<Props> = ({
+  availableDates,
+  chosenDate,
+  setChosenDate,
+}) => {
+  return availableDates.length ? (
+    <Select
+      name="calendar_dates"
+      label="Select a date"
+      hideLabel={true}
+      options={availabilitySlotsToSelectOptions(availableDates)}
+      value={chosenDate || 'Select a date'}
+      onChange={e => setChosenDate(e.target.value)}
+    />
+  ) : (
+    <>Error: Available dates could not be found.</>
+  );
+};
+
+export default NewCalendarSelect;

content/webapp/components/ItemRequestModal/RequestDialog.tsx

@@ -5,6 +5,7 @@ import { allowedRequests } from '@weco/common/values/requests';
 import { font } from '@weco/common/utils/classnames';
 import Space from '@weco/common/views/components/styled/Space';
 import RequestingDayPicker from '../RequestingDayPicker/RequestingDayPicker';
+import NewRequestingDayPicker from '../RequestingDayPicker/NewRequestingDayPicker';
 import Button, { ButtonTypes } from '@weco/common/views/components/Buttons';
 import {
   PhysicalItem,
@@ -14,6 +15,7 @@ import styled from 'styled-components';
 import { CTAs, CurrentRequests, Header } from './common';
 import { themeValues } from '@weco/common/views/themes/config';
 import { dateAsValue, dateFromValue } from './format-date';
+import { useToggles } from '@weco/common/server-data/Context';
 
 const PickUpDate = styled(Space).attrs({
   $v: { size: 'l', properties: ['padding-top', 'padding-bottom'] },
@@ -77,6 +79,8 @@ const RequestDialog: FunctionComponent<RequestDialogProps> = ({
   setIsActive,
   currentHoldNumber,
 }) => {
+  const { offsiteRequesting } = useToggles();
+
   const availableDates = useAvailableDates();
   const [pickUpDate, setPickUpDate] = useState<string | undefined>(
     availableDates.nextAvailable && dateAsValue(availableDates.nextAvailable)
@@ -140,14 +144,25 @@ const RequestDialog: FunctionComponent<RequestDialogProps> = ({
             </PickupDeadline>
           </PickUpDateDescription>
           <PickUpDateInputWrapper>
-            <RequestingDayPicker
-              startDate={availableDates.nextAvailable}
-              endDate={availableDates.lastAvailable}
-              exceptionalClosedDates={availableDates.exceptionalClosedDates}
-              regularClosedDays={availableDates.regularClosedDays}
-              pickUpDate={pickUpDate}
-              setPickUpDate={setPickUpDate}
-            />
+            <>
+              {offsiteRequesting && (
+                <NewRequestingDayPicker
+                  availableDates={item?.availableDates || []}
+                  pickUpDate={pickUpDate}
+                  setPickUpDate={setPickUpDate}
+                />
+              )}
+              {!offsiteRequesting && (
+                <RequestingDayPicker
+                  startDate={availableDates.nextAvailable}
+                  endDate={availableDates.lastAvailable}
+                  exceptionalClosedDates={availableDates.exceptionalClosedDates}
+                  regularClosedDays={availableDates.regularClosedDays}
+                  pickUpDate={pickUpDate}
+                  setPickUpDate={setPickUpDate}
+                />
+              )}
+            </>
           </PickUpDateInputWrapper>
         </PickUpDate>
       </Space>

content/webapp/components/PhysicalItems/PhysicalItems.tsx

@@ -73,8 +73,8 @@ const PhysicalItems: FunctionComponent<Props> = ({
   const [itemsState, setItemsState] = useItemsState(workItems);
 
   useEffect(() => {
-    setPhysicalItems(workItems);
-  }, [workItems]);
+    setPhysicalItems(physicalItems);
+  }, [physicalItems]);
 
   useAbortSignalEffect(
     signal => {

content/webapp/components/RequestingDayPicker/NewRequestingDayPicker.tsx

@@ -0,0 +1,27 @@
+import { FunctionComponent } from 'react';
+import NewCalendarSelect from '../CalendarSelect/NewCalendarSelect';
+import { AvailabilitySlot } from '@weco/content/services/wellcome/catalogue/types';
+
+type Props = {
+  availableDates: AvailabilitySlot[];
+  pickUpDate?: string;
+  setPickUpDate: (date: string) => void;
+};
+
+const NewRequestingDayPicker: FunctionComponent<Props> = ({
+  availableDates,
+  pickUpDate,
+  setPickUpDate,
+}: Props) => {
+  return (
+    <div style={{ position: 'relative' }}>
+      <NewCalendarSelect
+        availableDates={availableDates}
+        chosenDate={pickUpDate}
+        setChosenDate={setPickUpDate}
+      />
+    </div>
+  );
+};
+
+export default NewRequestingDayPicker;

content/webapp/services/wellcome/catalogue/types/index.ts

@@ -149,6 +149,7 @@ export type Item<LocationType> = {
   locations: LocationType[];
   type: 'Item';
   note?: string;
+  availableDates?: AvailabilitySlot[];
 };
 
 export type PhysicalItem = Item<PhysicalLocation> & {
@@ -159,6 +160,11 @@ export type PhysicalItem = Item<PhysicalLocation> & {
   };
 };
 
+export type AvailabilitySlot = {
+  from: string;
+  to: string;
+};
+
 type Date = {
   label: string;
   type: 'Period';

content/webapp/test/fixtures/catalogueApi/work.ts

@@ -546,6 +546,10 @@ export const workWithPartOf: Work = {
           type: 'DigitalLocation',
         },
       ],
+      availableDates: [
+        { from: '2022-05-23T09:00:00.000Z', to: '2022-05-23T09:00:00.000Z' },
+        { from: '2022-05-24T09:00:00.000Z', to: '2022-05-24T09:00:00.000Z' },
+      ],
       type: 'Item',
     },
   ],