+
{/if}
@@ -46,6 +46,7 @@
min-width: 300px;
max-width: 300px;
top: 0;
+ left: 0;
border-right: 1px solid var(--border-color);
background-color: rgb(250, 251, 252);
diff --git a/src/components/CourseLandingPage/components/Editor/DescriptionForm.svelte b/src/components/CourseLandingPage/components/Editor/DescriptionForm.svelte
index acf92a2a..83c03cac 100644
--- a/src/components/CourseLandingPage/components/Editor/DescriptionForm.svelte
+++ b/src/components/CourseLandingPage/components/Editor/DescriptionForm.svelte
@@ -1,6 +1,17 @@
-
+
+ {
+ const _course = cloneDeep(course);
+ set(_course, 'metadata.description', html);
+ course = _course;
+ }}
+ />
+
diff --git a/src/components/CourseLandingPage/components/Editor/GoalsForm.svelte b/src/components/CourseLandingPage/components/Editor/GoalsForm.svelte
new file mode 100644
index 00000000..2dfb961b
--- /dev/null
+++ b/src/components/CourseLandingPage/components/Editor/GoalsForm.svelte
@@ -0,0 +1,17 @@
+
+
+
+ {
+ const _course = cloneDeep(course);
+ set(_course, 'metadata.goals', html);
+ course = _course;
+ }}
+ />
+
diff --git a/src/components/CourseLandingPage/components/Editor/HeaderForm.svelte b/src/components/CourseLandingPage/components/Editor/HeaderForm.svelte
index f05c2444..a07cd021 100644
--- a/src/components/CourseLandingPage/components/Editor/HeaderForm.svelte
+++ b/src/components/CourseLandingPage/components/Editor/HeaderForm.svelte
@@ -1,38 +1,31 @@
-
+
-
-
-
-
diff --git a/src/components/CourseLandingPage/components/Editor/InstructorForm.svelte b/src/components/CourseLandingPage/components/Editor/InstructorForm.svelte
new file mode 100644
index 00000000..92ba33bc
--- /dev/null
+++ b/src/components/CourseLandingPage/components/Editor/InstructorForm.svelte
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/CourseLandingPage/components/Editor/PricingForm.svelte b/src/components/CourseLandingPage/components/Editor/PricingForm.svelte
new file mode 100644
index 00000000..e880a1e2
--- /dev/null
+++ b/src/components/CourseLandingPage/components/Editor/PricingForm.svelte
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+ No
+ Yes
+
+
+
+{#if showDiscount}
+
+{/if}
+
+
+
+
+ No
+ Yes
+
+
+
+{#if giftToggled}
+
About Gift
+
+
+ {
+ const _course = cloneDeep(course);
+ set(_course, 'metadata.reward.description', html);
+ course = _course;
+ }}
+ />
+
+{/if}
diff --git a/src/components/CourseLandingPage/components/Editor/RequirementForm.svelte b/src/components/CourseLandingPage/components/Editor/RequirementForm.svelte
index bc80c508..96a78a36 100644
--- a/src/components/CourseLandingPage/components/Editor/RequirementForm.svelte
+++ b/src/components/CourseLandingPage/components/Editor/RequirementForm.svelte
@@ -1,6 +1,17 @@
-
+
+ {
+ const _course = cloneDeep(course);
+ set(_course, 'metadata.requirements', html);
+ course = _course;
+ }}
+ />
+
diff --git a/src/components/CourseLandingPage/components/Editor/SyllabusForm.svelte b/src/components/CourseLandingPage/components/Editor/SyllabusForm.svelte
deleted file mode 100644
index 4e277bce..00000000
--- a/src/components/CourseLandingPage/components/Editor/SyllabusForm.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
Lessons
-
-{#each $landingPageStore.syllabus.lessons as lesson, index}
-
-
-
- handleDelete(index)}
- contained={true}
- size="small"
- />
-
-
-{/each}
-
-
diff --git a/src/components/CourseLandingPage/components/Editor/index.svelte b/src/components/CourseLandingPage/components/Editor/index.svelte
index 9914c08c..feb4a9d5 100644
--- a/src/components/CourseLandingPage/components/Editor/index.svelte
+++ b/src/components/CourseLandingPage/components/Editor/index.svelte
@@ -8,13 +8,18 @@
import HeaderForm from './HeaderForm.svelte';
import RequirementForm from './RequirementForm.svelte';
import DescriptionForm from './DescriptionForm.svelte';
- import SyllabusForm from './SyllabusForm.svelte';
- import AboutUsForm from './AboutUsForm.svelte';
+ import PricingForm from './PricingForm.svelte';
+ import GoalsForm from './GoalsForm.svelte';
+ import InstructorForm from './InstructorForm.svelte';
import PrimaryButton from '../../../PrimaryButton/index.svelte';
+ import { VARIANTS } from '../../../PrimaryButton/constants';
+ import { updateCourse } from '../../../../utils/services/courses';
+ export let course;
export let courseId;
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
+ let loading = false;
const sections = [
{
@@ -31,11 +36,15 @@
},
{
key: 4,
- title: 'Syllabus',
+ title: 'Goals',
},
{
key: 5,
- title: 'About Us',
+ title: 'Instructor',
+ },
+ {
+ key: 6,
+ title: 'Pricing',
},
];
let selectedSection = null;
@@ -55,29 +64,66 @@
};
}
- function handlePublish() {}
+ function generateSlug(title) {
+ return title
+ .replaceAll(' ', '-')
+ .toLowerCase()
+ .concat(`-${new Date().getTime()}`);
+ }
+
+ async function handleSave() {
+ loading = true;
+ course.slug = course.slug || generateSlug(course.title);
+
+ await updateCourse(courseId, undefined, {
+ ...course,
+ attendance: undefined,
+ group: undefined,
+ lessons: 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');
+ }
-
+
+
{#if !selectedSection}
-
+
-
+
Page Builder
{#each sections as section}
{/each}
{:else}
-
+
+
-
+
{#if selectedSection.key === 1}
-
+
{:else if selectedSection.key === 2}
-
+
{:else if selectedSection.key === 3}
-
+
{:else if selectedSection.key === 4}
-
+
{:else if selectedSection.key === 5}
-
+
+ {:else if selectedSection.key === 6}
+
{/if}
{/if}
diff --git a/src/components/CourseLandingPage/components/PricingSection.svelte b/src/components/CourseLandingPage/components/PricingSection.svelte
new file mode 100644
index 00000000..79f27d68
--- /dev/null
+++ b/src/components/CourseLandingPage/components/PricingSection.svelte
@@ -0,0 +1,147 @@
+
+
+
+
+
+
diff --git a/src/components/CourseLandingPage/constants.ts b/src/components/CourseLandingPage/constants.ts
index 9b1e8150..8207d4d8 100644
--- a/src/components/CourseLandingPage/constants.ts
+++ b/src/components/CourseLandingPage/constants.ts
@@ -1,9 +1,10 @@
export const SECTION_KEYS = {
HEADER: 'header',
- REQUIREMENT: 'requirement',
- DESCRIPTION: 'description',
- SYLLABUS: 'syllabus',
- ABOUT_US: 'about-us',
+ REQUIREMENT: '#requirement',
+ DESCRIPTION: '#description',
+ GOALS: '#goals',
+ LESSONS: '#lessons',
+ INSTRUCTOR: '#instructor',
};
export const NAV_ITEMS = [
@@ -16,11 +17,15 @@ export const NAV_ITEMS = [
label: 'Description',
},
{
- key: SECTION_KEYS.SYLLABUS,
- label: 'Syllabus',
+ key: SECTION_KEYS.GOALS,
+ label: 'Goals',
},
{
- key: SECTION_KEYS.ABOUT_US,
- label: 'About Us',
+ key: SECTION_KEYS.LESSONS,
+ label: 'Lessons',
+ },
+ {
+ key: SECTION_KEYS.INSTRUCTOR,
+ label: 'Instructor',
},
];
diff --git a/src/components/CourseLandingPage/index.svelte b/src/components/CourseLandingPage/index.svelte
index 6a6d1c31..2f5feb05 100644
--- a/src/components/CourseLandingPage/index.svelte
+++ b/src/components/CourseLandingPage/index.svelte
@@ -1,163 +1,347 @@
-
- {$landingPageStore.header.title}
+ {get(courseData, 'title', '')}
-
-
-
-
- {$landingPageStore.header.title}
+
+
+
+
+
+
+ {get(courseData, 'title', '')}
-
- {$landingPageStore.header.description}
-
-
-
-
- Last updated 10/2021
-
-
-
-
-
-
- {$landingPageStore.header.duration}
+
+ {get(courseData, 'description', '')}
-
-
- {$landingPageStore.header.currency}{$landingPageStore.header.cost}
+
+
+ {get(courseData, 'metadata.instructor.name', '')}
+
+
+ {#if video}
+
+
+ {:else}
+
+ {/if}
+
+
+
+
+
-
+
+
+ Requirement
+
+ {@html get(courseData, 'metadata.requirements', '')}
+
+
-
-
-
+
+
+ Course Description
+
+ {@html get(courseData, 'metadata.description', '')}
+
+
-
-
-
+
+
+ What you'll learn
+
+ {@html get(courseData, 'metadata.goals', '')}
+
+
-
- {#each $landingPageStore.syllabus.lessons as lesson, index}
-
-
Lesson {index + 1}.
- {lesson.title}
+
+
+ Certificate
+
+ When you complete all of the courses in the program, you'll earn a
+ Certificate to share with your professional network.
+
+ 
+
+
+
+
+
+
Course Content
+
+
+ {pluralize('lesson', lessons.length, true)}
+
+
+
+
+
+
+ {#if lesson.slide_url}
+
1 slide
+ {/if}
+ {#if lesson.note}
+
1 note
+ {/if}
+
+
+ {#if lesson.video_url}
+
1 video
+ {/if}
+ {#if get(lesson, 'totalExercises[0].count')}
+
{pluralize(
+ 'exercise',
+ get(lesson, 'totalExercises[0].count', 0),
+ true
+ )}
+ {/if}
+
+
+
+
+
+
+ Instructor
+
+
+
+
{get(instructor, 'name', '')}
+
{get(instructor, 'role', '')}
+
+
+ {get(instructor, 'courseNo', '')} courses
+
+
+
+ {get(instructor, 'description', '')}
+
+
-
-
-
+
+
+
diff --git a/src/components/Courses/components/Card/index.svelte b/src/components/Courses/components/Card/index.svelte
index 5fce4988..5b5bd203 100644
--- a/src/components/Courses/components/Card/index.svelte
+++ b/src/components/Courses/components/Card/index.svelte
@@ -35,7 +35,7 @@
diff --git a/src/components/Courses/index.svelte b/src/components/Courses/index.svelte
index 86e0920d..a224dab9 100644
--- a/src/components/Courses/index.svelte
+++ b/src/components/Courses/index.svelte
@@ -1,6 +1,6 @@
-
-
-
Created with love by
+ Created with love by
Rotimi Best
+ target="_blank">Rotimi Best
+
+
diff --git a/src/components/Form/TextArea.svelte b/src/components/Form/TextArea.svelte
index 492a43ae..969b0e78 100644
--- a/src/components/Form/TextArea.svelte
+++ b/src/components/Form/TextArea.svelte
@@ -5,7 +5,8 @@
export let rows = '3';
export let maxRows = 3;
export let className = '';
- export let bgColor = 'bg-gray-100';
+ export let labelClassName = '';
+ export let bgColor = 'bg-gray-200';
export let helperMessage = '';
export let errorMessage = '';
export let isRequired = false;
@@ -17,7 +18,7 @@
diff --git a/src/components/PrimaryButton/index.svelte b/src/components/PrimaryButton/index.svelte
index dab17b70..0fc77aaa 100644
--- a/src/components/PrimaryButton/index.svelte
+++ b/src/components/PrimaryButton/index.svelte
@@ -13,7 +13,7 @@
export let isLoading = false;
$: variant = isLoading ? VARIANTS.OUTLINED : variant;
- $: isDisabled = isLoading ? true : isDisabled;
+ $: isDisabled = isLoading ? true : false;