All the code from the sample

Final Code of Index.js

Final Code of App.js

Final Code of AppRoutes.js

import Delete from "./components/Delete";
import Details from "./components/Details";
import DetailsFree from "./components/DetailsFree";
import Form from "./components/Form";
import Home from "./components/Home";
import Recap from "./components/Recap";
import TicketSelect from "./components/TicketSelect";

const AppRoutes = [
  {
    index: true,
    element: <Home />
    },
    {
        path: "/home",
        element: <Home/>
    },
    {   //path: /UrlPart/:params
        path: "/ticket/:eventId/:orderId",
        element: <TicketSelect />
    },
    {
        path: "/form/:orderId/:eventId",
        element: <Form />
    },
    {
        path: "/details/:orderId/:eventId",
        element: <Details/>
    },
    {
        path: "/detail/:orderId/:eventId",
        element: <DetailsFree/>
    },
    {
        path: "/recap/:orderId/:eventId",
        element: <Recap />
    },
    {
        path: "delete/:orderId/:eventId",
        element: <Delete/>
    }

];

export default AppRoutes;

Final Code of setupProxy.js

Final Code of BearerTokenController.cs

using IdentityModel.Client;
using Microsoft.AspNetCore.Mvc;

namespace Developer_Site_Example_Bookingform.Controllers
{
    public class BearerTokenController
    {
        #region constructor

//Here we create any variables or Objects needed

private readonly HttpClient _client;

private readonly ILogger<BearerTokenController> _logger;
        public BearerTokenController(IConfiguration configuration) 
        {
            _client = new HttpClient
            {
                //Address for the Authentication-creation
                BaseAddress = new Uri("https://accounts.ticketino.com/connect/token"),

//against spam
                Timeout = TimeSpan.FromSeconds(10)
            };
        }

#endregion

#region Get Bearer-Token static
        [HttpGet]
        [Route("/token/get")]
        public async Task<string> GetBearerToken()
        {
            // request token
            var tokenResponse = await _client.RequestPasswordTokenAsync(new PasswordTokenRequest
            {
                //hardcoded variable for Token request on database, need to be changed
                Address = _client.BaseAddress.ToString(),
                ClientId = "public-access-api",
                UserName = "asda@ticketino.com",
                Password = "asda",
                Scope = "api openid"
            });

if (tokenResponse.IsError)
            {
                //If an Error occurs on our End

return "error" + _client.BaseAddress ; //This string can be anything you want 
            }

//Succesfull creation of BearerToken
            return tokenResponse.AccessToken;
        }

#endregion

}
}

Final Code of Home.js

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Form() {
//Variables

//hard coded
    const baseUrl = "https://localhost:44318";
    const maxIdleTime = 10;
    const { orderId, eventId } = useParams();
    let navigate = useNavigate();

//mutateable

//address var
    const [userGender, setUserGender] = useState("");
    const [userFirstname, setUserFirstname] = useState("");
    const [userFamilyname, setUserFamilyname] = useState("");
    const [userEmail, setUserEmail] = useState("");
    const [userStreet, setUserStreet] = useState("");
    const [userPlace, setUserPlace] = useState("");
    const [userPLZ, setUserPLZ] = useState("");
    const [userCountryId, setUserCountryId] = useState();
    const [userAcceptAGB, setUserAcceptAGB] = useState(false);
        //country var
    const [countryArray, setCountryArray] = useState([]);
    const [showDropdown, setShowDropDown] = useState(false);

//validates variables and needed accepted clauses
    const isInvalid =
        userGender !== "" &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userFirstname) &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userFamilyname) &&
        userEmail.includes("@") && 
        /^([a-z A-Z0-9öéàäèü -]{1,70})$/.test(userStreet) &&
        /^([a-z A-Z0-9öéàäèü]{1,70})$/.test(userPLZ) &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userPlace) &&
        userCountryId !== "" &&
        userAcceptAGB !== false;

//Methodes
    useEffect(() => {
        //Check Token existance
        let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {

axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

getLanguages();

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

}).catch((error) => {

});
        } else {

axios.defaults.headers.common['Authorization'] = "Bearer " + token;

getLanguages();

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {  }).catch((error) => { navigate("/home") });

}

}, []);

function needsPayment() {
        axios.get(`${baseUrl}/Order/${orderId}`).then((result) => {

if (result.data.total > 0) {
                nextPage(true);
            } else {
                nextPage(false);
            }
        }).catch(() => {

});
    }

