Merge pull request #58 from untilhamza/release/v1.12.0

Release/v1.12.0

Author: untilhamza

src/components/Appointment/Appointment.js

@@ -2,7 +2,7 @@ import React from "react";
 import Button from "react-bootstrap/Button";
 import Badge from "react-bootstrap/Badge";
 import useModal from "../../hooks/useModal";
-import { setStatus } from "../../util/helpers";
+import { setStatus } from "../../utils/helpers";
 import { Card } from "antd";
 import "./Appointment.css";
 

src/components/Booking/Booking.js

@@ -2,7 +2,7 @@ import React from "react";
 import Button from "react-bootstrap/esm/Button";
 import Badge from "react-bootstrap/Badge";
 import "./Booking.css";
-import { setStatus } from "../../util/helpers";
+import { setStatus } from "../../utils/helpers";
 
 const Booking = ({ booking, onView }) => {
   // console.log("booking", booking);

src/components/BookingForm/BookingForm.js

@@ -41,7 +41,7 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
           authCtx.handleCustomerLogin();
           return;
         }
-        onConfirm({ ...values, userId: authCtx.userId, googleAccountName: authCtx.user.displayName, email: authCtx.user.email, photoURL: authCtx.user.photoURL });
+        onConfirm({ ...values, userId: authCtx.userId, googleAccountName: authCtx.user.displayName, email: authCtx.user.email, photoURL: authCtx.user.photoURL, createdTime: new Date() });
         resetForm();
       }}
       initialValues={{

src/components/Settings/GeneralSettings.js

@@ -1,17 +1,17 @@
-import React, { useState } from "react"
-import { Button } from "react-bootstrap"
-import ClockPicker from "../ClockPicker/ClockPicker"
-import { useFormik } from "formik"
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import ClockPicker from "../ClockPicker/ClockPicker";
+import { useFormik } from "formik";
 
-import * as yup from "yup"
-import { compareTimes } from "../../util/helpers"
-import "./GeneralSettings.css"
+import * as yup from "yup";
+import { compareTimes } from "../../utils/helpers";
+import "./GeneralSettings.css";
 
 const GeneralSettings = ({ onConfirm, onBack, initialValues: defaults }) => {
-  const [pickerTime, setPickerTime] = useState(null)
-  const [showPicker, setShowPicker] = useState(false)
-  const [pickerFunction, setPickerFunction] = useState(() => () => {})
-  const [editMode, setEditMode] = useState(false)
+  const [pickerTime, setPickerTime] = useState(null);
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerFunction, setPickerFunction] = useState(() => () => {});
+  const [editMode, setEditMode] = useState(false);
 
   const formik = useFormik({
     initialValues: {
@@ -21,104 +21,79 @@ const GeneralSettings = ({ onConfirm, onBack, initialValues: defaults }) => {
     validationSchema: yup.object().shape({
       startTime: yup.string().required("Starting time is required!"),
       endTime: yup.string().required("Ending time is required!"),
-      slotSize: yup
-        .number()
-        .min(0, "Minutes must be positive numbers")
-        .max(120, "Max slot size is 120 minutes")
-        .required("*Slot size is required!"),
-      address: yup
-        .string()
-        .min(8, "address is Too Short!")
-        .max(50, "address is Too Long!")
-        .required("*Address is required!"),
+      slotSize: yup.number().min(0, "Minutes must be positive numbers").max(120, "Max slot size is 120 minutes").required("*Slot size is required!"),
+      address: yup.string().min(8, "address is Too Short!").max(50, "address is Too Long!").required("*Address is required!"),
     }),
     onSubmit: (values) => {
       if (validateTime()) {
         // console.log("time is valid")
         // alert(JSON.stringify(values, null, 2))
-        setEditMode(false)
-        onConfirm({ ...values })
+        setEditMode(false);
+        onConfirm({ ...values });
       }
     },
-  })
+  });
 
   const validateTime = () => {
-    const isValid = compareTimes(formik.values.startTime, formik.values.endTime)
+    const isValid = compareTimes(formik.values.startTime, formik.values.endTime);
     if (!isValid) {
-      formik.setFieldError("startTime", "Start time must be before end time")
-      formik.setFieldError("endTime", "Start time must be before end time")
+      formik.setFieldError("startTime", "Start time must be before end time");
+      formik.setFieldError("endTime", "Start time must be before end time");
     } else {
-      formik.setFieldError("startTime", "")
-      formik.setFieldError("endTime", "")
+      formik.setFieldError("startTime", "");
+      formik.setFieldError("endTime", "");
     }
-    return isValid
-  }
+    return isValid;
+  };
 
   const handleChangeStartTime = (value) => {
-    formik.setFieldValue("startTime", value)
-    formik.setFieldTouched("startTime")
-  }
+    formik.setFieldValue("startTime", value);
+    formik.setFieldTouched("startTime");
+  };
 
   const handleChangeEndTime = (value) => {
-    formik.setFieldValue("endTime", value)
-    formik.setFieldTouched("endTime")
-  }
+    formik.setFieldValue("endTime", value);
+    formik.setFieldTouched("endTime");
+  };
 
   const handleUsePicker = (setValueFunction, initalValue = null) => {
-    setPickerTime(initalValue)
-    setPickerFunction(() => setValueFunction)
-    setShowPicker(true)
-  }
+    setPickerTime(initalValue);
+    setPickerFunction(() => setValueFunction);
+    setShowPicker(true);
+  };
 
   const handleClosePicker = () => {
-    setPickerFunction(() => () => {})
-    setPickerTime(null)
-    setShowPicker(false)
-  }
+    setPickerFunction(() => () => {});
+    setPickerTime(null);
+    setShowPicker(false);
+  };
 
   const handleGoBack = () => {
     //TODO: findout why this needs to be called twice
     // onBack()
-    onBack()
-  }
+    onBack();
+  };
 
   return (
     <>
-      <ClockPicker
-        show={showPicker}
-        time={pickerTime}
-        onChange={pickerFunction}
-        onClose={handleClosePicker}
-      />
+      <ClockPicker show={showPicker} time={pickerTime} onChange={pickerFunction} onClose={handleClosePicker} />
       <div className="container min-vh-100 p-3">
         <h2>General Shop Settings</h2>
         <div className="d-flex justify-content-between align-items-center mb-4">
           <h4>Default Settings</h4>
           <div className="hstack gap-3">
             {editMode ? (
               <>
-                <Button
-                  variant="outline-secondary"
-                  size="sm"
-                  onClick={formik.handleSubmit}
-                >
+                <Button variant="outline-secondary" size="sm" onClick={formik.handleSubmit}>
                   Save
                 </Button>
-                <Button
-                  variant="outline-secondary"
-                  size="sm"
-                  onClick={() => setEditMode(false)}
-                >
+                <Button variant="outline-secondary" size="sm" onClick={() => setEditMode(false)}>
                   Cancel
                 </Button>
               </>
             ) : (
               <>
-                <Button
-                  variant="outline-secondary"
-                  size="sm"
-                  onClick={() => setEditMode(true)}
-                >
+                <Button variant="outline-secondary" size="sm" onClick={() => setEditMode(true)}>
                   Edit
                 </Button>
                 <Button variant="secondary" size="sm" onClick={handleGoBack}>
@@ -137,25 +112,13 @@ const GeneralSettings = ({ onConfirm, onBack, initialValues: defaults }) => {
             <span>{formik.values.startTime}</span>
             {editMode && (
               <>
-                <span
-                  className="text-primary fw-light fst-italic ms-3 change-text"
-                  onClick={() =>
-                    handleUsePicker(
-                      handleChangeStartTime,
-                      formik.values.startTime
-                    )
-                  }
-                >
+                <span className="text-primary fw-light fst-italic ms-3 change-text" onClick={() => handleUsePicker(handleChangeStartTime, formik.values.startTime)}>
                   Change
                 </span>
               </>
             )}
           </div>
-          {formik.touched.startTime && formik.errors.startTime && (
-            <span className="help-block text-danger col-8 offset-4">
-              {formik.errors.startTime}
-            </span>
-          )}
+          {formik.touched.startTime && formik.errors.startTime && <span className="help-block text-danger col-8 offset-4">{formik.errors.startTime}</span>}
         </div>
 
         <div className="mb-3 row">
@@ -165,21 +128,12 @@ const GeneralSettings = ({ onConfirm, onBack, initialValues: defaults }) => {
           <div className="col-8 d-flex align-items-center">
             <span>{formik.values.endTime}</span>
             {editMode && (
-              <span
-                className="text-primary fw-light fst-italic ms-3 change-text"
-                onClick={() =>
-                  handleUsePicker(handleChangeEndTime, formik.values.endTime)
-                }
-              >
+              <span className="text-primary fw-light fst-italic ms-3 change-text" onClick={() => handleUsePicker(handleChangeEndTime, formik.values.endTime)}>
                 Change
               </span>
             )}
           </div>
-          {formik.touched.endTime && formik.errors.endTime && (
-            <span className="help-block text-danger col-8 offset-4">
-              {formik.errors.endTime}
-            </span>
-          )}
+          {formik.touched.endTime && formik.errors.endTime && <span className="help-block text-danger col-8 offset-4">{formik.errors.endTime}</span>}
         </div>
 
         <div className="mb-3 row">
@@ -188,56 +142,31 @@ const GeneralSettings = ({ onConfirm, onBack, initialValues: defaults }) => {
           </label>
           <div className="col-8 d-flex align-items-center">
             {editMode ? (
-              <input
-                type="number"
-                className="form-control w-25"
-                id="slotSize"
-                name="slotSize"
-                onChange={formik.handleChange}
-                value={formik.values.slotSize}
-              />
+              <input type="number" className="form-control w-25" id="slotSize" name="slotSize" onChange={formik.handleChange} value={formik.values.slotSize} />
             ) : (
               <span>{formik.values.slotSize}</span>
             )}
             <span className="ms-3">Minutes</span>
           </div>
-          {formik.touched.slotSize && formik.errors.slotSize && (
-            <span className="help-block text-danger col-8 offset-4">
-              {formik.errors.slotSize}
-            </span>
-          )}
+          {formik.touched.slotSize && formik.errors.slotSize && <span className="help-block text-danger col-8 offset-4">{formik.errors.slotSize}</span>}
         </div>
 
         <div className="mb-3 row">
-          <label
-            htmlFor="inputAddress"
-            className="col-4 col-form-label fw-bold"
-          >
+          <label htmlFor="inputAddress" className="col-4 col-form-label fw-bold">
             Address
           </label>
           <div className="col-8 d-flex align-items-center">
             {editMode ? (
-              <textarea
-                className="form-control input-address"
-                id="inputAddress"
-                rows="3"
-                name="address"
-                value={formik.values.address}
-                onChange={formik.handleChange}
-              />
+              <textarea className="form-control input-address" id="inputAddress" rows="3" name="address" value={formik.values.address} onChange={formik.handleChange} />
             ) : (
               <span>{formik.values.address}</span>
             )}
           </div>
-          {formik.touched.address && formik.errors.address && (
-            <span className="help-block text-danger col-8 offset-4">
-              {formik.errors.address}
-            </span>
-          )}
+          {formik.touched.address && formik.errors.address && <span className="help-block text-danger col-8 offset-4">{formik.errors.address}</span>}
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default GeneralSettings
+export default GeneralSettings;

src/components/SideBar/SideBar.js

@@ -3,7 +3,7 @@ import "./SideBar.css";
 import { IconContext } from "react-icons";
 import { Link } from "react-router-dom";
 import { Backdrop } from "@mui/material";
-import { SIDEITEMS } from "../../util/data";
+import { SIDEITEMS } from "../../utils/data";
 import { useContext } from "react";
 import AuthContext from "../../store/auth-context";
 import styled from "styled-components";

src/components/TimeSelector/TimeSelector.js

@@ -2,7 +2,7 @@ import { v4 as uuidv4 } from "uuid";
 import "./TimeSelector.css";
 import LinearProgress from "@mui/material/LinearProgress";
 
-import { combineDateTimeMoment } from "../../util/helpers";
+import { combineDateTimeMoment } from "../../utils/helpers";
 import { STATUS_PENDING } from "../../hooks/useHttp";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";