src/applications/claims-status/components/claim-overview-tab/DesktopClaimPhaseDiagram.jsx
import React from 'react';
import PropTypes from 'prop-types';
export default function DesktopClaimPhaseDiagram({ currentPhase }) {
const getPhaseStyle = (x, y, phase) => {
if (phase === currentPhase) {
return (
<>
<circle
cx={x}
cy={y}
r="23.5"
fill="white"
stroke="#005EA2"
strokeWidth="3"
/>
<circle cx={x} cy={y} r="17.1842" fill="white" stroke="#005EA2" />
</>
);
}
return <circle cx={x} cy={y} r="23.5" fill="#DFE1E2" stroke="#1B1B1B" />;
};
const accessibilityTitle = `Your current step is ${currentPhase} of 8 in the claims process. Steps 3 through 6 can be repeated.`;
return (
<div className="desktop vads-u-margin-bottom--4">
<svg
width="570"
height="166"
viewBox="0 0 570 166"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>{accessibilityTitle}</title>
<rect
x="178.279"
y="33.9127"
width="213.152"
height="98.6808"
rx="30"
fill="white"
stroke="#757575"
strokeWidth="4"
strokeDasharray="6 4"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M284.855 162.162L286.265 160.752L280.685 155.162H292.855V153.162H280.685L286.275 147.582L284.855 146.162L276.855 154.162L284.855 162.162Z"
fill="#565C65"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M284.855 20.3439L283.445 18.9339L289.025 13.3439H276.855V11.3439L289.025 11.3439L283.435 5.76388L284.855 4.34388L292.855 12.3439L284.855 20.3439Z"
fill="#565C65"
/>
<path d="M61 83.2531H77" stroke="#3D4551" strokeLinecap="round" />
<path d="M133 83.2531H149" stroke="#3D4551" strokeLinecap="round" />
<path d="M205 83.2531H221" stroke="#3D4551" strokeLinecap="round" />
<path d="M277 83.2531H293" stroke="#3D4551" strokeLinecap="round" />
<path d="M349 83.2531H365" stroke="#3D4551" strokeLinecap="round" />
<path d="M421 83.2531H437" stroke="#3D4551" strokeLinecap="round" />
<path d="M493 83.2531H509" stroke="#3D4551" strokeLinecap="round" />
{getPhaseStyle(33, 83.2531, 1)}
<path
d="M34.6077 87.7637L34.2027 87.2087L36.1677 87.6437V88.7237H30.5427V87.6437L32.8827 87.2387L32.4627 87.7637V79.9337L33.0477 79.9637L30.5577 81.3437L29.8677 80.0387L32.8227 78.1037H34.6077V87.7637Z"
fill="#1B1B1B"
/>
{getPhaseStyle(105, 83.2531, 2)}
<path
d="M101.299 88.7237V86.9237C102.439 85.9837 103.369 85.1787 104.089 84.5087C104.819 83.8387 105.359 83.2387 105.709 82.7087C106.059 82.1687 106.234 81.6387 106.234 81.1187C106.234 80.5987 106.069 80.2137 105.739 79.9637C105.409 79.7137 104.989 79.5887 104.479 79.5887C104.239 79.5887 103.979 79.6187 103.699 79.6787C103.419 79.7287 103.129 79.8037 102.829 79.9037L103.069 79.5437L102.799 81.2387H101.524L101.359 78.5537C101.979 78.3637 102.584 78.2237 103.174 78.1337C103.764 78.0337 104.319 77.9837 104.839 77.9837C105.549 77.9837 106.179 78.0787 106.729 78.2687C107.279 78.4587 107.709 78.7637 108.019 79.1837C108.329 79.6037 108.484 80.1487 108.484 80.8187C108.484 81.5487 108.299 82.2487 107.929 82.9187C107.559 83.5887 107.024 84.2787 106.324 84.9887C105.624 85.6887 104.774 86.4537 103.774 87.2837V87.0437H108.709V88.7237H101.299Z"
fill="#1B1B1B"
/>
{getPhaseStyle(177, 83.2531, 3)}
<path
d="M176.474 89.5386C175.884 89.5386 175.299 89.4686 174.719 89.3286C174.139 89.1886 173.589 88.9786 173.069 88.6986L173.624 87.1986C174.074 87.4086 174.534 87.5736 175.004 87.6936C175.484 87.8136 175.944 87.8736 176.384 87.8736C176.784 87.8736 177.139 87.8186 177.449 87.7086C177.769 87.5886 178.019 87.4086 178.199 87.1686C178.389 86.9186 178.484 86.6036 178.484 86.2236C178.484 85.8936 178.409 85.6136 178.259 85.3836C178.109 85.1436 177.879 84.9636 177.569 84.8436C177.259 84.7136 176.864 84.6486 176.384 84.6486H175.064V83.1336H176.309C176.959 83.1336 177.449 83.0086 177.779 82.7586C178.119 82.4986 178.289 82.1236 178.289 81.6336C178.289 81.1036 178.114 80.7286 177.764 80.5086C177.424 80.2786 176.994 80.1636 176.474 80.1636C176.164 80.1636 175.859 80.1936 175.559 80.2536C175.259 80.3136 174.964 80.3936 174.674 80.4936L174.959 80.2086L174.764 81.7686H173.489L173.369 79.2336C173.969 79.0336 174.569 78.8836 175.169 78.7836C175.779 78.6736 176.364 78.6186 176.924 78.6186C177.594 78.6186 178.194 78.7086 178.724 78.8886C179.264 79.0586 179.689 79.3386 179.999 79.7286C180.309 80.1086 180.464 80.6236 180.464 81.2736C180.464 82.0436 180.229 82.6486 179.759 83.0886C179.299 83.5186 178.649 83.7836 177.809 83.8836L177.734 83.7036C178.734 83.7736 179.469 84.0286 179.939 84.4686C180.419 84.9086 180.659 85.5186 180.659 86.2986C180.659 86.8586 180.549 87.3436 180.329 87.7536C180.109 88.1536 179.804 88.4886 179.414 88.7586C179.024 89.0286 178.574 89.2286 178.064 89.3586C177.564 89.4786 177.034 89.5386 176.474 89.5386Z"
fill="#1B1B1B"
/>
{getPhaseStyle(249, 83.2531, 4)}
<path
d="M249.695 85.9637L250.235 86.3987H244.775L244.55 84.9137L249.32 77.9687L251.84 78.1637V85.1387L251.315 84.7487H253.4V86.3987H251.315L251.84 85.9637V88.7237H249.695V85.9637ZM250.265 84.7487L249.74 85.1387V79.1837L250.46 79.3037L246.23 85.5137L245.825 84.7487H250.265Z"
fill="#1B1B1B"
/>
{getPhaseStyle(321, 83.2531, 5)}
<path
d="M320.708 88.8887C319.618 88.8887 318.488 88.6237 317.318 88.0937L317.903 86.5937C318.323 86.7837 318.748 86.9337 319.178 87.0437C319.608 87.1537 320.008 87.2087 320.378 87.2087C320.768 87.2087 321.113 87.1437 321.413 87.0137C321.713 86.8737 321.943 86.6737 322.103 86.4137C322.273 86.1537 322.358 85.8337 322.358 85.4537C322.358 84.9837 322.223 84.6337 321.953 84.4037C321.693 84.1637 321.313 84.0037 320.813 83.9237C320.323 83.8337 319.723 83.7887 319.013 83.7887H317.948L318.158 78.1637H324.143L324.113 79.8137H319.673L320.273 79.4387L320.108 82.6787L319.553 82.2287H320.453C321.453 82.2287 322.258 82.3537 322.868 82.6037C323.478 82.8537 323.918 83.2137 324.188 83.6837C324.468 84.1437 324.608 84.6937 324.608 85.3337C324.608 86.1137 324.438 86.7687 324.098 87.2987C323.768 87.8187 323.308 88.2137 322.718 88.4837C322.128 88.7537 321.458 88.8887 320.708 88.8887Z"
fill="#1B1B1B"
/>
{getPhaseStyle(393, 83.2531, 6)}
<path
d="M391.104 84.4637L391.014 83.0537C391.444 82.8037 391.894 82.6037 392.364 82.4537C392.844 82.2937 393.334 82.2137 393.834 82.2137C394.424 82.2137 394.959 82.3337 395.439 82.5737C395.929 82.8037 396.319 83.1537 396.609 83.6237C396.899 84.0837 397.044 84.6587 397.044 85.3487C397.044 86.0987 396.874 86.7387 396.534 87.2687C396.194 87.7987 395.734 88.2037 395.154 88.4837C394.574 88.7637 393.914 88.9037 393.174 88.9037C392.414 88.9037 391.729 88.7387 391.119 88.4087C390.519 88.0787 390.039 87.5637 389.679 86.8637C389.329 86.1537 389.154 85.2287 389.154 84.0887C389.154 82.8187 389.374 81.7287 389.814 80.8187C390.254 79.9087 390.869 79.2087 391.659 78.7187C392.449 78.2287 393.364 77.9837 394.404 77.9837C394.994 77.9837 395.609 78.0687 396.249 78.2387L396.099 79.7837C395.839 79.7237 395.589 79.6837 395.349 79.6637C395.109 79.6437 394.889 79.6337 394.689 79.6337C393.899 79.6337 393.259 79.8087 392.769 80.1587C392.289 80.4987 391.934 81.0037 391.704 81.6737C391.474 82.3437 391.359 83.1687 391.359 84.1487C391.359 85.2087 391.504 85.9937 391.794 86.5037C392.094 87.0037 392.554 87.2537 393.174 87.2537C393.684 87.2537 394.084 87.0987 394.374 86.7887C394.674 86.4787 394.824 86.0287 394.824 85.4387C394.824 85.0487 394.749 84.7287 394.599 84.4787C394.459 84.2287 394.259 84.0387 393.999 83.9087C393.749 83.7787 393.464 83.7137 393.144 83.7137C392.814 83.7137 392.474 83.7787 392.124 83.9087C391.774 84.0287 391.434 84.2137 391.104 84.4637Z"
fill="#1B1B1B"
/>
{getPhaseStyle(465, 83.2531, 7)}
<path
d="M468.839 79.6787L464.954 88.7237H462.569L466.619 79.5437L466.919 79.8587H462.449L462.914 79.5437L462.539 81.3437H461.249V78.1637H468.839V79.6787Z"
fill="#1B1B1B"
/>
{getPhaseStyle(537, 83.2531, 8)}
<path
d="M536.823 88.9037C536.343 88.9037 535.878 88.8437 535.428 88.7237C534.988 88.6037 534.588 88.4237 534.228 88.1837C533.868 87.9337 533.583 87.6337 533.373 87.2837C533.173 86.9237 533.073 86.5087 533.073 86.0387C533.073 85.6687 533.138 85.3237 533.268 85.0037C533.408 84.6837 533.603 84.4037 533.853 84.1637C534.103 83.9137 534.393 83.7087 534.723 83.5487C535.053 83.3787 535.408 83.2537 535.788 83.1737L537.033 83.7887C536.793 83.8487 536.558 83.9387 536.328 84.0587C536.108 84.1687 535.908 84.3037 535.728 84.4637C535.558 84.6237 535.418 84.8087 535.308 85.0187C535.198 85.2287 535.143 85.4687 535.143 85.7387C535.143 86.0687 535.218 86.3587 535.368 86.6087C535.528 86.8487 535.743 87.0387 536.013 87.1787C536.293 87.3087 536.608 87.3737 536.958 87.3737C537.328 87.3737 537.653 87.3037 537.933 87.1637C538.213 87.0237 538.428 86.8337 538.578 86.5937C538.738 86.3537 538.818 86.0837 538.818 85.7837C538.818 85.4337 538.718 85.1487 538.518 84.9287C538.328 84.7087 538.068 84.5187 537.738 84.3587C537.418 84.1987 537.063 84.0537 536.673 83.9237C536.283 83.7937 535.893 83.6537 535.503 83.5037C535.123 83.3437 534.768 83.1537 534.438 82.9337C534.118 82.7137 533.858 82.4437 533.658 82.1237C533.468 81.8037 533.373 81.3987 533.373 80.9087C533.373 80.2487 533.548 79.7037 533.898 79.2737C534.258 78.8437 534.723 78.5237 535.293 78.3137C535.873 78.0937 536.483 77.9837 537.123 77.9837C537.743 77.9837 538.323 78.0837 538.863 78.2837C539.403 78.4837 539.838 78.7887 540.168 79.1987C540.498 79.5987 540.663 80.1037 540.663 80.7137C540.663 81.0637 540.598 81.3787 540.468 81.6587C540.348 81.9387 540.173 82.1787 539.943 82.3787C539.713 82.5787 539.448 82.7487 539.148 82.8887C538.848 83.0287 538.518 83.1437 538.158 83.2337L536.643 82.5737C536.933 82.5437 537.193 82.4837 537.423 82.3937C537.663 82.3037 537.873 82.1887 538.053 82.0487C538.233 81.8987 538.368 81.7287 538.458 81.5387C538.558 81.3387 538.608 81.1187 538.608 80.8787C538.608 80.5787 538.538 80.3287 538.398 80.1287C538.258 79.9187 538.068 79.7637 537.828 79.6637C537.588 79.5537 537.323 79.4987 537.033 79.4987C536.753 79.4987 536.493 79.5487 536.253 79.6487C536.013 79.7487 535.818 79.8987 535.668 80.0987C535.518 80.2887 535.443 80.5287 535.443 80.8187C535.443 81.1487 535.543 81.4237 535.743 81.6437C535.943 81.8537 536.203 82.0337 536.523 82.1837C536.843 82.3337 537.198 82.4737 537.588 82.6037C537.978 82.7337 538.368 82.8787 538.758 83.0387C539.148 83.1887 539.503 83.3787 539.823 83.6087C540.153 83.8287 540.413 84.1087 540.603 84.4487C540.803 84.7787 540.903 85.1887 540.903 85.6787C540.903 86.2087 540.788 86.6787 540.558 87.0887C540.328 87.4887 540.018 87.8237 539.628 88.0937C539.238 88.3537 538.798 88.5537 538.308 88.6937C537.828 88.8337 537.333 88.9037 536.823 88.9037Z"
fill="#1B1B1B"
/>
</svg>
</div>
);
}
DesktopClaimPhaseDiagram.propTypes = {
currentPhase: PropTypes.number.isRequired,
};