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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import { Select } from "@common/Select";
import { Text } from "@common/Text";
import { Box } from "@mui/material";
import { palette } from "@palette";
import { KotoChevronDown } from "@assets/icons";
type Props = {
handleChangeDuration: any;
handleChangeSubDuration: any;
duration: any;
subDuration: any;
isDesktop: boolean;
arr: any;
column: string;
addToCartHandler: any;
formattedDate: any;
};
const CardOptions = ({
handleChangeDuration,
duration,
subDuration,
isDesktop,
column,
addToCartHandler,
handleChangeSubDuration,
arr,
}: Props) => {
const options = arr.map((type: any) => {
return {
value: type.title || type,
label: type.title || type,
};
});
return (
<>
{isDesktop ? (
<Select
shouldDisplayIcon={arr.length > 1}
DropIcon={<KotoChevronDown />}
onChange={(e) => {
e.preventDefault();
column !== "Duration"
? handleChangeDuration(e.target.value, addToCartHandler)
: handleChangeSubDuration(e.target.value, addToCartHandler);
}}
value={column !== "Duration" ? duration : subDuration}
fullWidth
sx={{
"& .MuiInputBase-root": {
borderRadius: "90px",
border: "none",
color: palette.neutral.black,
width: "100%",
minWidth: "100%",
paddingLeft: 0,
paddingRight: 0,
cursor: "default",
},
"& .MuiSelect-select": {
padding: "0 !important",
flexGrow: 1,
},
}}
options={options}
isOptionNonClickable={options?.length < 2}
/>
) : (
<>
{arr.map((type: any, key: number) => {
const title = type.title || type;
const isDurationColumn = column === "Duration";
const isActive = title === duration || title === subDuration;
const sanitize = (str: string) => {
return str.replace(/[A-Za-z]/g, "");
};
return (
<Box
key={key}
my="8px"
py="8px"
px={
!isDurationColumn || key === arr.length - 1 ? "8px" : "12px"
}
onClick={(e: any) => {
!isDurationColumn
? handleChangeDuration(title, addToCartHandler)
: handleChangeSubDuration(title, addToCartHandler);
}}
sx={{
...(isActive && {
outline: `1px solid ${palette.neutral[30]}`,
borderRadius: "4px",
backgroundColor: "#FBFBFB",
}),
}}
>
<Text width="100%" fontSize={12} align="center">
{isDurationColumn && key !== arr.length - 1
? sanitize(title)
: title}
</Text>
</Box>
);
})}
</>
)}
</>
);
};
export default CardOptions;
|