From 6efb82cd1088bc01a29ec80964ff1277bba2cded Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 26 Jul 2023 20:48:00 +0100
Subject: [PATCH 1/4] CLASSROOMIO-T-11: Refactoring

---
 .../components/Ceritficate/Design.svelte      | 33 +++++++++++++------
 .../Ceritficate/certificates/Plain.svelte     |  8 ++---
 .../certificates/Professional.svelte          | 10 +++---
 .../Course/components/Ceritficate/store.js    |  6 ----
 src/components/Course/store.ts                |  1 +
 src/routes/courses/[id]/certificates.svelte   | 22 +++++++------
 src/utils/types/index.ts                      |  1 +
 7 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/components/Course/components/Ceritficate/Design.svelte b/src/components/Course/components/Ceritficate/Design.svelte
index 8d2cbfb8..ae8e2147 100644
--- a/src/components/Course/components/Ceritficate/Design.svelte
+++ b/src/components/Course/components/Ceritficate/Design.svelte
@@ -6,8 +6,8 @@
   } from 'carbon-components-svelte';
   import UploadImage from './Upload.svelte';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import { course } from '../../../Course/store';
   import TextArea from '../../../Form/TextArea.svelte';
-  import { certificateInfo } from './store';
   import Professional from './certificates/Professional.svelte';
   import Plain from './certificates/Plain.svelte';
 
@@ -20,9 +20,22 @@
   ];
 
   let Selectedtheme = themes[0];
-  const saveCertificate = () => {};
-  const onToggle = (e) => {
-    console.log(e);
+  let isSaving = false;
+
+  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,
+      });
+     * */
+    // set isSaving to false
   };
 </script>
 
@@ -59,15 +72,14 @@
             rows={6}
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
-            bind:value={$certificateInfo.Desc}
-            onChange={$certificateInfo.Desc}
+            bind:value={$course.description}
           />
         </span>
 
         <Toggle
-          labelText="Add date of completion"
-          on:toggle={(e) => onToggle(e)}
-          class="my-2"
+          labelText="Automatically send certificates on completion"
+          bind:toggled={$course.auto_send_certificate}
+          class="my-4"
           size="sm"
         >
           <span slot="labelA" style="color: #161616">Automatic</span>
@@ -94,7 +106,8 @@
     <PrimaryButton
       label="Save Changes"
       className="rounded-md"
-      onClick={() => saveCertificate()}
+      onClick={saveCertificate}
+      isLoading={isSaving}
     />
   </div>
 </main>
diff --git a/src/components/Course/components/Ceritficate/certificates/Plain.svelte b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
index 0092c4b1..2cbf846e 100644
--- a/src/components/Course/components/Ceritficate/certificates/Plain.svelte
+++ b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
@@ -1,7 +1,7 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
-  import { certificateInfo } from '../store';
+  import { course } from '../../../../Course/store';
 
   let borderwidth = 'border-4';
   let bordercolor = 'border-pink-700';
@@ -22,8 +22,8 @@
     </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={$certificateInfo.Name}
         inputClassName="text-center placeholder:text-black"
         placeholder="Name of student"
         bgColor="bg-transparent"
@@ -34,7 +34,7 @@
         has successfully completed a courses in
       </p>
       <TextArea
-        bind:value={$certificateInfo.Title}
+        bind:value={$course.title}
         inputClassName=""
         placeholder="Name of course"
         bgColor="clamp bg-transparent text-base font-semibold text-pink-700 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none"
@@ -42,7 +42,7 @@
         maxRows="2"
       />
     </div>
-    <p class="desc text-center">{$certificateInfo.Desc}</p>
+    <p class="desc text-center">{$course.description}</p>
   </div>
 </div>
 
diff --git a/src/components/Course/components/Ceritficate/certificates/Professional.svelte b/src/components/Course/components/Ceritficate/certificates/Professional.svelte
index ae75d2ef..7041c132 100644
--- a/src/components/Course/components/Ceritficate/certificates/Professional.svelte
+++ b/src/components/Course/components/Ceritficate/certificates/Professional.svelte
@@ -1,7 +1,7 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
-  import { certificateInfo } from '../store';
+  import { course } from '../../../../Course/store';
 
   let borderwidth = 'border-l-8';
   let bordercolor = 'border-blue-800';
@@ -18,8 +18,8 @@
       </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={$certificateInfo.Name}
           inputClassName="text-center placeholder:text-black"
           placeholder="Name of student"
           bgColor="bg-transparent"
@@ -30,7 +30,7 @@
           has successfully completed introductory courses in
         </p>
         <TextArea
-          bind:value={$certificateInfo.Title}
+          bind:value={$course.title}
           inputClassName=""
           placeholder="Name of course"
           bgColor="clamp bg-transparent font-semibold text-blue-800 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none border-none"
@@ -38,7 +38,9 @@
           maxRows="2"
         />
       </div>
-      <p class="desc mb-2 text-justify">{$certificateInfo.Desc}</p>
+      <p class="desc mb-2 text-justify">
+        {$course.description}
+      </p>
       <div>
         <img src={logo} alt="logo" class="my-2" />
       </div>
diff --git a/src/components/Course/components/Ceritficate/store.js b/src/components/Course/components/Ceritficate/store.js
index ebf95c95..91a32632 100644
--- a/src/components/Course/components/Ceritficate/store.js
+++ b/src/components/Course/components/Ceritficate/store.js
@@ -12,12 +12,6 @@ export const issueCertificateModal = writable({
   message: '',
 });
 
