Notes

import { Typography, Button } from "@qbe/ui-core";
import { Link } from "react-router-dom";
import Popup from 'reactjs-popup';
import { PolicyStatusBtn } from "../../../Components/PolicyStatusButton/PolicyStatusBtn";
import 'reactjs-popup/dist/index.css';
import "./../../../Components/Modal/Modal.css";
import "./PolicyCard.css";

export const PolicyCard = ({ data, onClickExpandThreeDots }) => {

const { id, companyName, policyStatus, number, effectiveDate } = data;

//REUSABLE BLOCK TO RENDER POLICY DATES
const renderPolicyDates = (label) => {
return (
<div className={policyStatus !== "Pending approval" ? 'policy-dates-container' : 'policy-dates-container policy-dates-conatiner-visibility'}>
<Typography
variant="label3"
weight="medium"
className="policy-dates-title"
>
{label}
</Typography>
<Typography
variant="subtitle2"
weight="medium"
>
{effectiveDate}
</Typography>
</div>
)
}

return (
<div className="policy-card-container">
<div className="policy-card-header">
<PolicyStatusBtn policyStatus={policyStatus} />
<div className="threedots">
<Popup className="popup-arrow popup-overlay" on={['hover', 'focus']} trigger={<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
</svg>
</div>} position="bottom center">
<Typography onClick={onClickExpandThreeDots} variant="label3"
weight="bold" className="custom-popover-style">Remove Policy</Typography>
</Popup>
</div>
</div>
<div className="company-information">
<p className="company-name">{companyName}</p>
<p className="policy-number">{number}</p>
</div>
<div className="policy-dates-main-container">
{["Effective date"].map((e) => renderPolicyDates(e))}
<Link to={`${id}`}>
{" "}
<Button disabled={policyStatus === "Pending approval"} className="policy-btn" label="View Policy" size="small" />{" "}
</Link>
</div>
</div>
)
}





import { Button, Typography } from "@qbe/ui-core";
import { useEffect, useState } from "react";
import { useMsal } from "@azure/msal-react";
import { useSelector, useDispatch } from "react-redux";
import { DashboardEmptyView } from "./EmptyView/DashboardEmptyView.js";
import { AddPolicy } from "../Modals/AddPolicy.js";
import { PolicyCard } from "./PolicyCard/PolicyCard.js";
import { AddPolicySuccess } from "../Modals/AddPolicySuccess.js";
import { Modal } from "../../Components/Modal/Modal.js";
import { RemovePolicy } from "../Modals/RemovePolicy";
import { setAddPolicyModalState, setRemovePolicyModalState } from "../../Redux/Slices/modalSlice.js";
import { changePolicyStatus } from "../../Redux/Slices/policyDashboardSlice.js";
import "./PolicyDashboard.css";

export const PolicyDashboard = () => {
const [selectedPolicy, setSelectedPolicy] = useState("");
const [loggedInUser, setLoggedinUser] = useState("");
const { accounts } = useMsal();
const dispatch = useDispatch();

const isModalActive = useSelector((state) => state.modal.isAddPolicyModalActive);
console.log(isModalActive,"isModalActive")
const isSuccessPolicyModalActive = useSelector((state) => state.modal.isPolicySuccessModalActive);
const isRemovePolicyModalActive = useSelector((state) => state.modal.isRemovePolicyModalActive);
const policyDashboardData = useSelector((state)=>state.policyDashboard.policyDashboardData);

useEffect(() => {
const name = accounts[0]?.idTokenClaims?.given_name;
setLoggedinUser(name);
}, [])

const removeSelectedPolicy = (id) => {
dispatch(setRemovePolicyModalState(true))
setSelectedPolicy(id);
}

const onClickAddPolicy = () => dispatch(setAddPolicyModalState(true));

const onClickRefresh = () => dispatch(changePolicyStatus({ id: 1, status: "Approved" }))

return (
<div className="main">
{/* Add a modal to add policy add view */}
<Modal shown={isModalActive} > <AddPolicy /></Modal>
<Modal shown={isSuccessPolicyModalActive}><AddPolicySuccess /> </Modal>
<Modal shown={isRemovePolicyModalActive}><RemovePolicy selectedPolicy={selectedPolicy} /></Modal>
{/* Policy dashboard main rendering */}
<div className='bottom-section-conatiner'>
<div className="policy-search-container">
<Typography variant="subtitle1" weight="bold">
Hello, {loggedInUser}
</Typography>
<div className="search-main-conatiner">
<Button onClick={onClickAddPolicy} variant="secondary-on-light" className="policy-btn-header" label="Add a Policy" size="small" />
<Button onClick={onClickRefresh} variant="secondary-on-light" className="policy-btn-header" label="Refresh" size="small" />
</div>
</div>
<hr className="hr-line-dashboard" />
{/* Render each policy cards */}
<div className='policy-cards-container'>
{policyDashboardData.length === 0 && <DashboardEmptyView />}
{policyDashboardData.length !== 0 && policyDashboardData.map(policy => <PolicyCard key={policy.id} data={policy} onClickExpandThreeDots={() => removeSelectedPolicy(policy.id)} />)}
</div>
</div>
</div>
)
}





import { Button, Typography } from "@qbe/ui-core";
import { useDispatch } from "react-redux";
import { setRemovePolicyModalState } from "../../Redux/Slices/modalSlice.js";
import { removePolicyDashBoardData } from "../../Redux/Slices/policyDashboardSlice.js";
import { showSuccess } from "../../Components/AlertBox/AlertBox.js";

export const RemovePolicy = ({ selectedPolicy }) => {

const dispatch = useDispatch();

const onClickRemovePolicy = () => {
dispatch(removePolicyDashBoardData(selectedPolicy));
dispatch(setRemovePolicyModalState(false));
showSuccess("Policy successfully removed from your account");
}

return (<div
className="modal-content"
onClick={e => {
// do not close modal if anything inside modal content is clicked
e.stopPropagation();
}}
>
{/* pass as children */}
<div className="popup-container-remove-policy">
<div className="cross-arrow-remove-policy w-100 "><svg onClick={() => dispatch(setRemovePolicyModalState(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="bottom-section-remove-policy">
<h6 className="mb-3 mt-3 remove-policy-header"> Are you sure you want to remove this policy? </h6>
<p className="mb-3 remove-policy-note">The policy will still be active, it just won't be visible on your account. *confirm wording*</p>
<Button onClick={() => onClickRemovePolicy()} className="mt-3 mx-2" label="Yes, remove" />
<Button onClick={() => dispatch(setRemovePolicyModalState(false))} className="mt-3 mx-2" label="Cancel" variant="secondary-on-light" />
</div>
</div>
</div>)
}