Add error message and increase limit to 15 for repeated booking (#31)

* Add error message, increase cap to 15 repeats

* Remove Popup import

frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.module.scss

@@ -12,3 +12,10 @@
   gap: 1rem;
   text-align: center;
 }
+
+.errorMsg {
+  color: red;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: -0.8rem;
+}

frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.tsx

@@ -10,14 +10,15 @@ import {
 import styles from "./calendar-booking-repeat-modal.module.scss";
 import { CalendarBooking } from "../booking-calendar";
 
-const MAX_REPEAT_TIMES = 10;
+const MAX_REPEAT_TIMES = 15;
 
 type Props = {
   event: CalendarBooking | null;
   setEvent: React.Dispatch<React.SetStateAction<CalendarBooking | null>>;
 } & Pick<ReturnType<typeof useBookingCreationCalendarState>, "onRepeatSlot">;
 
 function CalendarBookingRepeatModal({ event, setEvent, onRepeatSlot }: Props) {
+  const [isError, setIsError] = useState(false);
   const [occurrences, setOccurrences] = useState("1");
 
   const repeatedTimeslots = useMemo(() => {
@@ -48,6 +49,9 @@ function CalendarBookingRepeatModal({ event, setEvent, onRepeatSlot }: Props) {
                 (re.test(value) && Number(value) <= MAX_REPEAT_TIMES)
               ) {
                 setOccurrences(value);
+                setIsError(false);
+              } else {
+                setIsError(true);
               }
             }}
             value={occurrences}
@@ -56,6 +60,11 @@ function CalendarBookingRepeatModal({ event, setEvent, onRepeatSlot }: Props) {
             <input className={styles.repeatInput} />
             <Label basic>times</Label>
           </Input>
+          {isError && (
+            <p className={styles.errorMsg}>
+              Enter a number between 1 and {MAX_REPEAT_TIMES}
+            </p>
+          )}
           <Header>Preview Repeated Dates</Header>
           <div className={styles.bookingPreviewGrid}>
             {repeatedTimeslots.map((range, index) => (