client revised

src/modules/admin/pages/courses/units/AddUnit.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams, useLocation } from "react-router-dom";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ChevronLeft, ChevronRight, Check, FileText, ListChecks, Link2, Plus } from "lucide-react";
@@ -15,6 +15,9 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
 import DraftRequirementsEditor from "@/modules/admin/components/courses/DraftRequirementsEditor";
 import AttachUnitsDialog from "@/modules/admin/components/library/AttachUnitsDialog";
@@ -23,6 +26,7 @@ const schema = z.object({
   title: z.string().min(1, "Title is required."),
   description: z.string().optional(),
   order: z.coerce.number().min(0).default(0),
+  subscription: z.string().optional(),
 });
 
 const STEPS = [
@@ -49,11 +53,21 @@ export default function AddUnit() {
   const [requirements, setRequirements] = useState([]);
   const [attachOpen, setAttachOpen] = useState(false);
 
-  const { register, trigger, getValues, formState: { errors, isDirty } } = useForm({
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, trigger, getValues, control, setValue, formState: { errors, isDirty } } = useForm({
     resolver: zodResolver(schema),
-    defaultValues: { title: "", description: "", order: 0 },
+    defaultValues: { title: "", description: "", order: 0, subscription: "free" },
   });
 
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
   const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);
 
   useEffect(() => {
@@ -69,7 +83,8 @@ export default function AddUnit() {
   // click at Requirements (the last step), which is purely a draft form
   // until now.
   const handleCreate = async () => {
-    const result = await createUnit(courseId, { ...getValues(), createdBy: user?.user_id });
+    const values = getValues();
+    const result = await createUnit(courseId, { ...values, subscription: values.subscription || defaultTierSlug, createdBy: user?.user_id });
     const newUnitId = result?.data?.data?.unit_id;
     if (!newUnitId) return;
 
@@ -178,6 +193,28 @@ export default function AddUnit() {
                       <Label htmlFor="order">Order</Label>
                       <Input id="order" type="number" min={0} {...register("order")} />
                     </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Subscription</Label>
+                      <Select
+                        value={watchedSubscr || defaultTierSlug}
+                        onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="No tier gate" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tierCategories.map((c) => (
+                            <SelectItem key={c.slug} value={c.slug}>
+                              {c.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <p className="text-xs text-muted-foreground">
+                        Optional. Gates this unit directly, independent of the course it's attached to.
+                      </p>
+                    </div>
                   </div>
                 )}