Merge pull request #48 from untilhamza/release/v1.8.0

untilhamza · web-flow · commit 910619b031ad · 2023-03-15T22:23:03.000+09:00
Release/v1.8.0
diff --git a/src/components/BookingForm/BookingForm.js b/src/components/BookingForm/BookingForm.js
@@ -1,14 +1,9 @@
-import { useEffect, useState } from "react";
 import { Formik, ErrorMessage } from "formik";
-import { useHistory } from "react-router-dom";
 import * as yup from "yup";
-import Swal from "sweetalert2";
 import moment from "moment";
 import { Form, Button } from "react-bootstrap";
 import { DatePicker } from "antd";
 import TimeSelector from "../TimeSelector/TimeSelector";
-import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
-import { auth } from "../../database/firebase-config";
 
 import "./BookingForm.css";
 
@@ -17,89 +12,12 @@ const koreanPhoneRegex = /^((\+82))((10\d{7,8})|(2\d{8}))$/;
 const schema = yup.object().shape({
   name: yup.string().required("Name is required!"),
   phone: yup.string().min(8, "*Enter a valid phone number").matches(koreanPhoneRegex, "*Enter a valid phone number!").required("*Phone number is required!"),
-  email: yup.string().email("Must be a valid email").max(255).required("*Email is required!"),
+  email: yup.string(),
   date: yup.string().required("*Booking date is required!"),
   time: yup.string().required("*Booking time is required!"),
 });
 
 const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStatus, settings }) => {
-  const [phoneIsVerified, setPhoneIsVerified] = useState(true);
-  const [isVerifyingPhone, setIsVerifyingPhone] = useState(true);
-  const [phoneVerificationCode, setPhoneVerificationCode] = useState("");
-  const [isRecaptchaVerified, setIsRecaptchaVerified] = useState(null);
-  const [phoneVerificationError, setPhoneVerificationError] = useState("");
-  const [phoneConfirmationObject, setPhoneConfirmationObject] = useState(null);
-  const history = useHistory();
-
-  const handleConfirmButtonClick = () => {
-    if (!phoneIsVerified) {
-      Swal.fire({
-        icon: "info",
-        title: "Phone not verified!",
-        text: "Please verify your phone number before confirming your booking.",
-      });
-      return;
-    }
-  };
-
-  const handlePhoneVerification = async (phoneNumber) => {
-    if (!koreanPhoneRegex.test(phoneNumber)) {
-      setPhoneVerificationError("Please enter a valid Korean phone number.");
-      Swal.fire({
-        icon: "info",
-        title: "Invalid phone number!",
-        text: "Please enter a valid Korean phone number starting with +82.",
-      });
-      return;
-    }
-    setIsVerifyingPhone(true);
-    try {
-      const appVerifier = window.recaptchaVerifier;
-      const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
-      // SMS sent. Prompt user to type the code from the message, then sign the
-      // user in with confirmationResult.confirm(code).
-      setPhoneConfirmationObject(confirmationResult);
-    } catch (err) {
-      // history.go(0);
-      Swal.fire({
-        icon: "error",
-        title: "An error occurred!",
-        text: "Please refresh the page and try again.",
-      });
-    }
-  };
-
-  function handlePhoneCode(e) {
-    e.preventDefault();
-    if (!phoneConfirmationObject) {
-      //history.go(0);
-      Swal.fire({
-        icon: "error",
-        title: "An error occurred!",
-        text: "Please refresh the page and try again.",
-      });
-      return;
-    }
-    phoneConfirmationObject
-      .confirm(phoneVerificationCode)
-      .then((result) => {
-        // User signed in successfully with their phone.
-        const user = result.user; //not an admin user
-        setPhoneIsVerified(true);
-        setIsVerifyingPhone(false);
-      })
-      .catch((error) => {
-        // User couldn't sign in (bad verification code?)
-        setPhoneIsVerified(false);
-        setIsVerifyingPhone(false);
-        Swal.fire({
-          icon: "info",
-          title: "Invalid verification code!",
-          text: "Please enter a valid verification code sent to your phone.",
-        });
-      });
-  }
-
   function handleGetSlots(date) {
     onGetSlots(date);
   }
@@ -111,51 +29,6 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
     return submittedValue.valueOf() < moment().add(-1, "day") || submittedValue.valueOf() >= moment().add(31, "day");
   };
 
