Create pages for book success, sign out, sign out success

client/src/pages/BookingSignOut.tsx

+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import Modal from "../components/Modal";
+
+type FormData = {
+  annotations: string;
+};
+
+function BookingSignOut() {
+  const navigate = useNavigate();
+  const { t, i18n } = useTranslation();
+  const { control, handleSubmit } = useForm<FormData>({ mode: "onBlur" });
+  const onSubmit = (data: FormData) => {
+    try {
+      /**
+       * Logic to handle booking sign out. Should be separated into a service in another file.
+       * await signOutBooking(data);
+       */
+      navigate("/signout/success");
+    } catch (e) {
+      alert("error");
+    }
+  };
+  return (
+    <Container className="pt-5">
+      <Row>
+        <Col xs={{ span: 10, offset: 1 }}>
+          <Modal>
+            <h1 className="text-center">{t("bookingSignOut.title")}</h1>
+            <p className="text-center">{t("bookingSignOut.subtitle")}</p>
+            <Form onSubmit={handleSubmit(onSubmit)}>
+              <Controller
+                name="annotations"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-4">
+                    <Form.Control
+                      as="textarea"
+                      type="text"
+                      {...field}
+                      rows={5}
+                    />
+                  </div>
+                )}
+              />
+              <Button
+                type="submit"
+                variant="secondary"
+                className="mt-2 w-100 mb-3"
+              >
+                {t("bookingSignOut.buttonSignOut")}
+              </Button>
+            </Form>
+            <p className="text-center">{t("bookingSignOut.labelButtonInfo")}</p>
+          </Modal>
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default BookingSignOut;

client/src/pages/BookingSignOutSuccess.tsx

+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import Divider from "../components/Divider";
+import Modal from "../components/Modal";
+
+function BookingSignOutSuccess() {
+  const { t, i18n } = useTranslation();
+
+  return (
+    <Container className="pt-5">
+      <Row>
+        <Col xs={{ span: 10, offset: 1 }}>
+          <Modal>
+            <h1 className="text-center">{t("bookingSignOutSuccess.title")}</h1>
+            <div className="text-center">
+              <FontAwesomeIcon
+                icon={faCheckCircle}
+                className="text-primary"
+                size="6x"
+              />
+            </div>
+            <Divider />
+            <p className="my-5">
+              {t("bookingSignOutSuccess.labelSignOutInfo")}
+            </p>
+          </Modal>
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default BookingSignOutSuccess;

client/src/pages/BookingSuccessful.tsx

+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import Divider from "../components/Divider";
+import Modal from "../components/Modal";
+
+function BookingSuccessful() {
+  const { t, i18n } = useTranslation();
+
+  return (
+    <Container className="pt-5">
+      <Row>
+        <Col xs={{ span: 10, offset: 1 }}>
+          <Modal>
+            <h1 className="text-center p-1">{t("bookingSuccessful.title")}</h1>
+            <Divider />
+            <div className="text-center m-4">
+              <FontAwesomeIcon
+                size="6x"
+                className="text-primary"
+                icon={faCheckCircle}
+              />
+            </div>
+            <div className="bg-light border p-2 mlr-4 text-center">
+              <h2 className="m-2">
+                {t("bookingSuccessful.boxImportantTitle")}
+              </h2>
+              <p>{t("bookingSuccessful.boxImportantText")}</p>
+            </div>
+          </Modal>
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default BookingSuccessful;