90 lines
3.7 KiB
TypeScript
90 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
// React Imports
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
// MUI Imports
|
|
import Grid from '@mui/material/Grid2'
|
|
import Card from '@mui/material/Card'
|
|
import CardHeader from '@mui/material/CardHeader'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Button from '@mui/material/Button'
|
|
import MenuItem from '@mui/material/MenuItem'
|
|
import InputAdornment from '@mui/material/InputAdornment'
|
|
|
|
// Component Imports
|
|
import CustomTextField from '@core/components/mui/TextField'
|
|
|
|
const Address = () => {
|
|
const t = useTranslations('accountSettings')
|
|
const tBilling = useTranslations('accountSettings.billing')
|
|
|
|
// States
|
|
const [state, setState] = useState('')
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader title={tBilling('billingAddress')} />
|
|
<CardContent>
|
|
<form>
|
|
<Grid container spacing={6}>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField fullWidth label={tBilling('companyName')} variant='outlined' placeholder='Pixinvent' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField fullWidth label={tBilling('billingEmail')} variant='outlined' placeholder='john.doe@example.com' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField fullWidth label={tBilling('taxId')} variant='outlined' placeholder='Enter TAX ID' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField fullWidth label={tBilling('vatNumber')} variant='outlined' placeholder='Enter VAT Number' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
type='number'
|
|
label={tBilling('mobileNumber')}
|
|
placeholder='202 555 0111'
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: <InputAdornment position='start'>US (+1)</InputAdornment>
|
|
}
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField select fullWidth label={tBilling('country')} value={state} onChange={e => setState(e.target.value)}>
|
|
<MenuItem value=''>{tBilling('selectCountry')}</MenuItem>
|
|
<MenuItem value='australia'>{tBilling('australia')}</MenuItem>
|
|
<MenuItem value='canada'>{tBilling('canada')}</MenuItem>
|
|
<MenuItem value='france'>{tBilling('france')}</MenuItem>
|
|
<MenuItem value='united-kingdom'>{tBilling('unitedKingdom')}</MenuItem>
|
|
<MenuItem value='united-states'>{tBilling('unitedStates')}</MenuItem>
|
|
</CustomTextField>
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }}>
|
|
<CustomTextField fullWidth label={tBilling('billingAddress')} variant='outlined' placeholder={tBilling('billingAddress')} />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField fullWidth label={tBilling('state')} variant='outlined' placeholder='California' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6 }}>
|
|
<CustomTextField fullWidth type='number' label={tBilling('zipCode')} variant='outlined' placeholder='231465' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }} className='flex gap-4 flex-wrap'>
|
|
<Button variant='contained'>{t('saveChanges')}</Button>
|
|
<Button variant='tonal' type='reset' color='secondary' onClick={() => setState('')}>
|
|
{tBilling('discard')}
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default Address
|