-  // useEffect(() => {
-  //   if (isRecaptchaVerified !== null && !isRecaptchaVerified) {
-  //     history.push("/");
-  //     return;
-  //   }
-  // }, [isRecaptchaVerified]);
-
-  // useEffect(() => {
-  //   try {
-  //     window.recaptchaVerifier = new RecaptchaVerifier(
-  //       "sign-in-button",
-  //       {
-  //         size: "invisible",
-  //         callback: (response) => {
-  //           setIsRecaptchaVerified(true);
-  //           // reCAPTCHA solved, allow signInWithPhoneNumber.
-  //           console.log("reCAPTCHA solved, allow signInWithPhoneNumber.");
-  //           //Now handlePhoneVerification(phoneNumber);
-  //         },
-  //         "expired-callback": () => {
-  //           setIsRecaptchaVerified(false);
-  //           console.log("reCAPTCHA expired");
-  //           // history.go(0);
-  //           Swal.fire({
-  //             icon: "error",
-  //             title: "An error occurred!",
-  //             text: "Please refresh the page and try again.",
-  //           });
-  //         },
-  //       },
-  //       auth
-  //     );
-
-  //     window.recaptchaVerifier.render().then(function (widgetId) {
-  //       window.recaptchaWidgetId = widgetId;
-  //     });
-  //   } catch (e) {
-  //     console.log("recapture error", e);
-  //   }
-
-  //   return () => {
-  //     window.recaptchaVerifier.clear();
-  //   };
-  // }, []);
-
   return (
     <Formik
       validationSchema={schema}
@@ -178,10 +51,7 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
           //   validated={!errors}
           onSubmit={(e) => {
             e.preventDefault();
-            if (phoneIsVerified) {
-              handleSubmit();
-            } else {
-            }
+            handleSubmit();
           }}
           className="appointmentForm mx-auto p-3 "
         >
@@ -201,44 +71,14 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
               placeholder="Phone number"
               value={values.phone}
               onChange={(e) => {
-                // setPhoneNumber("01098999793");
-                handleChange(e);
+                const value = e.target.value;
+                setFieldValue("phone", value.replace(/[^0-9+]/g, ""));
               }}
               isValid={touched.phone && !errors.phone}
             />
             <div className="text-danger font-italic">
               <ErrorMessage name="phone" />
             </div>
-            {/* {!phoneIsVerified && !isVerifyingPhone && (
-              <Button
-                id="sign-in-button"
-                onClick={() => {
-                  handlePhoneVerification(values.phone);
-                }}
-                variant="outline-primary"
-                className="mt-2 btn-sm"
-              >
-                Verify phone number!
-              </Button>
-            )}
-            {isVerifyingPhone && !phoneIsVerified && <p className="mb-0">Enter verification code on your phone</p>}
-            {phoneIsVerified && !isVerifyingPhone && <p className="text-success ">Your phone was verified successfully! </p>}
-            {isVerifyingPhone && (
-              <div className="d-flex justify-content-between">
-                <input className="form-control form-control-sm w-50" type="text" value={phoneVerificationCode} onChange={(e) => setPhoneVerificationCode(e.target.value)} />
-                <button className="btn btn-outline-primary btn-sm w-50 ms-2" onClick={(e) => handlePhoneCode(e)}>
-                  Verify code
-                </button>
-              </div>
-            )} */}
-          </Form.Group>
-
-          <Form.Group className="mb-3">
-            <Form.Label className="fw-bold">Email</Form.Label>
-            <Form.Control type="email" name="email" placeholder="Email" value={values.email} onChange={handleChange} isValid={touched.email && !errors.email} />
-            <div className="text-danger font-italic">
-              <ErrorMessage name="email" />
-            </div>
           </Form.Group>
 
           <Form.Group>
@@ -285,15 +125,7 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
           </Form.Group>
 
           <div className="d-flex justify-content-around p-2">
-            <Button
-              variant="success"
-              type="submit"
-              className="w-100 me-1"
-              // onClick={() => {
-              //   handleConfirmButtonClick();
-              // }}
-              // disabled={!phoneIsVerified}
-            >
+            <Button variant="success" type="submit" className="w-100 me-1">
               Confirm Booking
             </Button>
 
diff --git a/src/components/CheckingForm/CheckingForm.js b/src/components/CheckingForm/CheckingForm.js
@@ -30,7 +30,21 @@ const CheckingForm = ({ onConfirm, onCancel, initialPhoneNumber }) => {
             <h5 className="card-title">Enter Phone Number used to make appointment</h5>
             <form onSubmit={formik.handleSubmit}>
               <div className="form-group mb-3">
-                <input type="tel" name="phoneNumber" className={"form-control"} placeholder="Phone number" onChange={formik.handleChange} value={formik.values.phoneNumber} />
+                <input
+                  type="tel"
+                  name="phoneNumber"
+                  className={"form-control"}
+                  placeholder="Phone number"
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (value.length > 0) {
+                      formik.setFieldValue("phoneNumber", value.replace(/[^0-9+]/g, ""));
+                    } else {
+                      formik.setFieldValue("phoneNumber", value);
+                    }
+                  }}
+                  value={formik.values.phoneNumber}
+                />
                 {formik.touched.phoneNumber && formik.errors.phoneNumber && <span className="help-block text-danger">{formik.errors.phoneNumber}</span>}
               </div>
               <div className="d-flex justify-content-around ">
diff --git a/src/env.json b/src/env.json
@@ -1,5 +1,5 @@
 {
-  "current-env": "development",
+  "current-env": "production",
   "production": {
     "apiKey": "AIzaSyDyl-tV8qgWpgTMISb3M9ybaVxNPoGKuGA",
     "authDomain": "appointments-9fa9d.firebaseapp.com",
diff --git a/version.json b/version.json
@@ -1,3 +1,3 @@
 {
-  "version": "1.6.0"
+  "version": "1.8.0"
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "current-env": "development",`
	`2`	`+ "current-env": "production",`
`3`	`3`	`"production": {`
`4`	`4`	`"apiKey": "AIzaSyDyl-tV8qgWpgTMISb3M9ybaVxNPoGKuGA",`
`5`	`5`	`"authDomain": "appointments-9fa9d.firebaseapp.com",`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "version": "1.6.0"`
	`2`	`+ "version": "1.8.0"`
`3`	`3`	`}`