feat: show initial modal

AykutSarac · Oct 23, 2024 · 59c2588 · 59c2588
1 parent 45f9f79
commit 59c2588
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/todiagram_img.png b/public/assets/todiagram_img.png
diff --git a/public/assets/todiagram_img.webp b/public/assets/todiagram_img.webp
diff --git a/src/containers/Modals/UpgradeModal/index.tsx b/src/containers/Modals/UpgradeModal/index.tsx
@@ -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>
   );

diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
@@ -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 />