function getLanguages() {

//retrives the language of the user, can be made URl dependent if wanted
        var language = window.navigator.userLanguage || window.navigator.language;

//gets countries in corresponding language
        axios.get(`${baseUrl}/Countries?languageCode= + ${language.slice(0, 2)}`).then((result) => {

let countries = result.data;

//first add switzerland, germany and austria
            const indexCH = countries.findIndex(c => c.id === 176);
            const ch = countries[indexCH];
            countries.splice(indexCH, 1);

var indexDE = result.data.findIndex(c => c.id === 229);
            const de = countries[indexDE];
            countries.splice(indexDE, 1);

var indexAU = result.data.findIndex(c => c.id === 228);
            const au = countries[indexAU];
            countries.splice(indexAU, 1);

countries.unshift({ id: 0, name: "---------" });
            countries.unshift(au);
            countries.unshift(de);
            countries.unshift(ch);

setCountryArray(result.data);

setShowDropDown(true);

}).catch(() => {

})

}

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);
        const currentDate = new Date();
        //return value 
        if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateAGBAccept() {
        //if accepted to disabled and the opposite
        // true => false, false => true
        if (userAcceptAGB) {
            setUserAcceptAGB(false);
        } else {
            setUserAcceptAGB(true);
        }
    }

function setAddressAndProceed() {

if (checkIdleTime) {

let addAddressBody = {
                "salutation": userGender,
                "firstName": userFirstname,
                "name": userFamilyname,
                "street": userStreet,
                "postCode": userPLZ,
                "city": userPlace,
                "email": userEmail,
                "countryId": userCountryId,
            };

axios.put(`${baseUrl}/Order/${orderId}/Address`, addAddressBody).then((res) => {
                
                localStorage.setItem("lastInteraction", new Date());

needsPayment();

});

} else {
            //move userback to event Select
            alert("The max idle time has been reached, your order has been cancelled");
            navigate("/home");
            
        }
    }

function nextPage(needsPayment) {

if (needsPayment) {
            //for payment needed tickets
            navigate(`/details/${orderId}/${eventId}`);

} else {
            //for free Tickets
            navigate(`/detail/${orderId}/${eventId}`);

}
    }

function previousPage() {
        navigate(`/ticket/${orderId}/${eventId}`)
    }

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="section">
                <div className="box-main row">
                    <div className="firstHalf">
                        <div>
                            <h1 className="text titleStyle text-start text-center">Ticket Selector</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the tickets you wish to book!
                            </p>
                        </div>
                    </div>
                    <div className="container">
                        <div className="mb-4 row">
                            <label className="col-sm-3 col-md-2 col-12 text text-light">
                                Gender*
                            </label>
                            <div className="col-md-8 col-sm-8 col-8 ms-2 row">
                                <div className="form-check col-4">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        value="male"
                                        id="flexCheckDefault"
                                        onChange={(event) => {
                                            setUserGender(event.currentTarget.value);
                                        }}
                                    />
                                    <label className="form-check-label " htmlFor="flexCheckDefault">
                                        Male
                                    </label>
                                </div>
                                <div className="form-check col-4 ms-4">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        value="female"
                                        id="flexCheckDefault"
                                        onChange={(event) => {
                                            setUserGender(event.currentTarget.value);

}}
                                    />
                                    <label className="form-check-label" htmlFor="flexCheckDefault">
                                        Female
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Firstname*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="firstname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserFirstname(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Familyname*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserFamilyname(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            E-Mail*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                placeholder="Example@gmail.com"
                                onChange={(event) => {
                                    setUserEmail(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Street*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserStreet(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Place*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserPlace(event.currentTarget.value);
                                }}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            PLZ*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserPLZ(event.currentTarget.value);
                                }}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">Land*</label>
                        <div className="col-sm-8 me-3">
                            {showDropdown && countryArray ?
                                <div>
                                    <select
                                        className="selectNum form-select col-sm-8 col-md-8 col-16"
                                        aria-label="Default select example"
                                        onChange={(event) => setUserCountryId(event.target.value)}
                                    >
                                        <option defaultValue="null" ></option>
                                        {countryArray.map((value, key) => {
                                            return (
                                                <option key={key} value={value.id}>{value.name}</option>
                                            )
                                        })}
                                    </select>
                                </div>
                                : null}
                        </div>
                    </div>
                    <div className="form-check mb-4">
                        <input onChange={() => updateAGBAccept()}
                            className="cb3 form-check-input"
                            name="AcceptAGB"
                            type="checkbox"
                            id="AGBcheckbox"
                        />
                        <label className="form-check-label text text-light" htmlFor="flexCheckDefault">
                           Accept AGB*
                        </label>
                    </div>
                    <div className="flex-end">
                        <button className="btn button btn-light" disabled={!isInvalid } onClick={() => { setAddressAndProceed()}} >
                            Procced
                        </button>
                        <button className="btn mx-2 button btn-light" onClick={() => { previousPage()}} >
                            Previous
                        </button>
                    </div>
                </div>
            </section>
        </div>

)

}

