-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1986 from push-protocol/1971-other-user-settings-…
…on-ui 1971 other user settings on UI
- Loading branch information
Showing
4 changed files
with
381 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { Box, Cross, Modal, Text } from 'blocks'; | ||
| import { ModalResponse } from 'common'; | ||
| import { FC } from 'react'; | ||
|
|
||
| type UpgradePlanModalProps = { | ||
| modalControl: ModalResponse; | ||
| }; | ||
|
|
||
| const UpgradePlanModal: FC<UpgradePlanModalProps> = ({ modalControl }) => { | ||
| const { isOpen, onClose } = modalControl; | ||
|
|
||
| const planFeatures = [ | ||
| { | ||
| text: 'Telegram delivery will reduce to 1,000 from 5,000', | ||
| }, | ||
| { | ||
| text: 'Email delivery will reduce to 1,000 from 5,000', | ||
| }, | ||
| { | ||
| text: 'Features will reset to Free plan', | ||
| }, | ||
| ]; | ||
| return ( | ||
| <Modal | ||
| size="medium" | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| acceptButtonProps={{ | ||
| children: 'Go Back', | ||
| onClick: () => { | ||
| // handleAddSettings(formValues); | ||
| }, | ||
| }} | ||
| cancelButtonProps={{ | ||
| children: 'Cancel', | ||
| }} | ||
| > | ||
| <Box width="100%"> | ||
| <Text | ||
| variant="h3-semibold" | ||
| color="text-primary" | ||
| textAlign="center" | ||
| > | ||
| We’re sorry to see you go | ||
| </Text> | ||
| <Text | ||
| variant="bs-regular" | ||
| color="text-tertiary" | ||
| textAlign="center" | ||
| > | ||
| If you cancel you will be able to continue using Pro features until November 20, 2024. Once the billing term | ||
| ends: | ||
| </Text> | ||
|
|
||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| margin="spacing-md spacing-none" | ||
| gap="spacing-sm" | ||
| > | ||
| {planFeatures.map((item) => ( | ||
| <Box | ||
| display="flex" | ||
| flexDirection="row" | ||
| alignItems="center" | ||
| justifyContent="center" | ||
| gap="spacing-xxs" | ||
| > | ||
| <Cross | ||
| size={24} | ||
| color="icon-primary" | ||
| /> | ||
|
|
||
| <Text | ||
| variant="bs-regular" | ||
| color="text-primary" | ||
| textAlign="center" | ||
| > | ||
| {item.text} | ||
| </Text> | ||
| </Box> | ||
| ))} | ||
| </Box> | ||
| </Box> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default UpgradePlanModal; |
156 changes: 156 additions & 0 deletions
156
src/components/userPlanAndBillings/UserPlanAndBillings.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import { css } from 'styled-components'; | ||
|
|
||
| import { useDisclosure } from 'common'; | ||
|
|
||
| import { Box, Button, ProgressBar, Text } from 'blocks'; | ||
| import UpgradePlanModal from './UpgradePlanModal'; | ||
|
|
||
| const UserPlanAndBillings = () => { | ||
| const modalControl = useDisclosure(); | ||
|
|
||
| const itemNotifications = [ | ||
| { title: 'Email Notification Delivery', subtitle: '750 remaining' }, | ||
| { title: 'Telegram Notification Delivery', subtitle: '750 remaining' }, | ||
| { title: 'Discord Notification Delivery', subtitle: '750 remaining' }, | ||
| ]; | ||
| return ( | ||
| <Box width="100%"> | ||
| <Text | ||
| variant="bs-regular" | ||
| color="text-tertiary" | ||
| > | ||
| Take full control of your Push Notification plan, manage and stay up to date with your plan usage | ||
| </Text> | ||
|
|
||
| <Box | ||
| backgroundColor="surface-secondary" | ||
| margin="spacing-lg spacing-none spacing-none spacing-none" | ||
| padding="spacing-md" | ||
| borderRadius="radius-md" | ||
| > | ||
| <Box | ||
| display="flex" | ||
| width="100%" | ||
| flexDirection="row" | ||
| justifyContent="space-between" | ||
| > | ||
| <Text | ||
| variant="h2-semibold" | ||
| color="text-primary" | ||
| > | ||
| Pro Plan | ||
| </Text> | ||
| <Text | ||
| variant="h2-semibold" | ||
| color="text-primary" | ||
| > | ||
| $14.99/mo | ||
| </Text> | ||
| </Box> | ||
|
|
||
| <Box | ||
| display="flex" | ||
| width="100%" | ||
| flexDirection="row" | ||
| justifyContent="space-between" | ||
| > | ||
| <Text | ||
| variant="bm-regular" | ||
| color="text-tertiary" | ||
| > | ||
| For individuals | ||
| </Text> | ||
| <Text | ||
| variant="bm-regular" | ||
| color="text-tertiary" | ||
| > | ||
| billed yearly | ||
| </Text> | ||
| </Box> | ||
|
|
||
| <Box | ||
| margin="spacing-lg spacing-none spacing-none spacing-none" | ||
| display="flex" | ||
| width="100%" | ||
| flexDirection="row" | ||
| justifyContent="space-between" | ||
| alignItems="center" | ||
| > | ||
| <Button | ||
| variant="tertiary" | ||
| size="small" | ||
| > | ||
| Upgrade Plan | ||
| </Button> | ||
|
|
||
| <Text | ||
| variant="bs-semibold" | ||
| color="text-primary" | ||
| css={css` | ||
| cursor: pointer; | ||
| `} | ||
| onClick={() => modalControl.open()} | ||
| > | ||
| Cancel Plan | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box margin="spacing-xl spacing-none spacing-none spacing-none"> | ||
| <Text | ||
| variant="h4-semibold" | ||
| color="text-primary" | ||
| > | ||
| Plan Usage | ||
| </Text> | ||
| <Text | ||
| variant="bs-regular" | ||
| color="text-tertiary" | ||
| > | ||
| Keep track of usage in your current cycle | ||
| </Text> | ||
| </Box> | ||
|
|
||
| <Box | ||
| margin="spacing-lg spacing-none spacing-none spacing-none" | ||
| display="flex" | ||
| flexDirection="row" | ||
| width="100%" | ||
| justifyContent="space-between" | ||
| gap="spacing-md" | ||
| > | ||
| {itemNotifications.map((item) => ( | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| gap="spacing-xxs" | ||
| width="100%" | ||
| > | ||
| <Text | ||
| color="text-secondary" | ||
| variant="c-bold" | ||
| > | ||
| {item.title} | ||
| </Text> | ||
|
|
||
| <ProgressBar | ||
| progress={250} | ||
| max={1000} | ||
| /> | ||
|
|
||
| <Text | ||
| color="text-secondary" | ||
| variant="c-regular" | ||
| > | ||
| {item.subtitle} | ||
| </Text> | ||
| </Box> | ||
| ))} | ||
| </Box> | ||
|
|
||
| {modalControl.isOpen && <UpgradePlanModal modalControl={modalControl} />} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserPlanAndBillings; |
Oops, something went wrong.