comment faire un onglet de reservation

bonjour,
je souhaite réaliser pour un amis un onglet de pré-rservation pour son gîte.
En effet celui-ci voudrais qu'il y est un calendrier où le client cliquerai sur une date d'entrée et de une date de depart avec un tarif(plusieurs tarifs en fonction des saisons et des vacances) et que ces données soit envoyé sur son email.
merci de me donner des piste car je suis débutant, j'ai commencé a faire quelquechose avec react/js mais je ne suis pas convaincu du resultat.
merci d'avance.

import React, { useState } from "react";
import Calendar from "@demark-pro/react-booking-calendar";
import gite from "../assets/gitePage/gite.png";
import "./../sass/_preReserv.scss";

const Prereserv = () => {
const [selectedDates, setSelectedDates] = useState([]);
const [price, setPrice] = useState(0); // État pour stocker le prix

// Définir les dates réservées
const reserved = [
{ startDate: new Date(2023, 5, 22), endDate: new Date(2016, 5, 30) },
];

const calculatePrice = (dates) => {
// Calculer le nombre de jours sélectionnés
const startDate = new Date(dates[0]);
const endDate = new Date(dates[dates.length - 1]);
const timeDiff = Math.abs(endDate - startDate);

// Convertir en jours
const numberOfDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

//conversion des boutons debut et fin
const startDay = startDate.getDay();
const endDay = endDate.getDay();

// jours non possible
const jourNonPossible = [1, 2, 3, 5, 6];

switch (true) {
  //case semaine
  case numberOfDays === 7 && startDay === 1 && endDay === 0:
    const totalPrice1 = 3600;
    console.log("prix", totalPrice1);
    return totalPrice1;
  //case 4 premiers jours ou 3 derniers jours
  case (startDay === 1 && endDay === 4) || (startDay === 5 && endDay === 0):
    const totalPrice2 = 2280;
    console.log("prix", totalPrice2);
    return totalPrice2;

  case jourNonPossible.includes(numberOfDays):
    return alert(
      "vous devez choisir des dates comprenant une semaine complète, ou les 4 premiers jours, ou les 3 derniers jours de la semaine"
    );
  default:
    return alert(
      "vous devez choisir des dates comprenant une semaine complète, ou les 4 premiers jours, ou les 3 derniers jours de la semaine"
    );
}

{
  /* 
 // Condition pour ajuster le prix en pleine saison par semaine
  if ([7, 8].includes(startDate.getMonth())) {
  if (
    numberOfDays === 7 &&
    startDate.getDay() === 1 &&
    endDate.getDay() === 0
  ) {
    const totalPrice = 4800;
    console.log("prix", totalPrice);
    return totalPrice;
  } else if (numberOfDays<7) {
    alert("vous ne pouvez pré-reserver qu'a partir d'une semaine, le minimun est 7 jours")
  }

// Condition pour ajuster le prix hors saison par semaine
// et pour les 4 premiers jours ou les 3 derniers de la semaine
if ([9, 10, 11, 12, 1, 2, 3, 4, 5, 6].includes(startDate.getMonth())) {
  if (
    numberOfDays === 7 &&
    startDate.getDay() === 1 &&
    endDate.getDay() === 0
  ) {
    const totalPrice = 3600;
    console.log("prix", totalPrice);
    return totalPrice;
  } else if (
    (numberOfDays === 4 &&
      startDate.getDay() === 1 &&
      endDate.getDay() === 4) ||
    (numberOfDays === 3 &&
      startDate.getDay() === 5 &&
      endDate.getDay() === 0)
  ) {
    const totalPrice = 2280;
    console.log("prix", totalPrice);
    return totalPrice;
  }
}
*/
}

};

// selection des dates pour afficher le prix
const handleChange = (dates) => {
setSelectedDates(dates);
console.log("dates:", dates);
const totalPrice = calculatePrice(dates); // Passer les dates sélectionnées à calculatePrice
console.log("Updated price:", totalPrice); // Vérifier la mise à jour du prix
setPrice(totalPrice);
};

// Définir le prix HT comme état
const [priceHT, setPriceHT] = useState(0);

// Evenement sur la Checkbox
const handleCheckboxChange = (e) => {
const isChecked = e.target.checked;
if (isChecked) {
// Calculer le prix HT en soustrayant la TVA (20%) du prix total
const totalPriceHT = price * 0.8; // Soustraire 20% du prix total
setPriceHT(totalPriceHT);
console.log("Prix HT:", totalPriceHT);
} else {
// Si la case est décochée, réinitialiser le prix HT à 0
setPriceHT(0);
}
};

// reinitialiser le calendrier
const handleReset = () => {
setSelectedDates([]);
setPrice(0);
setPriceHT(0);
};

return (
<>
<main>
<div className="backgroundImageContainer">
<img src={gite} alt="gite" className="backgroundImage" />
<div className="buttonContainer"></div>
</div>

    <h2 className="mt-2">Pré-Réserver votre Séjour</h2>
    <div className="d-flex justify-content-center">
      <hr className="separator" />
    </div>

    <section className="container-fluid">
      <div className="row">
        {/*------------------bloc1----------------*/}
        <div className="col-md bg-primary">
          {/*------------------Calendrier----------------*/}
          <section className="calendar">
            <div className="calendarContainer">
              <Calendar
                selected={selectedDates}
                onChange={handleChange}
                onOverbook={(e, err) => alert(err)}
                components={{
                  DayCellFooter: ({ innerProps }) => (
                    <div {...innerProps}>dispo</div>
                  ),
                  DayCellHeader: ({ innerProps }) => (
                    <div className="dayCellHeader" {...innerProps}></div>
                  ),
                }}
                disabled={(date, state) => !state.isSameMonth}
                reserved={reserved}
                variant="events"
                dateFnsOptions={{ weekStartsOn: 1 }}
                range={true}
              />
            </div>
            <button onClick={handleReset}>Réinitialiser</button>
            {/*------Prix TTC-------*/}
            <div className="cadres mt-2">
              <p>PRIX TTC : {price}€</p>
            </div>
            {/*------checkbox Prix HT-------*/}
            <div>
              <p>
                Convertir le prix en HT
                <input
                  type="checkbox"
                  className="checkboxHt"
                  onChange={handleCheckboxChange}
                />
                PRIX HT : {priceHT}€
              </p>
            </div>
            {/*------Nos prix comprennent-------*/}
            <div className="comprend">
              <p className="mt-2">
                Nos prix comprennent :<br />
                - Le linge de maison <br />- Le ménage en fin de séjour
              </p>
            </div>
          </section>
        </div>
        {/*------------------bloc2----------------*/}
        <div className="col-md bg-danger">
          <div className="bloc2">Contenu du bloc 2</div>
        </div>
        {/*------------------fin----------------*/}
      </div>
    </section>
  </main>
</>

);
};

export default Prereserv;