Notes

import React from 'react';
import { useState, useEffect } from "react";
import { useSelector } from 'react-redux';
import { Typography } from '@qbe/ui-core';
import BackToDashbaord from "../../Components/BackToDashboard/BackToDashboard.js";
import { Summary } from "./Summary/Summary.js";
import { useLocation } from 'react-router-dom';
import { useGetPremiumQuery, useEditCartQuery } from "../../Redux/Apis/paymentApi.js";
import { formatCurrency } from '../../Utils/formatCurrency.js';
import { SkeletonLoader } from "../../Components/SkeletonLoader/SkeletonLoader.js";
import './CalculatePremium.css';

export const CalculatePremium = (props) => {
// const isSaveForLaterModalActive = useSelector((state) => state.modal.isSaveForLaterModalActive);
// const [isSaveForLater, setSaveForLater] = useState(false);
// const [isAdjustmentModalActive, setAdjustmentModalActive] = useState(false); // State for the Adjustment modal
// const [inputValue, setInputValue] = useState('');

//new
const premiumData = {
"policyHolderName": "",
"policyNumber": "",
"reportingPeriod": "",
"coverage": "",
"policyEffectiveDate": "",
"lastPaymentDate": "",
"paymentType": "",
"eslPolicyId": "",
"cartId": "",
"cartStatus": "",
"data": {
"category": [
{
"coverage": "",
"premiumByCoverage": "",
"subCoverage": [
{
"subCategory": "",
"currentEnrollement": "",
"adjustment": "",
"rate": "",
"premium": ""
},
{
"subCategory": "",
"currentEnrollement": "",
"adjustment": "",
"rate": "",
"premium": ""
},
{
"subCategory": "",
"currentEnrollement": "",
"adjustment": "",
"rate": "",
"premium": ""
}
],
"deduction": [
{
"precentageOfPremium": "",
"perEmployee": "",
"flatRatePerMonth": "",
"percentageOfPremiumAmt": "",
"perEmployeeAmt": "",
"flatRatePerMonthAmt": "",
"isPercentageOfPremiumSelected": "",
"isPerEmployeeSelected": "",
"isFlatRateSelected": ""
}
]
},
{
"coverage": "Aggregate Coverage",
"premiumByCoverage": "",
"subCoverage": [
{
"subCategory": "",
"currentEnrollement": "",
"adjustment": "",
"rate": "",
"premium": ""
}
],
"deduction": [
{
"precentageOfPremium": "",
"perEmployee": "",
"flatRatePerMonth": "",
"percentageOfPremiumAmt": "",
"perEmployeeAmt": "",
"flatRatePerMonthAmt": "",
"isPercentageOfPremiumSelected": "",
"isPerEmployeeSelected": "",
"isFlatRateSelected": ""
}
]
}
],
"grossPremium": "",
"premiumDeductions": "",
"netPremium": ""
}
}

const [Data, setData] = useState(premiumData);

const policyCaluculatedData = useSelector((state) => state.policyStatus.selectedReportingPeriod);
console.log(policyCaluculatedData, "policyCaluculatedData")
const { data: getPremiumData, isFetching: getPremiumFetching, isSuccess: getPremiumSucess, isError: getPremiumError } =
useGetPremiumQuery(policyCaluculatedData, { skip: policyCaluculatedData.cartId !== null });

const { data: editCartData, isFetching: editCartFetching, isSuccess: editCartSucess, isError: editCartErorr } =
useEditCartQuery(policyCaluculatedData, { skip: policyCaluculatedData.cartId === null });

useEffect(() => {
if (getPremiumSucess) {
setData(getPremiumData);
}
if (editCartSucess) {
setData(editCartData)
}
if (getPremiumFetching || editCartFetching) {
setData(premiumData)
}
}, [getPremiumSucess, editCartSucess, editCartFetching, getPremiumFetching])

const calculateGrossPremiumCalculation = (newRows) => {
let grossPremium = 0;
newRows.data.category.forEach((coverage) => {
let coveragesPremium = 0;
coverage.subCoverage.forEach((subcoverage) => {
if (subcoverage.currentEnrollement !== "" && subcoverage.rate !== "") {
grossPremium += subcoverage.currentEnrollement * subcoverage.rate;
coveragesPremium += subcoverage.currentEnrollement * subcoverage.rate;
}
}
)
coverage.premiumByCoverage = coveragesPremium;
})
if (grossPremium === "") return "";
return grossPremium;
// return grossPremium === 0?"":grossPremium;
}

const calculateTotalDeduction = (newRows) => {
let totalDeduction = 0;

newRows.data.category.forEach((coverage) => {
coverage.deduction.forEach((deduction) => {
totalDeduction = totalDeduction + (deduction.percentageOfPremiumAmt);
})
})

if (totalDeduction === "") return 0.00;
return totalDeduction;

}

const calculateNetPremium = (newRows) => {
return newRows.data.grossPremium + newRows.data.premiumDeductions;
}

const updateDeduction = (newRows) => {
const updatedRow = { ...newRows };
newRows.data.category.forEach((coverage, coverageId) => {
coverage.deduction.forEach((deduction, deductionId) => {
calculatePercentagePremium(
updatedRow,
deduction.isPercentageOfPremiumSelected,
coverageId,
deductionId
);
calculatePerEmployeeDeduction(
updatedRow,
deduction.isPerEmployeeSelected,
coverageId,
deductionId
)
})
});
}

const handleInputChange = (value, coverageIndex, subcoverageIndex) => {
if (value === "") value = 0;
let newRows = structuredClone(Data);
//update current enrollment
newRows.data.category[coverageIndex].subCoverage[subcoverageIndex].currentEnrollement = parseInt(value) ?? 0;
newRows.data.category[coverageIndex].subCoverage[subcoverageIndex].premium
= parseInt(value) * newRows.data.category[coverageIndex].subCoverage[subcoverageIndex].rate;

newRows.data.grossPremium = calculateGrossPremiumCalculation(newRows);
updateDeduction(newRows);
newRows.data.premiumDeductions = calculateTotalDeduction(newRows);
newRows.data.netPremium = calculateNetPremium(newRows);
setData(newRows);
};

const calculatePercentagePremium = (newRows, event, coverageId, deductionId) => {
const deduction = newRows.data.category[coverageId].deduction[deductionId].precentageOfPremium;
const coverageTtl = newRows.data.category[coverageId].premiumByCoverage;

let deductionAmount = 0;

if (deduction > 0) {
deductionAmount = (deduction * coverageTtl / 100) * (-1);
} else if (deduction < 0) {
deductionAmount = (deduction * coverageTtl / 100);;
}

if (event === true && coverageTtl !== 0) {
newRows.data.category[coverageId].deduction[deductionId].percentageOfPremiumAmt = deductionAmount;
} else {
newRows.data.category[coverageId].deduction[deductionId].percentageOfPremiumAmt = 0;
}
setData(newRows);
}

const calculatePerEmployeeDeduction = (newRows, event, coverageId, deductionId) => {
const deduction = newRows.data.category[coverageId].deduction[deductionId].perEmployee;
let totalEmployee = 0;
newRows.data.category[coverageId].subCoverage.forEach((subCoverage) => {
totalEmployee += subCoverage.currentEnrollement;
});

let deductionAmount = 0;

if (deduction > 0) {
deductionAmount = deduction * totalEmployee * (-1);
} else if (deduction < 0) {
deductionAmount = deduction * totalEmployee
}

if (event === true && totalEmployee !== 0) {
newRows.data.category[coverageId].deduction[deductionId].perEmployeeAmt = deductionAmount;
} else {
newRows.data.category[coverageId].deduction[deductionId].perEmployeeAmt = 0;
}
setData(newRows);
}

const calculateFlateRateDeduction = (newRows, event, coverageId, deductionId) => {
const deduction = newRows.data.category[coverageId].deduction[deductionId].flatRatePerMonth;
if (event === true) {
if (deduction > 0) {
newRows.data.category[coverageId].deduction[deductionId].flatRatePerMonthAmt = deduction * (-1);
} else {
newRows.data.category[coverageId].deduction[deductionId].flatRatePerMonthAmt = deduction;
}
} else {
newRows.data.category[coverageId].deduction[deductionId].flatRatePerMonthAmt = 0;
}
setData(newRows);
}

const onChangeDeduction = (event, coverageId, deductionId, deductionField) => {
const newRows = structuredClone(Data);
newRows.data.category[coverageId].deduction[deductionId][deductionField] = event;

switch (deductionField) {
case "isPercentageOfPremiumSelected":
calculatePercentagePremium(newRows, event, coverageId, deductionId);
break;
case "isPerEmployeeSelected":
calculatePerEmployeeDeduction(newRows, event, coverageId, deductionId);
break;
case "isFlatRateSelected":
calculateFlateRateDeduction(newRows, event, coverageId, deductionId);
break;
default:
break;;
}

newRows.data.grossPremium = calculateGrossPremiumCalculation(newRows);
newRows.data.premiumDeductions = calculateTotalDeduction(newRows);
newRows.data.netPremium = calculateNetPremium(newRows);
}

return (

<>
<div className='calculate-premium-top-section' >
<BackToDashbaord path="/policydashboard/policydetails/" backTo={"Policy Details"} />
</div>
<div className="calculate-premium-container">
{/* <div className="calculate-premium-main">
<Modal shown={isSaveForLaterModalActive}><SaveForLater /></Modal>
</div> */}
<div>
<div className='calculate-premium-header'>
<h1 className='calculate-premium-header-text'>Calculate your premium</h1>
<h1 className='calculate-premium-company-reporting-period'>
{editCartFetching || getPremiumFetching ? <SkeletonLoader /> : `${Data.policyHolderName} - ${Data.reportingPeriod}`}
</h1>
</div>
<p className="page-description">Use the table below to input your monthly enrollment. </p>
</div>
<div className="premium-receipts-container">
<table className="premium-receipts-table">
<thead>
<tr>
<th className='calculate-premium-theader category'>Category</th>
<th className='calculate-premium-theader'>Current Enrollment</th>
<th className='calculate-premium-theader'>Rate</th>
<th className='calculate-premium-theader'>Premium</th>
</tr>
</thead>
<tbody>
{
Data.data.category.map((coverage, coverageIndex) => {
return (
<>
<tr className='premium-receipts-coverage-name' >
<td className='coverage-name-label' colSpan={4}>
{editCartFetching || getPremiumFetching || Data === null ? <SkeletonLoader className="skeleton-loader-coverage" /> : coverage.coverage}
</td>
</tr>
{
coverage.subCoverage.map((subcoverage, subcoverageIndex) => {
return (
<tr className='premium-receipts-table-row' >
<td><p className='calculate-premium-row-values'>{editCartFetching || getPremiumFetching ? <SkeletonLoader /> : subcoverage.subCategory}</p></td>
<td>
{editCartFetching || getPremiumFetching || Data === null ? <SkeletonLoader className="skeleton-loader-coverage" /> : <input id="current_enrollment" type='textbox' className='premium-receipts-table-textfield calculate-premium-row-values' name='Single' maxLength={5} value={subcoverage.currentEnrollement || ""} onChange={(e) => { const value = e.target.value.replace(/[^0-9]/g, ""); handleInputChange(value, coverageIndex, subcoverageIndex);}}onKeyDown={(e) => { if (e.key === "-") {e.preventDefault();}}} />}
</td>
<td><p className='calculate-premium-row-values'>{editCartFetching || getPremiumFetching ? <SkeletonLoader className="skeleton-loader-coverage" /> : formatCurrency(subcoverage.rate)}</p></td>
<td className='currency-align-right'><p className='calculate-premium-row-values'>{editCartFetching || getPremiumFetching || Data === null ? <SkeletonLoader /> : formatCurrency(subcoverage.premium)}</p></td>
</tr>
)
})
}
</>
)
})
}
<tr className='premium-receipts-table-total premium-receipts-custom td'>
<td><span className='calculate-premium-row-values'></span></td>
<td><span className='calculate-premium-row-values'></span></td>
<td><Typography variant="body1" className='premium-receipts-table-sum'>Total</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-sum total-value'>
{editCartFetching || getPremiumFetching || Data === null ? <SkeletonLoader className="skeleton-loader-total" /> : formatCurrency(Data.data.grossPremium)}</Typography>
</td>
</tr>

</tbody>
</table>
<div className='summary-container'>
<Summary isDataFetching={editCartFetching || getPremiumFetching} data={Data} tittle="Monthly premium summary" onChangeDeduction={(event, coverageId, deductionId, deductionField) => onChangeDeduction(event, coverageId, deductionId, deductionField)} />
</div>
</div>
</div >
</>
);
}
export default CalculatePremium;