Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import { palette } from "@palette";
// mui
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import LinearProgress, {
linearProgressClasses,
} from "@mui/material/LinearProgress";
// components
import { Text } from "@common/Text";
import { KeyVal } from "@common/KeyVal";
type PaymentDetailsProps = {
Type: string;
Recurrence: string;
Donated?: string;
};
const Progress = styled(LinearProgress)(({ theme }) => ({
width: 120,
height: "8px",
borderRadius: "32px",
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: palette.neutral[20],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: "32px",
backgroundColor: palette.neutral[100],
},
}));
function ExtraPurchaseInfo({ Type, Recurrence }: PaymentDetailsProps) {
return (
<Grid
container
sx={{
padding: "0px",
"& > :nth-of-type(odd)": {
backgroundColor: "#F6FBFF",
},
}}
>
<Grid item xs={12}>
<KeyVal
sx={{ color: palette.neutral[600] }}
keyName="Type"
value={<Text fontWeight="medium">{Type}</Text>}
mobileView={true}
/>
</Grid>
<Grid item xs={12}>
<Stack direction="row" p="12px 8px" justifyContent="space-between">
<Text color={palette.neutral[600]}>Recurrence</Text>
<Box>
<Text
textAlign="right"
fontWeight="medium"
textTransform="capitalize"
>
{Recurrence}
</Text>
{Recurrence.toLowerCase() !== "one time" && (
<Stack mt={1} gap="4px" direction="row" alignItems="center">
<Text>3 out of 6</Text>
<Box>
<Progress variant="determinate" value={50} />
</Box>
</Stack>
)}
</Box>
</Stack>
</Grid>
<Grid item xs={12}>
<KeyVal
sx={{ color: palette.neutral[600] }}
keyName="Donated"
value={
<Text fontWeight="medium">Enter any amount xQty@64.00USD each</Text>
}
mobileView={true}
/>
</Grid>
</Grid>
);
}
export default ExtraPurchaseInfo;
|