@learnpack/learnpack 5.0.172 → 5.0.178

package/src/creator/src/components/FileUploader.tsx

@@ -1,12 +1,8 @@
 import React, { useRef, useState } from "react"
-import * as pdfjsLib from "pdfjs-dist"
-import mammoth from "mammoth"
 import { SVGS } from "../assets/svgs"
-import pdfWorker from "pdfjs-dist/build/pdf.worker?worker"
 import { ContentCard } from "./ContentCard"
 import useStore from "../utils/store"
-
-pdfjsLib.GlobalWorkerOptions.workerPort = new pdfWorker()
+import toast from "react-hot-toast"
 
 const allowedTypes = [
   "application/pdf",
@@ -21,53 +17,64 @@ export interface ParsedFile {
 }
 
 interface FileUploaderProps {
-  // onResult: (files: ParsedFile[]) => void
   styledAs?: "button" | "card"
 }
 
 const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
+  const rigoToken = useStore((state) => state.auth.rigoToken)
   const inputRef = useRef<HTMLInputElement>(null)
   const uploadedFiles = useStore((state) => state.uploadedFiles)
   const setUploadedFiles = useStore((state) => state.setUploadedFiles)
   const [isDragging, setIsDragging] = useState(false)
-  // const [parsedFiles, setParsedFiles] = useState<ParsedFile[]>([]) F
+  const [isLoading, setIsLoading] = useState(false)
 
-  const extractText = async (file: File): Promise<ParsedFile> => {
+  const extractTextFromFile = async (file: File): Promise<ParsedFile> => {
     const { type, name } = file
 
-    if (type === "application/pdf") {
-      const arrayBuffer = await file.arrayBuffer()
-      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
-      let text = ""
-
-      for (let i = 0; i < pdf.numPages; i++) {
-        const page = await pdf.getPage(i + 1)
-        const content = await page.getTextContent()
-        text += content.items.map((item: any) => item.str).join(" ") + "\n"
-      }
-
+    if (type === "text/plain" || type === "text/markdown") {
+      const text = await file.text()
       return { name, text }
     }
 
-    if (
-      type ===
-      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-    ) {
-      const arrayBuffer = await file.arrayBuffer()
-      const { value } = await mammoth.extractRawText({ arrayBuffer })
-      return { name, text: value }
+    const formData = new FormData()
+    formData.append("file", file)
+
+    const loadingToast = toast.loading(`Processing ${file.name}...`)
+    try {
+      const res = await fetch("http://localhost:3000/read-document", {
+        method: "POST",
+        headers: {
+          "x-rigo-token": rigoToken,
+        },
+        body: formData,
+      })
+
+      if (!res.ok) throw new Error(`Failed to read ${file.name}`)
+      const data = await res.json()
+      console.log("DATA FROM BACKEND", data)
+      toast.success(`✅ ${file.name} processed`, { id: loadingToast })
+      return { name, text: data.content }
+    } catch (err: any) {
+      toast.error(`❌ ${file.name} failed: ${err.message}`, {
+        id: loadingToast,
+      })
+      return { name, text: "" }
     }
-
-    const text = await file.text()
-    return { name, text }
   }
 
   const parseFiles = async (files: FileList | File[]) => {
     const validFiles = Array.from(files).filter((file) =>
       allowedTypes.includes(file.type)
     )
-    const parsed = await Promise.all(validFiles.map(extractText))
+    if (validFiles.length === 0) {
+      toast.error("No valid files selected")
+      return
+    }
+
+    setIsLoading(true)
+    const parsed = await Promise.all(validFiles.map(extractTextFromFile))
     setUploadedFiles([...uploadedFiles, ...parsed])
+    setIsLoading(false)
   }
 
   const handleInput = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -86,16 +93,16 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
   return (
     <div className="flex flex-col gap-2 w-full">
       {uploadedFiles.length > 0 && styledAs === "card" && (
-        <div className="w-full flex flex-row gap-2 flex-wrap justify-center items-center  ">
+        <div className="w-full flex flex-row gap-2 flex-wrap justify-center items-center">
           {uploadedFiles.map((file, idx) => (
             <div
               key={idx}
-              className="p-3 rounded-md bg-white shadow-sm text-sm text-gray-800 text-left "
+              className="p-3 rounded-md bg-white shadow-sm text-sm text-gray-800 text-left"
               title={file.name}
             >
               <strong>{file.name.slice(0, 20)}...</strong>
               <button
-                className="text-gray-600 mt-1 float-right  cursor-pointer"
+                className="text-gray-600 mt-1 float-right cursor-pointer"
                 onClick={() =>
                   setUploadedFiles(uploadedFiles.filter((_, i) => i !== idx))
                 }
@@ -106,6 +113,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
           ))}
         </div>
       )}
+
       {styledAs === "button" && (
         <div className="flex items-center justify-end gap-2 w-100">
           <button
@@ -113,30 +121,34 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
             className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
             onClick={() => inputRef.current?.click()}
           >
-            {SVGS.clip}
+            {isLoading ? (
+              <div className="loader w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+            ) : (
+              SVGS.clip
+            )}
           </button>
         </div>
       )}
 
       {styledAs === "card" && (
-        <>
-          <ContentCard
-            description={
-              isDragging
-                ? "Drop it here"
-                : "Upload a PDF or DOCX file or drag it here"
-            }
-            icon={isDragging ? SVGS.clip : SVGS.pdf}
-            onClick={() => inputRef.current?.click()}
-            onDragOver={(e) => {
-              e.preventDefault()
-              setIsDragging(true)
-            }}
-            onDragLeave={() => setIsDragging(false)}
-            onDrop={handleDrop}
-            className={isDragging ? "border-blue-600 bg-blue-50" : ""}
-          />
-        </>
+        <ContentCard
+          description={
+            isDragging
+              ? "Drop it here"
+              : isLoading
+              ? "Processing..."
+              : "Upload a PDF or DOCX file or drag it here"
+          }
+          icon={isDragging ? SVGS.clip : SVGS.pdf}
+          onClick={() => inputRef.current?.click()}
+          onDragOver={(e) => {
+            e.preventDefault()
+            setIsDragging(true)
+          }}
+          onDragLeave={() => setIsDragging(false)}
+          onDrop={handleDrop}
+          className={isDragging ? "border-blue-600 bg-blue-50" : ""}
+        />
       )}
 
       <input

package/src/creator/src/components/Login.tsx

@@ -4,61 +4,88 @@ import { SVGS } from "../assets/svgs"
 import toast from "react-hot-toast"
 import useStore from "../utils/store"
 import { useShallow } from "zustand/react/shallow"
-import { login4Geeks } from "../utils/lib"
+import { login4Geeks, registerUserWithFormData } from "../utils/lib"
 
 export default function Login({ onFinish }: { onFinish: () => void }) {
+  // Login states
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [showForm, setShowForm] = useState(false)
-  const planToRedirect = useStore((state) => state.planToRedirect)
-
+  // Signup states
+  const [showSignup, setShowSignup] = useState(false)
+  const [signupData, setSignupData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+  })
+  // const planToRedirect = useStore((state) => state.planToRedirect)
   const { setAuth } = useStore(
     useShallow((state) => ({ setAuth: state.setAuth }))
   )
 
-  const login = async (e: React.FormEvent) => {
+  // Login handler
+  const login = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setIsLoading(true)
     const tid = toast.loading("Logging in…")
-
     if (!email || !password) {
       setIsLoading(false)
       toast.error("Please fill all fields", { id: tid })
       return
     }
-
     const resp = await login4Geeks({ email, password })
     if (!resp) {
       setIsLoading(false)
       toast.error("Invalid credentials", { id: tid })
       return
     }
-
     toast.success("Logged in successfully", { id: tid })
     setAuth({
       bcToken: resp.token,
       userId: resp.user.id,
       rigoToken: resp.rigobot.key,
       user: resp.user,
+      publicToken: "",
     })
     setIsLoading(false)
     onFinish()
   }
 
+  // Signup handler
+  const handleSignup = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setIsLoading(true)
+    const tid = toast.loading("Creating account…")
+    const { firstName, lastName, email } = signupData
+    if (!firstName || !lastName || !email) {
+      setIsLoading(false)
+      toast.error("Please fill all fields", { id: tid })
+      return
+    }
+    try {
+      await registerUserWithFormData(firstName, lastName, email)
+      toast.success("Account created! Check your email.", { id: tid })
+      setShowSignup(false)
+      setShowForm(true)
+      setEmail(email)
+    } catch (err) {
+      toast.error("Registration failed. Try again.", { id: tid })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
   function stringToBase64(str: string) {
     return btoa(unescape(encodeURIComponent(str)))
   }
-
   function getCurrentUrlWithQueryParams() {
     return window.location.href
   }
-
   const redirectGithub = () => {
     const url = stringToBase64(getCurrentUrlWithQueryParams())
     window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${url}`
   }
-
   const redirectGoogle = () => {
     const url = stringToBase64(getCurrentUrlWithQueryParams())
     window.location.href = `${BREATHECODE_HOST}/v1/auth/google?url=${url}`
@@ -73,89 +100,152 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         className="bg-white p-8 rounded-xl shadow-md max-w-sm w-full"
         onClick={(e) => e.stopPropagation()}
       >
-        <p className="mb-4 text-center text-gray-700">
-          You need to have a 4Geeks account with a creator plan to create a
-          tutorial.
-        </p>
-        <button
-          onClick={redirectGithub}
-          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
-        >
-          {SVGS.github} LOGIN WITH GITHUB
-        </button>
-        <button
-          onClick={redirectGoogle}
-          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
-        >
-          {SVGS.google} LOGIN WITH GOOGLE
-        </button>
-
-        <div className="flex items-center mb-4">
-          <hr className="flex-grow border-gray-300" />
-          <span className="mx-2 text-gray-400 text-sm">or</span>
-          <hr className="flex-grow border-gray-300" />
-        </div>
-
-        {showForm ? (
-          <form className="space-y-3" onSubmit={login}>
-            <input
-              type="email"
-              placeholder="Email"
-              className="w-full border border-gray-300 px-3 py-2 rounded-md"
-              onChange={(e) => setEmail(e.target.value)}
-            />
-            <input
-              type="password"
-              placeholder="Password"
-              className="w-full border border-gray-300 px-3 py-2 rounded-md"
-              onChange={(e) => setPassword(e.target.value)}
-            />
-            <div className="flex gap-2 mt-4">
+        {showSignup ? (
+          <>
+            <h2 className="mb-4 text-xl font-semibold text-center">
+              Create your account
+            </h2>
+            <form className="space-y-3" onSubmit={handleSignup}>
+              <input
+                type="text"
+                placeholder="First name"
+                className="w-full border border-gray-300 px-3 py-2 rounded-md"
+                value={signupData.firstName}
+                onChange={(e) =>
+                  setSignupData({ ...signupData, firstName: e.target.value })
+                }
+              />
+              <input
+                type="text"
+                placeholder="Last name"
+                className="w-full border border-gray-300 px-3 py-2 rounded-md"
+                value={signupData.lastName}
+                onChange={(e) =>
+                  setSignupData({ ...signupData, lastName: e.target.value })
+                }
+              />
+              <input
+                type="email"
+                placeholder="Email"
+                className="w-full border border-gray-300 px-3 py-2 rounded-md"
+                value={signupData.email}
+                onChange={(e) =>
+                  setSignupData({ ...signupData, email: e.target.value })
+                }
+              />
               <button
                 type="submit"
-                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold cursor-pointer"
+                className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
+                disabled={isLoading}
               >
-                {isLoading ? "Logging in..." : "Log in"}
+                {isLoading ? "Creating..." : "Sign up"}
               </button>
+            </form>
+            <div className="mt-4 text-sm text-center">
+              Already have an account?{" "}
               <button
-                type="button"
-                onClick={() => setShowForm(false)}
-                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold cursor-pointer"
+                className="text-blue-600 font-medium"
+                onClick={() => {
+                  setShowSignup(false)
+                  setShowForm(true)
+                }}
               >
-                Skip
+                Log in here
               </button>
             </div>
-            <div className="text-sm text-gray-600 mt-2">
-              Forgot your password?{" "}
-              <a
-                href={`${BREATHECODE_HOST}/v1/auth/password/reset?url=${getCurrentUrlWithQueryParams()}`}
-                className="text-sky-600 font-medium"
+          </>
+        ) : (
+          <>
+            <p className="mb-4 text-center text-gray-700">
+              You need to have a 4Geeks account with a creator plan to create a
+              tutorial.
+            </p>
+            <button
+              onClick={redirectGithub}
+              className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
+            >
+              {SVGS.github} LOGIN WITH GITHUB
+            </button>
+            <button
+              onClick={redirectGoogle}
+              className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
+            >
+              {SVGS.google} LOGIN WITH GOOGLE
+            </button>
+            <div className="flex items-center mb-4">
+              <hr className="flex-grow border-gray-300" />
+              <span className="mx-2 text-gray-400 text-sm">or</span>
+              <hr className="flex-grow border-gray-300" />
+            </div>
+            {showForm ? (
+              <form className="space-y-3" onSubmit={login}>
+                <input
+                  type="email"
+                  placeholder="Email"
+                  className="w-full border border-gray-300 px-3 py-2 rounded-md"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+                <input
+                  type="password"
+                  placeholder="Password"
+                  className="w-full border border-gray-300 px-3 py-2 rounded-md"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+                <div className="flex gap-2 mt-4">
+                  <button
+                    type="submit"
+                    className="flex-1 bg-blue-500 text-white py-2 rounded-md font-semibold cursor-pointer"
+                  >
+                    {isLoading ? "Logging in..." : "Log in"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowForm(false)}
+                    className="flex-1 border border-blue-500 text-blue-600 py-2 rounded-md font-semibold cursor-pointer"
+                  >
+                    Skip
+                  </button>
+                </div>
+                <div className="text-sm text-gray-600 mt-2">
+                  Forgot your password?{" "}
+                  <a
+                    href={`${BREATHECODE_HOST}/v1/auth/password/reset?url=${getCurrentUrlWithQueryParams()}`}
+                    className="text-blue-600 font-medium"
+                  >
+                    Recover it here.
+                  </a>
+                </div>
+              </form>
+            ) : (
+              <button
+                onClick={() => setShowForm(true)}
+                className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
               >
-                Recover it here.
-              </a>
+                Login with Email
+              </button>
+            )}
+            <div className="flex justify-between items-center mt-4">
+              <div className="bg-blue-50 text-sm p-2 rounded text-left">
+                <p className="text-gray-700 m-0">You don't have an account?</p>
+                {/* <button
+                  className="text-blue-600 font-medium cursor-pointer"
+                  onClick={() => setShowSignup(true)}
+                >
+                  Register here.
+                </button> */}
+                <a
+                  href={`https://www.learnpack.co/register`}
+                  target="_blank"
+                  className="text-blue-600 font-medium"
+                >
+                  Register here.
+                </a>
+              </div>
             </div>
-          </form>
-        ) : (
-          <button
-            onClick={() => setShowForm(true)}
-            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
-          >
-            Login with Email
-          </button>
+          </>
         )}
-
-        <div className="flex justify-between items-center mt-4">
-          <div className="bg-blue-50 text-sm p-2 rounded text-left">
-            <p className="text-gray-700 m-0">You don't have an account?</p>
-            <a
-              href={`https://4geeks.com/checkout?plan=${planToRedirect}`}
-              target="_blank"
-              className="text-blue-600 font-medium"
-            >
-              Register here.
-            </a>
-          </div>
-        </div>
       </div>
     </div>
   )

package/src/creator/src/components/ResumeCourseModal.tsx

@@ -0,0 +1,38 @@
+interface ResumeCourseModalProps {
+  onContinue: () => void
+  onStartOver: () => void
+}
+
+export default function ResumeCourseModal({
+  onContinue,
+  onStartOver,
+}: ResumeCourseModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div className="bg-white shadow-xl rounded-lg p-8 max-w-md w-full animate-fade-in">
+        <h2 className="text-xl font-bold text-gray-800 mb-3 text-center">
+          You have an unfinished course
+        </h2>
+        <p className="text-gray-600 mb-6 text-center">
+          You didn't finish creating your previous course.
+          <br />
+          What would you like to do?
+        </p>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={onContinue}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md font-semibold transition cursor-pointer"
+          >
+            Continue previous course
+          </button>
+          <button
+            onClick={onStartOver}
+            className="w-full border border-blue-600 text-blue-700 py-2 rounded-md font-semibold hover:bg-blue-50 transition cursor-pointer"
+          >
+            Erase previous answers and start a new course
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -17,6 +17,7 @@ type Props = {
   formState: any
   setFormState: (formState: any) => void
   onFinish: () => void
+  hideLastButton?: boolean
 }
 
 const StepWizard: React.FC<Props> = ({
@@ -24,6 +25,7 @@ const StepWizard: React.FC<Props> = ({
   formState,
   setFormState,
   onFinish,
+  hideLastButton = false,
 }) => {
   const currentStep = formState.currentStep
   const index = steps.findIndex((step) => step.slug === currentStep)
@@ -48,8 +50,6 @@ 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">
@@ -99,14 +99,16 @@ const StepWizard: React.FC<Props> = ({
           >
             ⬅ Back
           </button>
-          <button
-            onClick={index === totalSteps - 1 ? onFinish : goNext}
-            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" : ""
-            }`}
-          >
-            {index === totalSteps - 1 ? "Finish 🚀" : "Next ➡"}
-          </button>
+          {!(hideLastButton && index === totalSteps - 1) && (
+            <button
+              onClick={index === totalSteps - 1 ? onFinish : goNext}
+              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" : ""
+              }`}
+            >
+              {index === totalSteps - 1 ? "Finish 🚀" : "Next ➡"}
+            </button>
+          )}
         </div>
       </div>
     </div>

package/src/creator/src/components/TurnstileChallenge.tsx

@@ -1,6 +1,6 @@
 // components/TurnstileChallenge.tsx
 import { useEffect, useRef, useState } from "react"
-import toast from "react-hot-toast"
+// import toast from "react-hot-toast"
 
 interface TurnstileChallengeProps {
   siteKey: string
@@ -34,8 +34,6 @@ const TurnstileChallenge = ({
       const id = window.turnstile.render(`#${containerId}`, {
         sitekey: siteKey,
         callback: (token: string) => {
-          console.log("token to send", token)
-
           onSuccess(token)
         },
         "error-callback": () => {
@@ -43,7 +41,7 @@ const TurnstileChallenge = ({
         },
         "refresh-callback": () => {
           console.log("refresh callback CALLEd")
-          toast.error("Refresh callback called")
+          // toast.error("Refresh callback called")
         },
       })
 
@@ -61,11 +59,8 @@ const TurnstileChallenge = ({
     return () => clearInterval(interval)
   }, [siteKey, autoStart, onSuccess, onError])
 
-
   return (
-
     <div className="">
-
       <div id={containerId} data-refresh-timeout="auto" />
       {!ready && <p className="">...</p>}
       {/* <button onClick={reset}>RESET</button> */}

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

@@ -126,6 +126,7 @@ export const GenerateButton = ({
                   bcToken: "",
                   userId: "",
                   user: null,
+                  publicToken: "",
                 })
                 openLogin()
               }}