Initial commit
This commit is contained in:
415
src/views/Pages/Account/Billing.js
Normal file
415
src/views/Pages/Account/Billing.js
Normal file
@@ -0,0 +1,415 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Spacer,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import BackgroundCard1 from 'assets/img/BackgroundCard1.png';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card.js';
|
||||
import CardHeader from 'components/Card/CardHeader.js';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import { MastercardIcon, VisaIcon } from 'components/Icons/Icons';
|
||||
import { HSeparator } from 'components/Separator/Separator';
|
||||
import BillingRow from 'components/Tables/BillingRow';
|
||||
import InvoicesRow from 'components/Tables/InvoicesRow';
|
||||
import TransactionRow from 'components/Tables/TransactionRow';
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
FaPaypal,
|
||||
FaPencilAlt,
|
||||
FaRegCalendarAlt,
|
||||
FaWallet,
|
||||
FaGem,
|
||||
} from 'react-icons/fa';
|
||||
import { RiMastercardFill } from 'react-icons/ri';
|
||||
import {
|
||||
billingData,
|
||||
invoicesData,
|
||||
newestTransactions,
|
||||
olderTransactions,
|
||||
} from 'variables/general';
|
||||
|
||||
function Billing() {
|
||||
// Chakra color mode
|
||||
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const borderColor = useColorModeValue('#dee2e6', 'transparent');
|
||||
const { colorMode } = useColorMode();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ base: '120px', md: '75px' }}>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '2fr 1.2fr' }} templateRows='1fr'>
|
||||
<Box>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: '1fr',
|
||||
md: '1fr 1fr',
|
||||
xl: '1fr 1fr 1fr 1fr',
|
||||
}}
|
||||
templateRows={{ sm: 'auto auto auto', md: '1fr auto', xl: '1fr' }}
|
||||
gap='26px'
|
||||
>
|
||||
<Card
|
||||
backgroundImage={
|
||||
colorMode === 'dark'
|
||||
? 'linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
|
||||
: BackgroundCard1
|
||||
}
|
||||
backgroundRepeat='no-repeat'
|
||||
background='cover'
|
||||
bgPosition='10%'
|
||||
p='16px'
|
||||
h={{ sm: '220px', xl: '100%' }}
|
||||
gridArea={{ md: '1 / 1 / 2 / 3', xl: '1 / 1 / 2 / 3' }}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
color='white'
|
||||
h='100%'
|
||||
p='0px 10px 20px 10px'
|
||||
w='100%'
|
||||
>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text fontSize='md' fontWeight='bold'>
|
||||
Argon x Chakra
|
||||
</Text>
|
||||
<Icon
|
||||
as={RiMastercardFill}
|
||||
w='48px'
|
||||
h='auto'
|
||||
color='gray.400'
|
||||
/>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Flex direction='column'>
|
||||
<Box>
|
||||
<Text fontSize='2xl' letterSpacing='2px' fontWeight='bold'>
|
||||
7812 2139 0823 XXXX
|
||||
</Text>
|
||||
</Box>
|
||||
<Flex mt='14px'>
|
||||
<Flex direction='column' me='34px'>
|
||||
<Text fontSize='xs'>VALID THRU</Text>
|
||||
<Text fontSize='xs' fontWeight='bold'>
|
||||
05/24
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='xs'>CVV</Text>
|
||||
<Text fontSize='xs' fontWeight='bold'>
|
||||
09X
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card p='16px' display='flex' align='center' justify='center'>
|
||||
<Flex direction='column' align='center' w='100%' py='14px'>
|
||||
<IconBox h={'60px'} w={'60px'} bg={iconBlue}>
|
||||
<Icon h={'24px'} w={'24px'} color='white' as={FaWallet} />
|
||||
</IconBox>
|
||||
<Flex
|
||||
direction='column'
|
||||
m='14px'
|
||||
justify='center'
|
||||
textAlign='center'
|
||||
align='center'
|
||||
w='100%'
|
||||
>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Salary
|
||||
</Text>
|
||||
<Text
|
||||
mb='24px'
|
||||
fontSize='xs'
|
||||
color='gray.400'
|
||||
fontWeight='semibold'
|
||||
>
|
||||
Belong Interactive
|
||||
</Text>
|
||||
<HSeparator />
|
||||
</Flex>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
+$2000
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card p='16px' display='flex' align='center' justify='center'>
|
||||
<Flex
|
||||
direction='column'
|
||||
align='center'
|
||||
justify='center'
|
||||
w='100%'
|
||||
py='14px'
|
||||
>
|
||||
<IconBox h={'60px'} w={'60px'} bg='purple.500'>
|
||||
<Icon h={'24px'} w={'24px'} color='white' as={FaGem} />
|
||||
</IconBox>
|
||||
<Flex
|
||||
direction='column'
|
||||
m='14px'
|
||||
justify='center'
|
||||
textAlign='center'
|
||||
align='center'
|
||||
w='100%'
|
||||
>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
订阅服务
|
||||
</Text>
|
||||
<Text
|
||||
mb='24px'
|
||||
fontSize='xs'
|
||||
color='gray.400'
|
||||
fontWeight='semibold'
|
||||
>
|
||||
Pro & Max 版本
|
||||
</Text>
|
||||
<HSeparator />
|
||||
</Flex>
|
||||
<Button
|
||||
size='sm'
|
||||
colorScheme='purple'
|
||||
onClick={() => navigate('/home/pages/account/subscription')}
|
||||
>
|
||||
管理订阅
|
||||
</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Card p='16px' mt='24px'>
|
||||
<CardHeader>
|
||||
<Flex
|
||||
justify='space-between'
|
||||
align='center'
|
||||
minHeight='60px'
|
||||
w='100%'
|
||||
>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Payment Method
|
||||
</Text>
|
||||
<Button variant={colorMode === 'dark' ? 'primary' : 'dark'}>
|
||||
ADD A NEW CARD
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
align='center'
|
||||
w='100%'
|
||||
justify='center'
|
||||
py='1rem'
|
||||
>
|
||||
<Flex
|
||||
p='1rem'
|
||||
bg={colorMode === 'dark' ? 'navy.900' : 'transparent'}
|
||||
borderRadius='15px'
|
||||
width='100%'
|
||||
border='1px solid'
|
||||
borderColor={borderColor}
|
||||
align='center'
|
||||
mb={{ sm: '24px', md: '0px' }}
|
||||
me={{ sm: '0px', md: '24px' }}
|
||||
>
|
||||
<IconBox me='10px' w='25px' h='22px'>
|
||||
<MastercardIcon w='100%' h='100%' />
|
||||
</IconBox>
|
||||
<Text color='gray.400' fontSize='md' fontWeight='semibold'>
|
||||
7812 2139 0823 XXXX
|
||||
</Text>
|
||||
<Spacer />
|
||||
<Button p='0px' w='16px' h='16px' variant='no-effects'>
|
||||
<Icon
|
||||
as={FaPencilAlt}
|
||||
color={colorMode === 'dark' && 'white'}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex
|
||||
p='16px'
|
||||
bg={colorMode === 'dark' ? 'navy.900' : 'transparent'}
|
||||
borderRadius='15px'
|
||||
width='100%'
|
||||
border='1px solid'
|
||||
borderColor={borderColor}
|
||||
align='center'
|
||||
>
|
||||
<IconBox me='10px' w='25px' h='25px'>
|
||||
<VisaIcon w='100%' h='100%' />
|
||||
</IconBox>
|
||||
<Text color='gray.400' fontSize='md' fontWeight='semibold'>
|
||||
7812 2139 0823 XXXX
|
||||
</Text>
|
||||
<Spacer />
|
||||
<Button
|
||||
p='0px'
|
||||
bg='transparent'
|
||||
w='16px'
|
||||
h='16px'
|
||||
variant='no-effects'
|
||||
>
|
||||
<Icon
|
||||
as={FaPencilAlt}
|
||||
color={colorMode === 'dark' && 'white'}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Box>
|
||||
<Card
|
||||
p='22px'
|
||||
my={{ sm: '24px', lg: '0px' }}
|
||||
ms={{ sm: '0px', lg: '24px' }}
|
||||
>
|
||||
<CardHeader>
|
||||
<Flex justify='space-between' align='center' mb='1rem' w='100%'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Invoices
|
||||
</Text>
|
||||
<Button
|
||||
variant='outlined'
|
||||
color={colorMode === 'dark' && 'white'}
|
||||
borderColor={colorMode === 'dark' && 'white'}
|
||||
_hover={colorMode === 'dark' && 'none'}
|
||||
minW='110px'
|
||||
maxH='35px'
|
||||
>
|
||||
VIEW ALL
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex direction='column' w='100%'>
|
||||
{invoicesData.map((row, index) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<InvoicesRow
|
||||
date={row.date}
|
||||
code={row.code}
|
||||
price={row.price}
|
||||
logo={row.logo}
|
||||
format={row.format}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '1.6fr 1.2fr' }}>
|
||||
<Card my={{ lg: '24px' }} me={{ lg: '24px' }}>
|
||||
<Flex direction='column'>
|
||||
<CardHeader py='12px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Billing Information
|
||||
</Text>
|
||||
</CardHeader>
|
||||
|
||||
<Flex direction='column' w='100%'>
|
||||
{billingData.map((row, index) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<BillingRow
|
||||
name={row.name}
|
||||
company={row.company}
|
||||
email={row.email}
|
||||
number={row.number}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card my='24px' ms={{ lg: '24px' }}>
|
||||
<CardHeader mb='12px'>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
justify={{ sm: 'center', lg: 'space-between' }}
|
||||
align={{ sm: 'center' }}
|
||||
w='100%'
|
||||
my={{ md: '12px' }}
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize={{ sm: 'lg', md: 'xl', lg: 'lg' }}
|
||||
fontWeight='bold'
|
||||
>
|
||||
Your Transactions
|
||||
</Text>
|
||||
<Flex align='center'>
|
||||
<Icon
|
||||
as={FaRegCalendarAlt}
|
||||
color='gray.400'
|
||||
fontSize='md'
|
||||
me='6px'
|
||||
></Icon>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='semibold'>
|
||||
23 - 30 March 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex direction='column' w='100%'>
|
||||
<Text
|
||||
color='gray.400'
|
||||
fontSize={{ sm: 'sm', md: 'md' }}
|
||||
fontWeight='semibold'
|
||||
my='12px'
|
||||
>
|
||||
NEWEST
|
||||
</Text>
|
||||
{newestTransactions.map((row, index) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<TransactionRow
|
||||
name={row.name}
|
||||
logo={row.logo}
|
||||
date={row.date}
|
||||
price={row.price}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<Text
|
||||
color='gray.400'
|
||||
fontSize={{ sm: 'sm', md: 'md' }}
|
||||
fontWeight='semibold'
|
||||
my='12px'
|
||||
>
|
||||
OLDER
|
||||
</Text>
|
||||
{olderTransactions.map((row, index) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<TransactionRow
|
||||
name={row.name}
|
||||
logo={row.logo}
|
||||
date={row.date}
|
||||
price={row.price}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Billing;
|
||||
Reference in New Issue
Block a user