Skip to content

Commit 84b2980

Browse files
thisismayureshthisismayuresh
authored
Feat/new user onboarding flow and UI changes (#1127)
2 parents a196972 + 569b655 commit 84b2980

File tree

5 files changed

+97
-47
lines changed

5 files changed

+97
-47
lines changed

‎apps/web/components/imports/destination/DestinationItem/DestinationItem.tsx‎

Lines changed: 73 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { PropsWithChildren } from 'react';
2-
import { Title, Flex, Stack, Switch, Collapse, Group } from '@mantine/core';
2+
import { Title, Flex, Stack, Switch, Collapse, Group, Badge } from '@mantine/core';
3+
import { Button } from '@ui/button';
34

45
import useStyles from './DestinationItem.styles';
5-
import { colors } from '@config';
6+
import { colors, ROUTES } from '@config';
67
import { TooltipLink } from '@components/guide-point';
8+
import { LockIcon } from '@assets/icons/Lock.icon';
79

810
interface DestinationItemProps extends PropsWithChildren {
911
title: string;
@@ -26,36 +28,76 @@ export const DestinationItem = ({
2628
const { classes } = useStyles();
2729

2830
return (
29-
<Stack
30-
className={classes.container}
31-
p="lg"
32-
spacing={children ? 'sm' : 0}
33-
data-disabled={disabled}
34-
style={{
35-
pointerEvents: disabled ? 'none' : 'auto',
36-
}}
37-
>
38-
<Flex justify="space-between" align="center">
39-
<Stack spacing={2}>
40-
<Group spacing="xs" align="center" noWrap>
41-
<Title color={disabled ? colors.TXTSecondaryDark : colors.white} order={4}>
42-
{title}
43-
</Title>
44-
{tooltipLink && <TooltipLink link={tooltipLink} iconSize="md" />}
45-
</Group>
46-
<Title order={5} fw="normal" color={colors.TXTSecondaryDark}>
47-
{subtitle}
48-
</Title>
31+
<>
32+
{disabled ? (
33+
<Flex
34+
direction="row"
35+
gap="sm"
36+
align="center"
37+
p="xs"
38+
bg={colors.BGSecondaryDark}
39+
style={{
40+
border: `1px solid ${colors.StrokeDark}`,
41+
}}
42+
>
43+
<LockIcon size="xl" color="#868e96" />
44+
<Stack spacing={5} w="100%" align="flex-start">
45+
<Badge color="orange">Premium Feature</Badge>
46+
<div>
47+
<Title color={disabled ? colors.TXTSecondaryDark : colors.white} order={4}>
48+
{title}
49+
</Title>
50+
<Title order={5} fw="normal" color={colors.TXTSecondaryDark}>
51+
{subtitle}
52+
</Title>
53+
</div>
54+
</Stack>
55+
<Button
56+
component="a"
57+
size="xs"
58+
href={ROUTES.EXPLORE_PLANS}
59+
onClick={() => {
60+
window.location.href = ROUTES.EXPLORE_PLANS;
61+
62+
return false;
63+
}}
64+
>
65+
Upgrade
66+
</Button>
67+
</Flex>
68+
) : (
69+
<Stack
70+
className={classes.container}
71+
p="lg"
72+
spacing={children ? 'sm' : 0}
73+
data-disabled={disabled}
74+
style={{
75+
pointerEvents: disabled ? 'none' : 'auto',
76+
}}
77+
>
78+
<Flex justify="space-between" align="center">
79+
<Stack spacing={2}>
80+
<Group spacing="xs" align="center" noWrap>
81+
<Title color={disabled ? colors.TXTSecondaryDark : colors.white} order={4}>
82+
{title}
83+
</Title>
84+
{tooltipLink && <TooltipLink link={tooltipLink} iconSize="md" />}
85+
</Group>
86+
<Title order={5} fw="normal" color={colors.TXTSecondaryDark}>
87+
{subtitle}
88+
</Title>
89+
</Stack>
90+
<Switch
91+
color={disabled ? 'gray' : colors.blue}
92+
checked={!!active}
93+
onChange={disabled ? undefined : onClick}
94+
disabled={disabled}
95+
/>
96+
</Flex>
97+
{!disabled && <Collapse in={!!active}>{children}</Collapse>}
4998
</Stack>
50-
<Switch
51-
color={disabled ? 'gray' : colors.blue}
52-
checked={!!active}
53-
onChange={disabled ? undefined : onClick}
54-
disabled={disabled}
55-
/>
56-
</Flex>
57-
{!disabled && <Collapse in={!!active}>{children}</Collapse>}
58-
</Stack>
99+
)}
100+
</>
59101
);
60102
};
61103

‎apps/web/design-system/Tabs/Tabs.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Tabs as MantineTabs } from '@mantine/core';
1+
import { Tabs as MantineTabs, Tooltip } from '@mantine/core';
22
import useStyles from './Tabs.styles';
33

44
interface TabItem {
@@ -8,6 +8,7 @@ interface TabItem {
88
icon?: React.ReactNode;
99
content: React.ReactNode;
1010
disabled?: boolean;
11+
disabledTooltip?: string;
1112
}
1213

1314
interface TabsProps {
@@ -34,15 +35,24 @@ export function Tabs({ items, value, onTabChange, keepMounted, allowTabDeactivat
3435
>
3536
<MantineTabs.List>
3637
{items.map((item) => (
37-
<MantineTabs.Tab
38-
data-id={item.id}
38+
<Tooltip
3939
key={item.value}
40-
value={item.value}
41-
icon={item.disabled ? item.icon : null}
42-
disabled={item.disabled}
40+
label={item.disabledTooltip || 'This feature is not available in your current plan'}
41+
disabled={!item.disabled}
42+
position="top"
43+
withArrow
44+
multiline
45+
withinPortal
4346
>
44-
{item.title}
45-
</MantineTabs.Tab>
47+
<MantineTabs.Tab
48+
data-id={item.id}
49+
value={item.value}
50+
icon={item.disabled ? item.icon : null}
51+
disabled={item.disabled}
52+
>
53+
{item.title}
54+
</MantineTabs.Tab>
55+
</Tooltip>
4656
))}
4757
</MantineTabs.List>
4858
{items.map((item) => (

‎apps/web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"react-hook-form": "^7.39.1",
5454
"sharp": "^0.32.6",
5555
"typescript": "4.9.5",
56-
"subos-frontend": "^1.0.81"
56+
"subos-frontend": "^1.0.94"
5757
},
5858
"devDependencies": {
5959
"@storybook/builder-webpack5": "^6.5.16",

‎apps/web/pages/imports/[id].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ function ImportDetails() {
205205
id: 'validator',
206206
value: 'validator',
207207
title: 'Validator',
208-
icon: <ForbiddenIcon size="xl" />,
208+
icon: customValidatatorCodeUnavailable ? <ForbiddenIcon size="xl" /> : null,
209209
disabled: customValidatatorCodeUnavailable,
210210
content: <Validator templateId={templateData._id} />,
211211
},

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)