Calendar Instant booking fixes

build/calendar-admin.json

@@ -69,6 +69,14 @@
       }
     ]
   },
+  {
+    "key": "calendar-form-enable-instant-booking",
+    "input": "checkbox",
+    "label": "Aktivér straksbooking",
+    "helpText": "Aktivér mulighed for straksbooking. Dette gælder kun for \"Enkelt lokale med booking\" layoutet og kræver, at resursen er opsat og godkendt af systemadministrator.",
+    "name": "instantBookingEnabled",
+    "formGroupClasses": "mb-3"
+  },
   {
     "key": "calendar-form-form-14",
     "input": "select",
@@ -210,13 +218,5 @@
     "name": "headerOrder",
     "formGroupClasses": "col-md-6 mb-3",
     "helpText": "Dette er kun relevant hvis \"Flere resurser\" er valgt under \"layout\". Standard er \"Hvornår, hvad, hvor.\""
-  },
-  {
-    "key": "calendar-form-enable-instant-booking",
-    "input": "checkbox",
-    "label": "Aktivér straksbooking",
-    "helpText": "Aktivér mulighed for straksbooking. Dette kræver at resursen er opsat og godkendt af systemadministrator.",
-    "name": "instantBookingEnabled",
-    "formGroupClasses": "mb-3"
   }
 ]

build/calendar-config-develop.json

@@ -4,9 +4,9 @@
   "id": "01FRJPF4XATRN8PBZ35XN84PS6",
   "description": "Mulighed for at vise et kalenderfeed.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar.js?ts=1756988530669",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-admin.json?ts=1756988530669",
-    "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-schema.json?ts=1756988530669",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar.js?ts=1758285165573",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-admin.json?ts=1758285165573",
+    "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-schema.json?ts=1758285165573",
     "assets": [],
     "options": {},
     "content": {}

build/calendar-config-main.json

@@ -4,9 +4,9 @@
   "id": "01FRJPF4XATRN8PBZ35XN84PS6",
   "description": "Mulighed for at vise et kalenderfeed.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar.js?ts=1756988530669",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-admin.json?ts=1756988530669",
-    "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-schema.json?ts=1756988530669",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar.js?ts=1758285165573",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-admin.json?ts=1758285165573",
+    "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-schema.json?ts=1758285165573",
     "assets": [],
     "options": {},
     "content": {}

src/calendar/calendar-admin.json

@@ -69,6 +69,14 @@
       }
     ]
   },
+  {
+    "key": "calendar-form-enable-instant-booking",
+    "input": "checkbox",
+    "label": "Aktivér straksbooking",
+    "helpText": "Aktivér mulighed for straksbooking. Dette gælder kun for \"Enkelt lokale med booking\" layoutet og kræver, at resursen er opsat og godkendt af systemadministrator.",
+    "name": "instantBookingEnabled",
+    "formGroupClasses": "mb-3"
+  },
   {
     "key": "calendar-form-form-14",
     "input": "select",
@@ -210,13 +218,5 @@
     "name": "headerOrder",
     "formGroupClasses": "col-md-6 mb-3",
     "helpText": "Dette er kun relevant hvis \"Flere resurser\" er valgt under \"layout\". Standard er \"Hvornår, hvad, hvor.\""
-  },
-  {
-    "key": "calendar-form-enable-instant-booking",
-    "input": "checkbox",
-    "label": "Aktivér straksbooking",
-    "helpText": "Aktivér mulighed for straksbooking. Dette kræver at resursen er opsat og godkendt af systemadministrator.",
-    "name": "instantBookingEnabled",
-    "formGroupClasses": "mb-3"
   }
 ]

src/calendar/calendar-multiple-days.js

@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import localeDa from "dayjs/locale/da";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import styled from "styled-components";
-import { renderTimeOfDayFromUnixTimestamp } from "./helper";
+import renderTimeOfDayFromUnixTimestamp from "./helper";
 
 /**
  * Multiple days resource calendar.

src/calendar/calendar-single-booking-helper.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import dayjs from "dayjs";
 import React from "react";
 import IconCalendarPlus from "./icon-calendar-plus.svg";
-import { renderTimeOfDayFromUnixTimestamp } from "./helper";
+import renderTimeOfDayFromUnixTimestamp from "./helper";
 
 const Wrapper = styled.div`
   /* Wrapper styling */

src/calendar/calendar-single-booking.js

@@ -6,10 +6,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 import { FormattedMessage } from "react-intl";
 import IconCheck from "./icon-check.svg";
 import IconExclamation from "./icon-exclamation.svg";