export default Form;

Final Code of TicketSelect.js

import { useEffect, useState } from "react";
import { useParams } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
import axios from 'axios'

function TicketSelect() {
//variables

//hard coded
    const baseUrl = "https://localhost:44318";
    let navigate = useNavigate();

//mutateable
    const { eventId, orderIdParameter } = useParams(); //retrives eventId from the URL parameter
    const [fullTicketObjects, setFullTicketObjects] = useState([]); //TicketInformation
    const [ticketObjectRemoval, setTicketObjecktRemoval] = useState([]);
    const [quantityObject, setQuantityObject] = useState([]); //Needed Information to Add ticket to basket

//Methodes

//Token exist check
    useEffect(() => {

//reset objects
        setFullTicketObjects([]);

let token = localStorage.getItem("token");

//checks if there is an existing token, if not gets a new one
        if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

getFullTicketTypeObject(eventId);

}).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

getFullTicketTypeObject(eventId);

}

}, []);

//TicketType retrival
    function getFullTicketTypeObject(eventId) {

axios.get(`${baseUrl}/Event/${eventId}/TicketTypes`).then((result) => {

//loop to get TicketTypeInfo
            result.data.ticketTypes?.map((ticketType) => {
                axios.get(`${baseUrl}/TicketType/${ticketType.id}/Infos`).then((result) => {

let i = 0
                    let iArray = [];
                    while (i <= ticketType.maxNumberOfTicketsPerOrder) {
                        iArray.push(i);
                        i++;
                    }

let fullTicketTypeObject = {
                        "ticketType": ticketType,
                        "ticketTpyeInfo": result.data.ticketTypeInfos[0],
                        "maxAmount" : iArray,
                    };

let ticketRemovalObject = {
                        "ticketTypeId": ticketType.id,
                        "quantity" : 0,
                    }

setFullTicketObjects((current) => [...current, fullTicketTypeObject]);
                    setTicketObjecktRemoval((current) => [...current, ticketRemovalObject]);

}).catch((error) => {

});
            });
           
        }).catch((error) => {

});
    };

function changeAmountHandler(amount, ticketTypeIdGiven) {
        //copy current object array
        let objectArray = ticketObjectRemoval;

let changedTicketType = {
            "ticketTypeId": ticketTypeIdGiven,
            "quantity": amount,
        }
        //Get index of to be removed object
        const index = objectArray.map(object => object.ticketTypeId).indexOf(ticketTypeIdGiven);

//splice syntax : .splice(indexOfObject, amount, newItem);
        objectArray.splice(index, 1, changedTicketType);

setQuantityObject(objectArray);

}

//creates the basket
    function proceedNextPage() {

if (orderIdParameter !== undefined) {

addTicket(orderIdParameter);

} else {

let createBasketBody = {
                "currency": "CHF",
                "tenantId": 1,
                "pointOfSaleId": 6585,
            };

axios.post(`${baseUrl}/ShopBasket/Order/`, createBasketBody).then((result) => {
                //to have access from following pages
                //needed for checking idle time
                localStorage.setItem("lastInteraction", new Date());

addTicket(result.data.id);

}).catch((result) => {

});
        }
        
    }

function returnToPreviousPage() {
        navigate("/home");
    }

function addTicket(orderId) {

//loop through all objects and add Ticket with their corresponding amount to the ShopBasket
        quantityObject?.map((object) => {
            if (object.quantity > 0) {

let ticketToAddBody = {
                    ticketsToAdd: [
                        {
                            "ticketTypeId": object.ticketTypeId,
                            "quantity": object.quantity,
                        }
                    ]
                };

axios.post(`${baseUrl}/ShopBasket/Order/${orderId}/Tickets`, ticketToAddBody).then((result) => {

leavePage(orderId)

}).catch((error) => {

});
            }
        });

}

