From 8a150b3e17c07e2036e04bdf9010aba024b4ac7c Mon Sep 17 00:00:00 2001
From: Lynnette Ong <103313573+lynnetteeee@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:21:02 +0800
Subject: [PATCH] Add error message and increase limit to 15 for repeated
 booking (#31)

* Add error message, increase cap to 15 repeats

* Remove Popup import
---
 .../calendar-booking-repeat-modal.module.scss         |  7 +++++++
 .../calendar-booking-repeat-modal.tsx                 | 11 ++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.module.scss b/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.module.scss
index 4605c6c..9832deb 100644
--- a/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.module.scss
+++ b/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;
+}
diff --git a/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.tsx b/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.tsx
index 02b574f..cc6da5b 100644
--- a/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.tsx
+++ b/frontend/src/components/calendar-booking-repeat-modal/calendar-booking-repeat-modal.tsx
@@ -10,7 +10,7 @@ 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;
@@ -18,6 +18,7 @@ type Props = {
 } & 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) => (