Notes

import React from "react";
import { Button, Link, Typography } from "@qbe/ui-core";
import { useNavigate } from "react-router-dom";
import PaymentService from "../../Services/AnHPortalService.js";
import "./ReviewPremium.css";
import multipay from "../../Payment/multipay";
import BackToDashbaord from "../../Components/BackToDashboard/BackToDashboard.js"

const ReviewPremium = () => {

const navigate = useNavigate();

const handlePayNow = () => {
PaymentService.getAccessToken().then((response) => {
const accessToken = response.data.data.accessToken;
localStorage.setItem("auth_token", accessToken);
PaymentService.getPolicyDashboardData().then(jwtTokenresponse => {
const tokenObj = jwtTokenresponse.data;
let startIndex = tokenObj.indexOf("ey");
const tokenstartstring = tokenObj.substring(startIndex);
const replacedString = tokenstartstring.replaceAll("}", "")
const replacedString1 = replacedString.replaceAll(""", "");
multipay(replacedString1);
});
})
}

return (
<>
<Link
onClick={() => navigate(-1)}>

<BackToDashbaord backTo={"Calculate Premium"} onClick={navigate(-1)}/>

</Link>
<div className="review-premium-container">
{/* <div className="review-premium-back-button">
<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 Calculate Premium
</Link>
</div> */}
<div className="review-premium-form-container">
<div className="header-line">
<div className="review-premium-header">
<Typography variant="subtitle1" weight="bold" className="review-premium-header-label" >
Review your premium
</Typography>
</div>
<div className="review-premium-sub-header section-title">
<Typography variant="subtitle1" className="review-premium-sub-label" >
Confirm the premium enrollment details below are correct.
</Typography>
</div>
</div>
<div className="table-main">
<div className="premium-details">
<table className="details-table">
<tr>
<td className="review-premium-left-panel ">Policyholder</td>
<td className="review-premium-right-panel ">Performance Services Pty Ltd</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Policy number</td>
<td className="review-premium-right-panel ">LGS02188-21</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Period</td>
<td className="review-premium-right-panel ">June 2024</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Coverage</td>
<td className="review-premium-right-panel ">Medical Stop Loss</td>
</tr>
<tr className="section-title">
<td className="review-premium-left-panel " colSpan="2">Specific coverage</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Employee</td>
<td className="review-premium-right-panel">
10 lives <span className="amount">$700.00</span>
</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Family</td>
<td className="review-premium-right-panel ">
10 lives <span className="amount">$250.00</span>
</td>
</tr>
<tr className="section-title">
<td className="review-premium-left-panel " colSpan="2">Aggregate coverage</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Composite</td>
<td className="review-premium-right-panel ">
10 lives <span className="amount">$250.00</span>
</td>
</tr>
<tr>
<td className="review-premium-left-panel ">Aggregate Accommodation</td>
<td className="review-premium-right-panel ">
10 lives <span className="amount">$250.00</span>
</td>
</tr>
<tr className="section-title">
<td className="review-premium-left-panel " colSpan="2">Deductions</td>
</tr>
<tr className="">
<td className="review-premium-left-panel ">Percentage of premium (15%)</td>
<td className="review-premium-right-panel "><b> -$217.50</b></td>
</tr>
<tr>
<td className="review-premium-gross ">Gross premium</td>
<td className="review-premium-gross-amount">$1,450.00</td>
</tr>
<tr>
<td className="review-premium-gross ">Premium deductions</td>
<td className="review-premium-gross-amount">-$217.50</td>
</tr>
<tr className="">
<td className="align-left-final ">Net premium</td>
<td className="total-amount ">$1,232.50</td>
</tr>
</table>
</div>
<div>
<div className="bottom-section-buttons">
<Button label="Add to cart" className="btn-small" onClick={function () { return console.log('onClick'); }} variant="secondary-on-light" />
<Button label="Pay now" className="btn-small" onClick={handlePayNow} />
</div>
</div>
</div>
</div>
</div>
</>
);
};

export default ReviewPremium;