Notes

import React from 'react';
import './CalculatePremium.css';
import { useState } from "react";
import { Button, Link, Typography, Checkbox } from '@qbe/ui-core';
import Scrollup from '../../Assets/Icon/UpArrow.svg';
import Scrolldown from '../../Assets/Icon/DownArrow.svg';
import { Modal } from "../../Components/Modal/Modal.js";
import { Link as Link2, useNavigate } from "react-router-dom";
import { BackToPrevious } from '../Modals/BackToPrevious.js';
import { SaveForLater } from '../Modals/SaveForLater.js';
import { Adjustment } from '../Modals/Adjustment.js'; // Adjustment modal import

export const CalculatePremium = ({ reviewPremium }) => {
const navigate = useNavigate();
const [isModalActive, setModalState] = useState(false);
const [isSuccessfull, setSuccessfull] = useState(false);
const [isHidden, setIsHidden] = useState(false);
const [isSaveForLater, setSaveForLater] = useState(false);
const [isAdjustmentModalActive, setAdjustmentModalActive] = useState(false); // State for the Adjustment modal

const toggleVisibility = () => {
setIsHidden(!isHidden);
};

function backToPrevious() {
return setModalState(true);
}

const showSaveForLater = () => {
setSaveForLater(true);
};

const setSuccessfullModalState = () => {
setModalState(false);
setSuccessfull(true);
};

return (
<>
<div className="calculate-premium-container">
<div className="calculate-premium-main">
<Modal shown={isModalActive}>
<BackToPrevious successfull={() => setSuccessfullModalState()} close={() => { setModalState(false) }} />
</Modal>
<Modal shown={isSaveForLater}>
<SaveForLater close={() => { setSaveForLater(false) }} />
</Modal>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="#1D4FBB"
class="bi bi-arrow-left-short"
viewBox="0 0 19 19"
>
<path
fill-rule="evenodd"
d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"
/>
</svg>
<Link onClick={() => navigate(-1)} sx={(theme) => ({
FontFace: "Inter-Medium",
fontSize: "16px",
cursor: "pointer",
textDecoration: "none",
color: "#1D4FBB",
})}>
Back to Policy Details
</Link>
</div>
<div className='calculate-premium-header'>
<Typography variant="h1" className='calculate-premium-header-text'>
Calculate your premium
</Typography>
<Typography variant="h1" className='calculate-premium-company'>
Performance Services Pty Ltd - June 2024
</Typography>
</div>
<div className="premium-receipts-container">
{/* ... table rendering goes here ... */}
<div className='premium-receipts-table-button'>
<Button variant='secondary-on-light' onClick={showSaveForLater} label="Save for later" className='' />
<Link2 to="reviewpremium">
<Button variant='primary-on-light' label="Review & pay" className='' />
</Link2>
</div>
<div className='delete-adjustment'>
<td className='delete-adjustment-row'>
<Button onClick={() => setAdjustmentModalActive(true)} label="Delete Adjustment" />
</td>
</div>
</div>
</div>
{/* Render Adjustment modal */}
<Modal shown={isAdjustmentModalActive}>
<Adjustment close={() => setAdjustmentModalActive(false)} />
</Modal>
</>
);
};

export default CalculatePremium;