%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/components/Package.js |
import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import { Box, Card, Divider, Grid, Typography, } from "@material-ui/core"; import { Button } from "common/components"; import { arrayOf, bool, func, node, number, shape, string, } from "prop-types"; const useStyles = makeStyles({ cardBorder: { border: "1px solid #B1B1B1", borderRadius: "3px", }, divider: { paddingLeft: "0px !important", paddingRight: "0px !important", }, horizontalLine: { backgroundColor: "#B1B1B1", }, priceDescription: { whiteSpace: "nowrap", "@media (min-width: 600px) and (max-width: 825px)": { height: "36px", whiteSpace: "normal", }, "@media (max-width: 599px)": { whiteSpace: "normal", }, }, subtitle: { fontSize: "12px", fontWeight: 300, "@media (min-width: 750px)": { height: "40px", }, "@media (min-width: 620px) and (max-width: 750px)": { height: "50px", }, "@media (min-width: 600px) and (max-width: 620px)": { height: "65px", }, }, tick: { fontSize: "12px", "&::before": { content: "''", display: "inline-flex", borderColor: "#10B462", borderStyle: "solid", borderWidth: "0 0.15em 0.15em 0", height: "1em", transform: "rotate(45deg)", width: "0.5em", }, }, typography: { fontSize: (props) => props.fontSize, fontWeight: (props) => props.fontWeight, marginBottom: (props) => props.marginBottom, }, twoLineText: { whiteSpace: "pre-line", }, }); function ContentList({ items }) { return items.map((item, index) => ( <ListItem key={item.id} content={item.content} isPrice={index === items.length - 1} /> )); } function ListItem({ content, isPrice }) { const classes = useStyles(); return ( <Grid item container style={{ paddingLeft: "0px" }}> <Grid item xs={2} className={classes.tick} /> <Grid item xs={10} style={{ fontSize: "12px", textAlign: "left" }} className={isPrice ? classes.priceDescription : ""}>{content}</Grid> </Grid> ); } function Subtitle({ children, ...props }) { const { subtitle } = useStyles(props); return ( <Typography className={subtitle}>{children}</Typography> ); } function TypographyWrapper({ children, ...props }) { const { typography } = useStyles(props); return ( <Typography className={typography}>{children}</Typography> ); } function Package({ description, price, name, priceSpecifier, onClick, selectButtonLabel, subtitle, }) { const classes = useStyles(); const selectBtnText = `${selectButtonLabel} ${name}`; return ( <Card className={classes.cardBorder} elevation={0}> <Box ml={7} mr={7} mt={5} mb={5}> <Grid container direction="column" spacing={3}> <Grid item style={{ paddingBottom: "0px" }}> <TypographyWrapper fontWeight={700} fontSize="20px" marginBottom="0.5em">{name}</TypographyWrapper> <Subtitle><span className={classes.twoLineText}>{subtitle}</span></Subtitle> </Grid> <Grid item className={classes.divider}> <Divider className={classes.horizontalLine} /> </Grid> <ContentList items={description} /> <Grid item className={classes.divider}> <Divider className={classes.horizontalLine} /> </Grid> <Grid item style={{ paddingTop: "0px" }}> <TypographyWrapper fontSize="18px" marginBottom="0.2em">{price}</TypographyWrapper> <TypographyWrapper fontSize="14px">{priceSpecifier}</TypographyWrapper> </Grid> <Button primary fullWidth onClick={onClick}> {selectBtnText} </Button> </Grid> </Box> </Card> ); } ContentList.propTypes = { items: arrayOf(shape({ content: string, id: number })).isRequired, }; ListItem.propTypes = { content: string.isRequired, isPrice: bool.isRequired, }; Package.propTypes = { description: arrayOf(shape({ content: string, id: number })).isRequired, name: string.isRequired, onClick: func.isRequired, price: string.isRequired, priceSpecifier: string.isRequired, selectButtonLabel: string.isRequired, subtitle: string.isRequired, }; Subtitle.propTypes = { children: node.isRequired, }; TypographyWrapper.propTypes = { children: node.isRequired, fontSize: string.isRequired, fontWeight: number, marginBottom: string, }; TypographyWrapper.defaultProps = { fontWeight: 400, marginBottom: "", }; export default Package;