CLASSROOMIO-T-11:Fixed the merge conflicts after careful review

src/components/Course/components/Ceritficate/Design.svelte

@@ -22,11 +22,27 @@
   ];
 
   let Selectedtheme = themes[0];
+  let isSaving = false;
 
-  const saveCertificate = () => {};
   const onToggle = (e) => {
     console.log(e);
   };
+  const saveCertificate = () => {
+    // set isSaving to true
+    // Validation - make sure description isn't empty
+    // Upload the brand logo to give you a URL
+    // Update organisation logo (like in `src/components/Org/Settings/OrgSettings.svelte` line 25-51)
+    //    - Note from the file above both logo and name is updated, in this case we only want to update logo
+    /**
+     * Update only course description (like in src/components/Course/components/Settings/index.svelte)
+     * 
+     * await updateCourse($course.id, undefined, {
+        description: $course.description,
+        is_certificate_downloadable: $course.is_certificate_downloadable
+      });
+     * */
+    // set isSaving to false
+  };
 </script>
 
 <main class="md:-ml-4 md:-mr-4">
@@ -72,17 +88,16 @@
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
             bind:value={$course.description}
-            onChange={$course.description}
           />
         </span>
         <Toggle
-          labelText="Add date of completion"
-          on:toggle={(e) => onToggle(e)}
-          class="my-2"
+          labelText="Allow students download certificate"
+          bind:toggled={$course.is_certificate_downloadable}
+          class="my-4"
           size="sm"
         >
-          <span slot="labelA" style="color: #161616">Date</span>
-          <span slot="labelB" style="color: green">Date</span>
+          <span slot="labelA" style="color: #161616">Student access</span>
+          <span slot="labelB" style="color: green">Student access</span>
         </Toggle>
       </div>
     </section>
@@ -102,7 +117,8 @@
     <PrimaryButton
       label="Save Changes"
       className="rounded-md"
-      onClick={() => saveCertificate()}
+      onClick={saveCertificate}
+      isLoading={isSaving}
     />
   </div>
 </main>

src/components/Course/components/Ceritficate/certificates/Plain.svelte

@@ -28,6 +28,7 @@
     </p>
     <div class="border-b border-gray-500 mb-4">
       <p class="text-xs text-black font-medium">This is to certify that</p>
+      <!-- TODO: Nothing in this file should be editable -->
       <TextField
         bind:value={studentName}
         inputClassName="text-center placeholder:text-black"

src/components/Course/components/Ceritficate/certificates/Professional.svelte

@@ -19,6 +19,7 @@
       </p>
       <div class="border-b border-gray-500 mb-4">
         <p class="text-xs text-black font-medium">This is to certify that</p>
+        <!-- TODO: Nothing in this file should be editable -->
         <TextField
           bind:value={studentName}
           inputClassName="text-center placeholder:text-black"

src/components/Course/store.ts

@@ -10,6 +10,7 @@ export const course: Writable<Course> = writable({
   description: '',
   cost: 0,
   currency: '',
+  is_certificate_downloadable: false,
   metadata: {
     requirements: '',
     description: '',

src/routes/courses/[id]/certificates.svelte

@@ -1,7 +1,7 @@
 <script context="module">
   import { fetchCourse } from '../../../utils/services/courses';
 
-  export async function preload({ params }) {
+  export async function preload({ params = { id: '' } }) {
     return { courseId: params.id };
   }
 </script>
@@ -11,20 +11,22 @@
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
 
   import PageNav from '../../../components/PageNav/index.svelte';
-  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  // import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
   import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
-  import { setCourse, course, group } from '../../../components/Course/store';
+  import { setCourse, course } from '../../../components/Course/store';
   import IssueCertificateModal from '../../../components/Course/components/Ceritficate/IssueCertificateModal.svelte';
   // import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
   import Design from '../../../components/Course/components/Ceritficate/Design.svelte';
-  import Reports from '../../../components/Course/components/Ceritficate/Reports.svelte';
+  // import Reports from '../../../components/Course/components/Ceritficate/Reports.svelte';
 
-  import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
-  import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+  // import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
+  import { Tabs, Tab } from 'carbon-components-svelte';
+  import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
 
   export let courseId: string = '';
   let isStudent = false;
+
   onMount(async () => {
     if ($course.id) return;
     const { data } = await fetchCourse(courseId);
@@ -33,34 +35,35 @@
 </script>
 
 <IssueCertificateModal />
+
 <CourseContainer bind:isStudent>
   <PageNav title="Certificates" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
+        <!-- Hide Functionality For V1 -->
+        <!-- <PrimaryButton
           className="mr-2 rounded-md text-sm font-medium"
           label="Issue Cert"
           onClick={() => ($issueCertificateModal.open = true)}
-        />
+        /> -->
       </RoleBasedSecurity>
     </slot:fragment>
   </PageNav>
+
   <PageBody className="w-full mx-0" padding="px-0">
     <Tabs autoWidth class="border-b border-gray-200">
       <Tab label="Design" />
-      <Tab label="Reports" />
+      <!-- <Tab label="Reports" /> -->
       <svelte:fragment slot="content">
         <TabContent>
           <Design />
         </TabContent>
 
-        <TabContent>
+        <!-- Temp disable Reports tab for V2 -->
+        <!-- <TabContent>
           <Reports />
-        </TabContent>
+        </TabContent> -->
       </svelte:fragment>
     </Tabs>
   </PageBody>
 </CourseContainer>
-
-<style>
-</style>

src/utils/types/index.ts

@@ -96,6 +96,7 @@ export interface Course {
   currency?: string;
   group?: Group;
   organization?: Organization;
+  is_certificate_downloadable?: boolean;
 }
 
 export interface Groupmember {