@learnpack/learnpack 5.0.154 → 5.0.158

package/src/creator/src/components/Source.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { ParsedLink } from "./LinkUploader"
-import useStore from "../utils/store"
+// import useStore from "../utils/store"
 import { SVGS } from "../assets/svgs"
 
 interface SourceProps {
@@ -14,8 +14,8 @@ interface SourceProps {
 // }
 
 const Source: React.FC<SourceProps> = ({ source }) => {
-  const setFormState = useStore((state) => state.setFormState)
-  const formState = useStore((state) => state.formState)
+  // const setFormState = useStore((state) => state.setFormState)
+  // const formState = useStore((state) => state.formState)
 
   const {
     url,
@@ -28,18 +28,16 @@ const Source: React.FC<SourceProps> = ({ source }) => {
     // text,
   } = source
 
-
-
   return (
     <div className="relative max-w-xs bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
       <div className="p-4 flex flex-col space-y-2">
         <button
           className="absolute top-2 right-2"
-          onClick={() => {
-            setFormState({
-              sources: formState.sources.filter((s) => s !== source),
-            })
-          }}
+          // onClick={() => {
+          //   setFormState({
+          //     sources: formState.sources.filter((s) => s !== source),
+          //   })
+          // }}
         >
           {SVGS.redClose}
         </button>

package/src/creator/src/components/StepWizard.tsx

@@ -31,7 +31,7 @@ const StepWizard: React.FC<Props> = ({
 
   const goNext = () => {
     const index = steps.findIndex((step) => step.slug === currentStep)
-    if (steps[index].required && !formState[steps[index].slug]) {
+    if (steps[index].required && !steps[index].isCompleted) {
       toast.error("Please fill out all required fields!")
       return
     }
@@ -48,6 +48,8 @@ const StepWizard: React.FC<Props> = ({
       setFormState({ ...formState, currentStep: steps[index - 1].slug })
   }
 
+  console.log(index, totalSteps, steps)
+
   return (
     <div className="min-h-screen flex flex-col items-center justify-center  text-center px-4">
       <div className=" rounded-xl  p-8 w-full max-w-xl">
@@ -87,22 +89,23 @@ const StepWizard: React.FC<Props> = ({
           {steps.find((step) => step.slug === currentStep)?.content}
         </div>
 
-        {/* Dot Indicators */}
-
-        {/* Navigation */}
         <div className="flex justify-between">
           <button
             onClick={goBack}
             disabled={index === 0}
-            className="text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40"
+            className={`text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40  ${
+              index === 0 ? "cursor-not-allowed" : "cursor-pointer"
+            }`}
           >
             ⬅ Back
           </button>
           <button
             onClick={index === totalSteps - 1 ? onFinish : goNext}
-            className="text-sm text-blue-600 hover:text-blue-800 disabled:opacity-40"
+            className={`text-sm text-blue-600 hover:text-blue-800 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed p-2 rounded-md ${
+              index === totalSteps - 1 ? "bg-blue-600 text-white" : ""
+            }`}
           >
-            Next ➡
+            {index === totalSteps - 1 ? "Finish 🚀" : "Next ➡"}
           </button>
         </div>
       </div>

package/src/creator/src/components/Uploader.tsx

@@ -45,17 +45,12 @@ export const Uploader = ({
             icon={SVGS.contentTable}
             onClick={() => handleSelectOption("text")}
           />
-
-          <FileUploader
-            styledAs="card"
-            onResult={(file) => {
-              onFinish(
-                `The following information comes from a PDF file uploaded by the user: ${JSON.stringify(
-                  file
-                )}`
-              )
-            }}
+          <ContentCard
+            description="Upload files"
+            icon={SVGS.pdf}
+            onClick={() => handleSelectOption("files")}
           />
+
           <ContentCard
             description="Share a Youtube link"
             icon={SVGS.youtube}
@@ -66,6 +61,8 @@ export const Uploader = ({
 
       {selectedOption === "text" && <TextUploader onFinish={onFinish} />}
 
+      {selectedOption === "files" && <FileUploader styledAs="card" />}
+
       {selectedOption === "youtube" && (
         <LinkUploader
           onResult={(link) => {

package/src/creator/src/components/syllabus/ContentIndex.tsx

@@ -75,11 +75,15 @@ const ContentSecondaryHeader = ({
 
 export const GenerateButton = ({
   handleSubmit,
+  openLogin,
 }: {
   handleSubmit: () => void
+  openLogin: () => void
 }) => {
   const history = useStore((state) => state.history)
   const undo = useStore((state) => state.undo)
+  const auth = useStore((state) => state.auth)
+  const setAuth = useStore((state) => state.setAuth)
   const prev = history[history.length - 2]
   return (
     <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4 justify-end mt-6">
@@ -95,6 +99,33 @@ export const GenerateButton = ({
           Revert changes
         </button>
       )}
+      {auth.user && (
+        <div
+          // onClick={handleSubmit}
+          className="text-sm text-gray-500 bg-gray-200 rounded px-4 py-2 flex items-center justify-center   flex-col"
+        >
+          <span>
+            Creating the course as <strong>{auth.user.first_name}</strong>
+          </span>
+          <span>
+            or{" "}
+            <button
+              className="text-sm text-gray-500 bg-gray-200 rounded  hover:bg-gray-300 items-center justify-center cursor-pointer "
+              onClick={() => {
+                setAuth({
+                  rigoToken: "",
+                  bcToken: "",
+                  userId: "",
+                  user: null,
+                })
+                openLogin()
+              }}
+            >
+              <strong>login as someone else</strong>
+            </button>
+          </span>
+        </div>
+      )}
       <button
         onClick={handleSubmit}
         className="w-full sm:w-auto bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 flex items-center justify-center gap-2 cursor-pointer"
@@ -110,10 +141,12 @@ export const ContentIndex = ({
   handleSubmit,
   messages,
   isThinking,
+  openLogin,
 }: {
   handleSubmit: () => void
   messages: TMessage[]
   isThinking: boolean
+  openLogin: () => void
 }) => {
   const history = useStore((state) => state.history)
   const push = useStore((state) => state.push)
@@ -235,7 +268,10 @@ export const ContentIndex = ({
               </div>
             ))}
             {syllabus.lessons.length > 0 && (
-              <GenerateButton handleSubmit={handleSubmit} />
+              <GenerateButton
+                handleSubmit={handleSubmit}
+                openLogin={openLogin}
+              />
             )}
           </>
         )}

package/src/creator/src/components/syllabus/Sidebar.tsx

@@ -127,14 +127,7 @@ export const Sidebar = ({
             }}
           />
           <div className="absolute bottom-2 right-2 flex gap-1 items-center">
-            <div className="relative inline-block">
-              <FileUploader
-                onResult={(res) => {
-                  setUploadedFiles([...(uploadedFiles || []), ...res])
-                }}
-              />
-            </div>
-
+            <FileUploader />
             <button
               className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
               onClick={() => {

package/src/creator/src/components/syllabus/SyllabusEditor.tsx

@@ -20,7 +20,6 @@ import { ContentIndex } from "./ContentIndex"
 import { Sidebar } from "./Sidebar"
 import Login from "../Login"
 import { useNavigate } from "react-router"
-import PreviewGenerator from "../PreviewGenerator"
 import { ParamsChecker } from "../ParamsChecker"
 import { slugify } from "../../utils/creatorUtils"
 import { RIGO_FLOAT_GIT } from "../../utils/constants"
@@ -177,7 +176,6 @@ const SyllabusEditor: React.FC = () => {
         text="Learnpack is setting up your tutorial.
 It may take a moment..."
       />
-      <PreviewGenerator />
     </>
   ) : (
     <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
@@ -202,6 +200,9 @@ It may take a moment..."
         handleSubmit={handleSubmit}
         messages={messages}
         isThinking={isThinking}
+        openLogin={() => {
+          setShowLoginModal(true)
+        }}
       />
     </div>
   )

package/src/creator/src/main.tsx

@@ -5,7 +5,6 @@ import "./index.css"
 import App from "./App.tsx"
 import SyllabusEditor from "./components/syllabus/SyllabusEditor.tsx"
 import { Toaster } from "react-hot-toast"
-import PreviewGenerator from "./components/PreviewGenerator.tsx"
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Toaster />
@@ -13,7 +12,6 @@ createRoot(document.getElementById("root")!).render(
       <Routes>
         <Route path="/creator" element={<App />} />
         <Route path="/creator/syllabus" element={<SyllabusEditor />} />
-        <Route path="/creator/image" element={<PreviewGenerator />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>

package/src/creator/src/utils/store.ts

@@ -1,7 +1,8 @@
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
 import { Lesson } from "../components/LessonItem"
-import { ParsedLink } from "../components/LinkUploader"
+import { ParsedFile } from "../components/FileUploader"
+// import { ParsedLink } from "../components/LinkUploader"
 
 export type FormState = {
   description: string
@@ -9,7 +10,7 @@ export type FormState = {
   targetAudience: string
   hasContentIndex: boolean
   contentIndex: string
-  sources: ParsedLink[]
+  // sources: ParsedLink[]
   isCompleted: boolean
   variables: string[]
   currentStep: string
@@ -43,8 +44,8 @@ type Store = {
   // syllabus: Syllabus
   planToRedirect: string
   setPlanToRedirect: (planToRedirect: string) => void
-  uploadedFiles: UploadedFile[]
-  setUploadedFiles: (uploadedFiles: UploadedFile[]) => void
+  uploadedFiles: ParsedFile[]
+  setUploadedFiles: (uploadedFiles: ParsedFile[]) => void
 
   cleanHistory: () => void
   history: Syllabus[]
@@ -75,14 +76,14 @@ const useStore = create<Store>()(
         targetAudience: "",
         hasContentIndex: false,
         contentIndex: "",
-        sources: [],
+        // sources: [],
         isCompleted: false,
         currentStep: "description",
         variables: [
           "description",
           "duration",
-          // "targetAudience",
           "hasContentIndex",
+          "verifyHuman",
         ],
       },
       setFormState: (formState: Partial<FormState>) =>