Skip to content

Commit

Permalink
Merge pull request #48 from untilhamza/release/v1.8.0
Browse files Browse the repository at this point in the history 
Release/v1.8.0
  • Loading branch information
@untilhamza
untilhamza committed Mar 15, 2023
2 parents aee34e4 + 0a5fbd0 commit 910619b
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 176 deletions.
178 changes: 5 additions & 173 deletions src/components/BookingForm/BookingForm.js
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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);
}
Expand All @@ -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}
Expand All @@ -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 "
>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand Down
16 changes: 15 additions & 1 deletion src/components/CheckingForm/CheckingForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ">
Expand Down
2 changes: 1 addition & 1 deletion src/env.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"current-env": "development",
"current-env": "production",
"production": {
"apiKey": "AIzaSyDyl-tV8qgWpgTMISb3M9ybaVxNPoGKuGA",
"authDomain": "appointments-9fa9d.firebaseapp.com",
Expand Down
2 changes: 1 addition & 1 deletion version.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"version": "1.6.0"
"version": "1.8.0"
}

0 comments on commit 910619b

Please sign in to comment.