openstatus.dev
Openstatus
www.openstatus.dev
chore: form-scheduling upgrade note (#1376)
authored by
Maximilian Kaske
and committed by
GitHub
2fa2f9ef
a9ce6bd2
+17
-4
+1
-1
apps/dashboard/src/components/common/note.tsx
+1
-1
apps/dashboard/src/components/common/note.tsx
···
3
3
import { type VariantProps, cva } from "class-variance-authority";
4
4
5
5
const noteVariants = cva(
6
-
"flex items-center gap-3 rounded-md border px-3 py-2 [&>svg]:size-4 [&>svg]:text-current [&>svg]:shrink-0",
6
+
"flex items-center gap-2 rounded-md border px-3 py-2 [&>svg]:size-4 [&>svg]:text-current [&>svg]:shrink-0",
7
7
{
8
8
variants: {
9
9
variant: {
+1
apps/dashboard/src/components/data-table/billing/data-table.tsx
+1
apps/dashboard/src/components/data-table/billing/data-table.tsx
+15
-3
apps/dashboard/src/components/forms/monitor/form-scheduling-regions.tsx
+15
-3
apps/dashboard/src/components/forms/monitor/form-scheduling-regions.tsx
···
28
28
type MonitorFlyRegion,
29
29
monitorPeriodicity,
30
30
} from "@openstatus/db/src/schema/constants";
31
-
import { useTransition } from "react";
31
+
import { useState, useTransition } from "react";
32
32
import { useForm } from "react-hook-form";
33
33
import { toast } from "sonner";
34
34
import { z } from "zod";
35
35
36
-
import { Note } from "@/components/common/note";
36
+
import { Note, NoteButton } from "@/components/common/note";
37
+
import { UpgradeDialog } from "@/components/dialogs/upgrade";
37
38
import { useTRPC } from "@/lib/trpc/client";
38
39
import { groupByContinent } from "@openstatus/utils";
39
40
import { useQuery } from "@tanstack/react-query";
40
41
import { isTRPCClientError } from "@trpc/client";
41
-
import { Info } from "lucide-react";
42
+
import { CircleX, Info } from "lucide-react";
42
43
43
44
const DEFAULT_PERIODICITY = "10m";
44
45
const DEFAULT_REGIONS = ["ams", "fra", "iad", "syd", "jnb", "gru"];
···
60
61
onSubmit: (values: FormValues) => Promise<void>;
61
62
}) {
62
63
const trpc = useTRPC();
64
+
const [openDialog, setOpenDialog] = useState(false);
63
65
const { data: workspace } = useQuery(trpc.workspace.get.queryOptions());
64
66
const form = useForm<FormValues>({
65
67
resolver: zodResolver(schema),
···
157
159
</FormItem>
158
160
)}
159
161
/>
162
+
{!periodicity.includes(watchPeriodicity) ? (
163
+
<Note color="error">
164
+
<CircleX />
165
+
The periodicity you are selecting is not allowed for your plan.
166
+
<NoteButton type="button" onClick={() => setOpenDialog(true)}>
167
+
Upgrade your plan
168
+
</NoteButton>
169
+
</Note>
170
+
) : null}
160
171
</FormCardContent>
161
172
<FormCardSeparator />
162
173
<FormCardContent className="grid gap-4">
···
343
354
</FormCardFooter>
344
355
</FormCard>
345
356
</form>
357
+
<UpgradeDialog open={openDialog} onOpenChange={setOpenDialog} />
346
358
</Form>
347
359
);
348
360
}