// ** React Imports import { useState, ChangeEvent } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Grid from '@mui/material/Grid' import Alert from '@mui/material/Alert' import Table from '@mui/material/Table' import Button from '@mui/material/Button' import Dialog from '@mui/material/Dialog' import Select from '@mui/material/Select' import Switch from '@mui/material/Switch' import Divider from '@mui/material/Divider' import MenuItem from '@mui/material/MenuItem' import TableRow from '@mui/material/TableRow' import { styled } from '@mui/material/styles' import TableCell from '@mui/material/TableCell' import TableBody from '@mui/material/TableBody' import TextField from '@mui/material/TextField' import CardHeader from '@mui/material/CardHeader' import Typography from '@mui/material/Typography' import AlertTitle from '@mui/material/AlertTitle' import InputLabel from '@mui/material/InputLabel' import CardContent from '@mui/material/CardContent' import DialogTitle from '@mui/material/DialogTitle' import FormControl from '@mui/material/FormControl' import DialogContent from '@mui/material/DialogContent' import DialogActions from '@mui/material/DialogActions' import LinearProgress from '@mui/material/LinearProgress' import TableContainer from '@mui/material/TableContainer' import FormControlLabel from '@mui/material/FormControlLabel' import DialogContentText from '@mui/material/DialogContentText' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Third Party Imports import Payment from 'payment' import Cards, { Focused } from 'react-credit-cards' // ** Custom Components import CustomChip from 'src/@core/components/mui/chip' import UserSubscriptionDialog from 'src/views/apps/user/view/UserSubscriptionDialog' // ** Util Import import { formatCVC, formatExpirationDate, formatCreditCardNumber } from 'src/@core/utils/format' // ** Types import { ThemeColor } from 'src/@core/layouts/types' // ** Styled Component Imports import CardWrapper from 'src/@core/styles/libs/react-credit-cards' // ** Styles Import import 'react-credit-cards/es/styles-compiled.css' import Image from 'next/image' interface DataType { name: string imgSrc: string imgAlt: string cardCvc: string expiryDate: string cardNumber: string cardStatus?: string badgeColor?: ThemeColor } // ** Styled component const Sup = styled('sup')(({ theme }) => ({ top: '0.2rem', left: '-0.6rem', position: 'absolute', color: theme.palette.primary.main })) // ** Styled component const Sub = styled('sub')({ fontWeight: 300, fontSize: '1rem', alignSelf: 'flex-end' }) const data: DataType[] = [ { cardCvc: '587', name: 'Tom McBride', expiryDate: '12/24', imgAlt: 'Mastercard', badgeColor: 'primary', cardStatus: 'Popular', cardNumber: '5577 0000 5577 9865', imgSrc: '/images/logos/mastercard.png' }, { cardCvc: '681', imgAlt: 'Visa card', expiryDate: '02/24', name: 'Mildred Wagner', cardNumber: '4532 3616 2070 5678', imgSrc: '/images/logos/visa.png' }, { cardCvc: '3845', expiryDate: '08/20', badgeColor: 'error', cardStatus: 'Expired', name: 'Lester Jennings', imgAlt: 'American Express card', cardNumber: '3700 000000 00002', imgSrc: '/images/logos/american-express.png' } ] const UserViewBilling = () => { // ** States const [cvc, setCvc] = useState('') const [name, setName] = useState('') const [focus, setFocus] = useState() const [cardId, setCardId] = useState(0) const [expiry, setExpiry] = useState('') const [cardNumber, setCardNumber] = useState('') const [dialogTitle, setDialogTitle] = useState('Add') const [openEditCard, setOpenEditCard] = useState(false) const [openAddressCard, setOpenAddressCard] = useState(false) const [openUpgradePlans, setOpenUpgradePlans] = useState(false) const [subscriptionDialogOpen, setSubscriptionDialogOpen] = useState(false) // Handle Edit Card dialog and get card ID const handleEditCardClickOpen = (id: number) => { setDialogTitle('Edit') setCardId(id) setCardNumber(data[id].cardNumber) setName(data[id].name) setCvc(data[id].cardCvc) setExpiry(data[id].expiryDate) setOpenEditCard(true) } const handleAddCardClickOpen = () => { setDialogTitle('Add') setCardNumber('') setName('') setCvc('') setExpiry('') setOpenEditCard(true) } const handleEditCardClose = () => { setDialogTitle('Add') setCardNumber('') setName('') setCvc('') setExpiry('') setOpenEditCard(false) } // Handle Upgrade Plan dialog const handleUpgradePlansClickOpen = () => setOpenUpgradePlans(true) const handleUpgradePlansClose = () => setOpenUpgradePlans(false) const handleBlur = () => setFocus(undefined) const handleInputChange = ({ target }: ChangeEvent) => { if (target.name === 'number') { target.value = formatCreditCardNumber(target.value, Payment) setCardNumber(target.value) } else if (target.name === 'expiry') { target.value = formatExpirationDate(target.value) setExpiry(target.value) } else if (target.name === 'cvc') { target.value = formatCVC(target.value, cardNumber, Payment) setCvc(target.value) } } return ( Your Current Plan is Basic A simple start for everyone Active until Dec 09, 2021 We will send you a notification upon Subscription expiration
$99 Per Month Standard plan for small to medium businesses
`${theme.spacing(1)} !important` }}> We need your attention! Your plan requires updates Days 26 of 30 Days Your plan requires update
[`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pt: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > Upgrade Plan [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }}> Choose the best plan for the user. `${theme.spacing(2)} !important`, pb: theme => `${theme.spacing(8)} !important`, px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }} > Choose Plan [`${theme.spacing(8)} !important`, `${theme.spacing(8)} !important`], px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pb: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > User current plan is standard plan $ 99 / month
Add Card } /> {data.map((item: DataType, index: number) => ( `1px solid ${theme.palette.divider}` }} >
{item.imgAlt} {item.name} {item.cardStatus ? ( ) : null} **** **** **** {item.cardNumber.substring(item.cardNumber.length - 4)}
Card expires at {item.expiryDate}
))}
[`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pt: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > {dialogTitle} Card `${theme.spacing(5)} !important`, px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }} > {dialogTitle} card for future billing
setFocus(e.target.name as Focused)} /> setName(e.target.value)} onFocus={e => setFocus(e.target.name as Focused)} /> setFocus(e.target.name as Focused)} /> Card Status setFocus(e.target.name as Focused)} placeholder={Payment.fns.cardType(cardNumber) === 'amex' ? '1234' : '123'} /> } label='Save Card for future billing?' sx={{ '& .MuiTypography-root': { color: 'text.secondary' } }} />
[`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pb: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} >
setOpenAddressCard(true)}> Edit Address } /> Company Name: Pixinvent Billing Email: gertrude@gmail.com Tax ID: TAX-875623 VAT Number: SDF754K77 Billing Address: 100 Water Plant Avenue, Building 1303 Wake Island
Contact: +1(609) 933-44-22 Country: Australia State: Queensland Zip Code: 403114
setOpenAddressCard(false)} aria-labelledby='user-address-edit' sx={{ '& .MuiPaper-root': { width: '100%', maxWidth: 650 } }} aria-describedby='user-address-edit-description' > [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pt: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > Edit Address `${theme.spacing(8)} !important`, px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }} > Edit Address for future billing
Country
[`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pb: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} >
) } export default UserViewBilling