// ** MUI Imports import Button from '@mui/material/Button' import { styled } from '@mui/material/styles' import Typography from '@mui/material/Typography' import Box, { BoxProps } from '@mui/material/Box' import Image from 'next/image' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Util Import import { hexToRGBA } from 'src/@core/utils/hex-to-rgba' // ** Custom Components Imports import CustomChip from 'src/@core/components/mui/chip' // ** Types import { PricingPlanProps } from './types' // ** Styled Component for the wrapper of whole component const BoxWrapper = styled(Box)(({ theme }) => ({ position: 'relative', padding: theme.spacing(6), paddingTop: theme.spacing(14.75), borderRadius: theme.shape.borderRadius })) // ** Styled Component for the wrapper of all the features of a plan const BoxFeature = styled(Box)(({ theme }) => ({ marginBottom: theme.spacing(5), '& > :not(:first-of-type)': { marginTop: theme.spacing(4) } })) const PlanDetails = (props: PricingPlanProps) => { // ** Props const { plan, data } = props const renderFeatures = () => { return data?.planBenefits.map((item: string, index: number) => ( {item} )) } return ( !data?.popularPlan ? `1px solid ${theme.palette.divider}` : `1px solid ${hexToRGBA(theme.palette.primary.main, 0.5)}` }} > {data?.popularPlan ? ( ) : null} {`${data?.title.toLowerCase().replace(' {data?.title} {data?.subtitle} $ {plan === 'monthly' ? data?.monthlyPrice : data?.yearlyPlan.perMonth} /month {plan !== 'monthly' && data?.monthlyPrice !== 0 ? ( {`USD ${data?.yearlyPlan.totalAnnual}/year`} ) : null} {renderFeatures()} ) } export default PlanDetails