function leavePage(orderId) {
        //Add any needed actions here before user leaves page

navigate(`/form/${orderId}/${eventId}`);

}

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="sectionTicket">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Ticket Selector</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the tickets you wish to book!
                            </p>
                        </div>
                        <div className="container">
                            {
                                fullTicketObjects?.sort((a, b) => a.ticketTpyeInfo.name.localeCompare(b.ticketTpyeInfo.name)).map((fullTicketObject, key) => {
                                    //map and display, every wanted part of fullTicketTypeObject

//can be extended for any kind of information
                                    return (
                                        <div className="ticketObjectDiv mb-3 p-3 border border-white" key={key}>
                                            <h3 className="mb-4  text text-light text-center">{fullTicketObject.ticketTpyeInfo.name}</h3>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketTpyeInfo.description}
                                            </div>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketType.price } {fullTicketObject.ticketType.currency}
                                            </div>

<div className="col-2 "></div>
                                                <div className="col-8 ">
                                                    <select
                                                        className="selectNum form-select"
                                                        aria-label=""
                                                        placeholder="Select Amount"
                                                        onChange={(e) => { changeAmountHandler(e.currentTarget.value, fullTicketObject.ticketType.id) }}
                                                    >
                                                        <option defaultValue=""></option>
                                                        {fullTicketObject.maxAmount.map((value, key) => {
                                                            //map through allowed values for selection
                                                            return (
                                                                <option value={value} key={key}>{value}</option>
                                                            )
                                                        })

}
                                                    </select>
                                                </div>

<div className="col-2"></div>
                                            </div>
                                            <></>
                                        </div>
                                    )
                                })
                            }
                            <></>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { proceedNextPage() }}>Proceed</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { returnToPreviousPage() }}>Return</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        
    )
}

export default TicketSelect;

Final Code of Form.js

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Form() {
//Variables

//hard coded
    const baseUrl = "https://localhost:44318";
    const maxIdleTime = 10;
    const { orderId, eventId } = useParams();
    let navigate = useNavigate();

//mutateable

//address var
    const [userGender, setUserGender] = useState("");
    const [userFirstname, setUserFirstname] = useState("");
    const [userFamilyname, setUserFamilyname] = useState("");
    const [userEmail, setUserEmail] = useState("");
    const [userStreet, setUserStreet] = useState("");
    const [userPlace, setUserPlace] = useState("");
    const [userPLZ, setUserPLZ] = useState("");
    const [userCountryId, setUserCountryId] = useState();
    const [userAcceptAGB, setUserAcceptAGB] = useState(false);
        //country var
    const [countryArray, setCountryArray] = useState([]);
    const [showDropdown, setShowDropDown] = useState(false);

//validates variables and needed accepted clauses
    const isInvalid =
        userGender !== "" &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userFirstname) &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userFamilyname) &&
        userEmail.includes("@") && 
        /^([a-z A-Z0-9öéàäèü -]{1,70})$/.test(userStreet) &&
        /^([a-z A-Z0-9öéàäèü]{1,70})$/.test(userPLZ) &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userPlace) &&
        userCountryId !== "" &&
        userAcceptAGB !== false;

//Methodes
    useEffect(() => {
        //Check Token existance
        let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {

axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

getLanguages();

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

}).catch((error) => {

});
        } else {

axios.defaults.headers.common['Authorization'] = "Bearer " + token;

getLanguages();

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {  }).catch((error) => { navigate("/home") });

}

}, []);

function needsPayment() {
        axios.get(`${baseUrl}/Order/${orderId}`).then((result) => {

if (result.data.total > 0) {
                nextPage(true);
            } else {
                nextPage(false);
            }
        }).catch(() => {

});
    }

function getLanguages() {

//retrives the language of the user, can be made URl dependent if wanted
        var language = window.navigator.userLanguage || window.navigator.language;

//gets countries in corresponding language
        axios.get(`${baseUrl}/Countries?languageCode= + ${language.slice(0, 2)}`).then((result) => {

let countries = result.data;

//first add switzerland, germany and austria
            const indexCH = countries.findIndex(c => c.id === 176);
            const ch = countries[indexCH];
            countries.splice(indexCH, 1);

var indexDE = result.data.findIndex(c => c.id === 229);
            const de = countries[indexDE];
            countries.splice(indexDE, 1);

var indexAU = result.data.findIndex(c => c.id === 228);
            const au = countries[indexAU];
            countries.splice(indexAU, 1);

countries.unshift({ id: 0, name: "---------" });
            countries.unshift(au);
            countries.unshift(de);
            countries.unshift(ch);

setCountryArray(result.data);

setShowDropDown(true);

}).catch(() => {

})

}

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);
        const currentDate = new Date();
        //return value 
        if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateAGBAccept() {
        //if accepted to disabled and the opposite
        // true => false, false => true
        if (userAcceptAGB) {
            setUserAcceptAGB(false);
        } else {
            setUserAcceptAGB(true);
        }
    }

