BC-5426 - Add a delete option to the school specific Privacy Policy and Terms of Use

src/components/organisms/administration/SchoolPolicy.unit.ts

@@ -2,6 +2,7 @@ import SchoolPolicy from "./SchoolPolicy.vue";
 import AuthModule from "@/store/auth";
 import SchoolsModule from "@/store/schools";
 import PrivacyPolicyModule from "@/store/privacy-policy";
+import NotifierModule from "@/store/notifier";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { shallowMount, Wrapper } from "@vue/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
@@ -10,6 +11,7 @@ import { ConsentVersion } from "@/store/types/consent-version";
 import {
 	AUTH_MODULE_KEY,
 	I18N_KEY,
+	NOTIFIER_MODULE_KEY,
 	PRIVACY_POLICY_MODULE_KEY,
 	SCHOOLS_MODULE_KEY,
 } from "@/utils/inject";
@@ -20,6 +22,7 @@ describe("SchoolPolicy", () => {
 	let authModule: jest.Mocked<AuthModule>;
 	let schoolsModule: jest.Mocked<SchoolsModule>;
 	let privacyPolicyModule: jest.Mocked<PrivacyPolicyModule>;
+	let notifierModule: jest.Mocked<NotifierModule>;
 
 	const mockPolicy: ConsentVersion = {
 		_id: "123",
@@ -68,6 +71,8 @@ describe("SchoolPolicy", () => {
 			...getters,
 		});
 
+		notifierModule = createModuleMocks(NotifierModule);
+
 		const wrapper: Wrapper<Vue> = shallowMount(SchoolPolicy, {
 			...createComponentMocks({
 				i18n: true,
@@ -77,6 +82,7 @@ describe("SchoolPolicy", () => {
 				[PRIVACY_POLICY_MODULE_KEY.valueOf()]: privacyPolicyModule,
 				[AUTH_MODULE_KEY.valueOf()]: authModule,
 				[SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule,
+				[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
 			},
 		});
 
@@ -108,22 +114,20 @@ describe("SchoolPolicy", () => {
 	});
 
 	describe("when privacy policy is found", () => {
-		it("should render download button", () => {
+		it("should render delete button", () => {
 			const wrapper = setup();
 
-			expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(
-				true
-			);
+			expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true);
 		});
 	});
 
 	describe("when privacy policy is not found", () => {
-		it("should not render download button", () => {
+		it("should not render delete button", () => {
 			const wrapper = setup({
 				getPrivacyPolicy: null,
 			});
 
-			expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(
+			expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(
 				false
 			);
 		});
@@ -167,6 +171,16 @@ describe("SchoolPolicy", () => {
 		});
 	});
 
+	describe("when user clicks delete button", () => {
+		it("should change isDeletePolicyDialogOpen to true", () => {
+			const wrapper = setup();
+
+			expect((wrapper.vm as any).isDeletePolicyDialogOpen).toBe(false);
+			wrapper.find('[data-testid="delete-button"]').trigger("click");
+			expect((wrapper.vm as any).isDeletePolicyDialogOpen).toBe(true);
+		});
+	});
+
 	describe("when error is thrown in privacyPolicyModule", () => {
 		it("should render error alert", () => {
 			const wrapper = setup({

src/components/organisms/administration/SchoolPolicy.vue

@@ -22,7 +22,7 @@
 				data-testid="progress-bar"
 			/>
 			<v-list-item v-else two-line dense class="mb-6" data-testid="policy-item">
-				<v-list-item-icon>
+				<v-list-item-icon class="me-4">
 					<v-icon>$file_pdf_outline</v-icon>
 				</v-list-item-icon>
 				<v-list-item-content>
@@ -34,7 +34,7 @@
 							{{
 								t("pages.administration.school.index.schoolPolicy.uploadedOn", {
 									date: dayjs(privacyPolicy.publishedAt).format(
-										t("format.dateTime")
+										t("format.date")
 									),
 								})
 							}}
@@ -50,7 +50,6 @@
 				</v-list-item-content>
 				<v-list-item-action
 					v-if="hasSchoolEditPermission"
-					class="edit-icon"
 					data-testid="edit-button"
 					@click="isSchoolPolicyFormDialogOpen = true"
 				>
@@ -60,22 +59,21 @@
 							t('pages.administration.school.index.schoolPolicy.edit')
 						"
 					>
-						<v-icon>$mdiPencilOutline</v-icon>
+						<v-icon>$mdiTrayArrowUp</v-icon>
 					</v-btn>
 				</v-list-item-action>
 				<v-list-item-action
 					v-if="privacyPolicy"
-					class="download-icon"
-					data-testid="download-button"
-					@click="downloadFile"
+					data-testid="delete-button"
+					@click="isDeletePolicyDialogOpen = true"
 				>
 					<v-btn
 						icon
 						:aria-label="
-							t('pages.administration.school.index.schoolPolicy.download')
+							t('pages.administration.school.index.schoolPolicy.delete.title')
 						"
 					>
-						<v-icon>$mdiTrayArrowDown</v-icon>
+						<v-icon>$mdiTrashCanOutline</v-icon>
 					</v-btn>
 				</v-list-item-action>
 			</v-list-item>
@@ -85,6 +83,28 @@
 				@close="closeDialog"
 				data-testid="form-dialog"
 			/>
+			<v-custom-dialog
+				v-model="isDeletePolicyDialogOpen"
+				:size="375"
+				has-buttons
+				confirm-btn-title-key="common.actions.delete"
+				confirm-btn-icon="$mdiTrashCanOutline"
+				@dialog-confirmed="deleteFile"
+				data-testid="delete-dialog"
+			>
+				<h4 class="text-h4 mt-0" slot="title">
+					{{ t("pages.administration.school.index.schoolPolicy.delete.title") }}
+				</h4>
+				<template #content>
+					<v-alert light text type="info" class="mb-0">
+						<div class="alert-text">
+							{{
+								t("pages.administration.school.index.schoolPolicy.delete.text")
+							}}
+						</div>
+					</v-alert>
+				</template>
+			</v-custom-dialog>
 		</template>
 	</section>
 </template>
@@ -102,20 +122,25 @@ import {
 	PRIVACY_POLICY_MODULE_KEY,
 	injectStrict,
 	SCHOOLS_MODULE_KEY,
+	NOTIFIER_MODULE_KEY,
 } from "@/utils/inject";
+import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 
 export default defineComponent({
 	name: "SchoolPolicy",
 	components: {
+		vCustomDialog,
 		SchoolPolicyFormDialog,
 	},
 	setup() {
 		const { t } = useI18n();
 		const authModule = injectStrict(AUTH_MODULE_KEY);
 		const privacyPolicyModule = injectStrict(PRIVACY_POLICY_MODULE_KEY);
 		const schoolsModule = injectStrict(SCHOOLS_MODULE_KEY);
+		const notifierModule = injectStrict(NOTIFIER_MODULE_KEY);
 
 		const isSchoolPolicyFormDialogOpen: Ref<boolean> = ref(false);
+		const isDeletePolicyDialogOpen: Ref<boolean> = ref(false);
 
 		const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
 		watch(
@@ -139,13 +164,16 @@ export default defineComponent({
 			() => privacyPolicyModule.getBusinessError
 		);
 
-		const downloadFile = () => {
-			const link = document.createElement("a");
-			link.href = privacyPolicy.value?.consentData.data as string;
-			link.download = t(
-				"pages.administration.school.index.schoolPolicy.fileName"
-			);
-			link.click();
+		const deleteFile = async () => {
+			await privacyPolicyModule.deletePrivacyPolicy();
+
+			notifierModule.show({
+				text: t(
+					"pages.administration.school.index.schoolPolicy.delete.success"
+				),
+				status: "success",
+				timeout: 10000,
+			});
 		};
 
 		const closeDialog = () => {
@@ -155,14 +183,22 @@ export default defineComponent({
 		return {
 			t,
 			isSchoolPolicyFormDialogOpen,
+			isDeletePolicyDialogOpen,
 			hasSchoolEditPermission,
 			privacyPolicy,
 			status,
 			error,
-			downloadFile,
+			deleteFile,
 			dayjs,
 			closeDialog,
 		};
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.alert-text {
+	color: var(--v-black-base) !important;
+	line-height: var(--line-height-lg) !important;
+}
+</style>

src/components/organisms/administration/SchoolPolicyFormDialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-custom-dialog :is-open="isOpen" :size="450" @dialog-closed="cancel">
+	<v-custom-dialog :is-open="isOpen" :size="375" @dialog-closed="cancel">
 		<h4 class="text-h4 mt-0" slot="title">
 			{{ t("common.words.privacyPolicy") }}
 		</h4>

src/components/organisms/administration/SchoolTerms.unit.ts

@@ -2,6 +2,7 @@ import SchoolTerms from "./SchoolTerms.vue";
 import AuthModule from "@/store/auth";
 import SchoolsModule from "@/store/schools";
 import TermsOfUseModule from "@/store/terms-of-use";
+import NotifierModule from "@/store/notifier";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { shallowMount, Wrapper } from "@vue/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
@@ -10,6 +11,7 @@ import { ConsentVersion } from "@/store/types/consent-version";
 import {
 	AUTH_MODULE_KEY,
 	I18N_KEY,
+	NOTIFIER_MODULE_KEY,
 	SCHOOLS_MODULE_KEY,
 	TERMS_OF_USE_MODULE_KEY,
 } from "@/utils/inject";
@@ -20,6 +22,7 @@ describe("SchoolTerms", () => {
 	let authModule: jest.Mocked<AuthModule>;
 	let schoolsModule: jest.Mocked<SchoolsModule>;
 	let termsOfUseModule: jest.Mocked<TermsOfUseModule>;
+	let notifierModule: jest.Mocked<NotifierModule>;
 
 	const mockTerms: ConsentVersion = {
 		_id: "123",
@@ -68,6 +71,8 @@ describe("SchoolTerms", () => {
 			...getters,
 		});
 
+		notifierModule = createModuleMocks(NotifierModule);
+
 		const wrapper: Wrapper<Vue> = shallowMount(SchoolTerms, {
 			...createComponentMocks({
 				i18n: true,
@@ -77,6 +82,7 @@ describe("SchoolTerms", () => {
 				[TERMS_OF_USE_MODULE_KEY.valueOf()]: termsOfUseModule,
 				[AUTH_MODULE_KEY.valueOf()]: authModule,
 				[SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule,
+				[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
 			},
 		});
 
@@ -108,22 +114,20 @@ describe("SchoolTerms", () => {
 	});
 
 	describe("when terms of use are found", () => {
-		it("should render download button", () => {
+		it("should render delete button", () => {
 			const wrapper = setup();
 
-			expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(
-				true
-			);
+			expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true);
 		});
 	});
 
 	describe("when terms of use are not found", () => {
-		it("should not render download button", () => {
+		it("should not render delete button", () => {
 			const wrapper = setup({
 				getTermsOfUse: null,
 			});
 
-			expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(
+			expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(
 				false
 			);
 		});
@@ -167,6 +171,16 @@ describe("SchoolTerms", () => {
 		});
 	});
 
+	describe("when user clicks delete button", () => {
+		it("should change isDeleteTermsDialogOpen to true", () => {
+			const wrapper = setup();
+
+			expect((wrapper.vm as any).isDeleteTermsDialogOpen).toBe(false);
+			wrapper.find('[data-testid="delete-button"]').trigger("click");
+			expect((wrapper.vm as any).isDeleteTermsDialogOpen).toBe(true);
+		});
+	});
+
 	describe("when error is thrown in termsOfUseModule", () => {
 		it("should render error alert", () => {
 			const wrapper = setup({