import React from 'react'; import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material'; import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; import StoreIcon from '@mui/icons-material/Store'; import bottleIcon from '../assets/icons/bottle-svgrepo-com-grey.svg'; import { Dewar } from "../../openapi"; // Constants const ICON_STYLE = { width: 24, height: 24 }; // Define types for icons mapping. const ICONS: { [key: number]: React.ReactElement } = { 0: Bottle Icon, 1: , 2: , }; // Define StepIconContainer to accept correct props and handle typing better interface StepIconContainerProps extends React.HTMLAttributes { color: string; } const StepIconContainer: React.FC = ({ color, children, ...rest }) => (
{children}
); type StepIconComponentProps = { icon: number; dewar: Dewar; } & StepIconProps; const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => { const { iconIndex, color } = getIconProperties(icon, dewar); return ( {ICONS[iconIndex]} ); }; // Extracted function to determine icon properties const getIconProperties = (icon: number, dewar: Dewar) => { const iconIndex = icon - 1; const color = determineIconColor(dewar, iconIndex); return { iconIndex, color }; }; // Original determineIconColor function remains unchanged const determineIconColor = (dewar: Dewar, index: number) => { let color = 'grey'; if (index === 0) { if (dewar.status === 'In Preparation') { color = 'blue'; } else if (dewar.status === 'Ready for Shipping') { color = 'green'; } } if (index === 1) { if (dewar.status === 'Ready for Shipping' && dewar.shippingStatus !== 'shipped') { color = 'blue'; } else if (dewar.shippingStatus === 'shipped') { color = 'green'; } } if (index === 2) { if (dewar.shippingStatus === 'shipped' && dewar.arrivalStatus !== 'arrived') { color = 'blue'; } else if (dewar.arrivalStatus === 'arrived') { color = 'green'; } } return color; }; // Define your steps const steps = ['In Preparation', 'Ready for Shipping', 'Arrived']; const CustomStepper = ({ dewar }: { dewar: Dewar }) => { // Determine the current active step const activeStep = steps.indexOf(dewar.status) !== -1 ? steps.indexOf(dewar.status) : 0; return ( {steps.map((label, index) => ( } > {label} {index === 0 ? dewar.ready_date : index === 1 ? dewar.shipping_date : index === 2 ? dewar.arrival_date : ''} ))} ); }; export default CustomStepper;