Skip to content

Commit 59c2588

Browse files
AykutSaracAykutSarac
committed
feat: show initial modal
1 parent 45f9f79 commit 59c2588

File tree

6 files changed

+110
-62
lines changed

6 files changed

+110
-62
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"gofmt.js": "^0.0.2",
3333
"html-to-image": "^1.11.11",
3434
"jq-web": "^0.5.1",
35+
"js-cookie": "^3.0.5",
3536
"js-yaml": "^4.1.0",
3637
"json-2-csv": "^5.5.4",
3738
"json-schema-faker": "^0.5.6",
@@ -63,6 +64,7 @@
6364
"devDependencies": {
6465
"@next/bundle-analyzer": "^14.2.5",
6566
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
67+
"@types/js-cookie": "^3.0.6",
6668
"@types/js-yaml": "^4.0.9",
6769
"@types/jsonwebtoken": "^9.0.6",
6870
"@types/jxon": "^2.0.5",

‎pnpm-lock.yaml‎

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

‎public/assets/todiagram_img.png‎

313 KB
Loading

‎public/assets/todiagram_img.webp‎

53.2 KB
Loading

‎src/containers/Modals/UpgradeModal/index.tsx‎

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,44 @@
11
import React from "react";
2-
import Link from "next/link";
32
import type { ModalProps } from "@mantine/core";
4-
import {
5-
Text,
6-
Divider,
7-
List,
8-
Button,
9-
Modal,
10-
Flex,
11-
Box,
12-
AspectRatio,
13-
ThemeIcon,
14-
Image,
15-
} from "@mantine/core";
3+
import { Text, List, Button, Modal, Flex, Box, ThemeIcon, Image, Paper } from "@mantine/core";
4+
import styled from "styled-components";
165
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
176
import { MdChevronRight } from "react-icons/md";
187

8+
const StyledPaper = styled(Paper)<any>`
9+
--bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
10+
--line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
11+
--line-color-2: ${({ theme }) => theme.GRID_COLOR_SECONDARY};
12+
13+
background-color: var(--bg-color);
14+
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
15+
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
16+
linear-gradient(var(--line-color-2) 1px, transparent 1px),
17+
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
18+
background-position:
19+
-1.5px -1.5px,
20+
-1.5px -1.5px,
21+
-1px -1px,
22+
-1px -1px;
23+
background-size:
24+
100px 100px,
25+
100px 100px,
26+
20px 20px,
27+
20px 20px;
28+
29+
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
30+
align-self: center;
31+
`;
32+
1933
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
2034
return (
2135
<Modal
2236
title={
2337
<Flex align="center" gap="8">
2438
<ThemeIcon variant="transparent">
25-
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={24} height={24} />
39+
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={20} height={20} />
2640
</ThemeIcon>
27-
<Text fz="h2" fw={600}>
41+
<Text fz="24" fw={600}>
2842
Get more with ToDiagram
2943
</Text>
3044
</Flex>
@@ -34,59 +48,59 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
3448
onClose={onClose}
3549
zIndex={1001}
3650
centered
51+
radius="lg"
3752
>
38-
<Flex align="center">
39-
<Box flex="0.6">
40-
<Text fz="sm" mb="sm">
53+
<Flex align="start">
54+
<Box px="lg" pb="lg">
55+
<Text fz="sm" mb="md">
4156
More productivity. More power. Our most-requested features are now available on a
4257
refined platform.
4358
</Text>
44-
<Text fz="sm" fw={500} mb="sm">
59+
<Text fz="md" fw={500} mb="sm">
4560
Here&apos;s what you get with ToDiagram:
4661
</Text>
47-
<List spacing="6" fz="sm" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
48-
<List.Item>
49-
Larger data support up to{" "}
50-
<Text component="span" inherit fw={600}>
51-
4 MB
52-
</Text>
53-
</List.Item>
54-
<List.Item>Edit data directly on visualizations</List.Item>
55-
<List.Item>Compare data differences on graphs</List.Item>
56-
<List.Item>AI-powered data filter</List.Item>
57-
<List.Item>Customizable graph colors</List.Item>
58-
<List.Item>Tabs for multiple documents</List.Item>
59-
<List.Item>...faster, and more</List.Item>
62+
<List spacing="6" fz="md" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
63+
<List.Item>Load up to 4 MB data</List.Item>
64+
<List.Item>Edit data on diagrams</List.Item>
65+
<List.Item>Compare data</List.Item>
66+
<List.Item>AI-Powered filter</List.Item>
67+
<List.Item>Customizable theme</List.Item>
68+
<List.Item>Editor tabs</List.Item>
69+
<List.Item>5X Faster loading</List.Item>
70+
<List.Item>Store 200 Documents</List.Item>
6071
</List>
61-
<Link href="https://todiagram.com" target="_blank" passHref rel="noopener">
62-
<Button
63-
color="green"
64-
fullWidth
65-
mt="md"
66-
size="md"
67-
fw={500}
68-
radius="md"
69-
rightSection={<MdChevronRight size="24" />}
70-
>
71-
Get Started
72-
</Button>
73-
</Link>
74-
</Box>
75-
<Divider orientation="vertical" mx="md" />
76-
<Box flex="1">
77-
<AspectRatio ratio={16 / 9}>
78-
<video
79-
autoPlay
80-
height="auto"
81-
muted
82-
loop
83-
playsInline
84-
style={{ display: "block", borderRadius: "8px", border: "2px solid #e9e9e9" }}
85-
>
86-
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
87-
</video>
88-
</AspectRatio>
72+
<Text fz="md" my="sm">
73+
<Text component="span" inherit fw={500}>
74+
Cancel anytime.
75+
</Text>{" "}
76+
Pay monthly or annually.
77+
</Text>
78+
<Button
79+
component="a"
80+
href="https://todiagram.com?utm_source=app&utm_medium=upgrade_modal"
81+
target="_blank"
82+
rel="noopener"
83+
color="green"
84+
fullWidth
85+
mt="md"
86+
size="md"
87+
fw={500}
88+
radius="md"
89+
rightSection={<MdChevronRight size="24" />}
90+
>
91+
Get Started
92+
</Button>
8993
</Box>
94+
<StyledPaper ml="md" withBorder p="16">
95+
<Image
96+
miw="420"
97+
mih="420"
98+
mah="500"
99+
src="/assets/todiagram_img.webp"
100+
alt="ToDiagram"
101+
fit="contain"
102+
/>
103+
</StyledPaper>
90104
</Flex>
91105
</Modal>
92106
);

‎src/pages/editor.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import { useMantineColorScheme } from "@mantine/core";
55
import "@mantine/dropzone/styles.css";
66
import styled, { ThemeProvider } from "styled-components";
77
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
8+
import Cookie from "js-cookie";
89
import { NextSeo } from "next-seo";
910
import { SEO } from "src/constants/seo";
1011
import { darkTheme, lightTheme } from "src/constants/theme";
1112
import { Editor } from "src/containers/Editor";
1213
import { BottomBar } from "src/containers/Editor/components/BottomBar";
14+
import { UpgradeModal } from "src/containers/Modals";
1315
import { Toolbar } from "src/containers/Toolbar";
1416
import useConfig from "src/store/useConfig";
1517
import useFile from "src/store/useFile";
@@ -46,6 +48,12 @@ const EditorPage = () => {
4648
const { setColorScheme } = useMantineColorScheme();
4749
const checkEditorSession = useFile(state => state.checkEditorSession);
4850
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
51+
const [upgradeVisible, setUpgradeVisible] = React.useState(false);
52+
53+
React.useEffect(() => {
54+
const isUpgradeShown = Cookie.get("upgrade_shown");
55+
if (!isUpgradeShown) setUpgradeVisible(true);
56+
}, []);
4957

5058
React.useEffect(() => {
5159
if (isReady) checkEditorSession(query?.json);
@@ -67,6 +75,13 @@ const EditorPage = () => {
6775
<QueryClientProvider client={queryClient}>
6876
<ExternalMode />
6977
<ModalController />
78+
<UpgradeModal
79+
opened={upgradeVisible}
80+
onClose={() => {
81+
setUpgradeVisible(false);
82+
Cookie.set("upgrade_shown", "true", { expires: 1 });
83+
}}
84+
/>
7085
<StyledEditorWrapper>
7186
<StyledPageWrapper>
7287
<Toolbar />

0 commit comments

Comments
 (0)