feat: show initial modal

This commit is contained in:
AykutSarac 2024-10-23 14:12:01 +03:00
parent 45f9f798f3
commit 59c2588709
No known key found for this signature in database
6 changed files with 110 additions and 62 deletions

View File

@ -32,6 +32,7 @@
"gofmt.js": "^0.0.2",
"html-to-image": "^1.11.11",
"jq-web": "^0.5.1",
"js-cookie": "^3.0.5",
"js-yaml": "^4.1.0",
"json-2-csv": "^5.5.4",
"json-schema-faker": "^0.5.6",
@ -63,6 +64,7 @@
"devDependencies": {
"@next/bundle-analyzer": "^14.2.5",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/js-cookie": "^3.0.6",
"@types/js-yaml": "^4.0.9",
"@types/jsonwebtoken": "^9.0.6",
"@types/jxon": "^2.0.5",

21
pnpm-lock.yaml generated
View File

@ -47,6 +47,9 @@ importers:
jq-web:
specifier: ^0.5.1
version: 0.5.1
js-cookie:
specifier: ^3.0.5
version: 3.0.5
js-yaml:
specifier: ^4.1.0
version: 4.1.0
@ -135,6 +138,9 @@ importers:
'@trivago/prettier-plugin-sort-imports':
specifier: ^4.3.0
version: 4.3.0(prettier@3.3.3)
'@types/js-cookie':
specifier: ^3.0.6
version: 3.0.6
'@types/js-yaml':
specifier: ^4.0.9
version: 4.0.9
@ -663,6 +669,9 @@ packages:
'@types/estree@1.0.5':
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
'@types/js-cookie@3.0.6':
resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
'@types/js-yaml@4.0.9':
resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
@ -1737,6 +1746,10 @@ packages:
jq-web@0.5.1:
resolution: {integrity: sha512-3Fa3E6g3U1O1j46ljy0EM10yRr4txzILga8J7bqOG8F89gZ6Lilz82WG9z6TItWpYEO0YGa4W8yFGj+NMM1xqQ==}
js-cookie@3.0.5:
resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
engines: {node: '>=14'}
js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@ -2800,7 +2813,7 @@ snapshots:
'@babel/generator@7.17.7':
dependencies:
'@babel/types': 7.17.0
'@babel/types': 7.24.9
jsesc: 2.5.2
source-map: 0.5.7
@ -2841,7 +2854,7 @@ snapshots:
'@babel/parser@7.24.8':
dependencies:
'@babel/types': 7.17.0
'@babel/types': 7.24.9
'@babel/runtime@7.24.8':
dependencies:
@ -3331,6 +3344,8 @@ snapshots:
'@types/estree@1.0.5': {}
'@types/js-cookie@3.0.6': {}
'@types/js-yaml@4.0.9': {}
'@types/json5@0.0.29': {}
@ -4599,6 +4614,8 @@ snapshots:
jq-web@0.5.1: {}
js-cookie@3.0.5: {}
js-tokens@4.0.0: {}
js-yaml@3.14.1:

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -1,30 +1,44 @@
import React from "react";
import Link from "next/link";
import type { ModalProps } from "@mantine/core";
import {
Text,
Divider,
List,
Button,
Modal,
Flex,
Box,
AspectRatio,
ThemeIcon,
Image,
} from "@mantine/core";
import { Text, List, Button, Modal, Flex, Box, ThemeIcon, Image, Paper } from "@mantine/core";
import styled from "styled-components";
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { MdChevronRight } from "react-icons/md";
const StyledPaper = styled(Paper)<any>`
--bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
--line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
--line-color-2: ${({ theme }) => theme.GRID_COLOR_SECONDARY};
background-color: var(--bg-color);
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
linear-gradient(var(--line-color-2) 1px, transparent 1px),
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
background-position:
-1.5px -1.5px,
-1.5px -1.5px,
-1px -1px,
-1px -1px;
background-size:
100px 100px,
100px 100px,
20px 20px,
20px 20px;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
align-self: center;
`;
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
return (
<Modal
title={
<Flex align="center" gap="8">
<ThemeIcon variant="transparent">
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={24} height={24} />
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={20} height={20} />
</ThemeIcon>
<Text fz="h2" fw={600}>
<Text fz="24" fw={600}>
Get more with ToDiagram
</Text>
</Flex>
@ -34,59 +48,59 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
onClose={onClose}
zIndex={1001}
centered
radius="lg"
>
<Flex align="center">
<Box flex="0.6">
<Text fz="sm" mb="sm">
<Flex align="start">
<Box px="lg" pb="lg">
<Text fz="sm" mb="md">
More productivity. More power. Our most-requested features are now available on a
refined platform.
</Text>
<Text fz="sm" fw={500} mb="sm">
<Text fz="md" fw={500} mb="sm">
Here&apos;s what you get with ToDiagram:
</Text>
<List spacing="6" fz="sm" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
<List.Item>
Larger data support up to{" "}
<Text component="span" inherit fw={600}>
4 MB
</Text>
</List.Item>
<List.Item>Edit data directly on visualizations</List.Item>
<List.Item>Compare data differences on graphs</List.Item>
<List.Item>AI-powered data filter</List.Item>
<List.Item>Customizable graph colors</List.Item>
<List.Item>Tabs for multiple documents</List.Item>
<List.Item>...faster, and more</List.Item>
<List spacing="6" fz="md" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
<List.Item>Load up to 4 MB data</List.Item>
<List.Item>Edit data on diagrams</List.Item>
<List.Item>Compare data</List.Item>
<List.Item>AI-Powered filter</List.Item>
<List.Item>Customizable theme</List.Item>
<List.Item>Editor tabs</List.Item>
<List.Item>5X Faster loading</List.Item>
<List.Item>Store 200 Documents</List.Item>
</List>
<Link href="https://todiagram.com" target="_blank" passHref rel="noopener">
<Button
color="green"
fullWidth
mt="md"
size="md"
fw={500}
radius="md"
rightSection={<MdChevronRight size="24" />}
>
Get Started
</Button>
</Link>
</Box>
<Divider orientation="vertical" mx="md" />
<Box flex="1">
<AspectRatio ratio={16 / 9}>
<video
autoPlay
height="auto"
muted
loop
playsInline
style={{ display: "block", borderRadius: "8px", border: "2px solid #e9e9e9" }}
>
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
</video>
</AspectRatio>
<Text fz="md" my="sm">
<Text component="span" inherit fw={500}>
Cancel anytime.
</Text>{" "}
Pay monthly or annually.
</Text>
<Button
component="a"
href="https://todiagram.com?utm_source=app&utm_medium=upgrade_modal"
target="_blank"
rel="noopener"
color="green"
fullWidth
mt="md"
size="md"
fw={500}
radius="md"
rightSection={<MdChevronRight size="24" />}
>
Get Started
</Button>
</Box>
<StyledPaper ml="md" withBorder p="16">
<Image
miw="420"
mih="420"
mah="500"
src="/assets/todiagram_img.webp"
alt="ToDiagram"
fit="contain"
/>
</StyledPaper>
</Flex>
</Modal>
);

View File

@ -5,11 +5,13 @@ import { useMantineColorScheme } from "@mantine/core";
import "@mantine/dropzone/styles.css";
import styled, { ThemeProvider } from "styled-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import Cookie from "js-cookie";
import { NextSeo } from "next-seo";
import { SEO } from "src/constants/seo";
import { darkTheme, lightTheme } from "src/constants/theme";
import { Editor } from "src/containers/Editor";
import { BottomBar } from "src/containers/Editor/components/BottomBar";
import { UpgradeModal } from "src/containers/Modals";
import { Toolbar } from "src/containers/Toolbar";
import useConfig from "src/store/useConfig";
import useFile from "src/store/useFile";
@ -46,6 +48,12 @@ const EditorPage = () => {
const { setColorScheme } = useMantineColorScheme();
const checkEditorSession = useFile(state => state.checkEditorSession);
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
const [upgradeVisible, setUpgradeVisible] = React.useState(false);
React.useEffect(() => {
const isUpgradeShown = Cookie.get("upgrade_shown");
if (!isUpgradeShown) setUpgradeVisible(true);
}, []);
React.useEffect(() => {
if (isReady) checkEditorSession(query?.json);
@ -67,6 +75,13 @@ const EditorPage = () => {
<QueryClientProvider client={queryClient}>
<ExternalMode />
<ModalController />
<UpgradeModal
opened={upgradeVisible}
onClose={() => {
setUpgradeVisible(false);
Cookie.set("upgrade_shown", "true", { expires: 1 });
}}
/>
<StyledEditorWrapper>
<StyledPageWrapper>
<Toolbar />