Feat/social share modal

apps/academy/src/components/mdx/QuizCompletedModals.tsx

@@ -1,5 +1,6 @@
-import Image from "next/image";
-import React, { useState } from "react";
+// import Image from "next/image";
+import NextLink from "next/link";
+import React, { useEffect, useState } from "react";
 import {
   ButtonRaw,
   Dialog,
@@ -12,18 +13,44 @@ import {
   DialogTrigger,
 } from "ui";
 
+import { createTwitterIntentLink } from "@/utils/create-twitter-intent-link";
+
 export interface QuizProps {
   nextLessonURLPath: string;
   nextLessonTitle: string;
   actualLessonTitle: string;
+  quizCompleted: boolean;
+  successMessage?: { message: string }[];
+  successTitle?: string;
+  currentLessonPath: string;
+  actionButton?: { href: string; text: string } | null;
 }
 
 export type Answers = Record<string, number[]>;
 
-const QuizCompletedModals = (_props: QuizProps): JSX.Element => {
+const QuizCompletedModals = ({
+  nextLessonURLPath,
+  actualLessonTitle,
+  quizCompleted,
+  successMessage = [
+    {
+      message:
+        "You answered all the quiz questions correctly, great job. Celebrate your learning on Twitter and advance to the next lesson below.",
+    },
+  ],
+  successTitle = "Lesson complete",
+  currentLessonPath,
+  actionButton,
+}: QuizProps): JSX.Element => {
   const [showDialog, setShowDialog] = useState(false);
   // const [showKeepGoingModal, setShowKeepGoingModal] = useState(false);
 
+  useEffect(() => {
+    if (quizCompleted) {
+      setShowDialog(true);
+    }
+  }, [quizCompleted]);
+
   const handleLessonDoneClick = () => {
     // setShowKeepGoingModal(true);
     setShowDialog(false);
@@ -33,6 +60,8 @@ const QuizCompletedModals = (_props: QuizProps): JSX.Element => {
     setShowDialog(false);
   };
 
+  console.log(actionButton);
+
   return (
     <>
       <div className="w-full text-center">
@@ -58,13 +87,8 @@ const QuizCompletedModals = (_props: QuizProps): JSX.Element => {
               <div className="w-full text-center">
                 {/*   {!showKeepGoingModal ? ( */}
                 <span className="font-clash-display w-full text-center text-2xl font-bold leading-8 text-white">
-                  Quiz complete!
-                </span>
-                {/*   ) : ( 
-                <span className="font-clash-display w-full text-center text-2xl font-bold leading-8 text-white">
-                  Nice!
+                  {actualLessonTitle}
                 </span>
-              )} */}
               </div>
             </DialogTitle>
           </DialogHeader>
@@ -77,50 +101,51 @@ const QuizCompletedModals = (_props: QuizProps): JSX.Element => {
                   className={`font-clash-display w-full cursor-pointer rounded-3xl p-3 text-center font-bold text-[#F9F9F9]`}
                 >
                   <h1 className="font-clash-display mb-11 text-3xl lg:text-[26px]">
-                    You&apos;re doing great!
+                    {successTitle}
                   </h1>
-                  <Image
-                    src={"/happy_face.png"}
-                    alt="happy_face_icon"
-                    width={100}
-                    height={100}
-                    className="mx-auto mb-16"
-                  />
-                  <p className="mb-20 text-base font-normal leading-5 text-[#FFFFFF] lg:mb-10 lg:text-2xl">
-                    You&apos;ve completed the quiz for this section.
-                  </p>
-                  <ButtonRaw
-                    className="font-future h-14 w-36 bg-[#721F79] lg:h-[4.125rem] lg:w-80 lg:min-w-[21rem] lg:text-base"
-                    onClick={handleLessonDoneClick}
-                  >
-                    Done!
-                  </ButtonRaw>
-                </div>
-              </div>
-              {/*   ) : ( 
-              <div className="h-64 w-fit lg:mt-11 lg:h-96 lg:w-full">
-                <div
-                  className={`font-clash-display w-full cursor-pointer rounded-3xl p-3 text-center font-bold text-[#F9F9F9]`}
-                >
-                  <h1 className="font-clash-display mb-11 text-3xl lg:text-[26px]">Keep going!</h1>
-                  <Image
-                    src={"/happy_face.png"}
-                    alt="happy_face_icon"
-                    width={100}
-                    height={100}
-                    className="mx-auto mb-16"
-                  />
-                  <p className="mb-20 text-base font-normal leading-5 text-[#FFFFFF] lg:mb-10 lg:text-2xl">
-                    {`You've just completed ${props.actualLessonTitle}!`}
-                  </p>
-                  <NextLink href={props.nextLessonURLPath}>
-                    <ButtonRaw className="font-future h-fit w-fit bg-[#44AF96] lg:h-[4.125rem] lg:w-80 lg:min-w-[21rem] lg:text-base">
-                      {`NEXT: ${props.nextLessonTitle}`}
-                    </ButtonRaw>
-                  </NextLink>
+                  {successMessage.map((message, index) => {
+                    return (
+                      <p
+                        className="mb-20 text-base font-normal leading-5 text-[#FFFFFF] lg:mb-6 lg:text-2xl"
+                        key={index}
+                      >
+                        {message.message}
+                      </p>
+                    );
+                  })}
+                  <div className="flex flex-col gap-y-6">
+                    <NextLink
+                      href={createTwitterIntentLink(
+                        `I completed ${actualLessonTitle} on @devdao_academy.
+                          https://academy.developerdao.com${currentLessonPath}`,
+                      )}
+                      target="_blank"
+                    >
+                      <ButtonRaw className="font-future h-8 w-24 bg-[#721F79] lg:h-14 lg:w-80 lg:min-w-[21rem] lg:text-base">
+                        Share on twitter
+                      </ButtonRaw>
+                    </NextLink>
+                    {actionButton ? (
+                      <NextLink href={actionButton.href} target="_blank">
+                        <ButtonRaw className="font-future h-8 w-24 bg-[#721F79] lg:h-14 lg:w-80 lg:min-w-[21rem] lg:text-base">
+                          {actionButton.text}
+                        </ButtonRaw>
+                      </NextLink>
+                    ) : null}
+                    {nextLessonURLPath ? (
+                      <NextLink href={nextLessonURLPath}>
+                        <ButtonRaw
+                          // variant="outline"
+                          className="font-future h-14 w-36 hover:bg-[#721F79] lg:h-14 lg:w-80 lg:min-w-[21rem] lg:text-base"
+                          onClick={handleLessonDoneClick}
+                        >
+                          Next Lesson
+                        </ButtonRaw>
+                      </NextLink>
+                    ) : null}
+                  </div>
                 </div>
               </div>
-              {/*  )} */}
             </div>
           </DialogDescription>
 

apps/academy/src/components/mdx/QuizStatusChecker.tsx

@@ -7,17 +7,26 @@ import { useAppContext } from "@/contexts/AppContext";
 
 import Quiz from "./Quiz";
 
-export interface QuizStatusCheckerTye {
+export interface QuizStatusCheckerType {
   quiz: string;
+  successMessage: { message: string }[];
+  successTitle: string;
+  actionButton: any;
 }
 
-const QuizStatusChecker = ({ quiz }: QuizStatusCheckerTye) => {
+const QuizStatusChecker = ({
+  quiz,
+  successMessage,
+  successTitle,
+  actionButton,
+}: QuizStatusCheckerType) => {
   const [quizCompleted, setQuizCompleted] = useState<boolean>(false);
   const { address, isDisconnected } = useAccount();
   const { completedQuizzesIds, allLessonsData } = useAppContext();
   const [nextLessonURLPath, setNextLessonURLPath] = useState("");
   const [nextLessonTitle, setNextLessonTitle] = useState("");
   const [actualLessonTitle, setActualLessonTitle] = useState("");
+  const [currentLessonPath, setCurrentLessonPath] = useState("");
 
   // Requests
   useMemo(() => {
@@ -49,6 +58,11 @@ const QuizStatusChecker = ({ quiz }: QuizStatusCheckerTye) => {
         (lesson) => lesson.quizFileName === quiz,
       )!.lessonTitle;
       setActualLessonTitle(newActualLessonTitle);
+
+      const newCurrentLessonPath: string = allLessonsData.find(
+        (lesson) => lesson.quizFileName === quiz,
+      )!.lessonPath;
+      setCurrentLessonPath(newCurrentLessonPath);
     }
   }, [quizCompleted]);
 
@@ -64,9 +78,14 @@ const QuizStatusChecker = ({ quiz }: QuizStatusCheckerTye) => {
   ) : quizCompleted ? (
     <>
       <QuizCompletedModals
+        actionButton={actionButton}
+        successMessage={successMessage}
+        successTitle={successTitle}
+        quizCompleted={quizCompleted}
         nextLessonURLPath={nextLessonURLPath}
         nextLessonTitle={nextLessonTitle}
         actualLessonTitle={actualLessonTitle}
+        currentLessonPath={currentLessonPath}
       />
       {/* <Badge className="m-auto flex w-fit justify-center bg-green-600">
         <span className="text-2xl">Quiz Completed</span>
@@ -81,12 +100,19 @@ const QuizStatusChecker = ({ quiz }: QuizStatusCheckerTye) => {
       ) : null} */}
     </>
   ) : (
-    <Quiz
-      quiz={quiz}
-      nextLessonURLPath={nextLessonURLPath}
-      nextLessonTitle={nextLessonTitle}
-      actualLessonTitle={actualLessonTitle}
-    />
+    <div className="w-full content-center items-center justify-center text-center">
+      <span className="font-future text-3xl font-bold text-[#721F79] underline">
+        Take the quiz to advance to the next lesson
+      </span>
+      <br />
+      <br />
+      <Quiz
+        quiz={quiz}
+        nextLessonURLPath={nextLessonURLPath}
+        nextLessonTitle={nextLessonTitle}
+        actualLessonTitle={actualLessonTitle}
+      />
+    </div>
   );
 };
 

apps/academy/src/utils/create-twitter-intent-link.ts

@@ -0,0 +1,5 @@
+export const createTwitterIntentLink = (tweetContent: string): string => {
+  const baseUrl = "https://twitter.com/intent/tweet";
+  const encodedContent = encodeURIComponent(tweetContent);
+  return `${baseUrl}?text=${encodedContent}`;
+};

packages/database/data/allLessonsData.ts

@@ -304,6 +304,8 @@ export const allLessonsData = [
     stagingVisible: true,
     visible: true,
     nextLessonPath: "",
+    twitterShareUrl:
+      "https://twitter.com/intent/tweet?text=I've%20just%20completed%20%22Background%20on%20Arweave%22%20with%20%40devdao_academy%20%26%20%40ar_io_network%0A%0Ahttps%3A//academy.developerdao.com/tracks/arweave-101/1",
   },
   {
     id: "clrzkw63400071wtumt4iobu6",

packages/database/package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "name": "database",
   "version": "0.1.0",
   "main": "./index.ts",

packages/database/prisma/schema.prisma

@@ -72,6 +72,7 @@ model Lessons {
   stagingVisible Boolean @default(true)
   visible Boolean @default(true)
   nextLessonPath String?
+  // twitterShareUrl String?
 }
 
   model Tags {