Notes

import { Button, Typography, TextField, Link } from "@qbe/ui-core";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { setAddPolicyModalState, setSuccessPolicyModalState, addPolicyDashboardData } from "../../Redux/Feautures/Modal/policyDashboardSlice";

export const AddPolicy = () => {
const [policyNumber, setPolicyNumber] = useState(""); // Policy number state
const [isPolicyNumberValid, setPolicyNumberValidationStatus] = useState(false); // Policy number validity state
const dispatch = useDispatch();

// Function to handle input changes
const onChangeModalInputs = (event) => {
const inputValue = event.target.value;

// Regular expression for 3 letters followed by 5 digits
const policyNumberValidationregex = /^[a-zA-Z]{3}d{5}$/;

// Test policy number validation
if (policyNumberValidationregex.test(inputValue)) {
setPolicyNumberValidationStatus(true); // Valid policy number
} else {
setPolicyNumberValidationStatus(false); // Invalid policy number
}
setPolicyNumber(inputValue);
};

// Function to handle Add Policy button click
const onClickAddPolicy = () => {
if (isPolicyNumberValid) {
dispatch(setSuccessPolicyModalState(true));
dispatch(setAddPolicyModalState(false));
dispatch(
addPolicyDashboardData({
id: "unique-id", // Replace with real unique ID
companyName: "Performance Services",
policyStatus: "Pending approval",
number: policyNumber,
effectiveDate: "1/1/2024",
latestInvoiceDate: "1/1/2024",
lastPaymentDate: "6/22/2024",
})
);
}
};

return (
<div
className="modal-content"
onClick={(e) => {
// Do not close modal if anything inside modal content is clicked
e.stopPropagation();
}}
>
<div className="popup-container">
<div className="cross-arrow w-100">
<svg
onClick={() => dispatch(setAddPolicyModalState(false))}
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
>
<path
d="M27 14.41L25.59 13L20 18.59L14.41 13L13 14.41L18.59 20L13 25.59L14.41 27L20 21.41L25.59 27L27 25.59L21.41 20L27 14.41Z"
fill="black"
></path>
</svg>
</div>
<div className="top-section">
<Typography variant="h3" weight="semibold">
Add a policy
</Typography>
</div>
<div className="bottom-section">
<Typography variant="label1" weight="regular">
Enter your policy details
</Typography>

{/* Policy Number Input with Validation */}
<TextField
error={!isPolicyNumberValid && policyNumber !== ""} // Show error if input is invalid and not empty
id="policy_number"
helperText="3 letters & 5 digits (e.g. ABC12345)"
label="Policy Number"
name="policyNumber"
onChange={onChangeModalInputs}
value={policyNumber}
/>

{/* Disable button if policy number is invalid */}
<Button
onClick={onClickAddPolicy}
disabled={!isPolicyNumberValid} // Button is enabled only if the policy number is valid
label="Add policy"
/>

<Typography variant="label2" weight="semibold" className="modal-skip-now-msg">
Don’t have your details to hand?{" "}
<Link onClick={() => dispatch(setAddPolicyModalState(false))}>
Skip for now
</Link>
</Typography>
</div>
</div>
</div>
);
};