personal min and max future booking days

src/Components/MyFormInputs/index.js

@@ -110,12 +110,12 @@ export function MyPasswordFormInput({
   );
 }
 
-export function MyCalendarMaxFutureBookingDaysFormInput() {
+export function MyCalendarMaxFutureBookingDaysFormInput({ formItemName }) {
   const { t } = useTranslation();
 
   return (
     <MyFormInput
-      formItemName="calendarMaxFutureBookingDays"
+      formItemName={formItemName}
       minLength={Constants.GLOBALS.MIN_CALENDAR_FUTURE_BOOKING_DAYS}
       maxLength={Constants.GLOBALS.MAX_CALENDAR_FUTURE_BOOKING_DAYS}
       label={t("common.calendarMaxFutureBookingDays")}
@@ -131,12 +131,12 @@ export function MyCalendarMaxFutureBookingDaysFormInput() {
   );
 }
 
-export function MyCalendarMinEarliestBookingTimeFormInput() {
+export function MyCalendarMinEarliestBookingTimeFormInput({ formItem }) {
   const { t } = useTranslation();
 
   return (
     <MyFormInput
-      formItemName="calendarMinEarliestBookingTime"
+      formItemName={formItem}
       minLength={Constants.GLOBALS.MIN_CALENDAR_EARLIEST_BOOKING_TIME}
       maxLength={Constants.GLOBALS.MAX_CALENDAR_EARLIEST_BOOKING_TIME}
       label={t("common.calendarMinEarliestBookingTime")}

src/Pages/Store/Calendar/index.js

@@ -78,12 +78,8 @@ export default function StoreCalendar() {
           notificationApi: notificationApi,
           t: t,
         })
-          .then((res) => {
-            setCalendarSettings(res);
-          })
-          .catch((err) => {
-            console.log(err);
-          });
+          .then((res) => setCalendarSettings(res))
+          .catch(() => {});
       }, 2000);
     }
 
@@ -251,22 +247,35 @@ function CardPersonalCalendarSettings({ settings }) {
     "calendarUsingPrimaryCalendar",
     form
   );
+  const maxFutureBookingDays = Form.useWatch(
+    "personalCalendarMaxFutureBookingDays",
+    form
+  );
+  const minEarliestBookingTime = Form.useWatch(
+    "personalCalendarMinEarliestBookingTime",
+    form
+  );
 
-  const handleModalClose = () => {
-    setIsModalOpen(false);
-  };
-
+  const handleModalClose = () => setIsModalOpen(false);
   useEffect(() => {
     if (!settings) return;
 
-    form.setFieldValue(
-      "calendarUsingPrimaryCalendar",
-      settings.calendar_using_primary_calendar
-    );
+    form.setFieldsValue({
+      calendarUsingPrimaryCalendar: settings.calendar_using_primary_calendar,
+      personalCalendarMaxFutureBookingDays:
+        settings.calendar_max_future_booking_days,
+      personalCalendarMinEarliestBookingTime:
+        settings.calendar_min_earliest_booking_time,
+    });
   }, []);
 
   useEffect(() => {
-    if (usingPrimaryCalendar === undefined) return;
+    if (
+      usingPrimaryCalendar === undefined ||
+      maxFutureBookingDays === undefined ||
+      minEarliestBookingTime === undefined
+    )
+      return;
 
     if (RequestState.INIT === requestState) {
       setRequestState(RequestState.NOTHING);
@@ -285,17 +294,16 @@ function CardPersonalCalendarSettings({ settings }) {
         method: "POST",
         body: {
           calendarUsingPrimaryCalendar: usingPrimaryCalendar,
+          calendarMaxFutureBookingDays: maxFutureBookingDays,
+          calendarMinEarliestBookingTime: minEarliestBookingTime,
         },
         notificationApi: notificationApi,
         t: t,
       })
         .then(() => setRequestState(RequestState.SUCCESS))
-        .catch((errStatus) => {
-          console.log(errStatus);
-          setRequestState(RequestState.FAILED);
-        });
+        .catch((errStatus) => setRequestState(RequestState.FAILED));
     }, 500);
-  }, [usingPrimaryCalendar]);
+  }, [usingPrimaryCalendar, maxFutureBookingDays, minEarliestBookingTime]);
 
   useEffect(() => {
     if (!isModalOpen) return;
@@ -374,6 +382,10 @@ function CardPersonalCalendarSettings({ settings }) {
           >
             <Switch />
           </Form.Item>
+
+          <MyCalendarMaxFutureBookingDaysFormInput formItemName="personalCalendarMaxFutureBookingDays" />
+
+          <MyCalendarMinEarliestBookingTimeFormInput formItem="personalCalendarMinEarliestBookingTime" />
         </Form>
       </Card>
 
@@ -439,13 +451,13 @@ function CardStoreCalendarSettings({ settings }) {
   const [requestState, setRequestState] = useState(RequestState.INIT);
   const delayTimeout = useRef();
 
-  const calendarMaxFutureBookingDays = Form.useWatch(
-    "calendarMaxFutureBookingDays",
+  const storeCalendarMaxFutureBookingDays = Form.useWatch(
+    "storeCalendarMaxFutureBookingDays",
     form
   );
 
-  const calendarMinEarliestBookingTime = Form.useWatch(
-    "calendarMinEarliestBookingTime",
+  const storeCalendarMinEarliestBookingTime = Form.useWatch(
+    "storeCalendarMinEarliestBookingTime",
     form
   );
 
@@ -453,8 +465,9 @@ function CardStoreCalendarSettings({ settings }) {
     if (!settings) return;
 
     form.setFieldsValue({
-      calendarMaxFutureBookingDays: settings.calendar_max_future_booking_days,
-      calendarMinEarliestBookingTime:
+      storeCalendarMaxFutureBookingDays:
+        settings.calendar_max_future_booking_days,
+      storeCalendarMinEarliestBookingTime:
         settings.calendar_min_earliest_booking_time,
     });
   }, []);
@@ -463,10 +476,10 @@ function CardStoreCalendarSettings({ settings }) {
     // undefined on first render
     // null when input is empty
     if (
-      calendarMaxFutureBookingDays === undefined ||
-      calendarMinEarliestBookingTime === undefined ||
-      calendarMaxFutureBookingDays === null ||
-      calendarMinEarliestBookingTime === null
+      storeCalendarMaxFutureBookingDays === undefined ||
+      storeCalendarMinEarliestBookingTime === undefined ||
+      storeCalendarMaxFutureBookingDays === null ||
+      storeCalendarMinEarliestBookingTime === null
     )
       return;
 
@@ -486,19 +499,16 @@ function CardStoreCalendarSettings({ settings }) {
         url: "/calendar/settings/store",
         method: "POST",
         body: {
-          calendarMaxFutureBookingDays,
-          calendarMinEarliestBookingTime,
+          calendarMaxFutureBookingDays: storeCalendarMaxFutureBookingDays,
+          calendarMinEarliestBookingTime: storeCalendarMinEarliestBookingTime,
         },
         notificationApi: notificationApi,
         t: t,
       })
         .then(() => setRequestState(RequestState.SUCCESS))
-        .catch((errStatus) => {
-          console.log(errStatus);
-          setRequestState(RequestState.FAILED);
-        });
+        .catch(() => setRequestState(RequestState.FAILED));
     }, 500);
-  }, [calendarMaxFutureBookingDays, calendarMinEarliestBookingTime]);
+  }, [storeCalendarMaxFutureBookingDays, storeCalendarMinEarliestBookingTime]);
 
   return (
     <>
@@ -515,9 +525,9 @@ function CardStoreCalendarSettings({ settings }) {
       >
         <Form form={form} requiredMark={false}>
           <>
-            <MyCalendarMaxFutureBookingDaysFormInput />
+            <MyCalendarMaxFutureBookingDaysFormInput formItemName="storeCalendarMaxFutureBookingDays" />
 
-            <MyCalendarMinEarliestBookingTimeFormInput />
+            <MyCalendarMinEarliestBookingTimeFormInput formItem="storeCalendarMinEarliestBookingTime" />
           </>
         </Form>
       </Card>