-import {
-  renderTimeOfDayFromUnixTimestamp,
-  timeCountdownString,
-} from "./helper";
+import renderTimeOfDayFromUnixTimestamp from "./helper";
 import {
   Button,
   Content,
@@ -72,8 +69,7 @@ function CalendarSingleBooking({
   const [currentTime, setCurrentTime] = useState(dayjs());
   const [bookingResult, setBookingResult] = useState(null);
   const [processingBooking, setProcessingBooking] = useState(false);
-  const [secondsUntilNextEvent, setSecondsUntilNextEvent] = useState(null);
-  const [bookingError, setBookingError] = useState(false);
+  const [bookingError, setBookingError] = useState(null);
 
   const fetchBookingIntervals = () => {
     if (!instantBookingEnabled) {
@@ -131,30 +127,6 @@ function CalendarSingleBooking({
   const intervalChecking = () => {
     setCurrentTime(dayjs());
 
-    // Find time until next event.
-    const now = dayjs();
-    let closestEvent = null;
-
-    if (calendarEvents.length === 0) {
-      setSecondsUntilNextEvent(null);
-    } else {
-      calendarEvents.forEach((event) => {
-        const eventStartTime = dayjs(event.startTime * 1000);
-        if (eventStartTime >= now) {
-          if (
-            closestEvent === null ||
-            eventStartTime < dayjs(closestEvent.startTime * 1000)
-          ) {
-            closestEvent = event;
-          }
-        }
-      });
-    }
-
-    if (closestEvent !== null) {
-      setSecondsUntilNextEvent(closestEvent.startTime - now.unix());
-    }
-
     const instantBooking = getInstantBookingFromLocalStorage(slide["@id"]);
 
     let newBookingResult = null;
@@ -199,14 +171,30 @@ function CalendarSingleBooking({
         },
       }),
     })
-      .then((r) => r.json())
+      .then((r) => {
+        if (r?.ok === false) {
+          return {
+            error: true,
+            status: r.status,
+            response: r,
+          };
+        }
+
+        return r.json();
+      })
       .then((data) => {
-        setBookingResult(data);
-        setInstantBookingFromLocalStorage(slide["@id"], data);
+        if (data?.error) {
+          const message = `Straksbooking lykkedes ikke. ${
+            data?.status === 409 ? "Intervallet er optaget." : ""
+          }`;
+          setBookingError(message);
+        } else {
+          setBookingResult(data);
+          setInstantBookingFromLocalStorage(slide["@id"], data);
+        }
       })
       .catch(() => {
-        setBookingError(true);
-        setTimeout(() => setBookingError(false), 10000);
+        setBookingError("Straksbooking lykkedes ikke.");
       })
       .finally(() => {
         setProcessingBooking(false);
@@ -248,7 +236,7 @@ function CalendarSingleBooking({
   const roomInUse = bookingResult !== null || currentEvents.length > 0;
 
   const roomAvailableForInstantBooking =
-    !roomInUse && fetchingIntervals ? null : bookableIntervals?.length > 0;
+    !roomInUse && bookableIntervals?.length > 0;
 
   const headerColor = roomInUse
     ? "var(--color-red-900)"
@@ -363,19 +351,6 @@ function CalendarSingleBooking({
                       </ButtonWrapper>
                     </>
                   )}
-                  {!roomAvailableForInstantBooking && (
-                    <>
-                      <p>
-                        <FormattedMessage
-                          id="instant_booked_not_available"
-                          defaultMessage="Straksbooking ikke tilgængeligt"
-                        />
-                      </p>
-                      <div style={{ fontSize: ".5em" }}>
-                        {timeCountdownString(secondsUntilNextEvent)}
-                      </div>
-                    </>
-                  )}
                 </>
               )}
               {processingBooking && !bookingResult && !bookingError && (
@@ -386,14 +361,7 @@ function CalendarSingleBooking({
                   />
                 </p>
               )}
-              {bookingError && (
-                <p>
-                  <FormattedMessage
-                    id="instant_booking_error"
-                    defaultMessage="Straksbooking fejlede. Prøv igen lidt senere."
-                  />
-                </p>
-              )}
+              {bookingError && <p>{bookingError}</p>}
               {bookingResult?.status === 201 && (
                 <p>
                   <FormattedMessage

src/calendar/calendar-single.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import styled from "styled-components";
-import { renderTimeOfDayFromUnixTimestamp } from "./helper";
+import renderTimeOfDayFromUnixTimestamp from "./helper";
 import "./calendar.scss";
 
 /**

src/calendar/helper.js

@@ -6,32 +6,4 @@ const renderTimeOfDayFromUnixTimestamp = (unixTimestamp) =>
     .locale(localeDa)
     .format("HH:mm");
 
-const timeCountdownString = (seconds) => {
-  if (seconds <= 0) return "";
-
-  const daysUntil = Math.floor(seconds / (60 * 60 * 24));
-  const hoursUntil = Math.floor(
-    (seconds - daysUntil * 60 * 60 * 24) / (60 * 60)
-  );
-  const minutesUntil = Math.floor((seconds - hoursUntil * 60 * 60) / 60);
-  const secondsUntil = seconds % 60;
-
-  // TODO: Translate strings.
-  const textEnd = " til næste begivenhed";
-
-  if (daysUntil > 0) {
-    return `${daysUntil} dag${daysUntil > 1 ? "e" : ""} ${textEnd}`;
-  }
-  if (hoursUntil > 0) {
-    return `${hoursUntil} time${hoursUntil > 1 ? "r" : ""} ${textEnd}`;
-  }
-  if (minutesUntil > 0) {
-    return `${minutesUntil} minut${minutesUntil > 1 ? "ter" : ""} ${textEnd}`;
-  }
-  if (secondsUntil > 0) {
-    return `Mindre end et minut ${textEnd}`;
-  }
-  return "";
-};
-
-export { renderTimeOfDayFromUnixTimestamp, timeCountdownString };
+export default renderTimeOfDayFromUnixTimestamp;