Update from samaritans.org e71f9f4d

Author: mitch-torchbox

static_src/sass/components/_form-item.scss

@@ -420,7 +420,8 @@
     }
 
     // Avoids the callout covering the top of error message text for PhoneNumberFields
-    &--only_uk_and_roi_phone_number_form_field, &--uk_and_roi_phone_number_widget {
+    &--only_uk_and_roi_phone_number_form_field,
+    &--uk_and_roi_phone_number_widget {
         .errorlist {
             margin-top: 10px;
         }

static_src/typescript/App.tsx

@@ -39,11 +39,14 @@ const App = () => {
     );
 
     // The queue is available if it is open and there are agents staffed.
-    const { isOpen, agentsStaffed } = useSelector(
+    const { isOpen, isAtQueueLimit, agentsStaffed } = useSelector(
         (state: RootState) => state.queue,
     );
     const isQueueAvailable =
-        isOpen && agentsStaffed !== null && agentsStaffed > 0;
+        isOpen &&
+        agentsStaffed !== null &&
+        agentsStaffed > 0 &&
+        !isAtQueueLimit;
 
     /**
      * Loading the LexWebUi

static_src/typescript/screens/WaitingScreen.tsx

@@ -67,8 +67,9 @@ const WaitingScreen = () => {
     useEffect(() => {
         dispatch(refreshQueueStatus())
             .unwrap()
-            .then(({ is_open, agents_staffed }) => {
-                const queueAvailable = is_open && agents_staffed > 0;
+            .then(({ is_open, is_at_queue_limit, agents_staffed }) => {
+                const queueAvailable =
+                    is_open && agents_staffed > 0 && !is_at_queue_limit;
 
                 if (!queueAvailable) {
                     dispatch(setScreen('landing'));

static_src/typescript/slices/queueSlice.ts

@@ -9,6 +9,7 @@ export type QueueState = {
     agentsOnline: number | null;
     agentsAvailable: number | null;
     isOpen: boolean | null;
+    isAtQueueLimit: boolean | null;
     averageQueueAnswerTime: number | null;
     averageQueueAnswerTimePeriod: 'Hour' | 'Day' | 'Week' | null;
 };
@@ -19,6 +20,7 @@ const initialState: QueueState = {
     agentsOnline: null,
     agentsAvailable: null,
     isOpen: null,
+    isAtQueueLimit: null,
     averageQueueAnswerTime: null,
     averageQueueAnswerTimePeriod: null,
 };
@@ -46,12 +48,15 @@ export const queueSlice = createSlice({
             state.agentsOnline = action.payload.agents_online;
             state.agentsAvailable = action.payload.agents_available;
             state.isOpen = action.payload.is_open;
+            state.isAtQueueLimit = action.payload.is_at_queue_limit;
             state.averageQueueAnswerTime = action.payload.avg_queue_answer_time;
             state.averageQueueAnswerTimePeriod =
                 action.payload.avg_queue_answer_time_period;
         });
         builder.addCase(refreshQueueStatus.rejected, (state) => {
             if (state.lastUpdated === null) {
+                // If this is the first time we're fetching the queue status and it fails,
+                // assume the queue is closed.
                 state.lastUpdated = Date.now();
                 state.isOpen = false;
             }

static_src/typescript/utils/queue-status.ts

@@ -5,6 +5,7 @@ export type QueueStatusResponse = {
     agents_online: number;
     agents_available: number;
     is_open: boolean;
+    is_at_queue_limit: boolean;
     avg_queue_answer_time: number;
     avg_queue_answer_time_period: 'Hour' | 'Day' | 'Week';
 };