function setAddressAndProceed() {

if (checkIdleTime) {

let addAddressBody = {
                "salutation": userGender,
                "firstName": userFirstname,
                "name": userFamilyname,
                "street": userStreet,
                "postCode": userPLZ,
                "city": userPlace,
                "email": userEmail,
                "countryId": userCountryId,
            };

axios.put(`${baseUrl}/Order/${orderId}/Address`, addAddressBody).then((res) => {
                
                localStorage.setItem("lastInteraction", new Date());

needsPayment();

});

} else {
            //move userback to event Select
            alert("The max idle time has been reached, your order has been cancelled");
            navigate("/home");
            
        }
    }

function nextPage(needsPayment) {

if (needsPayment) {
            //for payment needed tickets
            navigate(`/details/${orderId}/${eventId}`);

} else {
            //for free Tickets
            navigate(`/detail/${orderId}/${eventId}`);

}
    }

function previousPage() {
        navigate(`/ticket/${orderId}/${eventId}`)
    }

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="section">
                <div className="box-main row">
                    <div className="firstHalf">
                        <div>
                            <h1 className="text titleStyle text-start text-center">Ticket Selector</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the tickets you wish to book!
                            </p>
                        </div>
                    </div>
                    <div className="container">
                        <div className="mb-4 row">
                            <label className="col-sm-3 col-md-2 col-12 text text-light">
                                Gender*
                            </label>
                            <div className="col-md-8 col-sm-8 col-8 ms-2 row">
                                <div className="form-check col-4">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        value="male"
                                        id="flexCheckDefault"
                                        onChange={(event) => {
                                            setUserGender(event.currentTarget.value);
                                        }}
                                    />
                                    <label className="form-check-label " htmlFor="flexCheckDefault">
                                        Male
                                    </label>
                                </div>
                                <div className="form-check col-4 ms-4">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        value="female"
                                        id="flexCheckDefault"
                                        onChange={(event) => {
                                            setUserGender(event.currentTarget.value);

}}
                                    />
                                    <label className="form-check-label" htmlFor="flexCheckDefault">
                                        Female
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Firstname*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="firstname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserFirstname(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Familyname*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserFamilyname(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            E-Mail*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                placeholder="Example@gmail.com"
                                onChange={(event) => {
                                    setUserEmail(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Street*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserStreet(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Place*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserPlace(event.currentTarget.value);
                                }}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            PLZ*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserPLZ(event.currentTarget.value);
                                }}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">Land*</label>
                        <div className="col-sm-8 me-3">
                            {showDropdown && countryArray ?
                                <div>
                                    <select
                                        className="selectNum form-select col-sm-8 col-md-8 col-16"
                                        aria-label="Default select example"
                                        onChange={(event) => setUserCountryId(event.target.value)}
                                    >
                                        <option defaultValue="null" ></option>
                                        {countryArray.map((value, key) => {
                                            return (
                                                <option key={key} value={value.id}>{value.name}</option>
                                            )
                                        })}
                                    </select>
                                </div>
                                : null}
                        </div>
                    </div>
                    <div className="form-check mb-4">
                        <input onChange={() => updateAGBAccept()}
                            className="cb3 form-check-input"
                            name="AcceptAGB"
                            type="checkbox"
                            id="AGBcheckbox"
                        />
                        <label className="form-check-label text text-light" htmlFor="flexCheckDefault">
                           Accept AGB*
                        </label>
                    </div>
                    <div className="flex-end">
                        <button className="btn button btn-light" disabled={!isInvalid } onClick={() => { setAddressAndProceed()}} >
                            Procced
                        </button>
                        <button className="btn mx-2 button btn-light" onClick={() => { previousPage()}} >
                            Previous
                        </button>
                    </div>
                </div>
            </section>
        </div>

)

}

export default Form;

