client revised

src/modules/admin/pages/courses/lessons/EditLesson.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { useForm, useFieldArray } from "react-hook-form";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowLeft, House, Plus, Trash2 } from "lucide-react";
@@ -9,11 +9,15 @@ import { useCourses } from "@/contexts/AdminCoursesContext";
 import { useAuth } from "@/contexts/AuthContext";
 import { PageMeta } from "@/contexts/MetadataContext";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import api from "@/utils/api.util";
 import { Button } from "@/components/ui/button";
 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 CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
 
@@ -21,6 +25,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(),
   objectives: z.array(
     z.object({ value: z.string().min(1, "Objective cannot be empty.") })
   ).optional(),
@@ -38,11 +43,21 @@ export default function EditLesson() {
   const { user } = useAuth();
   const [lessonTitle, setLessonTitle] = useState("");
 
-  const { register, handleSubmit, reset, control, 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, handleSubmit, reset, control, setValue, formState: { errors, isDirty } } = useForm({
     resolver: zodResolver(schema),
-    defaultValues: { title: "", description: "", order: 0, objectives: [] },
+    defaultValues: { title: "", description: "", order: 0, subscription: "free", objectives: [] },
   });
 
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
   const { fields, append, remove, insert, update } = useFieldArray({ control, name: "objectives" });
 
   const handleObjectivePaste = (e, index) => {
@@ -68,6 +83,7 @@ export default function EditLesson() {
         title: lesson.title ?? "",
         description: lesson.description ?? "",
         order: lesson.order ?? 0,
+        subscription: lesson.subscription || defaultTierSlug,
         objectives: lesson.objectives?.map((v) => ({ value: v.text })) ?? [],
       });
     })();
@@ -81,6 +97,7 @@ export default function EditLesson() {
     if (!isDirty) { bypassOnce(); return navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/view`); }
     const result = await updateLesson(courseId, unitId, lessonId, {
       ...data,
+      subscription: data.subscription || defaultTierSlug,
       objectives: data.objectives?.map((o, i) => ({
         objective_id: o.objective_id ?? null,
         text: o.value,
@@ -132,6 +149,28 @@ export default function EditLesson() {
                 <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 lesson directly, independent of the unit it's attached to.
+                </p>
+              </div>
+
             </div>
 
             {/* Objectives */}