Is there a way to make the two buttons of the same size? Also possibly when the page is resized? I noticed that the paypal button, when the page is resized, changes its height.
It would be great if the two buttons had the same width 50%/50% compared to the external div and fixed height of 55px.
Thank you in advance!
My page:
Code:
import React, {useState, useEffect, useRef} from 'react'
import { useLocation } from 'react-router-dom';
import 'moment/locale/it'
import moment from 'moment'
import $ from 'jquery';
import { Row, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
import { Pagamento, PagamentoH1, PagamentoWrapper } from './PagamentoElements';
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
const PagamentoPage = () => {
const { state } = useLocation();
const [informations, setInformations] = useState('');
const [stringPrice, setStringPrice] = useState('');
const price = useRef();
const initialOptions = {
"client-id": "AVtisWaj3Lp4WwN6_vTYC4tmijgunLVMnbtN_7Nb7Mc0tZoThBGS9XPcGLY4jYYTeuEE6Z6u__WSHjpD",
components: "buttons",
currency: "EUR"
};
useEffect(() => {
async function getInformations() {
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem("tokenType") + " " + sessionStorage.getItem("accessToken") },
body: JSON.stringify({
"id": state.idChoice
})
};
let response = await fetch("http://localhost:8080/api/v1/users/getUser", requestOptions);
let responseJson = await response.json();
setInformations(responseJson);
let newStartDate = moment(state.startDate, 'DD/MM/YYYY').format('MM/DD/YYYY');
let newEndDate = moment(state.endDate, 'DD/MM/YYYY').format('MM/DD/YYYY');
const dateStart = new Date(newStartDate);
const endDate = new Date(newEndDate);
const oneDay = 1000 * 60 * 60 * 24;
const diffInTime = endDate.getTime() - dateStart.getTime();
const diffInDays = Math.round(diffInTime / oneDay);
price.current = (parseInt(diffInDays) * parseFloat(responseJson['prezzo']));
setStringPrice((parseInt(diffInDays) * parseFloat(responseJson['prezzo'])).toFixed(2) + "€");
if (responseJson['nomeStruttura'] != null) {
$("#formStruttura").css("display", "block");
$("#textNomeStruttura").val(responseJson['nomeStruttura']);
$("#labelNome").text('Nome del titolare');
$("#labelCognome").text('Cognome del titolare');
$("#textNome").val(responseJson['nome']);
$("#textCognome").val(responseJson['cognome']);
} else {
$("#formStruttura").css("display", "none");
$("#labelNome").text('Nome del Petsitter');
$("#labelCognome").text('Cognome del Petsitter');
$("#textNome").val(responseJson['nome']);
$("#textCognome").val(responseJson['cognome']);
$("#pOnl").css("display", "none");
$("#pCont").text("Conferma e paga direttamente al Petsitter");
$("#pCont").css("margin-right", "0");
}
if (state.cure === null) {
$("#divCure").css("display", "none");
}
if (state.socievole === null) {
$("#divSoc").css("display", "none");
}
}
getInformations().catch(err => console.log(err));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const handleSubmitPayment = (orderId) => {
console.log(state.cure);
console.log(state.socievole);
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem("tokenType") + " " + sessionStorage.getItem("accessToken") },
body: JSON.stringify({
"user_id": state.idChoice,
"startDate": state.startDate,
"endDate": state.endDate,
"prezzo": price.current,
"cure": state.cure,
"socievole": state.socievole,
"transactionId": orderId
})
};
fetch("http://localhost:8080/api/v1/reservations/save", requestOptions)
.then(response => response.json())
.then(data => {
if (data['message'].includes('Reservation registered successfully!')) {
console.log("Prenotazione salvata!");
}
})
.catch(err => console.log(err))
}
return (
<div>
<Pagamento>
<PagamentoH1>Resoconto e pagamento</PagamentoH1>
<Form>
<PagamentoWrapper>
<Row className="mb-4">
<Form.Group as={Col}>
<Form.Label>Data di inizio</Form.Label>
<Form.Control type="text" value={state.startDate} readOnly={true}></Form.Control>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Data di fine</Form.Label>
<Form.Control type="text" value={state.endDate} readOnly={true}></Form.Control>
</Form.Group>
</Row>
<Row className="mb-4">
<Form.Group id="formStruttura" style={{display: "none"}} as={Col}>
<Form.Label id="labelNomeStruttura">Nome Struttura</Form.Label>
<Form.Control id="textNomeStruttura" type="text" readOnly={true}></Form.Control>
</Form.Group>
<Form.Group as={Col}>
<Form.Label id="labelNome"></Form.Label>
<Form.Control id="textNome" type="text" readOnly={true}></Form.Control>
</Form.Group>
<Form.Group as={Col}>
<Form.Label id="labelCognome"></Form.Label>
<Form.Control id="textCognome" type="text" readOnly={true}></Form.Control>
</Form.Group>
</Row>
<Row className="mb-4">
<Form.Group as={Col}>
<Form.Label>Indirizzo della struttura</Form.Label>
<Form.Control type="text" value={informations['indirizzo'] + ", " + informations['citta'] + ", " + informations['cap']} readOnly={true}></Form.Control>
</Form.Group>
</Row>
<Row className="mb-4">
<Form.Group as={Col}>
<Form.Label>Telefono</Form.Label>
<Form.Control type="text" value={informations['telefono']} readOnly={true}></Form.Control>
</Form.Group>
</Row>
<div id="divCure">
<Form.Label>Dettagli sulle cure</Form.Label>
<FloatingLabel className="mb-4" style={{color: "#999"}} label="Dettagli">
<Form.Control readOnly={true} type="text" value={state.cure} placeholder="Dettagli" />
</FloatingLabel >
</div>
<div id="divSoc">
<Form.Label>Dettagli sulla socialità </Form.Label>
<FloatingLabel className="mb-4" style={{color: "#999"}} label="Dettagli">
<Form.Control readOnly={true} type="text" value={state.socievole} placeholder="Dettagli" />
</FloatingLabel>
</div>
<Row className="mb-5">
<Form.Group as={Col}>
<Form.Label>Totale da pagare</Form.Label>
<Form.Control id="textPrice" type="text" value={stringPrice} readOnly={true}></Form.Control>
</Form.Group>
</Row>
<div style={{textAlign: "center"}}>
<div className='btn-group'>
<Button id="pCont" variant="primary" style={{height: "55px", marginBottom: "40px"}} onClick={() => {
handleSubmitPayment(null);
}}>Conferma e paga in contanti</Button>
<PayPalScriptProvider options={initialOptions}>
<PayPalButtons
onApprove={async function (data, actions) {
await actions.order.capture();
handleSubmitPayment(data.orderID);
}}
createOrder={(data, actions) => {
return actions.order
.create({
purchase_units: [
{
amount: {
description: "PetCare Paypal Payment",
currency_code: "EUR",
value: price.current,
},
},
],
})
}}
style={{ layout: "horizontal"}}
/>
</PayPalScriptProvider>
</div>
</div>
</PagamentoWrapper>
</Form>
</Pagamento>
</div>
)
}
export default PagamentoPage
PagamentoElements.js:
import styled from "styled-components";
export const Pagamento = styled.div`
min-height: 100vh;
background: #010606;
padding-bottom: 30px;
clear: both;
overflow: auto;
padding: 0px 10px 10px 10px;
`
export const PagamentoH1 = styled.h1`
font-size: 2.5rem;
color: #fff;
margin-bottom: 30px;
padding-top: 150px;
text-align: center;
@media screen and (max-width: 480px) {
font-size: 2rem;
}
`
export const PagamentoWrapper = styled.div`
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-radius: 20px;
margin: 0 auto;
width: 60%;
padding: 40px;
color: #fff;
@media screen and (max-width: 1100px) {
width: 45%;
}
@media screen and (max-width: 968px) {
width: 60%;
}
@media screen and (max-width: 768px) {
width: 80%;
}
`