Final Code of DetailsFree.js

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function DetailsFree() {
//Variables

const { orderId, eventId } = useParams();
    let navigate = useNavigate();
    const baseUrl = "https://localhost:44318";
    const maxIdleTime = 10;

const [userDeliveryMethod, setUserDeliveryMethod] = useState();

//Array of possible selections
    const delivery = [
        { "display": "Print at home", "value": 1 },
        { "display": "Post mail", "value": 2 },
        { "display": "Print and handout manually", "value": 3 },
    ];

//Methods
    useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

}).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });
        }

}, []);

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);;
        const currentDate = new Date();

if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateDetails() {

if (checkIdleTime()) {
            setDeliviery();

nextPage();
        } else {
            navigate("/home");
        }

}

function setDeliviery() {
        axios.put(`${baseUrl}/ShopBasket/Order/DeliveryMethod/${userDeliveryMethod}`).then((result) => {
            localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function nextPage() {

updateDetails();
        navigate(`/recap/${orderId}/${eventId}`);
    }

function previousPage() {
        navigate(`/form/${orderId}/${eventId}`);
    }

//HTML Display

return (
        <div className="page-container">
            <section className="section" id="sectionHome">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Detail</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the detail-information, you whish for your transaction to upheld!
                            </p>
                        </div>
                        <div className="container">
                            <div className="deliveryDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished Deliverymethod</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => { setUserDeliveryMethod(e.currentTarget.value) }}
                                    >
                                        <option defaultValue="CHF">CHF</option>
                                        {delivery.map((object, key) => {
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })

}
                                    </select>
                                </div>
                                <></>
                            </div>

</div>
                    </div>
                    <div className="flex-end">
                        <button className="btn button btn-light" onClick={() => { updateDetails() }} >
                            Procced
                        </button>
                        <button className="btn mx-2 button btn-light" onClick={() => { previousPage() }} >
                            Previous
                        </button>
                    </div>
                </div>
            </section>
        </div>
    )
}

export default DetailsFree;

Final Code of Details.js

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Details() {
    //Variables

const { orderId, eventId } = useParams();
    let navigate = useNavigate();
    const baseUrl = "https://localhost:44318";
    const maxIdleTime = 10;

const [userCurrencySelect, setUserCurrencySelect] = useState();
    const [userDeliveryMethod, setUserDeliveryMethod] = useState();
    const [userPaymentMethod, setUserPaymentMethod] = useState();

//Array of possible selections
    const currency = [
        { value: "CHF", display: "CHF" },
        { value: "EUR", display: "EUR" },
        { value: "USD", display: "USD" },
        { value: "GBP", display: "GBP" },
    ]

const delivery = [
        { "display": "Print at home", "value": 1 },
        { "display": "Post mail", "value": 2 },
        { "display": "Print and handout manually", "value": 3 },
    ];

const payment = [

{ "display": "Mastercard", "value": 1 },
        { "display": "Invoice", "value": 2 },
        { "display": "Reservation", "value": 3 },
        { "display": "Organizer", "value": 4 },
        { "display": "Free", "value": 5 },
        { "display": "Point of Sale", "value": 6 },
        { "display": "Visa", "value": 7 },
        { "display": "Amex", "value": 8 },
        { "display": "Postfinance", "value": 9 },
        { "display": "Paypal", "value": 10 },
        { "display": "Sofort", "value": 11 },
        { "display": "SepaDirectDebit", "value": 12 },
        { "display": "Creditcard on site", "value": 13 },
        { "display": "Twint", "value": 14 },
        { "display": "External Payment", "value": 15 },
        
    ]

//Methods
    useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });
            }).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });
        }

}, []);

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);;
        const currentDate = new Date();

if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateDetails() {

if (checkIdleTime()) {

setCurrency();
            setPayment();
            setDeliviery();
            nextPage();

} else {
            navigate("/home");
        }
    }

