feat: 🎸 version dialo

vite/src/views/products/plan/PlanEditorView.tsx

@@ -6,13 +6,13 @@ import { useProductChangedAlert } from "../product/hooks/useProductChangedAlert"
 import { useProductQuery } from "../product/hooks/useProductQuery";
 import { ProductContext, useProductContext } from "../product/ProductContext";
 import { ProductItemContext } from "../product/product-item/ProductItemContext";
-import ConfirmNewVersionDialog from "../product/versioning/ConfirmNewVersionDialog";
 import { EditPlanFeatureSheet } from "./components/EditPlanFeatureSheet/EditPlanFeatureSheet";
 import { EditPlanHeader } from "./components/EditPlanHeader";
 import { EditPlanSheet } from "./components/EditPlanSheet";
 import { ManagePlan } from "./components/ManagePlan";
 import { SaveChangesBar } from "./components/SaveChangesBar";
 import { usePlanData } from "./hooks/usePlanData";
+import ConfirmNewVersionDialog from "./versioning/ConfirmNewVersionDialog";
 
 type Sheets = "edit-plan" | "edit-feature" | null;
 
@@ -26,7 +26,7 @@ export default function PlanEditorView() {
 	const { modal } = useProductChangedAlert({ hasChanges });
 	const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
 
-	const [sheet, setSheet] = useState<Sheets>(null);
+	const [sheet, setSheet] = useState<Sheets>("edit-plan");
 	const [editingState, setEditingState] = useState<{
 		type: "plan" | "feature" | null;
 		id: string | null;
@@ -62,6 +62,11 @@ export default function PlanEditorView() {
 			<ConfirmNewVersionDialog
 				open={showNewVersionDialog}
 				setOpen={setShowNewVersionDialog}
+				onVersionCreated={() => {
+					// Reset editing state when new version is created
+					setEditingState({ type: null, id: null });
+					setSheet("edit-plan");
+				}}
 			/>
 			<div className="flex w-full h-full overflow-y-auto bg-[#eee]">
 				<div className="flex flex-col justify-between h-full flex-1">

vite/src/views/products/plan/versioning/ConfirmNewVersionDialog.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/v2/buttons/Button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/v2/dialogs/Dialog";
+import { Input } from "@/components/v2/inputs/Input";
+import { useAxiosInstance } from "@/services/useAxiosInstance";
+import { useProductQuery } from "../../product/hooks/useProductQuery";
+import { useProductContext } from "../../product/ProductContext";
+import { updateProduct } from "../../product/utils/updateProduct";
+
+export default function ConfirmNewVersionDialog({
+	open,
+	setOpen,
+	onVersionCreated,
+}: {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	onVersionCreated?: () => void;
+}) {
+	const axiosInstance = useAxiosInstance();
+	const { product } = useProductContext();
+	const { refetch } = useProductQuery();
+
+	const [confirmText, setConfirmText] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const onClick = async () => {
+		if (confirmText !== product.id) {
+			toast.error("Confirmation text is incorrect");
+			return;
+		}
+
+		setIsLoading(true);
+		await updateProduct({
+			axiosInstance,
+			product,
+			onSuccess: async () => {
+				await refetch();
+				onVersionCreated?.(); // Reset editing state
+			},
+		});
+		setIsLoading(false);
+		setOpen(false);
+		// toast.success("New version created successfully");
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild></DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Create new version?</DialogTitle>
+					<DialogDescription className="text-sm flex flex-col gap-4">
+						<p>
+							After creating a new version, it will be{" "}
+							<span className="font-bold">
+								active immediately for new customers
+							</span>
+							. You can migrate existing customers to the new version after.
+						</p>
+						<p>
+							Type <code className="font-bold">{product.id}</code> to continue.
+						</p>
+						<Input
+							value={confirmText}
+							onChange={(e) => setConfirmText(e.target.value)}
+							type="text"
+							placeholder={product.id}
+							className="w-full text-black"
+						/>
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button variant="primary" onClick={onClick} isLoading={isLoading}>
+						Create new version
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

vite/src/views/products/product/hooks/useProductQuery.tsx

@@ -36,9 +36,12 @@ export const useProductQuery = () => {
 		if (!productId) return null;
 
 		const url = `/products/${productId}/data2`;
-		const queryParams = {
-			version: queryStates.version,
-		};
+		const queryParams: { version?: number } = {};
+		
+		// Only include version if it's explicitly set, otherwise fetch latest
+		if (queryStates.version) {
+			queryParams.version = queryStates.version;
+		}
 
 		const { data } = await axiosInstance.get(url, { params: queryParams });
 		return data;