fix: remove Buckle dialog (#617)

src/context/dialog-context/dialog-context.tsx

@@ -47,10 +47,6 @@ export interface DialogContext {
     openStarUsDialog: () => void;
     closeStarUsDialog: () => void;
 
-    // Buckle dialog
-    openBuckleDialog: () => void;
-    closeBuckleDialog: () => void;
-
     // Export image dialog
     openExportImageDialog: (
         params: Omit<ExportImageDialogProps, 'dialog'>
@@ -97,8 +93,6 @@ export const dialogContext = createContext<DialogContext>({
     closeExportDiagramDialog: emptyFn,
     openImportDiagramDialog: emptyFn,
     closeImportDiagramDialog: emptyFn,
-    openBuckleDialog: emptyFn,
-    closeBuckleDialog: emptyFn,
     openImportDBMLDialog: emptyFn,
     closeImportDBMLDialog: emptyFn,
 });

src/context/dialog-context/dialog-provider.tsx

@@ -19,7 +19,6 @@ import type { ExportImageDialogProps } from '@/dialogs/export-image-dialog/expor
 import { ExportImageDialog } from '@/dialogs/export-image-dialog/export-image-dialog';
 import { ExportDiagramDialog } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
 import { ImportDiagramDialog } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
-import { BuckleDialog } from '@/dialogs/buckle-dialog/buckle-dialog';
 import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
 import { ImportDBMLDialog } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
 
@@ -54,7 +53,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
         );
 
     const [openStarUsDialog, setOpenStarUsDialog] = useState(false);
-    const [openBuckleDialog, setOpenBuckleDialog] = useState(false);
 
     // Export image dialog
     const [openExportImageDialog, setOpenExportImageDialog] = useState(false);
@@ -147,8 +145,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
                 closeTableSchemaDialog: () => setOpenTableSchemaDialog(false),
                 openStarUsDialog: () => setOpenStarUsDialog(true),
                 closeStarUsDialog: () => setOpenStarUsDialog(false),
-                closeBuckleDialog: () => setOpenBuckleDialog(false),
-                openBuckleDialog: () => setOpenBuckleDialog(true),
                 closeExportImageDialog: () => setOpenExportImageDialog(false),
                 openExportImageDialog: openExportImageDialogHandler,
                 openExportDiagramDialog: () => setOpenExportDiagramDialog(true),
@@ -193,7 +189,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
             />
             <ExportDiagramDialog dialog={{ open: openExportDiagramDialog }} />
             <ImportDiagramDialog dialog={{ open: openImportDiagramDialog }} />
-            <BuckleDialog dialog={{ open: openBuckleDialog }} />
             <ImportDBMLDialog
                 dialog={{ open: openImportDBMLDialog }}
                 {...importDBMLDialogParams}

src/context/local-config-context/local-config-context.tsx

@@ -30,12 +30,6 @@ export interface LocalConfigContext {
     starUsDialogLastOpen: number;
     setStarUsDialogLastOpen: (lastOpen: number) => void;
 
-    buckleWaitlistOpened: boolean;
-    setBuckleWaitlistOpened: (githubRepoOpened: boolean) => void;
-
-    buckleDialogLastOpen: number;
-    setBuckleDialogLastOpen: (lastOpen: number) => void;
-
     showDependenciesOnCanvas: boolean;
     setShowDependenciesOnCanvas: (showDependenciesOnCanvas: boolean) => void;
 
@@ -65,12 +59,6 @@ export const LocalConfigContext = createContext<LocalConfigContext>({
     starUsDialogLastOpen: 0,
     setStarUsDialogLastOpen: emptyFn,
 
-    buckleWaitlistOpened: false,
-    setBuckleWaitlistOpened: emptyFn,
-
-    buckleDialogLastOpen: 0,
-    setBuckleDialogLastOpen: emptyFn,
-
     showDependenciesOnCanvas: false,
     setShowDependenciesOnCanvas: emptyFn,
 

src/context/local-config-context/local-config-provider.tsx

@@ -10,8 +10,6 @@ const showCardinalityKey = 'show_cardinality';
 const hideMultiSchemaNotificationKey = 'hide_multi_schema_notification';
 const githubRepoOpenedKey = 'github_repo_opened';
 const starUsDialogLastOpenKey = 'star_us_dialog_last_open';
-const buckleWaitlistOpenedKey = 'buckle_waitlist_opened';
-const buckleDialogLastOpenKey = 'buckle_dialog_last_open';
 const showDependenciesOnCanvasKey = 'show_dependencies_on_canvas';
 const showMiniMapOnCanvasKey = 'show_minimap_on_canvas';
 
@@ -51,17 +49,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
             parseInt(localStorage.getItem(starUsDialogLastOpenKey) || '0')
         );
 
-    const [buckleWaitlistOpened, setBuckleWaitlistOpened] =
-        React.useState<boolean>(
-            (localStorage.getItem(buckleWaitlistOpenedKey) || 'false') ===
-                'true'
-        );
-
-    const [buckleDialogLastOpen, setBuckleDialogLastOpen] =
-        React.useState<number>(
-            parseInt(localStorage.getItem(buckleDialogLastOpenKey) || '0')
-        );
-
     const [showDependenciesOnCanvas, setShowDependenciesOnCanvas] =
         React.useState<boolean>(
             (localStorage.getItem(showDependenciesOnCanvasKey) || 'false') ===
@@ -84,20 +71,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
         localStorage.setItem(githubRepoOpenedKey, githubRepoOpened.toString());
     }, [githubRepoOpened]);
 
-    useEffect(() => {
-        localStorage.setItem(
-            buckleDialogLastOpenKey,
-            buckleDialogLastOpen.toString()
-        );
-    }, [buckleDialogLastOpen]);
-
-    useEffect(() => {
-        localStorage.setItem(
-            buckleWaitlistOpenedKey,
-            buckleWaitlistOpened.toString()
-        );
-    }, [buckleWaitlistOpened]);
-
     useEffect(() => {
         localStorage.setItem(
             hideMultiSchemaNotificationKey,
@@ -154,10 +127,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
                 setStarUsDialogLastOpen,
                 showDependenciesOnCanvas,
                 setShowDependenciesOnCanvas,
-                setBuckleDialogLastOpen,
-                buckleDialogLastOpen,
-                buckleWaitlistOpened,
-                setBuckleWaitlistOpened,
                 showMiniMapOnCanvas,
                 setShowMiniMapOnCanvas,
             }}

src/dialogs/buckle-dialog/buckle-dialog.tsx

@@ -1,80 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { useDialog } from '@/hooks/use-dialog';
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/dialog/dialog';
-import { Button } from '@/components/button/button';
-import type { BaseDialogProps } from '../common/base-dialog-props';
-import { useLocalConfig } from '@/hooks/use-local-config';
-import { useTheme } from '@/hooks/use-theme';
-
-export interface BuckleDialogProps extends BaseDialogProps {}
-
-export const BuckleDialog: React.FC<BuckleDialogProps> = ({ dialog }) => {
-    const { setBuckleWaitlistOpened } = useLocalConfig();
-    const { effectiveTheme } = useTheme();
-
-    useEffect(() => {
-        if (!dialog.open) return;
-    }, [dialog.open]);
-    const { closeBuckleDialog } = useDialog();
-
-    const handleConfirm = useCallback(() => {
-        setBuckleWaitlistOpened(true);
-        window.open('https://waitlist.buckle.dev', '_blank');
-    }, [setBuckleWaitlistOpened]);
-
-    return (
-        <Dialog
-            {...dialog}
-            onOpenChange={(open) => {
-                if (!open) {
-                    closeBuckleDialog();
-                }
-            }}
-        >
-            <DialogContent
-                className="flex flex-col"
-                showClose={false}
-                onInteractOutside={(e) => {
-                    e.preventDefault();
-                }}
-            >
-                <DialogHeader>
-                    <DialogTitle className="hidden" />
-                    <DialogDescription className="hidden" />
-                </DialogHeader>
-                <div className="flex w-full flex-col items-center">
-                    <img
-                        src={
-                            effectiveTheme === 'light'
-                                ? '/buckle-animated.gif'
-                                : '/buckle.png'
-                        }
-                        className="h-16"
-                    />
-                    <div className="mt-6 text-center text-base">
-                        We've been working on something big -{' '}
-                        <span className="font-semibold">Ready to explore?</span>
-                    </div>
-                </div>
-                <DialogFooter className="flex gap-1 md:justify-between">
-                    <DialogClose asChild>
-                        <Button variant="secondary">Not now</Button>
-                    </DialogClose>
-                    <DialogClose asChild>
-                        <Button onClick={handleConfirm}>
-                            Try ChartDB v2.0!
-                        </Button>
-                    </DialogClose>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-};

src/pages/editor-page/editor-page.tsx

@@ -34,10 +34,6 @@ import { DiffProvider } from '@/context/diff-context/diff-provider';
 const OPEN_STAR_US_AFTER_SECONDS = 30;
 const SHOW_STAR_US_AGAIN_AFTER_DAYS = 1;
 
-const OPEN_BUCKLE_AFTER_SECONDS = 60;
-const SHOW_BUCKLE_AGAIN_AFTER_DAYS = 1;
-const SHOW_BUCKLE_AGAIN_OPENED_AFTER_DAYS = 7;
-
 export const EditorDesktopLayoutLazy = React.lazy(
     () => import('./editor-desktop-layout')
 );
@@ -50,7 +46,7 @@ const EditorPageComponent: React.FC = () => {
     const { diagramName, currentDiagram, schemas, filteredSchemas } =
         useChartDB();
     const { openSelectSchema, showSidePanel } = useLayout();
-    const { openStarUsDialog, openBuckleDialog } = useDialog();
+    const { openStarUsDialog } = useDialog();
     const { diagramId } = useParams<{ diagramId: string }>();
     const { isMd: isDesktop } = useBreakpoint('md');
     const {
@@ -59,9 +55,6 @@ const EditorPageComponent: React.FC = () => {
         starUsDialogLastOpen,
         setStarUsDialogLastOpen,
         githubRepoOpened,
-        setBuckleDialogLastOpen,
-        buckleDialogLastOpen,
-        buckleWaitlistOpened,
     } = useLocalConfig();
     const { toast } = useToast();
     const { t } = useTranslation();
@@ -92,37 +85,6 @@ const EditorPageComponent: React.FC = () => {
         starUsDialogLastOpen,
     ]);
 
-    useEffect(() => {
-        if (HIDE_BUCKLE_DOT_DEV) {
-            return;
-        }
-
-        if (!currentDiagram?.id) {
-            return;
-        }
-
-        if (
-            new Date().getTime() - buckleDialogLastOpen >
-            1000 *
-                60 *
-                60 *
-                24 *
-                (buckleWaitlistOpened
-                    ? SHOW_BUCKLE_AGAIN_OPENED_AFTER_DAYS
-                    : SHOW_BUCKLE_AGAIN_AFTER_DAYS)
-        ) {
-            const lastOpen = new Date().getTime();
-            setBuckleDialogLastOpen(lastOpen);
-            setTimeout(openBuckleDialog, OPEN_BUCKLE_AFTER_SECONDS * 1000);
-        }
-    }, [
-        currentDiagram?.id,
-        buckleWaitlistOpened,
-        openBuckleDialog,
-        setBuckleDialogLastOpen,
-        buckleDialogLastOpen,
-    ]);
-
     const lastDiagramId = useRef<string>('');
 
     const handleChangeSchema = useCallback(async () => {

src/pages/editor-page/top-navbar/top-navbar.tsx

@@ -7,7 +7,6 @@ import { DiagramName } from './diagram-name';
 import { LastSaved } from './last-saved';
 import { LanguageNav } from './language-nav/language-nav';
 import { Menu } from './menu/menu';
-import { HIDE_BUCKLE_DOT_DEV } from '@/lib/env';
 
 export interface TopNavbarProps {}
 
@@ -26,27 +25,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
         );
     }, [isDesktop]);
 
-    const openBuckleWaitlist = useCallback(() => {
-        window.open('https://waitlist.buckle.dev', '_blank');
-    }, []);
-
-    const renderGetBuckleButton = useCallback(() => {
-        if (HIDE_BUCKLE_DOT_DEV) {
-            return null;
-        }
-
-        return (
-            <button
-                className="gradient-background relative inline-flex items-center justify-center overflow-hidden rounded-lg p-0.5 text-base text-gray-700 focus:outline-none focus:ring-0"
-                onClick={openBuckleWaitlist}
-            >
-                <span className="relative inline-flex items-center justify-center whitespace-nowrap rounded-md bg-background px-2 py-0.5 font-primary text-xs font-semibold text-foreground md:text-sm">
-                    ChartDB v2.0 🔥
-                </span>
-            </button>
-        );
-    }, [openBuckleWaitlist]);
-
     return (
         <nav className="flex flex-col justify-between border-b px-3 md:h-12 md:flex-row md:items-center md:px-4">
             <div className="flex flex-1 flex-col justify-between gap-x-1 md:flex-row md:justify-normal">
@@ -68,7 +46,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                     </a>
                     {!isDesktop ? (
                         <div className="flex items-center gap-2">
-                            {renderGetBuckleButton()}
                             {renderStars()}
                             <LanguageNav />
                         </div>
@@ -80,7 +57,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                 <>
                     <DiagramName />
                     <div className="hidden flex-1 items-center justify-end gap-2 sm:flex">
-                        {renderGetBuckleButton()}
                         <LastSaved />
                         {renderStars()}
                         <LanguageNav />