diff --git a/src/components/BookingForm/BookingForm.js b/src/components/BookingForm/BookingForm.js index 55d785a..35b2649 100644 --- 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 ( { 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} />
- {/* {!phoneIsVerified && !isVerifyingPhone && ( - - )} - {isVerifyingPhone && !phoneIsVerified &&

Enter verification code on your phone

} - {phoneIsVerified && !isVerifyingPhone &&

Your phone was verified successfully!

} - {isVerifyingPhone && ( -
- setPhoneVerificationCode(e.target.value)} /> - -
- )} */} - - - - Email - -
- -
@@ -285,15 +125,7 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
- diff --git a/src/components/CheckingForm/CheckingForm.js b/src/components/CheckingForm/CheckingForm.js index 2f483cb..4d21ee2 100644 --- a/src/components/CheckingForm/CheckingForm.js +++ b/src/components/CheckingForm/CheckingForm.js @@ -30,7 +30,21 @@ const CheckingForm = ({ onConfirm, onCancel, initialPhoneNumber }) => {
Enter Phone Number used to make appointment
- + { + 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 && {formik.errors.phoneNumber}}
diff --git a/src/env.json b/src/env.json index bfe7257..59b11e4 100644 --- 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 index d5d8ca8..78259a4 100644 --- a/version.json +++ b/version.json @@ -1,3 +1,3 @@ { - "version": "1.6.0" + "version": "1.8.0" }