function setCurrency() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/Currency/${userCurrencySelect}`).then((result) => {

localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function setPayment() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/PaymentType/${userPaymentMethod}`).then((result) => {

localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function setDeliviery() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/DeliveryMethod/${userDeliveryMethod}`).then((result) => {

localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function nextPage() {

navigate(`/recap/${orderId}/${eventId}`);
    }

function previousPage() {
        navigate(`/form/${orderId}/${eventId}`);
    }

//HTML Display

return (
        <div className="page-container">
            <section className="section" id="sectionHome">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Details</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the detail-information, you whish for your transaction to upheld!
                            </p>
                        </div>
                        <div className="container">
                            <div className="currencyDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished currency</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => {setUserCurrencySelect(e.currentTarget.value)}}
                                    >
                                        <option defaultValue=""></option>
                                        {currency.map((object, key) => {
                                            //map through allowed values for selection
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })
                                        }
                                    </select>
                                </div>
                            </div>
                            <></>
                            <div className="paymentDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished paymentmethod</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => { setUserPaymentMethod(e.currentTarget.value) }}
                                    >
                                        <option defaultValue=""></option>
                                        {payment.map((object, key) => {
                                            //map through allowed values for selection
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })

}
                                    </select>
                                </div>
                            </div>
                            <></>
                            <div className="deliveryDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished deliverymethod</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => { setUserDeliveryMethod(e.currentTarget.value) }}
                                    >
                                        <option defaultValue=""></option>
                                        {delivery.map((object, key) => {
                                            //map through allowed values for selection
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })}
                                    </select>
                                </div>
                            </div>                           
                            <div className="flex-end">
                                <button className="btn button btn-light" onClick={() => { updateDetails() }} >
                                    Procced
                                </button>
                                <button className="btn mx-2 button btn-light" onClick={() => { previousPage() }} >
                                    Previous
                                </button>
                            </div>

</div>
                    </div>
                </div>
            </section>
        </div>
    )
}

export default Details;

Final Code of Delete.js

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import axios from "../../../../node_modules/axios/index";
import { useNavigate } from 'react-router-dom';

function Delete() {
//Variables

const { orderId, eventId } = useParams();
    const baseUrl = "https://localhost:44318";
    let navigate = useNavigate();

const [orderInformation, setOrderInformation] = useState();
    const [ticketTpyeInfo, setTicketTypeInfo] = useState([]);
    const [ticketInBasket, setTicketInBasket] = useState([]);

//Methodes

useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

//To be made calls for display
                getInformation();
            }).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

getInformation();

}

}, []);

function addTicketPage() {
        navigate(`/ticket/${eventId}/${orderId}`)
    }

function backtoRecap() {

navigate(`/recap/${orderId}/${eventId}`);
    }

function getInformation() {
        axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {

setOrderInformation(result.data);
            setTicketInBasket(result.data.tickets);

let objectId = [];

result.data.tickets.map((object) => {

if (objectId.some(existingObject => {
                    if (existingObject.id === object.id) { return true }
                })) {

} else {
                    objectId.push(object.id)
                }

});

objectId.map((object) => {
                axios.get(`${baseUrl}/TicketTpye/${object.id}/Infos`).then((result) => {

setTicketTypeInfo((current) => [...current, result]);

})
            })
        });
    }

function deleteTicketFromOrder(TicketTpyeId) {
        let deleteTicktetBody = {
            "ticketsToRemove": [
                TicketTpyeId
            ]
        };

axios.delete(`${baseUrl}/ShopBasket/Order/${orderId}/Tickets`, deleteTicktetBody).then((result) => {
            getInformation();
        })
    }

//HTML Display

return (
        <div className="page-container">
            <section className="section" id="sectionTicket">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Ticket Delete</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the tickets you wish to book!
                            </p>
                        </div>
                        <div className="container">
                            {
                                ticketTpyeInfo?.map((fullTicketObject, key) => {
                                    //map and display, every wanted part of fullTicketTypeObject

//can be extended for any kind of information
                                    return (
                                        <div className="ticketObjectDiv mb-3 p-3 border border-white" key={key}>
                                            <h3 className="mb-4  text text-light text-center">{fullTicketObject.name}</h3>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.description}
                                            </div>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketType.price} {fullTicketObject.currency}
                                            </div>

<div className="col-2 "></div>
                                                <div className="col-8 ">
                                                    <button className="btn button btn-light" onClick={() => { deleteTicketFromOrder(fullTicketObject.id) }}>Delete Ticket</button>

</div>
                                                <div className="col-2"></div>
                                            </div>
                                            <></>
                                        </div>
                                    )
                                })
                            }
                            <></>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { backtoRecap() }}>Back to Recap</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { addTicketPage() }}>Add Tickets</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

)
}

export default Delete;

Final Code of Recap.js

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Recap() {
//Variables
    const { orderId, eventId } = useParams();
    const baseUrl = "https://localhost:44318";
    let navigate = useNavigate();
    const maxIdleTime = 10;

const [orderInformation, setOrderInformation] = useState();
    const [address, setAddress] = useState();

const handledByDatatrans = [1, 7, 8, 9, 10, 11, 12, 14];
    const handledByTicketino = [2, 4, 5, 6];

//Methods

useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {

axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//To be made calls for display
                retriveOrderInformation();

}).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display
            retriveOrderInformation();
        }

}, []);
    function removeTicket() {

navigate(`/delete/${orderId}/${eventId}`)
    }
    function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);;
        const currentDate = new Date();

if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function retriveOrderInformation() {

if (checkIdleTime()) {

axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {

setOrderInformation(result.data);

}).catch((error) => {
                //if order doesnt exist anymore, if someone entered via url

navigate("/home");
            });

axios.get(`${baseUrl}/Order/${orderId}/Address`).then((result) => {

setAddress(result.data);
            }).catch((error) => {

});
        } else {
            navigate("/home");
            
        }
        
    }

function confirmOrder() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/Confirm`).then((result) => { navigate("/home") }).catch((error) => { });
    }

