feat: 🚀 😃 convert repo into a monorepo 🚀 😃 (#51)
* Merge main into turbo-monrepo * feat: rename apps * feat: remove supbase videos and serve all from project * feat: move supabase to root * feat: update README * docs: update link
This commit is contained in:
Rotimi Best
+42
@@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import ChevronLeftIcon from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
|
||||
import ChevronRightIcon from 'carbon-icons-svelte/lib/ChevronRight.svelte';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
|
||||
export let show = true;
|
||||
</script>
|
||||
|
||||
<section class="root z-10">
|
||||
{#if show}
|
||||
<div class="relative h-full bg-white dark:bg-black">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
background-color: rgb(250, 251, 252);
|
||||
}
|
||||
|
||||
.toggler {
|
||||
right: -15px;
|
||||
z-index: 10;
|
||||
border: 1px solid var(--border-color);
|
||||
top: 50px;
|
||||
height: fit-content;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
}
|
||||
</style>
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import TextEditor from '$lib/components/TextEditor/index.svelte';
|
||||
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
<div class="h-2/5">
|
||||
<TextEditor bind:value />
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import TextEditor from '$lib/components/TextEditor/index.svelte';
|
||||
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
<div class="h-2/5">
|
||||
<TextEditor bind:value />
|
||||
</div>
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { handleOpenWidget } from '../../store';
|
||||
|
||||
export let course = {};
|
||||
|
||||
function widgetControl() {
|
||||
$handleOpenWidget.open = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<TextField className="mt-5" labelClassName="font-bold" label="Title" bind:value={course.title} />
|
||||
|
||||
<TextArea
|
||||
label="Description"
|
||||
bind:value={course.description}
|
||||
rows="6"
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Short Video"
|
||||
placeholder="www.youtube.com/watch?v=uYRq60G5XTk"
|
||||
helperMessage="Enter a link to a youtube video"
|
||||
type="text"
|
||||
bind:value={course.metadata.videoUrl}
|
||||
/>
|
||||
<div class="mt-7">
|
||||
<p class="font-bold mb-3">Replace cover image</p>
|
||||
<PrimaryButton label="Replace" variant={VARIANTS.OUTLINED} onClick={widgetControl} />
|
||||
</div>
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
<script>
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import set from 'lodash/set';
|
||||
import get from 'lodash/get';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import UploadImage from '$lib/components/UploadImage/index.svelte';
|
||||
import { uploadAvatar } from '$lib/utils/services/courses';
|
||||
|
||||
export let course = {};
|
||||
let name;
|
||||
let role;
|
||||
let imgUrl;
|
||||
let description;
|
||||
let courseNo;
|
||||
let avatar;
|
||||
let hasBeenSet = false;
|
||||
|
||||
function setter(value, setterKey) {
|
||||
if (!value) return;
|
||||
|
||||
const _course = cloneDeep(course);
|
||||
set(_course, setterKey, value);
|
||||
course = _course;
|
||||
}
|
||||
|
||||
async function onAvatarChange(_avatar) {
|
||||
if (!_avatar) return;
|
||||
|
||||
const logo = await uploadAvatar(course.id, _avatar);
|
||||
imgUrl = logo;
|
||||
}
|
||||
|
||||
function setDefaults(course) {
|
||||
if (isEmpty(course) || hasBeenSet) return;
|
||||
|
||||
hasBeenSet = true;
|
||||
name = get(course, 'metadata.instructor.name');
|
||||
role = get(course, 'metadata.instructor.role');
|
||||
imgUrl = get(course, 'metadata.instructor.imgUrl');
|
||||
description = get(course, 'metadata.instructor.description');
|
||||
courseNo = get(course, 'metadata.instructor.courseNo');
|
||||
}
|
||||
|
||||
$: setter(name, 'metadata.instructor.name');
|
||||
$: setter(role, 'metadata.instructor.role');
|
||||
$: setter(imgUrl, 'metadata.instructor.imgUrl');
|
||||
$: setter(description, 'metadata.instructor.description');
|
||||
$: setter(courseNo, 'metadata.instructor.courseNo');
|
||||
|
||||
$: onAvatarChange(avatar);
|
||||
|
||||
$: setDefaults(course);
|
||||
</script>
|
||||
|
||||
<div class="mt-5">
|
||||
<label for="upload" class="font-bold">Instructor Logo</label>
|
||||
<UploadImage bind:avatar src={imgUrl} />
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Instructor name"
|
||||
placeholder="Your company name"
|
||||
bind:value={name}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Instructor Role"
|
||||
placeholder="e.g Software developer"
|
||||
bind:value={role}
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
label="About instructor"
|
||||
placeholder="A short background about the instructor"
|
||||
rows="6"
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
bind:value={description}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Total number of courses"
|
||||
type="number"
|
||||
bind:value={courseNo}
|
||||
/>
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
<script lang="ts">
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import set from 'lodash/set';
|
||||
import get from 'lodash/get';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import { Toggle, Select, SelectItem } from 'carbon-components-svelte';
|
||||
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import TextEditor from '$lib/components/TextEditor/index.svelte';
|
||||
import { isCourseFree } from '$lib/utils/functions/course';
|
||||
import type { Course } from '$lib/utils/types';
|
||||
|
||||
export let course: Course;
|
||||
|
||||
let discount = 0;
|
||||
let paymentLink = '';
|
||||
let showDiscount: boolean | undefined = undefined;
|
||||
let giftToggled: boolean | undefined = undefined;
|
||||
|
||||
let hasBeenSet = false;
|
||||
|
||||
function setDefaults(course: Course) {
|
||||
console.log('\n\nsetDefaults course', course);
|
||||
if (isEmpty(course) || hasBeenSet) return;
|
||||
hasBeenSet = true;
|
||||
|
||||
paymentLink = get(course, 'metadata.paymentLink', '');
|
||||
discount = get(course, 'metadata.discount', 0);
|
||||
showDiscount = get(course, 'metadata.showDiscount', false);
|
||||
giftToggled = get(course, 'metadata.reward.show', false);
|
||||
}
|
||||
|
||||
function setter(value: string | number | boolean | undefined, setterKey: string) {
|
||||
if (typeof value !== 'boolean' && !value) return;
|
||||
|
||||
const _course = cloneDeep(course);
|
||||
set(_course, setterKey, value);
|
||||
course = _course;
|
||||
}
|
||||
|
||||
function handleChange(html: string) {
|
||||
const _course = cloneDeep(course);
|
||||
set(_course, 'metadata.reward.description', html);
|
||||
course = _course;
|
||||
}
|
||||
|
||||
$: setter(showDiscount, 'metadata.showDiscount');
|
||||
$: setter(paymentLink, 'metadata.paymentLink');
|
||||
$: setter(discount, 'metadata.discount');
|
||||
$: setter(giftToggled, 'metadata.reward.show');
|
||||
|
||||
$: setDefaults(course);
|
||||
</script>
|
||||
|
||||
{#if typeof course !== 'undefined'}
|
||||
<Select labelText="Currency" bind:selected={course.currency}>
|
||||
<SelectItem value="NGN" />
|
||||
<SelectItem value="USD" />
|
||||
</Select>
|
||||
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Cost"
|
||||
type="number"
|
||||
bind:value={course.cost}
|
||||
/>
|
||||
|
||||
{#if !isCourseFree(course.cost || 0)}
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Payment Link"
|
||||
helperMessage="Stripe, Lemon Squeezy or any payment link"
|
||||
bind:value={paymentLink}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="mt-5">
|
||||
<!-- <label for="text-field" class="m-0 font-bold mb-2">Discount</label> -->
|
||||
<Toggle labelText="Discount" bind:toggled={showDiscount}>
|
||||
<span slot="labelA">No</span>
|
||||
<span slot="labelB">Yes</span>
|
||||
</Toggle>
|
||||
</div>
|
||||
|
||||
{#if showDiscount}
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Discout Percent"
|
||||
type="number"
|
||||
bind:value={discount}
|
||||
helperMessage="In Percentage %"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="mt-5">
|
||||
<!-- <label for="text-field" class="m-0 font-bold mb-2">Discount</label> -->
|
||||
<Toggle labelText="Gift on Completion" bind:toggled={giftToggled}>
|
||||
<span slot="labelA">No</span>
|
||||
<span slot="labelB">Yes</span>
|
||||
</Toggle>
|
||||
</div>
|
||||
|
||||
{#if giftToggled}
|
||||
<p class="dark:text-white font-bold mt-5">About Gift</p>
|
||||
|
||||
<div class="h-2/5">
|
||||
<TextEditor value={get(course, 'metadata.reward.description', '')} onChange={handleChange} />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import TextEditor from '$lib/components/TextEditor/index.svelte';
|
||||
|
||||
export let value: string;
|
||||
</script>
|
||||
|
||||
<div class="h-2/5">
|
||||
<TextEditor bind:value />
|
||||
</div>
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
<script>
|
||||
import SaveIcon from 'carbon-icons-svelte/lib/Save.svelte';
|
||||
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
|
||||
import { Toggle } from 'carbon-components-svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import UploadImage from '$lib/components/UploadImage/index.svelte';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import { uploadAvatar } from '$lib/utils/services/courses';
|
||||
|
||||
export let courseId;
|
||||
export let reviews = [];
|
||||
export let review = {};
|
||||
export let errors = {};
|
||||
export let onExpand = () => {};
|
||||
|
||||
let avatar;
|
||||
|
||||
// function to delete review
|
||||
function deleteReviewData() {
|
||||
reviews = reviews.filter((r) => r.id !== review.id);
|
||||
}
|
||||
|
||||
async function onAvatarChange(_avatar) {
|
||||
if (!_avatar) return;
|
||||
|
||||
review.avatar_url = await uploadAvatar(courseId, _avatar);
|
||||
}
|
||||
|
||||
$: onAvatarChange(avatar);
|
||||
$: review.rating = parseInt(review.rating);
|
||||
</script>
|
||||
|
||||
<div class="flex items-center flex-col w-full">
|
||||
<UploadImage
|
||||
bind:avatar
|
||||
src={review.avatar_url}
|
||||
widthHeight="w-20 h-20"
|
||||
errorMessage={errors.avatar_url}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mt-2 w-full"
|
||||
labelClassName="font-normal"
|
||||
label="Full Name"
|
||||
placeholder=""
|
||||
type="text"
|
||||
bind:value={review.name}
|
||||
errorMessage={errors.name}
|
||||
/>
|
||||
|
||||
<!-- Description -->
|
||||
<TextArea
|
||||
label="Description"
|
||||
rows="4"
|
||||
className="mt-2 w-full"
|
||||
labelClassName="font-normal"
|
||||
placeholder=""
|
||||
bind:value={review.description}
|
||||
errorMessage={errors.description}
|
||||
isAIEnabled={true}
|
||||
initAIPrompt="Generate a 20 word review from a student saying good things about me teaching"
|
||||
aiAlignPopover="top-right"
|
||||
/>
|
||||
|
||||
<div class="flex justify-between w-full items-center mt-2">
|
||||
<!-- Rating -->
|
||||
<TextField
|
||||
className="mt-2 w-20"
|
||||
labelClassName="font-normal"
|
||||
label="Rating"
|
||||
type="number"
|
||||
min={1}
|
||||
max={5}
|
||||
bind:value={review.rating}
|
||||
errorMessage={errors.rating}
|
||||
/>
|
||||
|
||||
<!-- Toggle -->
|
||||
<div class="w-24">
|
||||
<Toggle labelText="Hide Review" size="sm" bind:toggled={review.hide} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex justify-between items-center w-full">
|
||||
<IconButton contained={true} value="delete" onClick={deleteReviewData} size="large">
|
||||
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
<IconButton contained={true} value="save" onClick={() => onExpand(review.id)} size="large">
|
||||
<SaveIcon size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
<script>
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import get from 'lodash/get';
|
||||
import set from 'lodash/set';
|
||||
import z from 'zod';
|
||||
import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import ReviewFormEditor from './ReviewFormEditor.svelte';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import { processErrors } from '$lib/utils/functions/validator';
|
||||
|
||||
export let course = {};
|
||||
|
||||
let reviews = get(course, 'metadata.reviews', []);
|
||||
let reviewToExpand = null;
|
||||
let errors = {};
|
||||
|
||||
function setter(value, setterKey) {
|
||||
if (!value) return;
|
||||
|
||||
const _course = cloneDeep(course);
|
||||
set(_course, setterKey, value);
|
||||
course = _course;
|
||||
}
|
||||
|
||||
function addReviewForm() {
|
||||
const _review = {
|
||||
id: new Date().getTime(),
|
||||
hide: false,
|
||||
name: '',
|
||||
avatar_url: '',
|
||||
rating: 1,
|
||||
created_at: new Date().getTime(),
|
||||
description: ''
|
||||
};
|
||||
reviews = [...reviews, _review];
|
||||
reviewToExpand = _review.id;
|
||||
}
|
||||
|
||||
function validateReviews(id) {
|
||||
const review = reviews.find((r) => r.id === id);
|
||||
const reviewSchema = z.object({
|
||||
name: z.string().min(5, {
|
||||
message: 'Name is too short, min of 5 character',
|
||||
invalid_type_error: 'Must not be empty'
|
||||
}),
|
||||
avatar_url: z.string().min(6, {
|
||||
message: 'Upload an image',
|
||||
invalid_type_error: 'Must not be empty'
|
||||
}),
|
||||
rating: z
|
||||
.number()
|
||||
.min(1, {
|
||||
message: 'Rating must be from 1-5',
|
||||
invalid_type_error: 'Must not be empty'
|
||||
})
|
||||
.max(5, {
|
||||
message: 'Rating must be from 1-5',
|
||||
invalid_type_error: 'Must not be empty'
|
||||
}),
|
||||
description: z.string().min(10, {
|
||||
message: 'Description is too short, min of 5 character',
|
||||
invalid_type_error: 'Must not be empty'
|
||||
})
|
||||
});
|
||||
|
||||
const { error } = reviewSchema.safeParse(review);
|
||||
return processErrors(error);
|
||||
}
|
||||
|
||||
function onExpand(id) {
|
||||
errors = {};
|
||||
|
||||
if (reviewToExpand) {
|
||||
const validationRes = validateReviews(reviewToExpand);
|
||||
if (Object.keys(validationRes).length) {
|
||||
errors = Object.assign(errors, validationRes);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (id === reviewToExpand) {
|
||||
reviewToExpand = null;
|
||||
return;
|
||||
}
|
||||
|
||||
reviewToExpand = id;
|
||||
}
|
||||
|
||||
$: setter(reviews, 'metadata.reviews');
|
||||
</script>
|
||||
|
||||
<!-- Sections - Reviews -->
|
||||
<section id="reviews">
|
||||
<div class="">
|
||||
{#each reviews || [] as review}
|
||||
<div
|
||||
id={review.id}
|
||||
class="relative flex items-center flex-col border border-gray-300 rounded-lg p-2 my-2.5"
|
||||
>
|
||||
{#if review.id !== reviewToExpand}
|
||||
<!-- the headers -->
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<Avatar src={review.avatar_url} name={review.name} className="mt-1" />
|
||||
<p class="text-sm">{review.name}</p>
|
||||
|
||||
<IconButton
|
||||
value="expand"
|
||||
onClick={() => onExpand(review.id)}
|
||||
size={$isMobile ? 'large' : 'small'}
|
||||
>
|
||||
<ChevronDownIcon size={16} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- the body -->
|
||||
{#if review.id === reviewToExpand}
|
||||
<ReviewFormEditor bind:reviews bind:review {errors} courseId={course.id} {onExpand} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<!-- create reviews button -->
|
||||
<PrimaryButton
|
||||
label="Add Reviews"
|
||||
variant={VARIANTS.CONTAINED}
|
||||
onClick={addReviewForm}
|
||||
className="w-5 rounded-md mt-8"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,261 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import set from 'lodash/set';
|
||||
import ChevronRightIcon from 'carbon-icons-svelte/lib/ChevronRight.svelte';
|
||||
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
|
||||
import ArrowUpRightIcon from 'carbon-icons-svelte/lib/ArrowUpRight.svelte';
|
||||
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
import HeaderForm from './HeaderForm.svelte';
|
||||
import RequirementForm from './RequirementForm.svelte';
|
||||
import DescriptionForm from './DescriptionForm.svelte';
|
||||
import PricingForm from './PricingForm.svelte';
|
||||
import GoalsForm from './GoalsForm.svelte';
|
||||
import ReviewsForm from './ReviewsForm.svelte';
|
||||
import InstructorForm from './InstructorForm.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { updateCourse } from '$lib/utils/services/courses';
|
||||
import generateSlug from '$lib/utils/functions/generateSlug';
|
||||
import ChevronLeftIcon from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
|
||||
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import CustomPromptBtn from '$lib/components/AI/AIButton/CustomPromptBtn.svelte';
|
||||
import type { Course } from '$lib/utils/types';
|
||||
|
||||
export let course: Course;
|
||||
export let courseId: string;
|
||||
|
||||
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
|
||||
let loading = false;
|
||||
let show = false;
|
||||
|
||||
interface Section {
|
||||
key: number;
|
||||
path: string;
|
||||
title: string;
|
||||
enableAIWriter?: boolean;
|
||||
initPrompt?: string;
|
||||
}
|
||||
|
||||
const sections: Section[] = [
|
||||
{
|
||||
key: 1,
|
||||
path: '',
|
||||
title: 'Header'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
path: 'metadata.requirements',
|
||||
title: 'Requirement',
|
||||
enableAIWriter: true,
|
||||
initPrompt: 'Please write few requirements needed to take this course:'
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
path: 'metadata.description',
|
||||
title: 'Description',
|
||||
enableAIWriter: true,
|
||||
initPrompt: 'Please write a detailed course description for this course:'
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
path: 'metadata.goals',
|
||||
title: 'Goals',
|
||||
enableAIWriter: true,
|
||||
initPrompt: 'What should a student expect to learn from this course:'
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
path: '',
|
||||
title: 'Reviews'
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
path: '',
|
||||
title: 'Instructor'
|
||||
},
|
||||
{
|
||||
key: 7,
|
||||
path: '',
|
||||
title: 'Pricing'
|
||||
}
|
||||
];
|
||||
let selectedSection: Section | null = null;
|
||||
|
||||
function handleClose() {
|
||||
if (!selectedSection) {
|
||||
goto(`/courses/${courseId}`);
|
||||
}
|
||||
|
||||
selectedSection = null;
|
||||
}
|
||||
|
||||
function handleSectionSelect(sectionKey: number) {
|
||||
return () => {
|
||||
selectedSection = sections.find((section) => section.key === sectionKey) || null;
|
||||
|
||||
if (selectedSection) {
|
||||
const sectionId = selectedSection.title.toLowerCase();
|
||||
|
||||
const sectionEl = document.getElementById(sectionId);
|
||||
if (sectionEl) {
|
||||
sectionEl.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
loading = true;
|
||||
course.slug = course.slug || generateSlug(course.title);
|
||||
|
||||
await updateCourse(courseId, undefined, {
|
||||
...course,
|
||||
attendance: undefined,
|
||||
group: undefined,
|
||||
lessons: undefined,
|
||||
polls: undefined,
|
||||
slug: course.slug
|
||||
});
|
||||
loading = false;
|
||||
|
||||
return `${window.location.origin}/course/${course.slug}`;
|
||||
}
|
||||
/**
|
||||
* 1. Use all you have for editing now
|
||||
* 2. Make course one interface we might need to computation
|
||||
*/
|
||||
async function handlePreview() {
|
||||
const link = `${window.location.origin}/course/${course.slug}`;
|
||||
window.open(link, '_blank');
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside
|
||||
class={`${
|
||||
show ? '-translate-x-[100%] fixed md:absolute z-[50]' : 'translate-x-0 fixed md:relative z-[50]'
|
||||
}left-0 z-[50] transition w-[90vw] min-w-[300px] max-w-[350px] bg-gray-100 dark:bg-neutral-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
|
||||
>
|
||||
<div class="toggler rounded-full shadow-lg absolute">
|
||||
<IconButton
|
||||
value="toggle"
|
||||
onClick={() => (show = !show)}
|
||||
size={$isMobile ? 'large' : 'small'}
|
||||
color="text-black"
|
||||
toolTipProps={$isMobile
|
||||
? {}
|
||||
: {
|
||||
title: 'Toggle editor',
|
||||
direction: 'right'
|
||||
}}
|
||||
>
|
||||
{#if show}
|
||||
<ChevronRightIcon size={16} />
|
||||
{:else}
|
||||
<ChevronLeftIcon size={16} />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="h-full flex flex-col">
|
||||
{#if !selectedSection}
|
||||
<div class="flex justify-between items-center px-2 w-full">
|
||||
<CloseButton onClick={handleClose} />
|
||||
<div class="flex items-center">
|
||||
<PrimaryButton
|
||||
label="Save"
|
||||
type="button"
|
||||
className="mr-1"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={handleSave}
|
||||
isLoading={loading}
|
||||
/>
|
||||
<IconButton onClick={handlePreview} disabled={loading || !course.slug}>
|
||||
<ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-2 w-full mb-2">
|
||||
<h3 class="dark:text-white">Page Builder</h3>
|
||||
</div>
|
||||
{#each sections as section, index}
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-2 py-3 border border-l-0 {index + 1 <
|
||||
sections.length && 'border-b-0'} border-gray-300"
|
||||
on:click={handleSectionSelect(section.key)}
|
||||
>
|
||||
<p class="dark:text-white mr-2">{section.title} section</p>
|
||||
<ChevronRightIcon size={24} class="carbon-class" />
|
||||
</button>
|
||||
{/each}
|
||||
{:else}
|
||||
<!-- Title -->
|
||||
<div class="flex items-center {borderBottomGrey} w-full">
|
||||
<IconButton onClick={handleClose}>
|
||||
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" title="Go back" />
|
||||
</IconButton>
|
||||
<div class=" flex items-center">
|
||||
<h3 class="dark:text-white">
|
||||
{selectedSection.title}
|
||||
</h3>
|
||||
{#if selectedSection.enableAIWriter}
|
||||
<CustomPromptBtn
|
||||
className="w-fit ml-2"
|
||||
alignPopover="bottom-left"
|
||||
defaultPrompt={`${selectedSection.initPrompt} ${course.title}. Please format in html`}
|
||||
isHTML={true}
|
||||
handleInsert={(v) => {
|
||||
if (!selectedSection) return;
|
||||
const _course = cloneDeep(course);
|
||||
set(_course, selectedSection.path, v);
|
||||
course = _course;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-content p-2 overflow-y-auto">
|
||||
{#if selectedSection.key === 1}
|
||||
<HeaderForm bind:course />
|
||||
{:else if selectedSection.key === 2}
|
||||
<RequirementForm bind:value={course.metadata.requirements} />
|
||||
{:else if selectedSection.key === 3}
|
||||
<DescriptionForm bind:value={course.metadata.description} />
|
||||
{:else if selectedSection.key === 4}
|
||||
<GoalsForm bind:value={course.metadata.goals} />
|
||||
{:else if selectedSection.key === 5}
|
||||
<ReviewsForm bind:course />
|
||||
{:else if selectedSection.key === 6}
|
||||
<InstructorForm bind:course />
|
||||
{:else if selectedSection.key === 7}
|
||||
<PricingForm bind:course />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.title-content {
|
||||
height: 90%;
|
||||
}
|
||||
.toggler {
|
||||
right: -15px;
|
||||
z-index: 10;
|
||||
border: 1px solid var(--border-color);
|
||||
top: 50px;
|
||||
height: fit-content;
|
||||
background: var(--border-color);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.toggler {
|
||||
right: -25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
export function observeIntersection(node, callback, options = {}) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
callback(true);
|
||||
} else {
|
||||
callback(false);
|
||||
}
|
||||
});
|
||||
}, options);
|
||||
|
||||
observer.observe(node);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
observer.unobserve(node);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import Modal from '$lib/components/Modal/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { coursePaymentValidation } from '$lib/utils/functions/validator';
|
||||
import { Link } from 'carbon-components-svelte';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import {
|
||||
triggerSendEmail,
|
||||
NOTIFICATION_NAME
|
||||
} from '$lib/utils/services/notification/notification';
|
||||
|
||||
export let open = false;
|
||||
export let paymentLink = '';
|
||||
export let teacherEmail = '';
|
||||
export let courseName = '';
|
||||
|
||||
let fields = {
|
||||
fullname: '',
|
||||
email: ''
|
||||
};
|
||||
|
||||
let errors = {
|
||||
fullname: '',
|
||||
email: ''
|
||||
};
|
||||
|
||||
const STEPS = {
|
||||
STEP_1: 'ENTER_DETAILS',
|
||||
STEP_2: 'GO_TO_PAYMENT'
|
||||
};
|
||||
|
||||
let step = STEPS.STEP_1;
|
||||
|
||||
function onSubmit() {
|
||||
errors = coursePaymentValidation(fields);
|
||||
console.log('coursePayment errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentLink) {
|
||||
step = STEPS.STEP_2;
|
||||
|
||||
// Send email to first added teacher of student wanting to join
|
||||
triggerSendEmail(NOTIFICATION_NAME.SEND_TEACHER_STUDENT_BUY_REQUEST, {
|
||||
to: teacherEmail,
|
||||
courseName,
|
||||
studentEmail: fields.email,
|
||||
studentFullname: fields.fullname
|
||||
});
|
||||
} else {
|
||||
open = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onClickPaymentLink() {
|
||||
// Send email to student to send proof of payment to teacher
|
||||
triggerSendEmail(NOTIFICATION_NAME.STUDENT_PROOVE_COURSE_PAYMENT, {
|
||||
to: fields.email,
|
||||
courseName,
|
||||
teacherEmail,
|
||||
studentFullname: fields.fullname,
|
||||
orgName: $currentOrg.name
|
||||
});
|
||||
|
||||
fields.fullname = '';
|
||||
fields.email = '';
|
||||
open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Process course payment">
|
||||
{#if step === STEPS.STEP_1}
|
||||
<form on:submit|preventDefault={onSubmit}>
|
||||
<TextField
|
||||
label="Your Fullname"
|
||||
bind:value={fields.fullname}
|
||||
autoFocus={true}
|
||||
placeholder="John Doe"
|
||||
className="mb-4"
|
||||
isRequired={true}
|
||||
autoComplete={false}
|
||||
errorMessage={errors.fullname}
|
||||
/>
|
||||
<TextField
|
||||
label="Your Fullname"
|
||||
bind:value={fields.email}
|
||||
placeholder="[email protected]"
|
||||
className="mb-4"
|
||||
isRequired={true}
|
||||
autoComplete={false}
|
||||
errorMessage={errors.email}
|
||||
/>
|
||||
|
||||
<div class="mt-5 flex items-center flex-row-reverse">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
label={paymentLink ? 'Next' : 'Finish'}
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
{:else if step === STEPS.STEP_2}
|
||||
<p>
|
||||
You will now be taken to a payment page, once you've paid send a proof of payment to the
|
||||
course admin
|
||||
</p>
|
||||
<div class="mt-5 flex items-center flex-row-reverse">
|
||||
<Link href={paymentLink} target="_blank" on:click={onClickPaymentLink}>Go to payment</Link>
|
||||
</div>
|
||||
{/if}
|
||||
</Modal>
|
||||
@@ -0,0 +1,246 @@
|
||||
<script lang="ts">
|
||||
import get from 'lodash/get';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
|
||||
import { isCourseFree } from '$lib/utils/functions/course';
|
||||
import { getStudentInviteLink } from '$lib/utils/functions/course';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { goto } from '$app/navigation';
|
||||
import PaymentModal from './PaymentModal.svelte';
|
||||
import type { Course } from '$lib/utils/types';
|
||||
import { ROLE } from '$lib/utils/constants/roles';
|
||||
import { capturePosthogEvent } from '$lib/utils/services/posthog';
|
||||
|
||||
export let className = '';
|
||||
export let editMode = false;
|
||||
export let courseData: Course;
|
||||
export let startCoursePayment = false;
|
||||
export let mobile = false;
|
||||
|
||||
let calculatedCost = 0;
|
||||
let discount = 0;
|
||||
let formatter: Intl.NumberFormat | undefined;
|
||||
let isFree = false;
|
||||
|
||||
function calcDisc(percent: number, cost: number, showDiscount: boolean) {
|
||||
if (!percent || !showDiscount) return cost;
|
||||
const discountAmount = (percent / 100) * cost;
|
||||
const discountedPrice = cost - discountAmount;
|
||||
return Math.round(discountedPrice);
|
||||
}
|
||||
|
||||
function handleJoinCourse() {
|
||||
if (editMode) return;
|
||||
|
||||
capturePosthogEvent('join_course', {
|
||||
course_id: courseData.id,
|
||||
course_title: courseData.title,
|
||||
course_cost: courseData.cost,
|
||||
course_free: isFree
|
||||
});
|
||||
if (isFree) {
|
||||
const link = getStudentInviteLink(courseData, $currentOrg.siteName);
|
||||
goto(link);
|
||||
} else {
|
||||
startCoursePayment = true;
|
||||
}
|
||||
}
|
||||
|
||||
function setFormatter(currency: string | undefined) {
|
||||
if (!currency) return;
|
||||
formatter = getCurrencyFormatter(currency);
|
||||
}
|
||||
|
||||
function getTeacherEmail(group: Course['group']) {
|
||||
const firstTutor = group?.members?.find((m) => m.role_id === ROLE.TUTOR);
|
||||
|
||||
return firstTutor?.profile?.email || '';
|
||||
}
|
||||
|
||||
$: setFormatter(courseData.currency);
|
||||
|
||||
$: discount = get(courseData, 'metadata.discount', 0);
|
||||
$: calculatedCost = calcDisc(discount, courseData.cost || 0, !!courseData.metadata.showDiscount);
|
||||
$: isFree = isCourseFree(calculatedCost);
|
||||
</script>
|
||||
|
||||
<PaymentModal
|
||||
bind:open={startCoursePayment}
|
||||
paymentLink={get(courseData, 'metadata.paymentLink', '')}
|
||||
courseName={courseData.title}
|
||||
teacherEmail={getTeacherEmail(courseData.group)}
|
||||
/>
|
||||
|
||||
<!-- Pricing Details -->
|
||||
{#if mobile}
|
||||
<div
|
||||
class="sticky w-full flex items-center justify-center transition duration-300 h-fit bottom-0 lg:hidden bg-gray-50 dark:bg-neutral-800"
|
||||
>
|
||||
<aside
|
||||
class="price-container sticky lg:hidden {editMode
|
||||
? 'lg:bottom-2'
|
||||
: 'lg:top-10'} lg:shadow-2xl lg:rounded-lg m-h-fit bg-gray-50 dark:bg-neutral-800 z-0 {className}"
|
||||
>
|
||||
<div class="flex items-center justify-center gap-3 px-3 py-3">
|
||||
<!-- Pricing -->
|
||||
<div class=" text-center">
|
||||
{#if courseData?.metadata?.allowNewStudent}
|
||||
<p class="dark:text-white font-medium text-sm flex items-center gap-1">
|
||||
{formatter?.format(calculatedCost) || calculatedCost}
|
||||
{#if isFree}
|
||||
<span class="text-xs">(Free)</span>
|
||||
{/if}
|
||||
</p>
|
||||
{#if courseData?.metadata?.showDiscount}
|
||||
<p class="dark:text-white font-light text-sm text-gray-500">
|
||||
{discount}% Discount.
|
||||
<span class="line-through"
|
||||
>{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
|
||||
>
|
||||
</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="dark:text-white text-lg">
|
||||
This course is currently not accepting new students.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Call To Action Buttons -->
|
||||
<div class="flex flex-col w-full h-full items-center">
|
||||
<PrimaryButton
|
||||
label={isFree ? 'Enroll Now' : 'Buy Now'}
|
||||
className="w-full sm:w-full h-[40px]"
|
||||
onClick={handleJoinCourse}
|
||||
isDisabled={!courseData.metadata.allowNewStudent}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{:else}
|
||||
<aside
|
||||
class="price-container lg:sticky {editMode
|
||||
? 'lg:top-0'
|
||||
: 'lg:top-10'} lg:shadow-2xl lg:rounded-lg m-h-fit dark:bg-neutral-800 {className}"
|
||||
>
|
||||
<div class="p-2 lg:p-10">
|
||||
<!-- Pricing -->
|
||||
<div class="mb-6">
|
||||
{#if courseData?.metadata?.allowNewStudent}
|
||||
<p class="dark:text-white font-medium text-lg">
|
||||
{formatter?.format(calculatedCost) || calculatedCost}
|
||||
{#if isFree}
|
||||
<span class="text-sm">(Free)</span>
|
||||
{/if}
|
||||
</p>
|
||||
{#if courseData?.metadata?.showDiscount}
|
||||
<p class="dark:text-white font-light text-sm text-gray-500">
|
||||
{discount}% Discount.
|
||||
<span class="line-through"
|
||||
>{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
|
||||
>
|
||||
</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="dark:text-white text-lg">
|
||||
This course is currently not accepting new students.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Call To Action Buttons -->
|
||||
<div class="flex flex-col w-full items-center">
|
||||
<PrimaryButton
|
||||
label={isFree ? 'Enroll Now' : 'Buy Now'}
|
||||
className="w-full sm:w-full py-3 mb-3"
|
||||
onClick={handleJoinCourse}
|
||||
isDisabled={!courseData.metadata.allowNewStudent}
|
||||
/>
|
||||
{#if courseData?.metadata?.showDiscount && courseData.metadata.allowNewStudent}
|
||||
<p class="dark:text-white font-light text-sm text-gray-500">Early bird offer. Buy ASAP</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gift Container -->
|
||||
{#if courseData?.metadata?.reward?.show}
|
||||
<div class="p-10 flex items-center flex-col border-t border-b border-gray-300">
|
||||
{@html get(courseData, 'metadata.reward.description', '')}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.banner {
|
||||
background-color: #040f2d;
|
||||
min-height: 472px;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: #7888b7;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
max-width: 559px;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--main-primary-color);
|
||||
display: block;
|
||||
bottom: -14px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
width: 90%;
|
||||
max-width: 405px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.price-container {
|
||||
width: 50%;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.price-container {
|
||||
width: 350px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
.price-container {
|
||||
width: 405px;
|
||||
min-width: 330px;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
.course-content {
|
||||
max-width: 608px;
|
||||
}
|
||||
|
||||
:global(.list ul li) {
|
||||
margin-left: 1rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
:global(.plyr) {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
export const SECTION_KEYS = {
|
||||
HEADER: 'header',
|
||||
REQUIREMENT: '#requirement',
|
||||
DESCRIPTION: '#description',
|
||||
GOALS: '#goals',
|
||||
LESSONS: '#lessons',
|
||||
REVIEWS: '#reviews',
|
||||
INSTRUCTOR: '#instructor'
|
||||
};
|
||||
|
||||
export const NAV_ITEMS = [
|
||||
{
|
||||
key: SECTION_KEYS.REQUIREMENT,
|
||||
label: 'Requirement'
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.DESCRIPTION,
|
||||
label: 'Description'
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.GOALS,
|
||||
label: 'Goals'
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.LESSONS,
|
||||
label: 'Lessons'
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.REVIEWS,
|
||||
label: 'Reviews'
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.INSTRUCTOR,
|
||||
label: 'Instructor'
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,547 @@
|
||||
<script lang="ts">
|
||||
import get from 'lodash/get';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { page } from '$app/stores';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
|
||||
import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile.svelte'; // exercise
|
||||
import Video from 'carbon-icons-svelte/lib/Video.svelte'; //video
|
||||
import PageNumber from 'carbon-icons-svelte/lib/PageNumber.svelte';
|
||||
import PlayFilled from 'carbon-icons-svelte/lib/PlayFilled.svelte';
|
||||
import PricingSection from './components/PricingSection.svelte';
|
||||
import { observeIntersection } from './components/IntersectionObserver';
|
||||
import { getLectureNo } from '../Course/function';
|
||||
import { NAV_ITEMS } from './constants';
|
||||
import Modal from '../Modal/index.svelte';
|
||||
import { reviewsModalStore } from './store';
|
||||
import Chip from '../Chip/index.svelte';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { getEmbedId } from '$lib/utils/functions/formatYoutubeVideo';
|
||||
import type { Course, Lesson, Review } from '$lib/utils/types';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
|
||||
export let editMode = false;
|
||||
export let courseData: Course;
|
||||
const ratingsImg = [
|
||||
'/images/rating-1.svg',
|
||||
'/images/rating-2.svg',
|
||||
'/images/rating-3.svg',
|
||||
'/images/rating-4.svg',
|
||||
'/images/rating-5.svg'
|
||||
];
|
||||
|
||||
let lessons: Array<Lesson> = [];
|
||||
let reviews: Review[] = [];
|
||||
let player: any;
|
||||
let averageRating = 0;
|
||||
let totalRatings = 0;
|
||||
let startCoursePayment = false;
|
||||
let isVisible = false;
|
||||
let observer: { destroy: () => void };
|
||||
|
||||
// initialize the expandDescription array with 'false' values for each review.
|
||||
let expandDescription = Array(reviews.length).fill(false);
|
||||
|
||||
let activeNav = NAV_ITEMS[0].key;
|
||||
let instructor = {};
|
||||
let video: string | undefined;
|
||||
|
||||
function playVideo() {
|
||||
console.log('open modal with video');
|
||||
}
|
||||
|
||||
function locationHashChanged() {
|
||||
activeNav = window.location.hash;
|
||||
}
|
||||
|
||||
function initPlyr(_player: any, _video: string | undefined) {
|
||||
if (!player) return;
|
||||
|
||||
// @ts-ignore
|
||||
const plyr = new Plyr('#player', {});
|
||||
// @ts-ignore
|
||||
window.player = plyr;
|
||||
}
|
||||
|
||||
function toggleDescription(id: number) {
|
||||
expandDescription[id] = !expandDescription[id];
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.onhashchange = locationHashChanged;
|
||||
const targetNode = document.querySelector('.target-component');
|
||||
observer = observeIntersection(targetNode, (inView: boolean) => {
|
||||
isVisible = inView;
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
observer?.destroy();
|
||||
});
|
||||
|
||||
$: video = get(courseData, 'metadata.videoUrl');
|
||||
$: bannerImage = get(courseData, 'logo');
|
||||
$: lessons = get(courseData, 'lessons', []);
|
||||
$: instructor = courseData?.metadata?.instructor || {};
|
||||
$: initPlyr(player, video);
|
||||
$: {
|
||||
reviews = get(courseData, 'metadata.reviews') || [];
|
||||
totalRatings = reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0);
|
||||
averageRating = totalRatings / reviews?.length;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{editMode ? '[app] - ' : ''}{get(courseData, 'title', '')}</title>
|
||||
<meta name="description" content={get(courseData, 'description', '')} />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta property="og:title" content={get(courseData, 'title', '')} />
|
||||
<meta property="og:description" content={get(courseData, 'description', '')} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="280" />
|
||||
<meta property="og:image:height" content="200" />
|
||||
<meta property="og:image:secure_url" content={get(courseData, 'logo', '')} />
|
||||
</svelte:head>
|
||||
|
||||
<div class="w-full bg-white dark:bg-black flex flex-col items-center">
|
||||
<!-- Header Section -->
|
||||
<header id="header" class="banner w-full flex items-center justify-center p-">
|
||||
<div class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row">
|
||||
<!-- Course Description -->
|
||||
<div class="md:w-2/5 w-11/12 py-10">
|
||||
<h1 class="dark:text-white text-5xl text-white my-4 font-bold">
|
||||
{get(courseData, 'title', '')}
|
||||
</h1>
|
||||
<p class="dark:text-white text-md text-white mb-6">
|
||||
{get(courseData, 'description', '')}
|
||||
</p>
|
||||
|
||||
<p class="dark:text-white author my-3 text-sm">
|
||||
{get(courseData, 'metadata.instructor.name', '')}
|
||||
</p>
|
||||
<PrimaryButton
|
||||
label="Start Course"
|
||||
className="px-6 py-5 mt-6 sm:w-fit hidden md:block"
|
||||
onClick={() => {
|
||||
if (editMode) return;
|
||||
startCoursePayment = true;
|
||||
}}
|
||||
isDisabled={!courseData.metadata.allowNewStudent}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Banner Image getEmbedId(videoUrl) -->
|
||||
{#if video}
|
||||
<div class="banner-image md:w-2/3 w-full flex">
|
||||
<div
|
||||
bind:this={player}
|
||||
id="player"
|
||||
data-plyr-provider="youtube"
|
||||
data-plyr-embed-id={getEmbedId(video)}
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="container">
|
||||
<div
|
||||
bind:this={player}
|
||||
id="player"
|
||||
class="banner-image w-2/3 h-96 relative"
|
||||
data-plyr-provider="youtube"
|
||||
data-plyr-embed-id="bTqVqk7FSmY"
|
||||
/>
|
||||
</div> -->
|
||||
{:else}
|
||||
<div class="banner-image md:w-2/3 relative rounded-md overflow-hidden">
|
||||
<img
|
||||
style="min-width:280px; min-height:200px"
|
||||
alt="About us"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="banner-image w-2/3 h-96 relative cursor-pointer"
|
||||
on:click={playVideo}
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 left-0 backdrop w-full h-full"
|
||||
/>
|
||||
<img
|
||||
src="/images/course-banner-image.png"
|
||||
alt="banner"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full z-50 flex items-center justify-center"
|
||||
>
|
||||
<img src="/images/play_video.png" alt="play video" />
|
||||
</div>
|
||||
</div> -->
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
<!-- Body -->
|
||||
<div class="bg-white dark:bg-black w-full">
|
||||
<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]"
|
||||
>
|
||||
<!-- Course Details -->
|
||||
<div class="course-content w-full p-3 lg:w-10/12 lg:mr-10">
|
||||
<!-- Navigation -->
|
||||
|
||||
<nav
|
||||
class="flex items-center border-b border-gray-300 py-3 sticky top-0 {!editMode &&
|
||||
'lg:top-11'} bg-white dark:bg-neutral-800"
|
||||
>
|
||||
{#each NAV_ITEMS as navItem}
|
||||
<a
|
||||
href="{$page.url.pathname}{navItem.key}"
|
||||
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"
|
||||
>
|
||||
{navItem.label}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- Sections - Requirement -->
|
||||
<section id="requirement" class="border-b border-gray-300 mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Requirement</h3>
|
||||
<ul class="list font-light">
|
||||
<HtmlRender content={get(courseData, 'metadata.requirements', '')} />
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Sections - Course Description -->
|
||||
<section id="description" class="border-b border-gray-300 mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3>
|
||||
<HtmlRender
|
||||
className="dark:text-white text-sm font-light"
|
||||
content={get(courseData, 'metadata.description', '')}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- Sections - Goal -->
|
||||
<section id="goals" class="mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">What you'll learn</h3>
|
||||
<ul class="list font-light">
|
||||
<HtmlRender content={get(courseData, 'metadata.goals', '')} />
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Sections - Certificate -->
|
||||
<section class="border-b border-gray-300 mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0">Certificate</h3>
|
||||
<p class="dark:text-white text-sm font-light mb-3">
|
||||
When you complete all of the courses in the program, you'll earn a Certificate to share
|
||||
with your professional network.
|
||||
</p>
|
||||
<img src="/images/certificate-template.svg" alt="certificate template" />
|
||||
</section>
|
||||
|
||||
<!-- Sections - Lessons -->
|
||||
<section id="lessons" class="border-b border-gray-300 mt-8 pb-10">
|
||||
<div class="flex items-center justify-between w-full mb-3">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Course Content</h3>
|
||||
<p class="dark:text-white text-sm font-light">
|
||||
<!-- {lessons.length} lessons -->
|
||||
{pluralize('lesson', lessons.length, true)}
|
||||
</p>
|
||||
</div>
|
||||
{#each lessons as lesson, index}
|
||||
<div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row">
|
||||
<div class="flex items-center mb-3">
|
||||
<Chip
|
||||
value={getLectureNo(index + 1, '0')}
|
||||
className="bg-primary-100 text-primary-700"
|
||||
/>
|
||||
<p class="dark:text-white ml-2 text-sm font-light">
|
||||
{lesson.title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-2/4">
|
||||
<div class="flex items-center">
|
||||
{#if lesson.slide_url}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><PresentationFile size={16} class="mr-1" />1 slide</span
|
||||
>
|
||||
{/if}
|
||||
{#if lesson.note}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><Notebook size={16} class="mr-1" />1 note</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
{#if lesson.videos}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><Video size={16} class="mr-1" />{lesson.videos.length} video{lesson.videos
|
||||
.length > 1
|
||||
? 's'
|
||||
: ''}
|
||||
</span>
|
||||
{/if}
|
||||
{#if get(lesson, 'totalExercises[0].count')}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><PageNumber size={16} class="mr-1" />{pluralize(
|
||||
'exercise',
|
||||
get(lesson, 'totalExercises[0].count', 0),
|
||||
true
|
||||
)}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<!-- Sections - Reviews -->
|
||||
{#if reviews && reviews.length > 0}
|
||||
<section id="reviews">
|
||||
<h2 class="my-16 mr-0 mb-6 ml-0 font-semibold">Reviews</h2>
|
||||
<div class="flex flex-wrap">
|
||||
{#each reviews.slice(0, 4) as review, id}
|
||||
{#if !review.hide}
|
||||
<!-- review -->
|
||||
<div class="flex flex-row item-start w-2/4 my-2">
|
||||
<!-- image container -->
|
||||
{#if review.avatar_url}
|
||||
<Avatar src={review.avatar_url} name="Avatar" className="mt-1" />
|
||||
{/if}
|
||||
|
||||
<!-- profile content -->
|
||||
<div class="pl-2.5 w-11/12">
|
||||
<p class="mb-0.5 font-medium">{review.name}</p>
|
||||
<!-- ratings -->
|
||||
<div class="flex flex-row items-center">
|
||||
{#if review.rating}
|
||||
<img src={ratingsImg[review.rating - 1]} class="w-24 mr-4 mt-1" alt="" />
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="read-more-content mb-2"
|
||||
style="max-height: {expandDescription[id] ? 'none' : '50px'}"
|
||||
>
|
||||
<p class="text-sm my-2 leading-5 text-gray-600">
|
||||
{review.description}
|
||||
</p>
|
||||
</div>
|
||||
{#if !expandDescription[id] && review.description.split(' ').length > 9}
|
||||
<button
|
||||
class="underline text-primary-700 mt-2 font-normal"
|
||||
on:click={() => toggleDescription(id)}>See More</button
|
||||
>
|
||||
{/if}
|
||||
{#if expandDescription[id]}
|
||||
<button
|
||||
class="underline text-primary-700 mt-2 font-normal"
|
||||
on:click={() => toggleDescription(id)}>See Less</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if reviews.length > 4}
|
||||
<PrimaryButton
|
||||
label="See All"
|
||||
className="w-3/12 p-4 mt-2"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => ($reviewsModalStore.open = true)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Reviews Modal -->
|
||||
<Modal
|
||||
onClose={() => ($reviewsModalStore.open = false)}
|
||||
bind:open={$reviewsModalStore.open}
|
||||
width="w-9/12"
|
||||
modalHeading="Reviews"
|
||||
>
|
||||
<div class="flex">
|
||||
<!-- ratings -->
|
||||
<div class="w-1/3">
|
||||
<h2 class="text-xl font-bold">
|
||||
{averageRating} Rating
|
||||
</h2>
|
||||
<h2 class="text-lg font-semibold mt-2">
|
||||
{reviews.length} Ratings
|
||||
</h2>
|
||||
</div>
|
||||
<!-- reviews -->
|
||||
<div class="flex flex-wrap w-4/6">
|
||||
{#each reviews as review, id}
|
||||
<!-- review -->
|
||||
<div class="flex flex-row item-start w-full my-2">
|
||||
<!-- image container -->
|
||||
{#if review.avatar_url}
|
||||
<Avatar src={review.avatar_url} name={review.name} className="mt-1" />
|
||||
{/if}
|
||||
|
||||
<!-- profile content -->
|
||||
<div class="pl-2.5 w-11/12">
|
||||
<p class="mb-0.5 font-medium">{review.name}</p>
|
||||
<!-- ratings -->
|
||||
<div class="flex flex-row">
|
||||
<img src="/images/rating-full.svg" alt="" class="mr-2" />
|
||||
<p class="text-xs text-gray-600">
|
||||
{calDateDiff(review.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="read-more-content mb-2"
|
||||
style="max-height: {expandDescription[id] ? 'none' : '50px'}"
|
||||
>
|
||||
<p class="text-sm my-2 leading-5 text-gray-600">
|
||||
{review.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Sections - Instructor -->
|
||||
<section id="instructor" class="mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Instructor</h3>
|
||||
<div class="flex items-center mb-4">
|
||||
<img
|
||||
alt="Author Avatar"
|
||||
class="block rounded-full h-20 w-20 mr-3"
|
||||
src={get(instructor, 'imgUrl', $currentOrg.avatar_url)}
|
||||
/>
|
||||
<div>
|
||||
<p class="dark:text-white text-md font-light">
|
||||
{get(instructor, 'name', '')}
|
||||
</p>
|
||||
<p class="dark:text-white text-xs font-light">
|
||||
{get(instructor, 'role', '')}
|
||||
</p>
|
||||
<p class="dark:text-white text-md font-light flex items-center">
|
||||
<PlayFilled size={16} class="text-primary-700" />
|
||||
<span class="ml-1">{get(instructor, 'courseNo', '')} courses</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="dark:text-white text-sm font-light">
|
||||
{get(instructor, 'description', '')}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Details -->
|
||||
<PricingSection
|
||||
{courseData}
|
||||
{editMode}
|
||||
bind:startCoursePayment
|
||||
className="target-component"
|
||||
/>
|
||||
</div>
|
||||
{#if !isVisible}
|
||||
<PricingSection
|
||||
{courseData}
|
||||
{editMode}
|
||||
bind:startCoursePayment
|
||||
mobile={true}
|
||||
className="w-full"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.banner {
|
||||
background-color: #040f2d;
|
||||
min-height: 472px;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: #7888b7;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
max-width: 559px;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--main-primary-color);
|
||||
display: block;
|
||||
bottom: -14px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
width: 405px;
|
||||
min-width: 330px;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
max-width: 608px;
|
||||
min-width: 60%;
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.list ul li) {
|
||||
margin-left: 1rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
:global(.plyr) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.read-more-content {
|
||||
max-height: 100px; /* Adjust this value to set the maximum height for the truncated content */
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.read-more-button {
|
||||
cursor: pointer;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.course-content {
|
||||
min-width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const landingPageStore = writable({
|
||||
header: {
|
||||
title: 'Online Business Masterclass: Sell Your Own Digital Products',
|
||||
description:
|
||||
'Create, Launch & Market Your Own Online Business w/ Digital Products such as Online Courses, Coaching, eBooks, Webinars+',
|
||||
duration: 'Estimated 8 weeks',
|
||||
cost: 300,
|
||||
currency: '$',
|
||||
buttonLabel: 'Enrol'
|
||||
},
|
||||
requirement: {
|
||||
content:
|
||||
"You don't need any experience creating an online business or digital product. \nYou don't need an online presence, website, or following - but it will help kickstart your online business if you do."
|
||||
},
|
||||
description: {
|
||||
content:
|
||||
"### Have you ever dreamed of starting your own online business?. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. \n### Enroll today and get instant access to. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.\n ### You will learn many types of digital marketing:\n\n Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
|
||||
},
|
||||
syllabus: {
|
||||
lessons: [
|
||||
{
|
||||
title: 'What is FinTech?'
|
||||
},
|
||||
{
|
||||
title: 'Payments, Cryptocurrencies and Blockchain'
|
||||
},
|
||||
{
|
||||
title: 'Digital Finance and Alternative Finance'
|
||||
},
|
||||
{
|
||||
title: 'FinTech Regulation and RegTech'
|
||||
},
|
||||
{
|
||||
title: 'Data & TechFin'
|
||||
}
|
||||
]
|
||||
},
|
||||
aboutUs: {
|
||||
companyName: 'The Brad School',
|
||||
logoUrl: 'https://img-c.udemycdn.com/user/200_H/19701574_95d1_13.jpg',
|
||||
description:
|
||||
'*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!'
|
||||
},
|
||||
reviews: [
|
||||
{
|
||||
id: 1,
|
||||
show: true,
|
||||
name: 'Adeyemi Adetunji',
|
||||
avatar_url: '/logo-192.png',
|
||||
rating: 1,
|
||||
created_at: new Date(),
|
||||
description: 'rice ventore officiis maxime laudantium recusandae sit dolor.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export const reviewsModalStore = writable({
|
||||
open: false
|
||||
});
|
||||
|
||||
export let handleOpenWidget = writable({
|
||||
open: false
|
||||
});
|
||||
Reference in New Issue
Block a user