src/applications/claims-status/components/claim-overview-tab/MobileClaimPhaseDiagram.jsx
import React from 'react';
import PropTypes from 'prop-types';
export default function MobileClaimPhaseDiagram({ currentPhase }) {
const getPhaseStyle = (x, y, phase) => {
if (phase === currentPhase) {
return (
<>
<circle
cx={x}
cy={y}
r="15.5"
fill="white"
stroke="#005EA2"
strokeWidth="3"
/>
<circle cx={x} cy={y} r="12.0263" fill="white" stroke="#005EA2" />
</>
);
}
return <circle cx={x} cy={y} r="16.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="mobile vads-u-margin-bottom--4">
<svg
width="352"
height="115"
viewBox="0 0 352 115"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>{accessibilityTitle}</title>
<rect
width="352"
height="114"
transform="translate(0 1)"
fill="white"
/>
<rect
x="105.5"
y="22.6867"
width="136.407"
height="71"
rx="30.5"
fill="white"
stroke="#757575"
strokeWidth="3"
strokeDasharray="6 4"
/>
<path
d="M174.051 103.134L173.395 102.511C173.118 102.248 172.669 102.248 172.394 102.511L166.652 107.96C166.374 108.223 166.374 108.649 166.652 108.91L172.394 114.361C172.672 114.625 173.121 114.625 173.395 114.361L174.051 113.739C174.332 113.472 174.326 113.038 174.039 112.777L170.48 109.558H178.969C179.362 109.558 179.678 109.258 179.678 108.885V107.988C179.678 107.615 179.362 107.315 178.969 107.315H170.48L174.039 104.096C174.329 103.835 174.335 103.4 174.051 103.134Z"
fill="#565C65"
/>
<path
d="M172.36 1.67731L173.016 1.05483C173.293 0.791252 173.742 0.791252 174.017 1.05483L179.759 6.50299C180.037 6.76656 180.037 7.19277 179.759 7.45354L174.017 12.9045C173.739 13.1681 173.29 13.1681 173.016 12.9045L172.36 12.282C172.079 12.0156 172.085 11.581 172.372 11.3202L175.931 8.10126H167.442C167.049 8.10126 166.733 7.80124 166.733 7.42831V6.53103C166.733 6.1581 167.049 5.85807 167.442 5.85807L175.931 5.85807L172.372 2.63908C172.082 2.37831 172.076 1.94369 172.36 1.67731Z"
fill="#565C65"
/>
<path
d="M40.2143 57.7171H44.2143"
stroke="#3D4551"
strokeLinecap="round"
/>
{getPhaseStyle(20, 57.7171, 1)}
<path
d="M21.6077 61.2571L21.2027 60.7021L23.1677 61.1371V62.2171H17.5427V61.1371L19.8827 60.7321L19.4627 61.2571V53.4271L20.0477 53.4571L17.5577 54.8371L16.8677 53.5321L19.8227 51.5971H21.6077V61.2571Z"
fill="#1B1B1B"
/>
{getPhaseStyle(64.4286, 57.7171, 2)}
<path
d="M60.7275 62.4276V60.6276C61.8675 59.6876 62.7975 58.8826 63.5175 58.2126C64.2475 57.5426 64.7875 56.9426 65.1375 56.4126C65.4875 55.8726 65.6625 55.3426 65.6625 54.8226C65.6625 54.3026 65.4975 53.9176 65.1675 53.6676C64.8375 53.4176 64.4175 53.2926 63.9075 53.2926C63.6675 53.2926 63.4075 53.3226 63.1275 53.3826C62.8475 53.4326 62.5575 53.5076 62.2575 53.6076L62.4975 53.2476L62.2275 54.9426H60.9525L60.7875 52.2576C61.4075 52.0676 62.0125 51.9276 62.6025 51.8376C63.1925 51.7376 63.7475 51.6876 64.2675 51.6876C64.9775 51.6876 65.6075 51.7826 66.1575 51.9726C66.7075 52.1626 67.1375 52.4676 67.4475 52.8876C67.7575 53.3076 67.9125 53.8526 67.9125 54.5226C67.9125 55.2526 67.7275 55.9526 67.3575 56.6226C66.9875 57.2926 66.4525 57.9826 65.7525 58.6926C65.0525 59.3926 64.2025 60.1576 63.2025 60.9876V60.7476H68.1375V62.4276H60.7275Z"
fill="#1B1B1B"
/>
{getPhaseStyle(108.857, 57.7171, 3)}
<path
d="M108.331 62.3971C107.741 62.3971 107.156 62.3271 106.576 62.1871C105.996 62.0471 105.446 61.8371 104.926 61.5571L105.481 60.0571C105.931 60.2671 106.391 60.4321 106.861 60.5521C107.341 60.6721 107.801 60.7321 108.241 60.7321C108.641 60.7321 108.996 60.6771 109.306 60.5671C109.626 60.4471 109.876 60.2671 110.056 60.0271C110.246 59.7771 110.341 59.4621 110.341 59.0821C110.341 58.7521 110.266 58.4721 110.116 58.2421C109.966 58.0021 109.736 57.8221 109.426 57.7021C109.116 57.5721 108.721 57.5071 108.241 57.5071H106.921V55.9921H108.166C108.816 55.9921 109.306 55.8671 109.636 55.6171C109.976 55.3571 110.146 54.9821 110.146 54.4921C110.146 53.9621 109.971 53.5871 109.621 53.3671C109.281 53.1371 108.851 53.0221 108.331 53.0221C108.021 53.0221 107.716 53.0521 107.416 53.1121C107.116 53.1721 106.821 53.2521 106.531 53.3521L106.816 53.0671L106.621 54.6271H105.346L105.226 52.0921C105.826 51.8921 106.426 51.7421 107.026 51.6421C107.636 51.5321 108.221 51.4771 108.781 51.4771C109.451 51.4771 110.051 51.5671 110.581 51.7471C111.121 51.9171 111.546 52.1971 111.856 52.5871C112.166 52.9671 112.321 53.4821 112.321 54.1321C112.321 54.9021 112.086 55.5071 111.616 55.9471C111.156 56.3771 110.506 56.6421 109.666 56.7421L109.591 56.5621C110.591 56.6321 111.326 56.8871 111.796 57.3271C112.276 57.7671 112.516 58.3771 112.516 59.1571C112.516 59.7171 112.406 60.2021 112.186 60.6121C111.966 61.0121 111.661 61.3471 111.271 61.6171C110.881 61.8871 110.431 62.0871 109.921 62.2171C109.421 62.3371 108.891 62.3971 108.331 62.3971Z"
fill="#1B1B1B"
/>
<path
d="M84.6429 57.7171H88.6429"
stroke="#3D4551"
strokeLinecap="round"
/>
<path
d="M129.071 57.7171H132.071"
stroke="#3D4551"
strokeLinecap="round"
/>
{getPhaseStyle(152.286, 57.7171, 4)}
<path
d="M152.98 59.4571L153.52 59.8921H148.06L147.835 58.4071L152.605 51.4621L155.125 51.6571V58.6321L154.6 58.2421H156.685V59.8921H154.6L155.125 59.4571V62.2171H152.98V59.4571ZM153.55 58.2421L153.025 58.6321V52.6771L153.745 52.7971L149.515 59.0071L149.11 58.2421H153.55Z"
fill="#1B1B1B"
/>
<path d="M172.5 57.7171H176.5" stroke="#3D4551" strokeLinecap="round" />
{getPhaseStyle(196.714, 57.7171, 5)}
<path
d="M196.423 62.3821C195.333 62.3821 194.203 62.1171 193.033 61.5871L193.618 60.0871C194.038 60.2771 194.463 60.4271 194.893 60.5371C195.323 60.6471 195.723 60.7021 196.093 60.7021C196.483 60.7021 196.828 60.6371 197.128 60.5071C197.428 60.3671 197.658 60.1671 197.818 59.9071C197.988 59.6471 198.073 59.3271 198.073 58.9471C198.073 58.4771 197.938 58.1271 197.668 57.8971C197.408 57.6571 197.028 57.4971 196.528 57.4171C196.038 57.3271 195.438 57.2821 194.728 57.2821H193.663L193.873 51.6571H199.858L199.828 53.3071H195.388L195.988 52.9321L195.823 56.1721L195.268 55.7221H196.168C197.168 55.7221 197.973 55.8471 198.583 56.0971C199.193 56.3471 199.633 56.7071 199.903 57.1771C200.183 57.6371 200.323 58.1871 200.323 58.8271C200.323 59.6071 200.153 60.2621 199.813 60.7921C199.483 61.3121 199.023 61.7071 198.433 61.9771C197.843 62.2471 197.173 62.3821 196.423 62.3821Z"
fill="#1B1B1B"
/>
<path
d="M216.929 57.7171H220.929"
stroke="#3D4551"
strokeLinecap="round"
/>
{getPhaseStyle(241.143, 57.7171, 6)}
<path
d="M239.247 57.9571L239.157 56.5471C239.587 56.2971 240.037 56.0971 240.507 55.9471C240.987 55.7871 241.477 55.7071 241.977 55.7071C242.567 55.7071 243.102 55.8271 243.582 56.0671C244.072 56.2971 244.462 56.6471 244.752 57.1171C245.042 57.5771 245.187 58.1521 245.187 58.8421C245.187 59.5921 245.017 60.2321 244.677 60.7621C244.337 61.2921 243.877 61.6971 243.297 61.9771C242.717 62.2571 242.057 62.3971 241.317 62.3971C240.557 62.3971 239.872 62.2321 239.262 61.9021C238.662 61.5721 238.182 61.0571 237.822 60.3571C237.472 59.6471 237.297 58.7221 237.297 57.5821C237.297 56.3121 237.517 55.2221 237.957 54.3121C238.397 53.4021 239.012 52.7021 239.802 52.2121C240.592 51.7221 241.507 51.4771 242.547 51.4771C243.137 51.4771 243.752 51.5621 244.392 51.7321L244.242 53.2771C243.982 53.2171 243.732 53.1771 243.492 53.1571C243.252 53.1371 243.032 53.1271 242.832 53.1271C242.042 53.1271 241.402 53.3021 240.912 53.6521C240.432 53.9921 240.077 54.4971 239.847 55.1671C239.617 55.8371 239.502 56.6621 239.502 57.6421C239.502 58.7021 239.647 59.4871 239.937 59.9971C240.237 60.4971 240.697 60.7471 241.317 60.7471C241.827 60.7471 242.227 60.5921 242.517 60.2821C242.817 59.9721 242.967 59.5221 242.967 58.9321C242.967 58.5421 242.892 58.2221 242.742 57.9721C242.602 57.7221 242.402 57.5321 242.142 57.4021C241.892 57.2721 241.607 57.2071 241.287 57.2071C240.957 57.2071 240.617 57.2721 240.267 57.4021C239.917 57.5221 239.577 57.7071 239.247 57.9571Z"
fill="#1B1B1B"
/>
<path
d="M261.357 57.7171H265.357"
stroke="#3D4551"
strokeLinecap="round"
/>
{getPhaseStyle(285.571, 57.7171, 7)}
<path
d="M289.411 53.1721L285.526 62.2171H283.141L287.191 53.0371L287.491 53.3521H283.021L283.486 53.0371L283.111 54.8371H281.821V51.6571H289.411V53.1721Z"
fill="#1B1B1B"
/>
<path
d="M305.786 57.7171H309.786"
stroke="#3D4551"
strokeLinecap="round"
/>
{getPhaseStyle(330, 57.7171, 8)}
<path
d="M329.823 62.3971C329.343 62.3971 328.878 62.3371 328.428 62.2171C327.988 62.0971 327.588 61.9171 327.228 61.6771C326.868 61.4271 326.583 61.1271 326.373 60.7771C326.173 60.4171 326.073 60.0021 326.073 59.5321C326.073 59.1621 326.138 58.8171 326.268 58.4971C326.408 58.1771 326.603 57.8971 326.853 57.6571C327.103 57.4071 327.393 57.2021 327.723 57.0421C328.053 56.8721 328.408 56.7471 328.788 56.6671L330.033 57.2821C329.793 57.3421 329.558 57.4321 329.328 57.5521C329.108 57.6621 328.908 57.7971 328.728 57.9571C328.558 58.1171 328.418 58.3021 328.308 58.5121C328.198 58.7221 328.143 58.9621 328.143 59.2321C328.143 59.5621 328.218 59.8521 328.368 60.1021C328.528 60.3421 328.743 60.5321 329.013 60.6721C329.293 60.8021 329.608 60.8671 329.958 60.8671C330.328 60.8671 330.653 60.7971 330.933 60.6571C331.213 60.5171 331.428 60.3271 331.578 60.0871C331.738 59.8471 331.818 59.5771 331.818 59.2771C331.818 58.9271 331.718 58.6421 331.518 58.4221C331.328 58.2021 331.068 58.0121 330.738 57.8521C330.418 57.6921 330.063 57.5471 329.673 57.4171C329.283 57.2871 328.893 57.1471 328.503 56.9971C328.123 56.8371 327.768 56.6471 327.438 56.4271C327.118 56.2071 326.858 55.9371 326.658 55.6171C326.468 55.2971 326.373 54.8921 326.373 54.4021C326.373 53.7421 326.548 53.1971 326.898 52.7671C327.258 52.3371 327.723 52.0171 328.293 51.8071C328.873 51.5871 329.483 51.4771 330.123 51.4771C330.743 51.4771 331.323 51.5771 331.863 51.7771C332.403 51.9771 332.838 52.2821 333.168 52.6921C333.498 53.0921 333.663 53.5971 333.663 54.2071C333.663 54.5571 333.598 54.8721 333.468 55.1521C333.348 55.4321 333.173 55.6721 332.943 55.8721C332.713 56.0721 332.448 56.2421 332.148 56.3821C331.848 56.5221 331.518 56.6371 331.158 56.7271L329.643 56.0671C329.933 56.0371 330.193 55.9771 330.423 55.8871C330.663 55.7971 330.873 55.6821 331.053 55.5421C331.233 55.3921 331.368 55.2221 331.458 55.0321C331.558 54.8321 331.608 54.6121 331.608 54.3721C331.608 54.0721 331.538 53.8221 331.398 53.6221C331.258 53.4121 331.068 53.2571 330.828 53.1571C330.588 53.0471 330.323 52.9921 330.033 52.9921C329.753 52.9921 329.493 53.0421 329.253 53.1421C329.013 53.2421 328.818 53.3921 328.668 53.5921C328.518 53.7821 328.443 54.0221 328.443 54.3121C328.443 54.6421 328.543 54.9171 328.743 55.1371C328.943 55.3471 329.203 55.5271 329.523 55.6771C329.843 55.8271 330.198 55.9671 330.588 56.0971C330.978 56.2271 331.368 56.3721 331.758 56.5321C332.148 56.6821 332.503 56.8721 332.823 57.1021C333.153 57.3221 333.413 57.6021 333.603 57.9421C333.803 58.2721 333.903 58.6821 333.903 59.1721C333.903 59.7021 333.788 60.1721 333.558 60.5821C333.328 60.9821 333.018 61.3171 332.628 61.5871C332.238 61.8471 331.798 62.0471 331.308 62.1871C330.828 62.3271 330.333 62.3971 329.823 62.3971Z"
fill="#1B1B1B"
/>
</svg>
</div>
);
}
MobileClaimPhaseDiagram.propTypes = {
currentPhase: PropTypes.number.isRequired,
};