Notes

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

export const AddPolicy = () => {
const [policyNumber, setPolicyNumber] = useState("");
const [isPolicyNumberValid, setPolicyNumberValidationStatus] = useState(false);
const [zipCode, setZipCode] = useState("");

const dispatch = useDispatch();

const onChangeModalInputs = (event) => {
const targetElement = event.target.id;
const inputValue = event.target.value;

// New simplified regex for policy number validation (3 letters and 7 digits, hyphens allowed)
const policyNumberValidationregex = /^(?=(?:[^a-zA-Z]*[a-zA-Z]){3})(?=(?:[^0-9]*[0-9]){7})[a-zA-Z0-9-]+$/;

if (targetElement === "policy_number") {
if (policyNumberValidationregex.test(inputValue)) {
setPolicyNumberValidationStatus(true);
} else {
setPolicyNumberValidationStatus(false);
}

setPolicyNumber(inputValue);
} else if (targetElement === "zip_code") {
const numberValidationregex = /^d{5}$/; // Assuming ZIP code must be exactly 5 digits
if (numberValidationregex.test(inputValue)) {
setZipCode(inputValue);
}
}
};

const onClickAddPolicy = () => {
if (isPolicyNumberValid) {
dispatch(setSuccessPolicyModalState(true));
dispatch(setAddPolicyModalState(false));
dispatch(
addPolicyDashboardData({
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>
<TextField
error={!isPolicyNumberValid && policyNumber !== ""} // Show error if input is invalid and not empty
id="policy_number"
helperText="Enter 3 letters & 7 digits (hyphens allowed)"
label="Policy Number"
name="policyNumber"
onChange={onChangeModalInputs}
value={policyNumber}
/>
<TextField
id="zip_code"
helperText="5 digit number associated with the policy number"
label="ZIP code"
name="zipCode"
onChange={onChangeModalInputs}
value={zipCode}
/>
<Button
onClick={onClickAddPolicy}
disabled={!isPolicyNumberValid} // Disable if policy number is invalid
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>
);
};