-export const certificateInfo = writable({
-  Name: 'Name of student',
-  Title: 'Desiging functional components',
-  Desc: '(Introduction to Digital Devices, The Internet Mobile Applications, Introduction to Social Media, Using social media for business, Digital Content Creation and Distribution,  Using mobile money in business, Digital financial management,Digital Empowerment,Digital Safety)',
-});
-
 export const resetForm = () =>
   issueCertificateModal.update(() => ({
     open: false,
diff --git a/src/components/Course/store.ts b/src/components/Course/store.ts
index 580cc315..0bbd11f6 100644
--- a/src/components/Course/store.ts
+++ b/src/components/Course/store.ts
@@ -10,6 +10,7 @@ export const course: Writable<Course> = writable({
   description: '',
   cost: 0,
   currency: '',
+  auto_send_certificate: false,
   metadata: {
     requirements: '',
     description: '',
diff --git a/src/routes/courses/[id]/certificates.svelte b/src/routes/courses/[id]/certificates.svelte
index d85081a8..2433c73b 100644
--- a/src/routes/courses/[id]/certificates.svelte
+++ b/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 { 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,18 +35,21 @@
 </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" />
@@ -61,6 +66,3 @@
     </Tabs>
   </PageBody>
 </CourseContainer>
-
-<style>
-</style>
diff --git a/src/utils/types/index.ts b/src/utils/types/index.ts
index d1e10b0c..84c0731b 100644
--- a/src/utils/types/index.ts
+++ b/src/utils/types/index.ts
@@ -96,6 +96,7 @@ export interface Course {
   currency?: string;
   group?: Group;
   organization?: Organization;
+  auto_send_certificate?: boolean;
 }
 
 export interface Groupmember {

From e7a8e366baa502c542996bdd587696a7e1ea5672 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 26 Jul 2023 21:02:24 +0100
Subject: [PATCH 2/4] CLASSROOMIO-T-11: Add auto send key

---
 src/components/Course/components/Ceritficate/Design.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Course/components/Ceritficate/Design.svelte b/src/components/Course/components/Ceritficate/Design.svelte
index ae8e2147..ca6ab539 100644
--- a/src/components/Course/components/Ceritficate/Design.svelte
+++ b/src/components/Course/components/Ceritficate/Design.svelte
@@ -33,6 +33,7 @@
      * 
      * await updateCourse($course.id, undefined, {
         description: $course.description,
+        auto_send_certificate: $course.auto_send_certificate
       });
      * */
     // set isSaving to false

From 964b5189c9657b2665cce8b9a576ef2318f51aef Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 26 Jul 2023 21:06:46 +0100
Subject: [PATCH 3/4] CLASSROOMIO-T-11: Temp disable design tab

---
 src/routes/courses/[id]/certificates.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/routes/courses/[id]/certificates.svelte b/src/routes/courses/[id]/certificates.svelte
index 2433c73b..7617fe12 100644
--- a/src/routes/courses/[id]/certificates.svelte
+++ b/src/routes/courses/[id]/certificates.svelte
@@ -18,7 +18,7 @@
   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 } from 'carbon-components-svelte';
@@ -53,15 +53,16 @@
   <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>

From 5453ed362689480480ca418bd91fd6a3ee0f2a21 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 26 Jul 2023 21:51:52 +0100
Subject: [PATCH 4/4] CLASSROOMIO-T-11: Add settings to make certificate
 downloadable

---
 .../Course/components/Ceritficate/Design.svelte        | 10 +++++-----
 src/components/Course/store.ts                         |  2 +-
 src/utils/types/index.ts                               |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Course/components/Ceritficate/Design.svelte b/src/components/Course/components/Ceritficate/Design.svelte
index ca6ab539..7ecc6372 100644
--- a/src/components/Course/components/Ceritficate/Design.svelte
+++ b/src/components/Course/components/Ceritficate/Design.svelte
@@ -33,7 +33,7 @@
      * 
      * await updateCourse($course.id, undefined, {
         description: $course.description,
-        auto_send_certificate: $course.auto_send_certificate
+        is_certificate_downloadable: $course.is_certificate_downloadable
       });
      * */
     // set isSaving to false
@@ -78,13 +78,13 @@
         </span>
 
         <Toggle
-          labelText="Automatically send certificates on completion"
-          bind:toggled={$course.auto_send_certificate}
+          labelText="Allow students download certificate"
+          bind:toggled={$course.is_certificate_downloadable}
           class="my-4"
           size="sm"
         >
-          <span slot="labelA" style="color: #161616">Automatic</span>
-          <span slot="labelB" style="color: green">Automatic</span>
+          <span slot="labelA" style="color: #161616">Student access</span>
+          <span slot="labelB" style="color: green">Student access</span>
         </Toggle>
       </div>
     </section>
diff --git a/src/components/Course/store.ts b/src/components/Course/store.ts
index 0bbd11f6..54431892 100644
--- a/src/components/Course/store.ts
+++ b/src/components/Course/store.ts
@@ -10,7 +10,7 @@ export const course: Writable<Course> = writable({
   description: '',
   cost: 0,
   currency: '',
-  auto_send_certificate: false,
+  is_certificate_downloadable: false,
   metadata: {
     requirements: '',
     description: '',
diff --git a/src/utils/types/index.ts b/src/utils/types/index.ts
index 84c0731b..e613593f 100644
--- a/src/utils/types/index.ts
+++ b/src/utils/types/index.ts
@@ -96,7 +96,7 @@ export interface Course {
   currency?: string;
   group?: Group;
   organization?: Organization;
-  auto_send_certificate?: boolean;
+  is_certificate_downloadable?: boolean;
 }
 
 export interface Groupmember {