ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: student course payment 4010 error

Browse Source
This commit is contained in:
Rotimi Best
2024-03-06 22:36:49 +01:00
parent ea6c0d3c8a
commit 03e47d9aee
3 changed files with 88 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/CourseLandingPage/index.svelte
+60 -56
View File
@@ -96,22 +96,26 @@
totalRatings = reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0); totalRatings = reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0);
averageRating = totalRatings / reviews?.length; averageRating = totalRatings / reviews?.length;
} }
$: {
let imgurl = get(instructor, 'imgUrl', $currentOrg.avatar_url);
console.log({ imgurl, instructor, org: $currentOrg });
}
</script> </script>
<div class="w-full bg-white dark:bg-black flex flex-col items-center"> <div class="flex w-full flex-col items-center bg-white dark:bg-black">
<!-- Header Section --> <!-- Header Section -->
<header id="header" class="banner w-full flex items-center justify-center p-"> <header id="header" class="banner p- flex w-full items-center justify-center">
<div class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row"> <div class="flex w-full flex-col-reverse items-center justify-between md:w-5/6 md:flex-row">
<!-- Course Description --> <!-- Course Description -->
<div class="md:w-2/5 w-11/12 py-10"> <div class="w-11/12 py-10 md:w-2/5">
<h1 class="dark:text-white text-5xl text-white my-4 font-bold"> <h1 class="my-4 text-5xl font-bold text-white dark:text-white">
{get(courseData, 'title', '')} {get(courseData, 'title', '')}
</h1> </h1>
<p class="dark:text-white text-md text-white mb-6"> <p class="text-md mb-6 text-white dark:text-white">
{get(courseData, 'description', '')} {get(courseData, 'description', '')}
</p> </p>
<p class="dark:text-white author my-3 text-sm"> <p class="author my-3 text-sm dark:text-white">
{get(courseData, 'metadata.instructor.name', '')} {get(courseData, 'metadata.instructor.name', '')}
</p> </p>
<PrimaryButton <PrimaryButton
@@ -130,7 +134,7 @@
<!-- Banner Image getEmbedId(videoUrl) --> <!-- Banner Image getEmbedId(videoUrl) -->
{#if video} {#if video}
<div class="banner-image md:w-2/3 w-full flex"> <div class="banner-image flex w-full md:w-2/3">
<div <div
bind:this={player} bind:this={player}
id="player" id="player"
@@ -148,12 +152,12 @@
/> />
</div> --> </div> -->
{:else} {:else}
<div class="banner-image md:w-2/3 relative rounded-md overflow-hidden"> <div class="banner-image relative overflow-hidden rounded-md md:w-2/3">
<img <img
style="min-width:280px; min-height:200px" style="min-width:280px; min-height:200px"
alt="About us" alt="About us"
src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'} src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
class="mt-2 md:mt-0 rounded-md w-full h-full max-w-[500px] max-h-[400px] relative" class="relative mt-2 h-full max-h-[400px] w-full max-w-[500px] rounded-md md:mt-0"
/> />
</div> </div>
@@ -180,23 +184,23 @@
</div> </div>
</header> </header>
<!-- Body --> <!-- Body -->
<div class="bg-white dark:bg-black w-full"> <div class="w-full bg-white dark:bg-black">
<div <div
class="lg:py-8 lg:w-11/12 w-full mx-0 my-2 lg:m-auto flex flex-col-reverse lg:flex-row items-center lg:items-start justify-between max-w-[1200px]" class="mx-0 my-2 flex w-full max-w-[1200px] flex-col-reverse items-center justify-between lg:m-auto lg:w-11/12 lg:flex-row lg:items-start lg:py-8"
> >
<!-- Course Details --> <!-- Course Details -->
<div class="course-content w-full p-3 lg:w-10/12 lg:mr-10"> <div class="course-content w-full p-3 lg:mr-10 lg:w-10/12">
<!-- Navigation --> <!-- Navigation -->
<nav <nav
class="flex items-center border-b border-gray-300 py-3 sticky top-0 {!editMode && class="sticky top-0 flex items-center border-b border-gray-300 py-3 {!editMode &&
'lg:top-11'} bg-white dark:bg-neutral-800" 'lg:top-11'} bg-white dark:bg-neutral-800"
> >
{#each NAV_ITEMS as navItem} {#each NAV_ITEMS as navItem}
<a <a
href="{$page.url.pathname}{navItem.key}" href="{$page.url.pathname}{navItem.key}"
class="{navItem.key === activeNav && class="{navItem.key === activeNav &&
'active text-primary-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-gray-200 dark:hover:text-slate-900 dark:text-white z-0" 'active text-primary-700'} z-0 mr-6 rounded-lg px-2 font-normal text-slate-700 hover:bg-gray-200 dark:text-white dark:hover:text-slate-900"
> >
{navItem.label} {navItem.label}
</a> </a>
@@ -204,16 +208,16 @@
</nav> </nav>
<!-- Sections - Requirement --> <!-- Sections - Requirement -->
<section id="requirement" class="border-b border-gray-300 mt-8 pb-10"> <section id="requirement" class="mt-8 border-b border-gray-300 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">Requirement</h3> <h3 class="mb-3 mt-0 text-2xl font-bold">Requirement</h3>
<ul class="list font-light"> <ul class="list font-light">
<HtmlRender content={get(courseData, 'metadata.requirements', '')} /> <HtmlRender content={get(courseData, 'metadata.requirements', '')} />
</ul> </ul>
</section> </section>
<!-- Sections - Course Description --> <!-- Sections - Course Description -->
<section id="description" class="border-b border-gray-300 mt-8 pb-10"> <section id="description" class="mt-8 border-b border-gray-300 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3> <h3 class="mb-3 mt-0 text-2xl font-bold">Course Description</h3>
<HtmlRender <HtmlRender
className="dark:text-white text-sm font-light" className="dark:text-white text-sm font-light"
content={get(courseData, 'metadata.description', '')} content={get(courseData, 'metadata.description', '')}
@@ -222,16 +226,16 @@
<!-- Sections - Goal --> <!-- Sections - Goal -->
<section id="goals" class="mt-8 pb-10"> <section id="goals" class="mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">What you'll learn</h3> <h3 class="mb-3 mt-0 text-2xl font-bold">What you'll learn</h3>
<ul class="list font-light"> <ul class="list font-light">
<HtmlRender content={get(courseData, 'metadata.goals', '')} /> <HtmlRender content={get(courseData, 'metadata.goals', '')} />
</ul> </ul>
</section> </section>
<!-- Sections - Certificate --> <!-- Sections - Certificate -->
<section class="border-b border-gray-300 mt-8 pb-10"> <section class="mt-8 border-b border-gray-300 pb-10">
<h3 class="text-2xl font-bold mt-0">Certificate</h3> <h3 class="mt-0 text-2xl font-bold">Certificate</h3>
<p class="dark:text-white text-sm font-light mb-3"> <p class="mb-3 text-sm font-light dark:text-white">
When you complete all of the courses in the program, you'll earn a Certificate to share When you complete all of the courses in the program, you'll earn a Certificate to share
with your professional network. with your professional network.
</p> </p>
@@ -239,22 +243,22 @@
</section> </section>
<!-- Sections - Lessons --> <!-- Sections - Lessons -->
<section id="lessons" class="border-b border-gray-300 mt-8 pb-10"> <section id="lessons" class="mt-8 border-b border-gray-300 pb-10">
<div class="flex items-center justify-between w-full mb-3"> <div class="mb-3 flex w-full items-center justify-between">
<h3 class="text-2xl font-bold mt-0 mb-3">Course Content</h3> <h3 class="mb-3 mt-0 text-2xl font-bold">Course Content</h3>
<p class="dark:text-white text-sm font-light"> <p class="text-sm font-light dark:text-white">
<!-- {lessons.length} lessons --> <!-- {lessons.length} lessons -->
{pluralize('lesson', lessons.length, true)} {pluralize('lesson', lessons.length, true)}
</p> </p>
</div> </div>
{#each lessons as lesson, index} {#each lessons as lesson, index}
<div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row"> <div class="mb-6 flex w-full flex-col justify-between md:flex-row md:items-center">
<div class="flex items-center mb-3"> <div class="mb-3 flex items-center">
<Chip <Chip
value={getLectureNo(index + 1, '0')} value={getLectureNo(index + 1, '0')}
className="bg-primary-100 text-primary-700" className="bg-primary-100 text-primary-700"
/> />
<p class="dark:text-white ml-2 text-sm font-light"> <p class="ml-2 text-sm font-light dark:text-white">
{lesson.title} {lesson.title}
</p> </p>
</div> </div>
@@ -262,19 +266,19 @@
<div class="w-2/4"> <div class="w-2/4">
<div class="flex items-center"> <div class="flex items-center">
{#if lesson.slide_url} {#if lesson.slide_url}
<span class="text-sm font-light flex w-2/4" <span class="flex w-2/4 text-sm font-light"
><PresentationFile size={16} class="mr-1" />1 slide</span ><PresentationFile size={16} class="mr-1" />1 slide</span
> >
{/if} {/if}
{#if lesson.note} {#if lesson.note}
<span class="text-sm font-light flex w-2/4" <span class="flex w-2/4 text-sm font-light"
><Notebook size={16} class="mr-1" />note</span ><Notebook size={16} class="mr-1" />note</span
> >
{/if} {/if}
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
{#if lesson.videos} {#if lesson.videos}
<span class="text-sm font-light flex w-2/4" <span class="flex w-2/4 text-sm font-light"
><Video size={16} class="mr-1" />{lesson.videos.length} video{lesson.videos ><Video size={16} class="mr-1" />{lesson.videos.length} video{lesson.videos
.length > 1 .length > 1
? 's' ? 's'
@@ -282,7 +286,7 @@
</span> </span>
{/if} {/if}
{#if get(lesson, 'totalExercises[0].count')} {#if get(lesson, 'totalExercises[0].count')}
<span class="text-sm font-light flex w-2/4" <span class="flex w-2/4 text-sm font-light"
><PageNumber size={16} class="mr-1" />{pluralize( ><PageNumber size={16} class="mr-1" />{pluralize(
'exercise', 'exercise',
get(lesson, 'totalExercises[0].count', 0), get(lesson, 'totalExercises[0].count', 0),
@@ -299,43 +303,43 @@
<!-- Sections - Reviews --> <!-- Sections - Reviews -->
{#if reviews && reviews.length > 0} {#if reviews && reviews.length > 0}
<section id="reviews"> <section id="reviews">
<h2 class="my-16 mr-0 mb-6 ml-0 font-semibold">Reviews</h2> <h2 class="my-16 mb-6 ml-0 mr-0 font-semibold">Reviews</h2>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
{#each reviews.slice(0, 4) as review, id} {#each reviews.slice(0, 4) as review, id}
{#if !review.hide} {#if !review.hide}
<!-- review --> <!-- review -->
<div class="flex flex-row item-start w-2/4 my-2"> <div class="item-start my-2 flex w-2/4 flex-row">
<!-- image container --> <!-- image container -->
{#if review.avatar_url} {#if review.avatar_url}
<Avatar src={review.avatar_url} name="Avatar" className="mt-1" /> <Avatar src={review.avatar_url} name="Avatar" className="mt-1" />
{/if} {/if}
<!-- profile content --> <!-- profile content -->
<div class="pl-2.5 w-11/12"> <div class="w-11/12 pl-2.5">
<p class="mb-0.5 font-medium">{review.name}</p> <p class="mb-0.5 font-medium">{review.name}</p>
<!-- ratings --> <!-- ratings -->
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
{#if review.rating} {#if review.rating}
<img src={ratingsImg[review.rating - 1]} class="w-24 mr-4 mt-1" alt="" /> <img src={ratingsImg[review.rating - 1]} class="mr-4 mt-1 w-24" alt="" />
{/if} {/if}
</div> </div>
<div <div
class="read-more-content mb-2" class="read-more-content mb-2"
style="max-height: {expandDescription[id] ? 'none' : '50px'}" style="max-height: {expandDescription[id] ? 'none' : '50px'}"
> >
<p class="text-sm my-2 leading-5 text-gray-600"> <p class="my-2 text-sm leading-5 text-gray-600">
{review.description} {review.description}
</p> </p>
</div> </div>
{#if !expandDescription[id] && review.description.split(' ').length > 9} {#if !expandDescription[id] && review.description.split(' ').length > 9}
<button <button
class="underline text-primary-700 mt-2 font-normal" class="text-primary-700 mt-2 font-normal underline"
on:click={() => toggleDescription(id)}>See More</button on:click={() => toggleDescription(id)}>See More</button
> >
{/if} {/if}
{#if expandDescription[id]} {#if expandDescription[id]}
<button <button
class="underline text-primary-700 mt-2 font-normal" class="text-primary-700 mt-2 font-normal underline"
on:click={() => toggleDescription(id)}>See Less</button on:click={() => toggleDescription(id)}>See Less</button
> >
{/if} {/if}
@@ -366,22 +370,22 @@
<h2 class="text-xl font-bold"> <h2 class="text-xl font-bold">
{averageRating} Rating {averageRating} Rating
</h2> </h2>
<h2 class="text-lg font-semibold mt-2"> <h2 class="mt-2 text-lg font-semibold">
{reviews.length} Ratings {reviews.length} Ratings
</h2> </h2>
</div> </div>
<!-- reviews --> <!-- reviews -->
<div class="flex flex-wrap w-4/6"> <div class="flex w-4/6 flex-wrap">
{#each reviews as review, id} {#each reviews as review, id}
<!-- review --> <!-- review -->
<div class="flex flex-row item-start w-full my-2"> <div class="item-start my-2 flex w-full flex-row">
<!-- image container --> <!-- image container -->
{#if review.avatar_url} {#if review.avatar_url}
<Avatar src={review.avatar_url} name={review.name} className="mt-1" /> <Avatar src={review.avatar_url} name={review.name} className="mt-1" />
{/if} {/if}
<!-- profile content --> <!-- profile content -->
<div class="pl-2.5 w-11/12"> <div class="w-11/12 pl-2.5">
<p class="mb-0.5 font-medium">{review.name}</p> <p class="mb-0.5 font-medium">{review.name}</p>
<!-- ratings --> <!-- ratings -->
<div class="flex flex-row"> <div class="flex flex-row">
@@ -394,7 +398,7 @@
class="read-more-content mb-2" class="read-more-content mb-2"
style="max-height: {expandDescription[id] ? 'none' : '50px'}" style="max-height: {expandDescription[id] ? 'none' : '50px'}"
> >
<p class="text-sm my-2 leading-5 text-gray-600"> <p class="my-2 text-sm leading-5 text-gray-600">
{review.description} {review.description}
</p> </p>
</div> </div>
@@ -409,28 +413,28 @@
<!-- Sections - Instructor --> <!-- Sections - Instructor -->
<section id="instructor" class="mt-8 pb-10"> <section id="instructor" class="mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">Instructor</h3> <h3 class="mb-3 mt-0 text-2xl font-bold">Instructor</h3>
<div class="flex items-center mb-4"> <div class="mb-4 flex items-center">
<img <img
alt="Author Avatar" alt="Author Avatar"
class="block rounded-full h-20 w-20 mr-3" class="mr-3 block h-20 w-20 rounded-full"
src={get(instructor, 'imgUrl', $currentOrg.avatar_url)} src={get(instructor, 'imgUrl', $currentOrg.avatar_url || '/logo-512.png')}
/> />
<div> <div>
<p class="dark:text-white text-md font-light"> <p class="text-md font-light dark:text-white">
{get(instructor, 'name', '')} {get(instructor, 'name', $currentOrg.name)}
</p> </p>
<p class="dark:text-white text-xs font-light"> <p class="text-xs font-light dark:text-white">
{get(instructor, 'role', '')} {get(instructor, 'role', '')}
</p> </p>
<p class="dark:text-white text-md font-light flex items-center"> <p class="text-md flex items-center font-light dark:text-white">
<PlayFilled size={16} class="text-primary-700" /> <PlayFilled size={16} class="text-primary-700" />
<span class="ml-1">{get(instructor, 'courseNo', '')} courses</span> <span class="ml-1">{get(instructor, 'courseNo', 10)} courses</span>
</p> </p>
</div> </div>
</div> </div>
<p class="dark:text-white text-sm font-light"> <p class="text-sm font-light dark:text-white">
{get(instructor, 'description', '')} {get(instructor, 'description', '')}
</p> </p>
</section> </section>
apps/dashboard/src/routes/api/email/course/student_prove_payment/+server.js
+15 -15
View File
@@ -1,12 +1,12 @@
import { json } from '@sveltejs/kit'; import { json } from '@sveltejs/kit';
import { getSupabase } from '$lib/utils/functions/supabase'; // import { getSupabase } from '$lib/utils/functions/supabase';
import sendEmail from '$defer/sendEmail'; import sendEmail from '$defer/sendEmail';
const supabase = getSupabase(); // const supabase = getSupabase();
export async function POST({ request }) { export async function POST({ request }) {
const { to, courseName, teacherEmail, studentFullname, orgName } = await request.json(); const { to, courseName, teacherEmail, studentFullname, orgName } = await request.json();
const accessToken = request.headers.get('Authorization') || ''; // const accessToken = request.headers.get('Authorization') || '';
console.log( console.log(
'/POST api/email/course/student_prove_payment', '/POST api/email/course/student_prove_payment',
to, to,
@@ -20,17 +20,17 @@ export async function POST({ request }) {
return json({ success: false, message: 'Missing required fields' }, { status: 400 }); return json({ success: false, message: 'Missing required fields' }, { status: 400 });
} }
let user; // let user;
try { // try {
const { data } = await supabase.auth.getUser(accessToken); // const { data } = await supabase.auth.getUser(accessToken);
user = data.user; // user = data.user;
} catch (error) { // } catch (error) {
console.error(error); // console.error(error);
} // }
if (!user) { // if (!user) {
return json({ success: false, message: 'Unauthenticated user' }, { status: 401 }); // return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
} // }
await sendEmail({ await sendEmail({
from: `"${orgName} - ClassroomIO" <[email protected]>`, from: `"${orgName} - ClassroomIO" <[email protected]>`,
@@ -39,8 +39,8 @@ export async function POST({ request }) {
subject: `[${courseName}] One more step left`, subject: `[${courseName}] One more step left`,
content: ` content: `
<p>Hi ${studentFullname},</p> <p>Hi ${studentFullname},</p>
<p>You are one step closer to joining: ${courseName}</p> <p>You are one step closer to joining: <strong>${courseName}</strong></p>
<p>Please send your proof of payment to: ${teacherEmail}, in order to join the course.</p> <p>Please send your proof of payment to: <strong>${teacherEmail}</strong>, in order to join the course.</p>
<p>Talk to you soon and see you in class.</p> <p>Talk to you soon and see you in class.</p>
<p>${orgName}</p> <p>${orgName}</p>
` `
apps/dashboard/src/routes/api/email/course/teacher_student_buycourse/+server.js
+13 -13
View File
@@ -1,12 +1,12 @@
import { json } from '@sveltejs/kit'; import { json } from '@sveltejs/kit';
import { getSupabase } from '$lib/utils/functions/supabase'; // import { getSupabase } from '$lib/utils/functions/supabase';
import sendEmail from '$defer/sendEmail'; import sendEmail from '$defer/sendEmail';
const supabase = getSupabase(); // const supabase = getSupabase();
export async function POST({ request }) { export async function POST({ request }) {
const { to, courseName, studentEmail, studentFullname } = await request.json(); const { to, courseName, studentEmail, studentFullname } = await request.json();
const accessToken = request.headers.get('Authorization') || ''; // const accessToken = request.headers.get('Authorization') || '';
console.log( console.log(
'/POST api/email/course/teacher_student_buycourse', '/POST api/email/course/teacher_student_buycourse',
to, to,
@@ -19,17 +19,17 @@ export async function POST({ request }) {
return json({ success: false, message: 'Missing required fields' }, { status: 400 }); return json({ success: false, message: 'Missing required fields' }, { status: 400 });
} }
let user; // let user;
try { // try {
const { data } = await supabase.auth.getUser(accessToken); // const { data } = await supabase.auth.getUser(accessToken);
user = data.user; // user = data.user;
} catch (error) { // } catch (error) {
console.error(error); // console.error(error);
} // }
if (!user) { // if (!user) {
return json({ success: false, message: 'Unauthenticated user' }, { status: 401 }); // return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
} // }
await sendEmail({ await sendEmail({
from: `ClassroomIO" <[email protected]>`, from: `ClassroomIO" <[email protected]>`,