Adjusted stepper for shipment tracking
This commit is contained in:
GotthardG
@ -2,20 +2,32 @@ 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 RecycleIcon from '@mui/icons-material/Restore';
|
||||
import { Dewar } from "../../openapi";
|
||||
|
||||
// Constants
|
||||
const ICON_STYLE = { width: 24, height: 24 };
|
||||
|
||||
// Define the possible statuses
|
||||
type DewarStatus = 'In Preparation' | 'Ready for Shipping' | 'Shipped' | 'Not Arrived' | 'Arrived' | 'Returned' | 'Delayed';
|
||||
|
||||
// Inline SVG Component
|
||||
const BottleIcon: React.FC<{ fill: string }> = ({ fill }) => (
|
||||
<svg fill={fill} height="24px" width="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.777 276.777">
|
||||
<path d="M190.886,82.273c-3.23-2.586-7.525-7.643-7.525-21.639V43h8.027V0h-106v43h8.027v17.635c0,11.66-1.891,17.93-6.524,21.639 c-21.813,17.459-31.121,36.748-31.121,64.5v100.088c0,16.496,13.42,29.916,29.916,29.916h105.405 c16.496,0,29.916-13.42,29.916-29.916V146.773C221.007,121.103,210.029,97.594,190.886,82.273z M191.007,246.777H85.77V146.773 c0-18.589,5.199-29.339,19.867-41.078c15.758-12.612,17.778-30.706,17.778-45.061V43h29.945v17.635 c0,19.927,6.318,35.087,18.779,45.061c11.99,9.597,18.867,24.568,18.867,41.078V246.777z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Define types for icons mapping.
|
||||
const ICONS: { [key: number]: React.ReactElement } = {
|
||||
0: <img src={bottleIcon} alt="Bottle Icon" style={ICON_STYLE} />,
|
||||
1: <AirplanemodeActiveIcon style={ICON_STYLE} />,
|
||||
2: <StoreIcon style={ICON_STYLE} />,
|
||||
0: <BottleIcon fill="grey" />,
|
||||
1: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'blue' }} />, // 'Ready for Shipping' -> Active
|
||||
2: <StoreIcon style={ICON_STYLE} />, // 'Not Arrived'
|
||||
3: <RecycleIcon style={ICON_STYLE} />, // 'Returned'
|
||||
4: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'green' }} />, // 'Shipped' - Active
|
||||
5: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'yellow' }} />, // 'Delayed'
|
||||
};
|
||||
|
||||
// Define StepIconContainer to accept correct props and handle typing better
|
||||
// Define StepIconContainer to accept correct props and handle typing better.
|
||||
interface StepIconContainerProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
color: string;
|
||||
}
|
||||
@ -32,70 +44,72 @@ type StepIconComponentProps = {
|
||||
} & StepIconProps;
|
||||
|
||||
const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
|
||||
const { iconIndex, color } = getIconProperties(icon, dewar);
|
||||
const { iconIndex, color, fill } = getIconProperties(icon, dewar);
|
||||
|
||||
// Adjust icon color for the bottle especially since it's an SVG element
|
||||
const IconComponent = ICONS[iconIndex];
|
||||
const iconProps = iconIndex === 0 ? { fill: color } : {};
|
||||
|
||||
return (
|
||||
<StepIconContainer color={color} {...props}>
|
||||
{ICONS[iconIndex]}
|
||||
{IconComponent
|
||||
? React.cloneElement(IconComponent, iconProps)
|
||||
: <Typography variant="body2" color="error">Invalid icon</Typography>
|
||||
}
|
||||
</StepIconContainer>
|
||||
);
|
||||
};
|
||||
|
||||
// Extracted function to determine icon properties
|
||||
const getIconProperties = (icon: number, dewar: Dewar) => {
|
||||
const iconIndex = icon - 1;
|
||||
const color = determineIconColor(dewar, iconIndex);
|
||||
return { iconIndex, color };
|
||||
const status = dewar.status as DewarStatus;
|
||||
const iconIndex = status === 'Delayed' && icon === 1 ? 5 : icon;
|
||||
const color = determineIconColor(icon, status);
|
||||
const fill = status === 'In Preparation' ? color : undefined;
|
||||
return { iconIndex, color, fill };
|
||||
};
|
||||
|
||||
// Original determineIconColor function remains unchanged
|
||||
const determineIconColor = (dewar: Dewar, index: number) => {
|
||||
let color = 'grey';
|
||||
const STATUS_TO_STEP: Record<DewarStatus, number> = {
|
||||
'In Preparation': 0,
|
||||
'Ready for Shipping': 1,
|
||||
'Shipped': 1,
|
||||
'Delayed': 1,
|
||||
'Not Arrived': 2,
|
||||
'Arrived': 2,
|
||||
'Returned': 3
|
||||
};
|
||||
|
||||
if (index === 0) {
|
||||
if (dewar.status === 'In Preparation') {
|
||||
color = 'blue';
|
||||
} else if (dewar.status === 'Ready for Shipping') {
|
||||
color = 'green';
|
||||
}
|
||||
const getStatusStepIndex = (status: DewarStatus): number => STATUS_TO_STEP[status];
|
||||
|
||||
const determineIconColor = (iconIndex: number, status: DewarStatus): string => {
|
||||
const statusIndex = getStatusStepIndex(status);
|
||||
if (status === 'Delayed' && iconIndex === 1) {
|
||||
return 'yellow';
|
||||
}
|
||||
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;
|
||||
return iconIndex <= statusIndex ? (iconIndex === statusIndex ? (status === 'Shipped' ? 'green' : 'blue') : 'green') : 'grey';
|
||||
};
|
||||
|
||||
// Define your steps
|
||||
const steps = ['In Preparation', 'Ready for Shipping', 'Arrived'];
|
||||
const steps = ['In-House', 'Transit', 'At SLS', 'Returned'];
|
||||
|
||||
const CustomStepper = ({ dewar }: { dewar: Dewar }) => {
|
||||
// Determine the current active step
|
||||
const activeStep = steps.indexOf(dewar.status) !== -1 ? steps.indexOf(dewar.status) : 0;
|
||||
const activeStep = getStatusStepIndex(dewar.status as DewarStatus);
|
||||
|
||||
return (
|
||||
<Stepper alternativeLabel activeStep={activeStep}>
|
||||
{steps.map((label, index) => (
|
||||
<Step key={label}>
|
||||
<StepLabel
|
||||
StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index + 1} dewar={dewar} />}
|
||||
StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index} dewar={dewar} />}
|
||||
>
|
||||
{label}
|
||||
</StepLabel>
|
||||
<Typography variant="body2">
|
||||
{index === 0 ? dewar.ready_date :
|
||||
index === 1 ? dewar.shipping_date :
|
||||
index === 2 ? dewar.arrival_date : ''}
|
||||
index === 2 ? dewar.arrival_date :
|
||||
index === 3 ? dewar.returning_date : null}
|
||||
</Typography>
|
||||
</Step>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user