@learnpack/learnpack 5.0.168 → 5.0.176

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()
               }}

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

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react"
 import { useShallow } from "zustand/react/shallow"
 import useStore from "../../utils/store"
-import { interactiveCreation } from "../../utils/rigo"
+import { publicInteractiveCreation } from "../../utils/rigo"
 import {
   parseLesson,
-  useConsumableCall,
+  // useConsumableCall,
   validateTokens,
   checkParams,
   loginWithToken,
@@ -28,6 +28,27 @@ import { RIGO_FLOAT_GIT } from "../../utils/constants"
 
 const SyllabusEditor: React.FC = () => {
   const navigate = useNavigate()
+
+  const {
+    history,
+    auth,
+    setAuth,
+    push,
+    uploadedFiles,
+    cleanHistory,
+    formState,
+  } = useStore(
+    useShallow((state) => ({
+      history: state.history,
+      auth: state.auth,
+      setAuth: state.setAuth,
+      push: state.push,
+      uploadedFiles: state.uploadedFiles,
+      cleanHistory: state.cleanHistory,
+      formState: state.formState,
+    }))
+  )
+
   const [messages, setMessages] = useState<TMessage[]>([
     {
       type: "assistant",
@@ -43,26 +64,35 @@ const SyllabusEditor: React.FC = () => {
   const [showLoginModal, setShowLoginModal] = useState(false)
   const [isThinking, setIsThinking] = useState(false)
 
-  const { history, auth, setAuth, push, uploadedFiles, cleanHistory } =
-    useStore(
-      useShallow((state) => ({
-        history: state.history,
-        auth: state.auth,
-        setAuth: state.setAuth,
-        push: state.push,
-        uploadedFiles: state.uploadedFiles,
-        cleanHistory: state.cleanHistory,
-      }))
-    )
-
   const syllabus = history[history.length - 1]
 
   useEffect(() => {
     if (!syllabus) {
       navigate("/creator", { replace: true })
+    } else {
     }
   }, [syllabus, navigate])
 
+  useEffect(() => {
+    console.log(formState.description, "DESCRIPTION")
+
+    if (formState.description) {
+      setMessages((prevMessages) => {
+        if (prevMessages.length === 0 || prevMessages[0].type !== "user") {
+          // Si no hay mensajes o el primero no es de usuario, lo agrego al inicio
+          return [
+            { type: "user", content: formState.description },
+            ...prevMessages,
+          ]
+        } else {
+          // Si el primero ya es de usuario, lo reemplazo y mantengo el resto
+          const [, ...rest] = prevMessages
+          return [{ type: "user", content: formState.description }, ...rest]
+        }
+      })
+    }
+  }, [formState.description])
+
   useEffect(() => {
     ;(async () => {
       const { token } = checkParams(["token"])
@@ -74,6 +104,7 @@ const SyllabusEditor: React.FC = () => {
             userId: user.id,
             rigoToken: user.rigobot.key,
             user,
+            publicToken: "",
           })
         }
       }
@@ -108,19 +139,22 @@ const SyllabusEditor: React.FC = () => {
       { type: "assistant", content: "" },
     ])
 
-    const res = await interactiveCreation({
-      courseInfo: `${JSON.stringify(syllabus.courseInfo)}
+    const res = await publicInteractiveCreation(
+      {
+        courseInfo: `${JSON.stringify(syllabus.courseInfo)}
       ${
         uploadedFiles.length > 0 &&
         "The user has uploaded files, take them in consideration while generating the course structure." +
           JSON.stringify(uploadedFiles)
       }
       `,
-      prevInteractions:
-        messages
-          .map((message) => `${message.type}: ${message.content}`)
-          .join("\n") + `\nUSER: ${prompt}`,
-    })
+        prevInteractions:
+          messages
+            .map((message) => `${message.type}: ${message.content}`)
+            .join("\n") + `\nUSER: ${prompt}`,
+      },
+      auth.publicToken
+    )
 
     const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
       parseLesson(step, syllabus.lessons)
@@ -166,14 +200,14 @@ const SyllabusEditor: React.FC = () => {
       setShowLoginModal(true)
       return
     }
-    const success = await useConsumableCall(
-      auth.bcToken,
-      "ai-course-generation"
-    )
-    if (!success) {
-      toast.error("You don't have enough credits to generate a course!")
-      return
-    }
+    // const success = await useConsumableCall(
+    //   auth.bcToken,
+    //   "ai-course-generation"
+    // )
+    // if (!success) {
+    //   toast.error("You don't have enough credits to generate a course!")
+    //   return
+    // }
     syllabus.sources = uploadedFiles
     console.log(syllabus)
 

package/src/creator/src/utils/constants.ts

@@ -1,4 +1,5 @@
-export const RIGOBOT_HOST = "https://rigobot.herokuapp.com"
+// export const RIGOBOT_HOST = "https://rigobot.herokuapp.com"
+export const RIGOBOT_HOST = "https://rigobot-test-cca7d841c9d8.herokuapp.com"
 export const BREATHECODE_HOST = "https://breathecode.herokuapp.com"
 
 export const RIGO_FLOAT_GIT =

package/src/creator/src/utils/lib.ts

@@ -364,3 +364,58 @@ export const reWriteTitle = async (title: string, token: string) => {
     return `${title} ${Math.random().toString(36).substring(2, 6)}`
   }
 }
+
+export async function registerUserWithFormData(
+  firstName: string,
+  lastName: string,
+  email: string
+): Promise<any> {
+  const formData = new FormData()
+  formData.append("1_first_name", firstName)
+  formData.append("1_last_name", lastName)
+  formData.append("1_email", email)
+
+  // Puedes modificar este objeto para agregar info real de tracking si la tienes.
+  const conversionArray = [
+    "$K1",
+    {
+      user_agent: navigator.userAgent,
+      landing_url: "www.learnpack.co/my-tutorials",
+      conversion_url: "app.learnpack.co/login",
+      translations: "$undefined",
+      utm_placement: "$undefined",
+      utm_referrer: "$undefined",
+      utm_medium: "$undefined",
+      utm_source: "$undefined",
+      utm_term: "$undefined",
+      utm_content: "$undefined",
+      utm_campaign: "$undefined",
+      internal_cta_placement: "$undefined",
+      internal_cta_content: "$undefined",
+      internal_cta_campaign: "$undefined",
+    },
+  ]
+
+  formData.append("0", JSON.stringify(conversionArray))
+
+  try {
+    const response = await axios.post(
+      "https://www.learnpack.co/register",
+      formData,
+      {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      }
+    )
+    return response.data
+  } catch (error: any) {
+    // Manejo de errores básico
+    console.error(error, "ERROR REGISTERING IN LEARNPACK")
+    return {
+      success: false,
+      message: error?.response?.data?.detail || "Registration error",
+      data: error?.response?.data || null,
+    }
+  }
+}