function finalStep() {
        if (orderInformation.totalPrice > 0) {

//check if paymentType is handled by Ticektino or Datatrans
            if (handledByDatatrans.includes(orderInformation.paymentMethodId)) {
                //Datatrans start
                startDatatrans();
            }
            else if (handledByTicketino.includes(orderInformation.paymentMethodId)) {
            }
        } else if (orderInformation.totalPrice = 0) {

}
    }

function returnToPreviousPage() {
        navigate(`form/${orderId}/${eventId}`);
    }

function startDatatrans() {
        //this will start the pop-up of the datatrans

axios
            .get(`https://localhost:44336/Datatrans/${orderId}/DigitalSignature`)
            .then((res) => {
                let element = document.getElementById("paymentForm");

//For showcase only, for real code include comment below and remove the data within the <form>
                // element.setAttribute("data-merchant-id", res.data.merchantId);
                element.setAttribute("data-amount", res.data.amount);
                element.setAttribute("data-currency", res.data.currency);
                element.setAttribute("data-refno", res.data.referenceNumber);
                element.setAttribute("data-reqType", res.data.reqType);
                element.setAttribute(
                    "data-upp-return-target",
                    res.data.uppReturnTarget
                );
                element.setAttribute("data-paymentMethod", res.data.paymentMethod);
                element.setAttribute("data-sign", res.data.digitalSignature);

for (const key in res.data.userInfo) {
                    element.setAttribute(key, res.data.userInfo[key]);
                }

for (const key in res.data.merchantSpecificParameters) {
                    element.setAttribute(key, res.data.merchantSpecificParameters[key]);
                }

// start datatrans
                startDatatransPayment();
            });
    }

function startDatatransPayment() {
        window.Datatrans.startPayment({
            form: "#paymentForm",
        });
    }

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="sectionTicket">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Your information</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please confirm your information if they are correct!
                            </p>
                        </div>
                        <div className="container">
                            <div>
                                <div className="row">
                                    <label className="col-2 text text-light"><h6>Firstname:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.firstName}</p>
                                    </div>
                                </div>
                                <></>
                                <div className="row">
                                    <label className="col-2 text text-light"><h6>Lastname:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.name}</p>
                                    </div>

</div>

<></>
                                <div className="row">

<label className="col-2 text text-light "><h6>Email:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.email}</p>
                                    </div>

</div>
                                <></>
                                <div className="row">

<label className="col-2 text text-light "><h6>Street:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.street}</p>
                                    </div>
                                </div>

<></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>PLZ and City:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light">
                                            {address?.postCode} {address?.city}
                                        </p>
                                    </div>

</div>
                                <></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>Curreny:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{orderInformation?.currency}</p>
                                    </div>
                                </div>

<></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>Total price:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{orderInformation?.totalPrice}</p>
                                    </div>
                                </div>

<></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>Amount of tickets:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{orderInformation?.tickets.length}</p>
                                    </div>
                                </div>
                                <></>
                            </div>

<div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { finalStep() }}>Finalice</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { returnToPreviousPage() }}>Return</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { removeTicket() }}>Remove Ticket</button>
                            </div>
                        </div>
                        <form id="paymentForm" data-merchant-id="1100004624"></form>
                    </div>
                </div>
            </section>
        </div>

)
}

export default Recap;

Final Code of Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <base href="%PUBLIC_URL%/" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>Developer_Site_Example_Bookingform</title>
</head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
  </body>
</html>