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 [isZipCodeValid, setZipCodeValidationStatus] = useState(false);

const dispatch = useDispatch();

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

// Updated 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-]+$/;
// Corrected ZIP code validation regex: allow exactly 5 digits
const zipCodeValidationRegex = /^d{0,5}$/; // Allow up to 5 digits to be typed

if (targetElement === "policy_number") {
setPolicyNumber(inputValue);
// Check if the input matches the policy number validation regex
if (policyNumberValidationregex.test(inputValue)) {
setPolicyNumberValidationStatus(true);
} else {
setPolicyNumberValidationStatus(false);
}
} else if (targetElement === "zip_code") {
// Allow typing only up to 5 digits
if (zipCodeValidationRegex.test(inputValue)) {
setZipCode(inputValue);
// Set ZIP code valid status if it has exactly 5 digits
setZipCodeValidationStatus(inputValue.length === 5);
}
}
};

const onClickAddPolicy = () => {
if (isPolicyNumberValid && isZipCodeValid) {
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
error={!isZipCodeValid && zipCode !== ""} // Show error if ZIP code is not valid (must be exactly 5 digits)
id="zip_code"
helperText="Enter a 5-digit ZIP code"
label="ZIP Code"
name="zipCode"
onChange={onChangeModalInputs}
value={zipCode}
/>
<Button
onClick={onClickAddPolicy}
disabled={!isPolicyNumberValid || !isZipCodeValid} // Disable if policy number or zip code 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>
);
};