Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1971 other user settings on UI #1986

Merged
merged 2 commits into from
Dec 6, 2024
Merged

1971 other user settings on UI #1986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c8c41d
add upgrade plan modal
corlard3y Nov 18, 2024
d168bdf
update cursor
corlard3y Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions src/components/userPlanAndBillings/UpgradePlanModal.tsx
View file
Open in desktop
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 src/components/userPlanAndBillings/UserPlanAndBillings.tsx
View file
Open in desktop
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;
Loading
Loading