Skip to content

Commit

Permalink
subscription view styles, closes #922
Browse files Browse the repository at this point in the history
  • Loading branch information
@gerouvi
gerouvi committed Jan 22, 2025
1 parent 1351bd5 commit 066d43c
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 134 deletions.
18 changes: 5 additions & 13 deletions src/components/Home/Clients.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card, CardBody, CardHeader, Grid, GridProps, Image, Text } from '@chakra-ui/react'
import { Box, Card, CardBody, CardHeader, Grid, GridProps, Image, Text } from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import barca from '/assets/barca.png'
import bellpuig from '/assets/bellpuig.svg.png'
Expand All @@ -11,23 +11,16 @@ import erc from '/assets/erc.svg'
import omnium from '/assets/omnium.png'
import ticanoia from '/assets/ticanoia.png'

const Clients = () => {
const Clients = ({ ...props }) => {
const { t } = useTranslation()

return (
<>
<Text
variant='home-description-color'
textAlign='center'
mb='52px'
mt='100px'
fontFamily='basier'
fontSize='23px'
>
<Box {...props}>
<Text variant='home-description-color' textAlign='center' mb='52px' fontFamily='basier' fontSize='23px'>
{t('home.clients_title')}
</Text>
<ClientsGrid />
</>
</Box>
)
}

Expand All @@ -39,7 +32,6 @@ export const ClientsGrid = (props: GridProps) => (
maxW={{ base: '100%', sm: '80%', lg: '900px' }}
flexDirection={{ base: 'column', sm: 'row' }}
justifyContent='center'
mb={{ lg: '60px' }}
gridTemplateColumns='repeat(5, 1fr)'
gridRowGap={{ base: '0px', sm: '30px', lg: '50px' }}
{...props}
Expand Down
1 change: 0 additions & 1 deletion src/components/Home/Faqs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const Faqs = () => {
sm: '20px',
md: '80px',
}}
py={{ base: '60px', lg: '100px' }}
>
<Image
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398d7c1bcc2b72f92aa4f58_diagonal-violet-to-pink.svg'
Expand Down
189 changes: 71 additions & 118 deletions src/components/Pricing/ComparisonTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { Box, Flex, Progress, Table, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
import { Box, Flex, Progress, Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
import { dotobject } from '@vocdoni/sdk'
import { forwardRef } from 'react'
import { Trans } from 'react-i18next'
import Clients from '~components/Home/Clients'
import Faqs from '~components/Home/Faqs'
import { BooleanIcon } from '~components/Layout/BooleanIcon'
import { CategorizedFeatureKeys, CategoryTitleKeys, PlanTableFeaturesTranslationKeys } from './Features'
import { Plan, usePlans, usePlanTranslations } from './Plans'
Expand All @@ -15,56 +13,67 @@ type ComparisonSectionTableProps = {
plans: Plan[]
features: string[]
category: string
idx: number
}

const ComparisonSectionTable = ({ titleKey, plans, features, category }: ComparisonSectionTableProps) => {
const ComparisonSectionTable = ({ titleKey, plans, features, category, idx }: ComparisonSectionTableProps) => {
const translations = usePlanTranslations()

return (
<Box mb={8}>
<Text fontSize='xl' mb={4} color='comparsions_table_title'>
<Trans i18nKey={titleKey} />
</Text>
<Table variant='striped' borderWidth={1}>
<Thead>
<Tr>
<Th>
<Trans i18nKey='pricing.features'>Features</Trans>
</Th>
{plans.map((plan) => (
<Th key={plan.id} textAlign='center'>
{translations[plan.id].title || plan.name}
<TableContainer>
<Table variant='striped' borderWidth={1}>
<Thead>
<Tr>
<Th>
<Trans i18nKey='pricing.features'>Features</Trans>
</Th>
))}
</Tr>
</Thead>
<Tbody>
{features.map((key) => {
const featurePath = `${category}.${key}`
const translationKey = PlanTableFeaturesTranslationKeys[featurePath]
return (
<Tr key={key}>
<Td fontWeight='medium'>
<Trans i18nKey={translationKey} />
</Td>
{plans.map((plan) => {
const value = dotobject(plan, featurePath)
return (
<Td key={plan.id} textAlign='center' w={40}>
{typeof value === 'boolean' ? (
<BooleanIcon value={value} />
) : typeof value === 'number' ? (
value
) : (
'-'
)}
</Td>
)
})}
</Tr>
)
})}
</Tbody>
</Table>
{plans.map((plan) => (
<Th key={plan.id} textAlign='center'>
<Flex flexDirection={'column'} justifyContent={'center'}>
<Text as={'span'} textAlign={'center'}>
{translations[plan.id].title}
</Text>
<Text as={'span'} textAlign={'center'} fontWeight={'normal'}>
<Trans i18nKey='pricing_card.from' values={{ price: plan.startingPrice / 100 }}></Trans>
</Text>
</Flex>
</Th>
))}
</Tr>
</Thead>
<Tbody>
{features.map((key) => {
const featurePath = `${category}.${key}`
const translationKey = PlanTableFeaturesTranslationKeys[featurePath]
return (
<Tr key={key}>
<Td fontWeight='medium'>
<Trans i18nKey={translationKey} />
</Td>
{plans.map((plan) => {
const value = dotobject(plan, featurePath)
return (
<Td key={plan.id} textAlign='center' w={40}>
{typeof value === 'boolean' ? (
<BooleanIcon value={value} />
) : typeof value === 'number' ? (
value
) : (
'-'
)}
</Td>
)
})}
</Tr>
)
})}
</Tbody>
</Table>
</TableContainer>
</Box>
)
}
Expand All @@ -77,81 +86,25 @@ export const ComparisonTable = forwardRef<HTMLDivElement, ComparisonTableProps>(
}

return (
<Box ref={ref} overflowX='auto' mt={8} maxW={'1000px'} mx='auto' border='1px solid red'>
<Text fontSize='2xl' mb={4} textAlign='center'>
<Trans i18nKey='pricing.compare_features'>Compare all features</Trans>
</Text>
<Flex justifyContent={'end'} border='1px solid blue' gap={4} my={6}>
<Box flex={'1 0 15%'}>
<Text fontWeight='bold' textAlign={'center'} mb={2}>
Essential Plan
</Text>
<Text textAlign={'center'} mb={2}>
<Text as={'span'} fontSize={'24px'} fontWeight={'bold'}>
$10
</Text>
/month
</Text>
<Text textAlign={'center'} fontSize={'sm'}>
Basic features for up to 10 users with everything you need
</Text>
</Box>
<Box flex={'1 0 15%'}>
<Text fontWeight='bold' textAlign={'center'} mb={2}>
Essential Plan
</Text>
<Text textAlign={'center'} mb={2}>
<Text as={'span'} fontSize={'24px'} fontWeight={'bold'}>
$10
</Text>
/month
</Text>
<Text textAlign={'center'} fontSize={'sm'}>
Basic features for up to 10 users with everything you need
</Text>
</Box>{' '}
<Box flex={'1 0 15%'}>
<Text fontWeight='bold' textAlign={'center'} mb={2}>
Essential Plan
<Flex ref={ref} justifyContent={'center'}>
<Box maxW='950px' overflowX={'scroll'}>
<Box width={'full'} overflowX='auto'>
<Text fontSize='2xl' mb={4} textAlign='center'>
<Trans i18nKey='pricing.compare_features'>Compare all features</Trans>
</Text>
<Text textAlign={'center'} mb={2}>
<Text as={'span'} fontSize={'24px'} fontWeight={'bold'}>
$10
</Text>
/month
</Text>
<Text textAlign={'center'} fontSize={'sm'}>
Basic features for up to 10 users with everything you need
</Text>
</Box>{' '}
<Box flex={'1 0 15%'}>
<Text fontWeight='bold' textAlign={'center'} mb={2}>
Essential Plan
</Text>
<Text textAlign={'center'} mb={2}>
<Text as={'span'} fontSize={'24px'} fontWeight={'bold'}>
$10
</Text>
/month
</Text>
<Text textAlign={'center'} fontSize={'sm'}>
Basic features for up to 10 users with everything you need
</Text>
</Box>
</Flex>

{Object.entries(CategorizedFeatureKeys).map(([category, features]) => (
<ComparisonSectionTable
key={category}
titleKey={CategoryTitleKeys[category]}
plans={plans}
features={features}
category={category}
/>
))}

<Clients />
<Faqs />
</Box>
{Object.entries(CategorizedFeatureKeys).map(([category, features], idx) => (
<ComparisonSectionTable
key={category}
titleKey={CategoryTitleKeys[category]}
plans={plans}
features={features}
category={category}
idx={idx}
/>
))}
</Box>
</Box>
</Flex>
)
})
8 changes: 7 additions & 1 deletion src/components/Pricing/Plans.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,13 @@ export const SubscriptionPlans = ({ featuresRef }: { featuresRef?: MutableRefObj
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDir='column' gap={4}>
<Flex flexDir='row' justifyContent={'center'} alignItems={'center'} gap={6} mb={6}>
<Flex
flexDir={{ base: 'column', lg: 'row' }}
justifyContent={'center'}
alignItems={'center'}
gap={{ base: 2, lg: 4 }}
mb={{ base: 4, lg: 6 }}
>
<Text>
<Trans i18nKey='pricing.membership_size'>Select your membership size:</Trans>
</Text>
Expand Down
3 changes: 2 additions & 1 deletion src/elements/PublicContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ export const PublicContentsLayout = () => (
export const PlansLayout = () => (
<Flex
flexDirection='column'
gap={5}
gap={{ base: '60px', lg: '100px' }}
mt={{ base: 10, lg: 14 }}
width='full'
mx='auto'
maxW='1400px'
Expand Down
4 changes: 4 additions & 0 deletions src/elements/plans.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { useEffect, useRef } from 'react'
import { useLocation } from 'react-router-dom'
import Clients from '~components/Home/Clients'
import Faqs from '~components/Home/Faqs'
import { ComparisonTable } from '~components/Pricing/ComparisonTable'
import { SubscriptionPlans, usePlans } from '~components/Pricing/Plans'
import { PricingModalProvider } from '~components/Pricing/PricingModalProvider'
Expand All @@ -21,6 +23,8 @@ const PlansPublicPage = () => {
<PricingModalProvider>
<SubscriptionPlans featuresRef={featuresRef} />
<ComparisonTable ref={featuresRef} />
<Clients />
<Faqs />
</PricingModalProvider>
</>
)
Expand Down

0 comments on commit 066d43c

Please sign in to comment.